/* house-next.css — Clothesline hub, the lit work-surface system.
   Load AFTER house.css. Everything here is additive or an override; no markup
   is required to change for the token/button/field layer to take effect.

   Three ideas run through it:
   1. One accent (turquoise) for focus, the chosen thing, and light. Nothing else.
   2. Navy, not black, for structural bands — and every band is lit.
   3. An 8px spacing scale and a 6px radius, everywhere, with no exceptions.
*/

:root{
  /* ink */
  --n-ink:#101418;          /* headings, row titles */
  --n-body:#44515C;         /* body copy */
  --n-muted:#5C666E;        /* secondary copy, meta. 4.5:1 on white */
  --n-faint:#6E7880;        /* lowest legal grey. never below this */
  --n-hair:#E4E8E8;         /* dividers between sections */
  --n-hair-soft:#F0F3F3;    /* dividers between rows */
  --n-line:#D7DBDB;         /* control borders */
  --n-line-strong:#C9D0D0;  /* control borders, quiet buttons */

  /* ground */
  --n-page:#F3F5F5;         /* the desk the panels sit on */
  --n-surface:#FFFFFF;      /* panels */
  --n-navy:#04162F;         /* rail and every structural band */

  /* accent + status */
  --n-brand:#3DC1B6;
  --n-brand-ink:#0E6F68;    /* turquoise as TEXT. 4.5:1 on white */
  --n-brand-ink-hover:#0A5751;
  --n-brand-wash:#DFF3F1;
  --n-brand-wash-lo:#EAF8F6;
  --n-brand-line:#9BD9D3;

  --n-warn:#F37021;         /* late. the only warm colour on the page */
  --n-warn-ink:#A0501C;
  --n-warn-wash:#FFF3EC;
  --n-bad:#C0392B;
  --n-bad-ink:#8E2B20;
  --n-bad-wash:#FBF1F0;
  --n-bad-line:#EED9D7;
  --n-good:#2F9E62;
  --n-on:#7FBC42;           /* presence */

  /* spacing — 8px scale. use these, not arbitrary values */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px;

  /* form */
  --n-radius:6px;           /* controls */
  --n-radius-lg:10px;       /* panels */
  --n-radius-sm:5px;        /* items inside menus */

  /* elevation — used sparingly. one lifted thing per screen */
  --n-lift-1:0 1px 2px rgba(16,20,24,.04);
  --n-lift-2:0 1px 2px rgba(16,20,24,.04),0 8px 24px rgba(16,20,24,.05);
  --n-lift-menu:0 14px 34px rgba(4,22,47,.14);
  --n-lift-3:0 10px 30px rgba(4,22,47,.28),0 2px 6px rgba(4,22,47,.20);
  --n-lift-4:0 24px 64px rgba(4,22,47,.34),0 4px 12px rgba(4,22,47,.22);

  /* the glow. hover on anything actionable */
  --n-glow:0 0 0 3px rgba(61,193,182,.26),0 8px 22px rgba(61,193,182,.40);
  --n-glow-sm:0 0 0 3px rgba(61,193,182,.22);
  --n-focus:0 0 0 3px rgba(61,193,182,.22);

  /* the section strip: a level below a panel band, a level above white */
  --n-strip:#EDF1F1; --n-strip-line:#DFE5E5;
  --n-strip-warm:#F6EDE6; --n-strip-warm-line:#EBD9CC;

  /* sheen — the top-light on a filled control */
  --n-sheen:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%);
  --n-sheen-dark:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 58%);
  --n-sheen-quiet:linear-gradient(180deg,#fff,#F7F9F9);
}

/* ───────────────────────────── type ─────────────────────────────
   The old system shouted: 10.5px uppercase with .16em tracking was doing
   the job of a heading everywhere. Here uppercase micro-labels appear ONCE
   per section, and hierarchy comes from size and weight instead. */

body{background:var(--n-page);color:var(--n-body);font:400 15px/1.6 var(--sans)}
h1{font-size:29px;line-height:1.2;letter-spacing:-.015em;color:var(--n-ink);max-width:24em;text-wrap:pretty}
h2{font-size:21px;line-height:1.3;color:var(--n-ink)}
a{color:var(--n-brand-ink);border-bottom:0}
a:hover{color:var(--n-brand-ink-hover);border-bottom:0}
.n-lede{max-width:50em;font-size:14.5px;line-height:1.6;color:var(--n-muted);text-wrap:pretty}
.n-meta{font-size:13px;color:var(--n-muted)}
.n-figure{font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--n-ink);font-variant-numeric:tabular-nums}
.n-money{font-size:15px;font-weight:700;color:var(--n-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.n-label{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--n-faint)}

/* ──────────────────────── the light rig ────────────────────────
   Three sources, always the same geometry, so every dark surface in the hub
   reads as the same room: key from the top-left, turquoise bounce from the
   bottom-right, a diagonal falloff between them, and a lit top edge.
   Put .n-lit on a position:relative dark element. It paints via ::before
   and ::after so it needs no extra markup. */

.n-lit{position:relative;overflow:hidden;background:var(--n-navy)}
.n-lit>*{position:relative;z-index:1}
.n-lit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 260% at 4% -90%, rgba(255,255,255,.34), rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 78%),
    radial-gradient(48% 260% at 99% 180%, rgba(61,193,182,.42), rgba(61,193,182,.12) 46%, rgba(61,193,182,0) 80%),
    linear-gradient(100deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 34%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.30) 100%);
}
.n-lit::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.10) 45%, rgba(61,193,182,.30) 100%);
}

/* the rail is the same rig, rotated for a tall surface */
.n-rail{position:relative;overflow:hidden;background:var(--n-navy);width:232px;flex:none}
.n-rail>*{position:relative;z-index:1}
.n-rail::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(125% 55% at 4% -10%, rgba(255,255,255,.34), rgba(255,255,255,.10) 40%, rgba(255,255,255,0) 72%),
    linear-gradient(196deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 30%, rgba(0,0,0,.14) 62%, rgba(0,0,0,.42) 100%),
    radial-gradient(105% 32% at -10% 106%, rgba(61,193,182,.42), rgba(61,193,182,.12) 44%, rgba(61,193,182,0) 74%),
    radial-gradient(85% 26% at 112% 101%, rgba(255,255,255,.26), rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 74%);
}
.n-rail::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(61,193,182,0) 0%, rgba(61,193,182,.6) 22%, rgba(61,193,182,.18) 72%, rgba(61,193,182,0) 100%);
}
.n-rail-inner{min-height:100%;box-sizing:border-box;padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s4)}
.n-rail-logo img{height:64px;width:auto;display:block}
.n-rail-tag{font:800 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--n-brand);margin-top:10px}
.n-rail nav{display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.n-rail nav a{color:rgba(255,255,255,.78);padding:10px 14px;border-radius:var(--n-radius);border:0;transition:background .18s,box-shadow .18s,color .18s}
.n-rail nav a:hover{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1px rgba(61,193,182,.35),0 0 18px rgba(61,193,182,.18)}
.n-rail nav a.on{color:var(--n-navy);background:var(--n-sheen),var(--n-brand);font-weight:700;
  box-shadow:0 0 0 1px rgba(61,193,182,.55),0 8px 28px rgba(61,193,182,.34)}
.n-rail nav a.on:hover{box-shadow:0 0 0 1px rgba(61,193,182,.7),0 10px 34px rgba(61,193,182,.48)}
.n-rail-block{padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14)}
.n-rail-block .n-label{color:rgba(255,255,255,.58);letter-spacing:.2em;font-size:10px}
.n-rail-figure{font-family:var(--serif);font-size:24px;line-height:1.25;color:#fff;font-variant-numeric:tabular-nums;margin-top:10px}
.n-rail-figure small{display:block;font-size:15px;color:rgba(255,255,255,.62);margin-top:2px}
.n-rail-item{display:flex;gap:10px;align-items:baseline;color:#fff;border:0}
.n-rail-item b{display:block;font-size:13.5px;font-weight:400;line-height:1.4;color:#fff}
.n-rail-item small{display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:2px}
.n-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px}
.n-dot.late{background:var(--n-warn);box-shadow:0 0 10px rgba(243,112,33,.75)}
.n-dot.live{background:var(--n-brand);box-shadow:0 0 10px rgba(61,193,182,.6)}
.n-dot.idle{background:rgba(255,255,255,.42)}
.n-presence{width:7px;height:7px;border-radius:50%;background:var(--n-on);box-shadow:0 0 10px rgba(127,188,66,.7)}
.n-presence.off{background:rgba(255,255,255,.34);box-shadow:none}

/* ──────────────────────────── buttons ───────────────────────────
   Turquoise = the thing to do next. Black = the thing that leaves the
   building. Outlined = the way back. Green = it has gone. Red only removes.
   Every fill carries a top-light; every hover carries the turquoise glow. */

.n-btn{display:inline-flex;align-items:center;gap:var(--s1);font:700 13px/1 var(--sans);letter-spacing:0;text-transform:none;
  border-radius:var(--n-radius);padding:11px 16px;cursor:pointer;border:1px solid transparent;
  transition:box-shadow .18s,background .18s,border-color .18s,color .18s}
.n-btn:focus-visible{outline:0;box-shadow:var(--n-glow)}

.n-btn.primary{color:var(--n-navy);background:var(--n-sheen),var(--n-brand);box-shadow:0 1px 2px rgba(4,22,47,.16)}
.n-btn.primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 60%),#4ACFC4;box-shadow:var(--n-glow)}

.n-btn.send{color:#fff;background:var(--n-sheen-dark),var(--n-ink);box-shadow:0 1px 2px rgba(16,20,24,.20)}
.n-btn.send:hover{box-shadow:var(--n-glow)}

.n-btn.quiet{color:var(--n-ink);background:var(--n-sheen-quiet);border-color:var(--n-line)}
.n-btn.quiet:hover{border-color:var(--n-brand);box-shadow:var(--n-glow-sm)}

.n-btn.bare{color:var(--n-brand-ink);background:transparent;padding-left:0;padding-right:0}
.n-btn.bare:hover{color:var(--n-brand-ink-hover)}

.n-btn.remove{color:var(--n-bad-ink);background:#fff;border-color:var(--n-bad-line)}
.n-btn.remove:hover{background:var(--n-bad);border-color:var(--n-bad);color:#fff;box-shadow:0 0 16px rgba(192,57,43,.40)}

.n-btn.sent{color:#fff;background:var(--n-good);border-color:var(--n-good);cursor:default}
.n-btn:disabled,.n-btn.off{color:var(--n-faint);background:var(--n-page);border-color:var(--n-hair);cursor:default;box-shadow:none}
.n-btn.sm{font-size:12px;padding:6px 10px}

/* the one action that belongs on a list row */
.n-rowbtn{font:700 12px/1 var(--sans);color:var(--n-ink);background:linear-gradient(180deg,#fff,#F6F8F8);
  border:1px solid var(--n-line-strong);border-radius:var(--n-radius);padding:6px 10px;cursor:pointer;
  justify-self:end;transition:box-shadow .18s,border-color .18s}
.n-rowbtn:hover{border-color:var(--n-brand);box-shadow:0 0 0 3px rgba(61,193,182,.22),0 6px 16px rgba(61,193,182,.32)}
.n-rowbtn.go{color:var(--n-navy);background:linear-gradient(180deg,var(--n-brand-wash-lo),var(--n-brand-wash));border-color:var(--n-brand-line)}
.n-rowbtn.go:hover{border-color:var(--n-brand);box-shadow:0 0 0 3px rgba(61,193,182,.24),0 6px 16px rgba(61,193,182,.34)}

/* ──────────────────────────── fields ────────────────────────────
   Labels sit ABOVE the field in sentence case. The old .field .k turquoise
   band put a coloured bar above every input; 30 fields meant 30 bars. */

.n-field{display:flex;flex-direction:column;gap:7px;margin:0 0 var(--s2)}
.n-field>.k{font:700 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--n-ink)}
.n-field>.hint{font-size:12.5px;color:var(--n-muted)}
/* the legacy .field carried .wide from house.css; carry it here so a migrated panel does not depend on the old sheet */
.n-field.wide{grid-column:1/-1}
.n-field input[type=text],.n-field input[type=email],.n-field input[type=password],
.n-field input[type=number],.n-field input[type=url],.n-field input[type=date],
.n-field input[type=month],.n-field textarea,.n-field select{
  width:100%;font:400 14.5px/1.5 var(--sans);color:var(--n-ink);background:#fff;
  border:1px solid var(--n-line);border-radius:var(--n-radius);padding:10px 12px;outline:none;
  transition:border-color .18s,box-shadow .18s}
.n-field input:focus,.n-field textarea:focus,.n-field select:focus{border-color:var(--n-brand);box-shadow:var(--n-focus)}
.n-field textarea{min-height:84px;resize:vertical;line-height:1.55}
/* Colour, range and checkbox inputs were sized by house.css rules scoped to .box-body
   and .panel. Migrating the pages to .n-field stopped those applying, so they are
   carried here rather than left at browser defaults. Same values. */
.n-field input[type=color]{width:34px;height:30px;padding:0;margin:6px 8px;border:1px solid var(--n-line);border-radius:var(--n-radius);background:#fff}
.n-field input[type=range]{margin:12px 12px;width:auto}
.n-field input[type=checkbox]{width:auto;margin:10px}
/* Carried from the dialog rules when H.form moved to .n-field: the required asterisk,
   the file input, and the pull-down button, which should now look like the field it
   sits in rather than the borderless band it used to sit in. */
.n-field>.k i{font-style:normal;color:var(--n-brand)}
.n-field input[type=file]{padding:10px 12px}
.n-field .cmenu-btn{width:100%;border:1px solid var(--n-line);border-radius:var(--n-radius);padding:10px 12px;background:#fff;box-shadow:none}
.n-field .cmenu-btn:focus{border-color:var(--n-brand);box-shadow:var(--n-focus)}

.n-field.bad input,.n-field.bad textarea{border-color:var(--n-bad);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.n-field.bad>.hint{color:var(--n-bad-ink)}

/* prefixed field (money) */
.n-affix{display:flex;align-items:center;border:1px solid var(--n-line);border-radius:var(--n-radius);overflow:hidden;background:#fff}
.n-affix:focus-within{border-color:var(--n-brand);box-shadow:var(--n-focus)}
.n-affix>span{padding:10px 12px;background:var(--n-page);border-right:1px solid var(--n-hair);font-size:14.5px;color:var(--n-muted)}
.n-affix>input{flex:1;min-width:0;border:0!important;outline:none;padding:10px 12px;box-shadow:none!important}
.n-field.bad .n-affix{border-color:var(--n-bad);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.n-field.bad .n-affix>span{background:var(--n-bad-wash);border-right-color:var(--n-bad-line);color:var(--n-bad-ink)}

/* search */
.n-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--n-line);
  border-radius:var(--n-radius);padding:8px 12px;flex:0 1 300px;min-width:200px}
.n-search:focus-within{border-color:var(--n-brand);box-shadow:var(--n-focus)}
.n-search>label,.n-search>.k{font-size:13px;color:var(--n-faint)}
.n-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:400 13.5px/1.4 var(--sans);color:var(--n-ink)}
.n-kbd{font:700 11px/1 var(--sans);color:var(--n-faint);background:var(--n-page);border:1px solid var(--n-hair);border-radius:4px;padding:3px 6px}

/* ────────────────────────── pull-downs ──────────────────────────
   Replaces native <select>. Needs JS: role="listbox", roving focus,
   Esc to close, type-ahead. See README §Interactions. */

.n-select{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font:400 14.5px/1.4 var(--sans);color:var(--n-ink);background:var(--n-sheen-quiet);
  border:1px solid var(--n-line);border-radius:var(--n-radius);padding:10px 12px;cursor:pointer;text-align:left}
.n-select:hover{border-color:var(--n-brand);box-shadow:0 0 0 3px rgba(61,193,182,.20)}
.n-select .caret{color:var(--n-faint)}
.n-select[aria-expanded=true]{background:#fff;border-color:var(--n-brand);border-radius:var(--n-radius) var(--n-radius) 0 0;box-shadow:var(--n-focus)}
.n-select[aria-expanded=true] .caret{color:var(--n-brand-ink)}

.n-menu{border:1px solid var(--n-brand);border-top:0;border-radius:0 0 var(--n-radius) var(--n-radius);
  background:#fff;padding:6px;box-shadow:var(--n-lift-menu)}
.n-menu .g{padding:8px 10px 6px;font:800 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--n-faint)}
.n-menu .g+.g,.n-menu hr+.g{margin-top:4px;border-top:1px solid var(--n-hair)}
.n-menu a,.n-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;
  border-radius:var(--n-radius-sm);font:400 14px/1.4 var(--sans);color:var(--n-ink);cursor:pointer;text-align:left}
.n-menu a:hover,.n-menu button:hover,.n-menu [aria-selected=true]:hover{background:rgba(61,193,182,.10)}
.n-menu [aria-selected=true]{color:var(--n-brand-ink);font-weight:700;background:rgba(61,193,182,.12)}
.n-menu .tick{width:12px;flex:none}
.n-menu .count{margin-left:auto;color:var(--n-faint);font-size:12.5px}
.n-menu .add{margin-top:6px;padding:11px 12px;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--n-sheen-dark),var(--n-ink)}
.n-menu .add:hover{background:var(--n-sheen-dark),var(--n-ink);box-shadow:var(--n-glow)}

/* ──────────────────────── date picker ───────────────────────── */

.n-cal{border:1px solid var(--n-line);border-radius:var(--n-radius);overflow:hidden;background:#fff;box-shadow:0 8px 26px rgba(4,22,47,.08)}
.n-cal-head{display:flex;align-items:center;gap:12px;padding:12px 14px}
.n-cal-head b{flex:1;text-align:center;font:800 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.n-cal-head a{color:var(--n-brand);font-size:14px;padding:2px 8px;border-radius:4px;border:0}
.n-cal-head a:hover{background:rgba(255,255,255,.12)}
.n-cal-dow,.n-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.n-cal-dow{padding:10px 12px 4px}
.n-cal-dow span{text-align:center;font:800 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--n-faint)}
.n-cal-grid{padding:0 12px 12px}
.n-cal-grid a,.n-cal-grid span{display:flex;align-items:center;justify-content:center;height:34px;border-radius:var(--n-radius);
  font-size:13.5px;color:var(--n-ink);border:0}
.n-cal-grid span{color:var(--n-faint)}                                  /* outside the month */
.n-cal-grid a:hover{background:rgba(61,193,182,.12)}
.n-cal-grid a.today{font-weight:700;box-shadow:inset 0 0 0 1px var(--n-brand)}
.n-cal-grid a.late{font-weight:700;color:var(--n-bad-ink);background:var(--n-bad-wash);box-shadow:inset 0 0 0 1px var(--n-bad-line)}
.n-cal-grid a.on{font-weight:700;color:#fff;background:linear-gradient(100deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(0,0,0,.18)),var(--n-navy);box-shadow:0 0 0 3px rgba(61,193,182,.24)}
.n-cal-foot{display:flex;align-items:center;gap:var(--s2);padding:12px 14px;border-top:1px solid var(--n-hair);font-size:13px}
.n-cal-foot .right{margin-left:auto;color:var(--n-muted);font-size:12.5px}

/* ──────────────── segmented, chips, toggles ────────────────
   A segmented control is ONE object, not N pills. Use it when the choices
   are mutually exclusive and you want them all visible (saved views,
   orientation). Use chips when several can be on at once. */

.n-seg{display:inline-flex;border:1px solid var(--n-line);border-radius:var(--n-radius);overflow:hidden;background:var(--n-sheen-quiet)}
.n-seg a,.n-seg button{padding:9px 15px;font:600 13px/1 var(--sans);color:var(--n-body);background:transparent;
  border:0;border-right:1px solid var(--n-line);cursor:pointer}
.n-seg>*:last-child{border-right:0}
.n-seg a:hover,.n-seg button:hover{background:rgba(61,193,182,.10);color:var(--n-ink)}
.n-seg .on,.n-seg [aria-pressed=true]{font-weight:700;color:#fff;
  background:linear-gradient(100deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,rgba(0,0,0,.18)),var(--n-navy)}
.n-seg .on:hover{box-shadow:inset 0 0 0 1px rgba(61,193,182,.5)}
.n-seg .n{color:var(--n-faint)}
.n-seg .on .n{color:var(--n-brand)}

.n-chip{display:inline-flex;align-items:center;gap:var(--s1);font:600 13px/1 var(--sans);color:var(--n-body);
  background:var(--n-sheen-quiet);border:1px solid var(--n-line);border-radius:var(--n-radius);padding:8px 12px;cursor:pointer}
.n-chip:hover{border-color:var(--n-brand);color:var(--n-ink)}
.n-chip .b{width:7px;height:7px;border-radius:50%;border:1px solid #A8B0B4}
.n-chip.on{font-weight:700;color:var(--n-navy);background:linear-gradient(180deg,var(--n-brand-wash-lo),var(--n-brand-wash));border-color:var(--n-brand)}
.n-chip.on .b{background:var(--n-brand-ink);border-color:var(--n-brand-ink)}

.n-toggle{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--n-ink);cursor:pointer;border:0}
.n-toggle .sw{position:relative;width:42px;height:24px;border-radius:12px;flex:none;background:var(--n-hair);
  box-shadow:inset 0 1px 2px rgba(4,22,47,.10);transition:background .18s,box-shadow .18s}
.n-toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(4,22,47,.18);transition:left .18s}
.n-toggle.on .sw{background:var(--n-sheen),var(--n-brand);box-shadow:0 0 0 1px rgba(61,193,182,.5),0 4px 14px rgba(61,193,182,.35)}
.n-toggle.on .sw::after{left:21px}
.n-toggle:not(.on){color:var(--n-body)}

/* ───────────────────── panels and list rows ─────────────────────
   The toolbar belongs INSIDE the surface it controls. Client groups are
   sections of one panel, not separate cards — so the money figures stay
   in one column and compare at a glance. */

.n-panel{background:var(--n-surface);border:1px solid var(--n-hair);border-radius:var(--n-radius-lg);overflow:hidden}
.n-panel.lift{box-shadow:var(--n-lift-2)}
.n-toolbar{padding:18px var(--s3);border-bottom:1px solid var(--n-hair);display:flex;flex-direction:column;gap:var(--s2)}
.n-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.n-toolbar-row.baseline{align-items:baseline;gap:var(--s3)}
.n-filters{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--n-body);flex-wrap:wrap}
.n-filters a{color:var(--n-body)}
.n-filters a:hover{color:var(--n-brand-ink)}

/* the lit group band. clickable = collapse */
.n-group-head{display:flex;align-items:center;gap:14px;padding:var(--s2) var(--s3);cursor:pointer}
.n-group-head .key{width:3px;height:18px;border-radius:2px;background:var(--n-brand);flex:none;box-shadow:0 0 10px rgba(61,193,182,.6)}
.n-group-head .nm{flex:1;min-width:0;font:800 14px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.n-group-head .n{font:700 13px/1 var(--sans);color:var(--n-brand)}
.n-group-head .chev{width:14px;text-align:center;font-size:12px;color:var(--n-brand)}
.n-group+.n-group{border-top:1px solid var(--n-hair)}

.n-row{display:grid;grid-template-columns:minmax(0,1fr) 122px 134px 104px;gap:var(--s2);align-items:baseline;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--n-hair-soft)}
.n-row:last-child{border-bottom:0}
/* the band is the collapse control, so it fills the row it sits in */
.n-group-head{width:100%;text-align:left;border:0;font:inherit}
.n-row .a{text-align:right}
.n-row .t+.s{margin-top:5px}
.n-row .v .none{font-size:14px;color:var(--n-faint)}
.n-row:hover{background:rgba(61,193,182,.05)}
.n-row .t{font-size:15.5px;font-weight:600;line-height:1.45;color:var(--n-ink)}
.n-row .s{font-size:13px;color:var(--n-muted)}
.n-row .v{text-align:right}
.n-panel-foot{padding:14px var(--s3);border-top:1px solid var(--n-hair);font-size:13px;color:var(--n-muted)}

/* the one lifted thing: what is late */
.n-alert{background:#fff;border:1px solid var(--n-hair);border-left:3px solid var(--n-warn);
  border-radius:var(--n-radius-lg);padding:var(--s3);box-shadow:var(--n-lift-2)}
.n-alert .when{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--n-warn-ink)}
.n-alert .what{margin-top:var(--s1);font-size:18px;font-weight:700;line-height:1.45;color:var(--n-ink);max-width:42em;text-wrap:pretty}
.n-alert .where{margin-top:var(--s1);font-size:14px;color:var(--n-muted)}
.n-alert .acts{display:flex;gap:var(--s1);margin-top:var(--s2);flex-wrap:wrap}

/* ─────────────────────── panel states ───────────────────────
   Every panel that fetches has three. Never the bare word "Loading." and
   never an exception in a title slot. */

.n-skeleton{display:flex;flex-direction:column;gap:12px;padding:var(--s3)}
.n-skeleton i{display:block;height:12px;border-radius:3px;background:linear-gradient(90deg,#EEF1F1 0%,#F7F9F9 50%,#EEF1F1 100%);
  background-size:200% 100%;animation:n-shimmer 1.4s ease-in-out infinite}
.n-skeleton i:nth-child(2){width:72%}
.n-skeleton i:nth-child(3){width:54%}
@keyframes n-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

.n-empty{padding:var(--s5) var(--s3);text-align:center}
.n-empty b{display:block;font-family:var(--serif);font-size:18px;font-weight:400;color:var(--n-ink)}
.n-empty p{margin:var(--s1) auto 0;max-width:38em;font-size:14px;color:var(--n-muted)}
.n-empty .n-btn{margin-top:var(--s2)}

.n-error{padding:var(--s3);background:var(--n-bad-wash);border-top:1px solid var(--n-bad-line)}
.n-error b{display:block;font-size:14.5px;font-weight:700;color:var(--n-bad-ink)}
.n-error p{margin-top:6px;font-size:13.5px;color:var(--n-bad-ink)}
.n-error .n-btn{margin-top:var(--s2)}

/* ─────────────────────── overrides on house.css ───────────────────────
   Three things in the old sheet fight the new system. Kept here, scoped,
   so the port can be reverted by removing this stylesheet. */

/* 1. mint zebra striping — rows read as a barcode. Hairlines instead. */
table.h tbody tr:nth-child(even) td{background:transparent}
table.h tbody tr:hover td{background:rgba(61,193,182,.05)}
table.h th{border-bottom-color:var(--n-ink);color:var(--n-faint)}
table.h td{border-bottom-color:var(--n-hair-soft)}

/* 2. 2px radius everywhere — controls now 6px, panels 10px. */
.btn,.pill,input[type=text],input[type=email],input[type=password],
input[type=number],input[type=date],input[type=url],select,textarea{border-radius:var(--n-radius)}
.panel{border-radius:var(--n-radius-lg)}

/* 3. the old uppercase button. sentence case reads faster at 13px. */
.btn{font:700 13px/1 var(--sans);letter-spacing:0;text-transform:none;padding:11px 16px;
  background:var(--n-sheen-dark),var(--n-ink);border-color:var(--n-ink);transition:box-shadow .18s,background .18s}
.btn:hover{box-shadow:var(--n-glow)}
.btn.ghost{background:var(--n-sheen-quiet);color:var(--n-ink);border-color:var(--n-line)}
.btn.ghost:hover{border-color:var(--n-brand);box-shadow:var(--n-glow-sm)}
.btn.small{font-size:12px;padding:6px 10px}

/* the lowest grey in the old sheet fails contrast on white */
:root{--muted:#5C666E;--label:#6E7880}

/* ─────────────────────── access + motion ─────────────────────── */

/* replaced by the two-ring rule in §Screens 4, below */
.n-rail nav a:focus-visible,.n-group-head:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .n-skeleton i{background:#EEF1F1}
}

/* the light rig is decoration. drop it when the user asks for less. */
@media (prefers-reduced-transparency:reduce){
  .n-lit::before,.n-lit::after,.n-rail::before,.n-rail::after{display:none}
}

@media (max-width:980px){
  .n-rail{width:100%;flex:1 1 auto}
  .n-row{grid-template-columns:minmax(0,1fr) 134px;row-gap:var(--s1)}
  .n-row .s{grid-column:1/-1}
}

/* ───────────────── the client's light ─────────────────
   §Screens 2. The same four sources and the same geometry as .n-lit, with the
   bounce in the client's colour instead of our turquoise. Two properties do it:
   --brand-deep is the ground, darkened until white type is comfortable on it,
   and --brand-lift is the same colour raised, standing in for the turquoise.
   Nothing else on the client's page borrows our accent. */
.n-lit-brand{position:relative;overflow:hidden;background:var(--brand-deep,var(--n-navy))}
.n-lit-brand>*{position:relative;z-index:1}
.n-lit-brand::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 260% at 4% -90%, rgba(255,255,255,.34), rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 78%),
    radial-gradient(48% 260% at 99% 180%, var(--brand-lift-strong,rgba(255,255,255,.42)), var(--brand-lift-soft,rgba(255,255,255,.12)) 46%, rgba(255,255,255,0) 80%),
    linear-gradient(100deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 34%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.30) 100%);
}
.n-lit-brand::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.10) 45%, var(--brand-lift-edge,rgba(255,255,255,.30)) 100%);
}
@media (prefers-reduced-transparency:reduce){
  .n-lit-brand::before,.n-lit-brand::after{display:none}
}

/* ───────────────── dates ─────────────────
   The native control stays: it knows the locale, it is keyboard-accessible
   already, and it is the field a form submits. What changes is how it sits —
   the same rest, focus and error as every other field, and an indicator that
   reads as the caret on a pull-down rather than a browser default. The OS
   calendar popup is the browser's and is left alone. */
input[type=date],input[type=month],input[type=time],input[type=datetime-local],input.datein{
  width:100%;font:400 14.5px/1.5 var(--sans);color:var(--n-ink);background:#fff;
  border:1px solid var(--n-line);border-radius:var(--n-radius);padding:10px 12px;outline:none;
  transition:border-color .18s,box-shadow .18s;font-variant-numeric:tabular-nums}
input[type=date]:hover,input[type=month]:hover,input.datein:hover{border-color:var(--n-line-strong)}
input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,
input[type=datetime-local]:focus,input.datein:focus{border-color:var(--n-brand);box-shadow:var(--n-focus)}
/* A date inside a legacy .field block is borderless like every input beside it:
   there the band carries the focus, and a date that grew its own box would be
   the only thing in the form wearing one. It gets the spec treatment when the
   block becomes an .n-field. */
input[type=date]:disabled,input.datein:disabled{background:var(--n-page);color:var(--n-faint)}
.n-field.bad input[type=date],input[type=date].bad,input.datein.bad{
  border-color:var(--n-bad);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
/* a date already gone by, where the hub marks one */
input[type=date].over,input[type=date].late{border-color:var(--n-bad-line);color:var(--n-bad-ink)}
/* the indicator sits where a caret sits, and takes the accent like one */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input.datein::-webkit-calendar-picker-indicator{
  width:13px;height:13px;margin-left:8px;padding:0;cursor:pointer;opacity:.75;
  transition:opacity .15s,filter .15s;
  /* tinted to --n-brand: a turquoise caret, not a grey browser glyph */
  filter:invert(64%) sepia(45%) saturate(559%) hue-rotate(128deg) brightness(92%) contrast(88%)}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=date]:focus::-webkit-calendar-picker-indicator,
input.datein:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type=date]::-webkit-datetime-edit{padding:0}
input[type=date]::-webkit-inner-spin-button{display:none}
/* inline dates inside a table row stay compact, same language */
input[type=date].inline{padding:5px 8px;font-size:13px;width:auto}

/* ───────────────── the stage tracker ─────────────────
   Shared by the client's portal and the project page. One sentence, a bar of
   however many stages there are, and the full set behind a disclosure. */
.p-track{margin-top:var(--s3);display:flex;flex-direction:column;gap:10px}
.p-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.p-line .of{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--n-faint);white-space:nowrap}
.p-line .at{font:700 15.5px/1.3 var(--sans);color:var(--n-ink)}
.p-line .since{font-size:13px;color:var(--n-muted)}
.p-line.you .of,.p-line.you .at,.p-line.you .since{color:var(--n-warn-ink)}
.p-line.done .of{color:var(--n-good)}
.p-line .more{margin-left:auto;font-size:13px;color:var(--brand-deep,var(--n-brand-ink));background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
.p-line .more:hover{text-decoration:underline}
.p-bar{display:flex;gap:2px;height:6px}
.p-bar i{flex:1;background:var(--n-hair)}
.p-bar i:first-child{border-radius:3px 0 0 3px}
.p-bar i:last-child{border-radius:0 3px 3px 0}
.p-bar i.done{background:var(--brand-deep,var(--n-navy))}
.p-bar i.now{background:var(--brand-lift,var(--n-brand))}
.p-bar i.now.you{background:var(--n-warn)}
.p-next{font-size:13px;color:var(--n-muted)}
.p-all{margin:0;padding:0;list-style:none;border-top:1px solid var(--n-hair-soft)}
.p-all li{display:flex;gap:var(--s2);padding:7px 0;border-bottom:1px solid var(--n-hair-soft);font-size:13.5px;color:var(--n-faint)}
.p-all li b{flex:1;font-weight:400}
.p-all li small{font-variant-numeric:tabular-nums}
.p-all li.done{color:var(--n-body)}
.p-all li.done b{font-weight:700;color:var(--n-ink)}
.p-all li.you{color:var(--n-warn-ink)}
.p-all li.you b{font-weight:700}

/* ───────────────── three levels ─────────────────
   Panel, section, content. A panel wears the lit band; a section wears a pale
   strip; content is white. Never a second lit band inside a panel — two navy
   bands a few pixels apart is the failure this whole redesign exists to
   remove. §Screens 3. */
.n-head{display:flex;align-items:center;gap:14px;padding:var(--s2) var(--s3)}
.n-head .key{width:3px;height:18px;border-radius:2px;flex:none;background:var(--n-brand);box-shadow:0 0 10px rgba(61,193,182,.6)}
.n-head .nm{flex:1;min-width:0;font:800 14px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.n-head .r{font-size:13.5px;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:12px}
.n-head .r button,.n-head .r a{color:rgba(255,255,255,.92);background:none;border:0;padding:0;cursor:pointer;font-size:13.5px}
.n-head .r button:hover,.n-head .r a:hover{color:#fff;text-decoration:underline}

.n-sec{padding:20px var(--s3);border-top:1px solid var(--n-hair)}
.n-sec:first-of-type{border-top:0}
.n-sec>.strip{margin:-20px calc(var(--s3) * -1) 0;padding:11px var(--s3);background:var(--n-strip);
  border-bottom:1px solid var(--n-strip-line);display:flex;align-items:center;gap:10px;
  font:800 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n-ink)}
.n-sec>.strip .act{margin-left:auto;font:700 12px/1 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--n-brand-ink);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.n-sec>.strip .act:hover{text-decoration:underline}
.n-sec.warn>.strip{background:var(--n-strip-warm);border-bottom-color:var(--n-strip-warm-line)}
.n-sec>.sub{margin:12px 0 0;font-size:13px;color:var(--n-muted)}
.n-sec>.sub .gap{color:var(--n-warn-ink);font-weight:700}
.n-sec>.body{margin-top:12px}
/* an add-form opens in place under the strip, never sits there waiting */
.n-sec>form.open-form{margin:12px 0 0;padding:14px;background:var(--n-page);border:1px solid var(--n-hair);border-radius:var(--n-radius)}

/* ───────────────── undo ─────────────────
   Every destructive or outbound action is reversible, and says so where it will
   not be missed. Bottom left, clear of the notice toast bottom right. The bar
   draining along the bottom edge is the countdown: the affordance, not
   decoration. §Screens 4. */
.n-undos{position:fixed;left:20px;bottom:20px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 40px))}
.n-undo{position:relative;overflow:hidden;border-radius:8px;box-shadow:var(--n-lift-3);
  display:flex;align-items:center;gap:12px;padding:13px 16px 15px;color:#fff;
  animation:n-undo-in .22s ease both}
.n-undo .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--n-good);box-shadow:0 0 10px rgba(47,158,98,.7)}
.n-undo .dot.warn{background:var(--n-warn);box-shadow:0 0 10px rgba(243,112,33,.7)}
.n-undo .dot.bad{background:var(--n-bad);box-shadow:0 0 10px rgba(192,57,43,.7)}
.n-undo .said{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.n-undo .said b{display:block;font-weight:700}
.n-undo .said small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.7)}
.n-undo button.go{flex:none;background:none;border:0;padding:4px 2px;cursor:pointer;
  font:700 13px/1 var(--sans);color:var(--n-brand)}
.n-undo button.go:hover{color:#fff}
.n-undo .left{flex:none;font-size:12.5px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.n-undo .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--n-brand);
  transform-origin:left;animation:n-undo-drain linear forwards}
@keyframes n-undo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes n-undo-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  /* nothing slides and nothing drains: the seconds are said in words instead */
  .n-undo{animation:none}
  .n-undo .bar{display:none}
}

/* ───────────────── the expanded suggestion ─────────────────
   §Screens 4. The rows on The Line were designed; the open card was not. Body
   on a tint so each field reads as its own object, the next step lifted to
   second place because it is the only thing here with a deadline, and the
   completeness chips naming the gap instead of leaving it to be spotted. */
.i-card{border:1px solid var(--n-hair);border-radius:var(--n-radius-lg);overflow:hidden;background:#F8FAFA}
.i-card+.i-card{margin-top:var(--s2)}
.i-head{display:flex;align-items:center;gap:12px;padding:13px var(--s3);cursor:pointer}
.i-head .nm{flex:1;min-width:0;font:800 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.i-head .chev{color:var(--n-brand);font-size:12px}
.i-body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.i-card.shut .i-body{display:none}
.i-title{display:flex;align-items:flex-start;gap:var(--s3)}
.i-title h4{margin:0;flex:1;min-width:0;font:400 23px/1.25 var(--serif);color:var(--n-ink)}
.i-title .meta{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--n-muted)}
/* quality and stage are one fact, not two chips */
.i-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font:700 12px/1 var(--sans);background:var(--n-brand-wash);border:1px solid var(--n-brand-line);color:var(--n-brand-ink)}
.i-chip i{width:7px;height:7px;border-radius:50%;background:var(--n-brand-ink)}
.i-chip.quiet{background:#fff;border-color:var(--n-line);color:var(--n-muted)}
.i-chip.quiet i{background:var(--n-faint)}
/* the next step: the only thing on the card with a deadline */
.i-next{background:var(--n-warn-wash);border:1px solid var(--n-strip-warm-line);border-left:3px solid var(--n-warn);
  border-radius:var(--n-radius);padding:14px 16px}
.i-next .k{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--n-warn-ink)}
.i-next .what{margin-top:8px;font:700 15.5px/1.45 var(--sans);color:var(--n-ink)}
.i-next .who{margin-top:6px;font-size:13.5px;color:var(--n-muted)}
.i-next .acts{display:flex;gap:var(--s1);margin-top:12px;flex-wrap:wrap}
.i-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.i-box{background:#fff;border:1px solid var(--n-hair);border-radius:var(--n-radius);overflow:hidden}
.i-box>.k{padding:10px 16px;background:var(--n-strip);border-bottom:1px solid var(--n-strip-line);
  font:800 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n-ink)}
.i-box>.v{padding:14px 16px;font-size:15px;line-height:1.6;color:var(--n-body);white-space:pre-line}
.i-box.wide{grid-column:1/-1}
.i-box.wide>.v.quiet{color:var(--n-muted)}
/* the gaps name themselves rather than being spotted */
.i-needs{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px}
.i-need{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font:600 12.5px/1 var(--sans);background:var(--n-brand-wash-lo);border:1px solid var(--n-brand-line);color:var(--n-brand-ink)}
.i-need i{width:7px;height:7px;border-radius:50%;background:var(--n-brand-ink)}
.i-need.miss{background:var(--n-warn-wash);border-color:var(--n-strip-warm-line);color:var(--n-warn-ink);font-weight:700}
.i-need.miss i{background:none;box-shadow:inset 0 0 0 1.5px var(--n-warn-ink)}
.i-acts{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap;background:#fff;
  border:1px solid var(--n-hair);border-radius:var(--n-radius);padding:12px 16px}
.i-acts .push{margin-left:auto}
@media (max-width:820px){.i-fields{grid-template-columns:minmax(0,1fr)}.i-title{flex-direction:column}}

/* ───────────────── focus, and what moves ─────────────────
   §Screens 4. One rule, two grounds: a ring of the ground colour first, then
   the ring proper, so focus reads on white or on navy without the control
   appearing to thicken. Never outline:none without a replacement. */
:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(61,193,182,.5)}
/* a filled control on a coloured ground: pages opt in with .n-on-colour */
.n-btn.primary:focus-visible,.n-on-colour:focus-visible{
  box-shadow:0 0 0 1px #fff,0 0 0 3px rgba(4,22,47,.5)}
.n-btn.send:focus-visible,.n-btn.quiet:focus-visible,.n-btn.bare:focus-visible,
.n-rowbtn:focus-visible,.cmenu-btn:focus-visible,.n-select:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  box-shadow:0 0 0 2px rgba(61,193,182,.5)}
.n-btn.remove:focus-visible,.is-remove:focus-visible,.btn.danger:focus-visible{
  box-shadow:0 0 0 2px rgba(192,57,43,.45)}
/* on navy the ground ring is navy, so the white ring has something to sit on */
.n-rail a:focus-visible,.n-lit a:focus-visible,.n-lit button:focus-visible,
.n-head .r button:focus-visible,.i-head:focus-visible,.n-group-head:focus-visible,
.n-undo .go:focus-visible{box-shadow:0 0 0 1px #04162F,0 0 0 3px rgba(255,255,255,.7)}
/* a link's ring hugs its text: a block-level ring makes a link look like an input */
a:focus-visible{border-radius:3px;outline-offset:0}

/* A field and a button of the same weight are the same height. A field
   inheriting the page's 1.6 runs taller on identical padding, and mismatched
   heights side by side are most of what makes a form look unfinished. */
.n-btn,.n-field input,.n-field select,.n-field textarea,
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=date],select{line-height:1.35}

/* What moves: almost nothing, and nothing that has to move to be understood. */
.n-btn,.n-rowbtn,.n-chip,.n-seg button,.cmenu-btn,.n-select,.card,.n-row,
.n-pal-row,.n-group-head{transition-duration:120ms}
.n-sec>.body,.p-all,.i-body{transition:height 180ms ease}
.n-undo{animation-duration:140ms}
@media (prefers-reduced-motion:reduce){
  /* every duration to zero, and the light rig drops its glows */
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;
    transition-duration:0s!important;transition-delay:0s!important}
  .n-lit::before,.n-lit::after,.n-rail::before,.n-rail::after,
  .n-lit-brand::before,.n-lit-brand::after{display:none}
  .n-rail nav a.on,.n-seg .on,.n-group-head .key,.n-head .key,
  .n-dot,.n-presence,.n-undo .dot{box-shadow:none}
}

/* ───────────────── the date picker ─────────────────
   §Screens 4. The native input stays and keeps the value; this only reads and
   writes it. One value, one format, owned by the control the browser already
   gets right — which is what makes a timezone bug impossible, not unlikely. */
.n-date{position:relative}
.n-date input[type=date].n-date-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.n-date-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 16px;background:#fff;border:1px solid var(--n-line);border-radius:var(--n-radius);
  font:400 14.5px/1.35 var(--sans);color:var(--n-ink);cursor:pointer;text-align:left;
  transition:border-color 120ms,box-shadow 120ms}
.n-date-btn:hover{border-color:var(--n-brand)}
.n-date-btn .caret{color:var(--n-brand);font-size:11px;flex:none}
.n-date-btn.empty{color:var(--n-faint)}
.n-date-btn[aria-expanded=true]{border-color:var(--n-brand);box-shadow:var(--n-focus)}
/* fixed, not absolute: a dialog or a panel with its own scroll would clip it */
.n-cal2{position:fixed;z-index:1100;width:322px;background:#fff;
  border:1px solid var(--n-hair);border-radius:8px;overflow:hidden;box-shadow:var(--n-lift-2)}
.n-cal2 .hd{display:flex;align-items:center;gap:10px;padding:11px 14px}
.n-cal2 .hd b{flex:1;text-align:center;font:800 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.n-cal2 .hd button{background:none;border:0;color:var(--n-brand);font-size:15px;cursor:pointer;padding:3px 9px;border-radius:4px;line-height:1}
.n-cal2 .hd button:hover{color:#fff}
.n-cal2 .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:10px 12px 0}
.n-cal2 .dow span{text-align:center;font:800 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--n-faint)}
.n-cal2 .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:8px 12px 12px}
.n-cal2 .grid button{height:36px;border:0;background:none;border-radius:var(--n-radius);
  font:400 13.5px/1.35 var(--sans);color:var(--n-ink);cursor:pointer;font-variant-numeric:tabular-nums}
.n-cal2 .grid button:hover{background:rgba(61,193,182,.12)}
.n-cal2 .grid button.out{color:var(--n-faint);pointer-events:none}
.n-cal2 .grid button.today{box-shadow:inset 0 0 0 1px var(--n-brand);font-weight:700}
.n-cal2 .grid button.late{background:var(--n-bad-wash);box-shadow:inset 0 0 0 1px var(--n-bad-line);color:var(--n-bad-ink);font-weight:700}
.n-cal2 .grid button.off{color:var(--n-faint);text-decoration:line-through;pointer-events:none}
.n-cal2 .grid button[aria-selected=true]{background:var(--n-sheen-dark),var(--n-navy);color:#fff;font-weight:700}
.n-cal2 .ft{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--n-hair)}
.n-cal2 .ft button{background:none;border:0;padding:0;cursor:pointer;font:700 13px/1.35 var(--sans)}
.n-cal2 .ft .today-link{color:var(--n-brand-ink)}
.n-cal2 .ft .none{color:var(--n-muted);font-weight:400}
.n-cal2 .ft .said{margin-left:auto;font-size:12.5px;color:var(--n-muted)}

/* ───────────────── the command palette ─────────────────
   §Screens 4. Verbs first, because a verb cannot be reached any other way —
   navigation can always be clicked to. One query searches both. */
.n-pal-back{position:fixed;inset:0;z-index:1300;background:rgba(4,22,47,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:start center;padding:12vh 20px 20px}
.n-pal{width:min(640px,100%);background:#fff;border-radius:var(--n-radius-lg);overflow:hidden;
  box-shadow:var(--n-lift-4);display:flex;flex-direction:column;max-height:70vh}
.n-pal-q{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--n-hair)}
.n-pal-q .find{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--n-faint)}
.n-pal-q input{flex:1;min-width:0;border:0;outline:none;background:none;font:400 17px/1.35 var(--sans);color:var(--n-ink)}
.n-pal-q input::placeholder{color:var(--n-faint)}
.n-pal-list{overflow:auto;padding:8px 0}
.n-pal-g{padding:10px 20px 6px;font:800 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--n-faint)}
.n-pal-row{display:flex;align-items:baseline;gap:12px;width:100%;padding:10px 20px;border:0;background:none;
  cursor:pointer;text-align:left;font:400 15px/1.4 var(--sans);color:var(--n-ink);position:relative}
.n-pal-row .sq{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:0 2px 2px 0;background:var(--n-brand);transition:height 120ms}
.n-pal-row b{font-weight:700}
.n-pal-row .obj{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-pal-row .of{flex:none;font-size:12.5px;color:var(--n-muted)}
.n-pal-row[aria-selected=true]{background:rgba(61,193,182,.12)}
.n-pal-row[aria-selected=true] .sq{height:22px;box-shadow:0 0 10px rgba(61,193,182,.6)}
.n-pal-empty{padding:26px 20px;text-align:center;color:var(--n-muted);font-size:14px}
.n-pal-ft{display:flex;gap:18px;padding:11px 20px;border-top:1px solid var(--n-hair);
  font-size:12.5px;color:var(--n-faint);background:var(--n-page)}
.n-pal-ft kbd{font:600 11px/1 var(--sans);background:#fff;border:1px solid var(--n-line);
  border-radius:4px;padding:3px 5px;color:var(--n-body)}

/* ───────────────── capacity ─────────────────
   §Screens 4. The answer to "is the pipeline deliverable", which nothing in the
   hub asked before. A chart that only reports overbooking is a worry generator;
   one that names the movable items is a tool, which is what the last box is. */
.c-answer{font:400 17px/1.55 var(--serif);color:var(--n-ink);max-width:54em}
.c-answer b{font-weight:400;color:var(--n-warn-ink)}
.c-months{display:flex;flex-direction:column;gap:12px;margin-top:var(--s3)}
.c-month{display:grid;grid-template-columns:118px minmax(0,1fr) 130px;gap:var(--s2);align-items:center}
.c-month .m{font:700 13px/1.35 var(--sans);color:var(--n-ink)}
.c-month .m small{display:block;font-weight:400;font-size:12.5px;color:var(--n-muted)}
.c-bar{height:22px;border-radius:5px;background:var(--n-hair-soft);overflow:hidden;display:flex;
  box-shadow:inset 0 0 0 1px var(--n-hair)}
.c-bar i{display:block;height:100%}
.c-bar i.done{background:var(--n-brand-ink)}
.c-bar i.likely{background:repeating-linear-gradient(135deg,var(--n-brand-wash) 0 6px,var(--n-brand-line) 6px 12px)}
/* a collaborator day takes a day off us rather than adding one to the ceiling */
.c-bar i.collab{background:#DDE6E6;box-shadow:inset 1px 0 0 #C7D3D3}
.c-legend i.collab{background:#DDE6E6;box-shadow:inset 1px 0 0 #C7D3D3}
.c-month .m em{font-style:normal;color:var(--n-warn-ink);font-weight:700}
.c-month.over .c-bar{box-shadow:inset 0 0 0 1px var(--n-warn)}
.c-month .n{text-align:right;font-size:13px;color:var(--n-muted);font-variant-numeric:tabular-nums}
.c-month.over .n{color:var(--n-warn-ink);font-weight:700}
.c-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:var(--s3);font-size:13px;color:var(--n-muted)}
.c-legend span{display:inline-flex;align-items:center;gap:8px}
.c-legend i{width:16px;height:10px;border-radius:3px;display:block}
.c-legend i.done{background:var(--n-brand-ink)}
.c-legend i.likely{background:repeating-linear-gradient(135deg,var(--n-brand-wash) 0 6px,var(--n-brand-line) 6px 12px)}
.c-legend i.free{background:var(--n-hair-soft);box-shadow:inset 0 0 0 1px var(--n-hair)}
.c-do{margin-top:var(--s3);background:var(--n-warn-wash);border:1px solid var(--n-strip-warm-line);
  border-left:3px solid var(--n-warn);border-radius:var(--n-radius);padding:14px 16px}
.c-do b{display:block;font:700 14.5px/1.45 var(--sans);color:var(--n-warn-ink)}
.c-do p{margin:6px 0 0;font-size:13.5px;color:var(--n-body)}
.c-do .n-rowbtn{margin-top:12px}

/* the rail's Admin group, and the way out that left with the person menu */
.n-rail-admin{margin-top:var(--s3)}
.n-rail-admin nav{margin-top:8px;gap:2px}
.n-rail-admin nav a{font-size:13.5px;padding:7px 14px;color:rgba(255,255,255,.72)}
.n-rail-admin nav a:hover{color:#fff;background:rgba(255,255,255,.08);box-shadow:none}
.n-rail-out{display:block;margin-top:10px;padding:7px 14px;font-size:13.5px;color:rgba(255,255,255,.55);border:0}
.n-rail-out:hover{color:#fff}
[data-money="0"] .n-rail-admin nav a.money{display:none}

/* ---- 14a · the email kit as it is read ------------------------------------
   Prefixed k- per rule 11. The journey up front, then each email with its
   preview beside its copy buttons. k-ours and k-stands are team-only and the
   render never emits them in a client view. */
.k-journey{margin-top:var(--s3)}
.k-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--n-hair);border:1px solid var(--n-hair);border-radius:10px;overflow:hidden}
.k-step{display:flex;align-items:baseline;gap:var(--s2);background:#fff;padding:11px 14px}
.k-n{flex:none;width:22px;font:700 12px/1.4 var(--sans);color:var(--n-brand-ink,#0E6F68)}
.k-sw{min-width:0;display:flex;flex-direction:column;gap:2px}
.k-sw b{font-size:13.5px;font-weight:700;color:var(--n-ink);line-height:1.4}
.k-sw small{font-size:12.5px;color:var(--n-muted)}
.k-howto,.k-ours,.k-stands,.k-brand{margin-top:var(--s3)}
.k-ours{border-left:3px solid var(--n-navy)}
.k-stands{border-left:3px solid var(--n-brand)}
.k-standrow{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:6px}
.k-standrow>span{display:flex;flex-direction:column;gap:2px}
.k-standrow b{font-size:13.5px;color:var(--n-ink)}
.k-standrow small{font-size:12.5px;color:var(--n-muted)}
.k-note{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--n-muted)}
.k-note b{color:var(--n-navy)}
.k-label-emails{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s5) 0 var(--s2)}
.k-label-emails small{font-size:12.5px;color:var(--n-muted)}
.k-swatches{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:8px}
.k-sw2{display:flex;align-items:center;gap:8px}
.k-sw2 i{width:26px;height:26px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.k-sw2 b{font-size:12.5px;color:var(--n-ink)}
.k-sw2 small{font-size:11.5px;color:var(--n-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media (max-width:640px){.k-standrow{gap:var(--s3)}.k-label-emails{flex-direction:column;gap:2px}}

/* the brand's type on the Studio client page, named rather than stringified */
.sc-type{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.sc-typerow{display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.sc-typek{flex:none;min-width:74px;color:var(--n-muted)}
.sc-typev{color:var(--n-ink);font-weight:700}