/* 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 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 > .brand, .rail > .dial-cap,
.rail > .rail-lock, .rail > .rail-out { position: relative; z-index: 2; }
.rail > .dial { z-index: 1; }

/* ── The right rail ──────────────────────────────────────────────────────
   The other pulley: the same shaded surface as the nav, the emblem at the top,
   and the far side of the section belt filling the panel behind it. */
.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; }

/* ── A LOOKUP-ONLY SESSION ────────────────────────────────────────────────
   The two rails are a pair: a mark at the top, a control at the foot, the
   shader between them. On a session that has no sections to list and no day to
   scope by, both wheels go — and the right rail would be left with its middle
   removed and nothing put back, which reads as broken rather than as
   restricted. So it gets the same two boxes the left one has: the lock says
   what this session is, and the door is how it leaves. */
.rail-lock, .rail-out {
  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);
  transition: background .2s, color .2s, border-color .2s;
}
.rail-lock { color: rgba(255,255,255,.5); cursor: default; user-select: none; }
.rail-out { margin-top: auto; cursor: pointer; }
.rail-out:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.26);
                  color: #fff; }
.rail-lock .ic, .rail-out .ic { width: 19px; height: 19px; stroke-width: 1.8; }

.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;
}

/* 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. */
.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;
}
.tab .d-bar {
  width: 28px; height: 2px; margin-top: 6px; border-radius: 99px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.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));
}
/* ── 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 matches the right rail: 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. The same box tops both rails, so the two panels
   start level. */
.brand {
  flex: none; width: 100%; height: var(--chip); padding: 0;
  display: grid; place-items: center; border-radius: var(--r);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  cursor: pointer; user-select: none; overflow: hidden;
  transition: background .2s, border-color .2s;
}
.brand:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); }
/* 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; }

/* ── The date wheel's cells ─────────────────────────────────────────────────
   The right rail is the date dial again. One cell per day: the weekday over a
   large figure over a rule whose length is that day's applications against the
   busiest day — the same three parts as a section cell, so the two wheels read
   as one thing seen twice. */
.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;
}
.day .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 {
  width: 28px; height: 2px; margin-top: 6px; border-radius: 99px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.day .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 nearer, not bigger; .focus only brightens the ink, so the
   day in the lens still reads as chosen if the transform ever stopped. */
.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 so the wheel does not misreport the month; dimmed and barless. */
.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 secondary's lightest shade, so "where the wheel
   rests" and "what the page is showing" need not be told apart by position. */
.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; }
.day:focus { outline: none; }
/* Today, in the TERTIARY, beside the weekday — so "this is today" and "this is
   selected" are never the same colour saying two different things, and the mark
   rides in the centred content where perspective cannot clip it. */
.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);
}
/* ── 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 { display: flex; align-items: baseline; flex-wrap: wrap; }
.head-l h1 { margin: 2px 0; }
/* The kept-figure note. The tertiary clay, which is the one colour on this page
   reserved for "something moved that you should know about" — not the brick,
   which is a failure, and this is not one: it is the dashboard still working. */
.stale-note {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 3px 9px; border-radius: 99px;
  background: rgba(183,105,63,.12); border: 1px solid rgba(183,105,63,.3);
  color: var(--ter); font-size: 11px; font-weight: 560; white-space: nowrap;
  cursor: help;
}
.stale-note .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.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);
}
/* ── The examination picker ────────────────────────────────────────────
   A drawn menu, not the OS sheet: white surface, the page's own hairlines and
   shadow, the navy of the panels for the selected row. It drops out of the
   trigger rather than appearing — a short fall and a fade, the rows following a
   beat behind — and the chevron turns with it, so opening reads as one motion. */
.head { position: relative; z-index: 5; }
.exam-pick { position: relative; display: inline-flex; }
.exam-btn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 250px; height: 34px; padding: 0 10px 0 12px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.exam-btn:hover { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1); }
.exam-btn:focus-visible { outline: none; border-color: var(--sec); box-shadow: 0 0 0 3px rgba(32,110,166,.16); }
.exam-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-chev { width: 14px; height: 14px; stroke-width: 2; color: var(--ink-3); margin-left: 2px;
             transition: transform .28s var(--ease), color .18s; }
.exam-pick.open .exam-chev { transform: rotate(180deg); color: var(--sec); }
.exam-pick.open .exam-btn { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1); }

/* ── The date-range picker ──────────────────────────────────────────────
   The calendar button sits left of the chips and wears the segment's grey;
   when the window on screen is one it chose, it turns the rails' navy and
   carries the dates — the same "narrowed" signal as the exam picker. Its
   popover is the exam menu's surface and motion: white, the page hairline,
   the deep shadow, a short fall and fade from the top-right. */
/* Static on purpose: the popover positions against the HEADER, not the button.
   It is two months wide and the button sits mid-bar, so hung off the button
   it ran past the main panel's edge and was clipped; the header is always wide
   enough to hold it. */
.date-pick { position: static; display: inline-flex; }
.date-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; min-width: 34px; padding: 0 9px; justify-content: center;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.date-btn .ic { width: 16px; height: 16px; stroke-width: 1.7; }
.date-btn:hover { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1); color: var(--ink); }
.date-btn:focus-visible { outline: none; border-color: var(--sec); box-shadow: 0 0 0 3px rgba(32,110,166,.16); }
.date-pick.open .date-btn { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1); color: var(--sec); }
.date-pick.on .date-btn { background: var(--deep); border-color: var(--deep); color: #fff; }
.date-pick.on .date-btn:hover { background: #1b3d5d; }
.date-cur { font-variant-numeric: tabular-nums; }

.date-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: max-content; max-width: 100%; padding: 14px 14px 12px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--sh-3);
  transform-origin: top right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
}
.date-pick.open .date-pop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s;
}
.dp-head { display: flex; align-items: flex-start; gap: 6px; }
.dp-nav {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.dp-nav .ic { width: 14px; height: 14px; stroke-width: 2; }
.dp-nav:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.dp-nav:disabled { opacity: .35; cursor: default; }
.dp-months { display: flex; gap: 22px; padding: 0 6px; }
.dp-title { text-align: center; font-size: 12.5px; font-weight: 650; color: var(--ink);
            letter-spacing: -.008em; line-height: 28px; margin-bottom: 4px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 32px); row-gap: 2px; }
.dp-wd { height: 22px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
         letter-spacing: .1em; color: var(--ink-4); }
.dp-day {
  position: relative; height: 32px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 550; color: var(--ink-2);
  font-variant-numeric: tabular-nums; cursor: pointer; outline: none;
}
/* The span is one continuous band; the ends are navy discs on top of it. */
.dp-day.in { background: rgba(32,110,166,.10); color: var(--deep); }
.dp-day.a { border-radius: 16px 0 0 16px; }
.dp-day.b { border-radius: 0 16px 16px 0; }
.dp-day.a.b { border-radius: 16px; }
.dp-day::before {
  content: ""; position: absolute; inset: 1px 2px; border-radius: 50%;
  transition: background .14s, box-shadow .14s;
}
.dp-day > * { position: relative; }
.dp-day:hover:not(:disabled)::before { background: var(--surface-3); }
.dp-day.in:hover:not(:disabled)::before { background: rgba(32,110,166,.12); }
.dp-day.a, .dp-day.b { color: #fff; font-weight: 700; }
.dp-day.a::before, .dp-day.b::before { background: var(--deep) !important;
                                       box-shadow: 0 4px 10px -4px rgba(12,28,43,.55); }
.dp-day { isolation: isolate; }
.dp-day::before { z-index: -1; }
.dp-day:focus-visible::before { box-shadow: 0 0 0 2px var(--sec); }
/* Today: the clay dot the date wheel carried, under the numeral. */
.dp-day.today::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
  transform: translateX(-50%); border-radius: 50%; background: var(--ter);
}
.dp-day:disabled { color: var(--ink-4); opacity: .45; cursor: default; }

.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
           border-top: 1px solid var(--line); }
.dp-sum { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; min-width: 0;
          font-size: 11.5px; color: var(--ink-3); }
.dp-sum b { font-size: 12.5px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.dp-btn {
  height: 30px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--deep);
  background: var(--deep); color: #fff; font: inherit; font-size: 12px; font-weight: 650;
  cursor: pointer; transition: background .15s, opacity .15s;
}
.dp-btn:hover:not(:disabled) { background: #1b3d5d; }
.dp-btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.dp-btn.ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.dp-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) { .dp-months > .dp-month + .dp-month { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .date-pop, .date-pick.open .date-pop { transition: none; }
}

/* The exam's own colour, the one its bars carry in the charts, so the filter
   and the figures agree on which exam is which. "All" is the three at once. */
.exam-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sec);
            box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.exam-dot.all { background: conic-gradient(var(--sec) 0 120deg, var(--n3) 0 240deg, var(--ter) 0); }

/* Filtered to one exam: the trigger wears the panels' navy, so a narrowed view
   never passes for the whole at a glance. */
.exam-pick.on .exam-btn { background: var(--deep); color: #fff; border-color: var(--deep); }
.exam-pick.on .exam-btn:hover { background: #1b3d5d; }
.exam-pick.on .exam-chev { color: rgba(255,255,255,.7); }
.exam-pick.on.open .exam-btn { background: var(--deep); }

.exam-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 100%; width: max-content; max-width: min(380px, 80vw);
  max-height: min(420px, 70vh); overflow: auto;
  padding: 6px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--sh-3);
  outline: none;
  transform-origin: top right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
}
.exam-pick.open .exam-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s;
}
.exam-menu-h { padding: 7px 10px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
               text-transform: uppercase; color: var(--ink-4); }
.exam-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  cursor: pointer; outline: none;
  transition: background .14s, color .14s;
}
.exam-pick.open .exam-opt { animation: examIn .3s var(--ease) both;
                            animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes examIn { from { opacity: 0; transform: translateY(-4px) } }
.exam-opt-t { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.exam-opt:hover, .exam-opt:focus-visible, .exam-opt:focus { background: var(--surface-3); color: var(--ink); }
.exam-opt.on { background: rgba(32,110,166,.09); color: var(--deep); font-weight: 650; }
.exam-tick { width: 14px; height: 14px; stroke-width: 2.2; color: var(--sec);
             opacity: 0; transform: scale(.6); transition: opacity .18s, transform .22s var(--ease); }
.exam-opt.on .exam-tick { opacity: 1; transform: none; }
/* The "All" row is set apart from the list of exams by a hairline. */
.exam-opt[data-slug=""] { margin-bottom: 4px; position: relative; }
.exam-opt[data-slug=""]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px;
                                 height: 1px; background: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .exam-menu, .exam-pick.open .exam-menu, .exam-chev { transition: none; }
  .exam-pick.open .exam-opt { animation: none; }
}
.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;
}
/* The lookup and the chargeback portal still dim while they work — they carry
   their own "Searching…" states. The dashboard views draw a skeleton instead
   (below), so they are never shown dimmed. */
.view.look.busy, .view.charge.busy { opacity: .45; }

/* ── The skeleton ─────────────────────────────────────────────────────────
   The view's own cards, empty, with ONE light passing across the whole page.
   `background-attachment: fixed` is what makes it one: every placeholder paints
   a slice of the same viewport-wide gradient, so the sweep travels card to
   card instead of every bar flashing on its own clock. */
.view.skel { pointer-events: none; }
.view.skel > * { animation: skIn .32s var(--ease) both; }
.view.skel .card, .view.skel .kpi { animation: skIn .32s var(--ease) both;
                                    animation-delay: calc(var(--d, 0) * 35ms); }
@keyframes skIn { from { opacity: 0; transform: translateY(4px) } }
.sk {
  display: block; border-radius: 6px;
  background: linear-gradient(100deg, #edf0f4 0%, #edf0f4 38%, #f8fafc 50%, #edf0f4 62%, #edf0f4 100%);
  background-size: 200vw 100vh; background-attachment: fixed;
  animation: skSweep 1.6s linear infinite;
}
@keyframes skSweep { from { background-position: 100vw 0 } to { background-position: -100vw 0 } }
.sk-line { height: 9px; }
.sk-num  { height: 26px; margin: 10px 0 0; border-radius: 7px; }
.sk.w30 { width: 30%; } .sk.w40 { width: 40%; } .sk.w45 { width: 45%; } .sk.w50 { width: 50%; }
.sk.w55 { width: 55%; } .sk.w60 { width: 60%; } .sk.w70 { width: 70%; }

/* The real title, set quietly, so the reader knows which card is coming. */
.sk-title { color: var(--ink-4); }
.kpi.sk-box { cursor: default; padding-bottom: 12px; }
.kpi.sk-box .sk-line { height: 8px; margin-top: 3px; }
.sk-spark { margin-top: auto; height: 22px; border-radius: 6px 6px 3px 3px; opacity: .8; }

.sk-bars { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; gap: 6px;
           padding-top: 8px; border-bottom: 1px solid var(--axis); }
.sk-bar  { flex: 1 1 0; min-width: 0; border-radius: 4px 4px 0 0; }
.sk-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around;
           gap: 8px; padding-top: 4px; }
.sk-row  { display: flex; align-items: center; gap: 14px; }
.sk-val  { width: 44px; margin-left: auto; flex: none; }

/* A single card still loading while the rest of its view is on screen — the
   skeleton list it would have, plus a line saying it fills itself in. */
.card-load { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.card-load .sk-list { flex: 1 1 auto; opacity: .7; }
.card-load-m { flex: none; padding-top: 10px; font-size: 11.5px; color: var(--ink-3); }

.sat-card.sk-box { gap: 10px; }
.sat-card.sk-box .sk-line, .sat-card.sk-box .sk-num { margin-left: auto; margin-right: auto; }
.sat-card.sk-box .sk-num { width: 50%; height: 34px; margin-top: 0; }
.sk-exam { display: flex; flex-direction: column; gap: 8px; padding: 12px 0;
           border-top: 1px solid var(--line); }
.sk-exam:first-of-type { border-top: 0; }
.sat-live.sk-box > .sk-line { margin-bottom: 8px; }
.sk-track { height: 5px; border-radius: 3px; }

/* First paint: pills where the date segment will be, and a slow light down
   through each wheel's lens — the panels' own white at low alpha, so it reads
   as the surface catching light rather than as a spinner. */
.sk-pill { height: 24px; border-radius: 7px; margin: 0 3px; }
.app.booting .dial-lens::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
  background-size: 250% 100%;
  animation: lensSweep 1.6s ease-in-out infinite;
}
.app.booting .dial-lens::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 7px;
  transform: translate(-50%, -50%); border-radius: 4px;
  background: rgba(255,255,255,.14);
  animation: lensPulse 1.6s ease-in-out infinite;
}
@keyframes lensSweep { from { background-position: 150% 0 } to { background-position: -50% 0 } }
@keyframes lensPulse { 50% { background: rgba(255,255,255,.26) } }

@media (prefers-reduced-motion: reduce) {
  .app.booting .dial-lens::after, .app.booting .dial-lens::before { animation: none; }
  .sk { animation: none; background: #edf0f4; }
  .view.skel > *, .view.skel .card, .view.skel .kpi { animation: none; }
}
.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; }
/* The label gives way (ellipsis, full name on hover); the change badge never
   does. Without min-width: 0 the label could not shrink, so the badge was the
   thing squeezed — and wrapped "▼ 97%" onto two lines inside its own pill. */
.kpi .k {
  flex: 1 1 auto; min-width: 0;
  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; flex: none;
  white-space: nowrap;
  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; }
/* The last 24 hours, under the figure: a small change chip (against the 24
   hours before) and what was added. The same tints as the change badges —
   secondary blue up, brick down, grey flat. It keeps its height while empty so
   the tiles do not jump when it fills in. */
.kpi .k24 {
  display: flex; align-items: center; gap: 7px; min-height: 18px; margin-top: 5px;
  font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity .25s;
}
.kpi .k24.on { opacity: 1; }
.k24-d {
  flex: none; padding: 1px 6px; border-radius: 99px;
  font-size: 10px; font-weight: 680; font-variant-numeric: tabular-nums;
}
.k24-d.up   { background: rgba(32,110,166,.10); color: var(--sec); }
.k24-d.down { background: rgba(167,70,60,.10);  color: var(--alm); }
.k24-d.flat { background: var(--surface-3);     color: var(--ink-3); }
.k24-t { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
/* 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; }
/* The one number a chart states outright: its peak, set where the peak is. Big
   enough to be the thing you read after the shape, small enough that it is not
   a second title. */
.peaklab { font-size: 12px; font-weight: 680; letter-spacing: -.01em;
           paint-order: stroke; stroke: #fff; stroke-width: 3.5px;
           stroke-linejoin: round; }

.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); }
/* A check whose panel has not answered yet — neither clear nor a defect. A
   pulsing ring, not a tick or a bang, so a slow read is never read as a zero. */
.check.loading .dot { background: transparent; border: 2px solid var(--ink-4);
  box-sizing: border-box; animation: checkPulse 1.2s ease-in-out infinite; }
.check.loading .t { color: var(--ink-3); }
.check.loading .n { color: var(--ink-4); letter-spacing: .12em; }
@keyframes checkPulse { 0%, 100% { opacity: .3 } 50% { opacity: .85 } }
.check.ok .n { color: var(--ink-4); }

/* ── Tooltip ───────────────────────────────────────────────────────────── */
/* PINNED TO THE CORNER, MOVED BY TRANSFORM. The script positions it with a
   translate from (0,0); without top/left it started from its place in the
   flow — below the full-height dashboard — and every tooltip on the page was
   drawn off-screen. The panels' navy, so a reading on a chart looks like the
   rails it sits between, not a separate widget. */
.tip {
  position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none;
  padding: 9px 12px; min-width: 150px; max-width: 320px;
  background: linear-gradient(170deg, rgba(12,28,43,.97), rgba(20,48,74,.97));
  color: #fff;
  border: 1px solid rgba(128,170,206,.28);
  border-radius: var(--r); box-shadow: 0 18px 40px -12px rgba(6,16,26,.7), inset 0 1px 0 rgba(255,255,255,.08);
  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; color: #fff; }
.tip .tr span { color: rgba(255,255,255,.72); }
.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: normal; }

/* ── 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; }
  .tab .d-bar, .day .d-bar { margin-top: 4px; }
  .day .d-n { font-size: 23px; }
}
@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

   One screen, like every other view: a band that never moves, six panes chosen
   from the top, and under them a panel that fills what is left. Only the inside
   of a panel scrolls. The palette is the portal's own — the sidebars' navy for
   identity and emphasis, the tertiary clay for "this moved since it was
   submitted", the brick for "someone has to act on this", and nothing green,
   because nothing here is a traffic light.
   ════════════════════════════════════════════════════════════════════════ */

.view.look { display: block; overflow: hidden; grid-template-rows: none; }

/* ── the way in ────────────────────────────────────────────────────────── */
.lk-centre {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--gap); overflow: hidden;
}
.lk-box {
  width: min(1240px, 100%);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.lk-box-l {
  padding: 46px 44px;
  background: linear-gradient(158deg, var(--deep2), var(--deep) 58%, #1a3d5c);
  color: #fff; display: flex; flex-direction: column; justify-content: center;
}
.lk-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
              color: rgba(255,255,255,.5); margin-bottom: 14px; }
.lk-title { font-size: 38px; font-weight: 650; letter-spacing: -.03em; line-height: 1.08; }
.lk-lede { margin-top: 15px; font-size: 14px; line-height: 1.62; color: rgba(255,255,255,.72); }
.lk-box-r { padding: 42px 44px; display: flex; flex-direction: column; }
.lk-row-in { display: flex; gap: 9px; }
.lk-input {
  flex: 1 1 auto; min-width: 0; padding: 17px 20px; font: inherit; font-size: 16px;
  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: 14px; 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); }
.lk-foot-h { margin: 26px 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
             text-transform: uppercase; color: var(--ink-4); }
.lk-shapes { font-size: 12.5px; }
.lk-shapes th { width: 40%; text-align: left; padding: 9px 12px 9px 0; font-size: 12.5px;
                font-weight: 620; color: var(--ink-2); border-bottom: 1px solid var(--grid);
                white-space: nowrap; background: none; position: static; box-shadow: none;
                letter-spacing: 0; text-transform: none; }
.lk-shapes td { padding: 9px 0; color: var(--ink-3); border-bottom: 1px solid var(--grid); }
.lk-shapes tr:last-child th, .lk-shapes tr:last-child td { border-bottom: 0; }
.lk-state { font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.lk-state.err { color: var(--alm); }
.lk-centre.results { justify-content: flex-start; }
.lk-box.slim { grid-template-columns: minmax(0, 1fr); flex: none; }
.lk-box.slim .lk-box-l, .lk-box.slim .lk-foot-h, .lk-box.slim .lk-shapes { display: none; }
.lk-box.slim .lk-box-r { padding: 12px 14px; }
.lk-box.slim .lk-state { margin: 10px 2px 2px; }

.lk-hits {
  width: min(1240px, 100%); min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.lk-hits-h { flex: none; 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-hits-b { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lk-hit {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  transition: background .14s;
}
.lk-hit:last-child { border-bottom: 0; }
.lk-hit:hover { background: var(--surface-2); }
.lk-hit-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lk-hit-n { font-size: 13.5px; font-weight: 620; color: var(--ink); }
.lk-hit-m { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-hit-x { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 560px; }

/* ── chips: where something stands ─────────────────────────────────────── */
.lk-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 620; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line);
}
.lk-chip.ok { background: rgba(20,48,74,.07); color: var(--deep); border-color: rgba(20,48,74,.16); }
.lk-chip.bad { background: rgba(167,70,60,.1); color: var(--alm); border-color: rgba(167,70,60,.26); }
.lk-chip.draft { background: var(--surface-2); color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   THE DOSSIER
   ════════════════════════════════════════════════════════════════════════ */
.lkv { height: 100%; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }

.lk-band {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 11px 16px 11px 11px; border-radius: var(--r-lg);
  background: linear-gradient(104deg, var(--deep2), var(--deep) 62%, #1a3d5c);
  box-shadow: var(--sh-2); color: #fff;
}
.lk-face {
  flex: none; width: 54px; height: 66px; border-radius: 8px; overflow: hidden; padding: 0;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; cursor: zoom-in;
}
.lk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-nofile { font-size: 9.5px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.lk-who { min-width: 0; }
.lk-nm { font-size: 21px; font-weight: 640; letter-spacing: -.022em; line-height: 1.15;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-meta { margin-top: 4px; display: flex; align-items: baseline; gap: 7px; font-size: 12px;
           color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.lk-meta span { overflow: hidden; text-overflow: ellipsis; }
.lk-meta i { font-style: normal; color: rgba(255,255,255,.3); }
.lk-pills { margin-left: auto; display: flex; justify-content: flex-end; gap: 6px; }
.lk-pill { padding: 4px 11px; border-radius: 99px; background: rgba(255,255,255,.11);
           border: 1px solid rgba(255,255,255,.14); font-size: 11px; font-weight: 560;
           color: rgba(255,255,255,.9); white-space: nowrap; }
.lk-pill.warn { background: rgba(183,105,63,.34); border-color: rgba(183,105,63,.5); color: #f0d3c2; }
.lk-pill.bad  { background: rgba(167,70,60,.40); border-color: rgba(167,70,60,.62); color: #f6cfcb; }
.lk-back {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 12px; font-weight: 570; cursor: pointer; transition: background .15s, border-color .15s;
}
.lk-back:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.36); }
.lk-back .ic { width: 14px; height: 14px; }

.lk-tabs { flex: none; display: flex; gap: 3px; padding: 4px; background: var(--surface);
           border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.lk-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0;
  border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 560;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .16s, color .16s;
}
.lk-tab .ic { width: 15px; height: 15px; opacity: .72; }
.lk-tab:hover { background: var(--surface-3); color: var(--ink); }
.lk-tab.on { background: var(--deep); color: #fff; }
.lk-tab.on .ic { opacity: 1; }
.lk-n { font-style: normal; font-size: 10.5px; font-weight: 640; padding: 1px 6px; border-radius: 99px;
        background: var(--surface-3); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lk-n.hot { background: rgba(183,105,63,.16); color: #95542f; }
.lk-tab.on .lk-n { background: rgba(255,255,255,.18); color: #fff; }

/* ── the pane ──────────────────────────────────────────────────────────── */
.lk-pane { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap);
           grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
.lk-pane.p-overview { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); }
.lk-pane.in > * { animation: lkIn .26s var(--ease) both; }
@keyframes lkIn { from { opacity: 0 } }

.lk-p { min-width: 0; min-height: 0; display: flex; flex-direction: column;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r); box-shadow: var(--sh-2); overflow: hidden; }
.lk-p-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
          border-bottom: 1px solid var(--line); background: var(--surface-2); min-height: 44px; }
.lk-p-h h3 { font-size: 12.5px; font-weight: 660; letter-spacing: -.008em; color: var(--ink);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-p-s { margin-left: auto; font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
          font-variant-numeric: tabular-nums; }
.lk-p-h > .seg, .lk-p-h > .lk-apppick, .lk-p-h > .lk-tot { margin-left: auto; }
.lk-p-b { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lk-empty { padding: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; }
.lk-tot { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: var(--ink-3);
          font-variant-numeric: tabular-nums; }
.lk-tot b { font-size: 12px; font-weight: 660; color: var(--ink); }
.lk-tot i { font-style: normal; color: var(--ink-4); }
.lk-seg { padding: 2px; }
.lk-seg button { padding: 4px 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.lk-seg button .lk-n { font-size: 10px; padding: 0 5px; }
.lk-seg button.on .lk-n { background: var(--surface-3); color: var(--ink-3); }
.lk-linkbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 2px;
              font: inherit; font-size: 11.5px; font-weight: 600; color: var(--deep); cursor: pointer; }
.lk-linkbtn .ic { width: 13px; height: 13px; }
.lk-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── sections: a title and its fields ──────────────────────────────────────
   Laid out in flowing columns, so short sections pack beside long ones instead
   of every card being as tall as the tallest in its row. */
.lk-flow { padding: 14px; column-width: 330px; column-gap: 14px; }
.lk-flow > * { break-inside: avoid; margin-bottom: 14px; }
.lk-flow > .quals, .lk-flow > .media { column-span: all; }
.lk-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
          padding: 11px 13px 6px; }
.lk-sec-h { display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
            font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep); }
.lk-sec-h .ic { width: 13px; height: 13px; }
.lk-sec-note { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin: -2px 0 8px; max-width: 90ch; }
.lk-dl { display: flex; flex-direction: column; }
.lk-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px;
          padding: 6px 0; border-top: 1px solid var(--grid); align-items: baseline; }
.lk-row:first-child { border-top: 0; }
.lk-row dt { font-size: 11px; color: var(--ink-3); }
.lk-row dd { font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.lk-row dd.none { color: var(--ink-4); font-style: italic; font-size: 11.5px; }
.lk-row.warn dd { color: var(--alm); font-weight: 600; }
.lk-dl.two { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 26px; }
.lk-row.grp { display: block; grid-column: 1 / -1; padding: 10px 0 2px; border-top: 0;
              font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lk-none { font-size: 12px; color: var(--ink-4); padding: 4px 0 8px; }
.lk-sub2 { margin: 12px 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
           text-transform: uppercase; color: var(--ink-4); }

.lk-addr { font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.lk-addr-p { color: var(--ink-2); font-weight: 560; margin-top: 2px; }

/* The qualifications table: each level beside the marksheet that proves it. */
.lk-qt-w { overflow-x: auto; margin: 0 -2px 6px; }
.lk-qt { width: 100%; border-collapse: collapse; font-size: 12px; }
.lk-qt th { text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            color: var(--ink-3); padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.lk-qt td { padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; color: var(--ink); }
.lk-qt tr:last-child td { border-bottom: 0; }
.lk-qt td.lv { font-weight: 640; white-space: nowrap; color: var(--deep); }
.lk-qt td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-qt td.subj { color: var(--ink-2); max-width: 280px; }
.lk-qt .sub { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── documents ─────────────────────────────────────────────────────────── */
.lk-doc {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px 4px 7px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--deep); font: inherit; font-size: 11.5px; font-weight: 600;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.lk-doc .ic { width: 15px; height: 15px; flex: none; }
.lk-doc-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-doc-m { font-weight: 500; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; }
.lk-doc:hover { background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 6px 16px -10px rgba(12,28,43,.7); }
.lk-doc:hover .lk-doc-m { color: rgba(255,255,255,.7); }

.lk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; padding: 2px 0 8px; }
.lk-tile {
  display: flex; flex-direction: column; padding: 0; text-align: left; cursor: zoom-in; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s, box-shadow .16s, transform .16s var(--ease);
}
.lk-tile:hover { border-color: rgba(20,48,74,.35); box-shadow: 0 12px 26px -16px rgba(12,28,43,.55); transform: translateY(-1px); }
.lk-tile-f { height: 104px; display: grid; place-items: center; position: relative;
             background: linear-gradient(160deg, #f4f6f9, #e9edf2); border-bottom: 1px solid var(--line); }
.lk-tile-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-tile-f .ic { width: 30px; height: 30px; color: var(--deep); opacity: .55; stroke-width: 1.3; }
.lk-tile-f.pdf { background: linear-gradient(160deg, #f7f1ed, #efe5de); }
.lk-tile-f.pdf .ic { color: var(--ter); opacity: .8; }
.lk-tile-k { position: absolute; bottom: 7px; right: 8px; font-size: 9px; font-weight: 700; letter-spacing: .08em;
             padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.85); color: var(--ink-2); }
.lk-tile-c { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.lk-tile-n { font-size: 12px; font-weight: 620; color: var(--ink); line-height: 1.3; }
.lk-tile-m { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lk-tile-v { font-size: 10px; color: var(--ter); font-weight: 600; margin-top: 2px; }
.lk-tile.past { opacity: .72; }
.lk-docflow { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ── the viewer ────────────────────────────────────────────────────────── */
.lk-viewer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 28px;
             background: rgba(8,19,30,.62); backdrop-filter: blur(4px); animation: lkIn .18s ease both; }
.lk-viewer-c { width: min(1180px, 100%); height: min(92vh, 1100px); display: flex; flex-direction: column;
               background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
               box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.lk-viewer-h { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px;
               border-bottom: 1px solid var(--line); background: var(--surface-2); }
.lk-viewer-t { min-width: 0; flex: 1 1 auto; }
.lk-viewer-n { font-size: 14px; font-weight: 650; color: var(--ink); }
.lk-viewer-m { font-size: 11px; color: var(--ink-3); margin-top: 2px; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lk-viewer-x { display: flex; gap: 6px; flex: none; }
.lk-vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px;
           padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
           color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 560; cursor: pointer; }
.lk-vbtn.wide { padding: 0 12px; }
.lk-vbtn:hover:not(:disabled) { background: var(--deep); border-color: var(--deep); color: #fff; }
.lk-vbtn:disabled { opacity: .35; cursor: default; }
.lk-vbtn .ic { width: 15px; height: 15px; }
.lk-viewer-b { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: #2a3441; overflow: auto; }
.lk-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lk-viewer-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
.lk-viewer-e { color: rgba(255,255,255,.8); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   1 · OVERVIEW
   ════════════════════════════════════════════════════════════════════════ */
.lk-ov-who { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lk-ov-who > .lk-sec { border: 0; padding: 0; }
.lk-ov-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lk-ov-docs .lk-tile-f { height: 78px; }

.lk-apps { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lk-appcard { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px 10px; cursor: pointer;
              background: linear-gradient(180deg, #fff, #fbfcfd);
              transition: border-color .16s, box-shadow .16s, transform .16s var(--ease); }
.lk-appcard:hover { border-color: rgba(20,48,74,.3); box-shadow: 0 14px 30px -20px rgba(12,28,43,.55); transform: translateY(-1px); }
.lk-appcard-h { display: flex; align-items: flex-start; gap: 10px; }
.lk-appcard-n { font-size: 13.5px; font-weight: 650; color: var(--ink); line-height: 1.3; flex: 1 1 auto; }
.lk-appcard-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 11px 0 10px; }
.lk-appcard-f > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk-appcard-f span { font-size: 10px; color: var(--ink-3); letter-spacing: .02em; }
.lk-appcard-f b { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lk-appcard-x { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                border-top: 1px solid var(--grid); padding-top: 8px; }
.lk-cmpbadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; cursor: pointer;
               border: 1px solid rgba(20,48,74,.14); background: rgba(20,48,74,.05); color: var(--deep);
               font: inherit; font-size: 11px; font-weight: 600; }
.lk-cmpbadge .ic { width: 13px; height: 13px; }
.lk-cmpbadge.hot { border-color: rgba(183,105,63,.32); background: rgba(183,105,63,.1); color: #8e4f2c; }

.lk-alerts { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lk-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
            width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
            border: 1px solid var(--line); background: var(--surface); font: inherit;
            transition: box-shadow .15s, border-color .15s; }
.lk-alert:hover { box-shadow: 0 10px 22px -16px rgba(12,28,43,.6); }
.lk-alert > .ic { width: 17px; height: 17px; }
.lk-alert .ic.go { width: 13px; height: 13px; color: var(--ink-4); }
.lk-alert-a { font-size: 12.5px; font-weight: 620; color: var(--ink); line-height: 1.35; }
.lk-alert-b { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.lk-alert.bad { border-color: rgba(167,70,60,.3); background: rgba(167,70,60,.05); }
.lk-alert.bad > .ic { color: var(--alm); }
.lk-alert.warn { border-color: rgba(183,105,63,.32); background: rgba(183,105,63,.06); }
.lk-alert.warn > .ic { color: var(--ter); }
.lk-alert.info > .ic { color: var(--deep); }
.lk-allclear { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 10px;
               background: rgba(20,48,74,.05); color: var(--deep); font-size: 12.5px; line-height: 1.55; }
.lk-allclear .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════════
   3 · APPLICATIONS
   ════════════════════════════════════════════════════════════════════════ */
.lk-apppick { display: flex; gap: 3px; padding: 2px; background: var(--surface-3); border-radius: 9px; overflow-x: auto; }
.lk-apppick-b { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: 0; border-radius: 7px;
                background: none; font: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.lk-apppick-b .s { font-size: 10px; color: var(--ink-4); }
.lk-apppick-b.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }

.lk-posts { list-style: none; padding: 0; margin: 2px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.lk-posts li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px;
               padding: 8px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.lk-posts .rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
                font-size: 11.5px; font-weight: 700; background: var(--deep); color: #fff; }
.lk-posts .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.lk-posts .pf { font-size: 11px; color: var(--ink-3); }
.lk-posts li.off { opacity: .6; }
.lk-posts li.off .rk { background: var(--surface-3); color: var(--ink-4); }

.lk-fee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 10px; }
.lk-fee-c { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
            display: flex; flex-direction: column; gap: 3px; }
.lk-fee-c .k { font-size: 10.5px; color: var(--ink-3); }
.lk-fee-c b { font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lk-fee-c .n { font-size: 10.5px; color: var(--ink-3); }
.lk-fee-c.mute b { color: var(--ink-4); font-size: 15px; }
.lk-fee-c.hot { border-color: rgba(183,105,63,.4); background: rgba(183,105,63,.07); }
.lk-fee-c.hot b, .lk-fee-c.hot .n { color: #8e4f2c; }
.lk-fee-b { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0 8px; font-size: 11.5px; }
.lk-fee-b i { font-style: normal; color: var(--ink-3); }
.lk-fee-b b { font-weight: 600; color: var(--ink-2); }
.lk-fee-b .moved b:last-child { color: #8e4f2c; }

/* ════════════════════════════════════════════════════════════════════════
   4 · OTR vs APPLICATION
   ════════════════════════════════════════════════════════════════════════ */
.lk-cmp-body { display: flex; flex-direction: column; min-height: 100%; }
.lk-cmp-top { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 10px; }
.lk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px; }
.lk-stat { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
           display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk-stat .k { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-stat b { font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.lk-stat .s { font-size: 10px; color: var(--ink-4); }
.lk-stat.ok b { color: var(--deep); }
.lk-stat.chg { border-color: rgba(183,105,63,.36); background: rgba(183,105,63,.07); }
.lk-stat.chg b { color: #8e4f2c; }
.lk-stat.na b { color: var(--ink-2); }
.lk-stat.pct { background: linear-gradient(135deg, var(--deep2), var(--deep)); border-color: transparent; }
.lk-stat.pct .k { color: rgba(255,255,255,.6); }
.lk-stat.pct b { color: #fff; }
.lk-pctbar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: 6px; }
.lk-pctbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #80aace, #ffffff); }

.lk-impacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lk-impact { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-radius: 12px;
             border: 1px solid var(--line); background: var(--surface); }
.lk-impact > .ic { width: 18px; height: 18px; color: var(--deep); flex: none; margin-top: 1px; }
.lk-impact b { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.lk-impact span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; }
.lk-impact.hot { border-color: rgba(183,105,63,.38); background: rgba(183,105,63,.06); }
.lk-impact.hot > .ic, .lk-impact.hot b { color: #8e4f2c; }

.lk-cmp-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
              gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.lk-cmp-bar > span { font-size: 11px; color: var(--ink-3); }
.lk-cmp-tw { padding: 0 0 6px; }

.lk-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; color: var(--ink); }
.lk-tbl.fixed { table-layout: fixed; }
.lk-tbl thead th { position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap; padding: 8px 12px;
                   font-size: 9.5px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase;
                   color: var(--ink-3); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line-2); }
.lk-tbl td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; user-select: text;
             overflow: hidden; text-overflow: ellipsis; }
.lk-tbl.fixed td { white-space: nowrap; }
.lk-tbl th.num, .lk-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lk-tbl tbody tr:last-child td { border-bottom: 0; }
.lk-tbl tbody tr:hover td { background: var(--surface-2); }
.lk-tbl tr.past td { color: var(--ink-3); }
.lk-tbl tr.drift td { background: rgba(183,105,63,.08); }
.lk-tbl tr.alarm td { background: rgba(167,70,60,.08); color: var(--alm); }
.lk-tbl tr.alarm td:first-child { box-shadow: inset 3px 0 0 var(--alm); }
.lk-tz { font-style: normal; margin-left: 5px; color: var(--ink-4); letter-spacing: .06em; }
td.lk-none-row { padding: 22px 14px; color: var(--ink-3); white-space: normal !important; font-size: 12.5px; }

/* The comparison table itself. It sits under a sticky filter bar, so its own
   header sticks below that bar rather than under it. */
.lk-cmp thead th { top: 51px; }
.lk-cmp thead th small { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 500; letter-spacing: 0;
                         text-transform: none; color: var(--ink-4); white-space: normal; }
.lk-cmp td { white-space: normal !important; vertical-align: top; padding: 9px 12px; }
.lk-cmp tr.grp td { padding: 14px 12px 6px; background: var(--surface) !important; border-bottom: 1px solid var(--line-2);
                    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep); }
.lk-cmp td.fld { font-weight: 560; color: var(--ink-2); }
.lk-cmp td.fld > span { display: block; }
.lk-cmp td.v { font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.lk-cmp tr.changed td.v.then { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(183,105,63,.55); }
.lk-cmp tr.changed td.v.now { color: #8e4f2c; font-weight: 600; }
.lk-cmp tr.changed td { background: rgba(183,105,63,.045); }
.lk-cmp tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--ter); }
.lk-cmp tr.na td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }
.lk-tags { display: flex; gap: 4px; margin-top: 4px; }
.lk-tags i { font-style: normal; font-size: 9.5px; font-weight: 650; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; }
.lk-tags i.fee { color: #8e4f2c; background: rgba(183,105,63,.12); }
.lk-tags i.elig { color: var(--deep); background: rgba(20,48,74,.08); }
.lk-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px;
         font-size: 10.5px; font-weight: 640; white-space: nowrap; }
.lk-st .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.lk-st.match { background: rgba(20,48,74,.07); color: var(--deep); }
.lk-st.changed { background: rgba(183,105,63,.15); color: #8e4f2c; }
.lk-st.na { background: var(--surface-3); color: var(--ink-3); }
.lk-st-n { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.lockedblk { margin: 14px; background: var(--surface-2); }
.lockedblk .lk-sec-h { color: var(--ink-2); }

/* Narrow and short screens give up furniture first, never the data. */
@media (max-width: 1460px) {
  .lk-pills .lk-pill:not(.warn):not(.bad):nth-child(n+3) { display: none; }
  .lk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk-stat.pct { grid-column: span 3; }
}
@media (max-width: 1280px) {
  .lk-tab span { display: none; }
  .lk-tab { padding: 8px 12px; }
  .lk-pills .lk-pill:not(.warn):not(.bad) { display: none; }
  .lk-pane.p-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lk-pane.p-overview > .ov-right { grid-column: 1 / -1; }
}
@media (max-height: 860px) {
  .lk-face { width: 46px; height: 56px; }
  .lk-nm { font-size: 18.5px; }
  .lk-band { padding: 9px 14px 9px 9px; gap: 13px; }
  .lk-tab { padding: 6px 12px; font-size: 12px; }
  .lk-stat b { font-size: 20px; }
}

/* ── details left under a "No" ─────────────────────────────────────────── */
.lk-row.stale dt, .lk-row.stale dd { color: var(--ink-4); }
.lk-row.stale dd { text-decoration: line-through; text-decoration-color: rgba(131,141,156,.45); }
.lk-row.stale .lk-doc { opacity: .6; }
.lk-sec-note.stale { font-size: 11px; color: var(--ink-3); background: var(--surface-2); border-radius: 7px;
                     padding: 7px 9px; margin: 0 0 6px; }

/* ── a document chip that sits beside its own label ────────────────────── */
.lk-doc.compact { padding: 3px 9px 3px 6px; font-size: 11px; }
.lk-doc.compact .ic { width: 14px; height: 14px; }

/* ── what changed, on the application card ─────────────────────────────── */
.lk-appcard-c { list-style: none; margin: 0 0 10px; padding: 8px 10px; border-radius: 9px;
                background: rgba(183,105,63,.06); border: 1px solid rgba(183,105,63,.2);
                display: flex; flex-direction: column; gap: 5px; }
.lk-appcard-c li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0; flex-wrap: wrap; }
.lk-appcard-c .f { font-weight: 620; color: var(--ink-2); }
.lk-appcard-c .a { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(183,105,63,.5); }
.lk-appcard-c .b { color: #8e4f2c; font-weight: 640; }
.lk-appcard-c .ic { width: 11px; height: 11px; color: var(--ink-4); }
.lk-appcard-c .tag { font-style: normal; font-size: 9.5px; font-weight: 650; padding: 1px 6px; border-radius: 4px; margin-left: auto; }
.lk-appcard-c .tag.fee { color: #8e4f2c; background: rgba(183,105,63,.14); }
.lk-appcard-c .tag.elig { color: var(--deep); background: rgba(20,48,74,.08); }
.lk-appcard-c li.more { color: var(--ink-3); font-size: 11px; }

/* ── the overview's key documents: four small, all visible ─────────────── */
.lk-ov-docs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lk-ov-docs .lk-tile-f { height: 62px; }
.lk-ov-docs .lk-tile-f .ic { width: 22px; height: 22px; }
.lk-ov-docs .lk-tile-c { padding: 6px 7px 7px; }
.lk-ov-docs .lk-tile-n { font-size: 10.5px; }
.lk-ov-docs .lk-tile-m, .lk-ov-docs .lk-tile-k { display: none; }
.lk-ov-who .lk-row { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
.lk-ov-who .lk-row dd { overflow-wrap: normal; word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-ov-who > .lk-sec .lk-sec-h { margin-top: 2px; }

/* ── thumbnails stay inside their frame ────────────────────────────────────
   A percentage height inside a grid-placed frame does not always resolve, and
   when it did not the photograph grew to its own aspect and sat over its own
   caption. Pinned to the frame instead. */
.lk-tile-f { overflow: hidden; }
.lk-tile-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* An entitlement is emphasised, never painted in the colour of a problem. */
.lk-row.emph dd { color: var(--deep); font-weight: 650; }

/* ── the application's top row: where it stands, what was chosen, what it
   cost, and what it stands on ─────────────────────────────────────────── */
.lk-appbody { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.lk-apptop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lk-apptop > .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lk-appbody > .lk-flow { padding: 0; }
.lk-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-fee-c b { font-size: 17px; }

/* The change list on a card keeps each change to one line. */
.lk-appcard-c li { flex-wrap: nowrap; }
.lk-appcard-c .f { flex: none; }
.lk-appcard-c .a, .lk-appcard-c .b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-appcard-c .a { flex: 0 1 auto; max-width: 30%; }
.lk-appcard-c .tag { flex: none; }
@media (max-width: 1280px) {
  .lk-apptop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════
   THE CHARGEBACK PORTAL

   Its own screen, on the same white-card, navy-accent surface as the rest of the
   portal. Three status colours and no more: green for the payment kept, the
   portal's warm tone for a duplicate to charge back, its red for anything that
   needs a human. It carries the payments desk's whole task on one screen.
   ════════════════════════════════════════════════════════════════════════ */
.view.charge { display: block; overflow-y: auto; overflow-x: hidden; }
.cb {
  --cb-keep: #2f8f5b;  --cb-keep-bg: #eaf6ef;
  --cb-dup:  var(--ter); --cb-dup-bg: #f7ede4;
  --cb-red:  var(--alm); --cb-red-bg: #f7e8e6;
  max-width: 1160px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column;
}

/* ── search screen ─────────────────────────────────────────────────────── */
.cb-hero {
  flex: 1 1 auto; min-height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 24px 16px 40px;
}
.cb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--deep); font-weight: 650; font-size: 13px; letter-spacing: .02em;
  background: var(--surface-3); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.cb-badge .ic { width: 17px; height: 17px; stroke: var(--deep); fill: none; }
.cb-h1 { font-size: 30px; font-weight: 700; color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.cb-lede { color: var(--ink-2); max-width: 560px; margin: 0 auto 26px; line-height: 1.5; }
.cb-form { width: 100%; max-width: 660px; }
.cb-row { display: flex; gap: 10px; }
.cb-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px;
  padding: 15px 18px; border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .15s;
}
.cb-input:focus { outline: none; border-color: var(--sec); box-shadow: 0 0 0 4px rgba(32,110,166,.14); }
.cb-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 650; font-size: 15px; color: #fff; cursor: pointer;
  background: var(--deep); border: none; border-radius: var(--r); padding: 0 20px;
  transition: background .15s, transform .05s;
}
.cb-go:hover { background: var(--deep2); }
.cb-go:active { transform: translateY(1px); }
.cb-go:disabled { opacity: .6; cursor: default; }
.cb-go .ic { width: 18px; height: 18px; stroke: #fff; fill: none; }
.cb-err {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 14px; color: var(--cb-red); font-size: 14px; font-weight: 550;
}
.cb-err .ic { width: 18px; height: 18px; stroke: var(--cb-red); fill: none; }
.cb-hints {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px;
  margin-top: 30px; text-align: left;
}
.cb-hint { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); }
.cb-hint b { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.cb-hint span { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ── top bar (result + chooser) ────────────────────────────────────────── */
.cb-topbar { display: flex; align-items: center; gap: 14px; padding: 18px 4px 14px; }
.cb-back {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--sec); cursor: pointer; background: none; border: none; padding: 4px 2px;
}
.cb-back .ic { width: 16px; height: 16px; stroke: var(--sec); fill: none; }
.cb-back:hover { color: var(--deep); }
.cb-topbar-label { color: var(--ink-3); font-size: 13px; }

/* ── cards ─────────────────────────────────────────────────────────────── */
.cb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.cb-appcard { padding: 16px 20px; margin-bottom: 12px; }
.cb-exam { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.cb-nums { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.cb-kv { display: flex; flex-direction: column; gap: 2px; }
.cb-kv-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); font-weight: 600; }
.cb-kv-v { font-size: 14.5px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── the decision banner ───────────────────────────────────────────────── */
.cb-decision { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: var(--r-lg); margin-bottom: 12px; border: 1px solid; }
.cb-dec-ic { width: 26px; height: 26px; flex: 0 0 auto; fill: none; margin-top: 1px; }
.cb-dec-h { font-size: 16px; font-weight: 700; line-height: 1.3; }
.cb-dec-s { font-size: 13px; margin-top: 3px; line-height: 1.45; }
.cb-decision.cb-act    { background: var(--cb-dup-bg); border-color: #e6cbb2; }
.cb-act .cb-dec-ic     { stroke: var(--cb-dup); } .cb-act .cb-dec-h { color: #8a4a24; } .cb-act .cb-dec-s { color: #9a5c39; }
.cb-decision.cb-ok     { background: var(--cb-keep-bg); border-color: #bfe3cd; }
.cb-ok .cb-dec-ic      { stroke: var(--cb-keep); } .cb-ok .cb-dec-h { color: #1f6e44; } .cb-ok .cb-dec-s { color: #2f8f5b; }
.cb-decision.cb-alarm  { background: var(--cb-red-bg); border-color: #e6b7b1; }
.cb-alarm .cb-dec-ic   { stroke: var(--cb-red); } .cb-alarm .cb-dec-h { color: #8f342b; } .cb-alarm .cb-dec-s { color: #a7463c; }
.cb-decision.cb-idle   { background: var(--surface-3); border-color: var(--line); }
.cb-idle .cb-dec-ic    { stroke: var(--ink-3); } .cb-idle .cb-dec-h { color: var(--ink-2); } .cb-idle .cb-dec-s { color: var(--ink-3); }

/* ── stats strip ───────────────────────────────────────────────────────── */
.cb-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.cb-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh-1); }
.cb-stat-v { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-stat-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); font-weight: 600; margin-top: 2px; }
.cb-stat-warn .cb-stat-v { color: var(--cb-dup); }

/* ── the transactions table ────────────────────────────────────────────── */
.cb-tablecard { padding: 4px 6px 6px; overflow: hidden; }
.cb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cb-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-4); font-weight: 600; padding: 12px 12px 8px; border-bottom: 1px solid var(--line);
}
.cb-table th.num, .cb-table td.num { text-align: right; }
.cb-tr td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cb-tr:last-child td { border-bottom: none; }
.cb-tr { border-left: 3px solid transparent; }
.cb-keep  td:first-child { box-shadow: inset 3px 0 0 var(--cb-keep); }
.cb-dup   td:first-child { box-shadow: inset 3px 0 0 var(--cb-dup); }
.cb-review td:first-child { box-shadow: inset 3px 0 0 var(--cb-red); }
.cb-tr.cb-keep { background: linear-gradient(90deg, var(--cb-keep-bg), transparent 60%); }
.cb-tr.cb-dup  { background: linear-gradient(90deg, var(--cb-dup-bg), transparent 60%); }
.cb-tr.cb-review { background: linear-gradient(90deg, var(--cb-red-bg), transparent 60%); }
.cb-tr.cb-idle td { color: var(--ink-3); }

.cb-pillcell { white-space: nowrap; }
.cb-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 5px; color: #fff; }
.cb-pill-keep { background: var(--cb-keep); }
.cb-pill-dup  { background: var(--cb-dup); }
.cb-pill-review { background: var(--cb-red); }
.cb-pill-idle { background: var(--ink-4); }
.cb-firstmark { display: block; font-size: 10px; color: var(--ink-4); margin-top: 4px; }

.cb-when { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-amt-off { color: var(--cb-red); text-decoration: underline dotted; }
.cb-status { display: flex; flex-direction: column; gap: 3px; }
.cb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cb-dot-keep { background: var(--cb-keep); } .cb-dot-dup { background: var(--cb-dup); }
.cb-dot-review { background: var(--cb-red); } .cb-dot-idle { background: var(--ink-4); }
.cb-ecode { font-size: 11px; color: var(--cb-dup); font-weight: 600; }
.cb-refund { font-size: 11px; color: var(--ink-3); }
.cb-bank { color: var(--ink-2); }
.cb-verdict { font-size: 11.5px; font-weight: 600; }
.cb-verdict-paid { color: var(--cb-keep); } .cb-verdict-failed { color: var(--cb-red); }
.cb-verdict-pending, .cb-verdict-unknown { color: var(--ink-3); }
.cb-berr { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.cb-refs { }
.cb-ref { display: flex; gap: 6px; align-items: baseline; margin-bottom: 2px; }
.cb-ref-k { font-size: 10px; text-transform: uppercase; color: var(--ink-4); width: 34px; flex: 0 0 auto; }
.cb-ref-v { font-size: 11.5px; color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.cb-empty { padding: 30px; text-align: center; color: var(--ink-3); }

/* ── chooser ───────────────────────────────────────────────────────────── */
.cb-choose { display: flex; flex-direction: column; gap: 8px; }
.cb-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 18px; cursor: pointer; text-align: left; box-shadow: var(--sh-1);
  transition: border-color .12s, transform .05s;
}
.cb-choice:hover { border-color: var(--sec); }
.cb-choice:active { transform: translateY(1px); }
.cb-choice-l b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 650; }
.cb-choice-sub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-choice .ic { width: 18px; height: 18px; stroke: var(--sec); fill: none; flex: 0 0 auto; }

@media (max-width: 900px) {
  .cb-stats { grid-template-columns: repeat(2, 1fr); }
  .cb-hints { grid-template-columns: repeat(2, 1fr); }
}

/* ── chargeback: the candidate's other applications ────────────────────── */
.cb-sibs { margin-bottom: 12px; }
.cb-sibs-head { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; margin: 0 2px 8px; }
.cb-sibs-head .ic { width: 17px; height: 17px; stroke: var(--deep); fill: none; flex: 0 0 auto; }
.cb-sibs-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cb-sib {
  flex: 0 0 auto; min-width: 210px; max-width: 300px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--sh-1); cursor: pointer;
  transition: border-color .12s, transform .05s; font: inherit;
}
.cb-sib:hover { border-color: var(--sec); }
.cb-sib:active { transform: translateY(1px); }
.cb-sib-cur { cursor: default; border-color: var(--deep); background: var(--surface-3); }
.cb-sib-cur:hover { border-color: var(--deep); }
.cb-sib-exam { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-sib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cb-sib-status { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; text-transform: capitalize; }
.cb-sib-paid { background: var(--cb-keep-bg, #eaf6ef); color: #1f6e44; }
.cb-sib-none, .cb-sib-pending, .cb-sib-failed, .cb-sib-unpaid { background: var(--surface-3); color: var(--ink-3); }
.cb-sib-dupflag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--cb-dup-bg, #f7ede4); color: #8a4a24; }
.cb-sib-ok { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; color: #2f8f5b; }
.cb-sib-app { font-size: 11.5px; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.cb-sib-here { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--deep); font-weight: 700; margin-top: 6px; }

/* ── chargeback: fee breakdown ─────────────────────────────────────────── */
.cb-fee { display: flex; align-items: stretch; gap: 16px; padding: 16px 20px; margin-bottom: 12px; flex-wrap: wrap; }
.cb-fee-l { flex: 1 1 auto; min-width: 260px; }
.cb-fee-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); font-weight: 600; margin-bottom: 8px; }
.cb-fee-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cb-chip { display: inline-flex; align-items: baseline; gap: 6px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.cb-chip-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); font-weight: 600; }
.cb-chip-v { font-size: 13px; color: var(--ink); font-weight: 600; }
.cb-fee-reason { font-size: 13px; color: var(--ink-2); }
.cb-fee-r { flex: 0 0 auto; text-align: right; align-self: center; }
.cb-fee-amt { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-fee-amtk { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); font-weight: 600; }
.cb-fee-warn { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 10px 12px; border-radius: var(--r); background: var(--cb-red-bg, #f7e8e6); color: #8f342b; font-size: 13px; font-weight: 550; }
.cb-fee-warn .ic { width: 18px; height: 18px; stroke: var(--cb-red, #a7463c); fill: none; flex: 0 0 auto; }
.cb-fee.cb-fee-off { border-color: #e6b7b1; }

/* ── candidate lookup: per-application downloads ───────────────────────── */
.lk-downloads { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lk-dlbtn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 10px 13px; color: var(--deep); font-weight: 600; font-size: 13.5px;
  box-shadow: var(--sh-1); transition: border-color .12s, background .12s, transform .05s;
}
.lk-dlbtn:hover { border-color: var(--sec); background: var(--surface-2); }
.lk-dlbtn:active { transform: translateY(1px); }
.lk-dlbtn .ic { width: 18px; height: 18px; stroke: var(--sec); fill: none; flex: 0 0 auto; }
.lk-dlbtn .ic2 { width: 14px; height: 14px; stroke: var(--ink-4); fill: none; margin-left: auto; flex: 0 0 auto; }
.lk-dlbtn span { flex: 1 1 auto; }
.lk-dlbtn.off { color: var(--ink-4); border-style: dashed; box-shadow: none; cursor: default; background: var(--surface-2); }
.lk-dlbtn.off .ic { stroke: var(--ink-4); }
.lk-dlbtn-no { font-size: 11px; color: var(--ink-4); font-weight: 500; margin-left: auto; }
.lk-dlbtn.small { padding: 7px 11px; font-size: 12.5px; box-shadow: none; }

/* ── candidate lookup: a compact per-application payment list ───────────── */
.lk-paylist { list-style: none; margin: 0; padding: 0; }
.lk-payrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.lk-payrow:first-child { border-top: none; }
.lk-pay-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: 0 0 auto; }
.lk-payrow.ok .lk-pay-dot { background: #2f8f5b; }
.lk-payrow.alarm .lk-pay-dot { background: var(--alm); }
.lk-pay-amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 72px; }
.lk-pay-st { color: var(--ink-2); text-transform: capitalize; flex: 1 1 auto; }
.lk-payrow.alarm .lk-pay-st { color: var(--alm); }
.lk-pay-when { color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ── candidate lookup: payments grouped by application ─────────────────── */
.lk-paygroups { display: flex; flex-direction: column; gap: 14px; }
.lk-paygroup { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.lk-paygroup-h { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.lk-paygroup-l { flex: 1 1 auto; min-width: 0; }
.lk-paygroup-x { font-size: 14px; font-weight: 650; color: var(--ink); }
.lk-paygroup-m { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lk-paygroup .lk-tbl { margin: 0; }

/* ── the bottom-right person button (Satyam), twin of the search corner ──── */
/* A cell is a button, so a click leaves the browser's own focus ring on it —
   two blue rules across a dark wheel. The dial shows keyboard focus itself. */
.tab:focus { outline: none; }
.tab:focus-visible { background: rgba(255,255,255,.10); }
/* The right rail is the date wheel again, and a date wheel HAS a lens: the
   frame the chosen day rests in. (It was hidden while the rail was the far
   side of a section belt, which chose nothing of its own.) */
#beltDial .dial-lens { visibility: visible; }

.rail > .rail-person { position: relative; z-index: 2; }
.rail-person {
  margin-top: auto; flex: none; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px 7px; border-radius: var(--r);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.14); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.rail-person:hover { background: rgba(255,255,255,.15); color: #fff; }
.rail-person.on {
  background: rgba(255,255,255,.17); color: #fff; border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.rail-person .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.rail-person-n { font-size: 11px; font-weight: 650; letter-spacing: .02em; line-height: 1; }

/* ── the version mark, the rail's last line ───────────────────────────────
   Pushed to the foot on its own when nothing above claims the bottom; directly
   under Satyam or the door when one does, so two `margin-top: auto`s never split
   the free space and float it up the rail. */
.rail > .rail-ver { position: relative; z-index: 2; }
.rail-ver {
  margin-top: auto; padding-top: 6px; flex: none;
  font-size: 9px; font-weight: 700; letter-spacing: .13em; line-height: 1;
  color: rgba(255,255,255,.42); font-variant-numeric: tabular-nums;
  user-select: none; pointer-events: none;
}
.rail-person:not([hidden]) ~ .rail-ver,
.rail-out:not([hidden]) ~ .rail-ver { margin-top: 0; }

/* ── Satyam's three stat cards, filling the view vertically ─────────────── */
/* Compact and centred: the cards are content-sized (not stretched to fill the
   view) and the whole group is centred both ways, at about half the previous
   size — number and label included. */
/* TWO COLUMNS: the headline cards on the left, the live-exam countdowns on the
   right, both filling the height so it fits without a scroll. The page is not
   scroll-LOCKED (overflow:auto) — if a small screen cannot fit it, it scrolls —
   but at a normal desk size everything sits on one screen. */
.view.satyam { display: block; overflow: auto; grid-template-rows: none; }
.sat {
  height: 100%; max-width: 1180px; margin: 0 auto; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch;
}
.sat-cards { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sat-card {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 10px clamp(14px, 2vw, 28px);
}
.sat-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.sat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sat-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.sat-v {
  font-size: clamp(26px, 3.2vw, 46px); font-weight: 800; line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sat-note { font-size: 11px; color: var(--ink-4); margin-top: 5px; }

/* live examinations — the right column, filling the height beside the cards */
.sat-live {
  display: flex; flex-direction: column; min-height: 0; overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px clamp(16px, 2vw, 24px);
}
.sat-live-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; flex: none; }
.sat-live-t { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sat-live-c { font-size: 12px; color: var(--ink-4); }
.sat-exam { padding: 9px 0; border-top: 1px solid var(--line); }
.sat-exam:first-of-type { border-top: 0; padding-top: 2px; }
.sat-exam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sat-exam-n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sat-exam-d { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sat-exam-bar { height: 5px; border-radius: 3px; background: var(--surface-3); margin: 8px 0 5px; overflow: hidden; }
.sat-exam-bar i { display: block; height: 100%; border-radius: 3px; }
.sat-exam-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-4); }
.sat-exam-d.sat-soon { background: #f7e8e6; color: #8f342b; }  i.sat-soon { background: #a7463c; }
.sat-exam-d.sat-mid  { background: #f7ede4; color: #8a4a24; }  i.sat-mid  { background: #b7693f; }
.sat-exam-d.sat-ok   { background: #eaf6ef; color: #1f6e44; }  i.sat-ok   { background: #2f8f5b; }
/* Too narrow for two columns: stack them and let the page scroll if it must. */
@media (max-width: 900px) {
  .sat { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .sat-card { flex: none; padding: 16px clamp(14px, 2vw, 28px); }
}

/* ── Pulse: the examinations card ─────────────────────────────────────────
   A table, not a chart: four facts per exam read across a row. The header is
   the stat tiles' small caps; figures are tabular so the columns line up; each
   exam carries its chart colour as a dot. A row is a filter — hover lifts it,
   the selected exam's row is tinted the way a selected menu row is. */
.ex-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -15px; padding: 0 15px; }
/* Fixed columns, so a long exam name ellipsises in its own column instead of
   pushing the figures off the card. */
.ex-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ex-tbl .c-exam { width: 30%; }
.ex-tbl .c-due  { width: 22%; }
.ex-tbl .c-paid { width: 15%; }
.ex-tbl .c-pay  { width: 16%; }
.ex-tbl .c-grow { width: 17%; }
.ex-tbl th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  padding: 4px 8px 8px; text-align: left; vertical-align: bottom; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 9.5px; font-weight: 680; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.ex-tbl th.num, .ex-tbl td.num { text-align: right; }
.ex-tbl th:first-child, .ex-tbl td:first-child { padding-left: 4px; }
.ex-tbl th:last-child, .ex-tbl td:last-child { padding-right: 4px; }
.ex-tbl td {
  padding: 11px 8px; border-bottom: 1px solid var(--grid); vertical-align: middle;
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ex-tbl tbody tr { cursor: pointer; transition: background .15s; }
.ex-tbl tbody tr:hover { background: var(--surface-2); }
.ex-tbl tbody tr:last-child td { border-bottom: 0; }
.ex-tbl tbody tr.on { background: rgba(32,110,166,.08); }
.ex-tbl tbody tr.on .ex-name { color: var(--deep); }
/* The FULL name, wrapped — never cut off. A long one takes a second line; the
   dot stays level with the first. */
.ex-name { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; color: var(--ink);
           min-width: 0; line-height: 1.35; }
.ex-name span { white-space: normal; overflow-wrap: anywhere; }
.ex-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
/* Never cut: on a narrow card the chip drops under its date instead. */
.ex-due { line-height: 1.9; }
.ex-date { white-space: nowrap; margin-right: 6px; }
.ex-date { color: var(--ink); font-weight: 550; }
.ex-date.muted { color: var(--ink-4); }
.ex-left {
  display: inline-block; line-height: 1.5; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 680; white-space: nowrap;
}
/* Urgency in the dashboard's OWN colours, not a traffic light: the brick that
   is reserved for status when a deadline is days away, the clay tertiary when
   it is near, the secondary blue when there is time, and grey once closed. The
   same tints the headline's change badges use. */
.ex-left.soon   { background: rgba(167,70,60,.10);  color: var(--alm); }
.ex-left.mid    { background: rgba(183,105,63,.12); color: var(--ter); }
.ex-left.ok     { background: rgba(32,110,166,.10); color: var(--sec); }
.ex-left.closed { background: var(--surface-3);     color: var(--ink-3); }
/* Figures in ink, as the stat tiles print them; colour belongs to the marks. */
.ex-tbl td.num { font-weight: 650; color: var(--ink); font-size: 13px; white-space: nowrap; }
.ex-grow { padding-top: 6px !important; padding-bottom: 6px !important; }
.ex-spark { height: 26px; width: 100%; }
.ex-none { color: var(--ink-4); }

/* ════════════════════════════════════════════════════════════════════════
   TOOLS MENU, AND THE PENDING-CANDIDATES LIST
   ════════════════════════════════════════════════════════════════════════ */

/* The menu opens beside the bottom-left button, on the exam menu's surface:
   white, hairline, deep shadow, a short rise and fade. */
.tools-menu {
  position: fixed; z-index: 60; width: 300px; padding: 6px;
  background: rgba(255,255,255,.98); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px) scale(.97); transform-origin: bottom left;
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
}
.tools-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
                   transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s; }
.tools-h { padding: 7px 10px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
           text-transform: uppercase; color: var(--ink-4); }
.tools-it {
  width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 10px;
  border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink-2); outline: none; transition: background .14s;
}
.tools-menu.open .tools-it { animation: examIn .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.tools-it:hover, .tools-it:focus-visible { background: var(--surface-3); }
.tools-it.on { background: rgba(32,110,166,.09); }
.tools-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
            border-radius: 9px; background: var(--deep); color: #fff; }
.tools-ic .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.tools-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tools-tx b { font-size: 13px; font-weight: 650; color: var(--ink); }
.tools-tx span { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }

/* ── The list: an exam index on the left, the chosen exam on the right ────
   Same tokens as the dashboard — white cards, page hairlines, the rails' navy
   for what is chosen — but quieter: colour is kept for the stage dots, the
   split bars and the accents on the three stage cards, so the table itself
   reads in ink and nothing shouts. */
.view.pend { display: block; overflow: hidden; }
.pd { height: 100%; display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
      gap: 12px; min-height: 0; transition: grid-template-columns .28s var(--ease); }
.pd.collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.pd-exams, .pd-main {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}

/* the exam panel — open, or folded to a rail */
.pd-full { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 12px; }
.pd-rail { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0; height: 100%; }
.pd.collapsed .pd-full { display: none; }
.pd.collapsed .pd-rail { display: flex; }
.pd-rail-t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700;
             letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pd-fold {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pd-fold:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.pd-fold .ic { width: 14px; height: 14px; stroke-width: 2; }
.pd-h { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 10px 16px; }
.pd-ht { display: flex; align-items: baseline; gap: 8px; }
.pd-h h2 { font-size: 13px; font-weight: 680; letter-spacing: -.01em; }
.pd-h-sub { padding: 0 7px; border-radius: 99px; background: var(--surface-3); font-size: 10.5px;
            font-weight: 680; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pd-findw { position: relative; margin: 0 12px 8px; display: block; }
.pd-findw .ic { position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
                color: var(--ink-4); pointer-events: none; }
.pd-find {
  width: 100%; padding: 8px 11px 8px 32px; font: inherit; font-size: 12px; color: var(--ink);
  background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r); outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pd-find:focus { background: var(--surface); border-color: var(--sec); box-shadow: 0 0 0 3px rgba(32,110,166,.14); }
.pd-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.pd-ex {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 12px;
  border: 1px solid transparent; border-radius: 11px; background: none; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink-2); transition: background .15s, border-color .15s, box-shadow .15s;
}
.pd-ex + .pd-ex { margin-top: 4px; }
.pd-ex:hover { background: var(--surface-2); border-color: var(--line); }
.pd-ex.on { background: linear-gradient(180deg, rgba(32,110,166,.07), rgba(32,110,166,.03));
            border-color: rgba(32,110,166,.25); box-shadow: inset 3px 0 0 var(--deep); }
.pd-ex.past { opacity: .6; }
.pd-ex-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pd-ex-n { font-size: 12.5px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.pd-adv { flex: none; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2);
          font-size: 9.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap;
          font-variant-numeric: tabular-nums; }
.pd-ex-m { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-3); }
.pd-ex-c { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pd-cnt { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.pd-cnt b { font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-split { display: flex; height: 4px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.pd-split i { display: block; height: 100%; }
.pd-split .lock { background: #c99a7e; }
.pd-split .pay  { background: var(--deep); }

/* status dots: clay for "still a draft", navy for "locked, not paid" */
.pd-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pd-dot.lock { background: var(--ter); }
.pd-dot.pay  { background: var(--deep); }
.pd-dot.all  { background: linear-gradient(90deg, var(--ter) 50%, var(--deep) 50%); }
.pd-left { padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 680; }
.pd-left.soon   { background: rgba(167,70,60,.10);  color: var(--alm); }
.pd-left.mid    { background: rgba(183,105,63,.12); color: var(--ter); }
.pd-left.ok     { background: rgba(32,110,166,.10); color: var(--sec); }
.pd-left.closed { background: var(--surface-3);     color: var(--ink-3); }

/* the chosen exam */
.pd-main { padding: 16px 18px 12px; background: linear-gradient(180deg, #fff 0, #fff 120px, var(--surface-2) 100%); }
.pd-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pd-mt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-mt-l { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pd-mt h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.pd-dl {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 14px;
  border-radius: var(--r); background: linear-gradient(170deg, #14304a, #0c1c2b); color: #fff;
  text-decoration: none; font-size: 12px; font-weight: 650;
  box-shadow: 0 10px 22px -12px rgba(12,28,43,.8), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.pd-dl:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(12,28,43,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.pd-dl .ic { width: 15px; height: 15px; stroke-width: 1.9; }
.pd-dl-n { padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.14); font-size: 10.5px;
           font-variant-numeric: tabular-nums; }
.pd-dl.off { opacity: .4; pointer-events: none; }

/* three stage cards — the filter, with the numbers */
.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pd-stat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left;
  cursor: pointer; font: inherit; color: var(--ink-2); box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .2s, transform .15s var(--ease);
}
.pd-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.pd-stat.all::before  { background: linear-gradient(180deg, var(--ter), var(--deep)); }
.pd-stat.lock::before { background: var(--ter); }
.pd-stat.pay::before  { background: var(--deep); }
.pd-stat:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.pd-stat.on { border-color: rgba(32,110,166,.45); box-shadow: 0 0 0 3px rgba(32,110,166,.12), var(--sh-1); }
.pd-stat-k { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;
             letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.pd-stat-v { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
             font-variant-numeric: tabular-nums; line-height: 1.1; }
.pd-stat-s { font-size: 11px; color: var(--ink-3); }

/* the table, on its own card */
.pd-tcard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
            background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); }
.pd-tw { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pd-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pd-t th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  padding: 10px 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.pd-t td { padding: 10px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; color: var(--ink-2);
           user-select: text; }
.pd-t tbody tr { transition: background .12s; }
.pd-t tbody tr:hover { background: rgba(32,110,166,.035); }
.pd-t tbody tr:last-child td { border-bottom: 0; }
.pd-t .c-who { min-width: 190px; } .pd-t .c-con { min-width: 170px; }
.pd-t .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pd-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-ava { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
          color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
          box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.pd-who-t { min-width: 0; }
.pd-name { font-weight: 650; color: var(--ink); line-height: 1.3; }
.pd-sub { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.pd-mob { color: var(--ink); }
.pd-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-app { color: var(--ink); white-space: nowrap; }
.pd-app.none { color: var(--ink-4); }
.pd-stage { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 8px; border-radius: 99px;
            background: var(--surface-3); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pd-when { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-when + .pd-when { margin-top: 3px; }
.pd-when-k { width: 46px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.pd-when-v { font-size: 11.5px; color: var(--ink-2); }
.pd-when.none .pd-when-v { color: var(--ink-4); }
.pd-pay { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pd-res { padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 680; }
.pd-res.bad  { background: rgba(167,70,60,.10);  color: var(--alm); }
.pd-res.warn { background: rgba(183,105,63,.12); color: var(--ter); }
.pd-res.mute { background: var(--surface-3);     color: var(--ink-2); }
.pd-res.ok   { background: rgba(32,110,166,.10); color: var(--sec); }
.pd-att { font-size: 11px; color: var(--ink-3); }
.pd-none { font-size: 11.5px; color: var(--ink-4); }

.pd-pager { display: flex; align-items: center; gap: 14px; padding: 9px 12px;
            border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px; color: var(--ink-3); }
.pd-range { font-variant-numeric: tabular-nums; }
.pd-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pd-pnum { padding: 0 8px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pd-pg {
  width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit;
  font-size: 13px; transition: background .14s, color .14s, border-color .14s;
}
.pd-pg:hover:not(:disabled) { background: var(--deep); border-color: var(--deep); color: #fff; }
.pd-pg:disabled { opacity: .35; cursor: default; }
.pd-size { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px;
           background: var(--surface); font: inherit; font-size: 11.5px; color: var(--ink-2); }

.pd-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 6px; text-align: center; color: var(--ink-3); font-size: 12px; padding: 30px; max-width: 420px;
            margin: 0 auto; }
.pd-empty b { font-size: 14px; color: var(--ink); }
.pd-empty-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 6px;
               background: linear-gradient(170deg, #14304a, #0c1c2b); color: #fff;
               box-shadow: 0 14px 28px -14px rgba(12,28,43,.8); }
.pd-empty-ic .ic { width: 24px; height: 24px; stroke-width: 1.7; }
@media (max-width: 980px) {
  .pd, .pd.collapsed { grid-template-columns: 1fr; } .pd-exams { max-height: 280px; }
  .pd-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-menu, .tools-menu.open { transition: none; } .tools-menu.open .tools-it { animation: none; }
  .pd { transition: none; }
}