/* ═══ navigation ═══════════════════════════════════════════════════════════
   The top bar and the mega panel beneath it.

   Two behaviours make it feel like one surface rather than a menu that opens
   and closes:

     1. HEIGHT animates, content does not slide. The panel measures its content
        and animates to that height, so moving from a three-item group to a
        six-item group grows the panel instead of replacing it.
     2. CONTENT cross-fades on swap. Moving along the bar with the panel open
        never closes it — the grid fades out, the new grid fades in, the height
        eases. A panel that closed and reopened under a moving cursor is the
        flicker that makes web menus feel cheap.

   The scrim is not decoration either: it blurs the page behind so the eye has
   nowhere else to go while the panel is open.                                */

/* Before there is anything to navigate.
   Setup, sign-in and the company chooser are all reached without a session, and
   a top bar on them is worse than empty — it advertises sections that cannot be
   opened and sits there reading "Signing in…" for as long as somebody takes to
   fill in a form. Found in a screenshot of the first-run screen. */
body.bare .bar,
body.bare .panel,
body.bare .scrim{display:none}
body.bare .wrap{padding-top:0}

.bar{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:4px; padding:0 22px;
  /* TaskFlow's deep rendition, with a whisper of indigo drifting through it —
     a solid band, but one with a direction. Translucency is a trick for
     blending into a light page; a deep bar IS the thing behind it. */
  background:linear-gradient(100deg, var(--bar-bg),
    color-mix(in srgb, var(--brand-1) 42%, var(--bar-bg)) 55%, var(--bar-bg));
  border-bottom:1px solid var(--bar-line);
}
header .mark{display:flex;align-items:center;gap:10px;margin-right:22px}
.markglyph{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:var(--accent);color:var(--on-accent);
}
.markglyph svg{display:block}
.markname{
  display:flex;align-items:baseline;gap:7px;
  font-size:15px;font-weight:600;letter-spacing:-.022em;color:var(--bar-ink);
}
/* ── the company switcher ─────────────────────────────────────────────── */
.companychip{
  display:flex;align-items:center;gap:7px;margin-right:14px;padding:6px 11px;
  border-radius:99px;font-size:12.5px;font-weight:550;color:var(--bar-ink);
  background:var(--bar-wash);white-space:nowrap;max-width:220px;
  transition:background var(--fast) var(--ease);
}
.companychip:hover{background:var(--bar-line)}
.companychip svg{flex:none;opacity:.7}
.companychip span{overflow:hidden;text-overflow:ellipsis}
/* The company's own logo, when payslip branding has one. On the deep bar a
   dark mark would vanish, so it sits on a small white plate — the same
   treatment a payslip gives it against paper. */
.companychip .cologo{
  flex:none;width:20px;height:20px;border-radius:5px;background:var(--knob);
  object-fit:contain;padding:1.5px;
}
.companymenu{
  position:fixed;top:calc(var(--nav-h) - 6px);z-index:70;min-width:240px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);padding:5px;
}
.companyitem{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;padding:9px 11px;border-radius:7px;
  font-size:13px;color:var(--ink);
}
.companyitem:hover{background:var(--accent-wash);color:var(--accent-ink)}
.companytick{color:var(--accent);font-weight:650}
.companysep{height:1px;background:var(--line);margin:5px 4px}
@media (max-width:900px){ .companychip{display:none} }

.navlist{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden}
.navitem.more{color:var(--bar-ink-2);font-weight:550}
.navitem{
  position:relative; padding:7px 13px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:500; color:var(--bar-ink-2); white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
  /* Some items are <a> now (a single-destination group is a link, not a
     panel) — one display keeps buttons and anchors on one baseline. */
  display:inline-block; text-decoration:none;
}
/* Every item in the bar reads as a control, not only the one you are on.
 *
 * The first version left them all at `--ink-2` and lifted the current one to
 * `--ink`. On screen that is a row of grey words with one darker word in it —
 * the darker one looks like the button and the rest look like labels, so people
 * stop believing the others are clickable. The report was "only a few of the
 * buttons are highlighted", which is precisely what it was doing.
 *
 * Three states now, each visibly different from the other two: resting is
 * full-strength ink; hover and open get a wash; current gets the wash and the
 * underline, which is the only signal that survives while the pointer is
 * elsewhere — and the pointer is elsewhere most of the time. */
.navitem:hover,
.navitem:focus-visible,
.navitem[aria-expanded="true"]{background:var(--bar-wash);color:var(--bar-ink)}
.navitem[aria-current="page"]{background:var(--bar-wash);color:var(--bar-active-ink)}
.navitem::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background:var(--bar-underline);
  transform:scaleX(0); transform-origin:center;
  transition:transform .22s var(--ease);
}
.navitem[aria-current="page"]::after{transform:scaleX(1)}

.baractions{display:flex;align-items:center;gap:3px;margin-left:auto}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--bar-ink-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.iconbtn:hover,.iconbtn:focus-visible{background:var(--bar-wash);color:var(--bar-ink)}
/* The build stamp. Quiet enough to ignore, present enough to check — it only
   has to be readable on the day somebody asks "is this the new one?". */
.build{
  font-size:11px;color:var(--bar-ink-3);font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:99px;white-space:nowrap;
  background:var(--bar-wash);
  cursor:default;
}
@media (max-width:900px){ .build{display:none} }

/* The same stamp for the pre-session screens, where the bar is hidden. Fixed
   to the corner and outside #outlet, so no screen can wipe it. */
.barebuild{
  display:none;
  position:fixed;right:14px;bottom:12px;z-index:70;
  font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--surface) 88%, transparent);
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:default;
}
body.bare .barebuild{display:block}

header .who{
  display:flex;align-items:center;gap:8px;padding:4px 10px 4px 5px;border-radius:99px;
  font-size:13px;font-weight:500;color:var(--bar-ink-2);
  border:1px solid transparent;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
header .who:hover, header .who.open{
  background:var(--bar-wash);
  border-color:color-mix(in srgb, var(--bar-ink-2) 22%, transparent);
  color:var(--bar-ink, var(--bar-ink-2));
}
.avatar{
  width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--violet, var(--accent)));
  color:var(--on-accent);font-size:11px;font-weight:600;letter-spacing:.2px;
  overflow:hidden;flex:none;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--on-accent) 35%, transparent);
}
/* A small caret, drawn not typed — it flips while the menu is open. */
.whocaret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;flex:none;
  transition:transform var(--fast) var(--ease);
}
header .who.open .whocaret{transform:rotate(180deg)}

/* ── the account menu: a dropdown under the chip, not a modal ──────────── */
.whomenu{
  position:absolute; top:calc(var(--nav-h) - 4px); right:14px; z-index:80;
  min-width:284px; padding:8px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 24px 54px -16px color-mix(in srgb, var(--ink) 34%, transparent),
             0 4px 14px -6px color-mix(in srgb, var(--ink) 18%, transparent);
  animation:whomenu-in .16s var(--ease);
}
@keyframes whomenu-in{
  from{opacity:0; transform:translateY(-8px) scale(.98)}
  to{opacity:1; transform:none}
}
/* The head wears a soft accent wash — the card's identity, not another row. */
.wmhead{
  display:flex; align-items:center; gap:13px; padding:13px 14px;
  background:linear-gradient(135deg,
    var(--accent-wash), color-mix(in srgb, var(--violet-wash) 70%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius:calc(var(--r) - 5px); margin-bottom:8px;
}
.wmavatar{
  width:46px; height:46px; border-radius:99px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--violet, var(--accent)));
  color:var(--on-accent); font-size:16px; font-weight:600; overflow:hidden; flex:none;
  box-shadow:0 0 0 2.5px var(--surface),
             0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
.wmavatar img{width:100%; height:100%; object-fit:cover}
.wmid{min-width:0}
.wmid b{display:block; font-size:13.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wmsub{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* The role/company line under the identity — quiet, small caps, factual. */
.wmrole{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.6px;
  text-transform:uppercase; color:var(--accent-ink, var(--accent));
  margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wmitem{
  display:block; width:100%; text-align:left; padding:9px 12px;
  border:0; background:none; color:var(--ink); font:inherit; font-size:13px;
  font-weight:500; border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.wmitem:hover{background:var(--accent-wash); color:var(--accent-ink, var(--ink))}
.wmitem:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.wmitem .wmsub{margin-top:2px; font-weight:400}
.wmitem:hover .wmsub{color:inherit; opacity:.75}
/* Signing out is an ending — it wears the critical tone at rest, his call:
   the one destructive act on this menu should read in red before the pointer
   finds it, not only after. */
.wmitem.wmout{color:var(--critical)}
.wmitem.wmout:hover{
  background:color-mix(in srgb, var(--critical) 10%, var(--surface));
  color:var(--critical);
}
.wmline{height:1px; background:var(--line); margin:7px 6px}
@media (prefers-reduced-motion:reduce){ .whomenu{animation:none} }

/* ── the panel ─────────────────────────────────────────────────────────── */
.panel{
  position:fixed; left:0; right:0; top:var(--nav-h); z-index:55;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-2);
  height:0; overflow:hidden;
  transition:height var(--slow) var(--ease);
}
/* Set while swapping groups, so the height jump is not animated on top of the
   cross-fade — two animations of the same box in opposite directions reads as
   a stutter. */
.panel.instant{transition:none}
.panelinner{padding:34px 22px 44px}
.panelgrid{
  /* Shares .wrap's max-width (layout.css) so the panel's columns line up
     with the page beneath it. Change them together. */
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:minmax(240px,1.15fr) 1fr 1fr; gap:20px 44px;
  opacity:0; transform:translateY(-6px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.panelgrid.in{opacity:1;transform:none}

.colhead{
  font-size:11px;font-weight:650;color:var(--accent-ink);
  letter-spacing:.07em;text-transform:uppercase;margin:0 0 16px;
}

/* Every link in the panel is a HEADING, not a line of prose.
 *
 * The secondary column used to be 13px regular in `--ink-2`, beside a 22px 590
 * primary column. On screen that reads as one list of buttons and one paragraph
 * of grey text, so people stopped seeing Payslips and Tax declarations as
 * things they could press. They are the same kind of destination as the two
 * above them and now they look like it. */
.bigl{
  display:block;font-size:21px;line-height:1.28;font-weight:640;letter-spacing:-.026em;
  color:var(--ink);margin-bottom:6px;padding:9px 12px;border-radius:10px;
  margin-left:-12px;margin-right:-12px;
  transition:color .16s var(--ease), background .16s var(--ease);
}
.bigl:last-child{margin-bottom:0}
.bigl:hover{color:var(--accent-ink);background:var(--accent-wash)}
.bigl .sum{
  display:block;font-size:12.5px;font-weight:450;letter-spacing:-.005em;
  color:var(--ink-3);margin-top:4px;line-height:1.45;
}
.smalls{display:flex;flex-direction:column;gap:2px}
/* Six-plus quiet links stack taller than the whole primary column — his
   complaint: the options ran off the end of the panel. Two columns keep the
   panel a glance, not a scroll. */
.smalls.two{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.smalll{
  display:block;font-size:14.5px;font-weight:600;letter-spacing:-.014em;
  color:var(--ink);padding:9px 12px;border-radius:10px;
  margin-left:-12px;margin-right:-12px;
  transition:color .16s var(--ease), background .16s var(--ease);
}
.smalll:hover{color:var(--accent-ink);background:var(--accent-wash)}
.smalll span{
  display:block;font-size:12px;font-weight:450;color:var(--ink-3);
  margin-top:3px;line-height:1.45;letter-spacing:0;
}
.panelabout{
  font-size:13.5px;line-height:1.6;margin:0;max-width:34ch;color:var(--ink-2);
  padding-left:16px;border-left:2px solid var(--accent-wash);
}

.scrim{
  position:fixed; inset:var(--nav-h) 0 0; z-index:50;
  background:color-mix(in srgb, var(--plane) 72%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .34s var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}

@media (max-width:860px){
  .panelgrid{grid-template-columns:1fr;gap:26px}
  .navlist{overflow-x:auto;scrollbar-width:none}
  .navlist::-webkit-scrollbar{display:none}
}

/* ── the bell ──────────────────────────────────────────────────────────────
   The count means unread AND unresolved. See the note at the top of inbox.js:
   a number that includes things already handled is a number people stop
   reading, which is the only property it has.                               */
.bell{position:relative}
.bellcount{
  position:absolute;top:1px;right:0;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--critical);color:var(--on-accent);
  font-size:9.5px;font-weight:650;line-height:15px;text-align:center;
  box-shadow:0 0 0 2px var(--bar-bg);
}
.inbox{
  position:fixed;z-index:65;width:min(390px,calc(100vw - 20px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:inboxin var(--fast) var(--ease);
}
.inboxhead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-bottom:1px solid var(--line);font-size:13.5px;
}
.inboxlist{max-height:min(58vh,440px);overflow:auto}
.inboxrow{padding:11px 13px;border-bottom:1px solid var(--line-2);cursor:pointer}
.inboxrow:last-child{border-bottom:0}
.inboxrow:hover{background:var(--accent-wash)}
/* Unread carries the rail; overdue turns it red. Two facts, two channels —
   collapsing them would lose whichever one was drawn second. */
.inboxrow.unread{border-left:2px solid var(--accent);padding-left:11px}
.inboxrow.overdue{border-left-color:var(--critical)}
.inboxrow .ititle{font-size:13px;font-weight:560;color:var(--ink)}
.inboxrow .ibody{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.inboxrow .imeta{font-size:10.5px;color:var(--ink-4);margin-top:5px}
.inboxempty{padding:26px 18px;text-align:center}
.inboxempty b{display:block;font-size:13.5px;margin-bottom:6px}
.inboxempty span{font-size:12px;color:var(--ink-3);line-height:1.6}
.inboxfoot{padding:9px 13px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.inboxfoot .bad{color:var(--critical)}
@keyframes inboxin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── the narrow-screen drawer ──────────────────────────────────────────────
   Every group and every destination, not a shortened menu. A product that has
   six sections at half window width and ten at full width is two products.   */
.burger{display:none}
.drawerwrap{position:fixed;inset:0;z-index:75}
.drawerscrim{
  position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 34%,transparent);
  opacity:0;transition:opacity .22s var(--ease);
}
.drawerwrap.on .drawerscrim{opacity:1}
.drawer{
  position:absolute;inset:0 auto 0 0;width:min(330px,86vw);
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .24s var(--ease);
}
.drawerwrap.on .drawer{transform:none}
.drawerhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-bottom:1px solid var(--line);font-size:14px;
}
.drawerbody{overflow:auto;padding:6px 0 22px}
.dgroup{padding:12px 15px 4px;border-bottom:1px solid var(--line-2)}
.dgroup:last-child{border-bottom:0}
.dhead{font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
       color:var(--ink-4)}
.dtag{font-size:11.5px;color:var(--ink-3);margin:3px 0 7px;line-height:1.5}
.ditem{display:block;padding:8px 9px;border-radius:var(--r-sm);text-decoration:none;
       border-left:2px solid transparent}
.ditem:hover{background:var(--accent-wash)}
.ditem.on{background:var(--accent-wash);border-left-color:var(--accent)}
.ditem .dlabel{display:block;font-size:13.5px;font-weight:560;color:var(--ink)}
.ditem .dsum{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawerscrim{transition:none}
  .inbox{animation:none}
}

@media (max-width:860px){
  /* The bar keeps the mark, the actions and the burger. The inline nav goes —
     it is in the drawer, in full, rather than scrolled off the right. */
  .burger{display:inline-flex}
  .navlist{display:none}
}