/* Finish: one empty state, and (later) the shared scale for type, corners and
   shadows. Loaded last, after every other sheet. */

/* What shows when a list has nothing yet: what will appear, when, and where to go meanwhile */
.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 32px 20px; color: var(--muted); }
.empty-state svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.empty-state strong { color: var(--fg); font-size: 15px; font-weight: 600; }
.empty-state p { margin: 0; max-width: 46ch; font-size: 14px; }
.empty-state .btn-quiet { margin-top: 6px; font-size: 14px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line-strong);
  border-radius: 6px; color: var(--fg); background: var(--surface); text-decoration: none; }
.empty-state .btn-quiet:hover { border-color: var(--accent); color: var(--accent); }

/* ---- The scale. Every sheet uses these sizes: 11 12 13 14 15 16 20 24 32 px; weights 400 500 600;
   corners 4px (marks, chips), 6px (buttons, fields), 10px (cards) and round; two shadows. ---- */
:root {
  --radius: 10px; --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 27, 70, .06), 0 1px 3px rgba(16, 27, 70, .04);
  --shadow-pop: 0 10px 28px rgba(16, 27, 70, .14);
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45); }
body { font-feature-settings: "cv11", "ss01"; }
td.num, th.num, .num, .value, .px, .fact .value { font-variant-numeric: tabular-nums; }
h1, h2, h3, .brand { font-weight: 600; }

/* ---- Header: one row everywhere, words without icons, search you can reach with "/" ---- */
.top-inner { max-width: 1344px; height: 56px; padding: 0 32px; gap: 20px; flex-wrap: nowrap; }
.brand { font-size: 16px; gap: 9px; }
.brand svg { width: 24px; height: 24px; }
.top nav { gap: 2px; font-size: 14px; flex-wrap: nowrap; }
.top nav > a, .nav-more-btn { padding: 0 10px; height: 56px; display: flex; align-items: center; border-radius: 0;
  color: var(--hero-muted); font-weight: 500; background: none; box-shadow: inset 0 -2px 0 transparent; }
.top nav > a:hover, .nav-more-btn:hover, .nav-more:focus-within .nav-more-btn { background: none; color: #fff; }
.top nav > a.on { background: none; color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.nav-more-list { border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; }
.nav-more-list a { padding: 8px 12px; border-radius: var(--radius-sm); height: auto; }
.top .search { margin-left: auto; height: 36px; border-radius: var(--radius-sm); padding: 0 8px 0 10px; }
.top .search input { width: 220px; font-size: 14px; }
.search-key { font: 500 11px/1 var(--sans); color: #8b96c2; border: 1px solid #2c3a74; border-radius: 4px; padding: 3px 6px; }
.search-ico { display: none; color: #fff; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-sm); }
.theme-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.acct a { padding: 0 12px; height: 36px; display: flex; align-items: center; border-radius: var(--radius-sm); }
@media (max-width: 1100px) { .top .search input { width: 150px; } .search-key { display: none; } }
@media (max-width: 900px) {
  .top-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 16px; gap: 4px 6px; }
  .brand { margin-right: auto; }
  .top .search { display: none; }
  .search-ico { display: grid; order: 1; }
  .theme-btn { order: 2; }
  .burger { order: 3; }
  .top nav { order: 4; }
  .top nav > a, .nav-more-btn { height: 44px; box-shadow: none; }
  .top nav > a.on { box-shadow: inset 3px 0 0 #fff; }
  .nav-more-list a { padding: 0 10px; min-height: 44px; display: flex; align-items: center; }
}

/* ---- Inner pages: the title sits on the page, not on a navy band (the home page keeps its hero) ---- */
main > .back, main > .page-head, main > .scr-head, main > .co-head {
  background: none; box-shadow: none; clip-path: none; color: var(--fg); padding-top: 28px; padding-bottom: 20px; }
main > .back { padding-bottom: 0; color: var(--muted); }
main > .page-head + *, main > .scr-head + *, main > .co-head + * { margin-top: 0; }
main > .page-head h1, main > .scr-head h1, main > .co-head h1 { color: var(--fg); font-size: 32px; font-weight: 600; }
main > .page-head .lede, main > .scr-head .muted, main > .co-head .co-meta, main > .co-head .muted { color: var(--muted); }
main > .page-head a, main > .co-head .co-meta a { color: var(--accent); }
main > .co-head h1 .tk { color: var(--fg); }
main > .co-head h1 .nm { color: var(--muted); }
main > .co-head .pos { color: var(--green); } main > .co-head .neg { color: var(--red); }
main > .co-head button, main > .co-head .button { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); }
main > .co-head button.on { background: var(--fg); color: var(--bg); }
main > .scr-head .scr-find input { background: var(--surface); border-color: var(--line-strong); color: var(--fg); }
main > .scr-head .scr-find input::placeholder { color: var(--faint); }

/* the company header's parts were drawn for the navy band: give them the page's colours */
.co-lede { color: var(--fg); }
.co-lede a { color: var(--muted); }
.co-chips > div { background: var(--surface); border: 1px solid var(--line); }
.co-chips dt { color: var(--faint); }
.co-chips dd { color: var(--fg); }
.co-range-bar i { background: var(--fg); }
.co-range-ends { color: var(--muted); }
.co-logo { box-shadow: var(--shadow); }

/* ---- Buttons in the company header: one height, one corner; one main action ---- */
.co-actions { gap: 8px; }
.co-actions .watch-btn, .co-actions .co-peers, .co-actions .share-pop > summary, .co-actions .co-embed,
main > .co-head .co-actions .share-pop > summary, main > .co-head .co-actions .co-embed {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  font: 500 14px var(--sans); background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: none; }
.co-actions .co-peers { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.co-actions .watch-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.co-actions .share-pop { margin-top: 0; }
.co-actions .watch-btn:hover, .co-actions .share-pop > summary:hover, .co-actions .co-embed:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---- Feed: the ticker column fits the mark and five letters ---- */
.feed-item { grid-template-columns: 92px 62px minmax(0, 1fr); }
@media (max-width: 640px) { .feed-item { grid-template-columns: 80px minmax(0, 1fr); } }

/* ---- Cards: one border, one corner, one shadow; colour lives in the label, not in stripes ---- */
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.ev-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ev-card[class*="k-"] { border-top: 1px solid var(--line); }
.ev-card .ev-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ev-card .ev-foot { padding-top: 10px; border-top: 1px solid var(--line); }

/* ---- Company marks: a letter in its sector's colour where other sites show a logo ---- */
.tm-logo { --c: #4a5694; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--c); color: #fff; font: 600 11px/1 var(--sans); letter-spacing: 0; vertical-align: middle; }
.feed-item .tk { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Footer: who we are, when the data was checked, and the links in columns ---- */
footer { text-align: left; padding: 40px 32px 32px; margin-top: 48px; background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-about { display: grid; gap: 8px; align-content: start; max-width: 40ch; }
.foot-about p { margin: 0; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--display); color: var(--fg); letter-spacing: -0.02em; }
.foot-brand:hover { text-decoration: none; }
.foot-updated { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.foot-src { font-size: 13px; }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col h2 { margin: 0 0 4px; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--fg); text-decoration: none; }
.foot-bottom { max-width: 1280px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; gap: 12px 32px; justify-content: space-between; align-items: flex-start; font-size: 12px; color: var(--faint); }
footer .foot-bottom p.disclaimer { margin: 0; max-width: 90ch; }
.foot-bottom > span { white-space: nowrap; }
@media (max-width: 900px) {
  footer { padding: 32px 16px 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot-about { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; }
}

/* The footer lines up with the page above it, and sits at the bottom of a short page */
main.wide ~ footer .foot-grid, main.wide ~ footer .foot-bottom { max-width: 1376px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }