/* HireSalt global notice chrome: bell, notification panel, notifications page,
   feedback door and the static flash region. Spec: .audit/notices_redesign/design_spec.md
   sections 3, 7 and 8. Tokens and shared primitives (.n-row, .n-act, .n-toast...) live in
   notices.css, which loads first; this file only places and shapes the chrome. */

/* ------------------------------------------------------------------ */
/* Bell                                                                */
/* ------------------------------------------------------------------ */

/* Sidebar item: the numeral is the only signal, led by one rose square. */
.n-bell--side{ min-height:44px; cursor:pointer; }
.n-bell__count{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:600 13px/18px var(--n-num); font-variant-numeric:tabular-nums; color:#FBFBFB;
}
.n-bell__mark{ flex:none; width:6px; height:6px; background:var(--n-rose); }

/* Sidebar controls on the dark gradient: a light ring replaces the rose halo. */
.n-bell--side:focus-visible, .n-door:focus-visible{ outline:2px solid #FBFBFB; outline-offset:2px; box-shadow:none; }
.n-door{ min-height:44px; cursor:pointer; }

/* Phone/tablet header bell: the same grammar as the sidebar item. The glyph, then
   the rose square and the numeral set beside it on the baseline, clear of the glyph. */
.n-bell--head{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-width:44px; height:44px; padding:0 11px; margin:-2px 0; border:0; border-radius:6px; background:none;
  color:var(--n-sec); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color 150ms var(--n-ease-quart), background-color 150ms var(--n-ease-quart);
}
.n-bell__glyph{ flex:none; width:22px; height:22px; }
.n-bell--head[aria-expanded='true']{ color:var(--n-ink); background:var(--n-hover); }
@media (hover:hover) and (pointer:fine){ .n-bell--head:hover{ color:var(--n-ink); } }
.n-bell--head:focus-visible{ outline:2px solid var(--n-ink); outline-offset:-2px; box-shadow:none; }
.n-bell__badge{
  display:inline-flex; align-items:center; gap:5px;
  font:600 13px/18px var(--n-font); font-variant-numeric:tabular-nums; color:var(--n-ink);
}
.n-bell__badge[x-cloak]{ display:none; }

/* ------------------------------------------------------------------ */
/* Panel                                                               */
/* ------------------------------------------------------------------ */

/* Desktop: a drawer pulled out of the sidebar edge, open on the right only. */
.n-panel{
  position:fixed; z-index:var(--n-z-panel); left:var(--n-sidebar-w); bottom:16px;
  width:400px; max-height:min(600px, calc(100vh - 32px));
  display:flex; flex-direction:column;
  background:var(--n-surface); border:1px solid var(--n-line); border-left:0; border-radius:0 6px 6px 0;
  box-shadow:var(--n-lift); font-family:var(--n-font); color:var(--n-sec);
}
.n-panel[hidden]{ display:none; }

.n-panel__head{
  flex:none; display:flex; align-items:center; gap:16px;
  min-height:77px; margin:0 12px; padding:20px 12px 12px; border-bottom:1px solid var(--n-ink);
}
.n-panel__title{
  flex:1; min-width:0; margin:0; font:400 20px/28px var(--n-display); letter-spacing:-0.01em; color:var(--n-ink);
}
.n-panel__title:focus{ outline:none; box-shadow:none; }
.n-panel__head .n-act{ font-size:14px; line-height:20px; }
.n-panel__x{ display:none; margin:-12px -14px -12px -8px; }

/* The last row ends a full row-gap above the footer rule, and a focused row scrolls clear of it. */
.n-panel__body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 0 24px; scroll-padding-bottom:24px;
  transition:opacity 120ms var(--n-ease-quart);
}
.n-panel__body.is-swapping{ opacity:0; }
.n-panel__loading{ margin:0; padding:16px 24px; font:400 14px/20px var(--n-font); color:var(--n-sec); }
.n-panel .n-empty{ padding:20px 24px 16px; }

/* "You're up to date" leads straight back into the work. */
.n-panel__clear{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:16px;
  padding:14px 24px 2px; font:400 14px/20px var(--n-font); color:var(--n-sec);
}
.n-panel__clear p{ margin:0; }
.n-panel__clear .n-act{ font-size:14px; }
.n-panel__back{ display:inline-block; max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

/* Rows: text sits 24px in, hairlines bleed 12px past it. */
.n-panel .n-row{ margin:0 12px; padding:12px; }
.n-panel .n-group{ padding:16px 24px 6px; }
.n-row__dot{ color:var(--n-line); }
/* "Mark read" on a linkless row: a text button that reads like the row's action label. */
button.n-row__mark, button.n-lrow__mark{
  appearance:none; background:none; border:0; border-radius:2px; cursor:pointer;
  padding:13px 4px; margin:-13px -4px; -webkit-tap-highlight-color:transparent;
}
button.n-row__mark:focus-visible, button.n-lrow__mark:focus-visible{ outline:2px solid var(--n-ink); outline-offset:-2px; box-shadow:none; }
@media (hover:hover) and (pointer:fine){ button.n-row__mark:hover, button.n-lrow__mark:hover{ text-decoration-color:var(--n-ink); } }
a.n-row:focus-visible{ outline:2px solid var(--n-ink); outline-offset:-2px; box-shadow:none; }

/* A question row: no wash (an optional question is quieter than a task). Its answers are
   plain words with a resting underline, the same as an in-page question (.n-q). */
.n-row--ask{ background:none; }
.n-row--ask .n-row__title{ display:block; white-space:normal; overflow:visible; overflow-wrap:break-word; }
.n-row__answer{ display:block; margin:2px 0 0; }
.n-row__answer .n-seg, .n-lrow__answer .n-seg{ margin-left:-12px; }
.n-seg__opt.is-chosen{ background:var(--n-sage); }
.n-row__answer .n-seg__opt, .n-lrow__answer .n-seg__opt{
  justify-content:center; min-width:44px; padding:0 12px; border-radius:2px;
  text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--n-line);
  transition:text-decoration-color 150ms var(--n-ease-quart);
}
.n-row__answer .n-seg__opt + .n-seg__opt::before, .n-lrow__answer .n-seg__opt + .n-seg__opt::before{ display:none; }
.n-row__answer .n-seg__opt.is-chosen, .n-lrow__answer .n-seg__opt.is-chosen{ background:none; font-weight:600; color:var(--n-ink); text-decoration-color:var(--n-ink); }
.n-row__answer .n-seg__opt[disabled], .n-lrow__answer .n-seg__opt[disabled]{ color:var(--n-sec); }
@media (hover:hover) and (pointer:fine){
  .n-row__answer .n-seg__opt:hover, .n-lrow__answer .n-seg__opt:hover{ background:none; text-decoration-color:var(--n-ink); }
}
.n-row__label{ display:block; margin:6px 0 0; font:500 14px/20px var(--n-font); color:var(--n-sec); }
.n-row__err{ display:block; margin:2px 0 0; font:400 14px/20px var(--n-font); color:var(--n-danger); }
.n-row__resolved{ display:block; margin:4px 0 0; }
.n-row__resolved .n-row__msg{ display:block; -webkit-line-clamp:unset; }
.n-row__follow{ display:block; }
.n-row__field{ display:flex; align-items:center; gap:16px; margin:8px 0 0; }
.n-row__field .n-input{ flex:1; min-width:0; min-height:40px; padding:8px 12px; font-size:16px; line-height:22px; }
.n-row--ask .n-row__meta{ margin-top:4px; }

.n-panel__foot{
  flex:none; display:flex; align-items:center; min-height:48px; margin:0 12px; padding:0 12px;
  border-top:1px solid var(--n-hair); text-decoration:none; border-radius:0 0 4px 4px;
}
.n-panel__foot .n-act{ font-size:14px; line-height:20px; }
.n-panel__foot:focus-visible{ outline:2px solid var(--n-ink); outline-offset:-2px; box-shadow:none; }
@media (hover:hover) and (pointer:fine){ .n-panel__foot:hover .n-act{ text-decoration-color:var(--n-ink); } }

/* Tablet: no sidebar, so the panel drops from the header bell. */
@media (max-width:1023px){
  .n-panel{
    left:auto; right:16px; bottom:auto; top:calc(var(--n-header-h, 65px) + 8px);
    max-height:min(600px, calc(100vh - var(--n-header-h, 65px) - 24px));
    border-left:1px solid var(--n-line); border-radius:6px;
  }
}
/* Phone: a full sheet under the header (modal; the store traps focus and locks scroll). */
@media (max-width:639px){
  .n-panel{
    inset:var(--n-header-h, 65px) 0 0 0; width:auto; max-height:none;
    border:0; border-top:1px solid var(--n-line); border-radius:0; box-shadow:none;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .n-panel__head{ min-height:64px; margin:0 4px; padding:12px 12px 8px; }
  .n-panel__x{ display:inline-block; }
  .n-panel .n-row{ margin:0 4px; }
  .n-panel .n-group, .n-panel__clear, .n-panel .n-empty, .n-panel__loading{ padding-left:16px; padding-right:16px; }
  .n-panel__foot{ margin:0 4px; }
}

/* Enter / leave (Alpine x-transition classes). Transform and opacity only. */
.n-panel-t-in{ transition:opacity 200ms var(--n-ease-out), transform 200ms var(--n-ease-out); }
.n-panel-t-out{ transition:opacity 140ms var(--n-ease-in), transform 140ms var(--n-ease-in); }
.n-panel-t-from{ opacity:0; transform:translateX(-8px); }
.n-panel-t-to{ opacity:1; transform:none; }
.n-fade-t-in{ transition:opacity 120ms var(--n-ease-quart); }
.n-fade-t-out{ transition:opacity 120ms var(--n-ease-in); }
.n-fade-t-from{ opacity:0; }
.n-fade-t-to{ opacity:1; }
@media (max-width:1023px){
  .n-panel-t-from{ transform:translateY(-4px); }
  .n-fb.n-panel-t-from{ transform:translateY(8px); }
}
@media (max-width:639px){
  .n-panel-t-in{ transition-duration:280ms; }
  .n-panel-t-out{ transition-duration:160ms; }
  .n-panel-t-from, .n-fb.n-panel-t-from{ transform:translateY(24px); }
}

/* ------------------------------------------------------------------ */
/* Feedback door                                                       */
/* ------------------------------------------------------------------ */

/* Same drawer language as the panel: pulled out of the sidebar edge. It never grows past
   the viewport; on a short screen or with large text the body scrolls inside it. */
.n-pop.n-fb{
  position:fixed; z-index:var(--n-z-panel); left:var(--n-sidebar-w); bottom:16px; top:auto;
  width:360px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto; overscroll-behavior:contain; padding:20px 24px 20px;
  border-left:0; border-radius:0 6px 6px 0; animation:none;
}
.n-fb .n-pop__head{ align-items:center; padding-bottom:12px; border-bottom:1px solid var(--n-ink); }
/* One overlay voice: the popover title is set like the panel title. */
.n-fb .n-pop__title{ margin:0; font:400 20px/28px var(--n-display); letter-spacing:-0.01em; color:var(--n-ink); }
.n-fb .n-pop__title:focus{ outline:none; box-shadow:none; }
/* Sent: one body line and its way out, on the same baseline. */
.n-fb__done{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:24px; padding:2px 0; }
.n-fb__done-text{ margin:0; font:400 15px/22px var(--n-font); color:var(--n-ink); }
.n-fb__done-text:focus{ outline:none; box-shadow:none; }
.n-fb .n-fb__text{ margin:12px 0 0; resize:none; min-height:96px; }
.n-fb__kinds{ display:flex; flex-wrap:wrap; column-gap:20px; margin:4px 0 0; }
.n-fb__kind{
  display:inline-flex; align-items:center; min-height:44px; padding:0; margin:0; border:0; background:none;
  font:500 14px/20px var(--n-font); color:var(--n-sec); cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent;
  transition:color 150ms var(--n-ease-quart), text-decoration-color 150ms var(--n-ease-quart);
  -webkit-tap-highlight-color:transparent;
}
.n-fb__kind[aria-checked='true']{ color:var(--n-ink); font-weight:600; text-decoration-color:var(--n-ink); }
@media (hover:hover) and (pointer:fine){ .n-fb__kind:hover{ color:var(--n-ink); } }
.n-fb__kind:focus-visible{ outline:2px solid var(--n-ink); outline-offset:2px; box-shadow:none; }
.n-fb .n-foot{ margin:2px 0 0; }
.n-fb__err{ margin-top:12px; }
.n-fb .n-pop__acts{ margin:16px 0 0; }
.n-fb .n-pop__acts .n-reason{ margin-right:auto; }
.n-fb-scrim{ position:fixed; inset:0; z-index:calc(var(--n-z-dialog) - 1); background:var(--n-scrim); }

@media (max-width:1023px){
  .n-pop.n-fb{ left:24px; bottom:24px; border-left:1px solid var(--n-line); border-radius:6px; }
}
@media (max-width:639px){
  .n-pop.n-fb{
    left:0; right:0; bottom:0; width:auto; max-width:none; z-index:var(--n-z-dialog);
    max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
    border:0; border-radius:12px 12px 0 0; box-shadow:var(--n-sheet);
    padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .n-fb .n-pop__acts{ flex-wrap:wrap; }
  .n-fb .n-pop__acts .n-btn{ height:48px; flex:1 1 100%; }
  .n-fb .n-pop__acts .n-reason{ flex:1 1 100%; margin:0 0 4px; }
}

/* ------------------------------------------------------------------ */
/* Static flash notes (no-JS / signed-out fallback)                    */
/* ------------------------------------------------------------------ */

/* The same tinted note box as everywhere else, on the grey page. */
.n-flash{ padding:0 16px; }
.n-flash:has(> .flash:not([hidden])){ padding-top:16px; padding-bottom:8px; }
.n-flash > .flash.n-note{ padding:12px 12px 12px 16px; max-width:1120px; }
.n-flash > .flash .n-note__in{ align-items:center; column-gap:24px; }
.n-flash > .flash .n-note__acts .n-x{ align-self:center; margin:-11px -8px; }
.n-flash > .flash .n-note__text{ font-size:15px; line-height:22px; }
.n-flash > .flash + .flash{ margin-top:8px; }
/* Signed out (no sidebar): centre the notes on the public pages' reading column
   (max-w-4xl less its 24px gutters), so they line up with the text below. */
.n-flash--public > .flash.n-note{ max-width:848px; margin-left:auto; margin-right:auto; }
/* Phone: the fix sits under the sentence on the text rhythm, its 44px box hanging into
   the padding instead of adding a blank band below it. */
@media (max-width:639px){ .n-flash > .flash.n-note .n-note__in > .n-note__acts > .n-act.n-act{ margin:-6px -4px -11px; } }
@media (min-width:640px){ .n-flash{ padding-left:24px; padding-right:24px; } .n-flash:has(> .flash:not([hidden])){ padding-top:24px; } }
@media (min-width:1024px){ .n-flash{ padding-left:32px; padding-right:32px; } }

/* ------------------------------------------------------------------ */
/* Notifications page                                                  */
/* ------------------------------------------------------------------ */

.n-page{ max-width:760px; padding:40px 16px 72px; font-family:var(--n-font); color:var(--n-sec); }
@media (min-width:640px){ .n-page{ padding:48px 32px 80px; } }
@media (min-width:1024px){ .n-page{ padding:64px 48px 96px; } }
.n-page__title{
  margin:0; font-family:var(--n-display); font-weight:400; font-size:clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  line-height:1.12; letter-spacing:-0.015em; color:var(--n-ink); text-wrap:balance;
}
.n-page__sub{ margin:8px 0 0; font:400 14px/20px var(--n-font); color:var(--n-sec); }
/* The count is part of the sentence: same face, size and colour, figures only made tabular. */
.n-page__sub .n-num{ font:inherit; color:inherit; font-variant-numeric:tabular-nums; }

.n-page__bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-top:32px; border-bottom:1px solid var(--n-ink);
}
.n-page__bar .n-tabs{ margin-bottom:-1px; }
.n-page__bar .n-tabs[hidden]{ display:none; }
.n-page__markall{ margin:0 0 0 auto; }
/* Sits on the same baseline as the tabs: the 44px box rests on the rule like they do. */
.n-page__markall .n-act{ font-size:14px; margin:0 -4px; }

.n-day__head{
  position:sticky; top:var(--n-sticky-top, 0); z-index:1; margin:0; padding:24px 0 8px;
  background:var(--n-page); font:500 14px/20px var(--n-font); letter-spacing:0; color:var(--n-sec);
}
.n-day:first-child .n-day__head{ padding-top:20px; }
@media (max-width:1023px){ .n-day__head{ top:var(--n-header-h, 65px); } }
.n-ledger__list{ list-style:none; margin:0; padding:0; }
.n-ledger__item[hidden], .n-day[hidden]{ display:none; }
.n-ledger__none{ margin:0; padding:20px 0; font:400 15px/22px var(--n-font); color:var(--n-sec); }
.n-ledger__none .n-act{ margin-left:8px; }

.n-lrow{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto; column-gap:24px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--n-hair);
  color:inherit; text-decoration:none;
  transition:background-color 150ms var(--n-ease-quart), box-shadow 150ms var(--n-ease-quart);
}
a.n-lrow{ cursor:pointer; }
/* Hover wash stays inside the column, edge to edge with the hairlines. */
@media (hover:hover) and (pointer:fine){
  a.n-lrow:hover{ background:var(--n-hover); }
  a.n-lrow:hover .n-lrow__go{ text-decoration-color:var(--n-ink); }
}
a.n-lrow:focus-visible{ outline:2px solid var(--n-ink); outline-offset:2px; box-shadow:none; background:var(--n-hover); }
.n-lrow__when{
  display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;
  font:500 13px/22px var(--n-num); font-variant-numeric:tabular-nums; color:var(--n-sec);
}
.n-lrow__when .n-unread{ visibility:hidden; transform:translateY(-2px); }
.n-lrow.is-unread .n-lrow__when{ color:var(--n-ink); }
.n-lrow.is-unread .n-lrow__when .n-unread{ visibility:visible; }
.n-lrow__text{ display:block; min-width:0; }
.n-lrow__title{ display:block; font:500 15px/22px var(--n-font); color:var(--n-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* A question keeps every word: it is answered in the row. */
.n-lrow--ask .n-lrow__title{ white-space:normal; overflow:visible; overflow-wrap:break-word; text-wrap:pretty; }
.n-lrow.is-unread .n-lrow__title{ font-weight:600; color:var(--n-ink); }
.n-lrow__msg{ display:block; margin-top:2px; font:400 14px/20px var(--n-font); color:var(--n-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n-lrow__go{
  justify-self:end; white-space:nowrap; font:600 14px/22px 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);
}
.n-lrow__go .n-act__arrow{ display:inline-block; margin-left:.3em; text-decoration:none; }
/* Survey rows: the action is a button that opens the survey. 44px target, row height unchanged. */
button.n-lrow__go{ appearance:none; background:none; border:0; padding:11px 0; margin:-11px 0; cursor:pointer; }
button.n-lrow__go:focus-visible{ outline:2px solid var(--n-ink); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ button.n-lrow__go:hover{ text-decoration-color:var(--n-ink); } }
@media (max-width:639px){
  .n-lrow{ grid-template-columns:52px minmax(0,1fr); column-gap:12px; }
  .n-lrow__go{ grid-column:2; justify-self:start; margin-top:6px; }
  button.n-lrow__go{ margin:-5px 0 -11px; }
}

.n-page__empty{ margin-top:32px; padding-top:24px; border-top:1px solid var(--n-ink); }
.n-page__empty-title{ margin:0; font:400 24px/30px var(--n-display); letter-spacing:-0.01em; color:var(--n-ink); }
.n-page__empty-body{ margin:6px 0 0; max-width:44ch; font:400 15px/22px var(--n-font); color:var(--n-sec); }
.n-page__empty-act{ margin:16px 0 0; font:400 15px/22px var(--n-font); }

/* Survey rows: asked and answered in the row, filed under Updates like any other row. */
.n-lrow--ask{ background:none; }
.n-lrow__answer{ display:block; margin:2px 0 0; }
.n-lrow__answer[hidden], .n-lrow__resolved[hidden], .n-lrow__err[hidden]{ display:none; }
.n-lrow__err{ display:block; margin:2px 0 0; font:400 14px/20px var(--n-font); color:var(--n-danger); }
.n-lrow__resolved{ display:block; margin:4px 0 0; animation:n-fade-in 120ms linear both; }
.n-lrow__resolved .n-row__field{ max-width:440px; }

@media (prefers-reduced-motion:reduce){
  .n-panel-t-from, .n-fb.n-panel-t-from{ transform:none; }
  .n-panel__body, .n-lrow, .n-bell--head{ transition:none; }
}
@media (forced-colors:active){
  .n-bell__mark, .n-unread{ forced-color-adjust:none; background:CanvasText; }
  .n-row--ask{ border:1px solid CanvasText; }
}