/* pages.css — page-specific additions the spec needs that ntoid.css lacks (build-prompt rule 3).
   ntoid.css ships unchanged; nothing here restates a token as a literal. */

*, *::before, *::after { box-sizing: border-box; }
a { color: var(--link); }
.nt-compass { color: var(--line-strong); }
.nt-compass-dot { fill: var(--critical); }
.nt-cap { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.nt-body { margin: 0; font-size: 14px; line-height: 19px; color: var(--ink-soft); }
.nt-body + .nt-body { margin-top: var(--space-2); }
.nt-body a { color: var(--link); text-decoration: none; }
.nt-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nt-up { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.nt-hidden { display: none !important; }
.wf-header .wf-header-title { margin: 0; }
.wf-panel-head .nt-cap { margin-left: var(--space-1); }
.wf-panel-foot .wf-link { min-height: 28px; }
.nt-source-link { color: var(--link); text-decoration: none; }
.nt-source-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* nav icons: Lucide, 1.5px stroke */
.wf-nav-item .wf-icon { width: 20px; height: 20px; color: var(--ink-muted); }
.wf-nav-item .wf-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wf-nav-foot .nt-cap { padding: 0 var(--space-1); }

/* ThreatLevel: ECG ring takes the tone, text stacks */
.wf-threat .nt-ecg { width: 32px; height: 32px; flex: none; color: var(--wf-tone); }
.wf-threat-text span + span { color: var(--ink-soft); font-size: 13px; line-height: 18px; }
.wf-header-end .wf-select { height: var(--size-control); }
.wf-select select { padding-right: var(--space-5); }

/* ---------- board: main column (tiles panel + indicators panel read as one lg panel) ---------- */
.nt-main { display: flex; flex-direction: column; min-width: 0; }
.nt-main > .wf-panel + .wf-panel { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.nt-main > .wf-panel:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nt-main > .wf-panel:last-child { flex: 1; }

/* tiles are buttons (Floris 5fc45881: click scrolls to + expands the category window) */
button.nt-tile { width: 100%; font: inherit; text-align: left; cursor: pointer; appearance: none; }
button.nt-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nt-tile.is-unrated .nt-tile-mean b, .nt-tile.is-unrated .nt-tile-word { color: var(--line-strong); }
.nt-tile-head span:first-child { min-width: 0; }

/* category windows: <details> per domain, collapsed by default; header toggles, tile opens */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.nt-domain > summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: var(--size-row); padding: 0 var(--space-4); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.nt-domain > summary:hover { background: var(--surface-raised); }
.nt-domain > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nt-domain-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink-muted); }
.nt-domain-mark svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .15s; }
.nt-domain[open] > .nt-domain-head .nt-domain-mark svg, .nt-domain[open] > summary .nt-domain-mark svg { transform: rotate(90deg); }
.nt-domain-name { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-domain-count { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nt-domain-empty { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) 48px; font-size: 14px; line-height: 19px; color: var(--ink-muted); border-bottom: 1px solid var(--line-soft); }
.nt-indw > summary.nt-ind { padding-left: 48px; }
.nt-indw > summary.nt-ind:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nt-ind-arrow { color: var(--ink-muted); }
.nt-ind-detail { padding-left: 48px; }
.nt-ind-detail .nt-cap { margin-bottom: var(--space-1); }
.nt-bullet .nt-bullet-text { min-width: 0; }
.nt-bullet .nt-bullet-src { display: block; margin-top: 2px; }
.nt-bullet .nt-bullet-src .wf-mono { color: var(--ink-muted); }
.nt-indicators-head { border-top: 1px solid var(--line-soft); }

/* composite rail panel */
.nt-track-wrap { position: relative; margin: var(--space-3) 0 var(--space-1); padding-top: var(--space-1); }
.nt-formula { margin-top: var(--space-3); }

/* alerts: word in tone */
.nt-alert-word { display: inline-block; margin-right: var(--space-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-tone, var(--ink)); }

/* household rows */
.nt-house { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.nt-house:last-child { border-bottom: 0; }
.nt-house .nt-cap { margin-bottom: var(--space-1); }
.nt-house ul { margin: 0; padding-left: 18px; }
.nt-house li { margin: var(--space-1) 0; font-size: 14px; line-height: 19px; color: var(--ink-soft); }

/* changelog (FeedItem) */
.wf-feed .wf-mono { color: var(--ink-muted); }

/* analytics strip: trend points and donut gaps */
.nt-trend-point { fill: var(--series-1); }
.nt-trend-point.is-2 { fill: var(--series-2); }
.nt-trend-line { fill: none; stroke: var(--series-1); stroke-width: 2; }
.nt-trend-line.is-2 { stroke: var(--series-2); }
.nt-trend-empty { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.wf-swatch.is-series-1 { background: var(--series-1); }
.wf-swatch.is-series-2 { background: var(--series-2); }
.wf-swatch.is-series-3 { background: var(--series-3); }
.wf-swatch.is-series-other { background: var(--series-other); }
.wf-donut-seg.is-series-1 { stroke: var(--series-1); }
.wf-donut-seg.is-series-2 { stroke: var(--series-2); }
.wf-donut-seg.is-series-3 { stroke: var(--series-3); }
.wf-donut-seg.is-series-other { stroke: var(--series-other); }
.wf-donut-seg.is-track { stroke: var(--track); }
.nt-sectors { display: flex; flex-direction: column; }
.wf-status-dot { align-self: start; margin-top: 5px; }

/* template board */
.nt-template-note { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.nt-template-note p { margin: 0 0 var(--space-2); }
.nt-template-note p:last-child { margin-bottom: 0; }

/* hub only (no country host): board select in the header, ranked ALL BOARDS panel in the rail */
.nt-hub-only { display: none; }
body.is-hub .nt-hub-only { display: initial; }
body.is-hub .wf-header-end .wf-select.nt-hub-only { display: inline-flex; }
body.is-hub .wf-panel.nt-hub-only { display: flex; }
.nt-boardrow { cursor: pointer; width: 100%; font: inherit; text-align: left; background: none; color: inherit; border: 0; border-bottom: 1px solid var(--line-soft); appearance: none; }
.nt-boardrow:hover { background: var(--surface-raised); }
.nt-boardrow[aria-current="true"] { background: var(--active-wash); }
.nt-boardrow .wf-actor-name { display: flex; flex-direction: column; }
.nt-boardrow .nt-boardrow-score { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-tone); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- landing ---------- */
.nt-landing-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nt-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); }
.nt-promise { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nt-promise-figure { font-size: 40px; line-height: 40px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.nt-promise-title { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-domain-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.nt-domain-chip { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-row); padding: 0 var(--space-3); border: 1px solid var(--line-soft); border-radius: var(--radius-md); font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-domain-chip i { flex: none; width: 8px; height: 8px; background: var(--line-strong); border-radius: var(--radius-pill); }
.nt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.nt-boardlist .wf-actor { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.nt-boardlist .wf-actor-name { display: flex; flex-direction: column; }
.nt-boardlist .wf-actor-name .wf-mono { font-size: 12px; line-height: 16px; color: var(--ink-muted); text-transform: none; }
.nt-boardlist .wf-actor-name .wf-mono a { color: var(--ink-muted); text-decoration: none; }
.nt-status-word { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-status-word.is-template { color: var(--ink-muted); }
.nt-doclist .wf-actor { grid-template-columns: minmax(0, 1fr) auto; }
.nt-doclist .wf-actor-name { display: flex; flex-direction: column; }
.nt-doclist .wf-actor-name .wf-mono { font-size: 12px; line-height: 16px; text-transform: none; }
.nt-doclist .wf-actor .wf-mono a { color: var(--link); text-decoration: none; }

/* ---------- subscriber wall ---------- */
.nt-wall-ghost .wf-panel { min-height: 120px; }
.nt-wall-ghost .nt-main .wf-panel { min-height: 520px; }
.nt-wall-dialog .wf-panel-body ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.nt-wall-dialog .wf-panel-body li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-row); padding: 0 var(--space-1); border-top: 1px solid var(--line-soft); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-wall-dialog .wf-panel-body li i { flex: none; width: 8px; height: 8px; background: var(--line-strong); border-radius: var(--radius-pill); }
.nt-wall-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.nt-wall-caption { padding: var(--space-3) var(--space-4) var(--space-4); }
.nt-lock { width: 32px; height: 32px; flex: none; color: var(--ink-muted); }
.nt-lock svg, .wf-classbar-end svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wf-classbar-end svg { width: 16px; height: 16px; }

/* ---------- checklist ---------- */
.nt-doc-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nt-steps .wf-nav-item { gap: var(--space-3); }
.nt-steps .wf-nav-item .wf-actor-code { color: var(--ink-muted); }
.nt-steps .wf-nav-item[aria-current="page"] .wf-actor-code { color: var(--critical); border-color: var(--critical); }
.nt-check label { cursor: pointer; }
.nt-check b { color: var(--ink); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: var(--space-2); }
.nt-check code, .nt-body code, .nt-src code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.nt-src { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--space-3); align-items: start; min-height: var(--size-row); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 19px; color: var(--ink-soft); }
.nt-src.is-head { color: var(--ink-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.nt-src .nt-src-cadence { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.nt-src .nt-src-name { color: var(--ink); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.nt-src .wf-mono { overflow-wrap: anywhere; }
.nt-src .wf-mono a { color: var(--link); text-decoration: none; }
.nt-src.is-owner { grid-template-columns: 12px 96px minmax(0, 1fr) minmax(0, 1.6fr) 56px; align-items: center; }
.nt-src.is-owner .wf-status-dot { margin: 0; }
.nt-rules { display: grid; grid-template-columns: 1fr 1fr; }
.nt-rules > div { padding: var(--space-3) var(--space-4); }
.nt-rules > div + div { border-left: 1px solid var(--line-soft); }
.nt-rules h4 { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nt-rules h4.is-allow { color: var(--nominal); }
.nt-rules h4.is-never { color: var(--critical); }
.nt-rules ul { margin: 0; padding-left: 18px; }
.nt-rules li { margin: var(--space-1) 0; font-size: 14px; line-height: 19px; color: var(--ink-soft); }
.nt-doc-p { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.nt-doc-p:last-child { border-bottom: 0; }
.nt-doc-list { margin: 0; padding: var(--space-2) var(--space-4) var(--space-2) 34px; font-size: 14px; line-height: 19px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.nt-doc-list li { margin: var(--space-1) 0; }
.nt-doc-main .wf-panel-head.is-sub { min-height: 36px; background: var(--surface); }

/* ---------- owner editor ---------- */
.nt-pair { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nt-pair-col { display: flex; flex-direction: column; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nt-pair-col .nt-cap { font-weight: 500; }
.nt-pair-arrow { color: var(--ink-muted); font-size: 18px; }
.nt-edit-head, .nt-edit { display: grid; grid-template-columns: 28px minmax(0, 1fr) 180px 48px 96px 56px; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--line-soft); }
.nt-edit-head { min-height: 32px; }
.nt-edit { min-height: 52px; }
.nt-edit .nt-levelseg { position: relative; }
.nt-edit .nt-levelseg label { position: relative; }
.nt-edit .nt-levelseg.is-disabled label { cursor: not-allowed; }
.nt-edit .nt-ind-meta { white-space: nowrap; }
.nt-edit-foot { padding: var(--space-3) var(--space-4); }
.nt-rc { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nt-rc i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--wf-tone); }
.nt-rc.is-unknown i { background: var(--line-strong); }
.nt-release { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.nt-release .wf-btn { justify-content: flex-start; }
.nt-diff .nt-diff-field { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nt-diff .nt-diff-to { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-tone, var(--ink-muted)); }
.nt-diff .nt-diff-from { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nt-diff .nt-diff-arrow { color: var(--ink-muted); }
.nt-hold-wrap { padding: var(--space-3) var(--space-4); }
.nt-owner-strip { grid-template-columns: 1.4fr 1fr; }
.nt-feed-tag { color: var(--ink-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .nt-edit-head, .nt-edit { grid-template-columns: 28px minmax(0, 1fr) 160px 40px 88px 48px; }
}
@media (max-width: 900px) {
  /* phone order (spec §3.3): composite → tiles → alerts → indicators → household → strip. The rail and the main
     column dissolve into the single-column grid so their panels can be ordered. */
  .nt-main, .nt-rail, .nt-strip { display: contents; }
  .nt-main > .wf-panel + .wf-panel { border-top: 1px solid var(--line); border-radius: var(--radius-md); }
  .nt-main > .wf-panel:first-child { border-radius: var(--radius-md); }
  .nt-board > .wf-nav { order: 0; }
  #composite { order: 1; }
  #tiles { order: 2; }
  #alerts { order: 3; }
  #indicators { order: 4; }
  #household { order: 5; }
  #changelog { order: 6; }
  #basis { order: 7; }
  #allboards { order: 8; }
  .nt-strip > .wf-panel { order: 9; }
  .nt-promises, .nt-domain-chips, .nt-two-col { grid-template-columns: 1fr 1fr; }
  .nt-src, .nt-src.is-owner { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .nt-src.is-head { display: none; }
  .nt-rules { grid-template-columns: 1fr; }
  .nt-rules > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .nt-edit-head { display: none; }
  .nt-edit { grid-template-columns: 28px minmax(0, 1fr) 150px; }
  .nt-edit .nt-ind-meta { display: none; }
  .nt-doc > .wf-nav .wf-nav-section { display: flex; padding: var(--space-2) var(--space-3); border: 0; }
  .nt-doc > .wf-nav .wf-nav-heading, .nt-doc > .wf-nav .wf-nav-foot { display: none; }
  .nt-doc > .wf-nav ul { display: flex; gap: var(--space-2); padding: 0; }
  .nt-doc > .wf-nav .wf-nav-item { min-height: 36px; white-space: nowrap; }
  .nt-owner-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wf-header-title { max-width: none; }
  .wf-header-end .wf-clock { margin-left: auto; }
  .nt-promises, .nt-two-col { grid-template-columns: 1fr; }
  .nt-boardlist .wf-actor { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .nt-boardlist .nt-status-word { display: none; }
  .nt-pair { flex-wrap: wrap; }
  /* phone: the panel action row (VIEW select + EXPORT JSON) and a long clock line wrap inside 390px instead of widening the page */
  .wf-panel-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .wf-panel-actions .wf-select { max-width: 100%; }
  .wf-panel-actions .wf-select select { max-width: calc(100% - var(--space-6)); }
  .wf-header-end .wf-clock { white-space: normal; min-width: 0; max-width: 100%; }
}