/* ============================================================
   Automotive Value Map — the whole stylesheet.
   Design system, light key. Tokens, type scale and component
   shapes carried over from the Greeting_user kit (Inter
   throughout, micro-caps labels, hairline borders, pill chips),
   inverted for a paper background.

   The webfont is linked from index.html rather than imported
   here: an @import inside an external sheet queues the font
   behind this file instead of alongside it.

   index.html also reads this file as text when it exports a
   chart, so the saved image carries these styles. Keep it
   valid CSS and it keeps working.
   ============================================================ */

  :root{
    /* Type is not black. It is the darkest step of the same blue ladder the
       data is drawn in, so a heading and a bubble belong to one family. The
       greys are that hue desaturated rather than neutral, for the same reason.
       The accent is the challengers' rose, so the one warm thing on the page is
       the one warm thing in the data. */
    --ink:#0A2340; --ink-2:#0E5794; --muted:#54677E; --muted-2:#8896AB;
    --line:rgba(10,35,64,.12); --line-strong:rgba(10,35,64,.20);
    --paper:#FFFFFF; --card:#FFFFFF; --panel:#FFFFFF; --subtle:#F2F5F9;
    --accent:#D9548A; --accent-2:#D9548A;
    /* State, not identity. These two say better or worse and are never given
       to a series: the accent above belongs to the Chinese challengers and to
       nothing else. Green and claret rather than green and rose, so a loss can
       never be mistaken for a brand. */
    --gain:#1F7A4C; --fall:#A32E4E;
    --gain-tint:#E9F3EE; --fall-tint:#FBECF0;
    --ink-tint:#EAF2FC;   /* the palest step of the ladder, for reference chips */
    /* Square. A rounded corner is product UI; this is a printed exhibit. */
    --r:0px; --r-lg:0px; --r-sm:0px;
    /* One face for everything. Source Serif 4 carries an optical-size axis, so
       at 10px on a tick label it serves a sturdier drawing than at 22px in a
       headline — which is what lets a serif work on a chart at all. */
    --ui:'Source Serif 4',Georgia,'Times New Roman',serif;
    /* Headings share the family and separate themselves by weight and tracking.
       One typeface, two voices. */
    --display:'Source Serif 4',Georgia,'Times New Roman',serif;
    --shadow:none;
  }
  /* Type is centred on its cap band. A flex row centres the ink it is given,
     so "LinkedIn" — a word with no descenders — floats a whole pixel above
     "Copy link", which has two. Measured on this face at these sizes: 1.2px.
     Every control that carries a label takes it, so they sit level with each
     other whatever letters they happen to contain. */
  :root{--cap-lift:1.2px;
    /* One gap unit. It is the space between two controls, and it is also the
       space after the last one, so a row ends the way it runs. */
    --row-inset:10px}
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-optical-sizing:auto;font-variant-numeric:tabular-nums}
  .wrap{max-width:1480px;margin:0 auto;padding:16px 40px 72px}

  /* one focus treatment for the whole page */
  :focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

  /* ---------- masthead ---------- */
  /* Title and tabs share one line. The first screen belongs to the map and the
     timeline, so the header takes a single band and nothing more. */
  /* The masthead holds position, so the title and the link out stay on screen
     while the reader is deep in the register. The filter row sticks under it
     rather than beneath the viewport edge — two bars, one stack, no overlap. */
  .topbar{position:sticky;top:0;z-index:40;background:var(--paper);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:6px 28px;border-bottom:1px solid var(--line);
    padding:12px var(--row-inset) 9px 0;margin-top:-12px}
  .brandline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0}
  h1{margin:0;font-family:var(--display);font-size:22px;line-height:1.2;
    letter-spacing:-.01em;font-weight:600;color:var(--ink);white-space:nowrap}
  /* The name and the years are two separate statements, and a single word
     space — pulled tighter still by the heading's negative tracking — ran them
     together. The gap is set here rather than in the markup so it survives a
     rewrite of the title. The years also get their tracking back: negative
     letter-spacing is for words, not for figures. */
  h1 span{font-weight:400;color:var(--muted-2);font-variant-numeric:tabular-nums;
    margin-left:10px;letter-spacing:0}

  /* tabs */
  .tabs{display:flex;gap:0;margin:0;align-items:center}
  .tabs button{appearance:none;background:none;border:0;cursor:pointer;padding:0 2px 10px;margin-right:24px;
    font:400 12.5px/1.35 var(--ui);color:var(--muted);border-bottom:2px solid transparent;
    margin-bottom:-10px;transition:color .15s,border-color .15s}
  .tabs button:hover{color:var(--ink)}
  .tabs button[aria-selected="true"]{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
  .tabs button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  .tabs .count{font-weight:400;color:var(--muted-2);margin-left:6px;font-variant-numeric:tabular-nums}
  /* a page-level action, so it lives on the page-level row rather than
     crowding the filters that belong to the charts */
  .tabs .btn{margin:0 0 0 4px;align-self:center;
    padding:calc(6px + var(--cap-lift)) 12px calc(6px - var(--cap-lift))}
  /* the author's line, at the far corner */
  .li{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding:calc(6px + var(--cap-lift)) 12px calc(6px - var(--cap-lift)) 10px;
    border:1px solid var(--line-strong);border-radius:var(--r-sm);text-decoration:none;
    font:400 11px/1.35 var(--ui);color:var(--muted);transition:.15s}
  .li svg{width:13px;height:13px;flex:none}
  .li:hover{color:var(--ink-2);border-color:var(--ink-2)}
  [role=tabpanel][hidden]{display:none}

  /* ---------- controls ---------- */
  /* One primary bar for time, one quiet bar for view options. No prose lives
     inside either: every explanation sits in a disclosure the reader can open. */
  /* The chart is a card, and the time slider is its header strip: same width as
     the drawing, hairline between them, view switches at the right end. */
  /* No card. What held the layout together was a tinted page with white panels
     on it; on a white ground the panel stops existing, so the box goes and
     alignment does its work instead — every horizontal padding is zero, so the
     drawing's left edge lands on the same line as the heading above it. */
  .chartcard{background:transparent;border:0}
  /* The controls are a band between two hairlines, not the lid of a box. */
  .chartbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
    padding:9px 0 10px;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);background:transparent}
  .timeline{display:flex;align-items:center;gap:14px;flex:1;min-width:330px}
  .chartbody{padding:8px 0 10px}
  /* The exhibit's source line. It is text in the document, not generated
     content: a reader has to be able to select it, copy it and have it read
     aloud, and it has to take part in the flow so that nothing below can slide
     under it. It sits between the drawing and the button that saves the
     drawing, because the source belongs to the exhibit and the button does
     not. */
  .srcline{margin:2px 0 4px;font:400 10.5px/1.5 var(--ui);color:var(--muted-2);max-width:80ch}
  /* Square, icon only, at the end of the row that acts on the chart. The
     caption it used to carry is now its accessible name and its tooltip: the
     words are still there for anyone who needs them, they just do not take a
     strip of the page for an action taken once. */
  .mini.dl{display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;padding:0;color:var(--muted)}
  .mini.dl svg{width:12px;height:12px;flex:none}
  .mini.dl:hover{color:var(--ink);border-color:var(--ink)}
  .mini.dl[disabled]{opacity:.55;cursor:default}
  /* the close-up carries no settings of its own, so its strip is a single line */
  .chartbar .lead h2{margin:0}
  .chartbar .lead p{margin:0}
  .volpanel .chartbar{gap:8px 20px;padding:11px 0 12px;justify-content:space-between}
  .zoompanel .chartbar{gap:9px 22px;padding:9px 0 10px}
  .zoompanel .chartbar .lead{flex-basis:100%}
  .zoompanel .chartbar .mini{flex:none}
  div.seg{display:flex;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
  div.seg button{appearance:none;border:0;background:transparent;cursor:pointer;font:400 11px/1.35 var(--ui);
    color:var(--muted);padding:calc(9px + var(--cap-lift)) 14px calc(9px - var(--cap-lift));transition:.15s}
  div.seg button+button{border-left:1px solid var(--line-strong)}
  div.seg button:hover{color:var(--ink)}
  div.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:500}
  .play{width:26px;height:26px;flex:none;border-radius:0;border:1px solid var(--line-strong);
    background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:.15s}
  .play:hover{border-color:var(--ink);background:var(--card)}
  .track{flex:1;min-width:0}
  input[type=range]{width:100%;margin:0;accent-color:var(--ink);cursor:pointer;height:2px}
  /* The active year grows and turns bold. If the labels were auto-width in a
     space-between row, that growth would re-space all nine siblings on every
     step and the whole page would twitch. Each label gets a fixed slot and a
     fixed line-height instead, so the emphasis happens inside its own box. */
  .years{display:flex;justify-content:space-between;margin-top:7px;height:14px}
  .years span{width:36px;flex:none;font:400 9px/14px var(--ui);color:var(--muted-2);
    letter-spacing:.02em;font-variant-numeric:tabular-nums;
    transition:color .2s,font-size .2s;position:relative;text-align:center}
  .years span:first-child{text-align:left}
  .years span:last-child{text-align:right}
  .years span.on{color:var(--ink);font-weight:600;font-size:11px}
  .years span.ev::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
    top:calc(100% + 3px);width:4px;height:4px;border-radius:50%;background:var(--accent-2);opacity:.8}
  /* The same mark inside a drawing: same colour, same weight, same distance
     under the year it belongs to, so the two kinds of chart speak one language. */
  .shock circle{fill:var(--accent-2);opacity:.8}

  /* the year is the anchor of the whole interaction — say it once, loudly */
  .yearnow{flex:none;display:flex;align-items:baseline;gap:8px;min-width:78px;
    justify-content:flex-end;margin:0}
  .yearnow small{font:600 7.5px/1 var(--ui);letter-spacing:.22em;
    text-transform:uppercase;color:var(--muted)}
  .yearnow b{font:600 20px/1 var(--ui);letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;color:var(--ink)}

  /* One line above the chart: what is drawn, and which brands are in it.
     It rides down the page with the reader, because the filter applies to all
     three charts and the lower two are a screen or more below the row that
     controls them — scrolling back up to drop a brand and scrolling down again
     to see the effect is the kind of round trip that makes a filter go unused.
     The title on the left steps aside once the row is stuck: "All 27 brands" is
     true of the chart it sits above, not of the volume chart it ends up over. */
  .ctrls{position:sticky;top:var(--topbar-h,52px);z-index:30;background:var(--paper);
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:8px 24px;margin:11px 0 9px;padding:7px var(--row-inset) 8px 0;
    transition:box-shadow .18s}
  .ctrls.stuck{box-shadow:0 1px 0 var(--line),0 10px 20px -14px rgba(21,26,40,.30)}
  .ctrls.stuck .lead{visibility:hidden}
  #ctrlsTop{height:1px;margin-bottom:-1px}
  .lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 11px;min-width:0}
  /* One gap in this row, not three. The chips were 7px apart, the groups 12px,
     and the row stopped 2px short of the column everything else lines up with,
     so "Segment average" read as pushed against the edge. */
  .ctrls .filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-left:auto}

  /* view options: short labels, pill shapes, the long wording in the tooltip */
  .viewbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-left:auto}
  .viewbar div.seg button{padding:8px 12px}
  .tgl{display:inline-flex;align-items:center;gap:7px;padding:calc(7px + var(--cap-lift)) 12px calc(7px - var(--cap-lift)) 10px;
    border:1px dashed var(--line-strong);border-radius:0;background:var(--card);
    font:400 10.5px/1.35 var(--ui);color:var(--muted);cursor:pointer;
    white-space:nowrap;transition:.15s;user-select:none}
  .tgl input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
  .tgl i{width:7px;height:7px;border-radius:50%;flex:none;
    box-shadow:inset 0 0 0 1px var(--line-strong);transition:.15s}
  .tgl:hover{border-color:var(--ink);color:var(--ink)}
  .tgl.on{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--subtle)}
  .tgl.on i{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .tgl:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px}
  /* Baselines, not boxes: the label is 8px in a 10px row, so aligning the
     boxes leaves it riding above the years it introduces. */
  .evkey{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:8px 0 0;
    font-size:10px;color:var(--muted);line-height:1.5;padding:0}
  .evkey b{color:var(--accent);font-weight:600}
  .evkey .leg-lbl{font:600 8px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

  /* ---------- answer strip ---------- */
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 10px}
  .kpi{border:0;border-top:1px solid var(--line-strong);padding:16px 0 0;
    background:transparent}
  .kpi h3{margin:0 0 11px;font:600 8.5px/1 var(--ui);letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted)}
  .kpi .v{font:600 26px/1 var(--ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .kpi .who{display:flex;align-items:center;gap:7px;margin-top:10px;font:500 11px/1.4 var(--ui);color:var(--ink)}
  .kpi .who i{width:8px;height:8px;border-radius:50%;flex:none}
  .kpi .who em{font-style:normal;color:var(--muted);font-weight:400}

  /* ---------- disclosures ---------- */
  details.mini{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
  details.mini[hidden]{display:none}
  details.mini>summary{cursor:pointer;list-style:none;font:400 11.5px/1 var(--ui);color:var(--muted);
    display:inline-flex;align-items:center;gap:9px;padding:2px 0;transition:color .15s}
  details.mini>summary::-webkit-details-marker{display:none}
  details.mini>summary::before{content:"+";font:400 13px/1 var(--ui);
    width:14px;height:14px;display:grid;place-items:center;color:var(--muted);
    transition:transform .2s,color .15s}
  details.mini[open]>summary::before{transform:rotate(45deg);color:var(--ink)}
  details.mini>summary:hover{color:var(--ink)}
  details.mini>summary:hover::before{color:var(--ink)}
  details.mini p{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.7}
  details.mini p b{color:var(--ink);font-weight:500}

  /* the notes stack: one shape, one width, one rhythm — every disclosure the
     page offers, collected at the foot so the charts run uninterrupted */
  .notes{display:flex;flex-direction:column;gap:8px;margin:40px 0 0}
  .notes-lbl{margin:0 0 6px;font:600 8px/1 var(--ui);letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted)}
  .notes details.mini{margin:0;border:0;border-top:1px solid var(--line);
    background:var(--card);padding:0;overflow:hidden;transition:border-color .15s}
  .notes details.mini:hover{border-color:var(--line-strong)}
  .notes details.mini>summary{padding:13px 0;width:100%}
  .notes details.mini[open]{background:transparent}
  .notes details.mini[open]>summary{border-bottom:1px solid var(--line);color:var(--ink)}
  .notes details.mini p{margin:14px 0 0;max-width:78ch}
  .notes details.mini p:last-child{margin-bottom:18px}

  /* panels */
  /* One map at full width, with the magnified view under the timeline rather
     than beside it: the first screen carries a single chart, read left to right
     the way the axis is read. */
  .panel h2{margin:0;font:600 9px/1.3 var(--ui);letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .panel p{margin:0 0 8px;font-size:10.5px;color:var(--muted-2)}
  .panel h2+p{margin-top:3px}
  /* title and caption on one line, so the chart starts as high as it can */
  .panel .panelhead{margin-bottom:6px}
  .panel .panelhead p{margin:0}
  .zoompanel{margin-top:0}
  .ceopanel{margin-top:0}
  /* The deck: the chart's name above its card, in the display face. A name, not
     a conclusion — the reader redraws half of these charts himself, and a
     headline stating a finding would be arguing with whatever he had just done.
     The second line is set as a block, on its own row and in the UI face, so
     the two never read as one run-on sentence. */
  .deck{font-family:var(--display);font-size:19px;line-height:1.3;color:var(--ink);
    font-weight:600;margin:44px 0 10px;letter-spacing:-.028em}
  /* the first deck opens the page's run of charts and needs no gap above it */
  .deck:first-of-type{margin-top:14px}
  /* Direct child only. The brand count inside these decks is its own span, and
     an unscoped rule turned that count into a block of its own — the standfirst
     broke across three lines with a bare "28" in the middle. Present since the
     counts were made computable; found in v49. */
  .deck>span{display:block;font:400 11px/1.5 var(--ui);color:var(--muted);
    letter-spacing:0;margin-top:5px;max-width:92ch}
  .panelcaveat{font-size:11px;line-height:1.6;color:var(--muted);max-width:92ch;margin:0 0 10px;
    padding-left:11px;border-left:2px solid var(--line-strong)}
  .panelcaveat b{color:var(--ink);font-weight:600}
  .quad{margin:12px 0 0;font-size:11.5px;line-height:1.65;color:var(--muted);max-width:96ch}
  .quad b{color:var(--ink);font-weight:600}
  .pick{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1.35 var(--ui);color:var(--muted)}
  .pick select{font:400 11px/1 var(--ui);color:var(--ink);background:var(--card);
    border:1px solid var(--line-strong);border-radius:0;padding:7px 10px;cursor:pointer}
  .pick select:hover{border-color:var(--ink)}
  .ceotable{margin:12px 0 0;overflow-x:auto}
  .ceotable table{border-collapse:collapse;width:100%;font:400 11.5px/1.5 var(--ui)}
  .ceotable table+.bridgehead{margin:22px 0 8px}
  .bridgehead{font:600 9px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin:0 0 8px}
  .bridgehead span{display:block;font:400 10.5px/1.5 var(--ui);letter-spacing:0;
    text-transform:none;color:var(--muted-2);margin-top:4px}
  .ceotable th{font-weight:600;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);text-align:right;padding:0 0 7px;border-bottom:1px solid var(--line)}
  .ceotable th:first-child,.ceotable td:first-child{text-align:left}
  .ceotable td{padding:8px 0;border-bottom:1px solid var(--line);text-align:right;
    font-variant-numeric:tabular-nums;color:var(--ink)}
  .ceotable td.who{color:var(--ink);font-weight:500}
  .ceotable td.when,.ceotable td.note{color:var(--muted);font-variant-numeric:normal}
  .ceotable td.up{color:var(--gain)}
  .ceotable td.down{color:var(--fall)}
  .ceotable a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong)}
  .ceoband{fill:var(--subtle)}
  .ceoband.alt{fill:var(--card)}
  .ceoname{font:600 9px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
  .ceoyears{font:400 9px/1 var(--ui);fill:var(--muted-2)}
  .ceobase{stroke:var(--muted-2);stroke-width:1;stroke-dasharray:5 4}
  .ceozero{stroke-width:1.4;opacity:.65}
  .ceoseg{stroke-width:1.6;opacity:.45;stroke-dasharray:2 5;stroke-linecap:round}
  .ceotable td.own{color:var(--muted);font-variant-numeric:tabular-nums}
  .ceozerolbl{font:600 8.5px/1 var(--ui);letter-spacing:.08em;opacity:.9;
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
  .ceobaselbl{font:400 8.5px/1 var(--ui);fill:var(--muted-2);
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
  .ceoline{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
  /* a 2.6px line is a hard target for a mouse and impossible for a thumb, so an
     invisible fat copy carries the clicks and the drawn one stays thin */
  .ceohit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer}
  .ceoline.lead1{stroke-dasharray:4 4}
  svg{width:100%;height:auto;display:block;overflow:visible}

  .frame{fill:var(--panel);stroke:var(--line)}
  .grid line{stroke:rgba(21,26,40,.05);stroke-width:1;stroke-dasharray:3 4}
  .zero{stroke:rgba(21,26,40,.2);stroke-width:1;opacity:1;stroke-dasharray:none}
  .tick{font:400 10px/1 var(--ui);fill:var(--muted-2);font-variant-numeric:tabular-nums}
  .axis{font:400 10.5px/1 var(--ui);fill:var(--muted-2)}
  .lbl{font:500 11px/1 var(--ui);fill:var(--ink);cursor:pointer;
    paint-order:stroke;stroke:#fff;stroke-width:3.2px;stroke-linejoin:round}
  .lbl.hot{font-weight:700;font-size:12px;stroke-width:4px}
  /* a segment line is a summary, so it is named in its own colour and never
     drawn as though it were a company */
  .lbl.avg{font-weight:600;font-style:italic;cursor:default}
  .vline.avg{stroke-dasharray:7 4;stroke-width:2.2}
  .vlbl.avg{font-weight:600;font-style:italic;cursor:default}
  .zoombox{fill:none;stroke:var(--muted-2);stroke-dasharray:5 3;stroke-width:1;opacity:.7}
  .zoombox.user{stroke:var(--ink-2);opacity:.9}
  .brushpad{cursor:crosshair}
  .brushpad.locked{cursor:default}
  /* while a window is being drawn, nothing underneath should react */
  .brush{pointer-events:none}
  .brush{fill:rgba(44,111,160,.08);stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 3}
  .panelhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
  .panelhead .lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
  .panel .hint{color:var(--muted-2)}
  /* The window can be drawn by hand, and nothing about a dashed rectangle says
     so on its own. The line sits with the close-up's own title, since that is
     the thing the drawing changes, and carries a small dashed box so the eye
     connects it to the one on the map. */
  .dragtip{display:inline-flex;align-items:center;gap:6px;font:400 10px/1.4 var(--ui);
    color:var(--muted-2);white-space:nowrap}
  .dragtip::before{content:"";width:13px;height:9px;flex:none;border-radius:2px;
    border:1px dashed var(--ink-2);opacity:.75}
  .dragtip[hidden]{display:none}
  .mainpanel>.hint{margin:8px 0 0;font-size:10.5px;color:var(--muted-2)}
  /* The leadership card sits at the foot of a long page, and a reader who never
     scrolls that far never learns that clicking a brand drives it. One line
     under the map, where the clicking actually happens. */
  .hint.jump a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-strong);
    padding-bottom:1px}
  .hint.jump a:hover{border-bottom-color:var(--accent)}
  .volpanel{margin-top:0}
  .vline{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:opacity .2s}
  .vdot{transition:opacity .2s}
  .vlbl{font:500 10.5px/1 var(--ui);pointer-events:auto;cursor:pointer;
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;transition:opacity .2s}
  .vlbl.hot{font-weight:700;font-size:11.5px;stroke-width:4px}
  .vnow{stroke:rgba(21,26,40,.28);stroke-width:1;opacity:.7;stroke-dasharray:3 3}
  .vsolo{opacity:.85}
  .mixband{cursor:pointer;transition:opacity .2s}
  .mixtop{stroke:var(--ink);stroke-width:1.4;opacity:.75}
  .mixtot{font:600 9.5px/1 var(--ui);fill:var(--ink);
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
  .vout{opacity:.5}
  .vhit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
  .iso path{fill:none;stroke:var(--muted-2);stroke-width:1;opacity:.7}
  .iso path.loss{stroke:var(--muted-2);stroke-dasharray:4 3;opacity:.5}
  .iso text{font:400 9.5px/1 var(--ui);fill:var(--muted-2);
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
  .iso text.loss{fill:var(--muted-2)}
  .sizekey circle{fill:none;stroke:var(--muted-2);stroke-width:1}
  .sizekey text{font:400 9.5px/1 var(--ui);fill:var(--muted-2)}
  .sizekey text.ttl{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:8px;fill:var(--muted)}
  .zoomtag{font:600 9px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;fill:var(--muted);
    paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
  .zoomtag.sub{font:400 9px/1 var(--ui);letter-spacing:.02em;text-transform:none;fill:var(--muted);opacity:.9}
  /* quiet enough to ignore while reading, present enough to survive a crop */
  .wm{font:400 8.5px/1 var(--ui);fill:var(--muted-2);opacity:.62;letter-spacing:.04em;
    pointer-events:none;user-select:none}
  .stop{opacity:.42}
  .bub{transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .25s;cursor:pointer}
  .bub circle{transition:r .65s cubic-bezier(.4,0,.2,1)}
  /* first appearance: take position instantly, then animate like everything else */
  .bub.nofly,.bub.nofly circle{transition:none}
  .g-hidden{display:none}

  /* legend — sits above the charts, because it is also the segment filter */
  .legend{display:flex;flex-wrap:wrap;gap:10px;margin:0;align-items:center}
  .legend .leg-lbl,.viewbar .leg-lbl{font:600 8px/1 var(--ui);letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);margin-right:6px}
  /* both rows start on the same vertical line, so the pair reads as a set */
  .ctrls .leg-lbl{min-width:44px}
  .chip{display:flex;align-items:center;gap:8px;padding:calc(6px + var(--cap-lift)) 14px calc(6px - var(--cap-lift)) 10px;border:1px solid var(--line-strong);
    background:var(--card);cursor:pointer;font:400 10.5px/1.35 var(--ui);
    color:var(--ink);transition:.15s}
  .chip:hover{border-color:var(--ink)}
  .chip[aria-pressed="false"]{color:var(--muted-2);border-style:dashed;background:transparent;opacity:.55}
  .chip[aria-pressed="false"]:hover{opacity:.8}
  .chip[aria-pressed="false"] i{opacity:.3}
  .chip i{width:9px;height:9px;border-radius:50%;display:block;flex:none;transition:.15s}
  .note{margin:0;font-size:11.5px;color:var(--muted);line-height:1.7}

  /* the notes carry their first outbound link in v49 — same treatment the CEO
     table already uses, so a reference reads the same wherever it appears */
  .note a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong)}
  .note a:hover{border-bottom-color:var(--ink-2)}

  /* sources */
  .srchead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin:32px 0 18px}
  .srchead h2{margin:0 0 8px;font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.03em}
  .srchead p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7;max-width:720px}
  .btn{appearance:none;border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r-sm);
    padding:calc(8px + var(--cap-lift)) 14px calc(8px - var(--cap-lift));font:400 11px/1.35 var(--ui);color:var(--ink);cursor:pointer;transition:.15s}
  .btn:hover{border-color:var(--ink)}
  .srcactions{display:flex;gap:10px;align-items:center;flex:none}
  #backMap{background:var(--ink);border-color:var(--ink);color:#fff}
  #backMap:hover{background:#000;border-color:#000}
  .tblwrap{border:0;overflow:auto;max-height:70vh;background:transparent}
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;line-height:1.6}
  thead th{position:sticky;top:0;background:var(--card);text-align:left;font-weight:600;font-size:8.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:13px 14px;
    border-bottom:1px solid var(--line-strong);white-space:nowrap;z-index:1}
  tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  tbody tr:last-child td{border-bottom:0}
  tbody tr.flash{background:var(--fall-tint)}
  tbody tr:hover{background:var(--subtle)}
  td.brand{font-weight:600;white-space:nowrap}
  td.brand i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1px}
  td.def{color:var(--muted)}
  td.def span{display:block}
  td.def span+span{margin-top:4px}
  td.def em{font-style:normal;color:var(--muted)}
  a.src{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong);word-break:break-word}
  a.src:hover{border-bottom-color:var(--ink-2)}
  .status{display:inline-block;padding:3px 8px;border-radius:4px;background:var(--subtle);color:var(--muted);
    font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

  .brandsel{position:relative}
  /* a field, not a button: icon, label, current value and caret — the four
     things that tell a reader something opens and something is being filtered */
  /* Fixed width, with the caret pinned to the right edge. The value inside
     changes on every click; a button that resized with it would shove the whole
     row sideways each time, and the thing the reader is aiming at would move
     under the cursor. */
  .filterbtn{display:inline-flex;align-items:center;gap:7px;padding:calc(6px + var(--cap-lift)) 11px calc(6px - var(--cap-lift)) 10px;
    min-width:160px;border:1px dashed var(--line-strong);border-radius:0;
    background:var(--card);cursor:pointer;
    font:400 10.5px/1.35 var(--ui);color:var(--ink);transition:.15s}
  .filterbtn .fcar{margin-left:auto}
  .filterbtn:hover{border-color:var(--ink)}
  .filterbtn[aria-expanded="true"]{border-style:solid;border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(21,26,40,.05)}
  .filterbtn .fico{width:11px;height:11px;flex:none;color:var(--muted-2)}
  .filterbtn .fcar{width:9px;height:6px;flex:none;color:var(--muted-2);transition:transform .18s}
  .filterbtn[aria-expanded="true"] .fcar{transform:rotate(180deg)}
  .filterbtn .fv{color:var(--muted);font-variant-numeric:tabular-nums}
  .filterbtn.on{border-style:solid;border-color:var(--ink-2);color:var(--ink-2)}
  .filterbtn.on .fico,.filterbtn.on .fv{color:var(--ink-2)}
  /* The button sits at the right end of its row, so the panel hangs from the
     button's right edge — a panel dropping left-aligned from a right-hand
     button would run off the page. */
  .pop{position:absolute;z-index:20;top:calc(100% + 8px);right:0;left:auto;width:640px;max-width:78vw;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:0 18px 48px rgba(21,26,40,.12);padding:14px 16px 16px}
  .popbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .poptitle{margin:0;font:500 12px/1.3 var(--ui);color:var(--ink)}
  .poptitle span{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
  .popacts{display:flex;gap:8px}
  .mini{appearance:none;border:1px solid var(--line-strong);background:var(--card);border-radius:6px;
    padding:calc(6px + var(--cap-lift)) 11px calc(6px - var(--cap-lift));font:400 10.5px/1.35 var(--ui);color:var(--ink);cursor:pointer;transition:.15s}
  .mini:hover{border-color:var(--ink)}
  .popgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
  .popgrp h4{margin:0 0 9px;font:600 8px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .popgrp label{display:flex;align-items:center;gap:8px;font:400 11.5px/1.8 var(--ui);color:var(--ink);cursor:pointer}
  .popgrp input{accent-color:var(--ink);cursor:pointer}
  .chip.partial{opacity:.72;border-style:dashed}
  .emptynote{font:400 12px/1 var(--ui);fill:var(--muted)}

  .srcbar{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:0 0 16px;padding:12px 0;
    background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fld{font:400 11px/1 var(--ui);color:var(--muted);display:flex;align-items:center;gap:8px}
  .fld select{font:400 11.5px/1 var(--ui);color:var(--ink);padding:7px 9px;border:1px solid var(--line-strong);
    border-radius:6px;background:var(--card);cursor:pointer}
  #ledgerFilters{display:flex;align-items:center;flex-wrap:wrap}
  /* The key to the two reference badges, sitting directly above the column
     that uses them. It replaced a counter of how many references were of
     which kind — a figure that described the author's remaining work rather
     than anything the reader could act on. */
  .lvlkey{margin:0 0 0 auto;display:grid;grid-template-columns:auto auto;
    gap:4px 9px;align-items:center;font-size:10.5px;line-height:1.4;color:var(--muted)}
  .lvlkey .lvl{margin:0;justify-self:end}

  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  tr.grp td{border-top:1px solid var(--line-strong)}
  tr.seg td{background:var(--subtle);border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line);
    padding:11px 14px;font:600 8px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  tr.seg i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:-1px}
  select optgroup{font-style:normal;font-weight:600;color:var(--muted)}
  select option{font-weight:400;color:var(--ink)}
  td.yr{color:var(--muted);font-variant-numeric:tabular-nums}
  sup.ref{font-size:9px;font-weight:600;margin-left:4px;vertical-align:super}
  sup.ref a{text-decoration:none;color:var(--ink-2);padding:1px 3px;border-radius:3px;background:var(--ink-tint)}
  sup.ref a:hover{background:var(--ink-2);color:#fff}
  ol.refs{margin:0;padding:0;list-style:none;counter-reset:r}
  ol.refs li{position:relative;padding-left:20px;margin-bottom:5px;line-height:1.55}
  ol.refs li:last-child{margin-bottom:0}
  /* A single reference needs no ordinal in front of it: nothing points at it,
     so the counter is a label for a list of one. The row keeps its indent so
     that single- and multi-reference rows still start on the same line. */
  ol.refs.one li{padding-left:0}
  ol.refs.one li::before{display:none}
  ol.refs li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:1px;
    font-size:9px;font-weight:600;color:var(--ink-2);background:var(--ink-tint);border-radius:3px;padding:1px 4px}
  .lvl{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:3px;font-size:9px;
    font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
  .lvl.doc{background:var(--gain-tint);color:var(--gain)}
  /* A library reference is a state of the register, not a warning and not a
     brand, so it wears neutral rather than the accent it used to borrow. */
  .lvl.lib{background:var(--subtle);color:var(--muted)}
  /* A link can resolve to the right document and the number above it can still
     not have been read off that document. The two are different claims, so they
     get different badges: doc/library is about the reference, est is about the
     value. */
  .lvl.est{background:var(--fall-tint);color:var(--fall)}
  /* The rate table is reference material, not a finding: quiet, dense, readable */
  .fxtbl{border-collapse:collapse;font:400 11px/1.5 var(--ui);margin:6px 0 2px}
  .fxtbl th,.fxtbl td{padding:3px 10px 3px 0;text-align:left;white-space:nowrap}
  .fxtbl th{font-weight:500;color:var(--muted-2);border-bottom:0.5px solid var(--line)}
  .fxtbl td.num,.fxtbl th.num{text-align:right;font-variant-numeric:tabular-nums}
  .fxtbl tbody tr:last-child td{border-top:0.5px solid var(--line)}
  /* A reconstructed value is marked where it is read, not only in the note */
  td.num.est{color:var(--fall)}
  td.num.est::after{content:'~';margin-left:3px;opacity:.55;font-size:10px}
  .caveat{margin:6px 0 0;font-size:10.5px;line-height:1.6;color:var(--accent)}
  .empty{padding:26px 16px;color:var(--muted);font-size:12.5px}

  /* ---------- brand detail ----------
     Clicking a bubble used to throw the reader into a 207-row register with no
     way back. It opens this instead: the brand's own numbers, then a deliberate
     step into the register if they want it. */
  #scrim{position:fixed;inset:0;background:rgba(21,26,40,.2);opacity:0;pointer-events:none;
    transition:opacity .2s;z-index:30}
  #scrim.on{opacity:1;pointer-events:auto}
  #drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--card);
    border-left:1px solid var(--line);box-shadow:-18px 0 48px rgba(21,26,40,.1);
    z-index:31;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column}
  #drawer.on{transform:none}
  .dwhead{padding:24px 24px 18px;border-bottom:1px solid var(--line);flex:none}
  .dwhead .seg-tag{display:inline-flex;align-items:center;gap:8px;font:600 8px/1 var(--ui);
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
  .dwhead .seg-tag i{width:8px;height:8px;border-radius:50%}
  .dwhead h3{margin:0;font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.03em}
  .dwhead p{margin:9px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
  .dwclose{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;
    border:1px solid var(--line-strong);background:var(--card);color:var(--muted);cursor:pointer;
    font:400 15px/1 var(--ui);display:grid;place-items:center;transition:.15s}
  .dwclose:hover{border-color:var(--ink);color:var(--ink)}
  .dwbody{overflow:auto;padding:0 24px 24px;flex:1}
  .dwbody table{width:100%;font-size:12px;margin-top:16px}
  .dwbody thead th{position:sticky;top:0;background:var(--card);font:600 8px/1 var(--ui);
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:10px 0;
    border-bottom:1px solid var(--line-strong);text-align:right}
  .dwbody thead th:first-child{text-align:left}
  .dwbody td{padding:9px 0;border-bottom:1px solid var(--line);text-align:right;
    font-variant-numeric:tabular-nums}
  .dwbody td:first-child{text-align:left;color:var(--muted)}
  .dwbody tr.now td{font-weight:600;color:var(--ink)}
  .dwbody tr.now td:first-child{color:var(--ink)}
  .dwbody tr.none td{color:var(--muted-2);text-align:left;font-weight:400}
  .dwdef{margin:18px 0 0;font-size:11px;line-height:1.7;color:var(--muted)}
  .dwdef b{color:var(--ink);font-weight:500}
  .dwnote{margin:12px 0 0;font-size:10.5px;line-height:1.6;color:var(--fall);
    background:var(--fall-tint);border-radius:var(--r-sm);padding:11px 13px}
  .dwfoot{flex:none;padding:16px 24px;border-top:1px solid var(--line);background:var(--subtle);
    display:flex;gap:10px;flex-wrap:wrap}
  .dwfoot .btn{flex:1;text-align:center}
  .dwfoot .btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
  .dwfoot .btn.pri:hover{background:#000;border-color:#000}

  @media (max-width:680px){
    #drawer{top:auto;bottom:0;right:0;left:0;width:auto;max-width:none;height:auto;max-height:86vh;
      border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
      transform:translateY(100%);box-shadow:0 -18px 48px rgba(21,26,40,.14)}
    .dwhead{padding:20px 18px 16px}
    .dwbody{padding:0 18px 18px}
    .dwfoot{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
    .dwbody table{font-size:11.5px}
    .dwbody thead th{font-size:7.5px;letter-spacing:.14em}
    .dwhead h3{font-size:20px}
  }
  @media (prefers-reduced-motion:reduce){#drawer{transition:none}}

  /* ---------- hover tooltip ---------- */
  #tip{position:fixed;z-index:40;pointer-events:none;opacity:0;transition:opacity .15s;
    background:var(--card);color:var(--ink);font-family:var(--ui);
    border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;
    box-shadow:0 12px 32px rgba(21,26,40,.12);min-width:196px;max-width:250px}
  #tip h4{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:-.01em}
  #tip table{border-collapse:collapse;font:400 11px/1 var(--ui);width:auto}
  #tip td{padding:3px 0;border:0;color:var(--ink)}
  #tip td.y{color:var(--muted-2);padding-right:12px;font-variant-numeric:tabular-nums}
  #tip td.n{text-align:right;padding-left:12px;font-variant-numeric:tabular-nums}
  #tip tr.now td{font-weight:600}
  #tip .foot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
    font-size:10px;color:var(--muted);line-height:1.5}

  @media (prefers-reduced-motion:reduce){
    .bub,.bub circle,.vline,.vdot,.vlbl{transition:none}
  }

  /* ---------- tablet ---------- */
  @media (max-width:1080px){
    .wrap{padding:16px 22px 52px}
    h1{font-size:20px}
    .ctrls .filters{margin-left:0;flex-basis:100%}
    .pop{width:calc(100vw - 60px)}
    .popgrid{grid-template-columns:repeat(2,1fr)}
    .kpis{gap:12px}
    .kpi .v{font-size:22px}
  }

  /* ---------- the rotate hint ----------
     Hidden everywhere by default. It appears only on a small screen held
     upright, and it says what it can offer rather than what the reader has
     done wrong: the charts are drawn wide, turning the phone gives them the
     room. Nothing is blocked either way. */
  .rotate-hint{display:none}
  @media (max-width:680px) and (orientation:portrait){
    .rotate-hint{display:flex;align-items:center;gap:10px;
      margin:0 0 12px;padding:9px 11px;
      border:1px solid var(--line-strong);background:var(--subtle);
      font:400 11.5px/1.45 var(--ui);color:var(--ink)}
    .rotate-hint svg{width:15px;height:15px;flex:none;color:var(--muted)}
    .rotate-hint button{margin-left:auto;flex:none;appearance:none;border:0;
      background:none;color:var(--muted-2);font:inherit;font-size:15px;
      line-height:1;cursor:pointer;padding:2px 4px}
    .rotate-hint button:hover{color:var(--ink)}
  }

  /* ---------- phone ---------- */
  @media (max-width:680px){
    .wrap{padding:14px 14px 44px}
    /* the years wrap to their own line on a phone rather than breaking mid-range */
    h1{font-size:19px;letter-spacing:-.015em;white-space:normal}
    .topbar{gap:8px}
    .tabs button{margin-right:18px;font-size:12.5px}

    .ctrls{position:static;padding:0 2px}
    /* no hand-drawn window at this width — see the pointerdown guard */
    #brushHint,.dragtip{display:none}
    .brushpad{cursor:default}
    /* the header strip stacks: slider on its own line, switches under it */
    .chartbar{gap:12px;padding:12px 12px 13px}
    .chartbody{padding:6px 8px 8px}
    .timeline{min-width:0;width:100%;gap:11px}
    .yearnow{min-width:62px}
    .yearnow b{font-size:19px}
    div.seg{flex:1;min-width:150px}
    div.seg button{flex:1;padding:9px 6px;font-size:11px}
    .viewbar{gap:6px;width:100%;margin-left:0}
    .tgl{padding:8px 12px}
    .kpis{grid-template-columns:1fr;gap:10px;margin-bottom:18px}
    .deck{font-size:17px;margin:34px 0 8px}
    .deck:first-of-type{margin-top:10px}
    .ceoname{font-size:14px}
    .ceoyears{font-size:13px}
    .ceobaselbl{font-size:12px}
    .ceozerolbl{font-size:11px}
    .pick{width:100%;justify-content:space-between}
    .ceotable table{font-size:11px}
    .kpi{padding:14px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .kpi h3{margin:0;flex-basis:100%}
    .kpi .who{margin-top:0}
    /* narrower slots on a phone, still fixed so the strip never re-spaces */
    .years span{width:26px;font-size:8.5px}
    .years span.on{font-size:10.5px}
    .evkey{font-size:9.5px;gap:2px 12px}
    .brandsel{width:100%}
    #brandsBtn{width:100%;justify-content:center}
    .pop{width:calc(100vw - 28px);right:0;left:auto;max-width:none;padding:12px 14px 14px}
    .popgrid{grid-template-columns:1fr;gap:12px}
    .tblwrap{max-height:none}

    /* SVG text is in viewBox units, so it shrinks with the panel — scale it back up */
    .tick{font-size:17px}
    .axis{font-size:19px}
    .lbl{font-size:19px;stroke-width:5px}
    .zoomtag{font-size:15px}
    .zoomtag.sub{font-size:14px}
    .emptynote{font-size:19px}
    .iso text{font-size:16px;stroke-width:4.5px}
    .sizekey text{font-size:16px}
    .sizekey text.ttl{font-size:13px}
    .wm{font-size:13px}
    /* the volume panel switches to a narrow viewBox on phones (see fitVolume),
       so its text needs a smaller nominal size than the map panels */
    .vlbl{font-size:18px;stroke-width:4.5px}
    .mixtot{font-size:15px}
    .volpanel{margin-top:0}

    .legend{gap:7px;margin-bottom:14px}
    .chip{padding:6px 11px 6px 8px;font-size:10.5px}
    .note{font-size:11px}

    .srchead{margin:24px 0 14px}
    .srchead h2{font-size:19px}
    .srchead p{font-size:12px}
    .srcbar{gap:12px;padding:12px 14px}
    .lvlkey{margin:0;width:100%;justify-content:start}
    table{font-size:11.5px}
    thead th{padding:10px 10px;font-size:8px}
    tbody td{padding:10px}
    #tip{display:none}
  }

  /* ---------- a phone gets its screen back ----------
     Sticky is a bargain that only pays on a tall window: a bar costs its own
     height forever and saves a scroll. In landscape a phone is ~360px tall and
     these two bars are a third of it, which is the wrong side of that bargain.
     Both let go — of the height, and of the shadow and the hidden title that
     only made sense while they held position. */
  @media (max-width:680px), (max-height:620px){
    .topbar{position:static;margin-top:0;padding-top:2px}
    .ctrls{position:static;top:auto}
    .ctrls.stuck{box-shadow:none}
    .ctrls.stuck .lead{visibility:visible}
  }