/* Fire Safety Hub, free tools (/tools/*): what the business tools share on top of hub.css.
   Site tokens only (01-tokens.css). Mobile first; checked at 360px. docs/HUB.md */

/* hidden must win over the grid display of hub sections and questions. */
.hub-section[hidden], .hub-q[hidden], .hub-tool [hidden] { display: none !important; }

/* Questions column. */
.hub-tool__questions { display: grid; min-width: 0; }
.hub-q__row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.hub-checks { display: grid; gap: 0; }
.hub-checks .check { min-height: 40px; font-size: var(--t-s); align-items: flex-start; padding-block: 6px; }
.hub-checks .check input { flex: none; margin-top: 1px; }
.hub-q__more { font-size: var(--t-s); color: var(--grey-text); }

/* A system with a quantity next to it (AMC scope builder); the count shows once ticked. */
.hub-sysqs { display: grid; border-top: 1px solid var(--rule); }
.hub-sysq { display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) { .hub-sysq { grid-template-columns: minmax(0, 1fr) 13rem; } }
.hub-sysq .check { font-size: var(--t-s); }
.hub-qty { padding-bottom: var(--s-2); }
.hub-qty .field__label { font-size: var(--t-xs); }
.hub-sysq:not(:has(input[type="checkbox"]:checked)) .hub-qty { display: none; }

/* A long result stays scrollable inside the sticky panel on wide screens. */
@media (min-width: 64rem) {
  .hub-tool__result .hub-result { max-height: calc(100vh - var(--header-h) - var(--s-7)); overflow: auto; }
}
.hub-result p { margin: 0; }
.hub-result .hub-rows li { align-items: center; }

/* Expandable rows: one per system or check. */
.hub-list-items { display: grid; border-top: 1px solid var(--rule); }
.hub-item { border-bottom: 1px solid var(--rule); }
.hub-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding-block: var(--s-4); font-size: var(--t-body); }
.hub-item > summary::-webkit-details-marker { display: none; }
.hub-item > summary::after { content: "+"; grid-column: 3; color: var(--grey-text); font-size: var(--t-m); line-height: 1; width: 1em; text-align: center; }
.hub-item[open] > summary::after { content: "–"; }
.hub-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hub-item__body { display: grid; gap: var(--s-3); padding-bottom: var(--s-5); max-width: var(--measure); font-size: var(--t-s); color: var(--ink-2); }
.hub-item__body p { margin: 0; }

/* Simple ticked lists. */
.hub-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-s); }
.hub-ticks li { position: relative; padding-inline-start: 1.25em; }
.hub-ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); }

/* Two columns of result blocks on wide screens. */
.hub-cols { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .hub-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.hub-cols > div, [data-result-detail] > div { display: grid; gap: var(--s-3); align-content: start; }

/* Numbers and fines. */
.hub-num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.hub-fines small { display: block; margin-top: 2px; }
.hub-fines small a { color: var(--grey-text); }

/* Static facts tables (the page without JavaScript, and for search engines). */
.hub-facts td { vertical-align: top; }
.hub-facts td:first-child { min-width: 9rem; }
.hub-facts .table__primary { font-size: var(--t-s); }

/* Key figures in a row: "4 visits a year · 12 extinguishers". */
.hub-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s-4); }
.hub-figures div { display: grid; gap: 2px; }
.hub-figures b { font-size: var(--t-l); font-weight: 500; font-variant-numeric: tabular-nums; line-height: var(--lh-head); }
.hub-figures span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--grey-text); }

/* Small notes inside a result. */
.hub-note { font-size: var(--t-s); color: var(--ink-2); padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--accent); }

/* Checklists (contractor check): tick, then "why and how" folded underneath. */
.hub-checklist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.hub-check-item { display: grid; gap: 0; padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
.hub-check-item .check { font-size: var(--t-body); align-items: flex-start; padding-top: var(--s-2); }
.hub-check-item .check input { flex: none; margin-top: 2px; }
.hub-check-item .check:has(input:checked) span { color: var(--grey-text); }
.hub-item--inline { border-bottom: 0; padding-inline-start: 32px; }
.hub-item--inline > summary { padding-block: 0 var(--s-2); grid-template-columns: auto auto; justify-content: start; }
.hub-item--inline > summary::after { grid-column: 2; font-size: var(--t-s); }
.hub-print-list { margin: 0; padding-inline-start: 1.4em; display: grid; gap: var(--s-3); font-size: var(--t-s); }
.hub-print-list li.is-done { color: var(--grey-text); }

@media print {
  .hub-tool__questions, .hub-result__actions, .masthead-long, .crumbs, [data-noprint] { display: none !important; }
  .hub-tool__result .hub-result { max-height: none; overflow: visible; }
  .hub-item > summary::after { content: none; }
}