/* July 25 visual refinement: public ticker terminal only. */
:root {
  --bg: #070b0e;
  --panel: #0b1218;
  --line: #705315;
  --line2: rgba(128, 139, 142, .18);
  --gold: #e2aa25;
  --gold2: #ffd15b;
  --ink: #f3f2ed;
  --muted: #aeb4b4;
}

body {
  background:
    radial-gradient(900px 520px at 44% 8%, rgba(19, 35, 45, .76), transparent 60%),
    radial-gradient(650px 500px at 88% 22%, rgba(27, 24, 15, .38), transparent 68%),
    #070b0e;
}

.app { grid-template-rows: 68px 1fr 38px; }

.top {
  padding-inline: 20px;
  background: linear-gradient(180deg, #091014, #070a0c);
  box-shadow: 0 1px 0 rgba(255, 204, 80, .08), 0 12px 35px rgba(0, 0, 0, .24);
}

.brand b { font-size: 31px; text-shadow: 0 1px 16px rgba(235, 174, 41, .15); }
.brand strong { color: #f0bf4f; }
.nav a { color: #e9ebe7; padding-inline: 19px; font-weight: 700; }
.nav a.active { background: linear-gradient(180deg, rgba(58, 45, 15, .7), rgba(28, 23, 12, .85)); border-color: rgba(227, 171, 39, .65); box-shadow: inset 0 0 0 1px rgba(255, 215, 102, .07); }
.tape div { border-left-color: rgba(156, 164, 160, .23); }
.tape b { color: #f3f1e8; font-size: 15px; }
.ticker-input { background: rgba(15, 21, 24, .9); border-color: #455052; border-radius: 8px; min-width: 76px; }
.gold-btn { background: linear-gradient(180deg, #372a0d, #201708); border-color: #a97912; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 220, 122, .13); }
.avatar { background: rgba(10, 15, 17, .9); }

main { padding: 12px; gap: 12px; grid-template-rows: 150px minmax(280px, 1fr) 154px; }
.card, .tv-chart {
  background:
    linear-gradient(135deg, rgba(13, 22, 28, .985), rgba(7, 12, 15, .995) 72%);
  border-color: rgba(178, 131, 22, .70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.20);
}
.overview { padding: 16px 18px; }
.overview-line { grid-template-columns: minmax(280px, 1fr) 240px 306px; }
.company h1 { font-size: 37px; letter-spacing: -.02em; }
.company p { font-size: 12px; color: #f0efe8; }
.company small { font-size: 9px; color: #aeb6b5; }
.quote { text-align: left; }
.quote b { font-size: 31px; letter-spacing: -.02em; }
.quote span { font-size: 15px; font-weight: 700; }
.state { border-left-color: rgba(148, 164, 160, .25); }
.state b { letter-spacing: .035em; }
.metrics { margin-top: 15px; padding-top: 9px; border-top-color: rgba(161, 171, 165, .18); }
.metric { border-right-color: rgba(161, 171, 165, .16); }
.metric span { color: #aeb5b2; font-size: 8px; }
.metric b { color: #f0f0ea; font-size: 12px; }

.headlines { background: linear-gradient(160deg, rgba(12, 20, 26, .99), rgba(7, 11, 14, .99)); }
.section-head { height: 45px; color: #ffd35e; border-bottom-color: rgba(197, 153, 42, .45); }
.section-head a { color: #ffd35e; text-decoration: underline; text-underline-offset: 3px; }
.headline { padding: 11px 14px; border-bottom-color: rgba(159, 171, 168, .14); }
.headline small { color: #9ba4a2; }
.headline a { color: #f1f1ed; font-size: 11px; line-height: 1.35; }

.tv-chart { border-color: rgba(178, 131, 22, .70); background: linear-gradient(135deg, #0b1419, #090e11 70%); }
.tv-chart__head { background: linear-gradient(180deg, rgba(14, 24, 30, .72), rgba(9, 14, 17, .8)); }
.tv-chart__title { color: #f0f2ee; }
.tv-chart__stage { background-color: #0b1317; }
.tv-chart__returns { background: rgba(7, 13, 16, .92); }
.tv-chart__return { border-right-color: rgba(151, 165, 159, .18); }
.tv-chart__return:hover { background: rgba(187, 141, 26, .08); }
.tv-chart__foot { background: rgba(8, 14, 17, .88); }

.financial {
  border-color: rgba(174, 132, 25, .74);
  background: linear-gradient(160deg, rgba(14, 23, 29, .98), rgba(7, 12, 15, .99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
}
.financial header { color: #ffd052; font-size: 9px; }
.financial header button {
  color: #f0c65a;
  border: 1px solid rgba(222, 169, 40, .58);
  border-radius: 999px;
  background: rgba(83, 61, 13, .28);
  padding: 3px 8px;
  font-weight: 700;
  letter-spacing: .035em;
}
.financial dl div { font-size: 10px; margin-block: 5px; }
.financial dt { color: #d4d7d1; }
.financial dd { color: #f3f2ed; font-weight: 600; }
.financial:hover { border-color: rgba(225, 171, 37, .92); }
/* Expand grows a single card to 150% of its resting height, in place.  The
   bigger type is deliberate: the control is a readability view, not a modal. */
.financials:has(.financial.expanded) { min-height: 231px; }
.financial.expanded {
  min-height: 231px;
  padding: 15px;
  z-index: 1;
}
.financial.expanded header { font-size: 11px; }
.financial.expanded header button { font-size: 9px; padding: 4px 9px; }
.financial.expanded dl { margin-top: 11px; }
.financial.expanded dl div,
.financial.expanded dt,
.financial.expanded dd { font-size: 12px; margin-block: 8px; }
.financial.expanded .financial-note { font-size: 8px; margin-top: 12px; }
main:has(.financial.expanded) { grid-template-rows: 150px minmax(205px, 1fr) 231px; }

.foot { background: #070c0e; border-top-color: rgba(189, 144, 30, .52); color: #b5b7ae; }
.foot b { color: #f0c251; }

@media (max-width: 900px) {
  .app { grid-template-rows: auto 1fr 38px; }
  main { padding: 8px; }
  .overview { padding: 14px; }
  main:has(.financial.expanded) { grid-template-rows: none; }
}