/* Card layout: every block of the page is its own raised card, and the gaps between cards show the ink background.
   Loaded after base.css / app.css / account.css, so these rules win. */
:root{
  --card:var(--bg);
  --card-line:var(--line);
  --card-r:16px;
  --gap:20px;
  --shadow:0 1px 2px rgb(12 26 46 / .06), 0 10px 28px -8px rgb(12 26 46 / .14);
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  :root{--card:color-mix(in srgb,var(--bg) 93%,transparent)}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow:0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -8px rgb(0 0 0 / .55)}}
:root[data-theme="dark"]{--shadow:0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -8px rgb(0 0 0 / .55)}

/* Page: transparent so the ink shows through the gaps; solid soft grey if WebGL is unavailable. */
html{background:var(--surface)}
body:not(.has-ink){background:var(--surface)}
main.wrap{background:transparent;padding-block:var(--gap) 8px}
.mast{background:transparent;border-bottom:0}

/* Masthead card (same width as the content cards) */
.mast .wrap{
  max-width:none;width:min(1408px,calc(100% - 32px));margin:var(--gap) auto 0;padding:20px 24px;
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--shadow);
}
.brand h1{font-size:clamp(24px,3.2vw,34px)}
.acct-slot{order:2;margin-left:auto}
.status{order:3;flex:1 1 100%;justify-content:flex-start;padding-top:12px;border-top:1px solid var(--line)}
.sess{background:var(--bg)}

/* Region filter: a floating pill bar */
.tabs{width:fit-content;max-width:100%;margin:0 0 var(--gap);padding:6px;gap:4px;background:var(--card);border:1px solid var(--card-line);border-radius:999px;box-shadow:var(--shadow)}
.tab{border-color:transparent;background:transparent;transition:background .15s,color .15s}
.tab:hover{background:var(--accent-soft)}
.tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.banner{margin:0 0 var(--gap)}

/* Sections become cards */
main > section{
  padding:22px 24px 24px;margin:0 0 var(--gap);border:1px solid var(--card-line);border-bottom:1px solid var(--card-line);
  border-radius:var(--card-r);background:var(--card);box-shadow:var(--shadow);
}
.sechead{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
h2{font-size:16px}
h2::before{width:5px;height:18px;border-radius:3px}

/* Tiles inside cards: separate rounded tiles instead of a ruled grid */
.idx-grid,.acct-kpis{gap:10px;background:none;border:0;border-radius:0;overflow:visible}
.idx,.acct-kpis div{border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:transform .15s,box-shadow .15s}
.idx{padding:12px 14px}
.idx:not(.empty):hover,.acct-kpis div:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgb(12 26 46 / .35)}
.idx.empty{grid-column:1/-1}
.summary{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Panels, movers, stories, investors, events: inner cards */
.panel,.mv,.inv,.ev,.consensus,.tbl-wrap,.equity{border-radius:12px}
.panel{overflow:hidden}
.panel-h{background:var(--surface)}
.stats div,.ticket{background:var(--surface)}
.stats{background:var(--line)}
.mv{background:var(--bg)}
.mv h3{padding:10px 14px}
.inv,.ev{background:var(--bg);transition:box-shadow .15s,border-color .15s}
.inv:hover,.ev:hover{border-color:var(--accent);box-shadow:0 6px 18px -10px rgb(12 26 46 / .4)}
.story{background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:12px;padding:14px 16px 16px;transition:box-shadow .15s}
.story:hover{box-shadow:0 6px 18px -10px rgb(12 26 46 / .4)}
.story.bullish{border-top-color:var(--up)} .story.bearish{border-top-color:var(--down)}

/* Footer card */
footer{margin:0 0 var(--gap);padding:18px 24px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--shadow)}
footer p:last-child{margin-bottom:0}
footer .ink-credit{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-weight:500}

/* A single "1fr" column grows to its widest table; let it shrink so tables scroll inside their own card. */
@media (max-width:980px){.acct-grid{grid-template-columns:minmax(0,1fr)}}

/* Phones */
@media (max-width:640px){
  :root{--gap:14px;--card-r:14px}
  .mast .wrap{padding:16px}
  main > section{padding:16px 16px 18px}
  footer{padding:16px}
  .tabs{border-radius:16px}
}
@media (prefers-reduced-motion:reduce){.idx,.acct-kpis div,.inv,.ev,.story,.tab{transition:none}.idx:hover,.acct-kpis div:hover{transform:none}}
@media print{#ink-canvas{display:none}main > section,.mast .wrap,footer,.tabs{box-shadow:none}}