/* UPESSC Commission Dashboard — the whole stylesheet.
 *
 * No framework, no CDN, no webfont. The page must render on a laptop reaching
 * this through an SSH tunnel with no route to the internet, and the
 * Content-Security-Policy is `default-src 'none'` — which rules out a font host
 * and a script CDN both. It also blocks inline styles, so every value here is
 * in this file and everything dynamic is set through CSSOM from app.js.
 *
 * ── ONE SECONDARY, ITS SHADES, AND ONE TERTIARY ────────────────────────
 * White is the primary: every surface is white and the ink sits on it. There is
 * ONE secondary — a calm institutional slate-blue — and its six shades carry
 * every series that needs more than one value. There is ONE tertiary, a muted
 * clay, for the second identity where two things genuinely have to be told
 * apart. Nothing else is a colour.
 *
 * SUBTLE IS A NUMBER, NOT A FEELING. The previous set ran at OKLCH chroma 0.16
 * and read as vibrant. These sit at 0.07 for the shades and 0.115 for the two
 * identities — just over the floor below which a hue stops reading as a colour
 * at all and starts reading as grey. Going quieter than this does not make a
 * calmer chart, it makes a grey one.
 *
 * Both were generated at fixed OKLCH lightness steps rather than picked, and
 * both clear their gates on a white surface: the pair passes every categorical
 * check, and the ramp passes the ordinal ones — monotone lightness, visible
 * step gaps, and a light end that still clears 2:1 against white.
 */

:root {
  /* Planes — white is the primary */
  --page:      #eef1f5;
  --surface:   #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f0f2f5;
  --line:      #e6e9ef;
  --line-2:    #d4d9e2;

  /* Ink */
  --ink:   #101419;
  --ink-2: #4d5665;
  --ink-3: #838d9c;
  --ink-4: #aeb6c3;

  /* The secondary, at working strength, and the tertiary */
  --sec: #206ea6;
  /* THE LOOKUP'S ACCENT IS THE SIDEBAR'S OWN NAVY. --sec is the secondary the
     CHARTS are built on: six shades generated at fixed OKLCH steps and checked
     for colour-vision separation, so repointing it would change every series on
     every view to fix one screen. This is the middle stop of the gradient the
     two panels are painted with — the lookup sits between them, and now agrees
     with them. */
  --deep:  #14304a;
  --deep2: #0c1c2b;
  --ter: #b7693f;
  --alm: #a7463c;    /* status only — never an identity */

  /* The secondary's shades. Ordered data reads down this ramp. */
  --n1: #80aace; --n2: #6790b3; --n3: #4e7799;
  --n4: #365e7f; --n5: #1f4766; --n6: #05304e;

  /* Chrome */
  --grid:  #eef0f4;
  --axis:  #d8dce4;

  --r-sm: 5px;
  --r:    10px;
  --r-lg: 14px;

  --sh-1: 0 1px 2px rgba(13,16,23,.04), 0 1px 1px rgba(13,16,23,.03);
  --sh-2: 0 2px 6px rgba(13,16,23,.05), 0 14px 32px -16px rgba(13,16,23,.24);
  --sh-3: 0 28px 70px -20px rgba(13,16,23,.34), 0 2px 8px rgba(13,16,23,.07);

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rail: 108px;
  /* One detent of the date dial, and the angle between two of them. 15° puts the
     fifth cell either side at 75° — still legible, clearly receding — and the
     sixth at 90°, edge-on and gone. That is what bounds the wheel to five days
     back and five forward without a cutoff anyone had to choose. */
  --dial-h: 62px;
  /* The mark on the left and the ALL button on the right are one box, at the
     same type size as the cells on the wheel below them — so each panel reads as
     one thing rather than as a small control sitting on top of a big one. */
  --chip: 52px;
  /* The two edge panels are the same width because they are the same thing:
     a mark at the top, a caption, and a dial. A wide one and a narrow one would
     read as two different kinds of furniture. */
  --nav:  var(--rail);
  /* The gutter the floating panels are set in. It is the app's padding AND the
     gap between every panel, so one value keeps the outer margin and the inner
     seams identical — the thing that makes panels read as floating rather than
     as a frame that happens to have gaps in it. */
  --gap:  10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* A class that sets `display` beats the user agent's [hidden] — same
   specificity, author sheet, later origin — so hiding the sign-in panel once
   left it sitting on top of a fully rendered dashboard. */
[hidden] { display: none !important; }

/* ── SCROLLBARS ARE PART OF THE DESIGN ───────────────────────────────────
   The native bar is 15px of high-contrast grey furniture, and a card with a
   scrolling list had one running down its face. These are 5px, transparent
   until the thing they belong to is hovered, and they never take layout width
   (overlay on WebKit, `thin` elsewhere). */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
:hover::-webkit-scrollbar-thumb { background: rgba(13,16,23,.16); }
::-webkit-scrollbar-thumb:hover { background: rgba(13,16,23,.30); }
::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ════════════════════════════════════════════════════════════════════════
   THE DOOR — a hero, not a dialogue box
   ════════════════════════════════════════════════════════════════════════

   A bright cloudscape with the page's own words over it, and the access code
   as the call to action rather than as a modal in the middle of nothing.

   WHITE TEXT ON A BRIGHT SKY IS THE HARD PART. The clouds drift, so any given
   word sits over pale cloud at some point in the loop and over deep sky at
   another — a colour that reads at one moment does not at the next. Three
   things hold it: the shader's centre is kept a little quieter than its
   corners, the headline carries a soft drop shadow, and the lede sits at full
   white rather than at an opacity. */
.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-rows: auto 1fr;
  background: #1d6fb8;                       /* the fallback if WebGL2 is absent */
  overflow: hidden;
}
.gate-art { position: absolute; inset: 0; }
.gate-art canvas { width: 100%; height: 100%; display: block; }

.gate-nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 30px;
}
.gate-brand { display: flex; align-items: center; gap: 11px; }
.gate-brand b {
  font-size: 17px; font-weight: 660; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 1px 8px rgba(10,40,70,.4);
}
.gate-mark {
  /* Bigger than the letter it replaced: an emblem with a ring of text around it
     is illegible at 30px, and a mark nobody can read is decoration. */
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(255,255,255,.96);
  box-shadow: 0 4px 14px -4px rgba(10,40,70,.5);
  overflow: hidden;
}
.gate-mark img { width: 32px; height: 32px; object-fit: contain; display: block; }
.gate-tag {
  padding: 6px 13px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.gate-hero {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 0 24px 8vh; max-width: 860px; margin: 0 auto;
  animation: rise .65s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(20px) } }
.gate-hero h1 {
  font-size: clamp(32px, 5.2vw, 62px); font-weight: 680;
  line-height: 1.06; letter-spacing: -.035em; color: #fff;
  text-shadow: 0 2px 20px rgba(10,40,70,.42), 0 1px 3px rgba(10,40,70,.3);
}
.gate-lede {
  margin-top: 20px; max-width: 620px;
  font-size: clamp(13.5px, 1.35vw, 16.5px); line-height: 1.6; color: #fff;
  text-shadow: 0 1px 3px rgba(10,40,70,.45), 0 2px 16px rgba(10,40,70,.5);
}

/* ── LIQUID GLASS ────────────────────────────────────────────────────────
   Glass is not a translucent rectangle. What makes it read as a solid pane is
   the EDGE: a bright specular line along the top where light catches the lip,
   dimmer returns down the sides, and an inner falloff so the middle sits
   deeper than the rim. Those inset shadows do more work than the blur does.

   The sheen sweeps ABOVE the content, at a low enough alpha to read as a
   reflection on the pane rather than as a wash over the text — which is where
   a reflection on real glass is. */
.gate-card {
  position: relative;
  margin-top: 34px; width: min(560px, 100%);
  padding: 18px 18px 18px 22px; border-radius: 22px; text-align: left;
  background:
    linear-gradient(152deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 46%,
                            rgba(255,255,255,.22) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.8),
    inset 1px 0 0 rgba(255,255,255,.30),
    inset -1px 0 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.20),
    inset 0 0 40px rgba(255,255,255,.10),
    0 26px 60px -22px rgba(8,36,64,.62);
}
.gate-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(116deg, transparent 32%, rgba(255,255,255,.20) 46%,
                                      rgba(255,255,255,.04) 54%, transparent 68%);
  background-size: 260% 100%;
  animation: sheen 9.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 132% 0 }
  50%      { background-position: -32% 0 }
}
.gate-field {
  display: block; margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(10,40,70,.4);
}
.gate-row { display: flex; gap: 10px; align-items: stretch; }
.gate-row input {
  flex: 1 1 auto; min-width: 0; padding: 13px 16px;
  font: inherit; font-size: 16px; letter-spacing: .22em; color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34); border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -8px 18px rgba(8,36,64,.10);
  outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
}
.gate-row input::placeholder { letter-spacing: .22em; color: rgba(255,255,255,.5); }
.gate-row input:focus {
  background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(255,255,255,.16);
}
.gate-go {
  flex: none; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 640; letter-spacing: -.006em;
  color: #17557f; background: #fff;
  border: 0; border-radius: 13px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(8,36,64,.8);
  transition: transform .14s var(--ease), box-shadow .22s;
}
.gate-go:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(8,36,64,.9); }
.gate-go:active { transform: translateY(0); }
.gate-go[disabled] { opacity: .6; cursor: default; transform: none; }
.gate-err {
  margin-top: 12px; padding: 9px 12px; font-size: 12px; color: #fff;
  background: rgba(167,70,60,.55); border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
}
.gate-foot {
  position: relative; z-index: 2;
  margin-top: 22px; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(10,40,70,.5);
}
.gate-foot .ic { width: 13px; height: 13px; }

@media (max-width: 620px) {
  .gate-row { flex-direction: column; }
  .gate-go { justify-content: center; padding: 13px 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   FRAME
   ════════════════════════════════════════════════════════════════════════ */

.app {
  height: 100vh;
  display: grid;
  /* nav · view · rail — and the markup is in that order too, so the column a
     panel lands in is the one it is written in. */
  grid-template-columns: var(--nav) minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  padding: var(--gap);
  background: var(--page);
}

/* ── The shaded panels ───────────────────────────────────────────────────
   The nav on the left and the date rail on the right are ONE surface treatment
   worn by two panels at opposite edges. Each carries its own canvas INSIDE
   itself at `inset: 0` rather than one canvas positioned against the viewport:
   two panels on opposite edges cannot share a single fixed element, and a fixed
   one would have to restate a geometry the grid already decides. The rounded
   clip is each panel's own `overflow: hidden` — neither canvas needs a radius.

   Same shader, same parameters, same wash. They match because they are the same
   thing, not because two sets of numbers were kept in step by hand. */
#waves, #railWaves {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background: linear-gradient(170deg, #0c1c2b 0%, #14304a 45%, #1f4766 100%);
}
#waves canvas, #railWaves canvas { display: block; width: 100%; height: 100%; }
/* A wash under the content so white text keeps its contrast wherever the
   shader happens to be bright. */
#waves::after, #railWaves::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,26,.46), rgba(6,16,26,.20) 40%, rgba(6,16,26,.58));
}

/* Every panel floats: its own rounded plane, its own shadow, the gutter around
   it. `overflow: hidden` is what clips each shader to its radius. */
.nav, .rail {
  position: relative; z-index: 1;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2);
  background: linear-gradient(170deg, #0c1c2b 0%, #14304a 45%, #1f4766 100%);
}
.nav > .brand, .nav > .tabs,
.rail > .rail-all, .rail > .dial-cap { position: relative; z-index: 2; }
.rail > .dial { z-index: 1; }

/* ── Date rail ───────────────────────────────────────────────────────────
   The rightmost panel, on the same shaded surface as the nav: an ALL pill
   centred across the top, the month it is showing, and the dial under both. */
.rail {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 7px 10px; gap: 2px;
}
/* THE WHEEL IS CENTRED ON THE PANEL, NOT ON THE SPACE UNDER THE PILL. Laid out
   in the flow it would start below ALL and the month, and its centre — the lens,
   the whole point of reference — would sit a good way below the middle of the
   rail. So it fills the panel and the two labels ride over the top of it, where
   the wheel is transparent anyway. */
.rail > .dial { position: absolute; inset: 0; }

/* ALL is a pill, centred across the panel — the one control here that selects a
   span rather than a point, so it reads as a switch and not as a sixth date. */
/* ALL IS THE MARK'S TWIN. Same box, same radius, same type size, at the top of
   the opposite panel — so the two edges of the screen begin identically and the
   only thing that distinguishes them is what each one says. It is the one
   control on either wheel that selects a SPAN rather than a point, which is why
   it is a button beside the dial and not a cell inside it. */
.rail-all {
  align-self: center;
  flex: none; width: 100%; height: var(--chip);
  display: grid; place-items: center; gap: 0;
  padding: 0; border-radius: var(--r);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
/* NOT AT THE NUMERALS' SIZE. Set to 27px to match the figures below it, "ALL"
   became a headline in a white slab — the loudest thing on a panel whose job is
   to sit beside the data. It is a control, so it is lettered like the labels on
   the wheel and not like the values. */
.rail-all .ra-k { font-size: 12px; font-weight: 700; letter-spacing: .14em;
                  text-transform: uppercase; line-height: 1; }
/* The day count is in the button's title, not on its face: a second line here
   makes it a different shape from the mark it is paired with. */
.rail-all .ra-v { display: none; }
.rail-all:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24);
                  color: #fff; }
/* Lit the way a selected cell on the wheel is lit — the secondary's lightest
   shade — rather than as a white slab, so "every day" and "this day" are the
   same idea wearing the same colour. */
.rail-all.on {
  background: rgba(128,170,206,.3); color: #fff;
  border-color: rgba(128,170,206,.55);
}

.dial-cap {
  margin-top: 9px; max-width: 100%;
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.42); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* ── The dial ────────────────────────────────────────────────────────────
   `perspective` on the frame is what does the zoom: the centre cell is pushed
   one radius toward the reader and so is drawn largest, and every other cell
   turns away from it on the same cylinder. Nothing scales anything by hand —
   the size IS the position, which is why it cannot drift out of step with it.

   The mask fades the wheel into the panel at both ends, so a cell leaves by
   dissolving rather than by being cut off at a border. */
.dial {
  width: 100%; position: relative;
  perspective: 560px;
  touch-action: none; cursor: grab; outline: none;
  /* A DRAG IS A DRAG, NOT A TEXT SELECTION. Dragging the wheel ran the caret
     across the cells and left the selection highlight banded right across the
     panel — two bright rules through the middle of the dates. */
  user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.dial:active, .dial.drag { cursor: grabbing; }
.dial.drag .dial-track { pointer-events: none; }
.dial:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: -2px;
                      border-radius: var(--r); }

/* The detent the wheel rests in. It sits at z = 0 and the centre cell is drawn
   one radius in front of it, so the cell is always over the lens and never
   tinted by it. */
.dial-lens {
  position: absolute; left: 2px; right: 2px; top: 50%;
  height: var(--dial-h);            /* replaced from script — see dialGeom() */
  transform: translateY(-50%);
  border-radius: var(--r); pointer-events: none; overflow: hidden;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
/* THE HOLD, DRAWN. It fills over exactly the interval the dial waits before it
   runs anything, so a deliberate pause reads as a deliberate pause. */
.dial-arm {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--n1), #fff);
  transform-origin: left center; transform: scaleX(0);
}
.dial-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 0;
  transform-style: preserve-3d;
}

/* One cell of the wheel. Every one is the same box in the same place — the
   position on the cylinder is set entirely by a transform written from script,
   because a transform is the one thing that can be a fractional index mid-spin
   and a whole one at rest without two code paths. */
.day {
  position: absolute; left: 2px; right: 2px;
  top: calc(var(--dial-h) / -2); height: var(--dial-h);
  display: grid; align-content: center; justify-items: center; gap: 0;
  padding: 0; border: 0; background: none; border-radius: var(--r);
  cursor: pointer; color: rgba(255,255,255,.9);
  backface-visibility: hidden; transform-origin: center center;
  will-change: transform, opacity;
  transition: background .22s var(--ease), color .22s;
}
/* THE LABEL AND THE RULE ARE DECLARED ONCE, FOR BOTH WHEELS. They were written
   out twice, a few lines apart, differing only in a margin nobody meant to
   differ — which is exactly how two panels built to look the same stop looking
   the same. Only what is genuinely different about a section cell is stated
   again below: a smaller label over an icon, where a date has a large figure. */
.day .d-w, .tab .d-w {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.3;
  text-transform: uppercase; color: rgba(255,255,255,.48); white-space: nowrap;
}
.day .d-bar, .tab .d-bar {
  width: 28px; height: 2px; margin-top: 6px; border-radius: 99px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.day .d-bar i, .tab .d-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--n1), #fff);
  transform-origin: left; transform: scaleX(var(--f, 0));
}
.day .d-n { font-size: 27px; font-weight: 640; letter-spacing: -.04em;
            line-height: 1.06; font-variant-numeric: tabular-nums; }

/* THE CENTRE CELL IS NOT STYLED BIGGER — it is nearer. `.focus` only brightens
   the ink, so that if the transform ever stopped running the cell in the lens
   would still be the one that reads as chosen. */
.day.focus { color: #fff; }
.day.focus .d-w { color: rgba(255,255,255,.72); }

/* A day the platform has no record of — before it opened, or still to come.
   Drawn, because a dial that skipped them would misreport the shape of the
   month; dimmed and barless, because there is nothing on it to measure. */
.day.void { color: rgba(255,255,255,.34); }
.day.void .d-w { color: rgba(255,255,255,.22); }
.day.void .d-bar { opacity: .25; }

/* In the queried window. The lens is neutral and this is the secondary's
   lightest shade, so "where the wheel rests" and "what the page is showing"
   never have to be told apart by position alone. */
.day.on:not(.focus) { background: rgba(128,170,206,.22); }
.day.on .d-bar { background: rgba(255,255,255,.26); }
.day:hover { background: rgba(255,255,255,.10); color: #fff; }

/* Today is marked in the TERTIARY, so "this is today" and "this is selected"
   are never the same colour saying two different things.

   IT RIDES BESIDE THE WEEKDAY, not in the cell's corner. Perspective draws the
   centre cell about 1.7x its own width, so a corner is a good way outside a
   panel narrower than that, and the mark was being clipped off the one day it
   exists to point at. Anything in the centred content is safe; anything pinned
   to an edge is not. */
.day.today .d-w::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; margin: -1px 0 0 5px;
  border-radius: 50%; background: var(--ter);
}

/* ── Nav ─────────────────────────────────────────────────────────────────
   The panel itself — radius, shadow, and the clip that rounds the shader — is
   declared in FRAME beside `#waves`, because the clip and the thing it clips
   have to be read together. Its interior mirrors the date rail exactly: a mark
   at the top, a caption, and a dial filling the panel behind both. */
.nav { display: flex; flex-direction: column; align-items: center;
       padding: 12px 7px 10px; gap: 2px; }
.nav > .brand, .nav > .dial-cap, .nav > .nav-look { position: relative; z-index: 2; }

/* THE TWIN OF THE MARK, at the other end of the panel. `margin-top: auto` is
   what puts it there: the wheel between them is absolutely positioned and so
   takes no part in the column, which leaves the mark and this button as the
   only two things in it. */
.nav-look {
  margin-top: auto; flex: none;
  width: 100%; height: var(--chip);
  display: grid; place-items: center; border-radius: var(--r);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.nav-look .ic { width: 19px; height: 19px; stroke-width: 1.8; }
.nav-look:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.26);
                  color: #fff; }
.nav-look.on {
  background: #fff; color: #0c1c2b; border-color: #fff;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.65);
}
/* No detent height of its own: the two wheels share one geometry now, so they
   cover the same area and their lenses are the same box without anything being
   solved for. */
.nav > .dial { position: absolute; inset: 0; z-index: 1; }

/* THE MARK, AND NOTHING ELSE. It is the same box as the ALL pill opposite —
   same height, same radius, same weight — so the two panels start level. */
.brand {
  flex: none; width: 100%; height: var(--chip);
  display: grid; place-items: center; border-radius: var(--r);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  cursor: default; user-select: none; overflow: hidden;
}
/* Already white on transparent — see assets/README.md. No filter, no blend: a
   `mix-blend-mode` here composites against .brand's own stacking context, which
   this chip is, so it does nothing at all and leaves a black square. */
.brand img { width: 40px; height: 40px; object-fit: contain; display: block; }

/* One cell of the section wheel: an icon, centred, and nothing else — the
   caption above the wheel names whatever is in the lens. */
.tab {
  position: absolute; left: 2px; right: 2px;
  top: calc(var(--dial-h) / -2); height: var(--dial-h);
  display: grid; align-content: center; justify-items: center;
  padding: 0; border: 0; background: none; border-radius: var(--r);
  cursor: pointer; color: rgba(255,255,255,.9);
  backface-visibility: hidden; transform-origin: center center;
  will-change: transform, opacity;
  transition: background .22s var(--ease), color .22s;
}
/* SIZED AND WEIGHTED AGAINST THE NUMERALS OPPOSITE, not against the cell. The
   date wheel's figures are 27px at weight 640, whose strokes land around 2.5px;
   an icon drawn on a 20-unit grid at 30px scales its 1.7 stroke to about the
   same. Matching the BOX would have left a line drawing looking spindly beside
   a bold number — the two panels are a pair, so the marks in them have to carry
   the same weight, not the same dimensions. */
/* Well under the numerals opposite rather than level with them. Matched
   exactly, a glyph that fills its whole box read heavier than a numeral that
   only fills its cap height, so the left panel was the louder of the two.
   The margins are not padding: they make the section cell's contents the same
   TOTAL HEIGHT as a date cell's, so that with both centred in the same detent
   the label sits at the same height on both panels and so does the rule. */
.tab .tic { width: 21px; height: 21px; stroke-width: 1.7; margin: 4px 0 5px; }
.tab .d-w { font-size: 8.5px; letter-spacing: .13em; }
.tab.focus .d-w { color: rgba(255,255,255,.72); }
/* The rule under the icon is the same element the date wheel measures a day's
   activity with, and it is FULL on every section — there is nothing here to
   measure, and a bar identical everywhere cannot be misread as one that
   differs. It is there so both wheels are built from the same three parts. */
.tab.focus { color: #fff; }
/* The section that is OPEN, when the wheel has rolled away from it — the same
   tint the date wheel uses for the days it is showing, for the same reason:
   "where the wheel rests" and "what the page is showing" are two facts and
   during the hold they are two different cells. */
.tab.on:not(.focus) { background: rgba(128,170,206,.22); color: #fff; }
.tab:hover { color: #fff; }
/* ── Main ──────────────────────────────────────────────────────────────── */
.main { position: relative; display: flex; flex-direction: column;
        gap: var(--gap); min-width: 0; overflow: hidden; }
/* The top bar is a panel, not a header rule: it has the gutter under it that
   every other panel has, so the border that used to separate it from the view
   is gone — there is nothing left for it to separate. */
.head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px 11px 16px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.head-l h1 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.head-l p { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.head-r { display: flex; align-items: center; gap: 8px; }
.head-l h1 { margin: 2px 0; }
.seg { display: inline-flex; padding: 3px; gap: 2px;
       background: var(--surface-3); border-radius: var(--r); }
.seg button {
  padding: 6px 11px; border: 0; border-radius: 7px; background: none;
  font-size: 11.5px; font-weight: 550; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s, box-shadow .16s;
}
.seg button:hover { color: var(--ink); }
.seg button.on {
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
}
.seg.exams button { max-width: 136px; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.spin .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

.view {
  flex: 1 1 auto; min-height: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden; transition: opacity .18s;
}
.view.busy { opacity: .45; }
.view.enter > * { animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(9px) } }

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  /* Plainly white, with a hairline and a soft shadow to lift it off the page.
     The card is the reader's surface — anything painted across it competes with
     the figure on it. */
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  border-radius: var(--r);
  overflow: hidden;
}
.card-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 40px 9px 15px; }
.card-h h2 { font-size: 12.5px; font-weight: 650; letter-spacing: -.008em; }
.card-h h2[title] { cursor: help; }
.card-h .sub { font-size: 10.5px; color: var(--ink-3); margin-left: auto;
               white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-b { flex: 1 1 auto; min-height: 0; padding: 0 15px 14px; display: flex;
          flex-direction: column; overflow: hidden; }
.card-b.pad0 { padding: 0; }
.card.clickable { cursor: pointer;
  transition: box-shadow .2s, border-color .2s, transform .2s var(--ease); }
.card.clickable:hover { box-shadow: 0 2px 6px rgba(16,20,25,.05), 0 20px 44px -20px rgba(16,20,25,.5);
                        border-color: rgba(255,255,255,.95); transform: translateY(-2px); }
.card.alarm { border-color: #f3d2da; }
.card.alarm .card-h h2 { color: var(--alm); }

.grp { margin: 14px 0 7px; font-size: 9.5px; font-weight: 650; letter-spacing: .1em;
       text-transform: uppercase; color: var(--ink-4); }
.grp:first-child { margin-top: 1px; }

.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c10{grid-column:span 10}.c12{grid-column:span 12}
.r1{grid-row:span 1}.r2{grid-row:span 2}.r3{grid-row:span 3}
.r4{grid-row:span 4}.r5{grid-row:span 5}.r6{grid-row:span 6}

/* ── Stat tile ───────────────────────────────────────────────────────────
   It had a coloured rule pinned across the top that belonged to nothing, a line
   of filler prose under the figure, and a sparkline bleeding off both edges and
   through the text. Now: a caption line that carries the label and the change
   TOGETHER, the figure, and the trend in a band of its own with room around it.
   Nothing overlaps anything. */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0,1fr)); }
.kpi {
  position: relative; overflow: hidden;
  padding: 13px 15px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  border-radius: var(--r);
  display: flex; flex-direction: column; cursor: pointer;
  transition: box-shadow .22s, transform .22s var(--ease), border-color .22s;
}
.kpi:hover { box-shadow: 0 3px 8px rgba(13,16,23,.06), 0 20px 44px -20px rgba(13,16,23,.3);
             transform: translateY(-2px); border-color: var(--line-2); }
.kpi .cap { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.kpi .k {
  font-size: 9.5px; font-weight: 680; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi .d {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 99px; font-size: 10px; font-weight: 680;
  font-variant-numeric: tabular-nums; background: var(--surface-3); color: var(--ink-3);
}
.kpi .d.up   { background: rgba(32,110,166,.10); color: var(--sec); }
.kpi .d.down { background: rgba(167,70,60,.10);  color: var(--alm); }
.kpi .v {
  margin-top: 5px;
  font-size: 34px; font-weight: 680; letter-spacing: -.042em; line-height: 1.02;
  color: var(--ink);
}
.kpi .v.money { font-size: 29px; }
/* Its own band, inset from the card's edges, under everything else. */
.kpi .spark { margin: 10px -15px 0 -15px; height: 36px; flex: none; opacity: .9;
              margin-top: auto; }

/* ── Charts ─/* ── Charts ────────────────────────────────────────────────────────────── */
.plot { flex: 1 1 auto; min-height: 72px; position: relative; overflow: hidden; }
.plot > .rows { position: absolute; inset: 0; }
.plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.axisline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.tick { font-size: 9.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.tick.b { fill: var(--ink-2); font-weight: 600; }
.dlabel { font-size: 10.5px; font-weight: 650; fill: var(--ink-2);
          font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 0 9px; }
.legend span { display: inline-flex; align-items: center; gap: 6px;
               font-size: 10.5px; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.grow { transform-origin: center bottom; animation: grow .6s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0) } }
.growx { transform-origin: left center; animation: growx .6s var(--ease) both; }
@keyframes growx { from { transform: scaleX(0) } }
.draw { animation: draw .95s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: var(--len) } to { stroke-dashoffset: 0 } }
.fadein { animation: fade .5s var(--ease) both; }
@keyframes fade { from { opacity: 0 } }
.pop { animation: pop .45s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: scale(.92) } }

/* ── Table view ────────────────────────────────────────────────────────── */
.tbl-toggle {
  position: absolute; top: 10px; right: 11px; z-index: 2;
  width: 23px; height: 23px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-4); cursor: pointer; opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.card:hover .tbl-toggle, .tbl-toggle.on { opacity: 1; }
.tbl-toggle:hover, .tbl-toggle.on { background: var(--surface-3); color: var(--ink-2);
                                    border-color: var(--line); }
.tbl-toggle .ic { width: 13px; height: 13px; }
.tblwrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 10px 6px 0; text-align: left; white-space: nowrap;
  font-size: 9.5px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: #fff; border-bottom: 1px solid var(--line);
}
tbody td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--surface-3);
           color: var(--ink-2); }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 padding-left: 16px; color: var(--ink); font-weight: 550; }
tbody td:last-child, thead th:last-child { padding-right: 0; }
td.alarm { color: var(--alm); font-weight: 680; }

/* ── Lists ───────────────────────────────────────────────────────────────
   THREE COLUMNS, ONE LINE. Each row used to be a label, then a value on the
   next line, then a full-width bar under both — sixty pixels a row, which made
   five categories fill a card and eleven districts need a scrollbar. And a bar
   running the whole width reads as a progress bar toward some target rather
   than as one quantity against another.

   Label, bar, value on a single 30px line: the same information, half the
   height, twice as many rows visible, and the comparison is the bar's length
   against its neighbours rather than against the card. */
.rows { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto;
        padding-right: 2px; }
.rows.tight { gap: 0; }
.rows.fill > .row { flex: 1 0 auto; max-height: 46px; }
.row {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(40px, 1fr) auto;
  align-items: center; gap: 12px; min-height: 30px; padding: 2px 0;
}
.row .lab { font-size: 11.5px; color: var(--ink-2); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.row .val { font-size: 14px; font-weight: 680; letter-spacing: -.024em;
            color: var(--ink); font-variant-numeric: tabular-nums; text-align: right;
            min-width: 44px; }
.row .val small { margin-left: 5px; font-weight: 550; color: var(--ink-3);
                  font-size: 10px; letter-spacing: 0; }
.meter { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px;
           transform-origin: left; transform: scaleX(var(--f,0));
           animation: growx .65s var(--ease) both; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
        border-radius: 99px; font-size: 10.5px; font-weight: 550;
        background: var(--surface-3); color: var(--ink-2); }

/* ── Status list ───────────────────────────────────────────────────────── */
.checks { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.check {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 11px;
  padding: 9px 2px; border-bottom: 1px solid var(--surface-3); cursor: help;
  flex: 1 1 auto; min-height: 38px; max-height: 78px;
}
.check:last-child { border-bottom: 0; }
.check .dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.check .dot svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.6; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; }
/* Clear is NOT green here — the palette has no green, and a tick already says
   "clear" without asking hue to say it twice. */
.check.ok  .dot { background: var(--ink-4); }
.check.bad .dot { background: var(--alm); }
.check .t { font-size: 12.5px; color: var(--ink); }
.check .n { font-size: 16px; font-weight: 680; letter-spacing: -.026em;
            font-variant-numeric: tabular-nums; }
.check.bad .n { color: var(--alm); }
.check.ok .n { color: var(--ink-4); }

/* ── Tooltip ───────────────────────────────────────────────────────────── */
.tip {
  position: fixed; z-index: 50; pointer-events: none;
  padding: 9px 11px; min-width: 124px;
  background: rgba(15,10,30,.94); color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; box-shadow: 0 16px 36px -10px rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; line-height: 1.55; transition: opacity .12s;
}
.tip .tt { font-weight: 650; margin-bottom: 5px; letter-spacing: -.008em; }
.tip .tr { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tip .tr i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.tip .tr b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 680; }
.tip .tn { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.14);
           color: rgba(255,255,255,.6); font-size: 10.5px; white-space: nowrap; }

/* ── Empty / error ─────────────────────────────────────────────────────── */
.empty, .err { flex: 1 1 auto; display: grid; place-items: center; text-align: center;
               font-size: 11.5px; color: var(--ink-3); padding: 12px; }
.err { color: var(--alm); }
.empty b { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }

/* ── Smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 1400px) { .view { gap: 10px; } }
@media (max-height: 820px) {
  .kpi .v { font-size: 27px } .kpi .v.money { font-size: 23px }
  :root { --gap: 8px; --dial-h: 52px; }
  .view { gap: 9px; }
  .rail { padding: 9px 6px 8px; }
  .day .d-n { font-size: 23px; }
  .day .d-bar { margin-top: 4px; }
}
@media (max-width: 980px), (max-height: 600px) {
  .view { overflow-y: auto; grid-auto-rows: minmax(190px, auto); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CANDIDATE LOOKUP

   The only view that scrolls and the only one not laid out on the twelve-column
   grid. Both follow from the same fact: a candidate's history is as long as the
   candidate's history. Every other view is sized to one screen because a
   dashboard is read at a glance; a support screen that truncated the third of
   five payment attempts would be worse than no screen.
   ════════════════════════════════════════════════════════════════════════ */

.view.scrolls {
  display: block; overflow-y: auto; overflow-x: hidden;
  grid-template-rows: none;
  padding-right: 2px;                 /* room for the overlay scrollbar */
}

/* ── the search screen ───────────────────────────────────────────────── */
.lk-centre {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 12px;
}
.lk-box {
  /* It had a screen to itself and used a fifth of it. The box is the only thing
     on this view, so it takes the width the view has rather than a width chosen
     for a card that would have sat beside five others. */
  width: min(1020px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: 54px 56px 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* The strip that gives the card its footing. Inside the card and ruled off, so
   it reads as part of the control rather than as a caption under it. */
.lk-foot {
  margin: 30px -56px 0; padding: 22px 56px 26px;
  border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.lk-foot-h {
  font-size: 10.5px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 12px;
}
.lk-title { font-size: 34px; font-weight: 660; letter-spacing: -.03em; line-height: 1.1; }
.lk-lede { font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 62ch; }
.lk-row { display: flex; gap: 10px; margin-top: 14px; }
.lk-input {
  flex: 1 1 auto; min-width: 0;
  padding: 17px 20px; font: inherit; font-size: 17px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  outline: none; transition: border-color .16s, box-shadow .16s, background .16s;
}
.lk-input::placeholder { color: var(--ink-4); }
.lk-input:focus {
  background: var(--surface); border-color: var(--deep);
  box-shadow: 0 0 0 3px rgba(20,48,74,.13);
}
.lk-input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.lk-go {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 17px 28px; border: 0; border-radius: var(--r);
  background: var(--deep); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .16s, box-shadow .16s;
}
.lk-go:hover { background: var(--deep2); box-shadow: 0 10px 24px -12px rgba(12,28,43,.85); }

/* What may be typed. Five shapes, named — an operator who is not told which
   ones work will only ever use the one they were told about. */
.lk-hint { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: 99px;
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: 12px;
}
.lk-chip { background: var(--surface); }
.lk-chip b { font-weight: 640; color: var(--ink-2); }
.lk-chip i { font-style: normal; color: var(--ink-4); }
.lk-state { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }
.lk-state.err { color: var(--alm); }

/* ── more than one match ─────────────────────────────────────────────── */
.lk-hits {
  width: min(1020px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.lk-hits-h {
  padding: 10px 16px; font-size: 10.5px; font-weight: 680; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.lk-hit {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  display: grid; gap: 2px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  transition: background .14s;
}
.lk-hit:last-child { border-bottom: 0; }
.lk-hit:hover { background: var(--surface-3); }
.lk-hit-n { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hit-o { font-size: 12px; font-weight: 620; color: var(--deep);
            font-variant-numeric: tabular-nums; }
.lk-hit-m { font-size: 11.5px; color: var(--ink-3); min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hit-a { font-size: 11px; color: var(--ink-4); }

/* ── the dossier ─────────────────────────────────────────────────────── */
.lk-doss { display: flex; flex-direction: column; gap: 12px; }
.lk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 3;
  padding: 8px 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.lk-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 550; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.lk-back:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.lk-bar-id {
  font-size: 13.5px; font-weight: 660; color: var(--deep);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

.lk-card { min-height: 0; }
.lk-card .card-b { overflow: visible; }
.lk-card.alarm { border-color: rgba(167,70,60,.34); }

/* ── who they are ────────────────────────────────────────────────────── */
.lk-id { display: flex; gap: 18px; align-items: flex-start; }
.lk-face {
  flex: none; width: 108px; height: 132px; border-radius: var(--r);
  overflow: hidden; background: var(--surface-3); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.lk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-idcols, .lk-cols3 {
  flex: 1 1 auto; min-width: 0;
  display: grid; gap: 4px 26px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

/* ── a field ─────────────────────────────────────────────────────────── */
.lk-fields { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lk-f {
  display: grid; grid-template-columns: minmax(0, 124px) minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 3px 0; border-bottom: 1px dotted var(--line);
}
/* THE LABEL WRAPS, IT DOES NOT TRUNCATE. Ellipsis turned seven different fields
   into seven rows reading "Correspondence …", which is a screen that looks
   complete and tells the reader nothing. A label is the half of the row that
   says what the other half means; it is the last thing that should be cut. */
.lk-k { font-size: 10.5px; line-height: 1.35; color: var(--ink-4);
        overflow-wrap: anywhere; }
/* Selectable and wrappable: half of what support does with this screen is copy
   an identifier out of it into a ticket. */
.lk-v { font-size: 12.5px; color: var(--ink); min-width: 0;
        overflow-wrap: anywhere; user-select: text; }
.lk-f.warn .lk-v { color: var(--alm); font-weight: 600; }
.lk-none { color: var(--ink-4); font-size: 11.5px; }
.lk-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.lk-ok { font-size: 12.5px; color: var(--deep); margin-top: 8px; }

.lk-sub {
  display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.lk-sub b { font-size: 12px; font-weight: 660; }
.lk-sub span { font-size: 11.5px; color: var(--ink-3); }
.lk-sub2 {
  margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 10.5px; font-weight: 680; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.lk-app > .lk-sub:first-child, .lk-card .card-b > .lk-sub2:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.lk-files { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── tables ──────────────────────────────────────────────────────────── */
.lk-tblwrap { overflow-x: auto; margin-top: 4px; }
.lk-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lk-tbl th {
  text-align: left; white-space: nowrap; padding: 6px 12px 6px 0;
  font-size: 9.5px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line-2);
}
.lk-tbl td {
  padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; user-select: text; overflow-wrap: anywhere;
}
.lk-tbl th.num, .lk-tbl td.num { text-align: right; padding-right: 14px;
                                 font-variant-numeric: tabular-nums; }
.lk-tbl tr:last-child td { border-bottom: 0; }
.lk-tbl tr.cur td { background: rgba(20,48,74,.055); }
/* Something moved between the frozen copy and the live one. */
.lk-tbl tr.drift td { background: rgba(183,105,63,.10); }
/* Something a person has to act on — a duplicate charge, a pending refund. */
.lk-tbl tr.alarm td { background: rgba(167,70,60,.10); color: var(--alm); }
.lk-tbl td.lk-none { padding: 12px 0; }

.lk-file {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 99px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--deep); font-size: 11px; font-weight: 570; text-decoration: none;
  white-space: nowrap; transition: background .14s, border-color .14s, color .14s;
}
.lk-file:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.lk-file .ic { width: 13px; height: 13px; }

/* ── a stored record, folded ─────────────────────────────────────────── */
.lk-fold { margin-top: 12px; }
.lk-fold summary {
  cursor: pointer; font-size: 11.5px; font-weight: 620; color: var(--ink-3);
  padding: 8px 0; user-select: none;
}
.lk-fold[open] summary { margin-bottom: 4px; }
.lk-filerow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
/* The form's own bookkeeping — kept, but never mistaken for an answer. */
.lk-f.dim .lk-k, .lk-f.dim .lk-v { color: var(--ink-4); }
.lk-fold summary:hover { color: var(--deep); }

@media (max-width: 1100px) {
  .lk-id { flex-direction: column; }
  .lk-face { width: 92px; height: 112px; }
}