/*
  RANKINGS
  ========
  Two views of the same payload:

    ALL      every board side by side in a grid. THE DEFAULT, on his
             instruction: "they should all show next to each other unless the
             person switches sub tabs."
    FOCUSED  one board, full width, with the meters, the arithmetic behind each
             score and the panel explaining the rule.

  Both are drawn from ONE request. Switching between them is a re-render, never
  a fetch, so the whole page moves in one frame.

  THE RULES THIS SHEET KEEPS
  --------------------------
  1. NEVER THE PALE BLUE. Three tiers — #79D9FF hot, #4BB4FC body, #2C84EE dim
     — over the console's near-black. Nothing drifts toward near-white.
  2. THE SITE'S GROUND IS A PHOTOGRAPH. Every panel takes _term.css's own
     `.panel` seat (an opaque wash + blur + the lit left edge). Anything laid
     over that picture without a seat is legible on the dark alley and gone over
     the lit sign.
  3. AN EMPTY BOARD IS A FINISHED STATE, NOT A HOLE. Most of these boards are
     empty on a young server, so the empty card is designed: a mark, one plain
     sentence, and what will fill it. A page whose normal state looks broken is
     a broken page.
  4. REDUCED MOTION REMOVES THE MOTION, NOT THE INFORMATION. Every animated
     property has a settled end state that is correct on its own.

  BUILD 2 — WHAT THE REDESIGN SETTLED
  -----------------------------------
  5. THE LADDER IS ALWAYS DRAWN, AND AN UNCLAIMED PLACE SAYS SO. The ghost slot
     is the same row a ranked player gets — same grid, same numeral, same track
     — with a dash where the name and the reading would be and a DOTTED track
     under it. UNKNOWN IS NOT ZERO: a reading nobody has is a dash and a dotted
     scale, never a bar drawn at 0%, because a 0% bar reads as a real reading of
     nothing. One primitive covers three jobs — the first read, an empty board,
     and the places nobody has claimed yet — so the page never has to invent a
     second vocabulary for "waiting".
  6. THERE IS NO SKELETON ON THIS SITE. The shimmering grey rows that used to
     stand in for the first payload were this page's own invention and nothing
     else in the theme has one. The first read draws the SAME armed, empty
     ladder every other empty board draws, captioned with what is being asked
     for; the state dot going amber is what says "working".
  7. THE METER IS THE THEME'S INSTRUMENT, COPIED NOT REINVENTED. A 4px track
     that IS a scale — a repeating graticule plus a 1px baseline drawn from the
     bottom — and the fill is a bare <i> pinned `top:1px;bottom:0` so the
     baseline still shows beneath it. An empty gauge reads as an instrument
     rather than as a missing thing. The row's old full-width background wash is
     GONE: two drawings of one number is not hierarchy, it is noise.
  8. AMBER IS A SINGLETON. The leader of an OPENED board wears the amber spine
     and the amber numeral, and it is the only amber on the page until something
     goes wrong. The ALL grid shows five boards at once, so five ambers would
     spend the singleton five times over — there the leader is lifted with the
     hot blue instead. Green stays reserved for state: the viewer's own row and
     its [ YOU ] chip, never a rank.
  9. TWO RAILS, TWO WEIGHTS. The boards are the loud rail — bigger type, a
     numbered prefix and the 2px sliding ink. The periods are the quiet rail —
     smaller, borderless, and marked by the 1px underline that grows from the
     left, the same indicator the site nav uses. They stopped competing when one
     of them stopped being a row of filled buttons.
 10. A COLUMN THAT RESERVES HEIGHT IT CANNOT FILL READS AS BROKEN; GROUND
     SHOWING THROUGH DOES NOT. Five boards across three columns leave one track
     empty in the second band and that trailing gap is left alone — with the
     ground stepped back (`.plate.deep` on this view) it is quiet, and stretching
     a card across it only ever bought a panel two-thirds empty.
*/

/* ============================================================== the tokens */
/* The only custom properties this sheet declares, each exactly once. Nothing
   from _term.css is redefined — where the theme already names a colour this
   aliases it, and only #79D9FF (which the theme spells out inline everywhere)
   is written as a literal. */
.rk-rails, .rk-grid, .rk-wrap, .rk-truth {
  --rk-hot: #79D9FF;                        /* headings + names */
  --rk-val: var(--blue-hot);                /* values */
  --rk-lab: var(--blue-dim);                /* labels */
  --rk-line: rgba(30, 111, 224, .28);       /* the hairline between two rows */
  --rk-edge: rgba(30, 111, 224, .45);       /* a rail's own ruled edge */
  --rk-seat: rgba(1, 4, 10, .74);           /* the panel wash over the photo */
  --rk-head: rgba(0, 19, 71, .42);          /* a header band inside a panel */
  --rk-settle: cubic-bezier(.16, .84, .28, 1);
  --rk-point: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================ the two rails */
.rk-rails {
  position: relative; z-index: 4; display: grid; gap: 9px;
  padding: 12px var(--pad) 11px;
  background: var(--rk-seat);
  backdrop-filter: blur(10px) saturate(1.15);
  border-bottom: 1px solid rgba(30, 111, 224, .3);
}

/* THE SUB-TABS — THE LOUD RAIL. Buttons, not links: they change what this page
   shows, they do not go anywhere. The selected one is drawn off its ARIA state,
   so what a screen reader announces and what an eye sees are the SAME
   attribute. */
.rk-tabs {
  position: relative; display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--rk-edge);
}
.rk-tab {
  position: relative; z-index: 1; appearance: none; background: transparent;
  border: 0; cursor: pointer; padding: 11px 15px 10px;
  font: 400 13px/1 var(--mono); letter-spacing: .18em;
  color: var(--rk-lab); white-space: nowrap; text-shadow: var(--sh-micro);
  transition: color .16s linear;
}
.rk-tab:hover { color: var(--rk-hot); }
.rk-tab[aria-selected="true"] { color: var(--rk-hot); text-shadow: var(--sh-body); }
/* The ordinal is a LABEL beside a name: the pixel face separates it from the
   board it counts off, and it only lights with its own tab. */
.rk-tab .rk-tn {
  display: inline-block; margin-right: 9px; color: var(--rule);
  font: 400 10.5px/1 var(--pixel); letter-spacing: .08em;
  transition: color .16s linear;
}
.rk-tab:hover .rk-tn { color: var(--blue-hot); }
.rk-tab[aria-selected="true"] .rk-tn { color: var(--blue-hot); }
.rk-tab:focus-visible { outline: 1px solid var(--blue-hot); outline-offset: -3px; }
/* The ALL tab keeps a divider after it: it is a different KIND of thing from
   the five boards beside it, and a plain gap reads as an accident. */
.rk-tab.rk-all { border-right: 1px solid var(--rk-edge); margin-right: 7px; }

/* The sliding underline. One element that MOVES rather than a border that
   appears somewhere else — the selection stays a single object the eye keeps
   hold of while the table underneath is being replaced. */
.rk-ink {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--rule), var(--rk-hot), var(--rule));
  box-shadow: 0 0 10px rgba(75, 180, 252, .55);
  transition: transform .34s var(--rk-settle), width .34s var(--rk-settle);
  pointer-events: none;
}

/* THE PERIODS — THE QUIET RAIL. Five, and the fifth is LIFETIME because that is
   his word. These used to be five filled blocks, which made the second-order
   control the loudest object on the page and left the boards above it looking
   like an afterthought. Now they are the site nav's own form: text that lights,
   with a 1px underline growing from the left. */
.rk-wins {
  display: flex; flex-wrap: wrap; gap: 4px 15px; align-items: center;
  padding-left: 1px;
}
.rk-winset { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.rk-wlab {
  font: 400 9.5px/1 var(--mono); letter-spacing: .24em; color: var(--rule);
  text-shadow: var(--sh-micro); white-space: nowrap;
}
.rk-win {
  position: relative; appearance: none; cursor: pointer; white-space: nowrap;
  padding: 6px 1px 7px; background: transparent; border: 0;
  font: 400 11px/1 var(--mono); letter-spacing: .2em; color: var(--rk-lab);
  text-shadow: var(--sh-micro);
  transition: color .15s linear;
}
.rk-win::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--blue-hot); box-shadow: 0 0 8px rgba(75, 180, 252, .9);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--rk-point);
}
.rk-win:hover { color: var(--rk-hot); }
.rk-win:hover::after, .rk-win[aria-pressed="true"]::after { transform: scaleX(1); }
.rk-win[aria-pressed="true"] { color: var(--rk-hot); text-shadow: var(--sh-body); }
.rk-win:focus-visible { outline: 1px solid var(--blue-hot); outline-offset: 2px; }
.rk-wins .rk-sp { margin-left: auto; }

.rk-state {
  font: 400 10px/1.5 var(--mono); letter-spacing: .18em; color: var(--rule);
  text-shadow: var(--sh-micro);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.rk-state span { display: inline-flex; align-items: center; gap: 6px; }
/* [hidden] loses to any authored display, so every class here that can carry it
   gets its own switch back off, at equal specificity, written after. */
.rk-state span[hidden] { display: none; }
.rk-state b {
  color: var(--rk-hot); font-weight: 400; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.rk-dot {
  width: 6px; height: 6px; flex: none; background: var(--green);
  box-shadow: 0 0 7px var(--green); animation: rk-pulse 2.4s ease-in-out infinite;
}
.rk-state.busy .rk-dot { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
@keyframes rk-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ============================================================ shared panels */
/* The site's OWN panel treatment, from _term.css — not a second one invented
   for this page. A page that draws its own kind of box looks bolted on. Both
   corner marks are here, top-left and bottom-right, because that is the pair
   `.panel` draws and one of them alone reads as a rendering fault. */
.rk-panel {
  position: relative; min-width: 0; border: 1px solid var(--rule);
  background: var(--rk-seat);
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 3px 0 0 rgba(75, 180, 252, .55);
}
.rk-panel::before, .rk-panel::after {
  content: ""; position: absolute; z-index: 3; width: 9px; height: 9px;
  border: 1px solid var(--rule-hot); opacity: .9; pointer-events: none;
}
.rk-panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.rk-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* THE SWEEP. One pass of light when the contents change — how a terminal says
   "this is new data" without a spinner that has to be taken away again. */
.rk-panel > .rk-sweep {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  z-index: 5;
  background: linear-gradient(105deg, transparent 38%,
              rgba(75, 180, 252, .13) 50%, transparent 62%);
}
.swept > .rk-sweep { animation: rk-sweep .62s ease-out; }
@keyframes rk-sweep {
  from { opacity: 1; transform: translateX(-42%) }
  to { opacity: 0; transform: translateX(42%) }
}

/* ------- the two typographic jobs, stated once -------
   A VALUE is tight, bright, ink-stroked and tabular so a column of them lines
   up on the digit. A LABEL is wide, dim and light. They share a baseline and
   the value is pushed to the ruled edge. Everything on this page that is a
   number or the name of a number resolves to one of these two. */
.rk-lab {
  font: 400 9.5px/1 var(--mono); letter-spacing: .22em; color: var(--rk-lab);
  text-shadow: var(--sh-micro); white-space: nowrap;
}
.rk-val {
  font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--rk-val);
  text-shadow: var(--sh-body); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A unit or a denominator is a NESTED fraction of its own value's em, never a
   second element with its own px size — that is the only way "2d 14h" and
   "3 OF 20" stay welded to the number when the number changes size. */
.rk-val u, .rk-val s, .rk-score u, .rk-score s, .rk-note u {
  font-size: .58em; letter-spacing: .1em; color: var(--rk-lab);
  text-decoration: none; font-style: normal;
}
.rk-val s, .rk-score s { font-size: .58em; }

/* ============================================================= the ALL grid */
/* THREE COLUMNS AT THE TOP, and that ceiling is deliberate. There are five
   boards: four across leaves a single card alone on the second row with three
   empty tracks beside it, which reads as a board that failed to load. Three
   across gives 3 + 2, and the wider card leaves room for a long name and its
   score without either being clipped.

   THE TRAILING TRACK IS LEFT EMPTY ON PURPOSE. It is the settled ruling: a card
   stretched to cover it is a panel two-thirds empty, which is worse than the
   gap. This view wears `.plate.deep`, so what shows through the gap is a quiet
   ground rather than the lit sign in the photograph. */
.rk-grid {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pad); padding: var(--pad); align-items: start;
}
@media (max-width: 1250px) { .rk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 780px) { .rk-grid { grid-template-columns: minmax(0, 1fr) } }

/* CROSS-CARD ALIGNMENT, BEHIND ITS OWN SUPPORT TEST. Each card hands its three
   bands — header, ladder, footer — to the parent grid, so a header that wraps
   in one card lifts its neighbours' ladders with it and every "OPEN THIS BOARD"
   in a row sits on one line. A dropped declaration is silent, so this is asked
   for rather than assumed; without subgrid the cards simply sit at their own
   heights, which is the layout that shipped before. */
@supports (grid-template-rows: subgrid) {
  .rk-grid { align-items: stretch; }
  .rk-grid > .rk-card {
    grid-row: span 3; grid-template-rows: subgrid;
  }
}
/* A stage-level message — no boards at all, or the first read — is not one
   board of five and must not be drawn in one column of three. Written after the
   support test so it wins the row placement without raising its specificity. */
.rk-grid > .rk-full { grid-column: 1 / -1; grid-row: auto; display: block; }

.rk-card { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.rk-ch {
  display: flex; align-items: baseline; gap: 8px 11px; flex-wrap: wrap;
  padding: 10px 13px 9px;
  border-bottom: 1px solid rgba(30, 111, 224, .4);
  background: var(--rk-head);
}
.rk-ch h3 {
  margin: 0; font: 400 13px/1.15 var(--mono); letter-spacing: .2em;
  color: var(--rk-hot); text-shadow: var(--sh-body); min-width: 0;
}
.rk-ch .rk-when { margin-left: auto; }
.rk-body { min-width: 0; align-content: start; display: grid; }
.rk-body[hidden] { display: none; }
/* A whole card is a link to its own tab: on the ALL view the natural gesture
   is to click the board you want, not to go back up to the rail. */
.rk-more {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 100%; text-align: left; padding: 9px 13px;
  border-top: 1px solid rgba(30, 111, 224, .3);
  font: 400 10px/1 var(--mono); letter-spacing: .2em; color: var(--rk-lab);
  text-shadow: var(--sh-micro);
  transition: color .16s linear, padding-left .16s var(--rk-point);
}
.rk-more:hover { color: var(--rk-hot); padding-left: 17px; }
.rk-more:focus-visible { outline: 1px solid var(--blue-hot); outline-offset: -3px; }

/* ============================================== the focused (single) board */
/* THE BOARD KEEPS ITS OWN HEIGHT. It used to be stretched to the bottom of the
   side rail so that no ground showed beside it, and a two-row board then sat
   over four hundred pixels of empty panel — the exact failure the ruling names,
   a column reserving height it cannot fill. The board is now as tall as the
   places it draws, and since it always draws its unclaimed places it is never
   the stub it was. */
.rk-wrap {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) 306px;
  gap: var(--pad); padding: var(--pad); align-items: start;
}
@media (max-width: 1040px) { .rk-wrap { grid-template-columns: minmax(0, 1fr) } }

.rk-bh {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 12px 22px; flex-wrap: wrap;
  padding: 13px var(--pad); border-bottom: 1px solid var(--rk-edge);
  background: rgba(0, 19, 71, .5);
}
.rk-bh h2 {
  margin: 0; font: 400 clamp(15px, 1.35vw, 19px)/1.1 var(--mono);
  letter-spacing: .22em; color: var(--rk-hot); text-shadow: var(--sh-lead);
  min-width: 0;
}
.rk-bmeta { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.rk-bmeta > span { display: flex; align-items: baseline; gap: 8px; }

/* THE COLUMN HEADER. Without it the track in the middle of every row is a
   decoration; with it the track is a SCALE and the reader knows what it is a
   share of. Labels only — nothing here is a number. */
.rk-hrow {
  border-bottom: 1px solid var(--rk-edge);
  background: rgba(0, 19, 71, .22);
  padding-top: 7px; padding-bottom: 7px;
}
.rk-hrow span { overflow: hidden; text-overflow: ellipsis; }
.rk-hrow .rk-hn { text-align: right; }   /* over the numerals, which are too */
.rk-hrow .rk-hs { justify-self: end; }
.rk-hrow[hidden] { display: none; }
/* The scale's name is written twice and only one is ever shown. A label clipped
   to "SHARE OF LE…" on a phone tells a reader nothing they could not already
   see; the short word tells them the whole thing. */
.rk-hrow b, .rk-hrow i { font-weight: 400; font-style: normal; }
.rk-hrow .rk-hm i { display: none; }

/* =================================================================== rows */
/* A repeated row is separated by a HAIRLINE, not by space. The last one drops
   its rule so the list ends on the panel's own edge rather than on a second
   line a pixel above it. */
.rk-rows { list-style: none; margin: 0; padding: 0; }
.rk-row {
  position: relative;
  border-bottom: 1px solid var(--rk-line);
  animation: rk-in .42s var(--rk-point) both;
  animation-delay: calc(var(--rk-i, 0) * 22ms);
  transition: padding-left .14s var(--rk-point), color .14s linear;
}
.rk-row:last-child { border-bottom: 0; }
@keyframes rk-in { from { opacity: 0; transform: translateY(8px) } }

.rk-n {
  font: 400 11px/1 var(--pixel); letter-spacing: .06em; color: var(--rule);
  text-align: right; text-shadow: var(--sh-micro);
  font-variant-numeric: tabular-nums;
}
.rk-who { min-width: 0; display: grid; gap: 3px; }
.rk-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rk-name {
  font: 400 12.5px/1.3 var(--mono); letter-spacing: .08em; color: var(--blue);
  text-shadow: var(--sh-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.rk-score {
  justify-self: end; text-align: right;
  font: 400 12.5px/1 var(--mono); letter-spacing: .02em; color: var(--rk-val);
  text-shadow: var(--sh-body); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rk-note {
  font: 400 9.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--rule);
  text-shadow: var(--sh-micro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-note[hidden] { display: none; }
/* A name nobody has recorded yet. It is a real rank with a missing NAME, and
   it must not shout as loudly as a name that is known. */
.rk-name.rk-anon { color: var(--rk-lab); font-style: normal; }

/* ------------------------------- THE INSTRUMENT -------------------------- */
/* Copied from the theme's own gauge, not invented here. The track IS the scale:
   a repeating graticule plus a 1px baseline ruled along the bottom, so a place
   with no reading still reads as an instrument. The fill is a bare <i> pinned
   one pixel below the top and flush to the floor, so the baseline shows THROUGH
   it and the bar never looks like a second box. */
.rk-t {
  position: relative; min-width: 0; height: 4px; align-self: center;
  background:
    repeating-linear-gradient(90deg, rgba(75, 180, 252, .34) 0 1px, transparent 1px 9px),
    linear-gradient(0deg, rgba(75, 180, 252, .30) 0 1px, transparent 1px);
  background-position: 0 100%, 0 100%; background-repeat: repeat-x;
}
.rk-t i {
  position: absolute; left: 0; top: 1px; bottom: 0; display: block;
  width: calc(var(--rk-fill, 0) * 100%);
  background: var(--blue-hot); box-shadow: 0 0 10px -1px rgba(75, 180, 252, .85);
  transition: width .55s var(--rk-settle);
  animation: rk-fill .78s var(--rk-settle) both;
  animation-delay: calc(var(--rk-i, 0) * 22ms + 60ms);
}
@keyframes rk-fill { from { width: 0 } }
/* UNKNOWN IS NOT ZERO. No fill, and the baseline goes dotted, so an unclaimed
   place reads "nobody is here" rather than "somebody here scored nothing". The
   dotted rail is deliberately THINNER and dimmer than the graticule above it:
   in this list a track with a reading and a track without one sit on adjacent
   rows, and if they weigh the same then a real score of almost nothing is
   indistinguishable from no score at all. */
.rk-slot .rk-t, .rk-unknown .rk-t {
  background: repeating-linear-gradient(90deg, rgba(44, 132, 238, .3) 0 1px, transparent 1px 6px);
  background-position: 0 100%; background-repeat: repeat-x;
}
.rk-slot .rk-t i, .rk-unknown .rk-t i { display: none; }

/* An unclaimed place. THE SAME ROW, not a different thing that stands in for
   one — same grid, same numeral, same track — saying in the only two marks a
   terminal has that nobody holds it. The ladder also RECEDES as it goes down,
   a few percent a place, so a column of open places reads as the shallow end of
   a board rather than as ten identical failures. */
.rk-slot { opacity: calc(1 - var(--rk-i, 0) * .052); }
.rk-slot .rk-n { color: rgba(30, 111, 224, .5); }
.rk-slot .rk-name, .rk-slot .rk-score { color: rgba(44, 132, 238, .45); }
.rk-slot .rk-score { letter-spacing: .1em; }

/* --- compact rows, used inside the ALL grid --- */
.rk-compact .rk-row, .rk-compact .rk-hrow {
  display: grid; align-items: center; gap: 9px; padding: 6px 13px;
  grid-template-columns: 24px minmax(0, 1fr) minmax(36px, 74px) minmax(0, auto);
}
.rk-compact .rk-row:hover { padding-left: 17px; }
.rk-compact .rk-row:hover .rk-name { color: var(--rk-hot); }

/* --- wide rows, used by the focused board --- */
.rk-wide .rk-row, .rk-wide .rk-hrow {
  display: grid; align-items: center; gap: clamp(9px, 1.1vw, 17px);
  padding: 9px var(--pad);
  grid-template-columns:
    clamp(30px, 3vw, 46px) minmax(0, 1fr) minmax(52px, 1.5fr) minmax(0, auto);
}
.rk-wide .rk-row:hover { padding-left: calc(var(--pad) + 4px); }
.rk-wide .rk-row:hover .rk-name { color: var(--rk-hot); }
.rk-wide .rk-n { font-size: 12.5px; }
.rk-wide .rk-name { font-size: 13.5px; letter-spacing: .09em; }
.rk-wide .rk-score { font-size: 14px; }
.rk-wide .rk-t { height: 5px; }

/* THE TOP THREE. Louder by DEGREE, not by a different design — a podium made
   of three unrelated cards would stop the list reading as one order. The leader
   is a full champion row INSIDE the ladder: the numeral, the name and the
   reading all step up together and the row keeps its place at the head of the
   list it leads. */
.rk-row.rk-t2 .rk-n, .rk-row.rk-t3 .rk-n { color: var(--blue-hot); }
.rk-row.rk-t2 .rk-name, .rk-row.rk-t3 .rk-name { color: #6FC9FF; }
.rk-row.rk-t1 .rk-n { color: var(--rk-hot); }
.rk-row.rk-t1 .rk-name { color: var(--rk-hot); text-shadow: var(--sh-lead); }
.rk-row.rk-t1 .rk-score { color: var(--rk-hot); text-shadow: var(--sh-lead); }
.rk-row.rk-t1 .rk-t i { background: var(--rk-hot); }

/* In the ALL grid the leader is lifted with the hot blue and the spine, because
   five boards on screen means five leaders and amber only works while it is
   the one warm thing on the page. */
.rk-compact .rk-row.rk-t1 {
  box-shadow: inset 3px 0 0 var(--rk-hot); padding-top: 9px; padding-bottom: 9px;
}
.rk-compact .rk-row.rk-t1 .rk-n { font-size: 14px; }
.rk-compact .rk-row.rk-t1 .rk-name { font-size: 14px; letter-spacing: .1em; }
.rk-compact .rk-row.rk-t1 .rk-score { font-size: 15px; }
.rk-compact .rk-row.rk-t1:hover { padding-left: 17px; }

/* In the OPENED board there is exactly one leader on the page, so it gets the
   singleton: the amber spine cutting the panel's own blue edge, and the amber
   numeral. The meter stays blue — an amber fill means WARN in this theme's
   instrument grammar and the leader is not a warning. */
.rk-wide .rk-row.rk-t1 {
  box-shadow: inset 3px 0 0 var(--amber);
  padding-top: clamp(13px, 1.5vw, 20px); padding-bottom: clamp(13px, 1.5vw, 20px);
  background: linear-gradient(90deg, rgba(255, 180, 84, .05), transparent 42%);
}
.rk-wide .rk-row.rk-t1 .rk-n {
  color: var(--amber); font-size: clamp(19px, 2.2vw, 28px);
  text-shadow: 0 0 12px rgba(255, 180, 84, .35), var(--sh-body);
}
.rk-wide .rk-row.rk-t1 .rk-name {
  font-size: clamp(17px, 2vw, 25px); letter-spacing: .1em; line-height: 1.12;
}
.rk-wide .rk-row.rk-t1 .rk-score { font-size: clamp(18px, 2.1vw, 27px); }
.rk-wide .rk-row.rk-t1 .rk-note { font-size: 10.5px; letter-spacing: .16em; }
.rk-wide .rk-row.rk-t1 .rk-t { height: 7px; }

/* THE VIEWER'S OWN ROW. Green is state, never rank: the spine and the chip say
   "this one is you" without the name changing tier and pretending to a place it
   does not hold. The leader keeps the amber spine even when the leader is you,
   which is why this is written to stand aside for it. */
.rk-row.rk-you:not(.rk-t1) { box-shadow: inset 3px 0 0 var(--green); }
.rk-row.rk-you .rk-name { color: var(--rk-hot); }
.rk-you-pill {
  flex: none; padding: 2px 6px; border: 1px solid rgba(91, 255, 166, .55);
  font: 400 9px/1 var(--mono); letter-spacing: .16em; color: var(--green);
  font-style: normal;
}

/* ======================================== the empty / degraded board state */
/* A STATED VACANCY, not a gap and not an apology. Most boards on a young server
   are empty and a page whose normal state looks broken IS broken. The ladder
   above has already drawn the places; this says which reading is missing and
   what will put one there. Headline in the display face, the sentence in the
   reading face at 1.75 — long enough to be read, not a caption. */
/* The measure belongs to the SENTENCE, not to the block. Capping the block cut
   its own top hairline off two thirds of the way across the panel, which reads
   as a rule that failed to draw rather than as a measure. */
.rk-say {
  display: grid; gap: 8px; justify-items: start;
  padding: clamp(14px, 2vw, 22px) var(--pad) clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--rk-line);
}
.rk-say[hidden] { display: none; }
.rk-shead {
  font: 560 14px/1.2 var(--wide); letter-spacing: .2em; color: var(--rk-hot);
  text-shadow: var(--sh-body);
}
.rk-stext {
  margin: 0; max-width: 66ch;
  font: 400 13px/1.75 var(--read); letter-spacing: .01em;
  color: #6BC6FF; text-shadow: var(--sh-body);
}
.rk-say.bad .rk-shead { color: var(--amber); }

/* The same statement at card scale. Four empty boards on the ALL view meant
   four headlines and four boxed dashes, which is how an honest empty state
   turned into the loudest thing on the page — so here the ladder carries the
   vacancy and the sentence is one dim line under it. */
.rk-scard {
  margin: 0; padding: 9px 13px 11px;
  border-top: 1px solid var(--rk-line);
  font: 400 10.5px/1.62 var(--mono); letter-spacing: .05em; color: var(--rk-lab);
  text-shadow: var(--sh-micro);
}
.rk-scard b { color: var(--rk-hot); font-weight: 400; letter-spacing: .16em; }
.rk-scard.bad b { color: var(--amber); }

/* ============================================================ the side rail */
.rk-side { display: grid; gap: var(--pad); align-content: start; min-width: 0; }
.rk-cardp { padding: 13px var(--pad) 15px; }
.rk-cardp h3 {
  margin: 0 0 11px; font: 400 10.5px/1 var(--mono); letter-spacing: .22em;
  color: var(--rk-lab); text-shadow: var(--sh-micro);
}
.rk-cardp p {
  margin: 0; font: 400 12.5px/1.72 var(--read); letter-spacing: .012em;
  color: #6BC6FF; text-shadow: var(--sh-body);
}
.rk-cardp p + p { margin-top: 9px; }
.rk-cardp b { color: var(--rk-hot); font-weight: 400; }
.rk-flag { color: var(--amber); }

/* THE READING PANEL — label left, value on the same baseline at the ruled edge,
   one hairline per pair. It is the header's own numbers given room, and it is
   where a reader looks to find out how old what they are staring at is. */
.rk-read { display: grid; gap: 0; }
.rk-read > div {
  display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--rk-line);
}
.rk-read > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rk-read .rk-val { margin-left: auto; }

/* The truth strip under the grid: where these numbers come from. It is not a
   disclaimer, it is the answer to the first question anybody asks of a board. */
.rk-truth {
  position: relative; z-index: 4; margin: 0 var(--pad) var(--pad);
  padding: 12px 15px; border: 1px solid rgba(30, 111, 224, .4);
  background: rgba(1, 4, 10, .6); backdrop-filter: blur(6px);
  max-width: 118ch;
  font: 400 11.5px/1.8 var(--read); letter-spacing: .012em; color: #5FB6F5;
  text-shadow: var(--sh-body);
}
.rk-truth b { color: var(--rk-hot); font-weight: 400; }

/* ============================================================ narrow widths */
@media (max-width: 720px) {
  .rk-tab { padding: 10px 11px 9px; letter-spacing: .13em; font-size: 12px; }
  .rk-wins, .rk-winset { gap: 4px 13px; }
  .rk-wins .rk-sp { margin-left: 0; }
  .rk-bmeta { margin-left: 0; width: 100%; gap: 16px; }
  .rk-wide .rk-row, .rk-wide .rk-hrow {
    grid-template-columns: 28px minmax(0, 1fr) minmax(40px, 74px) minmax(0, auto);
    padding-left: 11px; padding-right: 11px;
  }
  .rk-wide .rk-row:hover { padding-left: 15px; }
  .rk-hrow .rk-hs, .rk-hrow .rk-hn, .rk-hrow .rk-hm, .rk-hrow .rk-hp {
    font-size: 8.5px; letter-spacing: .1em;
  }
  .rk-hrow .rk-hm b { display: none; }
  .rk-hrow .rk-hm i { display: inline; }
}

/* ================================================================ motion off */
/* Every animated selector named on its own — never a blanket rule, never an
   override, and every default already IS the settled state. */
@media (prefers-reduced-motion: reduce) {
  .rk-row { animation: none; }
  .rk-t i { animation: none; transition: none; }
  .swept > .rk-sweep { animation: none; opacity: 0; }
  .rk-ink { transition: none; }
  .rk-dot { animation: none; }
  .rk-win::after { transition: none; }
  .rk-compact .rk-row, .rk-wide .rk-row { transition: color .14s linear; }
  .rk-card .rk-more { transition: color .16s linear; }
  .rk-compact .rk-row:hover, .rk-wide .rk-row:hover,
  .rk-card .rk-more:hover { padding-left: 13px; }
  .rk-wide .rk-row:hover { padding-left: var(--pad); }
}