/* HireSalt notices: one system for every notice in the product.
   Spec: .audit/notices_redesign/design_spec.md (sections 1-7).
   Hierarchy: L0 status < L1 note < L2 toast < L3 dialog; bell rows share .n-row.
   Severity is words plus, on L1 notes, a tinted box. No icons, pills or left borders.
   Every class is prefixed .n- so nothing here leaks into other components.
   Lanes append only inside their marked sections at the end of this file. */

:root{
  --n-ink:#1B1B1F; --n-ink-700:#000; --n-sec:#5C5C60; --n-muted:#73716E;
  --n-line:#C9C2C3; --n-hair:#E4DFE0; --n-field:#8F8A8B; --n-track:#D9D4D5;
  --n-sage:#DAE2DF; --n-wash:#EEF2F0; --n-hover:#F3F6F4; --n-disabled:#E8E4E5;
  --n-page:#ECECEC; --n-bg:#FBFBFB; --n-surface:#FFFFFF;
  --n-danger:#A8442D; --n-danger-700:#8F3825; --n-warning:#B5853A; --n-success:#5B9E7E; --n-rose:#CE7B91;
  /* Tinted pills: darker text on a light wash keeps small labels above 4.5:1. */
  --n-success-700:#3F7A60; --n-success-wash:#EAF4EE; --n-rose-700:#9C4D63; --n-rose-wash:#F7E9ED; --n-stone-wash:#F1EFED;
  /* Note tints (L1 boxes): attention is the warm yellow the banners used before 13 Oct 2026. */
  --n-attention-wash:#FEF3CD; --n-danger-wash:#FBEDE9;
  --n-ease-out:cubic-bezier(.16,1,.3,1);
  --n-ease-quart:cubic-bezier(.25,1,.5,1);
  --n-ease-in:cubic-bezier(.5,0,.75,0);
  --n-lift:0 1px 2px rgba(27,27,31,.06), 0 12px 28px -14px rgba(27,27,31,.22);
  --n-sheet:0 24px 48px -24px rgba(27,27,31,.30);
  --n-scrim:rgba(27,27,31,.32);
  --n-z-pop:50; --n-z-panel:55; --n-z-toast:60; --n-z-dialog:70; --n-z-tip:80;
  --n-sidebar-w:256px;
  --n-font:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n-display:'Fraunces', Georgia, serif;
  --n-num:'Space Grotesk', 'Inter Tight', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Shared helpers                                                      */
/* ------------------------------------------------------------------ */

.n-note, .n-note *, .n-toasts, .n-toast, .n-toast *, .n-dialog, .n-dialog *, .n-pop, .n-pop *,
.n-tip, .n-row, .n-row *, .n-progress, .n-progress *, .n-seg, .n-seg *, .n-tabs, .n-tabs *,
.n-act, .n-btn, .n-x, .n-input, .n-term, .n-empty, .n-empty *{ box-sizing:border-box; }
.n-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.n-num{ font-family:var(--n-num); font-variant-numeric:tabular-nums; font-weight:500; }

/* Focus: an ink ring replaces base.html's rose halo on every notice control.
   Two-class selectors so they outrank base.html's *:focus-visible. */
.n-act:focus-visible, .n-btn:focus-visible, .n-x:focus-visible, .n-term:focus-visible,
.n-seg__opt:focus-visible, .n-input:focus-visible, .n-tab:focus-visible,
.n-note :focus-visible, .n-toast :focus-visible, .n-dialog :focus-visible, .n-pop :focus-visible{
  outline:2px solid var(--n-ink); outline-offset:2px; box-shadow:none;
}
/* Fields: one ring. The border turns ink and a 1px ink outline sits flush against it
   (offset 0), so the two read as a single 2px line, never as a double box. */
.n-input:focus, .n-input:focus-visible,
.n-note .n-input:focus-visible, .n-toast .n-input:focus-visible, .n-dialog .n-input:focus-visible, .n-pop .n-input:focus-visible,
.n-note .ob-input:focus, .n-dialog .ob-input:focus, .n-pop .ob-input:focus,
.n-note .ob-input:focus-visible, .n-dialog .ob-input:focus-visible, .n-pop .ob-input:focus-visible{
  outline:1px solid var(--n-ink); outline-offset:0; border-color:var(--n-ink); box-shadow:none;
}
.n-row:focus-visible{ outline:2px solid var(--n-ink); outline-offset:-2px; box-shadow:none; }
.n-on-dark .n-act:focus-visible, .n-on-dark .n-x:focus-visible, .n-on-dark :focus-visible{ outline-color:#FBFBFB; }
/* Programmatic focus targets (tabindex=-1) never show a ring. */
.n-note__text:focus, .n-dialog__panel:focus, .n-toasts:focus{ outline:none; box-shadow:none; }

/* ------------------------------------------------------------------ */
/* Controls (section 1.5)                                              */
/* ------------------------------------------------------------------ */

/* Text action: the default way to act on a notice.
   inline-block (not flex): the label stays ONE text run, so the underline is drawn once,
   unbroken. The arrow span is inline-block, and text decoration never propagates into an
   atomic inline, so the arrow sits outside the underline. 11px of padding above and below
   a 22px line gives the 44px target; the matching negative margin keeps it out of the
   line box, so the action sits on the text baseline like a word. */
.n-act{
  display:inline-block; vertical-align:baseline; padding:11px 4px; margin:-11px -4px; line-height:22px;
  font-family:inherit; font-size:inherit; font-style:normal; font-weight:600; color:var(--n-ink);
  background:none; border:0; border-radius:2px; text-align:left;
  text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--n-line); text-decoration-skip-ink:auto; cursor:pointer; white-space:nowrap;
  transition:text-decoration-color 150ms var(--n-ease-quart), color 150ms var(--n-ease-quart);
  -webkit-tap-highlight-color:transparent;
}
.n-act--sec{ font-weight:500; color:var(--n-sec); text-decoration-color:transparent; }
.n-act__arrow{ display:inline-block; margin-left:.3em; text-decoration:none; }
.n-act[disabled], .n-act[aria-disabled='true']{ color:var(--n-muted); cursor:default; text-decoration-color:transparent; }
@media (hover:hover) and (pointer:fine){
  .n-act:hover{ text-decoration-color:var(--n-ink); }
  .n-act--sec:hover{ color:var(--n-ink); text-decoration-color:var(--n-line); }
  .n-act[disabled]:hover{ text-decoration-color:transparent; }
}

/* Solid button: at most one per notice. */
.n-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border:0; border-radius:6px;
  background:var(--n-ink); color:#FBFBFB; font:600 14px/20px var(--n-font);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color 150ms var(--n-ease-quart), transform 150ms var(--n-ease-quart);
  -webkit-tap-highlight-color:transparent;
}
.n-btn:active{ transform:translateY(1px); }
.n-btn--danger{ background:var(--n-danger); }
.n-btn[disabled], .n-btn[aria-disabled='true']{ background:var(--n-disabled); color:var(--n-muted); cursor:not-allowed; transform:none; }
@media (hover:hover) and (pointer:fine){
  .n-btn:hover{ background:var(--n-ink-700); }
  .n-btn--danger:hover{ background:var(--n-danger-700); }
  .n-btn[disabled]:hover{ background:var(--n-disabled); }
}
@media (pointer:coarse){ .n-btn{ height:44px; } }

/* Visible reason next to a disabled button. */
.n-reason{ font:400 14px/20px var(--n-font); color:var(--n-sec); }
/* Small footnote: white surfaces only (muted fails on #ECECEC). */
.n-foot{ font:400 13px/18px var(--n-font); color:var(--n-muted); margin:0; }

/* Close: a drawn cross, 44px target, no visible box. */
.n-x{
  position:relative; flex:none; width:44px; height:44px; padding:0; margin:0;
  background:none; border:0; border-radius:4px; cursor:pointer; color:var(--n-sec);
  -webkit-tap-highlight-color:transparent;
}
.n-x::before, .n-x::after{
  content:''; position:absolute; left:50%; top:50%; width:12px; height:1.25px; margin:-.625px 0 0 -6px;
  background:currentColor; border-radius:1px; transition:background-color 150ms var(--n-ease-quart);
}
.n-x::before{ transform:rotate(45deg); }
.n-x::after{ transform:rotate(-45deg); }
@media (hover:hover) and (pointer:fine){ .n-x:hover{ color:var(--n-ink); } }
.n-on-dark .n-x{ color:#C9C2C3; }

/* Field: the onboarding input, usable outside .ob. */
.n-input{
  display:block; width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--n-field); border-radius:6px;
  background:var(--n-surface); color:var(--n-ink); font:400 16px/24px var(--n-font);
  transition:border-color 150ms var(--n-ease-quart);
}
.n-input::placeholder{ color:var(--n-muted); opacity:1; }
.n-input:focus{ border-color:var(--n-ink); }
.n-input[aria-invalid='true']{ border-color:var(--n-danger); }
textarea.n-input{ resize:vertical; min-height:88px; }

/* Segmented answers: one tap submits (section 7.2 / 8.3). */
.n-seg{ display:flex; flex-wrap:wrap; align-items:stretch; margin:0 0 0 -14px; padding:0; }
.n-seg__opt{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px; margin:0;
  background:none; border:0; border-radius:4px; position:relative;
  font:500 14px/20px var(--n-font); color:var(--n-ink); cursor:pointer; white-space:nowrap;
  transition:background-color 150ms var(--n-ease-quart);
  -webkit-tap-highlight-color:transparent;
}
.n-seg__opt + .n-seg__opt::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--n-hair);
}
.n-seg__opt[disabled]{ color:var(--n-muted); cursor:default; }
@media (hover:hover) and (pointer:fine){ .n-seg__opt:hover{ background:var(--n-sage); } .n-seg__opt[disabled]:hover{ background:none; } }
@media (max-width:359px){
  .n-seg{ flex-direction:column; margin-left:0; border-top:1px solid var(--n-hair); }
  .n-seg__opt{ padding:0; border-bottom:1px solid var(--n-hair); border-radius:0; }
  .n-seg__opt + .n-seg__opt::before{ display:none; }
}

/* Answer resolve and other in-place swaps: 120ms crossfade. */
.n-fade{ transition:opacity 120ms var(--n-ease-quart); }
.n-fade.is-out{ opacity:0; }

/* Height reveal for client-inserted notes: grid rows 0fr -> 1fr. */
.n-reveal{ display:grid; grid-template-rows:1fr; transition:grid-template-rows 200ms var(--n-ease-quart); }
.n-reveal > *{ min-height:0; overflow:hidden; }
.n-reveal.is-closed{ grid-template-rows:0fr; }
.n-reveal > * > .n-note{ animation:n-note-in 240ms var(--n-ease-out) both; }
.n-reveal.is-closing > * > .n-note{ animation:none; opacity:0; transition:opacity 120ms var(--n-ease-in); }
@keyframes n-note-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------------ */
/* L0 status word (section 6.1)                                        */
/* ------------------------------------------------------------------ */

.n-status{ display:inline-flex; align-items:center; gap:6px; font:500 13px/18px var(--n-font); color:var(--n-ink); white-space:nowrap; }
.n-status__mark{ flex:none; width:8px; height:2px; border-radius:1px; background:var(--n-line); }
.n-status--success .n-status__mark{ background:var(--n-success); }
.n-status--warning .n-status__mark{ background:var(--n-warning); }
.n-status--danger{ color:var(--n-danger); }
.n-status--danger .n-status__mark{ background:var(--n-danger); }
.n-status--info{ color:var(--n-sec); }
.n-status--info .n-status__mark{ background:var(--n-sec); }
.n-status--neutral{ color:var(--n-sec); }
.n-status--neutral .n-status__mark{ background:var(--n-line); }

/* ------------------------------------------------------------------ */
/* L0 progress (section 6.3)                                           */
/* ------------------------------------------------------------------ */

.n-progress{ font-family:var(--n-font); }
.n-progress__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 10px; }
.n-progress__label{ font:600 15px/22px var(--n-font); color:var(--n-ink); }
.n-progress__count{ font:500 14px/20px var(--n-num); font-variant-numeric:tabular-nums; color:var(--n-ink); white-space:nowrap; }
.n-progress__track{ position:relative; height:2px; border-radius:1px; background:var(--n-track); overflow:hidden; }
.n-progress__fill{
  position:absolute; inset:0; background:var(--n-ink); border-radius:1px;
  transform:scaleX(var(--n-p, 0)); transform-origin:left center;
  transition:transform 400ms var(--n-ease-out);
}
.n-progress__note{ margin:10px 0 0; font:400 14px/20px var(--n-font); color:var(--n-sec); }
.n-progress--error .n-progress__label{ color:var(--n-danger); }
.n-progress--error .n-progress__fill{ background:var(--n-danger); }

/* ------------------------------------------------------------------ */
/* L1 inline note (section 2)                                          */
/* ------------------------------------------------------------------ */

/* One container spec everywhere: a tinted, rounded box with a 1px border, the text 12px
   above and below and 16px in from each side. The tint says the tone: warm yellow for
   attention, a soft red for problems, the sage wash for information and questions. Every
   tint keeps secondary text above 5.6:1 and danger text above 5:1 (WCAG AA). */
.n-note{
  --n-tint:var(--n-wash);
  background:var(--n-tint); border:1px solid var(--n-line); border-radius:8px;
  padding:12px 16px; margin:0;
  font:400 14px/22px var(--n-font); color:var(--n-sec);
}
.n-note--neutral{ --n-tint:var(--n-wash); }
.n-note--attention{ --n-tint:var(--n-attention-wash); }
.n-note--critical{ --n-tint:var(--n-danger-wash); }
.n-note--ask{ --n-tint:var(--n-wash); }
@media print{
  /* Paper: the border keeps the box, the tint and the on-screen actions drop. */
  .n-note{ background:none; border-color:var(--n-field); break-inside:avoid; }
  .n-note__acts{ display:none; }
}
/* Muted text fails AA on the tints; inside a note it steps up to secondary. */
.n-note .n-foot{ color:var(--n-sec); }
/* Two notes in a row are two boxes, 8px apart. */
.n-note + .n-note{ margin-top:8px; }
.n-note__in{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; row-gap:4px; align-items:baseline; }
.n-note__text{ margin:0; max-width:68ch; text-wrap:pretty; }
.n-note__lead{ font-weight:600; color:var(--n-ink); }
.n-note__solo{ color:var(--n-ink); }
.n-note--critical .n-note__lead{ color:var(--n-danger); }
/* A one-sentence problem is one line at 500: the colour, not a bold sentence, says error. */
.n-note--critical .n-note__solo, .n-note--attention .n-note__solo{ font-weight:500; }
.n-note--critical .n-note__solo{ color:var(--n-danger); }
.n-note__acts{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; column-gap:20px; row-gap:0; }
/* The 44px action box sits centred on the text's first line. */
.n-note__acts .n-act, .n-note__acts .n-seg{ margin-top:-11px; margin-bottom:-11px; }
.n-note__acts .n-btn{ margin-top:-9px; margin-bottom:-9px; }
.n-note__acts .n-seg{ margin-left:0; }
/* Dismiss on a note (session-only notes such as static flashes): the drawn cross, centred
   on the first line of text, its 44px box hanging into the gutter. */
.n-note__acts .n-x{ align-self:flex-start; margin:-11px -14px -11px -8px; }
@media (max-width:639px){
  .n-note__in{ grid-template-columns:minmax(0,1fr); }
  .n-note__acts{ justify-content:flex-start; column-gap:16px; row-gap:8px; margin-top:4px; }
  .n-note__acts .n-act, .n-note__acts .n-seg, .n-note__acts .n-btn{ margin-top:0; margin-bottom:0; }
  .n-note__acts .n-seg{ margin-left:-14px; }
  /* Phone: the dismiss stays top-right, beside the text, never on its own row. */
  .n-note__in:has(> .n-note__acts > .n-x){ grid-template-columns:minmax(0,1fr) 32px; }
  .n-note__in:has(> .n-note__acts > .n-x) > .n-note__acts{ display:contents; }
  .n-note__in:has(> .n-note__acts > .n-x) > .n-note__acts > :not(.n-x){ grid-column:1; justify-self:start; margin-top:0; }
  .n-note__in:has(> .n-note__acts > .n-x) > .n-note__acts > .n-x{ grid-column:2; grid-row:1; justify-self:end; margin:-11px -12px -11px 0; }
}

/* Ruled list inside a note (bulk upload failures, skipped files). */
.n-note__list{ list-style:none; margin:10px 0 0; padding:0; grid-column:1 / -1; }
.n-note__list li{
  display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); column-gap:16px; align-items:baseline;
  min-height:40px; padding:10px 0; border-top:1px solid var(--n-hair); font:400 14px/20px var(--n-font);
}
.n-note__name{ color:var(--n-ink); font-weight:500; overflow-wrap:anywhere; max-width:40ch; }
.n-note__reason{ color:var(--n-sec); }
.n-note__more{ grid-column:1 / -1; }
.n-note__more > summary{ list-style:none; }
.n-note__more > summary::-webkit-details-marker{ display:none; }
.n-note__more[open] > summary{ display:none; }
.n-note__more .n-note__list{ margin-top:0; }
/* A list that can run long (rejected upload files): about eight rows, then it scrolls. */
.n-note__list--scroll{ max-height:320px; overflow-y:auto; overscroll-behavior:contain; }
.n-note__list--scroll:focus-visible{ outline:2px solid var(--n-ink); outline-offset:2px; }
@media (max-width:479px){
  .n-note__list li{ grid-template-columns:minmax(0,1fr); row-gap:2px; }
  .n-note__name{ max-width:none; }
}

/* ------------------------------------------------------------------ */
/* L2 toast (section 3)                                                */
/* ------------------------------------------------------------------ */

.n-toasts{
  position:fixed; z-index:var(--n-z-toast); bottom:24px; left:calc(var(--n-sidebar-w) + 24px);
  width:min(440px, calc(100vw - 32px)); display:flex; flex-direction:column; align-items:stretch; gap:8px;
  pointer-events:none; margin:0; padding:0;
}
.n-toasts > *{ pointer-events:auto; }
@media (max-width:1023px){ .n-toasts{ left:24px; } }
@media (max-width:639px){
  .n-toasts{ left:12px; right:12px; width:auto; bottom:calc(12px + env(safe-area-inset-bottom)); }
}
/* Docked: the bell panel or the feedback popover is open against the sidebar edge.
   Desktop: the toast column steps right of it, so a toast never covers its controls.
   Below desktop the popover owns the bottom-left corner, so toasts move to the top of
   the content, above any sheet (an error must stay visible while the sheet is open). */
@media (min-width:1024px){
  .n-docked .n-toasts{
    left:calc(var(--n-sidebar-w) + var(--n-dock, 400px) + 24px);
    width:min(440px, calc(100vw - var(--n-sidebar-w) - var(--n-dock, 400px) - 48px));
  }
}
@media (max-width:1023px){
  .n-docked-top .n-toasts{ top:calc(var(--n-header-h, 65px) + 12px); bottom:auto; z-index:calc(var(--n-z-dialog) + 1); flex-direction:column-reverse; }
}

/* One surface, one border. Every toast wears the same hairline frame; severity lives only
   in the words: the lead is ink 600, or danger 600 for an error. No tone frame, no top
   rule, no icon, tint or accent strip. */
.n-toast{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:'text acts x';
  align-items:center; column-gap:12px; min-height:52px; padding:4px 4px 4px 16px;
  background:var(--n-surface); border:1px solid var(--n-line); border-radius:6px;
  box-shadow:var(--n-lift);
  font:400 14px/20px var(--n-font); color:var(--n-sec);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
  animation:n-toast-in 240ms var(--n-ease-out) both;
  transition:transform 240ms var(--n-ease-out), opacity 160ms var(--n-ease-in);
  overflow:hidden;
}
.n-toast__text{
  grid-area:text; margin:8px 0; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  user-select:text; -webkit-user-select:text;
}
/* A file name inside the lead takes the lead's colour (danger for an error). */
.n-toast__lead .n-toast__file{ color:inherit; }
/* Every toast is one line: what happened, then the one action. */
.n-toast__lead{ font-weight:600; color:var(--n-ink); }
.n-toast__solo{ font-weight:500; color:var(--n-ink); }
.n-toast--critical .n-toast__lead, .n-toast--critical .n-toast__solo{ color:var(--n-danger); }
.n-toast__file{ white-space:nowrap; color:var(--n-ink); }
.n-toast__acts{ grid-area:acts; display:flex; align-items:center; gap:20px; }
.n-toast__acts .n-act{ font-size:14px; }
.n-toast .n-x{ grid-area:x; }
.n-toast__clock{
  position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--n-ink);
  transform-origin:left center; animation:n-clock var(--n-clock, 8000ms) linear forwards;
}
.n-toast.is-paused .n-toast__clock{ animation-play-state:paused; }
.n-toast.is-leaving{ opacity:0; transform:translateY(4px); pointer-events:none; }
.n-toast.is-dragging{ transition:none; }
.n-toast.is-flung{ transition:transform 180ms var(--n-ease-in), opacity 180ms var(--n-ease-in); }
.n-toast.is-returning{ transition:transform 220ms var(--n-ease-quart), opacity 220ms var(--n-ease-quart); }
@keyframes n-toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes n-clock{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@media (max-width:479px){
  .n-toast{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'text x' 'acts acts'; row-gap:0; }
  .n-toast__acts{ padding:8px 0 12px; margin-top:0; }
  /* With an action, the close button spans both rows: the first row is only as tall as the
     line and the action sits right under it, with no blank band between them. */
  .n-toast:has(> .n-toast__acts){ grid-template-areas:'text x' 'acts x'; }
  .n-toast:has(> .n-toast__acts) > .n-x{ align-self:start; margin-top:-4px; }
  .n-toast:has(> .n-toast__acts) > .n-toast__acts{ padding:0 0 8px; }
}

/* ------------------------------------------------------------------ */
/* L3 dialog (section 4)                                               */
/* ------------------------------------------------------------------ */

.n-dialog{
  position:fixed; inset:0; z-index:var(--n-z-dialog);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.n-dialog[hidden]{ display:none; }
.n-dialog__scrim{ position:absolute; inset:0; background:var(--n-scrim); animation:n-fade-in 200ms linear both; }
.n-dialog__panel{
  position:relative; width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  padding:28px 32px 24px; background:var(--n-surface); border-radius:8px; box-shadow:var(--n-sheet);
  font:400 15px/22px var(--n-font); color:var(--n-sec); overscroll-behavior:contain;
  animation:n-dialog-in 220ms var(--n-ease-out) both;
}
.n-dialog--sm .n-dialog__panel{ width:min(440px, calc(100vw - 32px)); }
.n-dialog--lg .n-dialog__panel{ width:min(680px, calc(100vw - 32px)); }
.n-dialog.is-closing .n-dialog__scrim{ animation:none; opacity:0; transition:opacity 140ms var(--n-ease-in); }
.n-dialog.is-closing .n-dialog__panel{ animation:none; opacity:0; transform:translateY(8px); transition:opacity 140ms var(--n-ease-in), transform 140ms var(--n-ease-in); }
.n-dialog__head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:16px;
  padding:0 0 16px; margin:0 0 4px; border-bottom:1px solid var(--n-ink);
}
.n-dialog__title{
  margin:0; font-family:var(--n-display); font-weight:400; font-size:24px; line-height:30px;
  letter-spacing:-0.01em; color:var(--n-ink); text-wrap:balance;
}
.n-dialog__head .n-x{ margin:-9px -14px -9px 0; }
.n-dialog__body{ margin:16px 0 0; max-width:52ch; text-wrap:pretty; }
.n-dialog__body:has(> .n-dialog__rows){ max-width:none; }
.n-dialog__body p{ margin:0 0 12px; }
.n-dialog__body p:last-child{ margin-bottom:0; }
.n-dialog__rows{ margin:0; padding:0; font:400 14px/20px var(--n-font); }
.n-dialog__row{
  display:grid; grid-template-columns:minmax(120px,40%) minmax(0,1fr); column-gap:16px; align-items:baseline;
  min-height:40px; padding:10px 0; border-top:1px solid var(--n-hair);
}
.n-dialog__row:first-child{ border-top:0; }
.n-dialog__row dt{ color:var(--n-sec); margin:0; }
.n-dialog__row dd{ color:var(--n-ink); font-weight:500; margin:0; }
.n-dialog__perm{ margin:0; padding:12px 0 0; border-top:1px solid var(--n-hair); font:400 14px/20px var(--n-font); color:var(--n-sec); }
.n-dialog__rows + .n-dialog__perm{ margin-top:0; }
.n-dialog__perm strong{ font-weight:600; color:var(--n-danger); }
.n-dialog__field{ margin:16px 0 0; }
.n-dialog__field label{ display:block; margin:0 0 6px; font:500 14px/20px var(--n-font); color:var(--n-ink); }
.n-dialog__acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:16px; margin:24px 0 0; }
.n-dialog__acts .n-reason{ margin-right:auto; }
@keyframes n-dialog-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes n-sheet-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes n-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:639px){
  .n-dialog{ align-items:flex-end; padding:0; }
  .n-dialog__panel, .n-dialog--sm .n-dialog__panel, .n-dialog--lg .n-dialog__panel{
    width:100%; max-height:calc(100vh - 24px); border-radius:12px 12px 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));
    animation:n-sheet-in 280ms var(--n-ease-out) both;
  }
  .n-dialog.is-closing .n-dialog__panel{ transform:translateY(24px); transition:opacity 160ms var(--n-ease-in), transform 160ms var(--n-ease-in); }
  .n-dialog__title{ font-size:22px; line-height:28px; }
  .n-dialog__row{ grid-template-columns:minmax(0,1fr); row-gap:2px; }
  .n-dialog__acts{ flex-direction:column-reverse; align-items:stretch; gap:4px; }
  .n-dialog__acts .n-btn{ height:48px; width:100%; }
  .n-dialog__acts .n-act{ display:block; text-align:center; padding:13px 4px; margin:0; }
  .n-dialog__acts .n-reason{ margin:0; text-align:center; }
}

/* ------------------------------------------------------------------ */
/* Popover, tooltip, term, in-place confirm (section 5)               */
/* ------------------------------------------------------------------ */

.n-pop{
  position:absolute; z-index:var(--n-z-pop); width:300px; max-width:calc(100vw - 32px); padding:16px;
  background:var(--n-surface); border:1px solid var(--n-line); border-radius:6px; box-shadow:var(--n-lift);
  font:400 14px/20px var(--n-font); color:var(--n-sec); text-align:left;
  animation:n-pop-in 160ms var(--n-ease-out) both;
}
.n-pop[hidden]{ display:none; }
.n-pop--wide{ width:360px; }
.n-pop.is-closing{ animation:none; opacity:0; transition:opacity 120ms var(--n-ease-in); }
.n-pop__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:8px; }
.n-pop__head .n-x{ margin:-12px -12px -12px 0; }
.n-pop__title{ margin:0 0 4px; font:600 15px/22px var(--n-font); color:var(--n-ink); }
.n-pop__body{ margin:0; }
.n-pop__meta{ font:500 13px/18px var(--n-num); font-variant-numeric:tabular-nums; color:var(--n-sec); }
.n-pop__acts{ display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:12px 0 -4px; }
@keyframes n-pop-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (max-width:639px){
  .n-pop--sheet{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; z-index:var(--n-z-dialog);
    border:0; border-radius:12px 12px 0 0; box-shadow:var(--n-sheet);
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));
    animation:n-sheet-in 280ms var(--n-ease-out) both;
  }
}

/* Term: a real button whose label carries a tooltip. */
.n-term-wrap{ position:relative; display:inline-flex; vertical-align:baseline; }
.n-term{
  display:inline-flex; align-items:center; min-height:44px; padding:0; margin:-12px 0; border:0; background:none;
  font:inherit; color:inherit; cursor:help;
  text-decoration:underline dotted 1px; text-decoration-color:var(--n-sec); text-underline-offset:4px;
  -webkit-tap-highlight-color:transparent;
}
.n-tip{
  position:absolute; z-index:var(--n-z-tip); left:0; top:calc(100% - 6px); width:max-content; max-width:260px;
  padding:6px 8px; border-radius:4px; background:var(--n-ink); color:#FBFBFB;
  font:400 13px/18px var(--n-font); text-align:left; white-space:normal; text-transform:none; letter-spacing:0;
  opacity:0; visibility:hidden; transform:translateY(2px); pointer-events:none;
  transition:opacity 100ms var(--n-ease-quart), transform 100ms var(--n-ease-quart), visibility 0s linear 100ms;
}
/* Invisible bridge across the 6px gap so the pointer can move onto the tip (WCAG 1.4.13). */
.n-tip::before{ content:''; position:absolute; left:0; right:0; top:-6px; height:6px; }
.n-tip--up{ top:auto; bottom:calc(100% - 6px); }
.n-tip--up::before{ top:auto; bottom:-6px; }
.n-tip--end{ left:auto; right:0; }
.n-term-wrap:hover .n-tip{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity 120ms var(--n-ease-quart) 350ms, transform 120ms var(--n-ease-quart) 350ms, visibility 0s linear 350ms;
}
.n-term-wrap:focus-within .n-tip, .n-term-wrap.is-open .n-tip{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity 120ms var(--n-ease-quart), transform 120ms var(--n-ease-quart), visibility 0s;
}
.n-term-wrap.is-suppressed .n-tip{ opacity:0; visibility:hidden; pointer-events:none; transition:none; }
@media (hover:none){ .n-term-wrap:hover:not(.is-open) .n-tip{ opacity:0; visibility:hidden; } }

/* In-place confirm: the control swaps to one line of question + actions. */
.n-confirm{ display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:16px; row-gap:0; font:400 14px/20px var(--n-font); color:var(--n-sec); }
.n-confirm__q{ margin:0; color:var(--n-ink); }
.n-confirm__q strong{ font-weight:600; }

/* ------------------------------------------------------------------ */
/* Bell rows and tabs, shared by the panel and the page (section 7)    */
/* ------------------------------------------------------------------ */

.n-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:start;
  min-height:64px; padding:12px 24px; border-top:1px solid var(--n-hair);
  color:inherit; text-decoration:none; background:transparent;
  transition:background-color 150ms var(--n-ease-quart);
}
a.n-row{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){ a.n-row:hover{ background:var(--n-hover); } }
a.n-row:focus-visible{ background:var(--n-hover); }
.n-row__main{ min-width:0; }
/* One line: what happened. A long file name is already shortened in the middle. */
.n-row__title{
  display:block; margin:0; font:500 14px/20px var(--n-font); color:var(--n-sec);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.n-row.is-unread .n-row__title{ font-weight:600; color:var(--n-ink); }
/* At most one line under the title; the title says what happened. */
.n-row__msg{
  display:block; margin:2px 0 0; font:400 14px/20px var(--n-font); color:var(--n-sec);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.n-row__meta{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; margin:6px 0 0; font:400 13px/18px var(--n-font); color:var(--n-sec); }
.n-row__time{ font-family:var(--n-num); font-variant-numeric:tabular-nums; font-weight:500; }
.n-row__go{ font:600 13px/18px var(--n-font); color:var(--n-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--n-line); transition:text-decoration-color 150ms var(--n-ease-quart); }
@media (hover:hover) and (pointer:fine){ a.n-row:hover .n-row__go{ text-decoration-color:var(--n-ink); } }
.n-unread{ display:inline-block; flex:none; width:6px; height:6px; background:var(--n-ink); border-radius:0; }
.n-row > .n-unread{ margin-top:7px; }
.n-row--read-swap{ transition:opacity 200ms var(--n-ease-quart); }

/* Group heading inside a list. */
.n-group{ margin:0; padding:16px 24px 8px; font:500 14px/20px var(--n-font); color:var(--n-sec); }

/* Text tabs with one sliding 2px ink underline. */
.n-tabs{ position:relative; display:flex; gap:24px; }
.n-tab{
  display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none;
  font:500 15px/22px var(--n-font); color:var(--n-sec); cursor:pointer;
  transition:color 150ms var(--n-ease-quart);
}
.n-tab[aria-selected='true']{ font-weight:600; color:var(--n-ink); }
@media (hover:hover) and (pointer:fine){ .n-tab:hover{ color:var(--n-ink); } }
/* 1px wide, scaled to the selected tab: only transform animates. Set --n-tab-x (px) and --n-tab-s (unitless width). */
.n-tabs__bar{
  position:absolute; left:0; bottom:0; height:2px; width:1px; background:var(--n-ink); transform-origin:left center;
  transform:translateX(var(--n-tab-x, 0)) scaleX(var(--n-tab-s, 0)); transition:transform 240ms var(--n-ease-out);
}
.n-tabs__bar.is-instant{ transition:none; }

/* Empty state: one sentence, no illustration. */
.n-empty{ padding:24px; }
.n-empty__title{ margin:0; font:400 18px/24px var(--n-display); color:var(--n-ink); }
.n-empty__body{ margin:4px 0 0; font:400 14px/20px var(--n-font); color:var(--n-sec); max-width:44ch; }

/* ------------------------------------------------------------------ */
/* Reduced motion and forced colours (section 12)                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .n-toast, .n-dialog__scrim, .n-dialog__panel, .n-pop, .n-reveal > * > .n-note{ animation:n-fade-in 120ms linear both; }
  .n-dialog.is-closing .n-dialog__panel, .n-toast.is-leaving{ transform:none; }
  .n-toast, .n-toast.is-flung, .n-toast.is-returning{ transition:opacity 120ms linear; }
  .n-toast__clock{ display:none; }
  .n-reveal, .n-progress__fill, .n-tabs__bar, .n-fade, .n-tip{ transition:none; }
  .n-term-wrap:hover .n-tip, .n-term-wrap:focus-within .n-tip{ transition:none; transform:none; }
  .n-btn:active{ transform:none; }
}
@media (forced-colors:active){
  .n-toast{ border-top:2px solid CanvasText; }
  .n-note--attention, .n-note--critical, .n-note--ask{ border-width:2px; }
  .n-status__mark, .n-unread, .n-progress__fill, .n-toast__clock{ background:CanvasText; forced-color-adjust:none; }
  .n-tip{ border:1px solid CanvasText; }
}

/* == questions == */
/* Optional questions (spec .audit/questions_redesign/design_spec.md section 2): one quiet
   line, a step lighter than an ask note. A 1px rule above, no wash, no icon, no corner x.
   The question on the left, plain-text answers on the right; on a phone the answers drop
   to the next line. Behaviour: static/js/questions.js (nAsk). */
.n-q-wrap{ margin:16px 0; }
.n-q-wrap--card{ margin:12px 0 0; }
/* The reveal clips only while it closes, so focus rings are never cut at rest. */
.n-q-wrap.n-reveal > *{ overflow:visible; }
.n-q-wrap.n-reveal.is-closing > *, .n-q-wrap.n-reveal.is-closed > *{ overflow:hidden; }
.n-q-wrap.is-closing .n-q{ opacity:0; transition:opacity 120ms var(--n-ease-in); }
.n-q, .n-q *{ box-sizing:border-box; }
.n-q{
  border-top:1px solid var(--n-line); padding:10px 0 2px; margin:0; background:none;
  font:400 15px/22px var(--n-font); color:var(--n-sec);
}
.n-q--quiet{ border-top-color:var(--n-hair); padding-top:8px; }
/* The line and its acknowledgement share one cell, so they crossfade in place. */
.n-q__body{ display:grid; }
.n-q__body > *{ grid-area:1 / 1; min-width:0; }
.n-q__in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; row-gap:0; align-items:baseline;
  transition:opacity 120ms var(--n-ease-quart);
}
.n-q.is-done .n-q__in, .n-q__in.is-out{ opacity:0; visibility:hidden; transition:opacity 120ms var(--n-ease-quart), visibility 0s linear 120ms; }
.n-q__q{ margin:0; max-width:60ch; font:500 15px/22px var(--n-font); color:var(--n-ink); text-wrap:pretty; }
.n-q__q:focus{ outline:none; box-shadow:none; }
.n-q--quiet .n-q__q{ font-size:14px; line-height:20px; color:var(--n-sec); }
.n-q__step{ display:inline-block; margin-right:12px; font:500 13px/18px var(--n-num); font-variant-numeric:tabular-nums; color:var(--n-sec); white-space:nowrap; }
.n-q__now{ display:inline-block; margin-left:8px; font:500 14px/20px var(--n-num); font-variant-numeric:tabular-nums; color:var(--n-sec); white-space:nowrap; }
/* Answers: the 44px boxes hang above and below the text line, so the row stays one line tall
   and every answer sits on the question's baseline. */
.n-q__acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:-11px -12px -11px 0; }
.n-q .n-seg{ margin:0; flex-wrap:wrap; }
.n-q .n-seg__opt{
  justify-content:center; min-width:44px; padding:0 12px; border-radius:2px;
  font:500 14px/20px var(--n-font); color:var(--n-ink);
  text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--n-line); text-decoration-skip-ink:auto;
  transition:text-decoration-color 150ms var(--n-ease-quart), color 150ms var(--n-ease-quart);
}
.n-q .n-seg__opt + .n-seg__opt::before{ display:none; }
.n-q .n-seg__opt.is-num{ font-family:var(--n-num); font-variant-numeric:tabular-nums; }
.n-q .n-seg__opt.is-chosen{ background:none; font-weight:600; text-decoration-color:var(--n-ink); }
.n-q .n-seg__opt[disabled]{ color:var(--n-sec); cursor:default; }
.n-q .n-seg__opt.is-chosen[disabled]{ color:var(--n-ink); }
.n-q .n-act{ font-size:14px; line-height:22px; padding-left:12px; padding-right:12px; margin:0; min-height:44px; min-width:44px; text-align:center; }
/* Skip is the way out, not a fourth answer: lighter weight, no underline, set apart. */
.n-q .n-act.n-q__skip{ margin-left:16px; font-weight:400; color:var(--n-sec); }
@media (hover:hover) and (pointer:fine){
  .n-q .n-seg__opt:hover{ background:none; text-decoration-color:var(--n-ink); }
  .n-q .n-seg__opt[disabled]:hover{ text-decoration-color:var(--n-line); }
  .n-q .n-seg__opt.is-chosen[disabled]:hover{ text-decoration-color:var(--n-ink); }
}
.n-q :focus-visible{ outline:2px solid var(--n-ink); outline-offset:2px; box-shadow:none; }
/* The ack shares the answers' cell: it never takes a click, even while invisible. */
.n-q__ack{ align-self:start; font:500 14px/22px var(--n-font); color:var(--n-sec); opacity:0; pointer-events:none; transition:opacity 120ms var(--n-ease-quart) 120ms; }
.n-q.is-done .n-q__ack{ opacity:1; }
.n-q__err{ margin:0; font:500 14px/20px var(--n-font); color:var(--n-danger); }
.n-q__err:empty{ display:none; }
.n-q__err:not(:empty){ grid-column:1 / -1; margin-top:2px; }
@media (max-width:639px){
  .n-q__in{ grid-template-columns:minmax(0,1fr); }
  .n-q__acts{ justify-content:flex-start; margin:-9px 0 -11px -12px; }
  .n-q .n-act.n-q__skip{ margin-left:8px; }
}
@media (max-width:359px){
  .n-q__acts{ margin-left:0; flex-direction:column; align-items:stretch; }
  .n-q .n-seg{ border-top:0; }
  .n-q .n-seg__opt{ justify-content:flex-start; padding:0; }
  .n-q .n-act.n-q__skip{ margin-left:0; padding-left:0; text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  .n-q__in, .n-q__ack, .n-q-wrap.is-closing .n-q, .n-q .n-seg__opt{ transition:none; }
}
@media (forced-colors:active){ .n-q{ border-top-width:2px; } }

/* == lane: global == */

/* == lane: jobs == */

/* == lane: forms == */