/* ═══ 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.

   ── THREE MOTIONS, AT A FRACTION OF THE DOOR'S (docs/70) ────────────────────
   The bar is a working surface somebody looks past forty times a day, not a
   door they arrive through once, so it moves the way the door does and far
   less:

     1. THE SURFACE. The door's liquid — the same three lights, the same three
        clocks, laid plainly over the bar's own gradient — at a fifth of the
        door's strength, because every word on the bar is measured at the
        liquid's brightest and a fifth is what the quietest of them allows.
        The lights travel half as far as the door's, so what any one point of
        the bar sees change is a tenth of the door's: what the brief asked.
     2. THE PILL. The current page's mark flows between items like a drop: its
        leading edge sets off first and runs a little past, the trailing edge
        follows 60 ms behind and settles onto the item. A hover previews the
        same move in a fainter pill and commits nothing.
     3. THE PANEL'S TOP EDGE. While the panel is open the bar's own lights reach
        --bar-spill into it, fading, so the bar and the panel read as one body.
        There is ONE set of lights; the panel is lit by the bar's.

   Reduced motion makes all three instant; the drawer at narrow widths gets
   none of them — a phone's bar is still.                                    */

/* 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 20px;
  /* 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);
}

/* ── the liquid (docs/70) ──────────────────────────────────────────────────
   Three lights over the bar's gradient: the indigo's own light, the cool
   note and the accent, as on the door, on the door's own clocks (--liquid-a,
   -b, -c: 24, 31 and 38 seconds a lap). Each is a circle turning a lap about
   a point outside its centre, so it travels an orbit and swells a little on
   the far side — half the door's orbit and half its swell.

   A fifth of the door's strength (11, 8 and 13 per cent against 56, 40 and
   64). The brief hoped for half; at half the bar's resting items were 4.06:1
   at the liquid's brightest, and the liquid is what gives way, never the
   words. api/tools/design_tokens.py composites every light at its peak or
   absent over every stop of the gradient, and under the chips and the pill,
   and holds each ink on the bar to AA there.

   Centred on the bar's lower edge, so the brightest of each light is where the
   bar meets the panel; the box is the bar's own height until the panel opens,
   and then --bar-spill taller, fading, and the panel's top edge is lit by the
   same three lights — one surface, not two kept in step. No blur: a radial
   light on a circle has no edge to bleed, and the walks' browser draws
   without a graphics card (docs/69 §3.4).

   While a panel is open the lights hold still, and go on from where they
   stopped when it shuts. Somebody choosing in the panel has nothing moving
   under the choice — and the page behind an open panel is blurred twice, by
   the scrim and by the panel, and a light moving anywhere on the screen
   makes the browser blur both again every frame: 9 to 12 frames a second in
   the walks' browser against 60 when still (docs/70 §4). */
.barliquid{
  position:absolute; left:0; right:0; top:0; z-index:-1;
  height:var(--nav-h); overflow:hidden; pointer-events:none;
  transition:height var(--slow) var(--ease);
}
.bar.panelopen .barliquid i{animation-play-state:paused}
.bar.panelopen .barliquid{
  height:calc(var(--nav-h) + var(--bar-spill));
  -webkit-mask-image:linear-gradient(to bottom, black calc(100% - var(--bar-spill)), transparent);
  mask-image:linear-gradient(to bottom, black calc(100% - var(--bar-spill)), transparent);
}
.barliquid i{position:absolute; top:var(--nav-h); aspect-ratio:1; translate:0 -50%}
.barliquid i:nth-child(1){
  left:-4%; width:34%;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--brand-light) 11%, transparent) 0%, transparent 100%);
  transform-origin:56% 57.5%;
  animation:bar-liquid-a var(--liquid-a) linear infinite;
}
.barliquid i:nth-child(2){
  left:66%; width:30%;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--brand-cool) 8%, transparent) 0%, transparent 100%);
  transform-origin:43% 39.5%;
  animation:bar-liquid-b var(--liquid-b) linear infinite;
}
.barliquid i:nth-child(3){
  left:30%; width:40%;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--brand-3) 13%, transparent) 0%, transparent 100%);
  transform-origin:43% 61.5%;
  animation:bar-liquid-c var(--liquid-c) linear infinite;
}
/* The door's laps (auth.css, door-liquid-*) with half the swell. */
@keyframes bar-liquid-a{25%{rotate:90deg; scale:1.03} 50%{rotate:180deg; scale:1.06} 75%{rotate:270deg; scale:1.03} to{rotate:360deg}}
@keyframes bar-liquid-b{25%{rotate:-90deg; scale:1.04} 50%{rotate:-180deg; scale:1.02} 75%{rotate:-270deg; scale:1.05} to{rotate:-360deg}}
@keyframes bar-liquid-c{25%{rotate:90deg; scale:.98} 50%{rotate:180deg; scale:1.04} 75%{rotate:270deg; scale:1.01} to{rotate:360deg}}
header .mark{display:flex;align-items:center;gap:8px;margin-right:20px}
.markglyph{
  width:26px;height:26px;border-radius:var(--r-sm);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:6px;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.015em;color:var(--bar-ink);
}

/* ── the company switcher ─────────────────────────────────────────────── */
.companychip{
  display:flex;align-items:center;gap:6px;margin-right:12px;padding:6px 12px;
  border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:500;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:var(--r-xs);background:var(--knob);
  object-fit:contain;padding:2px;
}
.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:4px;
}
.companyitem{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:8px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--ink);
}
.companyitem:hover{background:var(--accent-wash);color:var(--accent-ink)}
.companytick{color:var(--accent-ink);font-weight:600}
.companysep{height:1px;background:var(--line);margin:4px 4px}
@media (max-width:900px){ .companychip{display:none} }

.navlist{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden;position:relative}
.navitem.more{color:var(--bar-ink-2);font-weight:500}
.navitem{
  position:relative; padding:6px 12px; border-radius:var(--r-full);
  font-size:var(--fs-md); 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.
 *
 * Since docs/70 the washes are not the items' own. The current page's wash
 * and its line are ONE pill that flows from item to item (below); hover and
 * an open panel are a second, fainter pill that previews the same move. An
 * item keeps a wash of its own only for keyboard focus on something the pill
 * is not under — a group that focus opens has the fainter pill come to it. */
.navitem:hover,
.navitem[aria-expanded="true"]{color:var(--bar-ink)}
.navitem:focus-visible:not([aria-expanded="true"]){background:var(--bar-wash);color:var(--bar-ink)}
.navitem[aria-current="page"]{color:var(--bar-active-ink)}

/* ── the pill (docs/70) ────────────────────────────────────────────────────
   The current page's wash with its line along the foot, as one shape, moved
   by nav.js onto whichever item is current. It moves like a drop: the edge on
   the side it is going sets off first and runs a little past (--ease-drop),
   and the other edge follows --flow-lag behind — the pill stretches toward
   the item, then contracts onto it. 260 ms in all, which is --mid.

   Two edges, `left` and `right`, each with its own delay, and nav.js says
   which leads by the way it is going. The brief asked for `left` and `width`
   with width leading: a width can only stretch toward the destination by as
   much as the two items differ in width, and between two words of about the
   same length that is nothing — so it would have been a slide (docs/70 §2).

   The hover pill is the same shape at half the wash with a fainter line. It
   never commits: it goes back to the current item and fades as it arrives. */
.navpill{
  position:absolute; top:0; bottom:0; left:0; right:100%;
  border-radius:var(--r-full); background:var(--bar-wash);
  opacity:0; pointer-events:none;
  transition:
    left calc(var(--mid) - var(--flow-lag)) var(--ease-drop) var(--lag-left, 0s),
    right calc(var(--mid) - var(--flow-lag)) var(--ease-drop) var(--lag-right, 0s),
    opacity var(--fast) var(--ease);
}
.navpill::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  border-radius:var(--r-full); background:var(--bar-underline);
}
.navpill.on{opacity:1}
.navpill[data-go="right"]{--lag-left:var(--flow-lag)}
.navpill[data-go="left"]{--lag-right:var(--flow-lag)}
/* Placed without moving: the first placement, and after the bar is redrawn. */
.navpill.still{transition:none}
.navpill.ghost{background:var(--bar-wash-2)}
.navpill.ghost::after{background:color-mix(in srgb, var(--bar-underline) 40%, transparent)}

.baractions{display:flex;align-items:center;gap:2px;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:var(--fs-2xs);color:var(--bar-ink-3);font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:var(--r-full);white-space:nowrap;
  /* A ring, not a wash. On the wash the quiet ink was 4.30:1 over the
     gradient's middle before the bar had any liquid at all — and under the
     liquid no quiet ink can clear a wash (docs/70 §3). */
  box-shadow:inset 0 0 0 1px var(--bar-line);
  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:var(--fs-2xs);color:var(--ink-3);font-variant-numeric:tabular-nums;
  padding:4px 8px;border-radius:var(--r-full);
  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 8px 4px 4px;border-radius:var(--r-full);
  font-size:var(--fs-sm);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:var(--r-full);display:grid;place-items:center;
  background:var(--accent);
  color:var(--on-accent);font-size:var(--fs-2xs);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:var(--shadow-lg);
  animation:whomenu-in var(--fast) 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:12px; padding:12px 12px;
  background:var(--accent-wash);
  border:1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius:var(--r-sm); margin-bottom:8px;
}
.wmavatar{
  width:46px; height:46px; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--accent);
  color:var(--on-accent); font-size:var(--fs-lg); 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:var(--fs-md); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wmsub{display:block; font-size:var(--fs-xs); 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:var(--fs-2xs); font-weight:600; letter-spacing:.6px;
  text-transform:uppercase; color:var(--accent-ink, var(--accent));
  margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wmitem{
  display:block; width:100%; text-align:left; padding:8px 12px;
  border:0; background:none; color:var(--ink); font:inherit; font-size:var(--fs-sm);
  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:6px 6px}
/* The Compact switch: a row like the others, with the product's own switch
   at its end rather than a checkbox, because it takes effect as it moves. */
.wmitem.wmswitch{display:flex; align-items:center; justify-content:space-between; gap:12px}
.wmitem.wmswitch .wmsub{white-space:normal}
@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:32px 20px 40px}
.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 40px;
  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:var(--fs-2xs);font-weight:600;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:var(--fs-xl);line-height:1.28;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:6px;padding:8px 12px;border-radius:var(--r-sm);
  margin-left:-12px;margin-right:-12px;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.bigl:last-child{margin-bottom:0}
.bigl:hover{color:var(--accent-ink);background:var(--accent-wash)}
.bigl .sum{
  display:block;font-size:var(--fs-sm);font-weight:400;letter-spacing:0;
  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:var(--fs-base);font-weight:600;letter-spacing:0;
  color:var(--ink);padding:8px 12px;border-radius:var(--r-sm);
  margin-left:-12px;margin-right:-12px;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.smalll:hover{color:var(--accent-ink);background:var(--accent-wash)}
.smalll span{
  display:block;font-size:var(--fs-xs);font-weight:400;color:var(--ink-3);
  margin-top:2px;line-height:1.45;letter-spacing:0;
}
/* An area several modules share unrolls in the drawer with each module's name
   over its own links (docs/48 Part E's Talent). */
.dsub{
  font-size:var(--fs-2xs);font-weight:600;color:var(--accent-ink);letter-spacing:.06em;
  text-transform:uppercase;margin:12px 0 6px;
}
.panelabout{
  font-size:var(--fs-md);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 var(--slow) var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}

@media (max-width:860px){
  .panelgrid{grid-template-columns:1fr;gap:24px}
  .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 4px;
  border-radius:var(--r-full);background:var(--critical-solid);color:var(--on-solid);
  font-size:var(--fs-2xs);font-weight:600;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:8px;
  padding:12px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-md);
}
.inboxlist{max-height:min(58vh,440px);overflow:auto}
.inboxrow{padding:12px 12px;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{box-shadow:inset 2px 0 0 var(--accent)}
.inboxrow.overdue{box-shadow:inset 2px 0 0 var(--critical)}
.inboxrow .ititle{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.inboxrow .ibody{font-size:var(--fs-xs);color:var(--ink-2);margin-top:2px;line-height:1.5}
.inboxrow .imeta{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:4px}
.inboxempty{padding:24px 16px;text-align:center}
.inboxempty b{display:block;font-size:var(--fs-md);margin-bottom:6px}
.inboxempty span{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.inboxfoot{padding:8px 12px;border-top:1px solid var(--line);font-size:var(--fs-xs);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 var(--mid) 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 var(--mid) var(--ease);
}
.drawerwrap.on .drawer{transform:none}
.drawerhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--fs-md);
}
.drawerbody{overflow:auto;padding:6px 0 20px}
.dgroup{padding:12px 16px 4px;border-bottom:1px solid var(--line-2)}
.dgroup:last-child{border-bottom:0}
.dhead{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
       color:var(--ink-3)}
.dtag{font-size:var(--fs-xs);color:var(--ink-3);margin:2px 0 6px;line-height:1.5}
.ditem{display:block;padding:8px 8px;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:var(--fs-md);font-weight:500;color:var(--ink)}
.ditem .dsum{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px;line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawerscrim{transition:none}
  .inbox{animation:none}
  /* The bar's three motions, off rather than faster (docs/70): the lights
     where they rest, the pill and the panel's edge where they are going. */
  .barliquid i:nth-child(1), .barliquid i:nth-child(2), .barliquid i:nth-child(3){animation:none}
  .barliquid, .navpill{transition: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}
  /* A phone's bar is still: the gradient, and no light moving over it. */
  .barliquid{display:none}
}