.chart-expand{display:flex;align-items:center;gap:8px;min-height:44px;margin:10px 0;padding:9px 16px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);color:var(--accent);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.chart-expand:hover{background:var(--sunk);border-color:var(--accent)}
.chart-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-sizing:border-box;border:0;background:var(--surface);color:var(--ink);overflow:hidden;font-family:inherit}
.chart-viewer[open]{display:flex;flex-direction:column;gap:12px;font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif}
.chart-viewer::backdrop{background:var(--surface)}
.chart-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
.chart-viewer header strong{font-size:17px;line-height:1.4;max-width:70ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chart-viewer button{min-width:48px;min-height:48px;padding:8px 16px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;flex-shrink:0}
.chart-viewer button:disabled{opacity:.4;cursor:default}
.chart-viewer button:focus-visible,.chart-viewer-stage:focus-visible,.chart-expand:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chart-viewer-stage{position:relative;flex:1;min-height:0;overflow:hidden;direction:ltr;touch-action:none;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--radius-island);background:var(--sunk);cursor:grab}
.chart-viewer-stage:active{cursor:grabbing}
.chart-viewer .chart-viewer-content{position:absolute!important;left:0;top:0;margin:0!important;max-width:none!important;user-select:none;box-sizing:border-box;transition:none!important}
html[dir=rtl] .chart-viewer-content{direction:rtl}
.chart-viewer footer{display:flex;align-items:center;justify-content:center;gap:8px;flex:none}
.chart-viewer output{min-width:58px;text-align:center;font-variant-numeric:tabular-nums;direction:ltr}
.chart-viewer>p{margin:0;text-align:center;font-size:12px;line-height:1.5;color:var(--t2);flex:none}
@media(max-width:600px){
 /* ══ HOME'S ORDER ON A PHONE. ONE LIST, AND THIS IS IT. ══════════════════
  *
  * The numbers are the markup's own sequence, written out because the
  * catch-all below sends anything unnamed to the bottom of the phone.
  *
  * TWO RULES, BOTH LEARNED THE HARD WAY.
  *
  * 1. `display:contents` changes LAYOUT, not the DOM. `.journal-home>.om-idx`
  *    was written here on 19 September on the belief that the index cards had
  *    become Home's own children; they had not — `.market-head` is still
  *    their parent for every selector, so that rule matched nothing, the
  *    cards fell to the catch-all, and a phone reader met the band, the
  *    indices and the breadth bar BEFORE the headline they are evidence for.
  *    The selectors below go through `.market-head` because that is where the
  *    elements actually are.
  *
  * 2. This list is the only place Home's phone order is decided, and every
  *    rule in it carries `#app` so it cannot be beaten by specificity from
  *    another file. `ai.css` held `#app .journal-home > .ai-cards {order:5}`
  *    until 20 September 2026 — an id selector quietly overruling this list,
  *    so that when the running-session band pushed the lab to 6 the lab
  *    stayed at 5 and sat level with the evidence shelf. Whoever reads this
  *    file has read the order. Nothing else may set it.
  *
  * Anything this list does not name lands at 9 and silently falls to the
  * bottom of the phone, which is why a NEW block has to be named here. */
 #app .journal-home>*{order:9}
 /* Which day these numbers are from, before the numbers. More so on a phone,
  * where the band and the headline are the whole of the first screen. */
 #app .journal-home>.session-live{order:0}
 /* Today's brief (25 September 2026): the headline, the strip of figures,
  * the reader's companies and the cards, as one block. Its own inside is
  * ordered in today.css — lead, list, cards, next — because those are its
  * children, not Home's. The investors shelf that sat last is one of its
  * cards now. */
 #app .journal-home>.tb-layout{order:1}
 /* The breadth bar is inside the brief since 25 September 2026, beside who
  * bought and who sold (today.css orders it), so it is not named here. */
 #app .journal-home>.ct-shelf{order:3}
 /* Returned to Home 19–20 September 2026 at the owner's ask. Named because
  * the catch-all would have put them at 9 with everything else, and their
  * order relative to each other would then be the markup's by accident. */
 #app .journal-home>.ai-cards{order:4}
 .chart-viewer{gap:8px!important;padding-inline:10px}
 .chart-viewer header strong{font-size:14px}
 .chart-viewer-stage{border-radius:var(--radius-control)}
 .insider-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .insider-kpi-grid>div{padding:14px!important;min-width:0;border-radius:var(--radius-control)!important}
 .insider-hero-card{padding:20px!important;border-radius:var(--radius-island)!important}
 .insider-flow-grid{grid-template-columns:minmax(0,1fr)!important}
 .insider-flow-card{padding:16px!important;min-width:0}
 .insider-view-switcher{overflow-x:auto;max-width:100%;box-sizing:border-box}
 .insider-view-switcher button,.insider-view-switcher [role=button]{min-height:44px;white-space:normal;box-sizing:border-box}
 .insider-tracker-panel input{font-size:17px!important;min-height:44px;box-sizing:border-box;max-width:100%}
}