/* BalanceProof — 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;
  /* `--ink` was doing three jobs: prose, the label written ON a pale band, and
     the FILL of negative equity. They only look alike on a light ground -- on a
     dark one, prose goes near-white and negative equity becomes the brightest
     slab on the page. Split here so the dark theme can move them apart. */
  --band-ink:#FFFFFF;                   /* label written on a saturated band */
  --band-neg:var(--ink);                /* fill for negative equity / a loss */

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

  /* Layout: the measure and the gutter. See `.wrap` below for why these are
     fixed rather than fluid. `--gut` drops to 16px on narrow screens, where
     24px of each edge is a real fraction of the line. */
  --measure:1100px; --gut:24px;

  --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)}
/* The page column. Two numbers, used everywhere.

   `--measure` caps the line length. Without it `.wrap` was `max-width:100%`
   with a fluid gutter, which reads as "padded" on a laptop and as nothing at
   all on a wide monitor: at 2560px the gutter capped at 64px and body
   paragraphs ran 2432px, which is both unreadable and looks like text pinned
   to the glass. A measure is the fix for that; more padding is not, because
   padding that scales with the viewport is still a fraction of it.

   `--gut` is the breathing room on either side, and it is a fixed pixel value
   on purpose. It is the smallest gap that stops text feeling stuck to the
   edge, and that distance does not get bigger because the screen did.

   The nav opts out immediately below: it is a full-bleed shelf and the logo
   sits against the page edge by design. */
.wrap{width:100%;max-width:var(--measure);margin:0 auto;
  padding:0 var(--gut)}

/* Full-bleed, and deliberately. The nav is a shelf across the whole window,
   so constraining it to the measure would walk the logo inwards on a wide
   screen and leave it floating in the middle of the bar. */
nav .wrap{max-width:none;padding:0 clamp(18px,4vw,64px)}

/* 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}
/* Sits between the heading and the chips: the name the filings on this page
   were actually filed under, when SEC's current name for the CIK is a later
   one. Subdued, because it is context for the heading rather than a caveat
   about the figures. */
.cformer{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink2);margin:-8px 0 14px}
.cformer b{font-weight:700;color:var(--ink)}
.cmeta{display:flex;flex-wrap:wrap;gap:8px}
/* Shown only when the URL's symbol is not the one the filings are stored
   under: a share class, or a registrant that renamed and took a new ticker.
   Quiet, because it explains the page rather than qualifying the figures. */
.cnote{font-size:12.5px;line-height:1.5;color:var(--ink2);margin:14px 0 0;
  max-width:62ch}
.cnote b{color:var(--ink);font-weight:600}
.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 var(--band-rule,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:var(--band-ink);
  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:var(--band-ink);line-height:1.2;
  border-bottom:1px solid var(--band-rule,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(--band-neg);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}

/* One number, not a per-element override: every block that sits in `.wrap`
   narrows with it. */
@media(max-width:640px){
  :root{--gut:16px}
}

/* 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){
  .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}}

/* ---- wide screens ---- */
/* The page is full-width now, which is a container decision and not a typography
   one: a 2,400px line of prose is unreadable however much room there is. So the
   width is spent on the two things that can actually use it -- larger display
   type, and grids that get another column -- while every measure stays a
   measure. Nothing here changes below 1400px. */
@media (min-width: 1400px) {
  .htitle{font-size:clamp(44px,3.6vw,64px);max-width:16ch}
  .hlede{font-size:18px;max-width:52ch}
  .sec-sub{font-size:16px;max-width:64ch}
  .hero{padding:44px 46px 40px}
  .sec{margin:0 0 44px}
  /* Endpoint cards and example thumbnails are short and self-contained: two
     up reads as a set, one up reads as a list of mostly-empty boxes. */
  .eps{grid-template-columns:1fr 1fr;gap:14px}
  /* The one thing that must NOT take the full width. The legend is a label
     on the left and a figure on the right; at 2,400px apart the eye loses the
     row between them, which is the exact reading the drawing exists to make
     easy. The stacks above it still spread -- they are shapes, and a shape
     gains from being big. A row of two numbers does not. */
  table.legend{max-width:1100px}
}

/* ---- a filing that does not balance ---------------------------------------
   The one exception to "the only colour on the page is data". Every other
   note on this page is a remark about presentation -- this filer does not
   break X out, liabilities were derived -- and they are all correctly grey.
   This one says the two columns disagree, on a site whose entire argument is
   that they are the same money counted twice. Read as grey, it would be the
   most important sentence on the page wearing the costume of the least. */
.note.warn{
  background:color-mix(in srgb, var(--red) 12%, var(--well));
  box-shadow:var(--in-sm), inset 3px 0 0 0 var(--red);
  color:var(--ink);
  font-weight:500;
}