/* app/styles/node.css · Camp Vault's look (the dark node theme). Item 15 rebuilds it on the design system tokens.
   Linked after legacy.css.
   Formerly app/node-theme.css, unchanged (code split, master §2 item 6, 24 Oct 2026). */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   NODE THEME · Pine & Lantern (camp side only)
   Everything about the Node's look lives in this file. Change a value in section 1–6 and refresh.
   It only applies inside <body class="node">, which the app switches on when a camp's Node opens
   (and off again when you leave it), so the candidate / Exchange screens keep their own look.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

body.node, html.node-boot, body.node-signin {
  /* ── 1. Colours: Pine & Lantern ── */
  --n-ground: #0D110E;        /* page background */
  --n-rail: #101511;          /* sidebar, inputs */
  --n-panel: #141A16;         /* cards, tables, modals */
  --n-panel-2: #18201B;       /* table headers, raised areas */
  --n-hover: #1C2620;         /* hover and selected rows / nav */
  --n-border: #26312A;
  --n-border-2: #33403A;      /* buttons, inputs */
  --n-line: #1E2621;          /* thin dividers, ring and bar tracks */
  --n-text: #ECE8DF;          /* warm off-white */
  --n-muted: #A7AC9F;
  --n-faint: #868D82;         /* small labels (4.5:1 or better on panels) */
  --n-accent: #8DBF8F;        /* authenticated, main buttons, links */
  --n-accent-hover: #A6CFA8;
  --n-on-accent: #0B1A0E;     /* text on the accent */
  --n-accent-soft: #1B2A1E;   /* accent badge background */
  --n-accent-line: #3E5A40;   /* accent borders (pinned ring, open compartment) */
  --n-horizon: #E3A857;       /* lantern amber: expiring soon, waiting */
  --n-horizon-soft: #2E2616;
  --n-horizon-line: #4A3B1F;
  --n-danger: #E0605A;        /* missing, expired, broken */
  --n-danger-soft: #2E1716;
  --n-info: #9FC3D9;
  --n-info-soft: #16232A;

  /* ── 2. Type ── */
  --n-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --n-size: 14px;             /* body text */
  --n-title: 28px;            /* page title */
  --n-h2: 16px;               /* card titles */
  --n-small: 12.5px;
  --n-eyebrow: 11.5px;        /* small capitals above titles */
  --n-eyebrow-spacing: .16em;

  /* ── 3. Shape and space ── */
  --n-radius: 14px;           /* cards */
  --n-radius-sm: 9px;         /* buttons, inputs */
  --n-pad: 20px;              /* inside cards */
  --n-gap: 16px;              /* between cards */
  --n-rail-width: 248px;      /* sidebar */
  --n-content-width: 1180px;  /* widest the page content gets */

  /* ── 4. Readiness rings and compartments ── */
  --n-ring-low-below: 75;     /* a ring under this % shows in Horizon amber */
  --n-ring-good: var(--n-accent);
  --n-ring-low: var(--n-horizon);
  --n-bar-full: var(--n-accent);    /* compartment complete */
  --n-bar-near: var(--n-text);      /* compartment nearly there */
  --n-bar-gap: var(--n-horizon);    /* compartment with a gap */

  /* ── 5. Core orbit, Alerts and the Ledger ── */
  --n-orbit-path: var(--n-border);
  --n-alert-amber-days: 30;   /* an Alert turns amber this many days before expiry */
  --n-alert-red-days: 7;      /* ...and red this many days before */
  --n-thread-top: var(--n-accent);          /* the Ledger thread: green at the top… */
  --n-thread-mid: #3E5A40;
  --n-thread-end: rgba(62, 90, 64, .06);     /* …nearly invisible at the bottom */
  --n-lg-core: 56px;                         /* the Core mark the thread hangs from */
  --n-bead: var(--n-accent);                 /* green: authenticated / locked */
  --n-bead-plain: #8C948A;                   /* grey: everyday actions (deposits, people) */
  --n-bead-release: var(--n-horizon);        /* amber: Vault releases */
  --n-bead-redacted: var(--n-muted);         /* dashed: personal details removed (logged) */
  --n-bead-altered: var(--n-danger);         /* solid red: changed or missing */
  --n-bead-knock: rgba(224, 96, 90, .5);     /* soft red ring: fine itself, the one before was changed */
  --n-bead-glow: rgba(141, 191, 143, .35);   /* glow on the newest bead and the selected one */
  --n-sel-bg: rgba(141, 191, 143, .07);      /* highlight behind the selected entry */
  --n-sel-halo: rgba(141, 191, 143, .35);
  --n-ledger-card: 380px;     /* the sealed detail card */

  /* ── 5b. Core (board H) ── */
  --n-core-stage: 520px;      /* the largest the square holding the main ring and its orbit gets */
  --n-core-label-room: 210px; /* room left beside the orbit for the checklist names */
  --n-core-ring: 60%;         /* the main ring, as a share of that square */
  --n-core-small: 58px;       /* checklist rings on the orbit */
  --n-core-orbit: 45%;        /* how far out they sit (% of the stage) */
  --n-core-pct: 64px;         /* the big % */
  --n-core-title: 34px;
  --n-core-glow: rgba(227, 168, 87, .075);   /* soft glow behind the main ring */

  /* ── 6. Motion ── */
  --n-ease: cubic-bezier(.6, 0, .2, 1);
  --n-ring-time: 1.6s;
  --n-fade-time: .5s;

  /* ── The app's own variables, pointed at the Node palette (no need to edit below this line) ── */
  --bg: var(--n-ground); --bg2: var(--n-panel-2); --surface: var(--n-panel); --surface2: var(--n-panel-2);
  --border: var(--n-border); --border2: var(--n-border-2);
  --text: var(--n-text); --text2: var(--n-muted); --text3: var(--n-faint);
  --blue: var(--n-info); --blue-bg: var(--n-info-soft);
  --green: var(--n-accent); --green-bg: var(--n-accent-soft); --teal: var(--n-accent); --teal-bg: var(--n-accent-soft);
  --amber: var(--n-horizon); --amber-bg: var(--n-horizon-soft); --red: var(--n-danger); --red-bg: var(--n-danger-soft);
  --purple: #C9B6FF; --purple-bg: #221D2E;
  --radius: var(--n-radius); --radius-sm: var(--n-radius-sm);
  --shadow: none; --shadow-md: 0 16px 40px rgba(0,0,0,.5);
  background: var(--n-ground); color: var(--n-text); font-family: var(--n-font); font-size: var(--n-size);
  color-scheme: dark;
}

/* ── Fonts everywhere inside the Node ── */
body.node button, body.node input, body.node select, body.node textarea, body.node .btn, body.node .logout-btn { font-family: var(--n-font); }
body.node code, body.node .metric-value, body.node .nav-count, body.node .name-cell span { font-family: var(--n-mono); }

/* ── Shell: sidebar becomes the Node's own navigation ── */
body.node .sidebar { width: var(--n-rail-width); background: var(--n-rail); border-right-color: var(--n-border); }
body.node .sidebar .logo, body.node #sidebar-nav { display: none; }
body.node .main { margin-left: var(--n-rail-width); max-width: none; padding: 32px 40px 56px; }
.node-side { display: none; }
body.node .node-side { display: flex; flex-direction: column; gap: 2px; padding: 22px 12px 12px; flex: 1; overflow-y: auto; }
.node-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; }
.node-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--n-border-2); background: var(--n-panel-2);
  display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--n-accent); letter-spacing: .02em; }
.node-name { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.node-sub { font: 11px var(--n-mono); letter-spacing: .12em; color: var(--n-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.node-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--n-accent); display: inline-block; flex: none; }
.node-back { display: block; text-align: left; background: none; border: none; color: var(--n-muted); font-size: 13px; padding: 6px 10px 12px; cursor: pointer; }
.node-back:hover { color: var(--n-text); }
.node-switch { margin: 0 8px 12px; width: calc(100% - 16px); }
.node-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 11px; border-radius: 8px; border: none;
  background: none; color: var(--n-muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.node-nav-item i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid #3B4A40; flex: none; }
.node-nav-item:hover { background: var(--n-panel-2); color: var(--n-text); }
.node-nav-item.on { background: var(--n-hover); color: var(--n-text); }
.node-nav-item.on i { background: var(--n-accent); border-color: var(--n-accent); }
.node-nav-item:focus-visible, body.node .btn:focus-visible, .node-drawer:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.node-group { font: 11px var(--n-mono); letter-spacing: .12em; color: var(--n-faint); padding: 16px 11px 5px; }
body.node .sidebar-footer { border-top-color: var(--n-border); }
body.node .user-avatar { background: var(--n-panel-2) !important; color: var(--n-accent) !important; }

/* ── Page header ── */
.node-page { max-width: var(--n-content-width); display: flex; flex-direction: column; gap: 22px; }
.node-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.node-eyebrow { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); color: var(--n-muted); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.node-title { font-size: var(--n-title); font-weight: 600; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; text-wrap: balance; }
.node-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.node #org-body > .card + .card, body.node #org-body .card + .card { margin-top: var(--n-gap); }

/* ── Components ── */
body.node .card, body.node .table-wrap, body.node .modal, body.node .msg-thread, body.node .kanban-card { background: var(--n-panel); border-color: var(--n-border); }
body.node .card { padding: var(--n-pad); }
body.node .card-title { font-size: var(--n-h2); letter-spacing: -.01em; }
body.node .btn { border-color: var(--n-border-2); background: transparent; color: var(--n-text); min-height: 36px; border-radius: var(--n-radius-sm); }
body.node .btn:hover { background: var(--n-panel-2); }
body.node .btn-primary { background: var(--n-accent); color: var(--n-on-accent); border-color: var(--n-accent); font-weight: 600; }
body.node .btn-primary:hover { background: var(--n-accent-hover); opacity: 1; }
body.node .btn-ghost { border-color: transparent; }
body.node .btn-success { background: var(--n-accent-soft); color: var(--n-accent); border-color: var(--n-accent-line); }
body.node .btn-danger { background: var(--n-danger-soft); color: var(--n-danger); border-color: #4A2422; }
body.node .btn-warning { background: var(--n-horizon-soft); color: var(--n-horizon); border-color: var(--n-horizon-line); }
body.node .btn:disabled { opacity: .5; cursor: not-allowed; }
body.node thead th { background: var(--n-panel-2); color: var(--n-faint); border-bottom-color: var(--n-border); }
body.node tbody td { border-bottom-color: var(--n-line); }
body.node tbody tr:hover td { background: var(--n-hover); }
body.node input[type=text], body.node input[type=email], body.node input[type=password], body.node input[type=date], body.node input[type=number], body.node input[type=url],
body.node select, body.node textarea { background: var(--n-rail); border-color: var(--n-border-2); color: var(--n-text); border-radius: var(--n-radius-sm); }
body.node input:focus, body.node select:focus, body.node textarea:focus { border-color: var(--n-accent); }
body.node input[type=checkbox], body.node input[type=radio] { accent-color: var(--n-accent); }
body.node label { color: var(--n-muted); }
body.node a { color: var(--n-accent); }
body.node .overlay { background: rgba(4,6,5,.7); }
body.node .modal-footer { border-top-color: var(--n-border); }
body.node .toast { background: var(--n-text); color: var(--n-ground); }
body.node .info-box { background: var(--n-info-soft); border-color: #2A4250; color: var(--n-info); }
body.node .success-box { background: var(--n-accent-soft); border-color: var(--n-accent-line); color: var(--n-accent); }
body.node .badge-neutral { background: var(--n-panel-2); color: var(--n-muted); }
body.node .tag.on, body.node .msg-bubble.mine, body.node .nav-item.active { background: var(--n-accent); color: var(--n-on-accent); }
body.node .spinner { border-color: rgba(11,26,14,.3); border-top-color: var(--n-on-accent); }
body.node #loading-overlay { background: var(--n-ground); color: var(--n-text); }

/* ── Rings (Core and anywhere else) ── */
.node-ring { position: relative; flex: none; }
.node-ring svg { display: block; width: 100%; height: 100%; }
.node-ring .track { stroke: var(--n-line); }
.node-ring .arc { stroke: var(--n-ring-good); stroke-linecap: round; }
.node-ring.low .arc { stroke: var(--n-ring-low); }
.node-ring .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.node-ring-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.node-ring-pick select { width: auto; max-width: 100%; }
.node-linkbtn { background: none; border: none; color: var(--n-accent); font: 500 13.5px var(--n-font); padding: 0; cursor: pointer; }
.node-linkbtn:hover { text-decoration: underline; }
.node-k { font: 11px var(--n-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--n-muted); }

/* ── Sidebar (board I): search, the list, the Vault set apart, Settings at the bottom ── */
.node-search { position: relative; margin: 0 4px 14px; }
.node-search > svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--n-faint); pointer-events: none; }
body.node input.node-search-in { width: 100%; background: transparent; border: 1px solid var(--n-border-2); border-radius: var(--n-radius-sm); color: var(--n-text);
  padding: 9px 12px 9px 34px; font: 14px var(--n-font); }
body.node input.node-search-in::placeholder { color: var(--n-faint); }
/* Recent, floating under the search box when it's focused and empty (4d) */
.node-suggest { position: fixed; z-index: 80; padding: 8px 6px 6px; border-radius: var(--n-radius-sm); background: var(--n-panel);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px var(--n-border); }
.node-suggest[hidden] { display: none; }
.node-suggest-k { font: 10.5px var(--n-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-faint); padding: 2px 8px 8px; }
.node-suggest-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; width: 100%; text-align: left; background: none; border: none;
  border-radius: 7px; padding: 6px 8px; color: var(--n-text); font: 13px var(--n-font); cursor: pointer; }
.node-suggest-row:hover, .node-suggest-row:focus-visible { background: var(--n-panel-2); outline: none; }
.node-suggest-row:hover .node-suggest-name { color: var(--n-accent); }
.node-suggest-text { display: grid; min-width: 0; gap: 1px; }
.node-suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-suggest-sub { font-size: 11.5px; color: var(--n-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-suggest-row .dm-exp { font-size: 11px; white-space: nowrap; }
.node-count { margin-left: auto; font: 11px var(--n-mono); color: var(--n-horizon); background: var(--n-horizon-soft); border-radius: 999px; padding: 1px 8px; }
.node-divider { height: 1px; background: var(--n-border); margin: 16px 6px; }
.node-vault { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; padding: 12px; border-radius: 12px;
  border: 1px solid var(--n-horizon-line); background: linear-gradient(180deg, rgba(227, 168, 87, .07), rgba(227, 168, 87, .02)); color: var(--n-text); font: inherit; }
.node-vault:hover, .node-vault.on { border-color: var(--n-horizon); }
.node-vault:focus-visible { outline: 2px solid var(--n-horizon); outline-offset: 2px; }
.node-vault-seal { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1.5px solid var(--n-horizon); display: grid; place-items: center; color: var(--n-horizon); }
.node-vault-seal svg { width: 16px; height: 16px; }
.node-vault-name { display: block; font-weight: 600; font-size: 15.5px; }
.node-vault-line { display: block; font-size: 12px; color: var(--n-horizon); margin-top: 1px; }
.node-subitem { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--n-muted); font: 13px var(--n-font); padding: 8px 12px 0 62px; cursor: pointer; }
.node-subitem:hover, .node-subitem.on { color: var(--n-text); }
.node-side-bottom { margin-top: auto; padding-top: 16px; }
body.node .sidebar-help, body.node .sidebar-footer .logout-btn[onclick^="openPasswordModal"] { display: none !important; }
body.node .sidebar-footer .logout-btn { font-size: 12px; color: var(--n-faint); }

/* ── Department colours (a small fixed palette) and their round letter ── */
body.node {
  --n-dept-sage: #8DBF8F; --n-dept-amber: #E3A857; --n-dept-rose: #E39494; --n-dept-sky: #8DB8DB;
  --n-dept-lilac: #B6A6E2; --n-dept-teal: #7FC6B9; --n-dept-sand: #D7BE8C; --n-dept-slate: #A7AC9F;
}
.dept-disc { --c: var(--n-dept-slate); width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--c); color: var(--c); display: grid; place-items: center;
  font-weight: 600; font-size: 17px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.dept-disc.d-sm { width: 30px; height: 30px; font-size: 13px; border-width: 1.5px; }
.dept-disc.d-lg { width: 58px; height: 58px; font-size: 22px; }
.dept-disc.camp { border-style: dashed; }
.dept-disc.inbox { --c: var(--n-horizon); }
.dept-disc > svg { display: block; width: 18px; height: 18px; }
.dept-disc.d-sm > svg { width: 14px; height: 14px; } .dept-disc.d-lg > svg { width: 24px; height: 24px; }

/* ── Core (board H): no boxes, the full width ── */
.node-page.wide { max-width: none; overflow-x: clip; }
.core { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); grid-template-areas: "pins pins" "closed closed" "stage info" "thread alerts" "depts depts"; column-gap: clamp(32px, 6vw, 110px); --lg-bg: var(--n-ground); }
.core-stage { grid-area: stage; position: relative; width: min(calc(100% - var(--n-core-label-room)), var(--n-core-stage)); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.core-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, var(--n-core-glow) 0%, transparent 68%); pointer-events: none; }
.core-orbit { position: absolute; inset: calc(50% - var(--n-core-orbit)); border: 1px dashed var(--n-orbit-path); border-radius: 50%; }
.core-main { position: absolute; left: 50%; top: 50%; width: var(--n-core-ring); aspect-ratio: 1; transform: translate(-50%, -50%); }
.core-main .node-ring { width: 100%; height: 100%; }
.core-pct { font-size: clamp(34px, 12.5cqw, var(--n-core-pct)); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.core-ready { font: 11px var(--n-mono); letter-spacing: .3em; color: var(--n-muted); margin-top: 10px; }
.core-from { font-size: 13px; color: var(--n-muted); margin-top: 6px; max-width: 70%; overflow-wrap: break-word; }
.core-sat { position: absolute; left: calc(50% + var(--n-core-orbit) * var(--x)); top: calc(50% + var(--n-core-orbit) * var(--y)); transform: translate(-50%, -50%);
  width: var(--n-core-small); height: var(--n-core-small); }
.core-sat .node-ring { width: 100%; height: 100%; }
.core-sat-pct { font: 500 12px var(--n-mono); }
.core-sat-name { position: absolute; top: 50%; transform: translateY(-50%); width: max-content; max-width: 104px; font-size: 13px; line-height: 1.25; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.core-sat-name small { display: block; font-size: 11px; color: var(--n-faint); }
.core-sat.l .core-sat-name { right: calc(100% + 10px); text-align: right; }
.core-sat.r .core-sat-name { left: calc(100% + 10px); }
.core-drop { position: absolute; left: calc(50% - 1px); top: calc(50% + var(--n-core-ring) / 2); bottom: 0; width: 2px; background: var(--n-thread-top); }
.core-thread { grid-area: thread; position: relative; min-width: 0; padding-bottom: 8px; }
.core-thread::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--n-thread-top) 0%, var(--n-thread-mid) 55%, var(--n-thread-end) 100%); }
.core-thread-in { margin-left: calc(50% - var(--n-lg-core) / 2); position: relative; }
.core-thread-head { display: flex; align-items: center; gap: 14px; padding: 26px 0 10px calc(var(--n-lg-core) + 8px); }
.core-thread .lg-pv-row { grid-template-columns: var(--n-lg-core) minmax(0, 1fr); padding: 7px 0; }
.core-thread .lg-pv-row .lg-what { padding-left: 8px; opacity: max(var(--o, 1), .62); }
.core-thread .lg-pv-row:hover .lg-title { color: var(--n-accent); }
.core-follow { padding: 14px 0 0 calc(var(--n-lg-core) + 8px); }
.lg-pill { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--n-mono); color: var(--n-accent); background: var(--n-accent-soft); border: 1px solid var(--n-accent-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.lg-pill svg { width: 15px; height: 15px; }
.lg-pill.bad { color: var(--n-danger); background: var(--n-danger-soft); border-color: #4A2422; }
.core-info { grid-area: info; align-self: center; padding: 24px 0; min-width: 0; }
.core-title { font-size: var(--n-core-title); font-weight: 600; letter-spacing: -.02em; margin: 8px 0 6px; line-height: 1.15; overflow-wrap: anywhere; }
.core-text { color: var(--n-muted); font-size: 16px; line-height: 1.55; max-width: 52ch; }
.core-text strong { color: var(--n-text); font-weight: 500; }
.core-figs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin-top: 40px; }
.core-fig { padding: 0 clamp(14px, 1.6vw, 28px); border-left: 1px solid var(--n-border); min-width: 0; }
.core-fig:first-child { padding-left: 0; border-left: none; }
.core-fig-v { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.core-fig.warn .core-fig-v, .core-fig.warn .node-k { color: var(--n-horizon); }
.core-fig .node-k { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; }
.core-alerts { grid-area: alerts; padding-top: 26px; min-width: 0; }
.core-alerts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--n-line); }
.core-alerts-head span:last-child { font-size: 12.5px; color: var(--n-faint); }
.core-alert { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--n-line); }
.core-alert i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-faint); }
.core-alert.amber i { background: var(--n-horizon); } .core-alert.red i { background: var(--n-danger); }
.core-alert b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.core-alert small { color: var(--n-muted); font-size: 12.5px; }
.core-alert .when { font: 12.5px var(--n-mono); color: var(--n-muted); white-space: nowrap; text-align: right; }
.core-alert.amber .when { color: var(--n-horizon); } .core-alert.red .when { color: var(--n-danger); } .core-alert.none .when { color: var(--n-faint); }
.core-alert .stamp { font: 600 10.5px var(--n-mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor; }
.core-alert.more { display: none; }
.core-alerts.all .core-alert.more { display: grid; }
.core-alert.upcoming { display: none; opacity: .8; }
.lg-gap { display: block; background: none; border: none; color: var(--n-faint); font: 12px var(--n-font); padding: 2px 0 2px calc(var(--n-lg-core, 40px) + 8px); cursor: pointer; text-align: left; }
.lg-gap:hover { color: var(--n-accent); }
.lg-pv-rem { font-size: 13px; color: var(--n-muted); margin: 6px 0 0 calc(var(--n-lg-core, 40px) + 8px); }
.core-alerts.up .core-alert.upcoming { display: grid; }
.core-alert.clear i { background: var(--n-accent); }
#alerts-upcoming { margin-top: 10px; display: block; }
.core-alerts .node-linkbtn { margin-top: 16px; }
.core-depts { grid-area: depts; margin-top: 56px; min-width: 0; }
.core-depts-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.core-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.core-dept { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; border: 1px solid var(--n-line); background: rgba(236, 232, 223, .02);
  color: var(--n-text); cursor: pointer; font: inherit; text-align: left; }
.core-dept:hover { border-color: var(--n-border-2); background: rgba(236, 232, 223, .04); }
.core-dept b { display: block; font-weight: 500; }
.core-dept small { font-size: 12.5px; color: var(--n-muted); }
.core-dept small em { font-style: normal; color: var(--n-horizon); }

/* ── Departments home, a department, the Inbox, search ── */
.dh { display: flex; flex-direction: column; }
.dh-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--n-line);
  background: none; border-left: none; border-right: none; border-top: none; color: var(--n-text); text-align: left; cursor: pointer; font: inherit; width: 100%; }
.dh-row:hover { background: rgba(236, 232, 223, .025); }
.dh-row b { font-weight: 600; font-size: 15.5px; display: block; }
.dh-row small { color: var(--n-muted); font-size: 13px; }
.dh-row .dh-alerts { font: 12.5px var(--n-mono); color: var(--n-horizon); white-space: nowrap; }
.dh-row .dh-go { color: var(--n-faint); }
.dh-row.inbox { border: 1px solid var(--n-horizon-line); border-radius: 12px; background: linear-gradient(180deg, rgba(227, 168, 87, .06), transparent); margin-bottom: 14px; padding: 14px; }
.dh-note { font-size: 12.5px; color: var(--n-faint); margin-top: 14px; }
.dp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dp-head h2 { font-size: 22px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.dp-head > div:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.dp-head small { color: var(--n-muted); font-size: 13px; }
.dp-head small em { font-style: normal; color: var(--n-horizon); }
.dp-back { background: none; border: none; color: var(--n-muted); font: 13px var(--n-font); padding: 0; cursor: pointer; margin-bottom: 12px; }
.dp-back:hover { color: var(--n-text); }
.dp-drop { border: 1.5px dashed var(--n-border-2); border-radius: 14px; padding: 22px; text-align: center; color: var(--n-muted); margin-bottom: 18px; transition: border-color .15s, background .15s; }
.dp-drop.over { border-color: var(--n-accent); background: var(--n-accent-soft); color: var(--n-text); }
.dp-drop b { color: var(--n-text); font-weight: 500; }
.dp-drop .node-linkbtn { font-size: 14px; }
.dp-up { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; font-size: 13px; max-height: 220px; overflow-y: auto; }
.dp-up li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--n-line); }
.dp-up li span:last-child { font-family: var(--n-mono); font-size: 12px; color: var(--n-muted); white-space: nowrap; }
.dp-up li.ok span:last-child { color: var(--n-accent); } .dp-up li.bad span:last-child { color: var(--n-danger); }
.ib-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  background: var(--n-panel); border: 1px solid var(--n-border); }
.ib-bar select { width: auto; max-width: 100%; }
.ib-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--n-line); }
.ib-row input { width: auto; }
.ib-row b { font-weight: 500; overflow-wrap: anywhere; display: block; }
.ib-row small { color: var(--n-muted); font-size: 12.5px; }
.ib-row.flash, tr.flash td, .dh-row.flash { animation: nodeFlash 2.2s ease; }
@keyframes nodeFlash { 0%, 40% { background: var(--n-accent-soft); } 100% { background: transparent; } }
.sr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--n-line);
  background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; color: var(--n-text); cursor: pointer; font: inherit; }
.sr:hover { background: rgba(236, 232, 223, .025); }
.sr b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.sr small { color: var(--n-muted); font-size: 12.5px; }
.sr-right { text-align: right; font-size: 12.5px; white-space: nowrap; }
.sr-right .ok { color: var(--n-accent); } .sr-right .wait { color: var(--n-horizon); }
.sr-right em { display: block; font-style: normal; font-family: var(--n-mono); color: var(--n-muted); }
.sr-big { margin-bottom: 18px; }
body.node input.sr-big-in { width: 100%; max-width: 560px; border-radius: 999px; padding: 11px 18px; font-size: 15px; background: transparent; }
.look-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.look-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; outline: none; }
.look-swatch.on { box-shadow: 0 0 0 3px var(--n-panel), 0 0 0 5px var(--c); }
.look-swatch:focus-visible { box-shadow: 0 0 0 3px var(--n-panel), 0 0 0 5px var(--n-text); }
.set-section { max-width: 760px; }

/* ── Ledger: badge, filters, the thread hanging from Core, hollow beads, the sealed card (board G) ── */
.lg { display: flex; flex-direction: column; gap: var(--n-gap); --lg-bg: var(--n-ground); }
body.node .lg .card + .card { margin-top: 0; }
.lg-badge { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 !important; }
.lg-shield { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--n-accent-soft); color: var(--n-accent); border: 1px solid var(--n-accent-line); }
.lg-shield svg { width: 26px; height: 26px; }
.lg-badge-main { flex: 1; min-width: 220px; }
.lg-badge-t { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--n-accent); }
.lg-badge-s { color: var(--n-muted); font-size: 13px; margin-top: 2px; }
.lg-badge-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lg-badge.bad { border-color: #4A2422; }
.lg-badge.bad .lg-shield { background: var(--n-danger-soft); color: var(--n-danger); border-color: #4A2422; }
.lg-badge.bad .lg-badge-t { color: var(--n-danger); }
.lg-jumps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lg-jump { font: 12px var(--n-mono); background: var(--n-danger-soft); color: var(--n-danger); border: 1px solid #4A2422; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.lg-jump.knock { background: transparent; color: var(--n-muted); }
.lg-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.lg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Day view (4e): "Go to a day" beside the search; the day's deposits carry a small tag */
.lg-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-daypick { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--n-border-2); border-radius: 999px; padding: 0 12px 0 14px; height: 36px; color: var(--n-muted); font: 13px var(--n-font); cursor: pointer; }
.lg-daypick.on { border-color: var(--n-accent-line); color: var(--n-text); }
body.node .lg-daypick input[type="date"] { background: transparent; border: none; color: var(--n-text); font: 13px var(--n-mono); width: 128px; padding: 0; cursor: pointer; color-scheme: dark; }
body.node .lg-daypick input[type="date"]:focus { outline: none; }
.lg-dayview { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0 8px calc(var(--n-lg-core) + 8px); border-bottom: 1px solid var(--n-line); margin-bottom: 6px; }
.lg-dayview-when { font: 600 15px var(--n-font); color: var(--n-text); }
.lg-dayview-n { font: 11px var(--n-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--n-faint); }
.lg-tag { display: inline-block; margin-left: 8px; vertical-align: 1px; font: 10px var(--n-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--n-horizon); background: var(--n-horizon-soft); border-radius: 999px; padding: 1px 7px; }
.lg-row.deposit .lg-bead { box-shadow: 0 0 0 3px var(--n-horizon-soft); }
.lg-chip { border: 1px solid var(--n-border-2); background: transparent; color: var(--n-muted); border-radius: 999px; padding: 6px 13px; font: 500 13px var(--n-font); cursor: pointer; min-height: 34px; }
.lg-chip:hover { color: var(--n-text); }
.lg-chip.on { background: var(--n-text); border-color: var(--n-text); color: var(--n-ground); }
body.node input.lg-search { width: 330px; max-width: 100%; background: transparent; border: 1px solid var(--n-border-2); color: var(--n-text); border-radius: 999px; padding: 8px 16px; font: 14px var(--n-font); }
.lg-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--n-ledger-card); gap: 36px; align-items: start; }
/* the thread floats on the page: no box */
.lg-hang { position: relative; min-width: 0; }
.lg-hang::before { content: ""; position: absolute; left: calc(var(--n-lg-core) / 2 - 1px); top: calc(var(--n-lg-core) - 4px); bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--n-thread-top) 0%, var(--n-thread-mid) 40%, var(--n-thread-end) 100%); border-radius: 2px; }
.lg-top { display: flex; align-items: center; gap: 16px; color: var(--n-muted); font-size: 13.5px; position: relative; z-index: 1; }
.lg-core { width: var(--n-lg-core); height: var(--n-lg-core); flex: none; border-radius: 50%; }
.lg-core svg { display: block; width: 100%; height: 100%; }
.lg-core .track { stroke: var(--n-line); }
.lg-core .arc { stroke: var(--n-ring-good); stroke-linecap: round; }
.lg-core .arc.low { stroke: var(--n-ring-low); }
.lg-thread { position: relative; }
.lg-day { position: relative; display: flex; align-items: center; gap: 0; padding: 18px 0 6px; font: 11px var(--n-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--n-faint); }
.lg-day i { width: var(--n-lg-core); flex: none; display: grid; place-items: center; }
.lg-day i::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--lg-bg); border: 1.5px solid var(--n-accent-line); }
.lg-day span { padding-left: 14px; }
.lg-row, .lg-pv-row { position: relative; display: grid; grid-template-columns: var(--n-lg-core) minmax(0, 1fr) 64px; align-items: center; width: 100%; text-align: left;
  background: none; border: none; color: var(--n-text); padding: 2px 0; cursor: pointer; font: inherit; }
.lg-box { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; margin-left: 8px; }
.lg-row:hover .lg-box { background: rgba(236, 232, 223, .03); }
.lg-row.sel .lg-box { background: var(--n-sel-bg); border-color: var(--n-accent-line); }
.lg-row:focus-visible { outline: none; } .lg-row:focus-visible .lg-box { outline: 2px solid var(--n-accent); outline-offset: 1px; }
.lg-time { font: 12.5px var(--n-mono); color: var(--n-muted); text-align: right; white-space: nowrap; }
/* beads: hollow rings, coloured by type; red states solid */
.lg-bead { justify-self: center; width: var(--s, 14px); height: var(--s, 14px); border-radius: 50%; box-sizing: border-box; position: relative; z-index: 1;
  border: 2px solid var(--n-bead-plain); background: var(--lg-bg); opacity: var(--o, 1); transition: box-shadow .2s; }
.lg-bead.sealed { border-color: var(--n-bead); }
.lg-bead.release { border-color: var(--n-bead-release); }
.lg-bead.redacted { border-style: dashed; border-color: var(--n-bead-redacted); }
.lg-bead.altered { background: var(--n-bead-altered); border-color: var(--n-bead-altered); box-shadow: 0 0 12px var(--n-bead-altered); opacity: 1; }
.lg-bead.missing { border: 2px dashed var(--n-bead-altered); opacity: 1; }
.lg-bead.knock { border-color: var(--n-bead-knock); opacity: .8; }
.newest > .lg-bead:not(.altered) { box-shadow: 0 0 0 4px var(--lg-bg), 0 0 16px var(--n-bead-glow); }
.lg-row.sel .lg-bead { opacity: 1; box-shadow: 0 0 0 4px var(--lg-bg), 0 0 0 7px var(--n-sel-halo), 0 0 16px var(--n-bead-glow); }
.lg-row.sel .lg-bead.altered, .lg-row.sel .lg-bead.missing { box-shadow: 0 0 0 4px var(--lg-bg), 0 0 0 7px rgba(224, 96, 90, .35), 0 0 14px var(--n-bead-altered); }
.lg-row.altered .lg-title, .lg-row.missing .lg-title { color: var(--n-danger); }
.lg-row.knock .lg-title { color: #D9928C; }
.lg-row.redacted .lg-title { color: var(--n-muted); }
.lg-what { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lg-title { font-weight: 500; overflow-wrap: anywhere; }
.lg-sub { font-size: 12.5px; color: var(--n-muted); overflow-wrap: anywhere; }
.lg-seq { font: 11.5px var(--n-mono); color: var(--n-faint); white-space: nowrap; }
.lg-foot { padding: 14px 0 0 calc(var(--n-lg-core) + 8px); position: relative; z-index: 1; }
.lg-empty { color: var(--n-muted); padding: 18px 0 18px calc(var(--n-lg-core) + 8px); }
.lg-faint { color: var(--n-faint); }
.lg-mono { font-family: var(--n-mono); font-size: 12.5px; }
.lg-pre { background: var(--lg-bg); }
.lg-pre summary { cursor: pointer; color: var(--n-muted); font-size: 13px; }
.lg-pre-body { font-size: 13px; }
.lg-pre-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--n-line); }
/* the sealed card */
.lg-card { position: sticky; top: 20px; }
.lg-card-in { position: relative; background: var(--n-panel); border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 24px; }
.lg-card-in.altered, .lg-card-in.missing { border-color: #4A2422; }
.lg-card-empty { text-align: center; color: var(--n-muted); font-size: 13px; }
.lg-card-empty .lg-seal { margin: 0 auto 10px; }
.lg-card-head { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--n-line); }
.lg-seal { position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%; border: 2px solid var(--n-accent-line); display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 22px rgba(141, 191, 143, .12); color: var(--n-accent); }
.lg-seal::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--n-accent-line); }
.lg-seal-k { font: 9px var(--n-mono); letter-spacing: .2em; color: var(--n-muted); }
.lg-seal-n { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lg-seal.altered, .lg-seal.missing, .lg-seal.knock { border-color: var(--n-danger); color: var(--n-danger); box-shadow: 0 0 18px rgba(224, 96, 90, .18); }
.lg-seal.altered::after, .lg-seal.missing::after, .lg-seal.knock::after { border-color: rgba(224, 96, 90, .45); }
.lg-seal.knock { border-color: var(--n-bead-knock); color: #D9928C; }
.lg-seal.release { border-color: var(--n-horizon-line); color: var(--n-horizon); }
.lg-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 3px; overflow-wrap: anywhere; line-height: 1.25; }
.lg-sealed { font-size: 13px; color: var(--n-accent); }
.lg-sealed.altered, .lg-sealed.missing { color: var(--n-danger); }
.lg-sealed.knock { color: #D9928C; }
.lg-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; font-size: 13.5px; }
.lg-dl dt, .lg-dl dd { padding: 10px 0; border-bottom: 1px solid var(--n-line); margin: 0; }
.lg-dl dt { color: var(--n-muted); padding-right: 16px; }
.lg-dl dd { text-align: right; overflow-wrap: anywhere; }
.lg-ok { color: var(--n-accent); } .lg-bad { color: var(--n-danger); }
.lg-card-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 18px; }
body.node .lg-card-acts .btn { border-radius: 999px; min-height: 40px; }
.lg-note { font-size: 12.5px; color: var(--n-faint); margin-top: 16px; line-height: 1.5; }
.lg-close { display: none; }
.lg-scrim { display: none; }
/* ── Keyholders: one "Add a person" ── */
.key-add { width: 600px; }
.key-add h2 { font-size: 20px; margin-bottom: 14px; }
.key-roles { border: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 8px; }
.key-roles legend { font-size: 13px; color: var(--n-muted); margin-bottom: 8px; padding: 0; }
.key-role { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--n-border); border-radius: var(--n-radius-sm); cursor: pointer; font-weight: 400; margin: 0; }
.key-role:has(input:checked) { border-color: var(--n-accent-line); background: var(--n-accent-soft); }
.key-role input { width: auto; margin-top: 3px; }
.key-role strong { display: block; color: var(--n-text); font-weight: 600; font-size: 14px; }
.key-role small { display: block; color: var(--n-muted); font-size: 12.5px; }
.key-staff { border-top: 1px solid var(--n-line); padding-top: 12px; }
.key-sub { font-size: 13px; color: var(--n-muted); margin-bottom: 8px; }
.key-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.key-depts label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 400; color: var(--n-text); }
.key-note { font-size: 12.5px; color: var(--n-faint); margin-top: 10px; }

/* ── Vault: compartments ── */
.node-drawers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.node-drawer { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; color: var(--n-text); padding: 18px 16px 14px;
  border-radius: 12px; border: 1px solid var(--n-border); background: linear-gradient(180deg, #171E19 0%, #121813 100%);
  box-shadow: inset 0 1px 0 rgba(236,232,223,.04), 0 1px 0 rgba(0,0,0,.4); transition: border-color .15s, transform .15s; }
.node-drawer::after { content: ""; position: absolute; left: 50%; top: 9px; width: 34px; height: 4px; margin-left: -17px; border-radius: 3px; background: #2C3830; }
.node-drawer:hover { border-color: var(--n-border-2); transform: translateY(-1px); }
.node-drawer.open { border-color: var(--n-accent-line); background: linear-gradient(180deg, #1A231D 0%, #141A16 100%); }
.node-drawer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.node-drawer-name { font-weight: 600; overflow-wrap: anywhere; }
.node-drawer-n { font: 12.5px var(--n-mono); white-space: nowrap; }
.node-bar { height: 4px; border-radius: 4px; background: var(--n-line); margin: 12px 0 8px; overflow: hidden; }
.node-bar span { display: block; height: 4px; border-radius: 4px; background: var(--n-bar-near); }
.node-drawer.full .node-bar span { background: var(--n-bar-full); } .node-drawer.full .node-drawer-n { color: var(--n-bar-full); }
.node-drawer.gap .node-bar span { background: var(--n-bar-gap); } .node-drawer.gap .node-drawer-n { color: var(--n-bar-gap); }
.node-drawer-sub { font-size: 12px; color: var(--n-muted); }
.node-slots { margin-top: 4px; }
.node-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--n-border); padding-bottom: 10px; margin-bottom: 16px; }
body.node .node-tabs .btn { min-height: 34px; }

/* ── Motion (skipped when the viewer prefers reduced motion) ── */
/* ═══ R2 step 1b: Departments (board K), Inbox (boards L, N), inside a department (board M) ═══
   No bordered tables, no grey dropdowns: rings, rows with hairlines and things that float on the page. */
body.node {
  --n-dk-ring: 122px;          /* a department's ring on the Departments page */
  --n-dk-stroke: 5px;
  --n-dm-ring: 150px;          /* the big ring at the top of a department */
  --n-paper: #E9E3D6;          /* the little file thumbnails in the Inbox */
  --n-paper-ink: #8A8578;
  --n-float-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --n-thumb-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  --n-inbox-glow: rgba(227, 168, 87, .28);
}
.dk-sub { color: var(--n-muted); font-size: 14px; margin-top: -10px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.dk-sub .ib-private { color: var(--n-faint); font-size: 12.5px; }
.dk-crumb { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--n-muted); }
.dk-crumb:hover { color: var(--n-text); }

/* The Inbox banner: amber, the count in a glowing ring */
.dk-inbox { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border: 1px solid var(--n-horizon-line); border-radius: 18px;
  background: linear-gradient(90deg, var(--n-horizon-soft), transparent 75%); }
.dk-inbox-n { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 2px solid var(--n-horizon); color: var(--n-horizon); display: grid; place-items: center;
  font: 600 20px var(--n-font); box-shadow: 0 0 22px var(--n-inbox-glow), inset 0 0 12px var(--n-inbox-glow); }
.dk-inbox-text { flex: 1; min-width: 0; }
.dk-inbox-text b { display: block; font-size: 17px; font-weight: 600; }
.dk-inbox-text small { display: block; color: var(--n-muted); font-size: 13px; overflow-wrap: anywhere; }
.dk-inbox-go { flex: none; border: none; border-radius: 999px; padding: 9px 18px; background: var(--n-horizon); color: var(--n-on-accent); font: 600 14px var(--n-font); cursor: pointer; }
.dk-inbox-go:hover { filter: brightness(1.08); }

/* The rings */
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, 234px); gap: 44px 0; padding: 18px 0 10px; }
.node-page.dk-page { overflow-x: visible; }
.dk-item { --c: var(--n-dept-slate); background: none; border: none; color: var(--n-text); font-family: var(--n-font); cursor: pointer; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border-radius: 16px; }
.dk-ring { position: relative; width: var(--n-dk-ring); aspect-ratio: 1; margin-bottom: 14px; border-radius: 50%; transition: box-shadow .25s, transform .25s; }
.dk-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dk-track { stroke: var(--n-line); stroke-width: var(--n-dk-stroke); }
.dk-track.dashed { stroke: var(--n-border-2); stroke-width: 2px; stroke-dasharray: 2 6; stroke-linecap: round; }
.dk-arc { stroke: var(--c); stroke-width: var(--n-dk-stroke); stroke-linecap: round; transition: stroke-dasharray var(--n-ring-time) var(--n-ease); }
.dk-letter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c); font: 600 40px var(--n-font); }
.dk-item:hover .dk-ring, .dk-item:focus-visible .dk-ring { box-shadow: 0 0 34px color-mix(in srgb, var(--c) 26%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }
.dk-item:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.dk-item b { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }
.dk-item small { color: var(--n-faint); font-size: 12.5px; max-width: 150px; line-height: 1.35; }
.dk-alert { color: var(--n-horizon); font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.dk-alert .dk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-horizon); }
.dk-item.camp { --c: var(--n-muted); }
.dk-item.new { --c: var(--n-faint); }
.dk-item.new .dk-letter { font-weight: 400; font-size: 34px; }
.dk-new-label { color: var(--n-muted); font-size: 14.5px; }
.dk-foot { color: var(--n-faint); font-size: 12.5px; margin-top: 18px; }
.dk-foot .node-linkbtn { font-size: 12.5px; }

/* Drop anywhere: a soft frame and a line saying where the files will go */
body.node.n-dragging #org-body { position: relative; }
body.node.n-dragging #org-body[data-drop]:not([data-drop=""])::after { content: attr(data-drop); position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 60;
  padding: 12px 22px; border-radius: 999px; background: var(--n-panel-2); border: 1px solid var(--n-accent-line); color: var(--n-text); font: 500 14px var(--n-font); box-shadow: var(--n-float-shadow); pointer-events: none; }
body.node.n-dragging #org-body[data-drop]:not([data-drop=""])::before { content: ''; position: fixed; inset: 10px; z-index: 59; border: 2px dashed var(--n-accent-line); border-radius: 22px; pointer-events: none;
  background: color-mix(in srgb, var(--n-accent) 4%, transparent); }

/* ── The Inbox (board L) ── */
.ib-list { display: flex; flex-direction: column; gap: 10px; }
body.node .ib-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 16px 20px; border: 1px solid transparent; border-bottom-color: transparent;
  border-radius: 16px; transition: background .15s, border-color .15s; }
body.node .ib-row:hover { background: color-mix(in srgb, var(--n-panel) 60%, transparent); }
body.node .ib-row.on { background: var(--n-panel); border-color: var(--n-border); }
.ib-thumb { width: 46px; height: 58px; border-radius: 6px; background: var(--n-paper); position: relative; flex: none; box-shadow: var(--n-thumb-shadow); }
.ib-thumb span { position: absolute; left: 7px; bottom: 6px; font: 500 9px var(--n-mono); color: var(--n-paper-ink); }
.ib-main b { font-weight: 500; font-size: 15.5px; display: block; overflow-wrap: anywhere; }
.ib-main small { color: var(--n-faint); font-size: 12.5px; }
.ib-guess { color: var(--n-muted); font-size: 13px; white-space: nowrap; }
.ib-letters, .ib-float-letters { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-letter { --c: var(--n-muted); width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); color: var(--c);
  font: 600 13px var(--n-font); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .15s, transform .15s, box-shadow .15s; }
.ib-letter:hover, .ib-letter:focus-visible { background: color-mix(in srgb, var(--c) 22%, transparent); transform: translateY(-1px); }
.ib-letter.hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.ib-letter.camp { border-style: dashed; }
.ib-letter:disabled { opacity: .5; cursor: wait; }
.ib-open, .dm-open-btn { background: none; border: none; color: var(--n-text); font: 500 14px var(--n-font); cursor: pointer; padding: 6px 4px; }
.ib-open:hover, .dm-open-btn:hover { color: var(--n-accent); }
.ib-drop { padding: 24px; color: var(--n-faint); border-width: 1px; border-color: var(--n-border); margin: 6px 0 0; border-radius: 16px; }
.ib-sub-phone { display: none; }
/* A tick box that belongs on this page */
body.node input.n-tick { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid var(--n-border-2); background: transparent;
  display: grid; place-items: center; cursor: pointer; flex: none; }
body.node input.n-tick:checked { background: var(--n-accent); border-color: var(--n-accent); }
body.node input.n-tick:checked::after { content: '✓'; color: var(--n-on-accent); font: 700 13px var(--n-font); }
body.node input.n-tick:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
/* The floating bar once something is ticked */
.ib-float { position: fixed; z-index: 40; left: calc(50% + var(--n-rail-width) / 2); bottom: 26px; transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 18px; padding: 12px 16px 12px 22px; border-radius: 999px; background: var(--n-panel); border: 1px solid var(--n-border-2);
  box-shadow: var(--n-float-shadow); transition: transform .3s var(--n-ease), opacity .2s; max-width: calc(100vw - var(--n-rail-width) - 40px); }
.ib-float.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ib-float-n { white-space: nowrap; font-size: 15px; }
.ib-float-n b { color: var(--n-accent); font-weight: 600; }
.ib-newdept { background: none; border: 1px dashed var(--n-border-2); border-radius: 999px; color: var(--n-muted); font: 500 13.5px var(--n-font); padding: 8px 16px; cursor: pointer; white-space: nowrap; }
.ib-newdept:hover { color: var(--n-text); border-color: var(--n-muted); }
body.ib-ticking .node-page { padding-bottom: 90px; }

/* A clean picker (document type) and the small floating menu */
.n-pick-lead { color: var(--n-muted); font-size: 13.5px; margin: 0 0 14px; }
.n-pick-group + .n-pick-group { margin-top: 14px; }
.n-pick-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); margin-bottom: 8px; }
.n-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.n-chip { background: transparent; border: 1px solid var(--n-border-2); border-radius: 999px; color: var(--n-text); font: 500 13.5px var(--n-font); padding: 8px 14px; cursor: pointer; }
.n-chip:hover, .n-chip:focus-visible { border-color: var(--n-accent); color: var(--n-accent); background: var(--n-accent-soft); }
.n-menu { position: fixed; z-index: 80; min-width: 190px; max-width: 300px; max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--n-panel-2);
  border: 1px solid var(--n-border-2); box-shadow: var(--n-float-shadow); display: flex; flex-direction: column; }
.n-menu-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); padding: 8px 12px 4px; }
.n-menu button { background: none; border: none; text-align: left; color: var(--n-text); font: 14px var(--n-font); padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.n-menu button:hover, .n-menu button:focus-visible { background: var(--n-hover); outline: none; }

/* ── Inside a department (board M) ── */
.node-page.dm-page .node-head { display: none; }
.dm { --c: var(--n-dept-slate); display: flex; flex-direction: column; }
.dm .dp-back { align-self: flex-start; }
.dm-head { display: flex; align-items: center; gap: 34px; margin: 4px 0 30px; flex-wrap: wrap; }
.dm-ring { position: relative; width: var(--n-dm-ring); aspect-ratio: 1; flex: none; border-radius: 50%; box-shadow: 0 0 46px color-mix(in srgb, var(--c) 14%, transparent); --n-dk-stroke: 4px; }
.dm-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dm-letter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c); font: 600 46px var(--n-font); }
.dm-title { flex: 1 1 320px; min-width: 0; }
.dm-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--c); }
.dm-title h2 { font-size: 38px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 6px; line-height: 1.15; overflow-wrap: anywhere; }
.dm-line { display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--n-muted); font-size: 15px; }
.dm-line b { color: var(--n-text); font-weight: 600; }
.dm-line .warn { color: var(--n-horizon); }
.dm-acts { display: flex; gap: 10px; align-self: flex-start; flex-wrap: wrap; }
body.node .btn.dm-pill { border-radius: 999px; padding: 8px 20px; min-height: 40px; }
.dm-sec { display: flex; gap: 12px; font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--n-line); margin-top: 26px; }
.dm-sec span + span::before { content: '·'; margin-right: 12px; }
.dm-list { display: flex; flex-direction: column; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 150px 90px; gap: 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--n-line); }
.dm-row.rec { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(0, 1.2fr) 110px; }
.dm-name b { display: block; font-weight: 500; font-size: 15.5px; overflow-wrap: anywhere; }
.dm-name small { color: var(--n-faint); font-size: 12.5px; }
.dm-name small .node-linkbtn { font-size: 12.5px; }
.dm-row.empty .dm-name b { color: var(--n-muted); }
.dm-seal { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--n-muted); background: none; border: none; padding: 0; font-family: var(--n-font); }
.dm-seal .dm-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; }
.dm-seal.ok { color: var(--n-accent); }
.dm-seal.ok .dm-mark { border: 1.5px solid var(--n-accent); }
.dm-seal.todo { color: var(--n-horizon); }
.dm-seal.todo .dm-mark { border: 1.5px dashed var(--n-horizon); }
button.dm-seal { cursor: pointer; }
button.dm-seal:hover .dm-mark { background: var(--n-horizon-soft); }
.dm-exp { font: 13px var(--n-mono); color: var(--n-muted); text-align: right; }
.dm-exp.none { color: var(--n-faint); }
.dm-exp.amber { color: var(--n-horizon); }
.dm-exp.red { color: var(--n-danger); }
.dm-open { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.dm-more { background: none; border: none; color: var(--n-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.dm-more:hover, .dm-more:focus-visible { color: var(--n-text); background: var(--n-hover); }
.dm-thread { display: flex; align-items: center; background: none; border: none; padding: 6px 0; cursor: pointer; min-width: 0; }
.dm-bead { width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid var(--c); flex: none; position: relative; margin-right: 26px; }
.dm-bead + .dm-bead::before { content: ''; position: absolute; right: 100%; top: 50%; width: 28px; height: 1.5px; background: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-50%); }
.dm-bead.todo { border-style: dashed; }
.dm-bead.bad { border-color: var(--n-danger); }
.dm-thread-tail { flex: 1; max-width: 36px; height: 1.5px; margin-left: -26px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), transparent); }
.dm-thread:hover .dm-bead { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.dm-note { font-size: 13.5px; color: var(--n-faint); }
.dm-note.amber { color: var(--n-horizon); } .dm-note.red { color: var(--n-danger); } .dm-note.ok { color: var(--n-accent); }
.dm-add { background: none; border: none; color: var(--n-accent); font: 500 14px var(--n-font); cursor: pointer; white-space: nowrap; }
.dm-entries { margin: 4px 0 8px 18px; padding-left: 18px; border-left: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); }
.dm-entries-head { display: flex; justify-content: space-between; color: var(--n-muted); font-size: 13px; padding: 10px 4px 2px; }
.dm-archived-btn { align-self: flex-end; margin-top: 14px; font-size: 13px; color: var(--n-muted); }
.dm-drop { margin-top: 44px; padding: 20px; border-width: 1px; border-color: var(--n-border); color: var(--n-faint); border-radius: 16px; }
.dm-foot { color: var(--n-faint); font-size: 12px; line-height: 1.6; margin-top: 14px; }
.dm-form { border: 1px solid var(--n-border); border-radius: 16px; padding: 18px 20px; margin-bottom: 8px; background: var(--n-panel); }
.dm-form-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; color: var(--n-muted); }
.dm-form-head b { color: var(--n-text); }
.dm-form-hint { font-size: 12.5px; color: var(--n-faint); margin-bottom: 12px; }
.dm-row.flash { animation: nodeFlash 2.2s ease; }

@media (max-width: 980px) {
  .ib-guess { display: none; }
  .dm-row { grid-template-columns: minmax(0, 1fr) 160px 120px 80px; }
  .dm-row.rec { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-row.rec .dm-note { grid-column: 1; }
}
@media (max-width: 820px) {
  body.node { --n-dk-ring: 92px; --n-dm-ring: 96px; }
  .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .dk-letter { font-size: 30px; }
  .dk-inbox { flex-wrap: wrap; padding: 16px; gap: 14px; }
  .dk-inbox-n { width: 46px; height: 46px; font-size: 17px; }
  .dk-inbox-go { width: 100%; }
  /* Inbox (board N): rows without the letters; the floating bar becomes a bottom panel */
  .ib-sub-wide, #ib-all { display: none; }
  .ib-sub-phone { display: inline; }
  body.node .ib-row { grid-template-columns: auto auto minmax(0, 1fr); padding: 14px; border-color: var(--n-border); background: transparent; }
  .ib-row .ib-letters, .ib-row .ib-guess, .ib-row > span:nth-child(4), .ib-open { display: none; }
  .ib-thumb { width: 36px; height: 46px; }
  .ib-float { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); max-width: none; border-radius: 20px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .ib-float.on { transform: translateY(0); }
  .ib-letter { width: 38px; height: 38px; font-size: 14px; }
  .ib-drop { display: none; }
  .ib-newdept { border: none; padding: 0; }
  body.ib-ticking .node-page { padding-bottom: 200px; }
  /* A department: the head stacks; rows become two lines (name + seal, then expiry + Open) */
  .dm-head { gap: 18px; margin-bottom: 18px; }
  .dm-letter { font-size: 32px; }
  .dm-title h2 { font-size: 28px; }
  .dm-line { font-size: 13.5px; gap: 4px 16px; }
  .dm-acts { width: 100%; }
  .dm-row, .dm-row.rec { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 2px; }
  .dm-row .dm-exp { text-align: left; }
  .dm-row.rec .dm-thread { grid-column: 1 / -1; grid-row: 2; }
  .dm-row.rec .dm-note { grid-column: 1; grid-row: 3; }
  .dm-row.rec .dm-open { grid-column: 2; grid-row: 3; }
  .dm-entries { margin-left: 4px; padding-left: 12px; }
  .dm-drop { display: none; }
}

/* ═══ R2 step 2: Checklists (board O), a new checklist (board P), inside a checklist (board Q) ═══ */
body.node {
  --n-cl-ring: 142px;          /* a checklist's ring on the Checklists page */
  --n-cl-ring-big: 160px;      /* the ring at the top of a checklist */
  --n-cl-card: 210px;          /* the "start from" cards */
  --n-folio: var(--n-horizon); /* "Make a folio from this checklist" and the folio preview */
}
.dept-disc.d-xs { width: 24px; height: 24px; font-size: 10.5px; border-width: 1.5px; }
.dept-disc.d-xs > svg { width: 11px; height: 11px; }
.n-glyph { font-family: var(--n-font); letter-spacing: 0; }
.n-chip.on { border-color: var(--n-accent); color: var(--n-on-accent); background: var(--n-accent); }

/* Rings */
.cl-ring { --c: var(--n-accent); position: relative; width: var(--n-cl-ring); aspect-ratio: 1; display: block; margin-bottom: 14px; border-radius: 50%; transition: box-shadow .25s; }
.cl-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cl-ring .dk-track { stroke-width: 6px; }
.cl-ring .dk-arc { stroke-width: 6px; }
.cl-pct { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cl-pct b, .cl-item .cl-pct b { font: 600 34px var(--n-font); letter-spacing: -.02em; color: var(--n-text); line-height: 1; }
.cl-pct small { font: 9.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted); margin-top: 6px; max-width: none; }
.cl-grid { grid-template-columns: repeat(auto-fill, 250px); }
.cl-item { --c: var(--n-accent); }
.cl-item:hover .cl-ring, .cl-item:focus-visible .cl-ring, .cl-item.is-main .cl-ring { box-shadow: 0 0 46px var(--n-core-glow); }
.cl-item b { font-size: 16.5px; }
.cl-item small { max-width: 200px; }
.cl-main-tag { margin-top: 6px; font: 10px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-horizon);
  border: 1px solid var(--n-horizon-line); border-radius: 999px; padding: 2px 8px; }
.cl-ring-new { width: var(--n-cl-ring); }
.cl-sponsors { margin-top: 18px; }
.cl-sponsors .node-linkbtn { font-size: 13px; color: var(--n-muted); }
.cl-sponsors .node-linkbtn:hover { color: var(--n-text); }
.cl-legend { display: flex; flex-wrap: wrap; gap: 8px 38px; color: var(--n-faint); font-size: 12.5px; margin-top: 30px; }
.cl-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-faint); margin-right: 8px; vertical-align: middle; }

/* Inside a checklist (board Q) */
.cl-head .cl-ring.big { width: var(--n-cl-ring-big); margin: 0; flex: none; box-shadow: 0 0 60px var(--n-core-glow); }
.cl-head .cl-ring.big .cl-pct b { font-size: 40px; }
.cl-k { color: var(--n-muted); }
.dm-line .bad { color: var(--n-danger); }
.cl-setmain, .cl-ismain { background: none; border: none; color: var(--n-muted); font: inherit; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cl-setmain i, .cl-ismain i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; }
.cl-setmain:hover { color: var(--n-text); }
.cl-ismain { color: var(--n-horizon); cursor: default; }
.cl-ismain i { background: var(--n-horizon); border-color: var(--n-horizon); }
.cl-acts { flex-direction: column; align-items: flex-end; }
body.node .btn.cl-folio { background: var(--n-folio); border-color: var(--n-folio); color: var(--n-on-accent); font-weight: 600; }
body.node .btn.cl-folio:hover { filter: brightness(1.08); background: var(--n-folio); }
.dm-row.cl-row { grid-template-columns: 30px 56px minmax(0, 1fr) 200px 190px 90px; }
.cl-seal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--n-font); border: 1.5px solid var(--n-faint); color: var(--n-faint); }
.cl-seal.ok { border-color: var(--n-accent); color: var(--n-accent); }
.cl-seal.amber { border-color: var(--n-horizon); color: var(--n-horizon); }
.cl-seal.red { border-color: var(--n-danger); color: var(--n-danger); }
.cl-seal.wait { border-style: dashed; border-color: var(--n-horizon); }
.cl-seal.none { border-style: dashed; border-color: var(--n-danger); }
.cl-ref { font: 13px var(--n-mono); color: var(--n-horizon); }
.cl-where { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n-text); min-width: 0; }
.cl-where.muted { color: var(--n-faint); font-size: 13px; }
.cl-lock { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; border: 1.5px dashed var(--n-border-2); color: var(--n-faint); flex: none; }
.cl-lock svg { width: 11px; height: 11px; }
.cl-status { font-size: 13.5px; color: var(--n-muted); }
.cl-status.ok { color: var(--n-accent); } .cl-status.amber { color: var(--n-horizon); } .cl-status.red { color: var(--n-danger); }
.dm-open-btn.cl-dep { color: var(--n-accent); }
.cl-preview { align-self: flex-end; max-width: 520px; margin-top: 34px; padding: 18px 22px; border: 1px solid var(--n-horizon-line); border-radius: 18px;
  background: linear-gradient(135deg, var(--n-horizon-soft), transparent 80%); }
.cl-preview b { display: flex; align-items: center; gap: 10px; color: var(--n-horizon); font-weight: 600; }
.cl-preview b svg { width: 15px; height: 15px; }
.cl-preview p { margin: 8px 0 0; color: var(--n-muted); font-size: 13.5px; line-height: 1.55; }
.cl-preview p strong { color: var(--n-text); }
.cl-preview .node-linkbtn { margin-top: 10px; color: var(--n-horizon); }
.cl-preview.in-modal { margin: 0 0 16px; max-width: none; }

/* A new checklist (board P) */
.clb { display: flex; flex-direction: column; }
.clb-sec { align-items: baseline; }
.clb-sec .clb-add { margin-left: auto; font: 500 14px var(--n-font); letter-spacing: 0; text-transform: none; }
.clb-sec span + .clb-add::before { content: none; }
.clb-cards { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 8px; }
.clb-card { flex: 0 1 var(--n-cl-card); min-width: 168px; min-height: 160px; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; cursor: pointer;
  background: transparent; border: 1px solid var(--n-border); color: var(--n-text); font-family: var(--n-font); transition: border-color .15s, background .15s; }
.clb-card:hover, .clb-card:focus-visible { border-color: var(--n-border-2); background: color-mix(in srgb, var(--n-panel) 70%, transparent); }
.clb-card.on { border-color: var(--n-horizon); background: linear-gradient(160deg, var(--n-horizon-soft), transparent 85%); }
.clb-card b { font-size: 16px; font-weight: 600; }
.clb-card small { color: var(--n-faint); font-size: 12.5px; line-height: 1.45; }
.clb-letter { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--n-muted); display: grid; place-items: center; font: 600 14px var(--n-font); color: var(--n-text); margin-bottom: 4px; }
.clb-card.on .clb-letter { border-color: var(--n-horizon); color: var(--n-horizon); }
.clb-name { display: flex; align-items: baseline; gap: 22px; margin: 30px 0 8px; flex-wrap: wrap; }
.clb-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted); }
body.node .clb-name input { width: min(440px, 100%); background: transparent; border: none; border-bottom: 1px solid var(--n-border-2); border-radius: 0; padding: 4px 0 6px;
  font: 600 26px var(--n-font); color: var(--n-text); }
body.node .clb-name input:focus { outline: none; border-bottom-color: var(--n-accent); box-shadow: none; }
.clb-row { grid-template-columns: 56px minmax(0, 1fr) 200px 190px 50px; }
.clb-edit { font-size: 15px; }
.clb-editor { margin: 4px 0 14px; padding: 18px 20px; border: 1px solid var(--n-border); border-radius: 16px; background: var(--n-panel); display: flex; flex-direction: column; gap: 12px; }
body.node input.clb-search { width: 100%; max-width: 460px; border-radius: 999px; padding: 9px 16px; background: transparent; }
.clb-chosen { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.clb-chosen b { font-weight: 600; font-size: 15px; }
.clb-newtag { font: 10.5px var(--n-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-horizon); }
.clb-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.clb-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--n-muted); width: 110px; }
.clb-fields label.wide { flex: 1 1 240px; width: auto; }
.clb-newtype { border-top: 1px solid var(--n-line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.clb-newtype > .btn, .clb-ed-acts .btn { align-self: flex-start; }
.clb-yn, .clb-lives { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clb-yn .clb-k, .clb-lives .clb-k { margin-right: 6px; }
.clb-ed-acts { display: flex; gap: 18px; align-items: center; }
.clb-rm, .clb-remove { color: var(--n-danger); }
.clb-remove { align-self: flex-start; margin-top: 22px; font-size: 13px; }

@media (max-width: 980px) {
  .dm-row.cl-row { grid-template-columns: 30px 44px minmax(0, 1fr) auto; }
  .dm-row.cl-row .cl-where { grid-column: 3; }
  .dm-row.cl-row .cl-status { grid-column: 3; }
  .clb-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .clb-row .cl-where, .clb-row .cl-status { grid-column: 2; }
}
@media (max-width: 820px) {
  body.node { --n-cl-ring: 112px; --n-cl-ring-big: 104px; --n-cl-card: calc(50% - 6px); }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-pct b { font-size: 26px; }
  .cl-head .cl-ring.big .cl-pct b { font-size: 28px; }
  .cl-acts { align-items: stretch; width: 100%; flex-direction: row; }
  .cl-legend { gap: 8px; flex-direction: column; }
  .dm-row.cl-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 12px; }
  .dm-row.cl-row .cl-ref { grid-column: 2; grid-row: 1; }
  .dm-row.cl-row .cl-seal { grid-row: 1 / span 2; }
  .dm-row.cl-row .dm-name { grid-column: 2; grid-row: 2; }
  .dm-row.cl-row .cl-where { grid-column: 2; grid-row: 3; }
  .dm-row.cl-row .cl-status { grid-column: 2; grid-row: 4; }
  .dm-row.cl-row .dm-open { grid-column: 3; grid-row: 2; }
  .cl-preview { align-self: stretch; }
  .clb-cards { gap: 12px; }
  .clb-card { min-height: 0; padding: 14px; }
  .clb-name input { font-size: 22px; }
  .clb-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 10px; }
  .clb-row .dm-name { grid-column: 2; }
  .clb-row .cl-where { grid-column: 2; }
  .clb-row .cl-status { grid-column: 2; }
  .clb-row .dm-open { grid-column: 3; grid-row: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .node-ring .arc { animation: nodeRing var(--n-ring-time) var(--n-ease) both .15s; }
  .node-page { animation: nodeFade var(--n-fade-time) ease backwards; }   /* backwards only: a finished fade must not hold the Ledger's phone sheet in place */
  .node-bar span { animation: nodeBar 1.1s var(--n-ease) both .2s; }
}
@keyframes nodeRing { from { stroke-dashoffset: 439.82; } }
@keyframes nodeFade { from { opacity: 0; transform: translateY(6px); } }
@keyframes nodeBar { from { width: 0; } }

/* ── Phone and narrow screens ── */
@media (max-width: 980px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  /* Core stacks: ring, wording, figures, Alerts, then the Ledger thread on its own */
  .core { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pins" "closed" "stage" "info" "alerts" "thread" "depts"; }
  .core-drop { display: none; }
  .core-thread { width: 100%; padding-top: 24px; }
  .core-thread::before { left: calc(var(--n-lg-core) / 2 - 1px); top: 74px; }
  .core-thread-in { margin-left: 0; }
  .core-thread-head { padding: 0 0 10px; justify-content: space-between; }
  .core-follow { padding-left: calc(var(--n-lg-core) + 8px); }
}
@media (max-width: 820px) {
  body.node .main { margin-left: 0; padding: 18px 16px 40px; }
  body.node .mobile-bar { background: var(--n-rail); border-bottom-color: var(--n-border); }
  body.node .mobile-bar .menu-btn { background: var(--n-panel); border-color: var(--n-border-2); color: var(--n-text); }
  body.node .mobile-bar .mb-title { font-family: var(--n-font); font-weight: 600; font-size: 15px; }
  body.node .mobile-bar .mb-title img { display: none; }
  body.node .sidebar { width: 280px; }
  .node-title { font-size: 24px; }
  /* Core on a phone (board J) */
  body.node { --n-core-stage: 340px; --n-core-label-room: 64px; --n-core-ring: 56%; --n-core-small: 46px; --n-core-orbit: 41%; --n-core-pct: 46px; --n-core-title: 26px; }
  .core-sat .core-sat-name { left: 50%; right: auto; top: auto; transform: translateX(-50%); text-align: center; font-size: 12px; max-width: 86px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .core-sat .core-sat-name small { display: none; }
  .core-sat.up .core-sat-name { bottom: calc(100% + 4px); }
  .core-sat.down .core-sat-name { top: calc(100% + 4px); }
  .core-from { display: none; }
  .core-ready { margin-top: 6px; }
  .core-info { padding-top: 26px; }
  .core-stage { margin-top: 40px; }
  .core-figs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .core-fig { padding: 14px 0; border-left: none; border-top: 1px solid var(--n-line); }
  .core-fig:first-child { padding-left: 0; }
  .core-strip { flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .core-dept { flex-direction: column; gap: 6px; border: none; background: none; padding: 0; min-width: 76px; text-align: center; scroll-snap-align: start; }
  .core-dept:hover { background: none; }
  .core-dept small { display: none; }
  .core-dept .dept-disc { width: 56px; height: 56px; font-size: 19px; }
  .core-dept b { font-size: 13px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dh-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dh-row .dh-go { display: none; }
  /* Ledger: the sealed card becomes a bottom sheet */
  .lg-layout { grid-template-columns: 1fr; }
  .lg-card { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 120; max-height: 84vh; overflow-y: auto;
    transform: translateY(105%); visibility: hidden; transition: transform .25s var(--n-ease), visibility .25s; }
  .lg-card.open { transform: none; visibility: visible; }
  .lg-card-in { border-radius: 18px 18px 0 0; border-bottom: none; padding-top: 30px; padding-bottom: calc(var(--n-pad) + env(safe-area-inset-bottom)); }
  .lg-card-in::before { content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 3px; background: var(--n-border-2); }
  .lg-close { display: block; position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border: none; background: none; color: var(--n-muted); font-size: 24px; cursor: pointer; }
  .lg-scrim.open { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(4, 6, 5, .6); }
  .lg-tools { flex-direction: column; align-items: stretch; }
  body.node input.lg-search { width: 100%; }
  .lg-find { align-items: stretch; }
  .lg-daypick { flex: 1; justify-content: space-between; }
  .lg-find > .lg-chip { flex: none; }
}
@media (max-width: 480px) {
  body.node { --n-lg-core: 44px; }
  .lg-row { grid-template-columns: var(--n-lg-core) minmax(0, 1fr) 46px; }
  .lg-box { padding: 8px 10px; gap: 8px; margin-left: 4px; }
  .lg-time { font-size: 11.5px; }
  .lg-top { font-size: 12.5px; }
  .lg-pre-row { grid-template-columns: 1fr; gap: 2px; }
  .node-drawers { grid-template-columns: 1fr; }
  body.node .table-wrap { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   R2 STEP 3 · Vault (board R), End season (board S), sub-departments (board T), Deposit Hub dock,
   Keyholders, Settings, and the Node's own loading screen.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
body.node {
  --n-boot-ring: 64px;          /* the quiet ring while a camp opens */
  --n-out-bar: 3px;             /* the time-used bar on a release card */
  --n-folio-card: 190px;        /* folio cards in the Vault */
  --n-season-switch: 38px;      /* End season switches */
  --n-dock-disc: 44px;          /* department circles in the Deposit Hub dock */
  --n-dock-over: rgba(141, 191, 143, .16);
}

/* The Node while it opens: dark from the first paint, the camp's menu and name straight away */
.boot-node { display: none; }
body.node #loading-overlay { background: var(--n-ground) !important; align-items: stretch; justify-content: flex-start; flex-direction: row; gap: 0; }
body.node #loading-overlay .boot-plain { display: none; }
body.node .boot-node { display: flex; flex: 1; }
.boot-rail { width: var(--n-rail-width); background: var(--n-rail); border-right: 1px solid var(--n-border); padding: 22px 12px; display: flex; flex-direction: column; gap: 22px; }
.boot-lines { display: flex; flex-direction: column; gap: 14px; padding: 8px 14px; }
.boot-lines i { display: block; height: 10px; border-radius: 5px; background: var(--n-line); width: 70%; }
.boot-lines i:nth-child(2n) { width: 55%; }
.boot-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--n-faint); font-size: 13px; }
.boot-ring, .n-loading-ring { width: var(--n-boot-ring); height: var(--n-boot-ring); border-radius: 50%; border: 3px solid var(--n-line); border-top-color: var(--n-accent); }
.n-loading { display: flex; align-items: center; gap: 14px; color: var(--n-faint); font-size: 13px; padding: 40px 0; }
.n-loading .n-loading-ring { --n-boot-ring: 22px; border-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .boot-ring, .n-loading-ring { animation: n-spin 1.1s linear infinite; }
}
@keyframes n-spin { to { transform: rotate(360deg); } }
.node-search.shell { color: var(--n-faint); font-size: 13.5px; cursor: default; }
@media (max-width: 820px) { .boot-rail { display: none; } }

/* Small helpers */
.node-count.amber { color: var(--n-horizon); background: var(--n-horizon-soft); }
.node-nav-item.hub:not(.waiting) { color: var(--n-muted); }
.node-logo.img { padding: 0; overflow: hidden; background: var(--n-panel); }
.node-logo.img img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.node .btn.v-amber { background: var(--n-horizon); border-color: var(--n-horizon); color: var(--n-on-accent); }
body.node .btn.v-amber:hover { filter: brightness(1.08); }
body.node .btn.n-danger { border-color: var(--n-danger); color: var(--n-danger); background: transparent; }
body.node .btn.n-danger:hover { background: var(--n-danger-soft); }
.n-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--n-muted); margin: 12px 0 0; cursor: pointer; font-weight: 400; }
.n-confirm input { width: auto; margin-top: 3px; accent-color: var(--n-accent); }
.n-confirm strong { color: var(--n-text); }
.cl-preview.danger { border-color: color-mix(in srgb, var(--n-danger) 45%, transparent); background: color-mix(in srgb, var(--n-danger) 6%, transparent); }
.cl-preview.danger b { color: var(--n-danger); }
.n-menu-sep { height: 1px; background: var(--n-border); margin: 6px 8px; }
.n-menu button.danger { color: var(--n-danger); }
.n-menu button small { display: block; color: var(--n-faint); font-size: 11.5px; line-height: 1.45; margin-top: 4px; white-space: normal; }
.n-pin.on { border-color: var(--n-accent-line); color: var(--n-accent); }
.n-switch { width: var(--n-season-switch); height: 22px; border-radius: 999px; background: var(--n-horizon-soft); border: 1px solid var(--n-horizon-line); position: relative; cursor: pointer; flex: none; padding: 0; display: inline-block; }
.n-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--n-horizon); transition: left .2s var(--n-ease); }
.n-switch.on { background: var(--n-accent-soft); border-color: var(--n-accent-line); }
.n-switch.on i { left: calc(100% - 17px); background: var(--n-accent); }
.n-switch:disabled, .n-switch.locked { cursor: default; opacity: .8; }
.n-switch:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.n-switch-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--n-text); font-weight: 400; margin-bottom: 10px; cursor: pointer; }

/* Rows: name · tags · seal · expiry · open */
.dm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 170px) 170px 130px 92px; }
.dm-row.rec { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(0, 1.2fr) 110px; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; min-width: 0; }
.dt-sub { color: var(--c); }
.dt-season { color: var(--n-faint); } .dt-season.now { color: var(--n-horizon); }
.dt-tpl { font: 10.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-accent); }
.dt-flag { color: var(--n-danger); }
.dt-link { color: var(--n-info); }
.dt-check { color: var(--n-accent); font-size: 12px; }
.dm-row.flagged { background: color-mix(in srgb, var(--n-danger) 4%, transparent); }
.dm-row[draggable="true"] { cursor: grab; }
.dm-row.dragging { opacity: .45; }
.dm-row.drop-on, .sd-chip.drop-on { box-shadow: inset 0 0 0 1px var(--n-accent-line); background: var(--n-dock-over); }
.dm-exp .stamp { font: 600 10.5px var(--n-mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 6px; padding: 2px 6px; }
.dm-ring.camp { --c: var(--n-muted); }
.dm.camp .dm-k { color: var(--n-muted); }

/* Sub-department chips (board T) */
.sd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--n-line); }
.sd-chip { background: transparent; border: 1px solid var(--n-border-2); border-radius: 999px; color: var(--n-text); font: 500 14px var(--n-font); padding: 8px 18px; cursor: pointer; }
.sd-chip:hover, .sd-chip:focus-visible { border-color: var(--c, var(--n-accent)); }
.sd-chip.on { background: var(--c, var(--n-accent)); border-color: var(--c, var(--n-accent)); color: var(--n-on-accent); }
.sd-chip.add { border-style: dashed; color: var(--n-muted); font-weight: 400; }
.sd-chip.sm { font-size: 12.5px; padding: 4px 12px; }

/* Move dock while dragging a document */
.doc-dock { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 70; display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-radius: 24px;
  background: var(--n-panel-2); border: 1px solid var(--n-border-2); box-shadow: var(--shadow-md); transition: transform .25s var(--n-ease); }
.doc-dock.on { transform: translate(-50%, 0); }
.doc-dock-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); }
.dock-disc { --c: var(--n-muted); position: relative; width: var(--n-dock-disc); height: var(--n-dock-disc); border-radius: 50%; border: 2px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent);
  display: grid; place-items: center; font: 600 16px var(--n-font); cursor: pointer; transition: transform .15s, box-shadow .15s; padding: 0; }
.dock-disc.camp { border-style: dashed; }
.dock-disc small { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 400 11px var(--n-font); color: var(--n-faint); }
.dock-disc.over, .dock-disc:hover, .dock-disc:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); }

/* The Deposit Hub dock (always there while files wait) */
.ib-dock { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 18px 16px; align-items: center; padding: 14px 4px 30px; margin: -6px 0 6px; background: var(--n-ground); }
.ib-dock.ready .dock-disc { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
.ib-suggest { margin-left: auto; }
body.node .ib-row { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto; }
.ib-row[draggable="true"] { cursor: grab; }
.ib-row.dragging { opacity: .45; }
.ib-row.sel { box-shadow: inset 2px 0 0 var(--n-accent); }
.ib-row:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.ib-row.flagged .ib-main b { color: var(--n-danger); }
.ib-guess.flag { color: var(--n-danger); }
.ib-review { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.ib-rev-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--n-line); font-weight: 400; font-size: 13.5px; cursor: pointer; }
.ib-rev-row input { width: auto; accent-color: var(--n-accent); }
.ib-rev-to { display: inline-flex; gap: 8px; align-items: center; color: var(--n-muted); }

/* Deposit (two doors) */
.modal.dep-modal { width: 640px; }
.dep-lead { color: var(--n-muted); font-size: 13.5px; margin: -4px 0 14px; line-height: 1.5; }
.dep-note { font-size: 12px; color: var(--n-faint); margin-top: 12px; }
.dp-up li.personal span:last-child { color: var(--n-danger); }
.dp-up li { display: flex; gap: 10px; align-items: center; }
.dp-up li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dep-type { background: none; border: 1px dashed var(--n-border-2); border-radius: 999px; color: var(--n-muted); font: 12.5px var(--n-font); padding: 3px 10px; cursor: pointer; }
.dep-type.set { border-style: solid; color: var(--n-accent); border-color: var(--n-accent-line); }
.dp-up li.dep-pick { display: block; padding: 8px 0 12px; }
.dp-up li.dep-pick .n-chip { font-size: 12.5px; padding: 5px 11px; }
.dep-all .n-chip { font-size: 12.5px; padding: 6px 12px; }
.exp-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.exp-box input[type="date"] { flex: 1 1 140px; }
.exp-none { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 400 !important; font-size: 13px; color: var(--n-muted); margin: 0 !important; cursor: pointer; white-space: nowrap; }
.exp-none input { width: auto; accent-color: var(--n-accent); }

/* The Vault (board R) */
.v-page { display: flex; flex-direction: column; }
.v-lead { margin-top: -10px; }
.v-sec { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 14px; }
.v-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted); }
.v-k.amber { color: var(--n-horizon); }
.v-outs { display: flex; flex-direction: column; gap: 12px; }
.v-out { display: grid; grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 22px; border-radius: 18px;
  border: 1px solid var(--n-horizon-line); background: linear-gradient(90deg, var(--n-horizon-soft), color-mix(in srgb, var(--n-horizon-soft) 40%, transparent)); }
.v-disc { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--n-horizon); color: var(--n-horizon); display: grid; place-items: center; font: 600 17px var(--n-font); flex: none; }
.v-disc.sm { width: 36px; height: 36px; font-size: 14px; }
.v-out-who b { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.v-out-who small { color: var(--n-muted); font-size: 13px; }
.v-out-time { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v-bar { display: block; height: var(--n-out-bar); border-radius: 3px; background: color-mix(in srgb, var(--n-horizon) 16%, transparent); overflow: hidden; }
.v-bar i { display: block; height: 100%; background: var(--n-horizon); border-radius: 3px; }
.v-out-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--n-muted); }
.v-out-meta .soon { color: var(--n-horizon); }
.v-out-acts { display: flex; gap: 14px; }
.v-out-acts .node-linkbtn { color: var(--n-text); font-size: 14px; }
.node-linkbtn.v-take, .dm-open-btn.v-take, .v-take { color: var(--n-danger) !important; }
.v-out .v-extend { grid-column: 1 / -1; }
.v-extend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--n-muted); font-size: 13px; padding: 10px 0 4px; }
.v-folios { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--n-folio-card), 1fr)); gap: 16px; }
.v-folio { position: relative; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--n-border); background: var(--n-panel); min-height: 160px; }
.v-folio-open { background: none; border: none; text-align: left; color: var(--n-text); font-family: var(--n-font); padding: 20px 20px 46px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; flex: 1; border-radius: 18px; }
.v-folio-open:hover, .v-folio-open:focus-visible { background: var(--n-hover); }
.v-folio-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.v-tag { font: 10.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); }
.v-folio b { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }
.v-folio small { color: var(--n-faint); font-size: 12.5px; }
.v-folio-go { position: absolute; left: 20px; bottom: 16px; background: none; border: none; color: var(--n-horizon); font: 500 13.5px var(--n-font); padding: 0; cursor: pointer; }
.v-folio.new { border-style: dashed; background: transparent; color: var(--n-muted); font: 14px var(--n-font); cursor: pointer; align-items: center; justify-content: center; }
.v-folio.new:hover { color: var(--n-text); border-color: var(--n-border-2); }
.v-flag, .v-unsub { color: var(--n-danger); }
.v-unsub { font-size: 12px; }
.v-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.v-names { color: var(--n-text); font-size: 14.5px; line-height: 1.7; margin: 0; }
.v-names .node-linkbtn { color: var(--n-text); font-size: 14.5px; }
.v-compart { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--n-line); }
.v-compart .node-linkbtn { color: var(--n-muted); }
.v-release, .v-folio-edit, .v-form { display: flex; flex-direction: column; gap: 4px; max-width: 980px; }
.v-release .dm-sec, .v-folio-edit .dm-sec, .v-form .dm-sec { margin-top: 26px; justify-content: flex-start; align-items: center; }
.v-release .dm-sec .node-linkbtn { margin-left: auto; }
.v-types { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; color: var(--n-muted); }
.v-type.ok, .v-type.expiring { color: var(--n-text); }
.v-type.missing, .v-type.awaiting, .v-type.expired { color: var(--n-faint); }
.v-msg { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; font-size: 12.5px; color: var(--n-muted); }
.v-msg label { margin: 0; }
.v-preview { align-self: stretch; max-width: 640px; margin-top: 26px; }
.v-warn { color: var(--n-danger) !important; }
.v-release-go { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 24px; }
.v-release-go .node-linkbtn { margin-right: auto; }
.v-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 8px; vertical-align: middle; background: var(--n-faint); }
.v-dot.ok { background: var(--n-accent); } .v-dot.expiring, .v-dot.awaiting { background: var(--n-horizon); } .v-dot.missing, .v-dot.expired { background: var(--n-danger); }
.n-chip.on .v-dot { box-shadow: 0 0 0 2px var(--n-accent); }
.v-row { grid-template-columns: minmax(0, 1fr) minmax(0, 170px) minmax(0, 200px) auto; }
.v-cell { color: var(--n-muted); font-size: 13px; }
.v-st { font: 13px var(--n-mono); color: var(--n-faint); }
.v-st.live { color: var(--n-text); } .v-st.soon { color: var(--n-horizon); }
.v-send { margin-bottom: 26px; }
.v-send-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 4px 8px; border-bottom: 1px solid var(--n-border); }

/* Keyholders: people only */
.kh-list { display: flex; flex-direction: column; margin-top: 8px; }
.kh-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) 130px minmax(0, 1.2fr) 130px 44px; gap: 18px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--n-line); }
.kh-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--n-panel-2); border: 1px solid var(--n-border-2); color: var(--n-muted); font: 600 13px var(--n-font); }
.kh-avatar.dashed { border-style: dashed; background: transparent; }
.kh-name b { display: block; font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.kh-name small { color: var(--n-faint); font-size: 12.5px; overflow-wrap: anywhere; }
.kh-you { font: 10.5px var(--n-mono); text-transform: uppercase; letter-spacing: var(--n-eyebrow-spacing); color: var(--n-accent); margin-left: 6px; }
.kh-role { color: var(--n-muted); font-size: 13.5px; }
.kh-letters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kh-disc { --c: var(--n-muted); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px var(--n-font); color: var(--c); border: 1.5px dashed var(--c); }
.kh-disc.d { border-style: solid; }
.kh-disc.a { border-style: solid; background: var(--c); color: var(--n-on-accent); }
.kh-all, .kh-none { font-size: 13px; color: var(--n-faint); }
.kh-end { font: 12.5px var(--n-mono); color: var(--n-faint); }
.kh-row.invite .kh-name b { color: var(--n-muted); }
.kh-key { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--n-faint); margin: 14px 0 0; }
.kh-key .kh-disc { width: 18px; height: 18px; font-size: 0; margin-left: 10px; }
.kh-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; margin-top: 30px; }
.kh-roles b { color: var(--n-muted); font-weight: 500; margin-right: 4px; }
.kh-pick { display: flex; flex-direction: column; gap: 8px; }
.key-role-btn { text-align: left; background: transparent; border: 1px solid var(--n-border-2); border-radius: 14px; padding: 12px 14px; color: var(--n-text); cursor: pointer; font-family: var(--n-font); }
.key-role-btn small { display: block; color: var(--n-faint); font-size: 12.5px; margin-top: 2px; }
.key-role-btn.on, .key-role-btn:hover { border-color: var(--n-accent); }
.kh-access { display: flex; flex-direction: column; gap: 4px; }
.kh-acc-row { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--n-line); }
.kh-acc-name { display: inline-flex; gap: 10px; align-items: center; }
.kh-acc-row .n-chip { font-size: 12.5px; padding: 6px 12px; }
.kh-support { margin-top: 34px; padding: 0 4px; }
.kh-sup-give { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; font-size: 13.5px; color: var(--n-muted); }

/* Manage departments */
.md-list { display: flex; flex-direction: column; margin-top: 8px; }
.md-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--n-line); }
.md-order { display: flex; flex-direction: column; gap: 2px; }
.md-arrow { background: none; border: none; color: var(--n-faint); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.md-arrow:hover:not(:disabled) { color: var(--n-text); background: var(--n-hover); }
.md-arrow:disabled { opacity: .3; cursor: default; }
.dept-disc.d-md { width: 38px; height: 38px; font-size: 15px; }
.md-name b { display: block; font-size: 16px; font-weight: 500; }
.md-name small { color: var(--n-faint); font-size: 12.5px; }
.md-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.md-acts { display: flex; gap: 6px; align-items: center; }
.md-hidden { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.md-hid { display: inline-flex; gap: 8px; align-items: center; color: var(--n-muted); }

/* Settings: Make it yours, My view */
.set { display: flex; flex-direction: column; gap: 10px; }
.set-sec { margin-bottom: 26px; }
.set-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-accent); margin: 8px 0 6px; }
.set-k span { color: var(--n-faint); margin-left: 10px; }
.set-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; padding: 20px 4px; border-bottom: 1px solid var(--n-line); }
.set-label b { display: block; font-weight: 500; font-size: 15px; }
.set-label small { display: block; color: var(--n-faint); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.set-ctl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; min-width: 0; }
.set-ctl input[type="text"] { max-width: 360px; }
.set-logo img, .set-logo .node-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; display: grid; place-items: center; background: var(--n-panel); border: 1px solid var(--n-border-2); }
.set-days { display: inline-flex !important; gap: 8px; align-items: center; font-weight: 400 !important; font-size: 13.5px; margin: 0 !important; }
.set-days input { width: 74px !important; text-align: center; }
.set-days.amber { color: var(--n-horizon); } .set-days.red { color: var(--n-danger); }
.set-season { font: 600 24px var(--n-font); margin-right: 6px; }
.set-comparts { flex-direction: column; align-items: stretch; }
.set-compart { display: grid !important; grid-template-columns: 160px minmax(0, 300px); gap: 12px; align-items: center; font-weight: 400 !important; font-size: 13px; color: var(--n-muted); margin: 0 !important; }
.set-comparts .btn { align-self: flex-start; margin-top: 6px; }
.pin-chip { display: inline-flex; gap: 8px; align-items: center; cursor: default; }
.pin-chip .pin-ic { width: 12px; height: 12px; }
.pin-x { background: none; border: none; color: var(--n-faint); cursor: pointer; font-size: 15px; padding: 0 0 0 4px; line-height: 1; }
.pin-x:hover { color: var(--n-text); }
.n-chip.add { border-style: dashed; color: var(--n-muted); }
.set-old .set-section { margin-top: 10px; }

/* Core: pinned */
.core-pins { grid-area: pins; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.core-pins .node-k { margin-right: 6px; }
.core-pin { display: inline-flex; gap: 8px; align-items: center; background: transparent; border: 1px solid var(--n-border-2); border-radius: 999px; padding: 6px 14px 6px 8px; color: var(--n-text); font: 13.5px var(--n-font); cursor: pointer; }
.core-pin:hover, .core-pin:focus-visible { border-color: var(--n-accent); }
.core-pin-pct { font: 600 12px var(--n-mono); color: var(--n-accent); padding-left: 6px; }
.core-pin-doc { width: 8px; height: 8px; border-radius: 50%; background: var(--n-muted); margin-left: 6px; }

/* End season (board S) */
.se { display: flex; flex-direction: column; padding-bottom: 120px; }
.se-head { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; margin: 6px 0 40px; }
.se-rings { display: flex; gap: 22px; }
.se-ring { --c: var(--n-muted); position: relative; width: 132px; aspect-ratio: 1; --n-dk-stroke: 4px; }
.se-ring.next { --c: var(--n-accent); }
.se-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.se-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.se-ring b { font: 600 30px var(--n-font); color: var(--n-text); }
.se-ring small { font: 9.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); }
.se-title { flex: 1 1 380px; }
.se-title .dm-k { color: var(--n-muted); }
.se-title h2 { font-size: 36px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 10px; }
.se-title p { color: var(--n-muted); max-width: 680px; line-height: 1.55; margin: 0; }
.se-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px 44px; }
.se-col-head { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--n-border); }
.se-col-head b { font-size: 17px; font-weight: 600; }
.se-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--n-line); }
.se-name b { display: block; font-weight: 400; font-size: 14.5px; }
.se-name small { color: var(--n-faint); font-size: 12.5px; }
.se-move { color: var(--n-horizon); }
.se-tpl { font: 10.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-accent); }
.se-bar { position: fixed; left: calc(var(--n-rail-width) + 40px); right: 40px; bottom: 26px; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: 18px; background: var(--n-panel); border: 1px solid var(--n-border-2); box-shadow: var(--shadow-md); }
.se-sum { font-size: 16px; }
.se-sum .m { color: var(--n-horizon); } .se-sum .c { color: var(--n-accent); }
.se-acts { display: flex; gap: 10px; }

@media (max-width: 980px) {
  .dm-row { grid-template-columns: minmax(0, 1fr) 150px 120px 80px; }
  .dm-row .dm-tags { grid-column: 1; grid-row: 2; }
  .v-out { grid-template-columns: auto minmax(0, 1fr) auto; }
  .v-out-time { grid-column: 1 / -1; grid-row: 2; }
  .kh-row { grid-template-columns: auto minmax(0, 1fr) 110px 44px; }
  .kh-letters { grid-column: 2 / 4; grid-row: 2; }
  .kh-end { display: none; }
  .v-bottom { grid-template-columns: 1fr; }
  .set-row { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 820px) {
  .dm-sec { flex-wrap: wrap; gap: 4px 12px; }
  .dm-sec > span:first-child { flex: none; }
  .dm-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .dm-row .dm-exp { text-align: left; }
  /* phone: name + seal, then the tags, then expiry + Open */
  .dm-row:not(.rec):not(.cl-row) > .dm-name { grid-column: 1; grid-row: 1; }
  .dm-row:not(.rec):not(.cl-row) > .dm-seal { grid-column: 2; grid-row: 1; }
  .dm-row:not(.rec):not(.cl-row) > .dm-tags { grid-column: 1 / -1; grid-row: 2; }
  .dm-row:not(.rec):not(.cl-row) > .dm-exp { grid-column: 1; grid-row: 3; }
  .dm-row:not(.rec):not(.cl-row) > .dm-open { grid-column: 2; grid-row: 3; }
  .dm-row .dm-tags:empty { display: none; }
  .ib-dock { gap: 14px 12px; padding-bottom: 26px; }
  .ib-suggest { margin-left: 0; }
  .doc-dock { display: none; }
  body.node .ib-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .ib-row .dm-more { display: none; }
  .v-out { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; }
  .v-out-acts { grid-column: 1 / -1; }
  .v-row { grid-template-columns: minmax(0, 1fr) auto; }
  .v-row .v-cell { grid-column: 1; }
  .kh-row { grid-template-columns: auto minmax(0, 1fr) 44px; gap: 10px 14px; }
  .kh-role { grid-column: 2; grid-row: 2; }
  .kh-letters { grid-column: 2; grid-row: 3; }
  .md-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .md-order { display: none; }
  .se-bar { left: 16px; right: 16px; bottom: 16px; }
  .se-ring { width: 96px; } .se-ring b { font-size: 22px; }
  .se-title h2 { font-size: 26px; }
  .set-compart { grid-template-columns: 1fr; }
  .kh-acc-row { grid-template-columns: 1fr; }
}
.dk-sub .node-linkbtn { padding: 0 !important; font-size: inherit; vertical-align: baseline; }
/* Manage departments: document types and merge, in chips (no tables, no dropdowns) */
.dt-form { display: flex; flex-direction: column; gap: 12px; }
.dt-form .dm-sec { margin: 6px 0 0; }
.dt-list { display: flex; flex-direction: column; }
.dt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--n-line); font-size: 14px; }
.dt-row small, .dt-moves small { color: var(--n-faint); font-size: 11.5px; margin-left: 4px; }
.dt-acts { display: flex; gap: 10px; }
.mg-lead { font-size: 14px; margin: 0; }
.mg-list { display: flex; flex-direction: column; }
.mg-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--n-line); }
.mg-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-who small { color: var(--n-faint); font-size: 12px; }

/* ═══ R2 step 4a: phone scan, Recent, Settings as floating rows, Keyholders touches ═══ */
/* Settings: every edit field is an underline, never a box (the Section names too) */
body.node .set input[type="text"], body.node .set input[type="url"], body.node .set input[type="number"], body.node input.u {
  background: transparent; border: none; border-bottom: 1px solid var(--n-border-2); border-radius: 0; padding: 7px 2px; }
body.node .set input[type="text"]:focus, body.node .set input[type="url"]:focus, body.node .set input[type="number"]:focus, body.node input.u:focus { border-bottom-color: var(--n-accent); outline: none; }
.set-k .set-k-plain { font: 13px var(--n-font); letter-spacing: 0; text-transform: none; color: var(--n-muted); }
.set-k .set-k-plain.on { color: var(--n-horizon); }
.set-hint { display: block; width: 100%; color: var(--n-faint); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.set-acts { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.set-details { flex-direction: column; align-items: stretch; gap: 0; }
.set-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; font-size: 14px; }
.set-line > span { color: var(--n-faint); font-size: 12.5px; }
.set-line b { font-weight: 500; overflow-wrap: anywhere; }
.set-line.edit { margin: 0; font-weight: 400; color: var(--n-text); align-items: center; }
.set-line.edit input { width: 100%; max-width: 360px; }
.set-details .node-linkbtn { align-self: flex-start; margin-top: 10px; }
.set-verify { flex-direction: column; align-items: flex-start; }
.set-verify-body { width: 100%; max-width: 520px; } .set-verify-body p { margin: 0 0 8px; }
.set-verify-body .form-group label { font-size: 12.5px; }
.set-plan { font-weight: 500; font-size: 15px; }
.set-old .set-old-sec { margin-top: 6px; }
.set-compart { grid-template-columns: minmax(0, 340px) auto !important; align-items: baseline !important; }
.set-compart-name { background: none; border: none; border-bottom: 1px solid transparent; color: var(--n-text); font: 500 14px var(--n-font); text-align: left; padding: 7px 2px; cursor: text; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.set-compart-name:hover, .set-compart-name:focus-visible { border-bottom-color: var(--n-border-2); }
.set-compart-pen { color: var(--n-faint); font-size: 12px; opacity: .5; }
.set-compart-name:hover .set-compart-pen { opacity: 1; }
.set-compart-ours { color: var(--n-faint); font-size: 12px; white-space: nowrap; }
/* The pin button on a department page */
.n-pin .pin-ic { width: 14px; height: 14px; flex: none; }
/* Keyholders */
.kh-more { margin-top: 26px; }
.kh-dup { display: inline-block; margin-left: 8px; font: 10.5px var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-horizon); }
.kh-guide { display: flex; flex-direction: column; }
.kh-guide-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--n-line); font-size: 13.5px; }
.kh-guide-row b { font-weight: 500; } .kh-guide-row span { color: var(--n-muted); }
.kh-guide-k { font: 11px var(--n-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--n-muted); margin: 18px 0 4px; }
/* Recent: small rows, the place's letter and the expiry stamp */
.rc { min-width: 0; }
.rc-hub { margin-top: 30px; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--n-line); }
.rc-head span:last-child { font-size: 12.5px; color: var(--n-faint); }
.rc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.rc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: none; border: none; border-bottom: 1px solid var(--n-line);
  padding: 9px 2px; color: var(--n-text); text-align: left; font: 13.5px var(--n-font); cursor: pointer; min-width: 0; }
.rc-row:hover .rc-name, .rc-row:focus-visible .rc-name { color: var(--n-accent); }
.rc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-row .dm-exp { font-size: 12px; white-space: nowrap; }
/* Deposit on a phone: Choose files · Scan with camera, no drop words */
.dep-doors { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.dep-or { margin: 0 4px; }
.dp-drop.phone .dep-words, .dp-drop.phone .dep-or { display: none; }
.dp-drop.phone { border: none; background: none; padding: 4px 0 2px; }   /* the two doors float, no box */
.scan-btn svg { width: 16px; height: 16px; flex: none; }
.node-linkbtn.scan-btn { display: inline-flex; align-items: center; gap: 6px; }
.dd-scan { margin-top: 8px; }
.dp-up li.held span:last-child { color: var(--n-horizon); }
.scan-wait { font-size: 13px; color: var(--n-horizon); padding: 12px 2px 0; }
/* The scanner: full screen, the camera, the corners, the pages */
.scan-ov { display: none; position: fixed; inset: 0; z-index: 400; background: #000; color: #fff; flex-direction: column; font-family: var(--n-font); }
.scan-ov.open { display: flex; }
body.scanning { overflow: hidden; }
.scan-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.scan-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.scan-title { flex: 1; font-weight: 600; font-size: 16px; }
.scan-n { font: 12px var(--n-mono); color: rgba(255, 255, 255, .7); }
.scan-view { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 8% 6%; border: 1.5px dashed rgba(255, 255, 255, .45); border-radius: 8px; pointer-events: none; }
.scan-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .85); padding: 0 20px; text-shadow: 0 1px 4px #000; pointer-events: none; }
#scan-fit { padding: 12px 12px 58px; }
#scan-fit canvas { max-width: 100%; max-height: 100%; display: block; }
.scan-quad { position: absolute; left: 0; top: 0; pointer-events: none; }
.scan-quad polygon { fill: rgba(141, 191, 143, .16); stroke: var(--n-accent, #8DBF8F); stroke-width: 2; }
.scan-handle { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: none; background: transparent; padding: 0; touch-action: none; cursor: grab; }
.scan-handle::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--n-accent, #8DBF8F); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.scan-handle.on::after { inset: 8px; }
.scan-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); background: #000; }
.scan-side { background: none; border: none; color: #fff; font: 500 14px var(--n-font); text-align: center; padding: 8px 0; cursor: pointer; }
.scan-side small { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); font-weight: 400; margin-top: 2px; }
.scan-side.off, .scan-side:disabled { opacity: .35; }
.scan-shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; justify-self: center; }
.scan-shutter i { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: block; transition: transform .1s; }
.scan-shutter:active i { transform: scale(.88); }
.scan-shutter:disabled { opacity: .3; }
.scan-use { justify-self: center; min-height: 44px; }
.scan-review { flex: 1; overflow-y: auto; padding: 8px 16px 16px; }
.scan-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 18px; }
.scan-page { position: relative; background: #141414; border-radius: 10px; padding: 8px; display: grid; place-items: center; aspect-ratio: 3 / 4; }
.scan-page canvas { max-width: 100%; max-height: 100%; border-radius: 3px; }
.scan-page-n { position: absolute; left: 8px; top: 8px; font: 11px var(--n-mono); background: rgba(0, 0, 0, .7); padding: 2px 7px; border-radius: 999px; }
.scan-page-x { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.scan-bwrow { color: #fff; margin: 4px 0 16px; }
.scan-name label { color: rgba(255, 255, 255, .7); }
.scan-ov input[type="text"] { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, .4); border-radius: 0; color: #fff; padding: 8px 2px; font: 16px var(--n-font); }
.scan-ov input[type="text"]:focus { border-bottom-color: var(--n-accent, #8DBF8F); outline: none; }
.scan-note { font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.5; }
@media (max-width: 480px) { .rc-list { grid-template-columns: 1fr; } .kh-guide-row { grid-template-columns: 1fr; gap: 2px; } .set-line { grid-template-columns: 1fr; gap: 2px; } }

/* ═══ R2 step 4b: the Node sign-in (the camp's door) ═══
   Step 1 the key (email + password) · step 2 the code (authenticator) · the ring unlocks · Core fades in.
   --ns-unlock-time is the ring's fill; everything together stays under 1.5 s. */
body.node-signin { --ns-unlock-time: 1.1s; --ns-card-width: 420px; }
.ns { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; background: var(--n-ground); color: var(--n-text); font-family: var(--n-font); }
.ns::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 38%, var(--n-core-glow), transparent 70%); pointer-events: none; }
.ns-card { position: relative; width: var(--ns-card-width); max-width: 100%; }
.ns-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.ns-brand .node-logo { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; }
.ns-brand .node-name { font-size: 17px; }
.ns-stage { display: none; }
.ns-stage.on { display: block; animation: ns-in var(--n-fade-time) var(--n-ease); }
@keyframes ns-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ns-k { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted); }
.ns-k.ok { color: var(--n-accent); }
.ns-k.ok::before { content: "✓ "; }
.ns-title { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 8px; }
.ns-lead { color: var(--n-muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 26px; }
.ns .form-group { margin-bottom: 18px; }
.ns label { display: block; font-size: 12.5px; color: var(--n-muted); margin-bottom: 6px; }
.ns label.n-confirm { display: flex; }
.ns input[type="email"], .ns input[type="password"], .ns input[type="text"] { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--n-border-2); border-radius: 0; color: var(--n-text);
  padding: 10px 2px; font: 17px var(--n-font); }
.ns input:focus { outline: none; border-bottom-color: var(--n-accent); }
.ns input::placeholder { color: var(--n-faint); }
.ns-hint { font-size: 12.5px; color: var(--n-faint); line-height: 1.5; min-height: 0; margin: -6px 0 14px; }
.ns-hint strong { color: var(--n-text); font-weight: 500; }
.ns-hint:empty { display: none; }
.ns .btn.ns-go { width: 100%; justify-content: center; min-height: 48px; font-size: 15px; border-radius: 999px; margin-top: 4px; }
.ns .btn.ns-go .spinner { border-color: rgba(11, 26, 14, .3); border-top-color: var(--n-on-accent); }
.ns-forgot { display: block; margin: 16px auto 0; color: var(--n-muted); }
.ns-forgot:hover { color: var(--n-accent); text-decoration: none; }
/* the authenticator step reuses the app's own two-step screens: its header is ours, its card floats */
.ns #ns-mfa .page-header, .ns #ns-mfa .form-group > label { display: none; }
.ns #ns-mfa .card { background: transparent; border: none; padding: 0; max-width: none !important; }
.ns #ns-mfa .card-title { font-size: 15px; margin-bottom: 10px; }
.ns #ns-mfa ol { color: var(--n-muted); }
.ns #ns-mfa input[type="text"] { font: 500 26px var(--n-mono); letter-spacing: .3em; text-align: center; }
.ns #ns-mfa .btn { width: 100%; justify-content: center; min-height: 48px; border-radius: 999px; font-size: 15px; margin-top: 6px; }
.ns #ns-mfa .btn:not(.btn-primary) { border-color: var(--n-border-2); }
.ns #ns-mfa .btn-primary { background: var(--n-accent); color: var(--n-on-accent); border-color: var(--n-accent); }
.ns #ns-mfa img { background: #fff; border-radius: 8px; }
/* the unlock: the main ring fills, the key becomes a tick */
.ns-stage[data-stage="unlock"] { text-align: center; padding-top: 10px; }
.ns-ring { position: relative; width: 168px; height: 168px; margin: 0 auto 26px; }
.ns-ring svg:first-child { width: 100%; height: 100%; display: block; }
.ns-ring .track { stroke: var(--n-line); }
.ns-ring .arc { stroke: var(--n-accent); stroke-linecap: round; transition: stroke-dashoffset var(--ns-unlock-time) var(--n-ease); }
.ns-ring.go .arc { stroke-dashoffset: 0; }
.ns-ring.still .arc { transition: none; }
.ns-ring-in { position: absolute; inset: 0; display: grid; place-items: center; color: var(--n-accent); }
.ns-ring-in svg { position: absolute; width: 44px; height: 44px; transition: opacity .35s var(--n-ease), transform .35s var(--n-ease); }
.ns-ring .ns-key { opacity: 1; transform: rotate(0deg); }
.ns-ring .ns-tick { opacity: 0; transform: scale(.6); }
.ns-ring.go .ns-key { opacity: 0; transform: rotate(90deg); transition-delay: calc(var(--ns-unlock-time) - .25s); }
.ns-ring.go .ns-tick { opacity: 1; transform: scale(1); transition-delay: calc(var(--ns-unlock-time) - .2s); }
.ns-ring.still .ns-key, .ns-ring.still .ns-tick { transition: none; }
.ns-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--n-line); font-size: 12.5px; color: var(--n-faint); }
.ns-foot .node-linkbtn { font-size: 12.5px; }
.ns-foot a { color: var(--n-muted); text-decoration: none; }
.ns-foot a:hover { color: var(--n-accent); }
body.node-signin .toast { background: var(--n-text); color: var(--n-ground); }
/* Core fades in after the ring */
body.node-enter .main { animation: node-enter .55s var(--n-ease) both; }
@keyframes node-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ns-stage.on, body.node-enter .main { animation: none; } .ns-ring .arc, .ns-ring-in svg { transition: none; } }
@media (max-width: 480px) { .ns { align-items: flex-start; padding-top: calc(40px + env(safe-area-inset-top)); } .ns-title { font-size: 28px; } .ns-brand { margin-bottom: 26px; } }
body.node-signin .btn { border-color: var(--n-border-2); background: transparent; color: var(--n-text); font-family: var(--n-font); }
body.node-signin .btn-primary { background: var(--n-accent); color: var(--n-on-accent); border-color: var(--n-accent); font-weight: 600; }
body.node-signin .btn-primary:hover { background: var(--n-accent-hover); opacity: 1; }
body.node-signin .btn:disabled { opacity: .55; }
body.node-signin { background: var(--n-ground); }
.set-slug { align-items: baseline; }
.set-slug-base { font: 13px var(--n-mono); color: var(--n-faint); }
.set-slug input { max-width: 200px !important; font-family: var(--n-mono); }
/* Scan quality (4b): the magnifier while dragging a corner, the phone-camera-first shutter, the three looks */
#scan-fit canvas.scan-loupe { position: absolute; width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 6px 24px rgba(0, 0, 0, .7), 0 0 0 2px #fff; display: none; pointer-events: none; z-index: 3; }
#scan-fit canvas.scan-loupe.on { display: block; }
.scan-shutter.photo { width: auto; height: 72px; padding: 0 26px; border-radius: 999px; background: #fff; color: #000; display: inline-flex; align-items: center; gap: 10px; font: 600 16px var(--n-font); }
.scan-shutter.photo svg { width: 24px; height: 24px; }
.scan-shutter.photo small { font: 600 16px var(--n-font); }
.scan-looks { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.scan-looks .n-chip { border-color: rgba(255, 255, 255, .3); color: #fff; }
.scan-looks .n-chip.on { background: var(--n-accent, #8DBF8F); border-color: var(--n-accent, #8DBF8F); color: #0B1A0E; }

/* ═══ Step 5c: log schedules, the Ledger's "Checks and logs that day", "not in yet" on Core, time zone, kits ═══ */
/* The day pill reads "Day 15 Oct 2026"; the native date box lies under it (a tap opens the calendar) */
.lg-daypick { position: relative; overflow: hidden; }
body.node .lg-daypick input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; pointer-events: none; }   /* the label takes the click and opens the picker (5e) */
.lg-daypick span { font: 13px var(--n-mono); }
.lg-daynav { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lg-daynav .lg-chip { padding: 6px 11px; }
.lg-daynav .lg-chip:disabled { opacity: .4; cursor: default; }
/* The day's checks and logs: a floating list under the day heading, one hairline per line, a dot in the state's colour */
.ld { margin: 4px 0 14px calc(var(--n-lg-core) + 8px); }
.ld-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 4px; }
.ld-head span:last-child { font: 11px var(--n-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--n-faint); }
.ld-empty { font-size: 13px; color: var(--n-faint); padding: 8px 0; }
.ld-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--n-line); }
.ld-row i { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--n-faint); }
.ld-row.logged i { background: var(--n-accent); box-shadow: none; }
.ld-row.partial i { background: var(--n-horizon); box-shadow: none; }
.ld-row.missing i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-danger); }
.ld-row.closed i { background: var(--n-muted); box-shadow: none; }
.ld-row.pending i, .ld-row.not_due i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-faint); }
.ld-what b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.ld-what small, .ld-state small { display: block; color: var(--n-muted); font-size: 12.5px; }
.ld-state { text-align: right; white-space: nowrap; }
.ld-st { font: 13px var(--n-mono); color: var(--n-text); }
.ld-row.logged .ld-st { color: var(--n-accent); } .ld-row.partial .ld-st { color: var(--n-horizon); } .ld-row.missing .ld-st { color: var(--n-danger); }
.ld-row.closed .ld-st, .ld-row.pending .ld-st, .ld-row.not_due .ld-st { color: var(--n-muted); }
.ld-act { min-width: 0; white-space: nowrap; }
.ld-entries { display: block; margin-top: 6px; }
.ld-entry { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--n-muted); padding: 2px 0; }
.ld-entry-t { font: 12px var(--n-mono); color: var(--n-text); }
.ld-auth { color: var(--n-accent); }
/* Core: a "not in yet" line opens today's day view */
.core-alert.go { cursor: pointer; }
.core-alert.go:hover b { color: var(--n-accent); }
/* Manage department → Logs */
.ls-row { align-items: flex-start; }
.ls-name small { display: block; color: var(--n-muted); font-size: 12.5px; margin-top: 2px; }
.ls-row.on .ls-name b::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--n-accent); margin-right: 8px; vertical-align: 2px; }
.ls-edit { padding: 12px 0 16px; border-bottom: 1px solid var(--n-line); }
.ls-f { display: flex; flex-direction: column; gap: 10px; }
.ls-k { font: 11px var(--n-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--n-muted); }
.ls-k small { font: 11px var(--n-font); letter-spacing: 0; text-transform: none; color: var(--n-faint); margin-left: 6px; }
.ls-hint { font-size: 12.5px; color: var(--n-faint); margin-top: -4px; }
.ls-days { display: flex; gap: 6px; }
.ls-day { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--n-border-2); background: transparent; color: var(--n-muted); font: 500 12.5px var(--n-font); cursor: pointer; }
.ls-day.on { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-on-accent); }
.ls-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ls-field { display: flex; flex-direction: column; gap: 6px; }
body.node .ls-field input { width: 100%; min-width: 0; color-scheme: dark; }
.ls-acts { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.ls-kits { display: flex; flex-direction: column; }
.ls-kit { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; }
.ls-kit small { display: block; color: var(--n-muted); font-size: 12.5px; margin-top: 2px; }
.ls-kit-note { color: var(--n-horizon) !important; }
.set-mono { font: 13px var(--n-mono); color: var(--n-text); }
@media (max-width: 820px) {
  .ld { margin-left: 0; }
  .ld-row { grid-template-columns: 10px minmax(0, 1fr); }
  .ld-state { grid-column: 2; text-align: left; white-space: normal; }
  .ld-act { grid-column: 2; }
  .ls-grid { grid-template-columns: 1fr 1fr; }
  .ls-kit { flex-direction: column; align-items: flex-start; }
}
.lg-daypick span { white-space: nowrap; }
@media (max-width: 820px) {
  .lg-find .lg-daypick { flex: 1 1 100%; }
  .lg-daynav { width: 100%; }
}

/* ═══ Step 5d: area status — the strip under a department's header, the one-tap sheet, Core "Closed now", day-view rows ═══ */
.ar-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.ar-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--n-border-2); border-radius: 999px; background: transparent; color: var(--n-text); font: 500 13px var(--n-font); padding: 7px 13px 7px 11px; cursor: pointer; min-height: 36px; }
.ar-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-accent); flex: none; }
.ar-chip.closed { border-color: color-mix(in srgb, var(--n-danger) 55%, transparent); }
.ar-chip.closed i { background: var(--n-danger); }
.ar-chip small { color: var(--n-danger); font-size: 12px; }
.ar-chip:hover { border-color: var(--n-accent); }
.ar-chip.add { border-style: dashed; color: var(--n-muted); }
.ar-chip.add:hover { color: var(--n-accent); }
.ar-now { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: start; padding: 4px 0 8px; }
.ar-now i { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--n-accent); }
.ar-now.closed i { background: var(--n-danger); } .ar-now.notice i { background: var(--n-horizon); }
.ar-now b { font-weight: 500; display: block; } .ar-now small { color: var(--n-muted); font-size: 12.5px; }
.ar-when summary { font-size: 12.5px; color: var(--n-muted); cursor: pointer; }
.ar-when .ls-field { margin-top: 8px; max-width: 200px; }
.ar-sheet .ar-close-btn { align-self: flex-start; }
.ar-core { grid-area: closed; margin: 4px 0 10px; }
.core-depts-head > span:last-child { display: inline-flex; gap: 14px; }
.ar-core-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--n-line); }
.ar-core-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-faint); }
.ar-core-row.closed i { background: var(--n-danger); } .ar-core-row.notice i { background: var(--n-horizon); } .ar-core-row.none i { background: var(--n-accent); }
.ar-core-row b { font-weight: 500; display: block; } .ar-core-row small { color: var(--n-muted); font-size: 12.5px; }
.ar-core-row.closed b { color: var(--n-danger); } .ar-core-row.notice b { color: var(--n-horizon); }
.ar-ev { display: block; font-size: 12.5px; color: var(--n-muted); padding: 2px 0; }
.ar-ev.closed { color: var(--n-danger); } .ar-ev.open { color: var(--n-accent); } .ar-ev.notice { color: var(--n-horizon); }
.ar-ev .node-linkbtn { font: 11px var(--n-mono); }
body.node textarea#ar-reasons { width: 100%; font: 14px var(--n-font); }

/* ═══ Step 5b: "What was true on…" ═══ */
.sn-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 18px; }
.sn-tools .sn-back { margin-left: auto; }
.sn-when { width: 100%; font: 600 15px var(--n-font); color: var(--n-text); margin-top: 6px; }
.sn-figs { margin: 0 0 14px; grid-template-columns: repeat(6, auto); }
@media (max-width: 820px) { .sn-figs { grid-template-columns: repeat(3, auto); row-gap: 16px; } }
.sn-note { font-size: 12.5px; color: var(--n-faint); margin-bottom: 18px; }
.sn .dm-sec { margin-top: 26px; }
.sn-list { display: flex; flex-direction: column; }
.sn-row { grid-template-columns: 10px minmax(0, 1fr) auto auto auto; }
.sn-row .ld-state small { display: block; font-size: 12px; }
.sn-exp { min-width: 110px; }
.sn-ok { color: var(--n-accent) !important; } .sn-amber { color: var(--n-horizon) !important; } .sn-red { color: var(--n-danger) !important; }
.sn-earlier { display: block; font-size: 12.5px; color: var(--n-horizon); margin-top: 2px; }
.sn-hash { font: 12px var(--n-mono); margin-right: 8px; }
.sn .ld { margin-left: 0; }
.lg-dayview-snap { margin-left: auto; font-size: 13px; }
.dm-form-hint { display: block; font-size: 12px; color: var(--n-faint); margin-top: 4px; }
@media (max-width: 820px) {
  .sn-row { grid-template-columns: 10px minmax(0, 1fr); }
  .sn-row .ld-state, .sn-row .ld-act { grid-column: 2; text-align: left; }
  .sn-exp { min-width: 0; }
  .lg-dayview { flex-wrap: wrap; } .lg-dayview-snap { margin-left: 0; width: 100%; text-align: left; }
}

/* ── Your plan (6e): the questions, the plan, add to departments, catch up ── */
.pq { max-width: 640px; } .pq-intro { font-size: 14.5px; line-height: 1.6; color: var(--n-muted); margin: 0 0 18px; }
.pq-q { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pq-q legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 10px; }
.pq-q select, .pq-q input[type="number"], .pq-q input[type="text"], .pq-q input[type="date"] { font: 14px var(--n-font); padding: 9px 12px; border: 1px solid var(--n-border-2); border-radius: 10px; background: var(--n-panel); color: var(--n-text); max-width: 100%; }
.pq-hint { display: block; font-size: 12.5px; color: var(--n-faint); margin-top: 8px; line-height: 1.5; }
.pq-opt { font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-faint); margin-left: 8px; }
.pq-ages { display: flex; gap: 14px; } .pq-ages .ls-field { width: 120px; }
.pq-multi .n-chip[aria-pressed="true"]::before { content: '✓ '; }
.pq-sess { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.pq-err { color: var(--n-danger); font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--n-danger); border-radius: 10px; background: var(--n-danger-soft); }
.pq-foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 8px; } .pq-foot small { font-size: 12.5px; color: var(--n-faint); line-height: 1.5; }
.pl { max-width: var(--n-content-width, 880px); }
.pl-notice { padding: 12px 14px; border-radius: 10px; background: var(--n-panel-2); border: 1px solid var(--n-border); font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.pl-notice.warn { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.pl-sum { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 4px 0 10px; }
.pl-fig { display: flex; flex-direction: column; } .pl-fig b { font-size: 26px; font-weight: 600; line-height: 1.1; } .pl-fig.crit b { color: var(--n-danger); } .pl-fig.off b { color: var(--n-faint); }
.pl-answers { font-size: 13px; color: var(--n-muted); line-height: 1.6; margin-bottom: 6px; }
.pl-list { display: flex; flex-direction: column; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--n-line); }
.pl-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; width: 100%; min-width: 0; padding: 14px 4px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pl-main:hover { background: var(--n-hover); } .pl-main:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.pl-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pl-name b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; } .pl-name small { font-size: 12.5px; color: var(--n-faint); }
.pl-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pl-tag { font: 11px var(--n-mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--n-border-2); color: var(--n-muted); white-space: nowrap; }
.pl-tag.law { border-color: var(--n-accent); color: var(--n-accent); } .pl-tag.crit { border-color: var(--n-danger); color: var(--n-danger); font-weight: 600; }
.pl-tag.starter { border-style: dashed; color: var(--n-muted); } .pl-tag.unv { border-color: var(--amber); color: var(--amber); } .pl-tag.freq, .pl-tag.src { color: var(--n-faint); }
.pl-off { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: var(--n-faint); max-width: 220px; text-align: right; } .pl-off small { overflow-wrap: anywhere; }
.pl-row.off .pl-name, .pl-row.off .pl-tags, .pl-row.gone .pl-name, .pl-row.gone .pl-tags { opacity: .5; }
.pl-act { white-space: nowrap; padding-right: 4px; }
.pl-gone { margin-top: 26px; } .pl-gone summary { cursor: pointer; font: var(--n-eyebrow) var(--n-mono); letter-spacing: var(--n-eyebrow-spacing); text-transform: uppercase; color: var(--n-muted); padding-bottom: 10px; border-bottom: 1px solid var(--n-line); }
.pl-label { margin-top: 26px; font-size: 12.5px; color: var(--n-faint); border-top: 1px solid var(--n-line); padding-top: 12px; }
.pl-desc { font-size: 14px; line-height: 1.6; color: var(--n-muted); margin: 0; }
.pl-rules { display: flex; flex-direction: column; gap: 10px; }
.pl-rule { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .pl-rule b { font-family: var(--n-mono); font-weight: 600; } .pl-rule small { color: var(--n-faint); } .pl-rule em { color: var(--n-danger); font-style: normal; font-weight: 600; }
.pl-sheet select { font: 14px var(--n-font); padding: 9px 12px; border: 1px solid var(--n-border-2); border-radius: 10px; background: var(--n-panel); color: var(--n-text); }
.pl-alerts { flex-direction: row; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; } body.node .pl-alerts input[type="checkbox"] { width: 18px !important; min-width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.pl-apply { padding: 16px 0; border-bottom: 1px solid var(--n-line); display: flex; flex-direction: column; gap: 10px; }
.pl-apply-head { display: flex; flex-direction: column; gap: 3px; } .pl-apply-head b { font-size: 15px; } .pl-apply-head small { font-size: 12.5px; color: var(--n-faint); }
.pl-apply-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pl-apply-ctl select { font: 14px var(--n-font); padding: 9px 12px; border: 1px solid var(--n-border-2); border-radius: 10px; background: var(--n-panel); color: var(--n-text); width: auto; max-width: 100%; min-width: 220px; }
.pl-apply-out { font-size: 13px; color: var(--n-muted); min-height: 1em; }
.cu-all { font-size: 13.5px; } .cu-all label, .cu-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .cu-all input, .cu-row input { width: auto; margin-top: 3px; }
.cu-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; } .cu-row { padding: 10px 0; border-top: 1px solid var(--n-line); }
.cu-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cu-row b { font-size: 14px; overflow-wrap: anywhere; } .cu-row small { font-size: 12px; color: var(--n-faint); }
@media (max-width: 600px) {
  .pl-main { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pl-tags { justify-content: flex-start; } .pl-off { align-items: flex-start; text-align: left; max-width: none; }
  .pl-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .pl-act { padding: 0 4px 12px; }
  .pq-sess { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pq-sess input[type="text"] { grid-column: 1 / -1; }
  .pq-ages .ls-field { width: 50%; }
}
/* 6f: rule changes */
.pl-notice.upd { border-color: var(--n-accent); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.pl-banner-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-tag.upd { border-color: var(--n-accent); color: var(--n-accent); } .pl-tag.upd.look { border-color: var(--amber); color: var(--amber); font-weight: 600; }
.pl-change { border: 1px solid var(--n-accent); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pl-change.look { border-color: var(--amber); } .pl-change.seen { border-style: dashed; opacity: .85; }
.pl-change-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .pl-change-head small { color: var(--n-faint); font-size: 12px; }
.pl-change-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pl-change-cols .node-k { margin-bottom: 6px; } .pl-change-cols .pl-rule { margin-bottom: 8px; }
@media (max-width: 600px) { .pl-change-cols { grid-template-columns: 1fr; } }
/* ── Visits (7b): Settings → Visits — the list, the form, one visit, the route ── */
.vs { max-width: var(--n-content-width, 880px); } .vs-form { max-width: 640px; }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .vs-grid .ls-field { min-width: 0; }
.vs-list { display: flex; flex-direction: column; }
.vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; width: 100%; padding: 14px 4px; background: none; border: 0; border-bottom: 1px solid var(--n-line); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.vs-row:hover { background: var(--n-hover); } .vs-row:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.vs-main, .vs-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vs-main b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.vs-main small, .vs-side small { font-size: 12.5px; color: var(--n-faint); } .vs-side { align-items: flex-end; text-align: right; white-space: nowrap; font-size: 13px; }
.vs-pill { font: 11px var(--n-mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--n-border-2); color: var(--n-muted); white-space: nowrap; }
.vs-pill.planned { border-color: var(--n-accent); color: var(--n-accent); } .vs-pill.live { border-color: var(--amber); color: var(--amber); font-weight: 600; } .vs-pill.cancelled { opacity: .6; }
.vs-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13.5px; color: var(--n-muted); margin-bottom: 12px; }
.vs-secs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vs-ready { margin-bottom: 6px; } .pl-notice.ok { border-color: var(--n-accent-line); } .vs-missing { font-size: 13px; color: var(--n-muted); margin-top: 6px; }
.vs-sts { display: flex; flex-direction: column; }
.vs-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--n-line); }
.vs-st-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 4px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.vs-st-main:hover { background: var(--n-hover); } .vs-st-main:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.vs-st-n { font: 500 13px var(--n-mono); color: var(--n-accent); border: 1px solid var(--n-accent-line); border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.vs-st-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vs-st-name b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; } .vs-st-name small { font-size: 12.5px; color: var(--n-faint); overflow-wrap: anywhere; }
.vs-st.nolead .vs-st-name small { color: var(--amber); }
.vs-st-pin { font: 11px var(--n-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--n-faint); white-space: nowrap; } .vs-st-pin.on { color: var(--n-accent); }
.vs-st-acts { display: flex; gap: 4px; padding-right: 4px; } .vs-st-acts .node-linkbtn { font-size: 15px; padding: 4px 6px; }
.vs-sheet select, .vs-sheet input[type="date"], .vs-sheet input[type="time"], .vs-sheet input[type="password"] { font: 14px var(--n-font); padding: 9px 12px; border: 1px solid var(--n-border-2); border-radius: 10px; background: var(--n-panel); color: var(--n-text); max-width: 100%; }
.vs-sheet input[type="password"] { width: 120px; letter-spacing: .3em; }
@media (max-width: 600px) {
  .vs-grid { grid-template-columns: 1fr; } .vs-row { grid-template-columns: minmax(0, 1fr) auto; } .vs-row .vs-side { grid-column: 1; align-items: flex-start; text-align: left; white-space: normal; }
  .vs-st-main { grid-template-columns: auto minmax(0, 1fr); } .vs-st-pin { grid-column: 2; }
}
/* 7c: the live visit */
.vs-checkin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.vs-check { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--n-border-2); text-align: left; min-height: 64px; font: inherit; }
.vs-check b { font-size: 15px; } .vs-check small { font-size: 12.5px; color: var(--n-faint); } .btn.vs-check.btn-primary small { color: inherit; opacity: .8; }
.vs-check.done { border-color: var(--n-accent-line); background: var(--n-accent-soft); } .vs-check.done b { color: var(--n-accent); }
.vs-live.open .vs-st-n { background: var(--n-accent); color: var(--n-on-accent); } .vs-live.closed .vs-st-name, .vs-live.closed .vs-st-pin { opacity: .55; }
.vs-live.mine .vs-st-name b::after { content: ' · you'; font-weight: 400; color: var(--n-faint); font-size: 12px; }
.vs-queue { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.vs-ledger { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.vs-ev { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--n-line); font-size: 13.5px; }
.vs-ev-t { font: 12px var(--n-mono); color: var(--n-faint); padding-top: 2px; } .vs-ev-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vs-ev-w b { font-weight: 500; overflow-wrap: anywhere; } .vs-ev-w small { font-size: 12px; color: var(--n-faint); }
.vs-ev.late .vs-ev-t { color: var(--amber); }
.vs-docs { display: flex; flex-direction: column; } .vs-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--n-line); }
.vs-doc-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vs-doc-name b { font-size: 14px; overflow-wrap: anywhere; } .vs-doc-name small { font-size: 12px; color: var(--n-faint); }
@media (max-width: 600px) { .vs-checkin { grid-template-columns: 1fr; } .vs-doc { grid-template-columns: 1fr; } .vs-live .vs-st-acts { grid-column: 1; padding: 0 4px 10px; } }
/* 7d: requests and the 72-hour actions */
.vs-reqs, .vs-acts { display: flex; flex-direction: column; }
.vs-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 11px 4px; background: none; border: 0; border-bottom: 1px solid var(--n-line); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.vs-req:hover { background: var(--n-hover); } .vs-req:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.vs-req-main, .vs-act-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vs-req-main b, .vs-act-main b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; } .vs-req-main small, .vs-act-main small { font-size: 12.5px; color: var(--n-faint); overflow-wrap: anywhere; }
.vs-req.sens b::before { content: '⚑ '; color: var(--n-danger); } .vs-req.added .vs-req-main, .vs-req.withdrawn .vs-req-main, .vs-req.shown .vs-req-main { opacity: .7; }
.vs-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--n-line); }
.vs-act-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .vs-act.overdue .vs-act-main small { color: var(--n-danger); } .vs-act.done .vs-act-main, .vs-act.waived .vs-act-main { opacity: .65; }
.vs-dep { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-line); display: flex; flex-direction: column; gap: 8px; }
.vs-core { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--amber); border-radius: 10px; background: color-mix(in srgb, var(--amber) 12%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vs-core b { font-size: 14.5px; } .vs-core span { font-size: 12.5px; color: var(--n-faint); } .vs-core.over { border-color: var(--n-danger); }
@media (max-width: 600px) { .vs-act { grid-template-columns: 1fr; } .vs-act-side { justify-content: flex-start; } .vs-req { grid-template-columns: minmax(0, 1fr) auto; } }
/* Never-hold (20 Oct): the line under every free-text box, and Redact links */
.nh-hint { display: block; font-size: 12px; color: var(--n-faint); margin-top: 5px; line-height: 1.4; }
.vs-redact { font-size: 12px; }
/* 7e: the visitor's guest view card on a visit (planned and live) */
.vs-guest { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--n-border-2); border-radius: 12px; display: grid; gap: 8px; }
.vs-guest.on { border-color: var(--n-accent-line); background: var(--n-accent-soft); }
.vs-guest-h { display: flex; flex-direction: column; gap: 3px; } .vs-guest-h b { font-size: 15px; } .vs-guest-h small { font-size: 12.5px; color: var(--n-faint); }
.vs-guest-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* 7f: sign-off pad, release list */
.vs-statement { margin: 6px 0 10px; padding: 12px 14px; border-left: 3px solid var(--n-accent-line); background: var(--n-accent-soft); font-size: 14px; line-height: 1.5; }
.vs-pad-wrap { position: relative; } .vs-pad { width: 100%; height: auto; display: block; background: #fff; border: 1.5px solid var(--n-border-2); border-radius: 12px; touch-action: none; }
.vs-pad-clear { position: absolute; right: 10px; top: 8px; } .vs-sign-alt { display: flex; flex-wrap: wrap; gap: 8px; } .vs-sign-alt label.btn { cursor: pointer; }
.vs-releases { display: grid; gap: 6px; } .vs-rel { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .vs-rel small { color: var(--n-faint); font-size: 12.5px; }

/* ─── ACA standards (aca.js, 23 Oct): same rows as checklists, a wider code column and a ⋯ menu ─── */
@media (min-width: 981px) { .dm-row.cl-row.aca-row { grid-template-columns: 30px 66px minmax(0, 1fr) 200px 170px 104px; } }
.aca-row .dm-name small { display: block; }
.aca-star { color: var(--n-horizon); margin-left: 6px; font-size: .9em; }
.aca-row .dm-name small.aca-nh { color: var(--n-danger); }
.aca-row .dm-name small.aca-notes { font-style: italic; }
.cl-seal.na { border-color: var(--n-line); color: var(--n-faint); }
.cl-seal.visit { border-style: dotted; border-color: var(--n-faint); }
.dm-row.aca-row .dm-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.aca-more { background: none; border: 0; color: var(--n-muted); font: 600 18px var(--n-font); line-height: 1; padding: 6px 8px; border-radius: var(--n-radius-sm); cursor: pointer; }
.aca-more:hover, .aca-more:focus-visible { background: var(--n-hover); color: var(--n-text); }
.aca-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 18px 0 6px; }
.aca-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--n-muted); min-width: 0; }
.aca-sel select { font: 14px var(--n-font); padding: 9px 12px; border: 1px solid var(--n-border-2); border-radius: 10px; background: var(--n-panel); color: var(--n-text); width: auto; max-width: 100%; }
.aca-prog { font-size: 13.5px; color: var(--n-muted); }
.aca-prog b { color: var(--n-text); font-weight: 600; }
.aca-note { font-size: 13px; color: var(--n-muted); margin-top: 8px; line-height: 1.5; }
.aca-note .node-linkbtn { font-size: 13px; }
.aca-nh-box { border: 1px solid var(--n-danger); background: var(--n-danger-soft); color: var(--n-text); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; margin: 10px 0 14px; }
.aca-nh-box b { color: var(--n-danger); }
.aca-nh-box.quiet { border-color: var(--n-border-2); background: none; color: var(--n-muted); }
.aca-search { width: 100%; box-sizing: border-box; }
.aca-pick { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--n-border-2); border-radius: 12px; margin-top: 10px; }
.aca-pick-row { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--n-line); padding: 11px 14px; color: var(--n-text); font: 14px var(--n-font); cursor: pointer; }
.aca-pick-row:last-child { border-bottom: 0; }
.aca-pick-row:hover, .aca-pick-row:focus-visible { background: var(--n-hover); }
.aca-pick-row small { color: var(--n-muted); font-size: 12.5px; }
.aca-pick-row[hidden] { display: none; }
.aca-pick-foot { font-size: 12.5px; color: var(--n-faint); margin: 12px 0 0; }
@media (max-width: 820px) { .aca-bar { flex-direction: column; align-items: stretch; } .aca-sel { justify-content: space-between; } .aca-sel select { flex: 1; } }
.dm-sec.aca-sec { flex-wrap: wrap; row-gap: 4px; }
.dm-sec.aca-sec span { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.aca-sel > span { min-width: 48px; }
@media (max-width: 820px) { .dm-sec.aca-sec { flex-direction: column; gap: 2px; } .dm-sec.aca-sec span + span::before { content: none; } }
@media (min-width: 821px) and (max-width: 980px) {   /* tablets: one line per standard, narrower place + status columns */
  .dm-row.cl-row.aca-row { grid-template-columns: 30px 66px minmax(0, 1fr) 140px 130px auto; }
  .dm-row.cl-row.aca-row .cl-where, .dm-row.cl-row.aca-row .cl-status { grid-column: auto; }
}
.aca-row .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Core on phones, tidy (24 Oct, UI audit #27–29, #31) ─── */
.core-sats-row { display: none; }
@media (max-width: 820px) {
  .node-eyebrow .ne-camp, .node-eyebrow .ne-dot { display: none; }   /* the top bar already shows the camp */
  #area-core .core-alerts-head, .core-depts-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .core-depts-head > span:last-child { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .core-sat { display: none; }
  .core-sats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin: 18px 0 0; }
  .core { grid-template-areas: "pins" "closed" "stage" "sats" "info" "alerts" "thread" "depts"; }
  .core-sats-row { grid-area: sats; }
  .core-row-sat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; background: none; border: 0; padding: 0; color: var(--n-text); font: inherit; cursor: pointer; }
  div.core-row-sat { cursor: default; }
  .core-row-sat .node-ring { width: 52px; height: 52px; }
  .core-row-name { font-size: 12px; line-height: 1.25; text-align: center; color: var(--n-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .core-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 16px 8px; padding-bottom: 0; scroll-snap-type: none; }
  .core-dept { min-width: 0; }
  .core-dept .dept-disc { width: 52px; height: 52px; font-size: 18px; }
  .core-dept b { max-width: none; white-space: normal; text-overflow: clip; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ─── Phone fixes from Callum's iPhone SE (24 Oct) ─── */
/* Camp switcher: iPhone Safari draws its own dropdown and clips the text, so we draw it ourselves (same look everywhere) */
body.node .node-switch { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px 0 12px; font: 500 14px var(--n-font);
  color: var(--n-muted); background: var(--n-panel); border: 1px solid var(--n-border-2); border-radius: var(--n-radius-sm); cursor: pointer; text-align: left; }
body.node .node-switch::after { content: ""; width: 12px; height: 12px; flex: none; background: no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23B7C4BB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 1.5 9 4.5M3 7.5 6 10.5 9 7.5'/%3E%3C/svg%3E"); }
body.node .node-switch:hover, body.node .node-switch:focus-visible { color: var(--n-text); border-color: var(--n-accent); }
/* Long file names (often with underscores and no spaces) wrap instead of running under the status */
.dm-name { min-width: 0; }
.dm-name small { overflow-wrap: anywhere; }
.dm-note { min-width: 0; overflow-wrap: anywhere; }
.dm-thread.empty { padding: 0; cursor: default; }

/* ─── Q-guard: not for personal records (24 Oct) ─── */
.guard-banner { border: 1.5px solid var(--n-danger); background: var(--n-danger-soft); color: var(--n-text); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: 4px 0 14px; }
.guard-banner b { color: var(--n-danger); }
.guard-overlay { z-index: 140; }
.guard-modal { max-width: 560px; }
.guard-mark { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--n-danger); color: var(--n-danger); display: grid; place-items: center; font: 700 22px var(--n-font); margin-bottom: 12px; }
.guard-modal h2 { color: var(--n-text); font-size: 21px; line-height: 1.3; margin: 0 0 10px; }
.guard-modal p, .guard-lead { color: var(--n-muted); font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.guard-modal p b, .guard-lead b { color: var(--n-text); }
.guard-help { margin: 6px 0 4px; font-size: 14px; color: var(--n-muted); }
.guard-help summary { cursor: pointer; color: var(--n-accent); }
.guard-help ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
.guard-files { list-style: none; margin: 12px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.guard-file { border: 1.5px solid var(--n-danger); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--n-danger-soft); }
.guard-file.yes { border-color: var(--n-border-2); background: none; }
.guard-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guard-name b { overflow-wrap: anywhere; color: var(--n-text); }
.guard-name small { color: var(--n-muted); font-size: 13px; }
.guard-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.guard-pick button { font: 500 14px var(--n-font); padding: 9px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--n-border-2); background: none; color: var(--n-muted); cursor: pointer; }
.guard-pick .guard-no.on { border-color: var(--n-danger); background: var(--n-danger); color: #fff; }
.guard-pick .guard-yes.on { border-color: var(--n-accent); color: var(--n-accent); }

/* The verification badge as a link (24 Oct) */
button.badge-link { font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border: 1px solid currentColor; background: none; }
button.badge-link:hover, button.badge-link:focus-visible { text-decoration: underline; }
.lg-tz { font-size: 12.5px; color: var(--n-faint); margin: 0 0 10px; }