/* ============================================================
   Nightshift - SOC Alert Triage Simulator
   Console aesthetic: monospace log pane, dense queue rows.
   Light / Dark / Auto plus High-Visibility, per the Izzy spec.
   No em dashes or en dashes anywhere.
   ============================================================ */

:root {
  --ns-bg:        #f4f5f2;
  --ns-panel:     #ffffff;
  --ns-panel-2:   #f0f1ec;
  --ns-ink:       #16181a;
  --ns-ink-mute:  #5d6169;
  --ns-line:      #cfd3cb;
  --ns-accent:    var(--green, #00694E);
  --ns-accent-2:  var(--green-dark, #024230);
  --ns-mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  /* Body face, matching ENE's --font-body. Nightshift previously declared none
     and inherited whatever the browser felt like, which is not a choice and is
     why the drawer never quite looked like ENE's however the rows were sized. */
  --ns-font: 'Segoe UI', Arial, sans-serif;
  /* Menu hover and destructive-row backgrounds. ENE calls these sycamore and
     error-bg; named for intent here per the token rule in w:	ools\CLAUDE.md. */
  --ns-hover:     #E7ECC3;
  --ns-bad-bg:    #FCE6E6;
  /* Two Ohio brand values ENE uses directly in its chrome. Nightshift's own
     --ns-ink-mute and --ns-line are console greys tuned for the log pane, and
     using them in the drawer left it a shade cooler than ENE's. Named for the
     brand rather than for intent because that is what they are. */
  --ns-putnam:    #756E65;
  --ns-hairline:  #C8CDB0;

  /* Severity. Chosen to stay distinguishable for the common colour vision
     deficiencies: they differ in lightness as well as hue, and every severity
     also carries its word in the row, so colour is never the only channel. */
  --ns-sev-high:  #b3261e;
  --ns-sev-med:   #9a6700;
  --ns-sev-low:   #40616f;

  --ns-ok:        #1f6f43;
  --ns-warn:      #9a6700;
  --ns-bad:       #b3261e;
  --ns-incident:  #7b2d8e;

  --ns-row-h: 22px;
  --ns-fs: 13px;
}

html[data-theme="dark"] {
  --ns-bg:       #101314;
  --ns-panel:    #171b1d;
  --ns-panel-2:  #1e2325;
  --ns-ink:      #e6e9e4;
  --ns-ink-mute: #9aa2a6;
  --ns-line:     #2c3336;
  --ns-accent:   #4fbf95;
  --ns-accent-2: #7fd9b6;
  --ns-sev-high: #ff6b5e;
  --ns-sev-med:  #e0a83a;
  --ns-sev-low:  #7fb3c8;
  --ns-ok:       #57c98a;
  --ns-warn:     #e0a83a;
  --ns-bad:      #ff6b5e;
  --ns-incident: #c78ad6;
  --ns-hover:    #2a352a;
  --ns-bad-bg:   #3a1f1f;
  --ns-putnam:   #9DA39B;
  --ns-hairline: #3A4046;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --ns-bg:       #101314;
    --ns-panel:    #171b1d;
    --ns-panel-2:  #1e2325;
    --ns-ink:      #e6e9e4;
    --ns-ink-mute: #9aa2a6;
    --ns-line:     #2c3336;
    --ns-accent:   #4fbf95;
    --ns-hover:    #2a352a;
    --ns-bad-bg:   #3a1f1f;
    --ns-putnam:   #9DA39B;
    --ns-hairline: #3A4046;
    --ns-accent-2: #7fd9b6;
    --ns-sev-high: #ff6b5e;
    --ns-sev-med:  #e0a83a;
    --ns-sev-low:  #7fb3c8;
    --ns-ok:       #57c98a;
    --ns-warn:     #e0a83a;
    --ns-bad:      #ff6b5e;
    --ns-incident: #c78ad6;
  }
}

/* High-Visibility: large type and hard contrast, for vision impaired users and
   for projection. Scales the whole layout through the two size variables
   rather than by restyling each rule. */
html.ns-hivis {
  --ns-fs: 17px;
  --ns-row-h: 30px;
  --ns-ink: #000000;
  --ns-ink-mute: #26292c;
  --ns-line: #000000;
  --ns-bg: #ffffff;
  --ns-panel: #ffffff;
  --ns-panel-2: #f0f0f0;
}
html.ns-hivis[data-theme="dark"] {
  --ns-ink: #ffffff;
  --ns-ink-mute: #e2e6e8;
  --ns-line: #ffffff;
  --ns-bg: #000000;
  --ns-panel: #000000;
  --ns-panel-2: #141414;
}
html.ns-hivis body { font-weight: 600; }
html.ns-hivis .ns-pane { border-width: 2px; }
html.ns-hivis .ns-queue-row { border-bottom-width: 2px; }

/* ── Base ────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
  background: var(--ns-bg);
  color: var(--ns-ink);
  font-family: var(--ns-font);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button { font-family: inherit; }

/* ── iz.css pieces still in use ──────────────────────────── */
/* Nightshift has no ECT header band. ENE has none either, and the four panes
   want the pixels: the band plus its toggle strip cost about 110px on a screen
   where the log pane IS the work. The Ohio, Scripps, and McClure attribution
   lives in the About modal, the same arrangement ENE uses. What is still drawn
   from the shared sheet is the hamburger and its dropdown panel. */

/* ── Compact mode ────────────────────────────────────────── */
/* The vertical-space affordance the Izzy spec asks for. With no header band to
   collapse, the useful lever is density: a single dense toolbar line and
   shorter rows in the panes, which is what actually helps in a projection
   room. In memory only, never persisted. */
html.ns-compact { --ns-row-h: 18px; --ns-fs: 12px; }
html.ns-compact .ns-toolbar { min-height: 34px; padding: 0 10px; }
html.ns-compact .ns-toolbar .ns-btn,
html.ns-compact .ns-code-box { padding: 3px 8px; }
html.ns-compact .ns-toolbar .ect-hamburger-btn { padding: 2px 10px; font-size: 1rem; }
html.ns-compact .ns-clock-sub { display: none; }
html.ns-compact .ns-pane-head { padding: 2px 7px; }
html.ns-compact .ns-main { gap: 3px; padding: 3px; }

/* ── Main toolbar ────────────────────────────────────────── */
/* Matched to ENE's #toolbar, measured from the rendered bar: 24px brand mark
   at 4px radius, 18px bold brand text in Under the Elms, a 2px green rule
   underneath, and on the right a row of OUTLINED green buttons at 6px radius
   with 2px borders and 6px 14px padding. The hamburger is deliberately the
   odd one out, bordered in Putnam rather than green and at normal weight,
   exactly as ENE's .btn-tertiary is, so the menu reads as chrome rather than
   as one more action. */
.ns-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px; min-height: 46px;
  background: var(--ns-panel);
  border-bottom: 2px solid var(--ns-accent);
  font-size: var(--ns-fs);
  position: relative; z-index: 30;
}
.ns-toolbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.ns-toolbar .brand-mark { width: 24px; height: 24px; border-radius: 4px; object-fit: contain; flex: 0 0 auto; }
.ns-toolbar .brand-text {
  color: var(--green-dark, #024230); font-weight: 700;
  font-size: calc(var(--ns-fs) * 1.4); white-space: nowrap;
}
html[data-theme="dark"] .ns-toolbar .brand-text { color: var(--ns-accent); }
.ns-toolbar .brand-text-short { display: none; }
.ns-toolbar .tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ns-toolbar button { white-space: nowrap; }

/* ENE's .btn-secondary: outlined green on the surface, bold, 6px radius. */
.ns-toolbar .ns-btn {
  background: transparent;
  color: var(--ns-accent);
  border: 2px solid var(--ns-accent);
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: calc(var(--ns-fs) * 0.95);
}
.ns-toolbar .ns-btn:hover { background: var(--sycamore, #E7ECC3); color: var(--green-dark, #024230); }
/* Toolbar buttons are outlined, so they need the accent as their TEXT colour.
   Without this the global `html[data-theme="dark"] .ns-btn` rule wins on
   specificity and paints them near black on a dark panel. */
html[data-theme="dark"] .ns-toolbar .ns-btn { color: var(--ns-accent); }
html[data-theme="dark"] .ns-toolbar .ns-btn:hover { background: var(--ns-accent); color: #06120e; }
.ns-toolbar .ns-btn[disabled] { opacity: 0.45; cursor: default; }
.ns-toolbar .ns-btn[disabled]:hover { background: transparent; color: var(--ns-accent); }

/* ENE's .btn-tertiary, for the hamburger only. */
.ns-toolbar .ect-hamburger-btn {
  background: transparent;
  color: var(--putnam, #756E65);
  border: 2px solid var(--putnam, #756E65);
  border-radius: 6px;
  padding: 4px 14px;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
}
.ns-toolbar .ect-hamburger-btn:hover {
  background: var(--sycamore, #E7ECC3);
  color: var(--marigold, #AA8A00);
  border-color: var(--marigold, #AA8A00);
}
html[data-theme="dark"] .ns-toolbar .ect-hamburger-btn { color: var(--ns-ink-mute); border-color: var(--ns-ink-mute); }
html[data-theme="dark"] .ns-toolbar .ect-hamburger-btn:hover {
  background: var(--ns-panel-2); color: var(--marigold, #AA8A00); border-color: var(--marigold, #AA8A00);
}

.ns-clock-time { display: flex; flex-direction: column; line-height: 1.15; min-width: 9ch; }
.ns-clock-now {
  font-family: var(--ns-mono);
  font-size: calc(var(--ns-fs) * 1.7);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ns-accent);
}
.ns-clock-sub { font-size: calc(var(--ns-fs) * 0.8); color: var(--ns-ink-mute); white-space: nowrap; }

/* Speed pills, ENE's sim-pill-group shape: one bordered group with hairline
   dividers rather than separate buttons. */
.ns-speeds {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--ns-accent); border-radius: 8px; overflow: hidden;
  background: var(--ns-panel);
}
.ns-pill {
  background: transparent; border: none; border-right: 1px solid var(--ns-line);
  padding: 4px 10px; font-size: calc(var(--ns-fs) * 0.85); font-weight: 700;
  color: var(--ns-accent-2); cursor: pointer; user-select: none;
}
html[data-theme="dark"] .ns-pill { color: var(--ns-accent); }
.ns-pill:last-child { border-right: none; }
.ns-pill:hover { background: rgba(0, 105, 78, 0.10); }
html[data-theme="dark"] .ns-pill:hover { background: rgba(79, 191, 149, 0.16); }
.ns-pill.on { background: var(--ns-accent); color: #fff; }
html[data-theme="dark"] .ns-pill.on { color: #06120e; }
/* Paused is the one state where "nothing is happening" is intended and not a
   broken app, so it reads amber rather than green. */
.ns-pill[data-speed="0"].on { background: #c2790f; color: #fff; }

.ns-progress {
  flex: 1 1 auto; height: 6px; min-width: 40px;
  margin: 0 4px;
  background: var(--ns-panel-2);
  border: 1px solid var(--ns-line); border-radius: 999px; overflow: hidden;
  display: block;
}
#ns-progress-fill { display: block; height: 100%; width: 0; background: var(--ns-accent); border-radius: 999px; }

/* A readout, not an action, so it is a quiet pill rather than a button. */
.ns-budget {
  font-family: var(--ns-mono);
  font-size: calc(var(--ns-fs) * 0.85);
  color: var(--ns-ink-mute);
  white-space: nowrap;
  border: 1px solid var(--ns-line); border-radius: 6px;
  padding: 5px 10px;
}
.ns-budget b { color: var(--ns-accent); font-weight: 700; }

/* Reads as one control in the button row: outlined at the same 2px and 6px
   radius as the buttons beside it, with the label inside the border. */
.ns-code-box {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--ns-accent); border-radius: 6px;
  padding: 3px 8px 3px 10px;
}
.ns-code-label {
  font-size: calc(var(--ns-fs) * 0.8); font-weight: 700;
  color: var(--ns-accent); white-space: nowrap;
}
.ns-code-input {
  font-family: var(--ns-mono);
  font-size: calc(var(--ns-fs) * 0.9);
  width: 14ch; padding: 2px 4px;
  border: none; border-radius: 3px;
  background: transparent; color: var(--ns-ink);
}
.ns-code-input:focus { outline: 2px solid var(--ns-accent); outline-offset: 1px; }

.ns-btn {
  border: 1px solid var(--ns-accent);
  background: var(--ns-accent); color: #fff;
  padding: 4px 11px; border-radius: 3px; cursor: pointer;
  font-size: calc(var(--ns-fs) * 0.9);
}
html[data-theme="dark"] .ns-btn { color: #06120e; }
.ns-btn:hover { background: var(--ns-accent-2); border-color: var(--ns-accent-2); }
.ns-btn[disabled] { opacity: 0.45; cursor: default; }
.ns-btn-end { background: transparent; color: var(--ns-accent); }
.ns-btn-end:hover { background: var(--ns-accent); color: #fff; }
.ns-linkbtn {
  border: none; background: none; color: var(--ns-accent);
  cursor: pointer; font-size: calc(var(--ns-fs) * 0.85); text-decoration: underline;
  padding: 0 4px;
}

/* ── Hamburger drawer ────────────────────────────────────── */
/*
 * Matched to ENE's `.dropdown-drawer` by reading its COMPUTED styles side by
 * side, the same method the toolbar was matched with in Z2 and for the same
 * reason: eyeballing a panel produces something that looks close and measures
 * wrong everywhere.
 *
 * THE SPECIFICITY TRAP, and it is why this never looked right before. `iz.css`
 * styles the drawer as a DARK GREEN panel with white rows via `.ect-nav-menu a`
 * (0,1,1). A bare `.ns-menu-row` (0,1,0) loses to it regardless of load order,
 * so the old overrides silently did nothing to padding, colour, or size. Every
 * rule below is therefore written as `.ect-nav-menu .ns-menu-row` (0,2,0),
 * which wins. Do not simplify these selectors.
 *
 * `iz.css` is shared with six other applications and must not change, so the
 * whole match lives here as an override.
 *
 * The values that matter, and that a future edit should not drift from:
 *
 *   panel      surface background, 2px green border, 8px radius,
 *              0 8px 24px rgba(0,0,0,.2), min-width 280px, padding 8px
 *   row        8px 10px padding, 4px radius, 14px bold, Under the Elms text
 *   row hover  sycamore background, text unchanged
 *   badge      12px bold, 2px 8px, pill radius, hairline fill, Putnam text
 *   chevron    11px, Putnam, rotates 90deg when its flyout is open
 *   section    11px bold uppercase, 0.5px tracking, Putnam, 1px hairline rule
 *   danger     error red, error-bg on hover
 */
/*
 * ENE is border-box throughout, so its 280px panel is 280px on the outside and
 * a 100%-wide row is 260px including its own padding. Nightshift is not, so
 * every width here came out inflated by exactly its padding: the panel 300px,
 * the rows overflowing it, the state pill 18px too wide. Scoped to the drawer
 * rather than made global, because changing the box model app-wide to fix a
 * menu would be a much larger change than the one being asked for.
 */
.ect-nav-menu, .ect-nav-menu * { box-sizing: border-box; }

.ect-nav-menu {
  background: var(--ns-panel);
  color: var(--ns-ink);
  border: 2px solid var(--ns-accent);
  border-radius: 8px;
  padding: 8px;
  min-width: 280px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

.ect-nav-menu .ns-menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  background: transparent;
  border: none; border-bottom: none;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--ns-accent-2);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.ect-nav-menu .ns-menu-row:hover {
  background: var(--ns-hover);
  color: var(--ns-accent-2);
}
.ect-nav-menu .ns-menu-row:focus-visible {
  outline: 2px solid var(--ns-accent);
  outline-offset: -2px;
}

.ect-nav-menu .ns-menu-state {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ns-hairline);
  color: var(--ns-putnam);
  border: 1px solid var(--ns-hairline);
}

/* The flyout chevron reuses the state slot, so it has to shed the pill. */
.ect-nav-menu .ns-menu-sub .ns-menu-state {
  background: none; border: none; padding: 0;
  font-size: 11px; line-height: 1;
  color: var(--ns-putnam);
  display: inline-block;
  transition: transform 0.12s ease;
}
/* The panel opens to the left, so the chevron turns to point at it rather
   than down at nothing. */
.ect-nav-menu .ns-menu-sub.on .ns-menu-state { transform: rotate(180deg); }

/* ENE's `.drawer-section`: a labelled rule, not a bare line. */
.ect-nav-menu .ns-menu-section,
.ect-nav-menu .nav-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ns-putnam);
  font-weight: 700;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--ns-hairline);
  background: none;
}
.ect-nav-menu .ns-menu-section:first-child,
.ect-nav-menu .nav-divider:first-child { border-top: none; margin-top: 0; }

/* Danger rows keep Nightshift's own --ns-bad rather than ENE's #C00000: the
   scoreboard and the severity bars already use it, and a menu that disagrees
   with the rest of the application about what red means is worse than one that
   disagrees with ENE by a few points of saturation. */
.ect-nav-menu .ns-menu-danger { color: var(--ns-bad); }
.ect-nav-menu .ns-menu-danger:hover {
  background: var(--ns-bad-bg);
  color: var(--ns-bad);
}

/*
 * Flyouts pop out to the LEFT of the drawer and open downward from their row,
 * which is ENE's `.drawer-popout` behaviour. Left, because the drawer anchors
 * to the right edge under the hamburger and there is nothing but window edge
 * on that side.
 *
 * `position: fixed` is the load-bearing part, and it is not a style choice.
 * The parent drawer has `overflow-y: auto`, and a scrolling box clips overflow
 * on BOTH axes, so an absolutely positioned child would be cut off at the
 * drawer's edge exactly where the popout needs to be. Fixed escapes that; the
 * cost is that top and left must be written by JS from the row's bounding
 * rect, which menu.js does on every open and on resize.
 *
 * It stays a click-toggled accordion rather than a hover menu. That was a
 * deliberate M1 decision and it is what makes the thing work on a touch
 * screen; only the positioning changed.
 */
.ect-nav-menu .ns-submenu {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  min-width: 220px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  background: var(--ns-panel);
  border: 2px solid var(--ns-accent);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  /* iz.css puts the drawer at 1000, and a popout that renders behind the menu
     it came from is worse than no popout at all. */
  z-index: 1001;
}
.ect-nav-menu .ns-submenu[hidden] { display: none; }

/* ── Layout: four regions ────────────────────────────────── */
.ns-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(380px, 2.1fr) minmax(280px, 1.25fr);
  gap: 6px; padding: 6px;
  min-height: 0;
}
.ns-pane {
  background: var(--ns-panel);
  border: 1px solid var(--ns-line);
  border-radius: 4px;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}
.ns-pane-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--ns-line);
  background: var(--ns-panel-2);
  font-size: calc(var(--ns-fs) * 0.85);
}
.ns-pane-title { font-weight: 700; color: var(--ns-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.ns-pane-meta { color: var(--ns-ink-mute); flex: 1 1 auto; font-family: var(--ns-mono); }

/* ── Queue ───────────────────────────────────────────────── */
.ns-queue-filters { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 7px; border-bottom: 1px solid var(--ns-line); }
.ns-chip {
  border: 1px solid var(--ns-line); background: var(--ns-panel-2); color: var(--ns-ink-mute);
  border-radius: 10px; padding: 1px 9px; cursor: pointer; font-size: calc(var(--ns-fs) * 0.78);
}
.ns-chip.on { background: var(--ns-accent); border-color: var(--ns-accent); color: #fff; }
html[data-theme="dark"] .ns-chip.on { color: #06120e; }

.ns-queue-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ns-queue-row {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--ns-line);
  cursor: pointer;
  font-size: calc(var(--ns-fs) * 0.88);
}
.ns-queue-row:hover { background: var(--ns-panel-2); }
.ns-queue-row.on { background: var(--ns-panel-2); box-shadow: inset 3px 0 0 var(--ns-accent); }
.ns-sevbar { align-self: stretch; border-radius: 0 2px 2px 0; }
.ns-sev-high .ns-sevbar { background: var(--ns-sev-high); }
.ns-sev-medium .ns-sevbar { background: var(--ns-sev-med); }
.ns-sev-low .ns-sevbar { background: var(--ns-sev-low); }
.ns-q-rule { font-weight: 600; line-height: 1.25; }
.ns-q-sub { color: var(--ns-ink-mute); font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.8); line-height: 1.3; }
.ns-q-right { text-align: right; font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.78); color: var(--ns-ink-mute); white-space: nowrap; }
.ns-q-badge { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: calc(var(--ns-fs) * 0.72); border: 1px solid var(--ns-line); }
.ns-queue-row.done { opacity: 0.5; }
.ns-queue-row.done .ns-q-badge { border-color: var(--ns-ok); color: var(--ns-ok); }
.ns-empty { padding: 14px; color: var(--ns-ink-mute); font-style: italic; }

/* ── Log pane ────────────────────────────────────────────── */
.ns-filterbar { flex: 0 0 auto; display: flex; gap: 5px; padding: 5px 7px; border-bottom: 1px solid var(--ns-line); }
.ns-filter-input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.9);
  padding: 4px 7px; border: 1px solid var(--ns-line); border-radius: 3px;
  background: var(--ns-panel-2); color: var(--ns-ink);
}
.ns-filter-input:focus { outline: 2px solid var(--ns-accent); outline-offset: -1px; }
.ns-filter-msg { flex: 0 0 auto; padding: 0 8px; font-size: calc(var(--ns-fs) * 0.82); }
.ns-filter-msg:empty { display: none; }
.ns-filter-msg.err { padding: 5px 8px; color: var(--ns-bad); background: var(--ns-panel-2); border-bottom: 1px solid var(--ns-line); }
.ns-filter-msg.ok { padding: 4px 8px; color: var(--ns-ink-mute); font-family: var(--ns-mono); }
.ns-caret { font-family: var(--ns-mono); white-space: pre; color: var(--ns-bad); display: block; }
.ns-fixbtn { margin-left: 6px; }

.ns-log-scroll { flex: 1 1 auto; overflow-y: auto; position: relative; min-height: 0; font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.85); }
.ns-log-spacer { position: absolute; top: 0; left: 0; width: 1px; }
.ns-log-rows { position: absolute; top: 0; left: 0; right: 0; }
.ns-log-row {
  height: var(--ns-row-h); line-height: var(--ns-row-h);
  padding: 0 8px; white-space: pre; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid transparent; cursor: pointer;
}
.ns-log-row:nth-child(even) { background: var(--ns-panel-2); }
.ns-log-row:hover { outline: 1px solid var(--ns-accent); outline-offset: -1px; }
.ns-log-row.pinned { box-shadow: inset 3px 0 0 var(--ns-accent); }
.ns-log-row.trig { background: rgba(179, 38, 30, 0.10); }
html[data-theme="dark"] .ns-log-row.trig { background: rgba(255, 107, 94, 0.14); }
.ns-log-table { width: 100%; border-collapse: collapse; }
.ns-log-table th {
  text-align: left; font-weight: 700; padding: 2px 8px; position: sticky; top: 0;
  background: var(--ns-panel-2); border-bottom: 1px solid var(--ns-line);
  font-family: sans-serif; font-size: calc(var(--ns-fs) * 0.8);
}
.ns-log-table td { padding: 1px 8px; height: var(--ns-row-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.ns-log-table tr:nth-child(even) td { background: var(--ns-panel-2); }
.ns-log-table tr { cursor: pointer; }
.ns-log-table tr:hover td { outline: 1px solid var(--ns-accent); outline-offset: -1px; }
.ns-log-table tr.pinned td:first-child { box-shadow: inset 3px 0 0 var(--ns-accent); }

/* ── Case and context ────────────────────────────────────── */
.ns-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--ns-line); background: var(--ns-panel-2); }
.ns-tab {
  border: none; background: none; color: var(--ns-ink-mute);
  padding: 6px 14px; cursor: pointer; font-size: calc(var(--ns-fs) * 0.85);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
}
.ns-tab-on { color: var(--ns-accent); border-bottom-color: var(--ns-accent); }
.ns-tabbody { flex: 1 1 auto; overflow-y: auto; padding: 9px 11px; min-height: 0; font-size: calc(var(--ns-fs) * 0.9); }

.ns-case-h { font-size: calc(var(--ns-fs) * 1.05); font-weight: 700; margin: 0 0 3px; }
.ns-case-sub { color: var(--ns-ink-mute); font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.8); margin-bottom: 9px; }
.ns-sect { margin: 12px 0 5px; font-weight: 700; color: var(--ns-accent); text-transform: uppercase; font-size: calc(var(--ns-fs) * 0.78); letter-spacing: 0.06em; }
.ns-why { background: var(--ns-panel-2); border-left: 3px solid var(--ns-accent); padding: 7px 9px; border-radius: 0 3px 3px 0; }
.ns-why p { margin: 0 0 5px; }
.ns-math { font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.82); color: var(--ns-ink-mute); }
.ns-qcode {
  font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.8);
  background: var(--ns-bg); border: 1px solid var(--ns-line); border-radius: 3px;
  padding: 4px 6px; margin: 5px 0; word-break: break-all; display: block;
}
.ns-hintlist { margin: 4px 0 0 18px; padding: 0; color: var(--ns-ink-mute); }

.ns-form label { display: block; margin: 7px 0 2px; font-weight: 600; font-size: calc(var(--ns-fs) * 0.85); }
.ns-form select, .ns-form input[type=text] {
  width: 100%; padding: 4px 6px; border: 1px solid var(--ns-line); border-radius: 3px;
  background: var(--ns-panel-2); color: var(--ns-ink); font-size: calc(var(--ns-fs) * 0.9);
  font-family: inherit;
}
.ns-disp-hint { color: var(--ns-ink-mute); font-size: calc(var(--ns-fs) * 0.8); margin-top: 3px; min-height: 2.2em; }
.ns-actions { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }

.ns-pinned { list-style: none; margin: 0; padding: 0; }
.ns-pinned li {
  font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.78);
  padding: 3px 5px; border: 1px solid var(--ns-line); border-radius: 3px;
  margin-bottom: 3px; display: flex; gap: 5px; align-items: baseline;
  background: var(--ns-panel-2);
}
.ns-pinned li span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-unpin { border: none; background: none; color: var(--ns-bad); cursor: pointer; font-size: calc(var(--ns-fs) * 0.9); padding: 0 3px; }

/* Context registers */
.ns-ctx-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.ns-ctx-search { width: 100%; margin-bottom: 7px; padding: 4px 6px; border: 1px solid var(--ns-line); border-radius: 3px; background: var(--ns-panel-2); color: var(--ns-ink); font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.85); }
.ns-ctx-rec { border: 1px solid var(--ns-line); border-radius: 3px; padding: 6px 8px; margin-bottom: 5px; background: var(--ns-panel-2); }
.ns-ctx-rec dt { font-weight: 700; font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.82); color: var(--ns-accent); }
.ns-ctx-rec dl { margin: 3px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-size: calc(var(--ns-fs) * 0.8); }
.ns-ctx-rec dl b { color: var(--ns-ink-mute); font-weight: 400; }
.ns-ctx-note { margin-top: 4px; font-style: italic; color: var(--ns-ink-mute); font-size: calc(var(--ns-fs) * 0.82); }
.ns-pinctx { margin-top: 5px; }

/* ── Modal ───────────────────────────────────────────────── */
.ns-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px;
}
.ns-modal[hidden] { display: none; }
.ns-modal-card {
  background: var(--ns-panel); color: var(--ns-ink);
  border: 1px solid var(--ns-line); border-radius: 5px;
  max-width: 900px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column;
}
.ns-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid var(--ns-line); background: var(--ns-panel-2);
  font-weight: 700; color: var(--ns-accent);
}
.ns-modal-body { overflow-y: auto; padding: 13px; }
.ns-modal-body h3 { margin: 14px 0 5px; color: var(--ns-accent); font-size: calc(var(--ns-fs) * 1); text-transform: uppercase; letter-spacing: 0.05em; }
.ns-modal-body h3:first-child { margin-top: 0; }
.ns-pre {
  font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.82);
  white-space: pre; overflow-x: auto;
  background: var(--ns-bg); border: 1px solid var(--ns-line); border-radius: 3px; padding: 9px;
}
/* Reports render into a preselected textarea. navigator.clipboard needs a
   secure context and file:// is not reliably one, so Copy is an enhancement
   and select-all is the guaranteed path. */
/* The after-action timeline. A plain white plate in both themes on purpose:
   the same canvas is embedded in the PDF, so it is painted in fixed colours
   rather than theme tokens, and a dark frame around a white drawing reads as
   a rendering fault rather than a design. */
.ns-timeline {
  background: #fff;
  border: 1px solid var(--ns-line, #d8d8d8);
  border-radius: 6px;
  padding: 8px;
  margin: 6px 0 14px;
  overflow-x: auto;
}
.ns-timeline canvas { display: block; min-width: 620px; }

/* Links inside a modal take the brand accent rather than the browser's blue,
   which is what DigSite does with `.dg-modal-card a`. Without it the one
   outbound link in the About box is the only thing on screen that is not part
   of the palette. */
.ns-modal-card a { color: var(--ns-accent); }
.ns-modal-card a:visited { color: var(--ns-accent); }

.ns-au-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.ns-au-check input { margin: 0; }

.ns-report-area {
  width: 100%; min-height: 46vh; font-family: var(--ns-mono);
  font-size: calc(var(--ns-fs) * 0.8); white-space: pre; overflow: auto;
  background: var(--ns-bg); color: var(--ns-ink);
  border: 1px solid var(--ns-line); border-radius: 3px; padding: 8px;
}
.ns-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; margin-bottom: 12px; }
.ns-score-card { border: 1px solid var(--ns-line); border-radius: 4px; padding: 9px 11px; background: var(--ns-panel-2); }
.ns-score-card h4 { margin: 0 0 5px; font-size: calc(var(--ns-fs) * 0.78); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-ink-mute); }
.ns-score-big { font-size: calc(var(--ns-fs) * 1.7); font-weight: 700; font-family: var(--ns-mono); }
.ns-score-note { font-size: calc(var(--ns-fs) * 0.8); color: var(--ns-ink-mute); margin-top: 3px; }
.ns-good { color: var(--ns-ok); }
.ns-mid { color: var(--ns-warn); }
.ns-bad { color: var(--ns-bad); }

.ns-help-ex { font-family: var(--ns-mono); font-size: calc(var(--ns-fs) * 0.85); display: block; width: 100%; text-align: left;
  border: 1px solid var(--ns-line); border-radius: 3px; background: var(--ns-panel-2); color: var(--ns-ink);
  padding: 4px 7px; margin-bottom: 3px; cursor: pointer; }
.ns-help-ex:hover { border-color: var(--ns-accent); color: var(--ns-accent); }

/* ── Narrow screens: stack the panes ─────────────────────── */
@media (max-width: 1100px) {
  .ns-main { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 0.8fr) minmax(200px, 1.4fr) minmax(180px, 1fr); }
  body { overflow: auto; }
}
@media (max-width: 720px) {
  .ns-clockbar { flex-wrap: wrap; gap: 8px; }
  .ns-progress { order: 10; flex-basis: 100%; }
  .ect-header-app-title .app-name { font-size: 1.3rem; }
  .ect-header-title .school { font-size: 0.85rem; }
  .ect-header-title .college { font-size: 0.8rem; }
}