/* ============================================================================
   AIon — layout
   ============================================================================
   Everything is scoped under .aion. 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 and VaMoS's (viewbar, view-tabs, toolbar,
   chips, tbl-wrap, drawer) so the three apps read as one family.

   EXACTLY ONE @page in this file. @page is document-level and cannot be
   scoped; a second one anywhere on the page silently overrides both.
   ========================================================================= */

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

/* ---- phase colours, used everywhere a phase is named --------------------- */

.aion .ph-u{--ph:var(--ph-u)}
.aion .ph-a{--ph:var(--ph-a)}
.aion .ph-d{--ph:var(--ph-d)}
.aion .ph-t{--ph:var(--ph-t)}
.aion .code{
  display:inline-block;min-width:3.6em;padding:1px 7px;border-radius:6px;
  font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:#fff;background:var(--ph,var(--text-dim));
  /* EVERY PILL IS THE SAME WIDTH, so the code has to be centred in it or a
     short D01 hugs one edge while A09± fills the box. Declared here rather
     than inherited, which is how it went wrong: the pill sat in a cell
     typed as numeric and took that cell's right alignment. */
  text-align:center;
}
.aion .ext{margin-left:4px;color:var(--text-dim);font-weight:700}
.aion .mf{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:20px;
  background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.04em;
}
.aion .gear{
  display:inline-block;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:700;
  border:1.5px solid var(--ph,var(--accent));color:var(--ph,var(--accent));
}
.aion .tag{
  display:inline-block;margin-left:6px;padding:0 6px;border-radius:20px;
  border:1px solid var(--border);color:var(--text-dim);font-size:.64rem;font-weight:700;letter-spacing:.03em;
}

/* ---- the bar above the views --------------------------------------------- */

.aion .viewbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 0 10px;border-bottom:1px solid var(--border);
}
.aion .view-tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--radius);padding:3px}
.aion .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);
}
.aion .view-tabs button:hover{color:var(--text)}
.aion .view-tabs button.active{background:var(--bg2);color:var(--text-bright);box-shadow:var(--shadow)}

.aion .toolbar{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.aion .toolbar input[type=text]{
  width:220px;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);
}
.aion .toolbar input[type=text]:focus{outline:2px solid var(--accent-line);outline-offset:1px}

.aion .seg{display:inline-flex;gap:2px;background:var(--bg3);border-radius:var(--radius-sm);padding:2px}
.aion .seg button{
  border:0;background:transparent;cursor:pointer;padding:5px 10px;border-radius:5px;
  font-family:inherit;font-size:.74rem;font-weight:700;color:var(--text-dim);white-space:nowrap;
}
.aion .seg button:hover{color:var(--text)}
.aion .seg button.on{background:var(--bg2);color:var(--text-bright);box-shadow:var(--shadow)}

.aion .filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0 0}
.aion .fsel{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-dim)}
.aion .fsel span{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.62rem}
.aion .fsel select{
  font-family:inherit;font-size:.78rem;color:var(--text);
  padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);max-width:190px;
}
.aion .chips{display:flex;flex-wrap:wrap;gap:6px}
.aion .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;
}
.aion .chip:hover{border-color:var(--accent-line);color:var(--text)}
.aion .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.aion .chip[class*="ph-"].on{background:var(--ph);border-color:var(--ph)}
.aion .chip .n{opacity:.62;margin-left:5px;font-variant-numeric:tabular-nums}
.aion .chip.drop .x{margin-left:7px;opacity:.75}
.aion .count{flex:1 1 100%;font-size:.78rem;color:var(--text-dim)}

.aion .statebox{
  margin:14px 0 0;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--bg3);color:var(--text);font-size:.86rem;
}
.aion .statebox[hidden]{display:none}

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

.aion .view{display:block;padding:14px 0 28px}
.aion .empty{padding:18px 4px;color:var(--text-dim);font-size:.86rem}
.aion .panel{
  margin:0 0 14px;padding:16px 18px;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.aion .panel p{margin:0 0 10px;font-size:.9rem;line-height:1.5}
.aion .panel p:last-child{margin-bottom:0}
.aion .kicker{margin:0 0 8px;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.aion .note{font-size:.8rem;color:var(--text-dim);line-height:1.5}
.aion ul.note{margin:6px 0 0;padding-left:18px}
.aion .dim{color:var(--text-dim)}
.aion .pos{color:var(--pos);font-weight:600}
.aion .neg{color:var(--neg);font-weight:600}

/* ---- screener ------------------------------------------------------------- */

.aion .tblbar{display:flex;justify-content:flex-end;gap:8px;margin:0 0 10px}
.aion .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. */
.aion .tbl-wrap{
  overflow:auto;
  max-height:calc(100vh - var(--chrome-h, 0px) - 200px);
  min-height:300px;
}
.aion table{border-collapse:separate;border-spacing:0;width:100%;font-size:.84rem}
.aion th,.aion td{padding:8px 11px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border-lt)}
.aion thead th{
  position:sticky;top:0;z-index:2;background:var(--bg4);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  cursor:pointer;user-select:none;
}
.aion thead th:hover{color:var(--text)}
.aion thead th .dir{opacity:.55;margin-left:4px}
.aion tbody tr{cursor:pointer}
.aion tbody tr:hover{background:var(--hover-bg)}
.aion tbody tr:last-child td{border-bottom:0}
.aion .num{text-align:right;font-variant-numeric:tabular-nums}
/* A PILL COLUMN IS NOT A NUMERIC COLUMN. Right alignment lines up the END of
   the cell, and a phase cell ends with whatever marks apply — the extension
   arrow, the open-bar dot, the magnitude-failure badge. Aligning on the end
   therefore moves the pill whenever the marks change, which is what made the
   column read ragged. Aligning on the start pins every pill to one edge and
   lets the marks trail. */
.aion .phase{text-align:left}
.aion .nm{font-weight:600;color:var(--text-bright)}
.aion td .tk{display:block;font-size:.7rem;color:var(--text-dim);letter-spacing:.03em}
/* The instrument column stays put while the table scrolls sideways. 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. */
.aion .tbl-wrap .stick1{position:sticky;left:0;z-index:1;background:var(--bg2);max-width:240px;overflow:hidden;text-overflow:ellipsis}
.aion .tbl-wrap thead th.stick1{z-index:3;background:var(--bg4)}
.aion tbody tr:hover td.stick1{background:#faf6f5}

.aion .colpick{position:relative}
.aion .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;
}
.aion .colpick summary::-webkit-details-marker{display:none}
.aion .colpick[open] summary,.aion .colpick summary:hover{border-color:var(--accent-line);color:var(--text)}
.aion .colpick summary .n{opacity:.62;margin-left:6px}
.aion .colpick-body{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:270px;max-height:360px;overflow-y:auto;
  padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.aion .colpick-body label{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.8rem;color:var(--text);cursor:pointer}
.aion .colpick-body input{accent-color:var(--accent)}
.aion .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:.72rem;color:var(--text-dim)}
.aion .colpick-foot button,.aion .docbtn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg2);color:var(--text-dim);cursor:pointer;
  font-family:inherit;font-size:.74rem;font-weight:700;letter-spacing:.03em;
}
.aion .colpick-foot button:hover,.aion .docbtn:hover{border-color:var(--accent-line);color:var(--text)}
/* A button that is a state, not an action: it stays lit while what it turns
   on is on screen. */
.aion .docbtn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

/* ---- census --------------------------------------------------------------- */

.aion .cbar{display:flex;height:26px;border-radius:6px;overflow:hidden;background:var(--bg3);margin:10px 0 6px}
.aion .cbar.sm{height:18px;margin:0}
.aion .cbar span{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--ph);color:#fff;font-size:.68rem;font-weight:700;white-space:nowrap;
}
.aion .dom-head{font-size:1.05rem;color:var(--text-bright)}
.aion .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 14px}
.aion .kpi{padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.aion .kpi .k{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.aion .kpi .v{margin:4px 0 8px;font-size:.92rem}
.aion .cgroup{margin:0 0 14px}
.aion .cgroup h3{margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.aion .ctable{width:100%;font-size:.82rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.aion .ctable th{position:static;cursor:default}
.aion .ctable td:nth-child(3){min-width:180px}

/* ---- plate ---------------------------------------------------------------- */

.aion .platebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.aion .platebar .spacer{flex:1}
.aion .plate-wrap{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:8px 6px;overflow:hidden;
}
.aion svg.plate{display:block;width:100%;height:auto;font-family:var(--font-ui)}
.aion .pl-dim{fill:none;stroke:var(--plate-dim);stroke-width:2}
.aion .pl-curve{fill:none;stroke:var(--plate-line);stroke-width:2.2}
.aion .pl-zero{stroke:var(--plate-zero);stroke-width:1;stroke-dasharray:4 4}
.aion .pl-zerolabel{font-size:12px;fill:var(--text-dim)}
/* The radius that splits a half-disc into its two phases, and the node the
   source plate draws on the arc at every station. Both belong to Notley's
   figure only; the wave draws neither. */
.aion .pl-div{stroke:var(--plate-dim);stroke-width:1.4}
.aion .pl-node{fill:var(--plate-line)}
.aion .pl-tick{stroke:var(--plate-station);stroke-width:1}
.aion .pl-station{font-size:9px;fill:var(--plate-station);letter-spacing:.02em}
.aion .pl-phase{font-size:40px;font-weight:700;text-anchor:middle;fill:var(--ph);opacity:.32}
/* A neighbouring cycle's quarter: drawn, lettered, never populated. */
.aion .pl-phase.is-dim{fill:var(--plate-dim);opacity:1}
.aion .pl-phase-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;fill:var(--text-dim)}
.aion .pl-age{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--text-dim)}
.aion .pl-age-sub{font-size:9.5px;fill:var(--text-dim)}
.aion .pl-junct{fill:var(--bg2);stroke:var(--plate-zero);stroke-width:1.2}
.aion .pl-lead{stroke:var(--plate-line);stroke-width:.8;opacity:.7}
.aion .pl-lead2{stroke:var(--plate-line);stroke-width:.6;opacity:.6}
.aion .pl-dot{stroke:var(--bg2);stroke-width:1.6;cursor:pointer}
.aion .pl-dot:hover{stroke:var(--text-bright)}
.aion .pl-dot.pl-gear{stroke:var(--accent);stroke-width:2.6}
.aion .pl-dot.pl-mf{stroke-dasharray:2 1.5;stroke:var(--text-bright)}
.aion .pl-ext{font-size:9px;fill:#fff;pointer-events:none}
.aion .pl-label{font-size:10.5px;fill:var(--text);cursor:pointer}
.aion .pl-label:hover{fill:var(--accent)}
.aion .plate-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 2px 0;font-size:.8rem;color:var(--text)}
.aion .legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 2px 0;font-size:.76rem;color:var(--text-dim)}
.aion .lg{display:inline-flex;align-items:center;gap:6px}
.aion .lg i{display:inline-block;width:10px;height:10px;border-radius:50%}
.aion .lg i.ring{background:transparent;border:2px solid var(--accent)}
.aion .lg i.mfring{background:transparent;border:1.5px dashed var(--text-bright)}
.aion .plate-census{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 2px 0;font-size:.84rem}
.aion .plate-census .cbar{flex:1 1 320px}

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

.aion .drawer-scrim{position:fixed;inset:0;background:rgba(26,21,18,.28);z-index:60;display:none}
.aion .drawer-scrim.open{display:block}
.aion .drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(640px,96vw);z-index:61;
  background:var(--bg2);box-shadow:var(--shadow-lg);overflow-y:auto;
  transform:translateX(102%);transition:transform .22s ease;
  font-family:var(--font-ui);color:var(--text);
}
.aion .drawer.open{transform:none}
.aion .dh{position:relative;padding:20px 22px 12px;border-bottom:1px solid var(--border)}
.aion .dx{position:absolute;top:14px;right:14px;border:0;background:var(--bg3);border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:.9rem;color:var(--text)}
.aion .dname{font-size:1.25rem;font-weight:700;color:var(--text-bright);padding-right:40px}
.aion .dtk{font-size:.76rem;color:var(--text-dim);letter-spacing:.04em}
.aion .dmeta{margin-top:6px;font-size:.82rem;color:var(--text)}
.aion .dflags{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:.78rem}
.aion .rcard{padding:16px 22px;border-bottom:1px solid var(--border-lt)}
.aion .rcard .k{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.aion .rcard .big{margin:6px 0 8px;font-size:1.02rem}
.aion .rcard .big .code{font-size:.9rem;padding:2px 9px}
.aion .rcard .phn{font-weight:600;color:var(--text-bright)}
.aion .rcard dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0 0 10px;font-size:.8rem}
.aion .rcard dt{color:var(--text-dim)}
.aion .rcard dd{margin:0;font-variant-numeric:tabular-nums}
.aion .chart-wait{padding:26px 0;font-size:.8rem;color:var(--text-dim);text-align:center}
.aion svg.chart{display:block;width:100%;height:auto;font-family:var(--font-ui)}
.aion .chart .band{fill:var(--ph);opacity:.16}
.aion .chart .px{fill:none;stroke:var(--text-bright);stroke-width:1.3}
.aion .chart .cm{fill:none;stroke:var(--accent);stroke-width:1.5}
.aion .chart .rs{fill:none;stroke:var(--text-dim);stroke-width:1;stroke-dasharray:3 2}
.aion .chart .zero{stroke:var(--plate-zero);stroke-width:.8;stroke-dasharray:3 3}
.aion .chart .ytick{stroke:var(--border-lt);stroke-width:1}
.aion .chart .ylab{font-size:8.5px;fill:var(--text-dim)}
.aion .chart .lab{font-size:8.5px;fill:var(--text)}
.aion .chart .lab.dim{fill:var(--text-dim)}
.aion .hstrip{display:flex;height:14px;border-radius:4px;overflow:hidden;margin:10px 0 2px;background:var(--bg3)}
.aion .hstrip span{display:flex;align-items:center;justify-content:center;background:var(--ph);color:#fff;font-size:.6rem;font-weight:700;overflow:hidden}
.aion .hstrip span.ext{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 3px,transparent 3px 6px)}
.aion .hdates{display:flex;justify-content:space-between;font-size:.66rem;color:var(--text-dim)}

/* ---- the printable sheet -------------------------------------------------- */

.aion.ai-sheet{
  position:fixed;inset:0;z-index:70;display:none;overflow:auto;
  background:rgba(58,51,43,.55);padding:24px;
}
.aion.ai-sheet.open{display:block}
.aion .ai-sheet-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;margin:0 auto 10px;max-width:297mm}
.aion .ai-sheet-go,.aion .ai-sheet-x{
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;
}
.aion .ai-sheet-x{background:var(--bg2);color:var(--text);border-color:var(--border);padding:8px 12px}
.aion .sh-page{
  width:297mm;min-height:186mm;margin:0 auto;padding:12mm 14mm;background:#fff;color:#1a1512;
  box-shadow:var(--shadow-lg);font-family:var(--font-ui);
}
.aion .sh-head{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--accent);padding-bottom:6px;margin-bottom:8px}
.aion .sh-mark{font-size:1.1rem;font-weight:700;color:var(--accent);letter-spacing:.02em}
.aion .sh-title{font-size:1rem;font-weight:700;color:#1a1512}
.aion .sh-asof{margin-left:auto;font-size:.76rem;color:#8a8279}
.aion .sh-plate{width:72%;margin:0 auto}
.aion .sh-plate svg{display:block;width:100%;height:auto}
.aion .sh-census{display:flex;align-items:center;gap:14px;margin:4px 0 8px;font-size:.8rem}
.aion .sh-census .cbar{flex:1 1 300px}
.aion .sh-list{columns:3;column-gap:18px;font-size:.62rem;line-height:1.25}
.aion .sh-row{display:flex;gap:6px;align-items:center;padding:1px 0;break-inside:avoid}
.aion .sh-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aion .sh-code{min-width:3.2em;padding:0 5px;font-size:.62rem}
.aion .sh-own{width:2.6em;text-align:right;color:#8a8279;font-variant-numeric:tabular-nums}
.aion .sh-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:6px;border-top:1px solid #ddd8d2;font-size:.64rem;color:#8a8279}

@page{size:A4 landscape;margin:0}
@media print{
  body.ai-sheet-open > *:not(.ai-sheet){display:none !important}
  .aion.ai-sheet{position:static;display:block;background:none;padding:0;overflow:visible}
  .aion .ai-sheet-bar{display:none}
  .aion .sh-page{box-shadow:none;margin:0;width:297mm;min-height:186mm;padding:10mm 12mm}
  .aion .code,.aion .cbar span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- narrow ---------------------------------------------------------------- */

@media screen and (max-width:720px){
  .aion .toolbar{margin-left:0}
  .aion .toolbar input[type=text]{width:100%;max-width:none}
  .aion .fsel select{max-width:150px}
  .aion .rcard dl{grid-template-columns:1fr}
  .aion .drawer{width:100vw}
}