/* ============================================================================
   VaMoS — layout
   ============================================================================
   Everything is scoped under .vamos. Nothing here styles a bare element: the
   shell owns the document, and an app that styles `body` is styling the host's
   page — the fault that locked the whole page during the Top Gear port.

   The class vocabulary is Top Gear's (viewbar, view-tabs, toolbar, chips,
   tbl-wrap, drawer) so the two apps read as one family rather than two.
   ========================================================================= */

.vamos{display:block}
.vamos *{box-sizing:border-box}

/* ---- the bar above the table ------------------------------------------- */

.vamos .viewbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 0 10px;border-bottom:1px solid var(--border);
}
.vamos .view-tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--radius);padding:3px}
.vamos .view-tabs button{
  border:0;background:transparent;cursor:pointer;
  padding:7px 13px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:.82rem;font-weight:600;color:var(--text-dim);
}
.vamos .view-tabs button:hover{color:var(--text)}
.vamos .view-tabs button.active{background:var(--bg2);color:var(--text-bright);box-shadow:var(--shadow)}

.vamos .toolbar{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.vamos .toolbar input[type=text]{
  width:230px;max-width:48vw;padding:8px 11px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.84rem;color:var(--text);
}
.vamos .toolbar input[type=text]:focus{outline:2px solid var(--accent-line);outline-offset:1px}

.vamos .chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0}
.vamos .chip{
  border:1px solid var(--border);background:var(--bg2);color:var(--text-dim);
  padding:5px 11px;border-radius:20px;cursor:pointer;
  font-family:inherit;font-size:.76rem;font-weight:600;
}
.vamos .chip:hover{border-color:var(--accent-line);color:var(--text)}
.vamos .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.vamos .chip .n{opacity:.62;margin-left:5px;font-variant-numeric:tabular-nums}

.vamos .count{padding:10px 0 0;font-size:.78rem;color:var(--text-dim)}

/* ---- views -------------------------------------------------------------- */

.vamos .view{display:none;padding:14px 0 28px}
.vamos .view.active{display:block}

/* Wide content scrolls inside its own container; the page never widens around
   it (§11). */
.vamos .tbl-wrap{
  background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
/* A BOUNDED PANE, WHICH IS WHAT MAKES THE HEADING STICK.
   The wrapper scrolls sideways so a wide table never widens the page, and an
   overflow value other than visible makes the box a scrollport on BOTH axes —
   so the sticky heading inside was already pinned to this box rather than to
   the window. With no height limit the box never scrolled vertically, the
   heading had nothing to stick to, and scrolling the page carried it away:
   measured 433px above the top of the window on AIon's 45 rows, 1026px on
   VaMoS's Focus List.

   Giving the box a height fixes it, and the height has to leave room for what
   sits BELOW the table — the footer — and for whatever the host has pinned to
   the top of the window. What sits ABOVE the table does not appear: it scrolls
   away. --chrome-h is measured by the shell into the real height of its sticky
   topbar and nav (the same property core/top-gear/mount.css reads); unset, as
   on a page with no chrome, it is zero and the arithmetic still holds. */
.vamos .tbl-wrap{
  overflow:auto;
  max-height:calc(100vh - var(--chrome-h, 0px) - 200px);
  min-height:300px;
}

/* SEPARATE, not collapse. A collapsed border belongs to the table rather than
   to the cell, and a sticky cell scrolled over its neighbour then leaves its
   hairline behind — the same reason Top Gear's fund table is separate. Only
   bottom borders are drawn here, so nothing doubles up. */
.vamos table{border-collapse:separate;border-spacing:0;width:100%;font-size:.84rem}
.vamos th,.vamos td{padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border-lt)}
.vamos thead th{
  position:sticky;top:0;z-index:2;background:var(--bg4);
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  cursor:pointer;user-select:none;
}
.vamos thead th:hover{color:var(--text)}
.vamos thead th .dir{opacity:.55;margin-left:4px}
.vamos tbody tr{cursor:pointer}
.vamos tbody tr:hover{background:var(--hover-bg)}
.vamos tbody tr:last-child td{border-bottom:0}
.vamos .num{text-align:right;font-variant-numeric:tabular-nums}
.vamos .nm{font-weight:600;color:var(--text-bright)}
.vamos .dim{color:var(--text-dim)}
.vamos .pos{color:var(--pos);font-weight:600}
.vamos .neg{color:var(--neg);font-weight:600}

/* Ticker and Name stay put when the table scrolls sideways, and so does the
   checkbox — a tick belonging to a row whose name has scrolled away is not a
   selection anybody can check. A sticky cell has to be OPAQUE and painted the
   same ground as the rest of the row, or it reads as a stripe down the left —
   measured on Top Gear, 07.09.
   The widths here are FIXED because the left offsets are: an auto-width Ticker
   column and a hard-coded left:36px disagree the moment a longer ticker
   arrives, and the disagreement shows as one column sliding under another. */
.vamos .tbl-wrap td:first-child,
.vamos .tbl-wrap th:first-child,
.vamos .tbl-wrap .stick1,
.vamos .tbl-wrap .stick2{position:sticky;z-index:1;background:var(--bg2)}
.vamos .tbl-wrap td:first-child,
.vamos .tbl-wrap th:first-child{left:0}
.vamos .tbl-wrap thead th:first-child,
.vamos .tbl-wrap thead th.stick1,
.vamos .tbl-wrap thead th.stick2{z-index:3;background:var(--bg4)}
.vamos .selh{width:36px;min-width:36px;text-align:center;padding-left:13px;padding-right:2px}
.vamos .tbl-wrap .stick1{left:36px;width:96px;min-width:96px}
.vamos .tbl-wrap .stick2{left:132px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.vamos tbody tr:hover td:first-child,
.vamos tbody tr:hover td.stick1,
.vamos tbody tr:hover td.stick2{background:#faf6f5}
.vamos tbody tr.picked td{background:var(--bg3)}
.vamos tbody tr.picked td:first-child,
.vamos tbody tr.picked td.stick1,
.vamos tbody tr.picked td.stick2{background:var(--bg3)}
.vamos .selh input{accent-color:var(--accent);cursor:pointer;margin:0}

/* ---- alerts ------------------------------------------------------------- */

/* A reached soft stop is an event, so the row carries ground colour rather
   than coloured text. Red text in a column of numbers is decoration. */
.vamos tr.stop td{background:var(--accent-soft)}
.vamos tr.stop td:first-child,
.vamos tr.stop td.stick1,
.vamos tr.stop td.stick2{background:var(--accent-soft)}
.vamos tr.stop td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.vamos .earn{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.03em;
}
/* An attribute, not an event. The soft-stop ground and the earnings badge are
   things that just happened; this is a standing property, so it is a quiet tag
   in the interface ramp rather than another thing competing for attention.
   Value and Growth are the two ends and are tinted; Blend is the middle and is
   left plain, because most of the book is Blend and tinting it would colour the
   whole table for no information. */
.vamos .vstyle{
  display:inline-block;padding:1px 8px;border-radius:20px;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;
  border:1px solid var(--border);color:var(--text-dim);
}
.vamos .vstyle.is-value{border-color:rgba(46,125,123,.35);color:var(--pos);background:rgba(46,125,123,.07)}
.vamos .vstyle.is-growth{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}

/* The style box. Size and valuation style are ONE classification and read as
   one mark: 3×3, style across, size down, the position's square filled — the
   Morningstar shape in data/vamos/morningstar.jpg. Squares, not rounded: this
   is a diagram, and a grid of pills is neither. */
.vamos .sbox{display:block;overflow:visible}
.vamos .sbox rect.sb{fill:var(--bg3);stroke:var(--border);stroke-width:.4}
.vamos .sbox rect.sb.on{fill:var(--accent);stroke:var(--accent)}
/* Half known — the size but not the style, or the other way round. A tinted
   band says "somewhere along here" without claiming a square. */
.vamos .sbox rect.sb.part{fill:var(--accent-line);stroke:var(--accent-line)}
.vamos .dbox,.vamos .fsbox{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.vamos .dbox{justify-content:flex-start}

/* ---- columns and selection ---------------------------------------------- */

.vamos .colpick{position:relative}
.vamos .colpick summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg2);color:var(--text-dim);font-size:.76rem;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;
}
.vamos .colpick summary::-webkit-details-marker{display:none}
.vamos .colpick[open] summary,.vamos .colpick summary:hover{border-color:var(--accent-line);color:var(--text)}
.vamos .colpick summary .n{opacity:.62;margin-left:6px;font-variant-numeric:tabular-nums}
.vamos .colpick-body{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:262px;
  max-height:340px;overflow-y:auto;padding:12px 14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.vamos .colpick-body label{
  display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:.82rem;color:var(--text);cursor:pointer;
}
.vamos .colpick-body input{accent-color:var(--accent);cursor:pointer}
.vamos .colpick-foot{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border-lt);
  font-size:.74rem;color:var(--text-dim);
}
.vamos .colpick-foot button{
  border:1px solid var(--border);background:var(--bg3);color:var(--text);
  border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;
  font-family:inherit;font-size:.74rem;font-weight:700;
}
.vamos .colpick-foot button:hover{border-color:var(--accent-line)}

/* The document button, which sits beside the Columns control and should look
   like its neighbour rather than like a button somebody forgot to style — the
   first draft had no rules at all, so the icon drew at its intrinsic size in
   solid black next to 12px type. */
.vamos .docbtn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg2);color:var(--text-dim);cursor:pointer;
  font-family:inherit;font-size:.76rem;font-weight:700;letter-spacing:.03em;
}
.vamos .docbtn:hover{border-color:var(--accent-line);color:var(--text)}
.vamos .docbtn:hover svg{stroke:var(--accent)}
.vamos .docbtn:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
.vamos .docbtn svg{
  width:14px;height:14px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

.vamos .selbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);
}
.vamos .selbar .seln{font-size:.82rem;font-weight:700;color:var(--text-bright)}
.vamos .selbar button{
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:var(--radius-sm);padding:7px 14px;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:700;
}
.vamos .selbar button.ghost{background:transparent;border-color:var(--border);color:var(--text-dim)}
.vamos .selbar button.ghost:hover{border-color:var(--accent-line);color:var(--text)}
.vamos .selbar .selnote{flex:1 1 100%;font-size:.76rem;color:var(--text-dim)}
.vamos .chip.drop .x{margin-left:7px;opacity:.75}

.vamos .room{font-variant-numeric:tabular-nums;color:var(--text-dim)}
.vamos .room.hit{color:var(--accent);font-weight:700}
.vamos .nopx{color:var(--text-dim);font-style:italic;font-size:.78rem}

.vamos .alerts{display:flex;flex-direction:column;gap:8px;padding:12px 0 0}
.vamos .alert{
  padding:10px 13px;border-radius:var(--radius-sm);font-size:.85rem;
  background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--text-bright);
}
.vamos .alert.quiet{background:var(--bg3);border-left-color:var(--text-dim)}
.vamos .alert b{font-weight:700}

/* ---- track record ------------------------------------------------------- */

.vamos .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.vamos .kpi{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:15px 17px;box-shadow:var(--shadow);
}
.vamos .kpi .k{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.vamos .kpi .v{font-size:1.5rem;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;margin-top:4px}
.vamos .kpi .s{font-size:.76rem;color:var(--text-dim);margin-top:2px}

.vamos .panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow);margin-top:16px;
}
.vamos .panel h3{
  margin:0 0 12px;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);
}
.vamos .note{font-size:.82rem;color:var(--text-dim);margin:12px 0 0;line-height:1.5}

/* A bar is read against its neighbours, so the scale is shared and the zero is
   a real zero. */
.vamos .bars{display:flex;flex-direction:column;gap:7px}
.vamos .bar{display:grid;grid-template-columns:110px 1fr 92px;gap:10px;align-items:center;font-size:.82rem}
.vamos .bar .t{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vamos .bar .track{background:var(--bg3);border-radius:4px;height:16px;position:relative;overflow:hidden}
.vamos .bar .fill{position:absolute;top:0;bottom:0;border-radius:4px}
.vamos .bar .fill.p{background:var(--pos)}
.vamos .bar .fill.n{background:var(--neg)}
.vamos .bar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-dim)}

/* ---- matrix ------------------------------------------------------------- */

.vamos .mh{
  margin:0 0 10px;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);
}
.vamos .mh + .tbl-wrap + .note{margin-bottom:26px}
.vamos .matrix{font-size:.82rem}
.vamos .matrix th{position:static;background:transparent;cursor:default}
.vamos .matrix td{text-align:center;font-variant-numeric:tabular-nums;padding:8px 12px}
.vamos .matrix td.z{color:var(--border)}
.vamos .matrix .rh{text-align:left;font-weight:600;color:var(--text-bright);white-space:nowrap}
.vamos .matrix tfoot td,.vamos .matrix tfoot .rh{font-weight:700;border-top:1px solid var(--border)}

/* ---- the map ------------------------------------------------------------
   Page 2 of the printed Focus List, rebuilt for a screen. The band, the white
   headings and the thin rules are the printed sheet's; what is new is that the
   names are live, the empty sectors are visibly empty rather than absent, and
   every heading carries its own count. */
.vamos .map{font-size:.82rem;table-layout:fixed}
.vamos .map th,.vamos .map td{border-bottom:1px solid var(--border);vertical-align:top;white-space:normal}
/* RULED BOTH WAYS. A cell is a sector against a region and the eye needs to
   see the cell, not infer it — the printed sheet draws every box and reads
   better for it. */
.vamos table.map .mapcell{border-right:1px solid var(--border-lt)}
.vamos table.map .mapcell:last-child{border-right:0}
.vamos table.map tbody td{border-bottom:1px solid var(--border)}

/* The band. A header cell here is not the app's usual quiet uppercase label —
   it is the printed sheet's solid grey with white type, which is what makes the
   page recognisable beside the PDF it came from. */
.vamos table.map thead th{
  position:static;background:var(--band);color:var(--band-text);
  font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:none;
  text-align:center;padding:11px 12px;cursor:default;border-bottom:0;
}
.vamos table.map thead th:hover{color:var(--band-text)}
.vamos table.map .mapcorner{text-align:left;font-weight:400;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.85;width:190px}
.vamos .map .maph .n{display:block;font-size:.68rem;font-weight:400;opacity:.8;margin-top:1px}
.vamos table.map .maprh{
  position:sticky;left:0;z-index:2;
  background:var(--band);color:var(--band-text);text-align:left;vertical-align:middle;
  font-size:.8rem;font-weight:700;line-height:1.25;padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.22);white-space:normal;
}
.vamos table.map .maprh .n{
  float:right;font-weight:400;font-size:.72rem;opacity:.8;
  font-variant-numeric:tabular-nums;margin-left:8px;
}
/* A sector we hold nothing in still gets its row, quieter. It is saying
   something — and a grid that drops its empty rows cannot say it. */
.vamos table.map tr.empty .maprh{opacity:.62;font-weight:600}
.vamos table.map tbody tr:last-child .maprh{border-bottom:0}

.vamos table.map .mapcell{background:var(--bg2);padding:9px 10px;text-align:center}
.vamos .map tbody tr{cursor:default}
.vamos .map tbody tr:hover{background:transparent}

/* A name is a control, and reads as text until it is hovered: a grid of forty
   buttons styled as buttons is a wall, not a page. */
.vamos .mapname{
  display:block;width:100%;border:0;background:transparent;padding:2px 2px;
  font-family:inherit;font-size:.8rem;line-height:1.35;color:var(--text);
  text-align:center;cursor:pointer;border-radius:4px;
}
.vamos .mapname:hover{background:var(--hover-bg);color:var(--text-bright)}
.vamos .mapname:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
/* The two things the Focus List marks, carried here rather than repeated in
   words: at its soft stop, and reporting inside five days. */
.vamos .mapname.stop{color:var(--accent);font-weight:700}
.vamos .mapname.soon{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.vamos .note .lg-stop{color:var(--accent);font-weight:700}
.vamos .note .lg-soon{font-weight:400;text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}

@media screen and (max-width:760px){
  /* Four regions and a label do not fit a phone, so the table keeps its width
     and scrolls inside its own container (§11) rather than crushing the names
     into columns of one letter. */
  .vamos .map{min-width:680px}
}

/* The style box. Four steps of one ink, not a colour scale: the cell says how
   much of the book sits in it, and a hue would say something it does not mean.
   Print and export carry the shading, so it is stated as a background rather
   than left to a chart library. */
.vamos .stylebox td.sb{font-weight:600;color:var(--text)}
.vamos .stylebox td.s0{color:var(--border)}
.vamos .stylebox td.s1{background:rgba(208,4,60,.05)}
.vamos .stylebox td.s2{background:rgba(208,4,60,.11)}
.vamos .stylebox td.s3{background:rgba(208,4,60,.19)}
.vamos .stylebox td.s4{background:rgba(208,4,60,.28);color:var(--text-bright)}
.vamos .stylebox td.pick{cursor:pointer}
.vamos .stylebox td.pick:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.vamos .stylebox td.pick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---- drawer ------------------------------------------------------------- */

/* The drawer lives OUTSIDE the element the app renders into, because drawing a
   view replaces that element's contents and would take the drawer with it. It
   still needs the app's tokens, so it sits in its own .vamos container — which
   must not paint a ground of its own, since it is a portal rather than a
   panel. */
.vamos.va-portal{background:transparent}

.vamos .drawer-scrim{
  position:fixed;inset:0;background:rgba(26,21,18,.34);
  opacity:0;pointer-events:none;transition:opacity .18s;z-index:60;
}
.vamos .drawer-scrim.on{opacity:1;pointer-events:auto}
.vamos .drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);
  background:var(--bg2);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .2s;z-index:61;
  overflow-y:auto;padding:22px 24px 40px;
}
.vamos .drawer.on{transform:none}
.vamos .dhead{display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border);padding-bottom:14px}
.vamos .dhead h2{margin:0;font-size:1.18rem;font-weight:700;color:var(--text-bright);font-family:var(--font-display)}
.vamos .dhead .tk{font-size:.78rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
.vamos .dclose{
  margin-left:auto;border:1px solid var(--border);background:var(--bg2);color:var(--text-dim);
  width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;line-height:1;
}
.vamos .dclose:hover{border-color:var(--accent-line);color:var(--text)}
.vamos .dsec{margin-top:18px}
.vamos .dsec h4{
  margin:0 0 7px;font-size:.67rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);
}
/* The thesis is the reason the position exists, so it is set as prose rather
   than squeezed into the table's type. */
.vamos .thesis{font-size:.93rem;line-height:1.62;color:var(--text);white-space:pre-wrap}
.vamos .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px}
.vamos .dcell{background:var(--bg);border:1px solid var(--border-lt);border-radius:var(--radius-sm);padding:9px 11px}
.vamos .dcell .k{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.vamos .dcell .v{font-size:.95rem;font-weight:600;color:var(--text-bright);font-variant-numeric:tabular-nums;margin-top:2px}

.vamos .va-empty{padding:40px 0;text-align:center;color:var(--text-dim);font-size:.9rem}

/* ---- the factsheet ------------------------------------------------------ */

.vamos .fsbtn{
  border:1px solid var(--border);background:var(--bg2);color:var(--text-dim);
  width:26px;height:24px;border-radius:var(--radius-sm);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.vamos .fsbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vamos .fsbtn:hover{border-color:var(--accent);color:var(--accent)}
.vamos .fscolh{width:38px}

.vamos.va-fs{
  position:fixed;inset:0;z-index:70;overflow-y:auto;
  background:var(--bg);padding:0 0 40px;
  display:none;
}
.vamos.va-fs.on{display:block}
.vamos .va-fs-bar{
  position:sticky;top:0;z-index:2;display:flex;gap:8px;justify-content:flex-end;
  padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border);
}
.vamos .va-fs-go{
  border:0;background:var(--accent);color:#fff;cursor:pointer;
  padding:8px 18px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:.82rem;font-weight:700;letter-spacing:.04em;
}
.vamos .va-fs-x{
  border:1px solid var(--border);background:var(--bg2);color:var(--text-dim);
  width:34px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;
}

/* A4 landscape less the page margins, at 96dpi: 297mm - 24mm = 273mm ≈ 1032px,
   210mm - 24mm = 186mm ≈ 703px. Fixing the box on screen means what is read is
   the shape that prints, rather than a surprise at the printer. */
.vamos .fspage{
  width:1032px;max-width:100%;min-height:703px;margin:18px auto;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);
  padding:22px 26px;display:flex;flex-direction:column;
  font-size:11.5px;line-height:1.45;color:var(--text);
}
.vamos .fshead{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--accent);padding-bottom:8px}
.vamos .fshead h2{margin:0;font-size:20px;font-weight:700;font-family:var(--font-display);color:var(--text-bright)}
.vamos .fssub{font-size:11px;color:var(--text-dim);margin-top:2px}
.vamos .fsmark{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
/* The raised letter in a mark. Default <sup> is set from the browser's own
   ratios and sits too high and too large in a lockup at this size. */
.vamos .fsmark sup{font-size:.68em;line-height:0;vertical-align:.42em;letter-spacing:0}
.vamos .fslede{margin:10px 0 0;color:var(--text);font-size:11px;line-height:1.5}

.vamos .fsgrid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:18px;margin-top:12px;flex:1}
.vamos .fspage h3{
  margin:12px 0 5px;font-size:9px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border-lt);padding-bottom:3px;
}
.vamos .fspage h3:first-child{margin-top:0}
.vamos .fsr{display:flex;justify-content:space-between;gap:10px;padding:1.5px 0}
.vamos .fsk{color:var(--text-dim)}
.vamos .fsv{font-variant-numeric:tabular-nums;color:var(--text-bright);text-align:right}

.vamos .fscl{font-size:9px;color:var(--text-dim);margin:6px 0 2px;letter-spacing:.04em}
.vamos .fschart{width:100%;height:auto;display:block}
.vamos .fsline{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.vamos .fsline.grey{stroke:#8a8279}
.vamos .fsg{stroke:var(--border-lt);stroke-width:1;vector-effect:non-scaling-stroke}
.vamos .fsbase{stroke:#b9b2a8;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.vamos .fsgl{font-size:7px;fill:var(--text-dim);text-anchor:end}
.vamos .fsaxis{display:flex;justify-content:space-between;font-size:8.5px;color:var(--text-dim);margin-top:2px}
.vamos .fsfx{margin:5px 0 0;font-size:8.5px;line-height:1.4;color:var(--text-dim)}
.vamos .fsnochart{padding:20px;text-align:center;color:var(--text-dim);font-size:10px;border:1px dashed var(--border);border-radius:var(--radius-sm)}

.vamos .fscomment{margin-top:12px;border-top:1px solid var(--border-lt);padding-top:6px}
/* ONE COLUMN, DELIBERATELY. Two columns read better here and are half the
   height — and they cost three printed pages instead of one. A multi-column
   block in PAGED media is fragmented by the printer rather than laid out inside
   the sheet: measured 16.09.2026, `columns:2` on this paragraph alone took the
   factsheet from one page to three while the screen showed it fitting. app.js
   fits the text by stepping the size down instead. */
.vamos .fscomment p{margin:0;font-size:11.5px;line-height:1.5;white-space:pre-wrap}
.vamos .fscomment p.fsclip{
  margin-top:5px;font-size:8.5px;font-style:italic;color:var(--text-dim);
}

/* ---- the strategy overview ----------------------------------------------
   Ten pages on the factsheet's geometry, deliberately: that box is measured,
   printed and verified, and a second page size in the same document would need
   a second @page — which cannot be scoped and would silently override the
   first for both. One sheet, one page, one page setup.
   ---------------------------------------------------------------------- */

.vamos .docpage{
  font-size:11px;line-height:1.45;justify-content:flex-start;
}
.vamos .dochead{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--border);
  padding-bottom:7px;margin-bottom:14px}
.vamos .dochead h2{margin:0;font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-.01em}
.vamos .dochead .docsub{font-size:10.5px;color:var(--text-dim)}
.vamos .dochead .docmark{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.vamos .dochead .docmark sup{font-size:.68em;line-height:0;vertical-align:.42em;letter-spacing:0}

.vamos .docfoot{
  margin-top:auto;padding-top:7px;border-top:1px solid var(--border-lt);
  display:flex;justify-content:space-between;gap:12px;
  font-size:8px;letter-spacing:.04em;color:var(--text-dim);
}
.vamos .docnote{font-size:11px;color:var(--text-dim);margin:18px 0 0}
.vamos .docwarn{
  margin:8px 0 0;font-size:9px;line-height:1.45;color:var(--accent);
}

/* ---- the cover ----------------------------------------------------------
   THE COVER ITSELF IS IN core/shared/cover.css, because a second document
   wanted it and a front page copied twice is two front pages. What belongs
   here is only how this app's SHEET holds one: the padding, and the fact that
   the cover is given the whole page to fill. */
.vamos .doccover{padding:26px 30px}
.vamos .doccover .doc-cover{flex:1}

/* ---- tables on paper ----------------------------------------------------
   Not the interface's tables: no hover, no sticky columns, no scrolling. A
   printed table is read, not driven. */
.vamos .doc-wrap{width:100%}
.vamos .doctable{width:100%;border-collapse:separate;border-spacing:0;font-size:10px}
.vamos .doctable th{
  position:static;background:var(--band);color:var(--band-text);
  text-transform:none;letter-spacing:.03em;font-size:9.5px;font-weight:700;
  padding:6px 8px;text-align:left;cursor:default;border-bottom:0;
}
.vamos .doctable th.num,.vamos .doctable td.num{text-align:right;font-variant-numeric:tabular-nums}
.vamos .doctable th.mid,.vamos .doctable td.mid{text-align:center}
.vamos .doctable td{padding:5px 8px;border-bottom:1px solid var(--border-lt);white-space:nowrap}
.vamos .doctable tbody tr:last-child td{border-bottom:0}
.vamos .doctable .tk{font-weight:700;color:var(--text-bright)}
.vamos .doctable .cur{color:var(--text-dim);font-size:.9em}
.vamos .doctable .ev-in{color:var(--pos);font-weight:700}
.vamos .doctable .ev-out{color:var(--accent);font-weight:700}
.vamos .doctable .sbox{margin:0 auto}
.vamos .doclist .doctable td{padding:6px 8px}

/* The map, on paper. Same grid, no controls. */
.vamos .docmap .map{font-size:9px}
.vamos .docmap .map thead th{padding:6px 8px;font-size:9.5px}
.vamos .docmap .map .maprh{padding:6px 8px;font-size:9.5px}
.vamos .docmap .map .mapcell{padding:4px 6px}
.vamos .docmap .mapname{font-size:9px;line-height:1.3;padding:1px}
.vamos .docmap .note{font-size:8.5px;margin-top:8px}
.vamos .docmap .mapcorner{width:150px}

/* ---- performance --------------------------------------------------------- */
.vamos .perfgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.vamos .perfcell h3,.vamos .perfone h3{
  margin:0 0 4px;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.vamos .fschart.perf{width:100%;height:auto;overflow:visible}
.vamos .fsline.bench{stroke:#6f6a63;stroke-width:1.1}
.vamos .fsgl.tick{text-anchor:middle}
.vamos .fslegend{display:flex;align-items:center;gap:6px;font-size:8.5px;color:var(--text-dim);margin:3px 0 5px;flex-wrap:wrap}
.vamos .fslegend .k{display:inline-block;width:14px;height:2px;background:var(--accent);margin-left:8px}
.vamos .fslegend .k:first-child{margin-left:0}
.vamos .fslegend .k.b{background:#6f6a63}
.vamos .summary{font-size:8.5px}
.vamos .summary th{padding:3px 7px;font-size:8px}
.vamos .summary td{padding:2px 7px}
.vamos .perfcell{min-width:0}
.vamos .perfcell h3{margin-bottom:2px}
.vamos .perfone .summary{margin-top:0}
/* The figures to the left at the chart's own height. The chart was stretched
   across the page only to fill what the table left empty below it. */
.vamos .perfsplit{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:start;margin-top:10px}
.vamos .perfaside{padding-top:2px}
.vamos .perfaside .summary th{white-space:normal}
.vamos .summary.against{margin-top:9px}
.vamos .summary.against td:first-child{white-space:normal}
.vamos .perfaside .summary td{white-space:nowrap}
.vamos .perfmain{min-width:0}

/* ---- the appendix -------------------------------------------------------
   The style box drawn at a size somebody can study, with the bands that
   define it written out beside it. */
.vamos .sblegend{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start;margin-bottom:14px}
.vamos .sbfig{text-align:center}
.vamos .sbrow{display:flex;align-items:center;justify-content:center;gap:10px}
.vamos .sbox.big rect.sb{fill:var(--bg3);stroke:var(--border);stroke-width:1}
.vamos .sbox.big rect.sb.on{fill:var(--accent);stroke:var(--accent)}
.vamos .sbstyle{display:flex;justify-content:center;gap:20px;margin:0 0 5px 0;
  font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.vamos .sbstyle span{width:34px}
.vamos .sbsize{display:flex;flex-direction:column;justify-content:space-between;height:124px;
  font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);text-align:left}
.vamos .sbsize span{line-height:38px}
.vamos .sbcap{margin:7px 0 0;font-size:8px;color:var(--text-dim);line-height:1.45}
.vamos .sbtext h4,.vamos .disclaimer h4{
  margin:0 0 3px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.vamos .sbtext h4 + p{margin-top:0}
.vamos .sbtext p{margin:0 0 7px;font-size:9px;line-height:1.5;max-width:640px}
.vamos .sbtext .sbnote{color:var(--text-dim);font-style:italic}

/* THE DISCLAIMER SITS AT THE FOOT, as it does on the printed sheet: it is the
   smallest type on the page and the last thing read, and pushing it down is
   what says so. */
.vamos .docend .disclaimer{margin-top:auto;padding-top:10px;border-top:1px solid var(--border-lt)}
/* ONE auto margin on this page, not two. The footer carries margin-top:auto on
   every other page; here the disclaimer takes it, and two of them would split
   the free space between them and leave the disclaimer floating mid-page. */
.vamos .docend .docfoot{margin-top:0}

/* ---- the last page ------------------------------------------------------- */
.vamos .disclaimer{font-size:7.5px;line-height:1.5;color:var(--text-dim);max-width:none}
.vamos .disclaimer p{margin:0 0 4px}

/* ONE @page IN THIS DOCUMENT, AND ONLY ONE. @page is document-level and cannot
   be scoped: the Top Gear factsheet grew a second one for its batch print and
   it silently overrode the first for both. If a second print mode is ever added
   here it shares this rule. */
@page{size:A4 landscape;margin:12mm}

@media print{
  /* The sheet is the document. Everything else — the site chrome, the table,
     the drawer, the bar with the Print button in it — is not. */
  body > *:not(.va-fs){display:none !important}
  .vamos.va-fs{position:static;display:block !important;background:#fff;padding:0;overflow:visible}
  .vamos .va-fs-bar{display:none}
  .vamos .fspage{
    width:auto;min-height:0;margin:0;border:0;box-shadow:none;padding:0;
  }
  /* Blink drops fills and backgrounds when printing unless told not to. */
  .vamos .fspage,.vamos .fspage *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  /* Break BEFORE, never after: a break-after on the last sheet leaves a
     trailing blank page. The same rule NPB 3D's print document follows. */
  .vamos .fspage + .fspage{break-before:page}
  /* A page of the overview must not be broken across two sheets of paper by
     the printer's own pagination: each one is built to fit, and anything that
     does not is a bug to see rather than a page to split. */
  .vamos .docpage{break-inside:avoid;min-height:186mm}
  /* NOTHING STICKS ON PAPER. Sticky is a scrolling behaviour; in a paginated
     flow Blink puts the element where it pleases, which is how the map's
     column headings printed at the foot of the page. */
  .vamos .docpage table.map .maprh,
  .vamos .docpage thead th,
  .vamos .docpage .stick1,
  .vamos .docpage .stick2{position:static !important}
}

@media screen and (max-width:760px){
  .vamos .toolbar{margin-left:0;width:100%}
  .vamos .toolbar input[type=text]{width:100%;max-width:none}
  .vamos .bar{grid-template-columns:88px 1fr 74px}
  .vamos .drawer{width:100%}
}