/* To Scale — soft-surface minimalism.
   ---------------------------------------------------------------------------
   One rule governs everything here: THE ONLY COLOUR ON THIS PAGE IS DATA.

   The interface is a single sheet of soft grey. Nothing is outlined; things
   are raised or pressed into that sheet by light alone -- a highlight from the
   top-left, a shadow to the bottom-right. Cards, inputs, chips and buttons are
   all the same material as the ground they sit on, so none of them compete
   with the drawing.

   That leaves blue, red and yellow doing nothing but carrying meaning: blue is
   what the company owns, red is what it owes, yellow is the residual left for
   its owners. Within a family, tint carries position in the stack. When the
   only saturated pixels on a screen are the balance sheet, the balance sheet
   is what you look at.

   The usual failure of this style is contrast: soft everything, legible
   nothing. So text stays near-black, the drawing keeps its full saturation,
   and every focusable thing gets a real ring rather than a suggestion of one.

   Mobile-first, single column, nothing scrolls sideways. */
:root{
  /* One ground, and the two lights that shape it. */
  --bg:#E7EBF2; --hi:#FFFFFF; --lo:#BFC7D6;
  --well:#E2E7EF;                       /* pressed surfaces read a shade cooler */
  --ink:#22262F; --ink2:#5A6273; --dim:#98A0AF;

  --disp:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --r1:12px; --r2:18px; --r3:26px;
  /* Raised: lit from the top-left, as everything on this page is. */
  --up:7px 7px 15px var(--lo), -7px -7px 15px var(--hi);
  --up-sm:4px 4px 9px var(--lo), -4px -4px 9px var(--hi);
  --up-lg:10px 10px 22px var(--lo), -10px -10px 22px var(--hi);
  /* Pressed: the same light, inverted. */
  --in:inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi);
  --in-sm:inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi);

  /* DATA ONLY, from here down. */
  --red:#E1362C; --blue:#2340BE; --yellow:#F3C218;
  --a0:#1B3299; --a1:#2340BE; --a2:#4058C9; --a3:#6274D4;
  --a4:#8B99E2; --a5:#B2BCEE; --a6:#D3D8F6;
  --l0:#B02218; --l1:#E1362C; --l2:#EC6157; --l3:#F49A93;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 var(--disp);-webkit-font-smoothing:antialiased;color-scheme:light;
  overflow-x:hidden}
a{color:var(--ink)}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}

/* Visually hidden, but read by assistive tech: table captions, the ask-box
   label, and anything else a screen reader needs and the eye does not. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip link: off-screen until focused, then a pill at the top-left. First stop
   on every page, so a keyboard reader isn't marched through the nav each time. */
.skip{position:absolute;left:8px;top:-56px;z-index:100;background:var(--ink);
  color:var(--bg);padding:11px 17px;border-radius:999px;font-weight:600;
  font-size:14px;text-decoration:none;box-shadow:var(--up-sm);transition:top .15s}
.skip:focus{top:8px;outline:2px solid var(--ink);outline-offset:2px}

/* ---- nav: a shelf, not a rule ---- */
nav{position:sticky;top:0;z-index:50;background:var(--bg)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-weight:600;font-size:16px;letter-spacing:.01em;display:flex;
  align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
/* The mark is the drawing in miniature: owns, owed, left over. */
.dot{width:22px;height:22px;flex:none;border-radius:7px;box-shadow:var(--up-sm);
  background:conic-gradient(var(--blue) 0 25%,var(--yellow) 0 50%,
    var(--bg) 0 75%,var(--red) 0)}
.nav .spacer{flex:1}
.navlink{font-size:13px;font-weight:500;color:var(--ink2);text-decoration:none;
  padding:8px 14px;border-radius:999px;transition:box-shadow .18s,color .18s}
.navlink:hover{color:var(--ink);box-shadow:var(--up-sm)}
.navlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

main{padding:6px 0 72px}

/* ---- panels: everything is the same sheet, raised ---- */
.hero,.chead,.bs,.empty,.card{background:var(--bg);border-radius:var(--r2);
  box-shadow:var(--up)}
.hero{border-radius:var(--r3);padding:34px 26px 30px;margin-bottom:34px}
.htitle{font-size:clamp(30px,8.6vw,44px);line-height:1.06;font-weight:600;
  letter-spacing:-.03em;margin:0 0 14px;max-width:14ch}
.hlede{font-size:16px;line-height:1.55;color:var(--ink2);margin:0 0 26px;max-width:38ch}

/* ---- search: a slot pressed into the sheet ---- */
.search{margin:0}
.slabel{display:block;font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--ink2);margin:0 0 9px 4px}
.sfield{display:flex;align-items:center;gap:8px;background:var(--well);
  border-radius:999px;box-shadow:var(--in);padding:7px 7px 7px 8px}
/* No forced uppercase: the box takes company names as well as tickers, and
   "WALMART DE MEXICO" is not how anybody types it. */
.search input{flex:1;min-width:0;font:600 16.5px/1 var(--mono);color:var(--ink);
  background:transparent;border:0;padding:12px 10px;letter-spacing:.02em;
  -webkit-appearance:none}
.search input::placeholder{color:var(--dim);font-weight:400;letter-spacing:.02em}
.search input:focus{outline:0}
/* The ring goes on the whole slot, so focus is visible on a soft surface
   instead of being implied by a shadow nobody can see. */
.sfield:focus-within{box-shadow:var(--in),0 0 0 2px var(--ink)}
.search button{flex:none;font:600 14px/1 var(--disp);letter-spacing:.01em;
  color:var(--bg);background:var(--ink);border:0;border-radius:999px;
  padding:14px 22px;cursor:pointer;box-shadow:var(--up-sm);
  transition:box-shadow .18s,transform .18s}
.search button:hover{box-shadow:var(--up)}
.search button:active{transform:translateY(1px);box-shadow:var(--up-sm)}
.search button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- section furniture ---- */
.sec{margin:0 0 30px}
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sec-head h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.sec-sub{font-size:14.5px;color:var(--ink2);margin:0 0 18px;max-width:56ch}

/* ---- home cards ---- */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:540px){.cards{grid-template-columns:1fr 1fr}}
.card{display:grid;grid-template-columns:1fr auto;grid-template-areas:
  "head thumb" "fact thumb" "size thumb";
  gap:2px 16px;align-items:start;text-decoration:none;color:var(--ink);
  padding:20px 20px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--up-lg);transform:translateY(-2px)}
.card:active{box-shadow:var(--up-sm);transform:translateY(0)}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chead2{grid-area:head;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ctick{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.02em}
.ckind{font-size:13px;color:var(--dim)}
.cfact{grid-area:fact;font-size:14.5px;font-weight:500;line-height:1.35;margin-top:9px}
.csize{grid-area:size;font-family:var(--mono);font-size:11.5px;color:var(--ink2);
  margin-top:5px}
/* Two columns, same rules as the full drawing, one third the height. */
.thumb{grid-area:thumb;display:flex;gap:5px;align-items:flex-start}
.mcol{display:block;width:28px;border-radius:7px;overflow:hidden;
  background:var(--well);box-shadow:var(--in-sm)}
.mband{display:block;border-bottom:1px solid rgba(255,255,255,.3)}
.mband:last-child{border-bottom:0}
.mband.rem{background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.4) 0 4px,transparent 4px 8px)}
.munder{display:block;margin-top:3px;border-radius:7px;overflow:hidden}
.card.bare{grid-template-columns:1fr;grid-template-areas:"head"}

/* ---- company header ---- */
.chead{padding:26px 24px 22px;margin-bottom:26px}
.cticker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--ink2);margin:0 0 6px}
.cname{font-size:clamp(26px,7vw,38px);line-height:1.06;font-weight:600;
  letter-spacing:-.03em;margin:0 0 16px}
.cmeta{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--ink2);
  padding:7px 13px;border-radius:999px;box-shadow:var(--up-sm);background:var(--bg)}
/* The filing date is the page's provenance, so it is pressed in rather than
   raised -- stamped into the sheet, not sitting on it. */
.chip.filed{box-shadow:var(--in-sm);background:var(--well);color:var(--ink)}

/* ---- the drawing ---- */
/* Two columns sharing a baseline and a scale. Equal height IS the accounting
   identity; it is not annotated because it does not need to be. */
.bs{padding:22px 20px 0}
/* Two rows: captions, then stacks. Both captions share one auto-height row, so
   a caption that wraps lifts BOTH stacks equally and the shared baseline holds. */
.bs-cols{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;align-items:start}
.bs-col{min-width:0}
.bs-cap{min-width:0;font-size:11.5px;font-weight:500;color:var(--ink2);
  display:flex;flex-direction:column;gap:2px;align-self:end}
.bs-cap b{color:var(--ink);font-weight:700;font-family:var(--mono);font-size:12px;
  overflow-wrap:anywhere}
/* A well, so the stack sits IN the sheet. The drawing is the one thing on the
   page allowed to be loud, and a pressed frame is what gives it permission. */
.stack{position:relative;border-radius:var(--r1);overflow:hidden;
  background:var(--well);box-shadow:var(--in-sm)}
.band{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.28)}
.band:last-child{border-bottom:0}
.band .bl{position:absolute;left:9px;right:9px;top:50%;transform:translateY(-50%);
  font-size:11.5px;font-weight:600;line-height:1.2;color:#fff;overflow:hidden}
.band .bl .bn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band .bl .bv{display:block;font-family:var(--mono);font-size:10px;font-weight:400;
  opacity:.9;margin-top:1px}
.band.pale .bl{color:var(--ink)}
/* Remainders are computed, not filed. The hatch says "this is the leftover",
   so it can never be mistaken for a line the company actually reported. */
.band.rem{background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.36) 0 5px,transparent 5px 10px)}
.band.eq{background:var(--yellow)}
.band.eq .bl{color:var(--ink)}
/* Negative equity hangs below the shared baseline: owing more than you own
   should look like it, not be quietly normalised away. */
.band.neg{border-top:3px solid var(--yellow)}
.band.neg .bl{color:var(--yellow)}
.band .bl.one{font-size:10.5px;line-height:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.band .bl.one b{font-family:var(--mono);font-weight:700}
.baseline{height:14px}

/* ---- legend: every band, with the number. A real table now: the drawing
   itself is marked role="img" and its bands are hidden from assistive tech,
   so this is where a screen reader reads the figures -- one row per line, the
   line name as the row header, amount and share alongside. ---- */
table.legend{width:100%;border-collapse:collapse;margin:20px 0 0}
/* An engraved line, not a drawn one: the two legends are the two columns, and
   the break between them has to be findable without adding a rule. */
.legend+.legend{margin-top:16px;padding-top:16px;
  border-top:1px solid var(--hi);box-shadow:0 -1px 0 var(--lo)}
.lrow>*{padding:9px 2px;vertical-align:top}
.sw-cell{width:16px;padding-right:0}
.sw{display:block;width:16px;height:16px;border-radius:5px;margin-top:2px;
  box-shadow:0 1px 2px rgba(34,38,47,.18)}
.sw.rem{background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.5) 0 4px,transparent 4px 8px)}
.lk{padding-left:12px;text-align:left;font-family:inherit;font-size:14px;
  font-weight:500;line-height:1.35}
.lk .ln{display:block;font-size:12px;font-weight:400;color:var(--ink2);
  line-height:1.4;margin-top:3px}
.lv{font-family:var(--mono);font-size:12.5px;font-weight:700;white-space:nowrap;
  text-align:right}
.lv small{display:block;font-weight:400;color:var(--ink2);font-size:10.5px;margin-top:2px}

/* ---- notices: pressed panels, never coloured ---- */
/* These used to be colour-coded left borders. Colour is spoken for, so they
   are set apart by depth and a small label instead. */
.missing,.derived,.note,.caution{margin-top:18px;border-radius:var(--r1);
  background:var(--well);box-shadow:var(--in-sm);padding:15px 17px;
  font-size:13.5px;line-height:1.55;color:var(--ink2)}
.missing h3{font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 8px;color:var(--ink2)}
.missing p{margin:0}
.missing .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.missing .tags span{font-size:11.5px;padding:5px 11px;border-radius:999px;
  color:var(--ink2);background:var(--bg);box-shadow:var(--up-sm)}
.caution strong{display:block;margin-bottom:5px;color:var(--ink);font-weight:600}
.bs .missing,.bs .derived,.bs .note{margin-bottom:20px}

/* ---- the description ---- */
.shape{margin:26px 0 30px;padding:0 2px}
.shape p{margin:0 0 14px;font-size:16.5px;line-height:1.65;max-width:56ch;
  color:var(--ink)}
.shape p:last-child{margin-bottom:0}

/* ---- empty / error ---- */
.empty{padding:32px 26px}
.empty h1{font-size:clamp(23px,6.4vw,31px);font-weight:600;letter-spacing:-.025em;
  margin:0 0 12px}
.empty p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--ink2);
  max-width:52ch}
.empty .search{margin:20px 0 0}
.tryline{margin:22px 0 12px!important;font-size:14px;color:var(--dim)}
.sugg{display:flex;flex-wrap:wrap;gap:10px}
.sugg a{font-family:var(--mono);font-size:13px;font-weight:700;padding:11px 16px;
  border-radius:999px;background:var(--bg);box-shadow:var(--up-sm);
  text-decoration:none;color:var(--ink);transition:box-shadow .18s,transform .18s}
.sugg a:hover{box-shadow:var(--up);transform:translateY(-1px)}
.sugg a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sugg a small{font-family:var(--disp);font-size:12px;font-weight:400;
  color:var(--dim);margin-left:6px}

/* ---- search results: several companies matched a name ---- */
.matches{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mrow{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  align-items:baseline;text-decoration:none;color:var(--ink);
  background:var(--bg);border-radius:var(--r1);box-shadow:var(--up-sm);
  padding:14px 16px;transition:box-shadow .18s,transform .18s}
.mrow:hover{box-shadow:var(--up);transform:translateY(-1px)}
.mrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mtick{font-family:var(--mono);font-size:14px;font-weight:700;grid-row:1/3}
.mname{font-size:14.5px;font-weight:500;line-height:1.3}
.msec{grid-column:2;font-size:12px;color:var(--ink2)}

/* ---- back link ---- */
/* The primary control on a company page: it comes first in the nav and reads
   left-to-right as an exit, which the wordmark never did. */
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:500;color:var(--ink);text-decoration:none;padding:9px 16px 9px 13px;
  border-radius:999px;box-shadow:var(--up-sm);background:var(--bg);
  transition:box-shadow .18s,transform .18s}
.back:hover{box-shadow:var(--up);transform:translateX(-2px)}
.back:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.back span{font-size:15px;line-height:1}
/* On a company page the wordmark is identity, not navigation, so it sits
   opposite the exit and shrinks out of the way first. */
.nav .brand{font-size:15px}
@media(max-width:359px){.nav .brand{font-size:0;gap:0}}

/* ---- home: the one line of scale ---- */
.summary{margin:0 0 26px;padding:0 4px;font-size:13.5px;line-height:1.6;
  color:var(--ink2)}
.summary a{color:var(--ink);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--lo);text-decoration:none;margin-left:4px}
.summary a:hover{border-bottom-color:var(--ink)}

/* The operations page is not part of the product, so it gets a footnote
   rather than a place in the nav -- but it has to be reachable without typing
   a URL. */
.foot-admin{display:block;margin-top:10px}
.foot-admin a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--lo)}
.foot-admin a:hover{color:var(--ink)}

/* The jump target for "How this works". scroll-margin keeps the heading clear
   of the sticky nav when the anchor lands. */
.fold{height:16px;scroll-margin-top:72px}

/* ---- home: explaining the drawing ---- */
/* A schematic, at a third the height of the real thing, using the same colour
   rules so the reader learns the legend here and carries it to the page. */
.example{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--bg);border-radius:var(--r2);box-shadow:var(--up);padding:20px}
.excol{min-width:0}
.excap{display:block;font-size:11.5px;font-weight:500;color:var(--ink2);
  margin-bottom:9px}
.exstack{display:block;border-radius:var(--r1);overflow:hidden;
  background:var(--well);box-shadow:var(--in-sm)}
.exband{display:flex;align-items:center;gap:5px;padding:0 10px;font-size:11px;
  color:#fff;line-height:1.2;border-bottom:1px solid rgba(255,255,255,.28)}
.exband:last-child{border-bottom:0}
.exband b{font-weight:700}
/* The palest asset tint and the yellow residual both need ink, not white. */
.exband[style*="--a5"],.exband[style*="--yellow"]{color:var(--ink)}
.exnote{margin:10px 2px 0;font-size:12px;color:var(--ink2)}

/* ---- home: the numbers ---- */
.stats{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:540px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--bg);border-radius:var(--r2);box-shadow:var(--up);
  padding:18px 20px}
.stat b{display:block;font-family:var(--mono);font-size:27px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1}
.statk{display:block;font-size:14px;font-weight:500;margin-top:5px}
.statn{display:block;font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.45}
/* The one number worth its own frame: the accounting identity holding across
   the whole universe is the claim a reader with finance experience checks. */
.bignum{margin-top:14px;background:var(--well);border-radius:var(--r2);
  box-shadow:var(--in);padding:22px 20px;text-align:center}
.bignum b{display:block;font-family:var(--mono);font-size:clamp(38px,11vw,52px);
  font-weight:700;letter-spacing:-.03em;line-height:1}
.bignum span{display:block;font-size:14px;color:var(--ink2);margin:10px auto 0;
  max-width:40ch;line-height:1.5}

/* ---- home: why it's hard ---- */
.hard{display:flex;flex-direction:column;gap:2px}
.hardrow{padding:18px 2px;border-bottom:1px solid var(--hi);
  box-shadow:0 1px 0 var(--lo)}
.hardrow:last-child{border-bottom:0;box-shadow:none}
.hardrow h3{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.hardrow p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:60ch}
.method{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--ink);
  background:var(--well);border-radius:var(--r1);box-shadow:var(--in-sm);
  padding:15px 17px}

/* ---- home: what it doesn't do ---- */
.limits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.limits li{font-size:14.5px;line-height:1.55;color:var(--ink2);
  padding-left:26px;position:relative}
/* An em dash rather than a tick: these are absences, not features earned. */
.limits li::before{content:"—";position:absolute;left:4px;color:var(--dim)}

/* ---- the question box ---- */
/* Same monochrome chrome as everything else. It sits below the drawing on
   purpose: the numbers answer most questions on their own, and this is for
   the ones they don't. */
.ask{margin-top:34px}
.qform{margin:0 0 14px}
.qfield{display:flex;align-items:center;gap:8px;background:var(--well);
  border-radius:999px;box-shadow:var(--in);padding:7px 7px 7px 8px}
.qfield input{flex:1;min-width:0;font:400 15.5px/1.2 var(--disp);color:var(--ink);
  background:transparent;border:0;padding:12px 10px;-webkit-appearance:none}
.qfield input::placeholder{color:var(--dim)}
.qfield input:focus{outline:0}
.qfield:focus-within{box-shadow:var(--in),0 0 0 2px var(--ink)}
.qfield button{flex:none;font:600 14px/1 var(--disp);color:var(--bg);
  background:var(--ink);border:0;border-radius:999px;padding:13px 20px;
  cursor:pointer;box-shadow:var(--up-sm);transition:box-shadow .18s,transform .18s}
.qfield button:hover:not(:disabled){box-shadow:var(--up)}
.qfield button:active:not(:disabled){transform:translateY(1px)}
.qfield button:disabled{opacity:.55;cursor:default}
.qfield button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.qchips{display:flex;flex-wrap:wrap;gap:9px}
.qchip{font:400 13px/1.3 var(--disp);color:var(--ink2);text-align:left;
  background:var(--bg);border:0;border-radius:999px;padding:10px 15px;
  cursor:pointer;box-shadow:var(--up-sm);transition:box-shadow .18s,color .18s}
.qchip:hover{color:var(--ink);box-shadow:var(--up)}
.qchip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.qanswer{margin-top:16px;border-radius:var(--r1);background:var(--well);
  box-shadow:var(--in-sm);padding:17px 19px;font-size:15.5px;line-height:1.6;
  color:var(--ink)}
.qanswer.pending{color:var(--dim)}
.qanswer.bad{color:var(--ink2)}
.qnote{margin:14px 0 0;font-size:12px;color:var(--ink2);line-height:1.5}

footer{margin-top:40px;padding:0 2px;font-size:12.5px;color:var(--ink2);line-height:1.6}

/* ---- View 3: the flow ---- */
.bs.flow .stack{margin-top:2px}
.band.keep{background:var(--yellow)}
.band.keep .bl{color:var(--ink)}
/* A loss is not a smaller profit. Ink, not a paler yellow. */
.band.keep.loss{background:var(--ink);border-top:3px solid var(--yellow)}
.band.keep.loss .bl{color:var(--yellow)}

/* ---- View 2: company against countries ---- */
/* Countries are drawn as empty wells and the company as a filled one, so the
   two never read as members of one ranked list. */
.scale-rows{display:flex;flex-direction:column;gap:14px}
.srow{display:grid;grid-template-columns:1fr;gap:5px}
.sname{font-size:13.5px;font-weight:500;line-height:1.25;color:var(--ink2)}
.sbar{display:block;height:20px;border-radius:999px;overflow:hidden;
  background:var(--well);box-shadow:var(--in-sm)}
.sbar i{display:block;height:100%;border-radius:999px;background:var(--dim);opacity:.4}
.sval{font-family:var(--mono);font-size:11.5px;color:var(--ink2)}
.srow.me .sname{font-weight:600;color:var(--ink)}
.srow.me .sbar i{background:var(--blue);opacity:1}
.srow.me .sval{color:var(--ink);font-weight:700}
.prov{font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin:14px 0 0;
  line-height:1.6}

/* 320px: the drawing keeps its two columns (that IS the view), so labels get
   tighter rather than the columns getting fewer. */
@media(max-width:359px){
  .wrap{padding:0 14px}
  .hero{padding:28px 20px 26px}
  .chead,.empty{padding:22px 18px}
  .bs{padding:18px 16px 0}
  .bs-cols{gap:10px}
  .card{padding:17px 16px;gap:2px 12px}
  .band .bl{font-size:10.5px;left:6px;right:6px}
  .band .bl .bv{font-size:9px}
  .lk{font-size:13px}
  .lv{font-size:11.5px}
  .search button{padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}