/* Hydra's shared visual language: neutral surfaces, orange navigation,
   green strength, amber caution and gray unavailable evidence. */
:root {
  --surface: #EDEEF0; --card: #F6F7F8; --border: #D9DBDE; --border-2: #C7CACD;
  --text: #141518; --text-2: #2A2C30; --text-3: #585C61;
  --accent: #FF5A1F; --accent-ink: #B43C0C; --accent-bg: #F5E4DD;
  --good: #0E763A; --warn: #855D00; --crit: #B63129;
  --good-bg: #DEEAE2; --warn-bg: #EAE3CB; --crit-bg: #F1DBD8;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --surface: #141518; --card: #1B1D21; --border: #2A2C30; --border-2: #3A3D42;
  --text: #EDEEF0; --text-2: #C7CACD; --text-3: #94989E;
  --accent: #FF5A1F; --accent-ink: #FF6E3A; --accent-bg: #312016;
  --good: #3FBF77; --warn: #E0A63F; --crit: #F26D6D;
  --good-bg: #17261D; --warn-bg: #2B2314; --crit-bg: #2E1A18;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
::selection { background: var(--accent); color: #EDEEF0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  background: var(--surface); color: var(--text); padding: 24px;
  max-width: 1180px; margin: 0 auto;
  font: 13px/1.55 "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.mast { border-bottom: 1px solid var(--text); padding-bottom: 14px; }
.plate { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.plate .sep { color: var(--accent); }
.themebtn { font: inherit; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); background: none; border: 1px solid var(--border-2); padding: 2px 8px; cursor: pointer; margin-left: 10px; min-width: 8ch; text-align: center; }
.themebtn:hover { color: var(--accent-ink); border-color: var(--accent); }
h1 { font-size: 23px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; margin-top: 8px; }
h1 .hsub { color: var(--text-3); font-size: 11px; letter-spacing: .18em; font-weight: 500; }
.sub { color: var(--text-3); font-size: 11px; margin-top: 5px; letter-spacing: .04em; }
.navrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.navrow > a, .navrow > .here { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); border: 1px solid var(--border-2); padding: 4px 10px; background: var(--card); text-decoration: none; }
.navrow > a:hover { border-color: var(--accent); color: var(--accent-ink); }
.navrow > .here { color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.hero { padding: 22px 0 16px; }
.eyebrow { color: var(--accent-ink); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 650; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 10px; }
.hero-bottom p, .intro { font: 12px/1.65 system-ui, sans-serif; color: var(--text-3); max-width: 86ch; }
.jump { white-space: nowrap; font-size: 10.5px; border-bottom: 1px solid var(--accent-ink); padding: 8px 0; display: flex; gap: 16px; }
.source-line { font-size: 10px; color: var(--text-3); padding-top: 12px; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--card); border: 1px solid var(--border); padding: 10px 12px; position: relative; min-width: 0; }
.stat::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 2px solid var(--border-2); border-left: 2px solid var(--border-2); }
.stat > span { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.stat strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.stat small { font-size: 10px; color: var(--text-3); display: block; }
.stat.good strong { color: var(--good); }
.stat.good::before { border-color: var(--good); }
.stat.warn strong { color: var(--warn); }
.takeaway { margin: 14px 0 24px; border-left: 2px solid var(--accent); padding: 6px 14px; }
.takeaway p { font: 13px/1.65 system-ui, sans-serif; margin: 8px 0; }
.takeaway small { font-size: 10.5px; color: var(--text-3); }
section:not(.hero, .stats, .takeaway) { margin-top: 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px; }
.section-head .eyebrow { color: var(--text-3); font-size: 9px; margin-bottom: 3px; }
h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); }
h2::before { content: "SEC_" attr(data-sec) " / "; color: var(--accent-ink); }
h3 { font-size: 14px; font-weight: 650; margin: 8px 0; }
h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; color: var(--text-2); }
p { margin: 6px 0 12px; }
.pill { font-size: 10px; border: 1px solid var(--border-2); padding: 4px 8px; color: var(--text-3); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 10px; color: var(--text-3); margin: 12px 0; }
.map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--text-3); }
.map-legend .green { background: var(--good); }
.map-scroll { overflow: auto; border: 1px solid var(--border); background: var(--card); scrollbar-color: var(--border-2) var(--surface); }
.graph-canvas { width: 1100px; height: 1010px; position: relative; margin: auto; }
.connectors { position: absolute; inset: 0; width: 1100px; height: 960px; fill: none; }
.connectors > path { stroke: var(--text-3); stroke-width: 1.2; opacity: .7; }
.connectors marker path { fill: var(--text-3); }
.graph-node { position: absolute; width: 240px; height: 87px; background: var(--card); border: 1px solid var(--border-2); text-align: left; padding: 10px 12px; }
.graph-node:hover { border-color: var(--accent); }
.graph-node span { display: block; font-size: 11px; font-weight: 650; }
.graph-node small { display: block; font-size: 9px; color: var(--text-3); margin: 3px 0; }
.graph-node em { font-size: 10px; color: var(--text-2); font-style: normal; }
.graph-node.has-value { border-color: var(--good); background: var(--good-bg); }
.graph-node.has-value span { color: var(--good); }
.graph-caption { position: absolute; bottom: 18px; left: 40px; font-size: 9px; color: var(--text-3); letter-spacing: .1em; }
.graph-tier { display: contents; }
.graph-node .graph-feeds { display: none; }
/* The drawn map is a fixed 1100px canvas; below the page's 1180px width a reader
   would only ever see its left edge. Stack it into its tiers instead, top tier
   first, and print each role's "feeds" line in place of the connector lines. */
@media (max-width: 1179px) {
  .map-scroll { overflow: visible; }
  .graph-canvas { width: auto; height: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
  .connectors { display: none; }
  .graph-tier { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .graph-tier + .graph-tier::before { content: "↑"; grid-column: 1 / -1; text-align: center; color: var(--text-3); line-height: 1.2; }
  .graph-node { position: static; width: auto; height: auto; min-width: 0; }
  .graph-node .graph-feeds { display: block; margin: 6px 0 0; }
  .graph-caption { position: static; margin-top: 10px; line-height: 1.6; }
}
.outline { border: 1px solid var(--border-2); background: var(--card); padding: 6px 10px; font-size: 10.5px; }
.outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 14px 0 10px; }
.filters label { font-size: 10px; color: var(--text-3); }
input, select { display: block; background: var(--card); border: 1px solid var(--border-2); padding: 6px 8px; margin-top: 4px; max-width: 100%; font-size: 11px; height: 34px; }
input::placeholder { color: var(--text-3); }
.search { flex: 1; min-width: 240px; }
.search input { width: 100%; }
.filters .outline { height: 34px; }
.muted, .small { color: var(--text-3); font-size: 11px; }
.table-wrap { overflow: auto; border: 1px solid var(--border); max-height: 610px; scrollbar-color: var(--border-2) var(--surface); background: var(--card); }
table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 11px; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; z-index: 1; background: var(--card); color: var(--text-3); font-size: 10px; font-weight: 600; white-space: nowrap; padding: 9px 10px; border-bottom: 1px solid var(--border-2); }
td { border-bottom: 1px solid var(--border); padding: 9px 10px; vertical-align: middle; white-space: nowrap; }
td small { display: block; font-size: 9px; color: var(--text-3); }
tr:hover { background: var(--surface); }
tr.selected { box-shadow: inset 3px 0 var(--accent); background: var(--surface); }
.company { border: 0; padding: 0; background: transparent; text-align: left; display: block; white-space: normal; min-width: 150px; max-width: 205px; }
.company strong { font-size: 12px; color: var(--accent-ink); }
.company span { font: 10px/1.4 system-ui, sans-serif; display: block; color: var(--text-3); margin-top: 3px; }
.tag { display: inline-block; padding: 3px 6px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3); font-size: 9px; }
.tag.opportunity { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.tag.risk, .tag.review, .tag.quality { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.tag.premium { background: var(--card); color: var(--text-2); }
.tag.incomplete { color: var(--text-3); background: var(--surface); }
.detail { background: var(--card); border: 1px solid var(--border); padding: 18px; margin-top: 14px; scroll-margin-top: 20px; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail h3 span { font-size: 11px; color: var(--text-3); font-weight: 400; }
.detail > p { font: 13px/1.65 system-ui, sans-serif; }
.detail-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 22px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.detail-grid p, .detail-grid li { font: 12px/1.6 system-ui, sans-serif; }
.detail-grid small { color: var(--text-3); font: 11px/1.6 system-ui, sans-serif; display: block; }
ul { padding-left: 16px; }
.detail li { margin-bottom: 6px; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.method-grid article { padding: 16px; border: 1px solid var(--border); background: var(--card); min-width: 0; }
.method-grid p { font: 12px/1.65 system-ui, sans-serif; color: var(--text-3); }
.method-number { font-size: 10px; color: var(--accent-ink); border: 1px solid var(--border-2); padding: 3px 7px; display: inline-block; }
summary { font-size: 10.5px; color: var(--accent-ink); cursor: pointer; margin: 12px 0; }
details p { font-size: 11px !important; }
.missing { display: flex; flex-wrap: wrap; gap: 5px; font-size: 10px; }
.missing span { padding: 3px 5px; background: var(--surface); border: 1px solid var(--border); }
.references { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; margin-top: 12px; }
.portfolio { padding-top: 12px; }
.portfolio .table-wrap { max-height: none; }
.allocation { display: flex; width: 100%; min-height: 64px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-2); margin: 16px 0; }
.allocation > div { border-right: 2px solid var(--card); display: flex; justify-content: center; align-items: center; background: var(--good-bg); color: var(--good); font-size: 10px; text-align: center; overflow: hidden; }
.allocation b { display: block; font-size: 20px; font-weight: 650; }
.allocation .quality { background: var(--accent-bg); color: var(--accent-ink); }
.allocation .cash { background: var(--surface); color: var(--text-3); }
.portfolio-rules { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--text-3); margin: 14px 0; }
.portfolio-rules span { border: 1px solid var(--border-2); padding: 4px 7px; }
.holding-link { border: 0; background: none; color: var(--accent-ink); padding: 0; font-weight: 650; }
.portfolio td:last-child { white-space: normal; min-width: 240px; font: 12px/1.6 system-ui, sans-serif; }
.portfolio-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 16px; font: 11px/1.65 system-ui, sans-serif; color: var(--text-3); }
.portfolio-footer strong { color: var(--text-2); }
footer { margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 9px; letter-spacing: .08em; color: var(--text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#hydra-api-status { font-size: 10.5px; color: var(--text-3); border: 1px solid var(--border); background: var(--card); padding: 7px 10px; margin-bottom: 12px; }
#hydra-api-status[data-level=error] { color: var(--crit); background: var(--crit-bg); border-color: var(--crit); }
#hydra-api-status[data-level=delayed] { color: var(--warn); background: var(--warn-bg); }
#hydra-api-status button { font: inherit; margin-left: 8px; color: inherit; background: transparent; border: 1px solid currentColor; padding: 2px 6px; }
@media (max-width: 700px) {
  body { padding: 14px; }
  h1 .hsub { display: block; margin-top: 4px; }
  .hero-bottom { flex-direction: column; align-items: start; gap: 8px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .detail-grid, .method-grid, .portfolio-footer { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  .detail { padding: 14px; }
  .allocation b { font-size: 15px; }
  .allocation span { font-size: 8px; }
  .portfolio-footer { gap: 6px; }
  .portfolio table, .portfolio tbody { display: block; }
  .portfolio thead { display: none; }
  .portfolio tr { display: grid; grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; border-bottom: 1px solid var(--border-2); }
  .portfolio td { padding: 0; border: 0; white-space: normal; min-width: 0; }
  .portfolio td:first-child, .portfolio td:last-child { grid-column: 1 / -1; min-width: 0; }
  .portfolio td[data-label]::before { content: attr(data-label); display: block; font: 9px/1.6 ui-monospace, monospace; color: var(--text-3); margin-bottom: 3px; }
  .portfolio td small { margin: 3px 0; }
  .graph-canvas { margin: 0; }
  /* The supplier table is ~1000px of ten columns; on a phone only Company and
     Supplies were on screen. Each company becomes a card that prints all ten. */
  .supplier-table table, .supplier-table tbody { display: block; }
  /* Hidden visually only: display:none would drop the scoped column headers from the accessibility tree. */
  .supplier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .supplier-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 14px; gap: 10px 8px; border-bottom: 1px solid var(--border-2); }
  .supplier-table td { padding: 0; border: 0; white-space: normal; min-width: 0; }
  .supplier-table td:first-child { grid-column: 1 / -1; }
  .supplier-table td:nth-child(2), .supplier-table td:nth-child(3) { grid-column: span 2; }
  .supplier-table td[data-label]::before { content: attr(data-label); display: block; font: 9px/1.6 ui-monospace, monospace; color: var(--text-3); margin-bottom: 2px; }
  .supplier-table .company { max-width: none; min-width: 0; }
  /* As a wrapping flex row the selects shrank to ~146px, which cut "Combined
     research rank", most role names and the search placeholder mid-word. A
     grid gives each control a full row on a phone and two per row near 700px. */
  .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: end; }
  .filters label { min-width: 0; }
  .filters .search { grid-column: 1 / -1; }
  .filters select { width: 100%; }
  .filters .outline { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
@media print {
  .navrow, .filters, .themebtn, #hydra-api-status { display: none; }
  .table-wrap { max-height: none; overflow: visible; }
  .map-scroll { overflow: visible; }
  .graph-canvas { transform: scale(.65); transform-origin: top left; height: 665px; }
  section { break-inside: avoid; }
}

.portfolio-exposure { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 10px; margin: 16px 0; }
.portfolio-exposure span { padding: 4px 7px; background: var(--surface); border: 1px solid var(--border-2); }
.portfolio-exposure small { width: 100%; color: var(--text-3); line-height: 1.6; }
.portfolio-exposure .exposure-empty { font-style: normal; color: var(--text-2); }
.portfolio-method { border-block: 1px solid var(--border); margin-top: 14px; }
.portfolio-method p { font: 12px/1.65 system-ui, sans-serif; color: var(--text-3); }

.portfolio-subhead { margin: 20px 0 10px; font-size: 12px; color: var(--text-2); }
.risk-readout { padding: 12px; border-left: 2px solid var(--accent); background: var(--card); font: 12px/1.65 system-ui, sans-serif; margin-top: 12px; }
.tag.exit { color: var(--crit); border-color: var(--crit); background: var(--crit-bg); }
#decision-history li { margin: 12px 0; font: 12px/1.65 system-ui, sans-serif; overflow-wrap: anywhere; }