/* Page-level layouts. */

.boot { height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--text-3); }
.boot-mark { width: 44px; height: 44px; border-radius: 14px; background: var(--raised-grad); box-shadow: var(--shadow-2), 0 0 26px -4px rgba(240, 138, 60, .55); animation: pulse-glow 1.4s ease-in-out infinite; }
.noscript { padding: 24px; color: var(--text-2); }

/* ── Overview ───────────────────────────────────────────────────────────────── */
.hero { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 18px; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(120% 160% at 0% 0%, rgba(240, 138, 60, .16) 0%, transparent 42%), var(--surface-grad); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(240, 138, 60, .14); box-shadow: inset 0 0 60px rgba(240, 138, 60, .06); pointer-events: none; }
.hero h2 { font-size: var(--fs-24); font-weight: 650; letter-spacing: -.02em; }
.hero .hero-sub { color: var(--text-3); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hero .hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1200px) { .dash .span-3 { grid-column: span 6; } .dash .span-4, .dash .span-5 { grid-column: span 6; } .dash .span-7, .dash .span-8 { grid-column: span 12; } }
@media (max-width: 760px) { .dash > * { grid-column: span 12 !important; } }

.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1600px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .quick { grid-template-columns: minmax(0, 1fr); } }
.quick-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-lg); background: var(--surface-grad); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); text-align: left; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); }
.quick-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-3), 0 0 0 1px var(--accent-line); text-decoration: none; }
.quick-tile .q-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--accent-hi); background: var(--sunken); box-shadow: var(--well); }
.quick-tile:hover .q-ic { color: var(--text-on-accent); background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 16px -2px rgba(240, 138, 60, .6); }
.quick-tile .q-t { font-weight: 650; color: var(--text-1); }
.quick-tile .q-s { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; line-height: 1.4; }

.project-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--dur-1), background var(--dur-1); min-width: 0; }
.project-card:hover { background: var(--surface-hi); box-shadow: inset 0 0 0 1px var(--accent-line); }
.project-card .pc-top { display: flex; align-items: center; gap: 10px; }
.project-card .pc-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card .pc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-3); }
.project-card .pc-meta span { display: inline-flex; gap: 5px; align-items: center; }

.activity { display: flex; flex-direction: column; }
.activity .a-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.activity .a-row:last-child { border-bottom: 0; }
.activity .a-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--sunken); box-shadow: var(--well); color: var(--text-3); }
.activity .a-text { font-size: var(--fs-12); color: var(--text-2); line-height: 1.45; }
.activity .a-text strong { color: var(--text-1); font-weight: 600; }
.activity .a-time { font-size: var(--fs-11); color: var(--text-4); white-space: nowrap; }

.validation-card .v-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.validation-card .v-facts { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-12); color: var(--text-3); }
.validation-card .v-facts strong { color: var(--text-1); font-weight: 600; }

.mini-chart { border-radius: var(--r-md); overflow: hidden; background: var(--chart-bg); box-shadow: var(--well); }

/* ── Directory (calculators) ────────────────────────────────────────────────── */
.dir-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.dir-cats { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.dir-cat { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--text-3); font-weight: 600; font-size: var(--fs-13); text-align: left; }
.dir-cat:hover { color: var(--text-1); background: var(--accent-softer); }
.dir-cat.is-active { color: var(--text-1); background: var(--accent-soft); }
.dir-cat .count { margin-left: auto; font-size: var(--fs-11); color: var(--text-4); font-variant-numeric: tabular-nums; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.calc-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: var(--r-lg); background: var(--surface-grad); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); text-align: left; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); min-height: 132px; }
.calc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-3), 0 0 0 1px var(--accent-line); text-decoration: none; }
.calc-tile .ct-top { display: flex; align-items: center; gap: 10px; }
.calc-tile .ct-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); box-shadow: var(--well); color: var(--accent-hi); flex: none; }
.calc-tile .ct-title { font-weight: 650; color: var(--text-1); line-height: 1.3; }
.calc-tile .ct-sum { font-size: var(--fs-12); color: var(--text-3); line-height: 1.45; }
.calc-tile .ct-foot { margin-top: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.calc-tile .ct-star { position: absolute; z-index: 1; top: 5px; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-4); }
/* The title link covers the tile, so the whole tile opens the calculator while the star stays a button of its own. */
.calc-tile .ct-link { color: var(--text-1); }
.calc-tile .ct-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.calc-tile .ct-link:hover { text-decoration: none; }
.calc-tile .ct-link:focus-visible { box-shadow: none; }
.calc-tile .ct-link:focus-visible::after { box-shadow: var(--focus-ring); }
.calc-tile .ct-star.on { color: var(--accent-hi); filter: drop-shadow(0 0 6px rgba(240, 138, 60, .6)); }
@media (max-width: 860px) { .dir-layout { grid-template-columns: minmax(0, 1fr); } .dir-cats { position: static; flex-direction: row; overflow-x: auto; } .dir-cat { white-space: nowrap; } }

/* ── Calculator page ────────────────────────────────────────────────────────── */
.calc-layout { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.calc-inputs .card-body { display: flex; flex-direction: column; gap: 12px; }
.calc-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.result-primary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.method { font-size: var(--fs-13); color: var(--text-2); line-height: 1.6; }
.method .eq { margin: 8px 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunken); box-shadow: var(--well); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-1); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.method ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1000px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }

/* ── Records (projects, equipment, commissioning) ───────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .search { position: relative; flex: 1 1 260px; max-width: 380px; }
.toolbar .search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-4); pointer-events: none; }
.toolbar .search .input { padding-left: 34px; }
.detail-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.detail-head .dh-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; color: var(--accent-hi); background: var(--raised-grad); box-shadow: var(--shadow-2), 0 0 0 1px var(--line), 0 0 22px -8px rgba(240, 138, 60, .6); }
.detail-head h2 { font-size: var(--fs-24); font-weight: 650; letter-spacing: -.02em; }
.detail-head .dh-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; color: var(--text-3); font-size: var(--fs-12); }
.detail-head .dh-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 14px; font-size: var(--fs-13); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }

.checklist-section { margin-bottom: 14px; }
.check-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
.check-item.is-fail { box-shadow: inset 0 0 0 1px rgba(234, 107, 97, .4); background: linear-gradient(90deg, var(--bad-soft), transparent 40%), var(--surface-lo); }
.check-item.is-pass { box-shadow: inset 0 0 0 1px rgba(95, 190, 137, .28); }
.check-item.is-review { box-shadow: inset 0 0 0 1px rgba(233, 177, 76, .35); }
.check-item .ci-text { font-weight: 600; color: var(--text-1); }
.check-item .ci-sub { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; }
.check-item .ci-measure { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.result-pick { display: inline-flex; gap: 4px; }
.result-pick button { height: 30px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: 650; color: var(--text-3); background: var(--sunken); box-shadow: var(--well); }
.result-pick button:hover { color: var(--text-1); }
.result-pick button.pass.is-active { color: #0f2a1a; background: linear-gradient(180deg, #8fe0b2, #4fb47d); box-shadow: 0 0 12px -2px rgba(95, 190, 137, .7); }
.result-pick button.fail.is-active { color: #2a0d0a; background: linear-gradient(180deg, #f39a91, #d7584e); box-shadow: 0 0 12px -2px rgba(234, 107, 97, .7); }
.result-pick button.review.is-active { color: #2b1d02; background: linear-gradient(180deg, #f6cf7f, #d9a032); box-shadow: 0 0 12px -2px rgba(233, 177, 76, .7); }
.result-pick button.na.is-active { color: var(--text-1); background: var(--raised-grad); box-shadow: var(--shadow-1); }
@media (max-width: 560px) { .check-item { grid-template-columns: minmax(0, 1fr); } }

/* Functional test: device list, criteria, the step runner (sized for a tablet at the unit) and results. */
.ft-devices, .ft-results { display: flex; flex-direction: column; gap: 6px; }
.ft-dev, .ft-res { border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.ft-dev.is-off { opacity: .62; }
.ft-dev-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 48px; }
.ft-include { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.ft-dev-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--accent-hi); background: var(--raised-grad); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.ft-dev-main { flex: 1; min-width: 0; }
.ft-dev-title { display: flex; gap: 8px; align-items: baseline; font-weight: 600; color: var(--text-1); min-width: 0; }
.ft-dev-title .num { color: var(--accent-hi); }
.ft-dev-pts { white-space: nowrap; }
.ft-dev-edit { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 12px 50px; }
.ft-points td { vertical-align: middle; }
.ft-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ft-crit { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.ft-crit-head { display: flex; gap: 10px; align-items: flex-start; }
.ft-script { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-13); }
.ft-script li { padding: 3px 0; }
.ft-script li > * { vertical-align: middle; }
.ft-script li .badge { margin-left: 8px; }
.ft-faults { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-height: 320px; overflow: auto; padding: 2px; }
.ft-step .ft-instruction { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-1); }
.ft-kv { grid-template-columns: 110px minmax(0, 1fr); font-size: var(--fs-12); }
.ft-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-actions .btn-lg { min-height: 48px; }
.ft-timer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-timer { font-size: 30px; font-weight: 700; letter-spacing: .01em; color: var(--text-1); min-width: 5ch; }
.ft-release { margin: 6px 0 0; padding-left: 20px; columns: 2; font-size: var(--fs-13); }
.ft-override { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
/* Logged data imported for a functional test run: the file shown is outlined, not only tinted. */
.tl-file.is-chosen { border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent); }
.tl-steps td { vertical-align: top; }
.tl-steps td:first-child { min-width: 16rem; }
.tl-steps td:first-child .row { align-items: flex-start; }
.tl-steps td .btn-sm { min-width: 32px; justify-content: center; font-variant-numeric: tabular-nums; }
.ft-steplist { position: relative; margin: 0; padding: 0; list-style: none; max-height: 560px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ft-steplist li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-12); }
.ft-steplist li .num.t-4 { width: 22px; flex: none; text-align: right; }
.ft-steplist li.is-current { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--text-1); }
.ft-verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-hi); box-shadow: inset 0 0 0 1px var(--line); }
.ft-verdict.ok { background: var(--ok-soft); box-shadow: inset 0 0 0 1px rgba(95, 190, 137, .3); } .ft-verdict.ok > .icon { color: var(--ok); }
.ft-verdict.bad { background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(234, 107, 97, .3); } .ft-verdict.bad > .icon { color: var(--bad); }
.ft-verdict.warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(233, 177, 76, .3); } .ft-verdict.warn > .icon { color: var(--warn); }
.ft-verdict-label { font-size: var(--fs-16); font-weight: 700; color: var(--text-1); }
.ft-verdict-text { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.ft-res-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; text-align: left; color: inherit; background: none; border: 0; border-radius: var(--r-md); cursor: pointer; }
.ft-res-row:hover { background: var(--accent-softer); }
.ft-res-name { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; font-weight: 600; color: var(--text-1); }
.ft-res-name .num { color: var(--accent-hi); }
.ft-res-kind, .ft-res-count { white-space: nowrap; }
.ft-res-steps { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 12px 50px; }
.ft-sr { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ft-sr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ft-sr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 12px 16px; align-items: start; }
.ft-sr-body > :only-child { grid-column: 1 / -1; }
.ft-chart { width: 100%; height: auto; display: block; background: var(--chart-bg); border-radius: var(--r-md); box-shadow: var(--well); }
.ft-chart .ft-line { stroke: var(--data-1); }
.ft-chart .ft-band { fill: var(--data-1); opacity: .13; }
.ft-chart .ft-target { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ft-chart .ft-limit { stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 5 3; }
.ft-chart .ft-limit-label { fill: var(--text-2); font-size: 9.5px; }
@media (max-width: 900px) { .ft-sr-body { grid-template-columns: minmax(0, 1fr); } .ft-dev-edit, .ft-res-steps { padding-left: 12px; } .ft-res-kind { display: none; } }
@media (max-width: 720px) { .ft-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ft-dev-pts, .ft-res-count { display: none; } .ft-release { columns: 1; } .ft-actions .btn { flex: 1 1 100%; } }
/* The pairing choices are sentences ("Not in the configuration: remove it"): on a phone each sits under its device. */
@media (max-width: 560px) { .ft-pairs .field-row { grid-template-columns: minmax(0, 1fr); gap: 5px; } }

/* Test plans (pages/plans.js) */
.tp-items { display: flex; flex-direction: column; gap: 6px; }
.tp-item { border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.tp-item.is-off { opacity: .6; }
.tp-item-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px; min-height: 48px; }
.tp-item-row > .ft-include { margin-top: 6px; }
.tp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tp-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; color: var(--text-1); }
.tp-item-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 46%; }
.tp-item-side .select { width: auto; min-width: 140px; }
.tp-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.tp-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin-top: 4px; }
.tp-meter { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.tp-plan-cell { min-width: 240px; }
.tp-cov { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) { .tp-item-row { flex-wrap: wrap; } .tp-item-side { max-width: none; width: 100%; justify-content: flex-start; padding-left: 30px; } .tp-evidence { grid-template-columns: minmax(0, 1fr); } }

/* Configuring a unit from the equipment catalog (pages/unitConfig.js) */
.uc-group { display: flex; flex-direction: column; gap: 8px; }
.uc-group-title { margin: 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.calc-tile.is-current { box-shadow: var(--shadow-2), 0 0 0 2px var(--accent); }
.uc-set { margin: 0; padding: 12px 14px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uc-legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-weight: 650; color: var(--text-1); font-size: var(--fs-13); }
.uc-legend + * { clear: both; }
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; align-items: start; }
.uc-switch { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.uc-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 4px; }
.uc-foot > .col-3 { flex: 1 1 320px; min-width: 0; }
.uc-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-devices { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; font-size: var(--fs-12); }
.uc-devices li { padding: 2px 0; break-inside: avoid; }
.ft-reconfig { display: flex; flex-direction: column; gap: 12px; padding: 12px; margin-bottom: 4px; border-radius: var(--r-md); background: var(--surface-hi); box-shadow: inset 0 0 0 1px var(--accent-line); }
@media (max-width: 560px) { .uc-devices { columns: 1; } .uc-grid { grid-template-columns: minmax(0, 1fr); } }

.grid-2 > .span-2, .grid-3 > .span-2 { grid-column: 1 / -1; }

/* ── Help ───────────────────────────────────────────────────────────────────── */
.glossary dt { font-weight: 650; color: var(--text-1); margin-top: 14px; }
.glossary dd { margin: 4px 0 0; color: var(--text-2); line-height: 1.6; }
.shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ── Report viewer (screen) ─────────────────────────────────────────────────── */
.report-stage { display: flex; justify-content: center; padding: 24px 16px 60px; background: var(--bg-0); }
.paper { width: 8.5in; max-width: 100%; min-height: 11in; padding: .6in .65in; background: #fff; color: #1c1a17; border-radius: 4px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .1); font-size: 10.5pt; line-height: 1.45; }
.paper.a4 { width: 210mm; min-height: 297mm; }

/* Administration › Organization: the company logo on a light and a dark background. */
.logo-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.logo-prev { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.logo-prev img { height: 38px; width: auto; max-width: 100%; }
.logo-prev span { font-size: var(--fs-11); }
.logo-prev.on-light { background: #fdfcfa; }
.logo-prev.on-light span { color: #6f685f; }
.logo-prev.on-dark { background: #141518; }
.logo-prev.on-dark span { color: #918a80; }

/* ── Laboratory ─────────────────────────────────────────────────────────────── */
.w-select { width: 220px; max-width: 100%; }
.subhead { font-size: var(--fs-11); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.plain-list { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; line-height: 1.5; }

/* The six statements about a run: icon + label + words, never color alone. */
.standing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1680px) { .standing { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.standing .st-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.standing .st-ic { flex: none; margin-top: 1px; color: var(--text-3); }
.standing .st-item.ok .st-ic { color: var(--ok); }
.standing .st-item.warn .st-ic { color: var(--warn); }
.standing .st-item.bad .st-ic { color: var(--bad); }
.standing .st-item.info .st-ic { color: var(--info); }
.standing .st-item.bad { box-shadow: inset 0 0 0 1px rgba(234, 107, 97, .35); }
.standing .st-label { font-size: var(--fs-11); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.standing .st-text { font-size: var(--fs-12); color: var(--text-1); line-height: 1.4; overflow-wrap: anywhere; }

.issues { display: flex; flex-direction: column; gap: 6px; }
.issues li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-12); line-height: 1.45; color: var(--text-2); }
.issues li .icon { flex: none; margin-top: 1px; }
.issues li.bad .icon { color: var(--bad); }
.issues li.warn .icon { color: var(--warn); }
.issues li.info .icon { color: var(--info); }
.issues li.ok .icon { color: var(--ok); }

.crit-list { display: flex; flex-direction: column; gap: 8px; }
.crit-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(130px, 1fr) minmax(110px, .8fr) minmax(180px, 1.4fr) auto; gap: 6px; align-items: center; }
.crit-row.ref-row { grid-template-columns: minmax(180px, 1.4fr) minmax(110px, .7fr) minmax(160px, 1.4fr) auto; }
.basis-edit { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.basis-edit > * { flex: 1 1 110px; min-width: 0; }
@media (max-width: 900px) { .crit-row, .crit-row.ref-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .crit-row > :last-child { justify-self: end; } }

.point-box { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.target-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 130px) auto minmax(90px, 120px) auto; gap: 6px; align-items: center; }
@media (max-width: 520px) { .target-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .target-row > span.small:first-child { grid-column: 1 / -1; } }
.override-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.override-row > .input { flex: 1 1 10rem; min-width: 0; }
.override-row > .input:nth-child(3) { flex: 2 1 14rem; }
.settings-grid, .criteria-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }

.window-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); box-shadow: var(--well); }
.window-box .qty { width: 130px; }
.spark-cell { width: 170px; min-width: 120px; }
.source-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.source-item { display: inline-flex; gap: 8px; align-items: center; }
.manual-grid input { min-width: 84px; }
.manual-grid th .select { margin-top: 4px; min-width: 84px; }
/* Readings down the side: the names stay in view while the observations scroll across. */
.manual-down td:first-child, .manual-down th:first-child { position: sticky; left: 0; min-width: 200px; }
.manual-down td:first-child { z-index: 1; background: var(--surface); }
.manual-down th:first-child { z-index: 2; }
.manual-down th .row { gap: 4px; flex-wrap: nowrap; }
@media (max-width: 640px) { .manual-down td:first-child, .manual-down th:first-child { min-width: 7.5rem; max-width: 9rem; white-space: normal; } }
/* Data › Import on a phone: each reading becomes a block, its column on its own line and the
   unit beside the preview, so the units the dialog asks you to check are not off to the side. */
@media (max-width: 640px) {
  .import-map thead { display: none; }
  .import-map tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .import-map tbody td { display: block; padding: 0; border: 0; }
  .import-map tbody td:nth-child(-n+2) { grid-column: 1 / -1; }
  .import-map tbody td:first-child { font-weight: 600; }
  .import-map tbody td.nowrap { white-space: normal; }
  .import-map tbody td:empty { display: none; }
}
/* Data › Simulate on a phone: each reading is a block, its name across the top, the mean below
   it and the noise and drift side by side, each labeled, so nothing scrolls off to the side. */
@media (max-width: 640px) {
  .sim-map thead { display: none; }
  .sim-map tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .sim-map tbody td { display: block; padding: 0; border: 0; }
  .sim-map tbody td:nth-child(-n+2) { grid-column: 1 / -1; }
  .sim-map tbody td:first-child { font-weight: 600; }
  .sim-map tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: var(--fs-11); color: var(--text-3); }
  .sim-map tbody td .qty { height: var(--control-h); }
}

.calc-details { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.table.trace td:first-child { min-width: 220px; }

.stage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; counter-reset: none; }
.stage-list li { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--text-3); }
.stage-list li.done { color: var(--text-1); }
.stage-list li.done .sl-ic { color: var(--ok); }
.stage-list .sl-n { font-variant-numeric: tabular-nums; color: var(--text-4); text-align: right; }
.stage-list .sl-tab { font-size: var(--fs-11); color: var(--text-4); }

.lab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); text-decoration: none; }
.lab-stat:hover { box-shadow: inset 0 0 0 1px var(--accent-line); text-decoration: none; }
.lab-stat .ls-n { font-size: var(--fs-20, 20px); font-weight: 650; color: var(--text-1); font-variant-numeric: tabular-nums; }
.lab-stat .ls-l { font-size: var(--fs-11); }
.table tr.is-current td { background: var(--accent-softer); }
/* Keep a detail page's title beside its icon even when the badge row is long; it wraps inside. */
.detail-head > .grow { flex: 1 1 280px; }
@media (max-width: 760px) { .standing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .standing .st-item { padding: 7px 9px; gap: 7px; } }

/* Run › Report: the three report templates side by side, and the witness record. */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); align-items: stretch; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.tpl-card > :last-child { margin-top: auto; }
.tpl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.witness-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
@media (max-width: 640px) { .witness-row { grid-template-columns: minmax(0, 1fr) auto; } .witness-row > :nth-child(2), .witness-row > :nth-child(3) { grid-column: 1; } }

/* A report on a phone: the printed margins and letterhead would not fit, so the screen copy
   narrows them. Printing keeps the page layout. */
@media screen and (max-width: 640px) {
  .report-stage { padding: 12px 8px 40px; }
  .paper, .paper.a4 { padding: 20px 16px; min-height: 0; }
  .paper .rp-brand { flex-wrap: wrap; }
  .paper .rp-id { margin-left: 0; text-align: left; }
  .paper .rp-meta { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper .rp-meta > div { border-right: 0; border-bottom: 1px solid #e3ddd4; }
}

/* Test facilities */
.fac-name-cell { min-width: 220px; }
.fac-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.fac-type { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-13); color: var(--text-1); cursor: pointer; }
.fac-limits { display: flex; flex-direction: column; gap: 10px; }
.fac-limit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fac-limit-head { align-self: center; display: flex; flex-direction: column; gap: 2px; }
.tp-capacity { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-hi); }
.tp-capacity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-capacity ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 720px) { .fac-limit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .fac-limit-head { grid-column: 1 / -1; } }
.tp-capacity-pick { margin-top: 4px; max-width: 360px; }
/* Calibration records, recall and out-of-tolerance impact: a judgement is in words with an icon, not colour alone. */
.cal-section { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-2); }
.cal-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cal-judged { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.cal-judged.in { color: var(--ok); } .cal-judged.out { color: var(--bad); } .cal-judged.soon { color: var(--warn); }
.cal-points .qty { min-width: 9rem; }
.cal-impact td { vertical-align: top; }
.cal-impact td .btn-sm.btn-ghost { padding-left: 0; padding-right: 0; }
.report-notices { display: flex; justify-content: center; padding: 16px 16px 0; background: var(--bg-0); }
.report-notices > .col-3 { width: 100%; max-width: 8.5in; }

/* Quality records (src/pages/quality.js) */
.q-stats { margin: -6px 0 12px; }
.q-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm, 8px); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.q-notice-list { margin: 4px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.q-notice-list li { line-height: 1.45; }
.q-linked { display: flex; flex-direction: column; gap: var(--sp-2); }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm, 8px); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; line-height: 1.4; }
.q-option input { margin-top: 3px; flex: none; }
.q-option:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.q-option:has(input:disabled) { cursor: default; }
.q-action, .q-check, .q-note, .q-source { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-sm, 8px); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.q-note, .q-source { flex-direction: column; gap: 4px; }
.q-source > .row { width: 100%; }
.q-action.is-late { box-shadow: inset 0 0 0 1px var(--bad); }
.q-action > .row { flex: none; }
.q-add-action { padding-top: var(--sp-2); border-top: 1px solid var(--line-2); }
.q-needed { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.q-needed li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.q-needed li svg { flex: none; margin-top: 3px; color: var(--warn); }
@media (max-width: 640px) { .q-action { flex-wrap: wrap; } .q-action > .row { width: 100%; justify-content: flex-end; } }

/* Competence (src/pages/competence.js) */
.cm-matrix th:first-child, .cm-matrix td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 10rem; }
.cm-matrix th { white-space: normal; vertical-align: bottom; min-width: 7.5rem; }
.cm-matrix td .badge { white-space: nowrap; }
.cm-form { padding: 12px; border-radius: var(--r-sm, 8px); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }

/* Result validity (src/pages/validity.js) */
.v-result { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-sm, 8px); background: var(--surface-lo); box-shadow: inset 0 0 0 1px var(--line); }
.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 10px 12px; }
.v-follow { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.v-follow > .small.strong svg { color: var(--warn); vertical-align: -2px; }
.v-limits { display: grid; grid-template-columns: auto auto; gap: 4px 16px; font-size: 13px; }
.v-limits span { color: var(--text-2); }
.v-limits b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.no-case { text-transform: none; letter-spacing: 0; }
.ds-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.ds-pick .check { align-items: flex-start; }
.ds-pick .check input { margin-top: 2px; }
.ds-pick .check > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; overflow-wrap: anywhere; }
.ds-pick .ds-detail { flex-basis: 100%; }