/* Extra styles for the pages the Worker renders from live data (/ipo/<company>/, /gmp/, /ipo/). Everything else comes from style.css. */
.crumbs { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs span[aria-hidden] { margin: 0 4px; }
.prose h2 { margin-top: 40px; }
.prose .note { font-size: 14px; color: var(--ink-3); }
/* A two-column list of facts (label, value): the label column hugs its text and the table does not need to scroll on a phone. */
table.kv { min-width: 0; }
table.kv th { width: 46%; background: transparent; font-size: 15px; letter-spacing: 0; font-weight: 500; color: var(--ink-3); }
table.kv th, table.kv td { border-bottom: 1px solid var(--line); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }
.chart { width: 100%; max-width: 480px; height: auto; margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.chart text { fill: var(--ink-3); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart text.val { fill: var(--ink); font-weight: 600; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.links { list-style: none; padding: 0; margin: 0 0 14px; }
.links li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.links span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.doc .faq h2 { text-align: left; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
/* Phones: the data tables have 2 to 6 short columns, so let them wrap inside the screen instead of scrolling sideways. */
@media (max-width: 559px) {
  .prose table { min-width: 0; font-size: 14px; }
  .prose th, .prose td { padding: 9px 10px; }
}
/* The IPO lists have 6 columns, which scroll sideways on a phone: the name column stays put while they do. */
table.list td:first-child, table.list th:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
table.list th:first-child { background: var(--wash); }
table.list td:first-child { font-weight: 600; }
.prose table.list { min-width: 620px; }
table.list td:not(:first-child), table.list th:not(:first-child) { white-space: nowrap; }
table.list td:first-child, table.list th:first-child { min-width: 150px; }

/* The metrics grid under the heading: the same cells as the app's detail screen. */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0 0; }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.metric span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.metric b { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.metric b.pos { color: var(--brand); }
.metric b.neg { color: #B3261E; }
/* Subscription breakdown: the sub-categories sit under QIB and NII, lighter and indented, as in the app. */
table.subs th[scope="row"] { font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--ink); background: transparent; }
table.subs tr.indent th[scope="row"] { font-weight: 400; color: var(--ink-3); padding-left: 28px; }
table.subs tr.indent td { color: var(--ink-3); }
table.subs td:not(:first-child), table.subs th:not(:first-child) { white-space: nowrap; }