:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #667085;
  --line: #d9e0e8;
  --brand: #176b87;
  --brand-dark: #0f4c5c;
  --accent: #d45b39;
  --green: #18794e;
  --red: #c0342b;
  --amber: #9a6700;
  --shadow: 0 18px 50px rgba(31, 45, 61, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-width: 320px;
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 22px 28px;
  background: #ffffff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 30;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.brand-logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3,
.panel p {
  margin: 0;
}

.brand h1 {
  font-size: 19px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand p,
.panel p,
.muted,
.metric-tile small,
.feed small {
  color: var(--muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span,
.label {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  cursor: pointer;
}

.checkbox-field input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.checkbox-field span {
  color: #475467;
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--ink);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.14);
}

.primary-btn {
  border: 0;
  background: var(--brand);
  color: #fff;
  min-height: 44px;
  border-radius: 10px;
  padding: 0 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(23, 107, 135, 0.75);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.primary-btn:hover {
  background: var(--brand-dark);
  box-shadow: 0 12px 26px -12px rgba(15, 76, 92, 0.8);
}

.primary-btn:active {
  transform: translateY(1px);
}

.mode-panel .nav {
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.mode-panel .primary-btn {
  margin-top: 4px;
}

.nav {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.nav a,
.small-panel a {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 700;
}

.nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
}

.nav a:hover {
  background: #eef6f8;
}

.small-panel {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 6px;
  background: #fbfcfe;
}

.selector-group {
  display: grid;
  gap: 12px;
  position: relative;
}

.selector-group[hidden] {
  display: none;
}

.selector-group .field {
  gap: 6px;
}

.mode-panel {
  display: grid;
  gap: 22px;
}

.mode-panel[hidden] {
  display: none !important;
}

.mode-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pf-interval {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pf-interval-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  border-radius: 9px;
  cursor: pointer;
}

.pf-interval-btn:hover {
  color: var(--brand-dark);
  border-color: #c9d5de;
}

.pf-interval-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Strategy picker: a dropdown (#strategySelect uses the shared .doc-select
   styling) plus a description line for the chosen strategy. */
.strategy-description {
  margin-top: 6px;
  line-height: 1.4;
}

.portfolio-trades-panel {
  display: grid;
  gap: 10px;
}

.portfolio-trades {
  max-height: 360px;
  overflow-y: auto;
}

.portfolio-trades thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* All-scenario comparison table: clickable, sortable column headers. */
#portfolioScanTable {
  max-height: 420px;
  overflow-y: auto;
}

#portfolioScanTable thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

#portfolioScanTable th.scan-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#portfolioScanTable th.scan-sort:hover {
  color: var(--brand-dark);
}

#portfolioScanTable th.scan-sort.active {
  color: var(--brand-dark);
}

#portfolioScanTable td.scan-error {
  color: var(--muted);
  font-style: italic;
}

#portfolioScanTable tr.scan-row {
  cursor: pointer;
}

#portfolioScanTable tr.scan-row:hover td {
  background: #f2f7f9;
}

#portfolioScanTable tr.scan-row-selected td {
  background: #e8f1f5;
}

.scan-chart-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 16px 12px;
}

.portfolio-chart-panel {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px 20px 16px;
}

.portfolio-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.portfolio-chart-head span {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.portfolio-chart-head small {
  color: var(--muted);
  font-size: 12px;
}

.portfolio-chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-interval-tabs .pf-interval-btn {
  min-height: 28px;
  font-size: 11px;
  padding: 0 12px;
}

.portfolio-chart-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portfolio-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

.portfolio-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px) {
  .portfolio-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-csv-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pf-csv-upload:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.generation-workspace[hidden],
.portfolio-panel[hidden] {
  display: none !important;
}

.headline-impact-form {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.headline-impact-form input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.headline-impact-form select {
  appearance: none;
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  padding: 9px 30px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6570' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  color: var(--ink);
}

.headline-impact-form .primary-btn {
  min-width: 92px;
}

.impact-csv-btn {
  border: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.impact-csv-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.impact-csv-btn:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: wait;
  opacity: 0.75;
}

.impact-shock-meta {
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}

.impact-shock-meta .shock-line {
  font-size: 13px;
  color: var(--ink);
}

.impact-shock-meta .shock-line.muted {
  color: var(--muted);
  font-size: 12px;
}

.impact-audit {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  overflow: hidden;
}

.impact-audit summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  background: #f8fafc;
  list-style: none;
}

.impact-audit summary::-webkit-details-marker {
  display: none;
}

.impact-audit summary small {
  color: var(--muted);
  font-weight: 600;
}

.impact-audit-body {
  display: grid;
  gap: 0;
}

.impact-audit-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.impact-audit-tabs button {
  padding: 7px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.impact-audit-tabs button.active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

.impact-audit-panel[hidden] {
  display: none;
}

.impact-model-output-note {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.45;
}

.impact-analysis-summary {
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.55;
}

.impact-analysis-summary p {
  margin: 0 0 10px;
}

.impact-analysis-summary ol {
  margin: 0;
  padding-left: 22px;
}

.impact-analysis-summary li + li {
  margin-top: 7px;
}

.impact-model-output {
  max-height: 420px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  background: #111827;
  color: #dbeafe;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.impact-audit dl {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr;
  gap: 5px 10px;
  margin: 10px 0 0;
}

.impact-audit dt {
  font-weight: 700;
}

.impact-audit dd {
  margin: 0;
  color: var(--muted);
}

.impact-audit-section {
  padding: 12px;
  border-bottom: 1px solid #edf1f5;
}

.impact-audit-section:last-child {
  border-bottom: 0;
}

.impact-audit-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
}

.impact-audit-section > p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.impact-audit-considerations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.impact-audit-considerations ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.impact-universe-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.impact-table-controls {
  margin-bottom: 10px;
}

.impact-table-controls[hidden] {
  display: none;
}

.impact-table-controls input {
  width: 100%;
  max-width: 340px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
}

.impact-table-controls input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(24, 121, 78, 0.12);
}

/* The impact table has long industry labels; use a fixed layout so the numeric
   columns keep their place and the two text columns ellipsis-truncate (full text
   on hover via title) instead of blowing the table past the panel width. */
#impactTable table {
  width: 100%;
  min-width: 0;        /* override .dense-data-table's 1040px so fixed layout can shrink to fit */
  table-layout: fixed;
}
/* Data cells ellipsis-truncate the long text columns; headers instead WRAP so the
   uppercased labels show in full ("MOVE ON NEWS", "MKT β") rather than clipping to
   "MOVE ON…" / "MK…". */
#impactTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#impactTable th {
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
}
.impact-sort-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.impact-sort-button:hover,
.impact-sort-button:focus-visible {
  color: var(--brand);
}

.impact-sort-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

#impactTable th:nth-child(1) { width: 70%; }     /* Ticker and company */
#impactTable th:nth-child(2) { width: 30%; }     /* Headline impact */
#impactTable td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#impactTable th:nth-child(n + 2),
#impactTable td:nth-child(n + 2) {
  text-align: right;
}

.impact-security-cell strong,
.impact-security-cell span {
  display: inline;
}

.impact-security-cell span {
  margin-left: 9px;
}

/* The impact table is fixed-layout and never scrolls horizontally, so the first
   column doesn't need to freeze left. Leaving the body ticker cells sticky (at a
   higher z-index than the header) let them paint over the sticky header's top-left
   corner while scrolling — "TICKER" vanished behind AAPL/MSFT. Static keeps them
   flowing under the header; the header corner stays put. */
#impactTable td:first-child {
  position: static;
}

.impact-result-row {
  cursor: pointer;
}

.impact-result-row:hover td {
  background: #f2f8fb;
}

.impact-result-row:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.impact-result-row td:first-child strong {
  color: var(--brand);
}

.impact-drilldown {
  display: grid;
  gap: 18px;
}

.impact-drilldown-metrics {
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.impact-breakdown {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}

.impact-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.impact-section-head h3 {
  margin: 0 0 3px;
  font-size: 16px;
}

.doc-modal-body .impact-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.impact-section-head > strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.impact-factor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.impact-factor-card {
  min-width: 0;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.impact-factor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.impact-factor-head strong,
.impact-factor-head span {
  display: block;
}

.impact-factor-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.impact-factor-head b {
  flex: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.impact-component-track {
  position: relative;
  height: 8px;
  margin: 10px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), #aeb8c4 calc(50% - 0.5px), #aeb8c4 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    #edf1f5;
}

.impact-component-bar {
  position: absolute;
  top: 0;
  bottom: 0;
}

.impact-component-bar.positive {
  left: 50%;
  background: #16835b;
}

.impact-component-bar.negative {
  right: 50%;
  background: #c2413b;
}

.impact-component-bar.flat {
  left: calc(50% - 1px);
  width: 2px !important;
  background: #98a2b3;
}

.doc-modal-body .impact-factor-card p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.5;
}

.impact-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.impact-audit-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fbfcfe;
}

.impact-audit-grid h4 {
  margin: 0 0 7px;
  font-size: 13px;
}

.impact-audit-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Industry (sub-sector) tilts sit under the sector chips as a finer, lighter row. */
.shock-chips-industry {
  margin-top: 2px;
}

.shock-chips-industry .shock-chip {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}

.shock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shock-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef2f7;
  color: #344054;
}

.shock-chip.positive {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.shock-chip.negative {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.shock-chip.warn {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.generation-workspace .table-wrap {
  max-height: min(70vh, 780px);
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef6f9;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coming-soon-side {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}

.coming-soon-hero {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 460px;
  margin: 0 auto;
  padding: 8px 0;
}

.coming-soon-hero h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.coming-soon-hero p {
  margin: 0;
  max-width: 40ch;
  line-height: 1.55;
  color: var(--muted);
  font-size: 15px;
}

.coming-soon-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
}

.coming-soon-list li {
  position: relative;
  padding-left: 18px;
}

.coming-soon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.workspace[data-app-mode="portfolio"] .data-only,
.workspace[data-app-mode="generation"] .data-only {
  display: none !important;
}
.workspace[data-app-mode="data"] .portfolio-panel:not([hidden]),
.workspace[data-app-mode="generation"] .portfolio-panel {
  display: none !important;
}
.workspace[data-app-mode="data"] .generation-workspace,
.workspace[data-app-mode="portfolio"] .generation-workspace {
  display: none !important;
}
.workspace[data-app-mode="portfolio"] .portfolio-panel:not([hidden]) {
  display: grid;
}
.workspace[data-app-mode="generation"] .topbar {
  display: none;
}
.workspace[data-app-mode="generation"] .generation-workspace:not([hidden]) {
  order: 1;
  display: grid;
  /* Fill the workspace width and top-align, rather than shrink-wrapping the content
     and centering it (which made the results feel boxed into a narrow column). */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: calc(100vh - 100px);
  padding: 40px clamp(24px, 3vw, 48px);
}
.scenario-grid.data-only {
  grid-template-columns: 1fr;
}

.compact-field {
  margin-top: 2px;
  margin-bottom: 0;
}

.scenario-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

/* The selector-group zeroes .field gap; give compact fields breathing room
   between their label and the control. */
.compact-field > span {
  margin-bottom: 7px;
}

.compact-field select {
  min-height: 38px;
  padding: 8px 10px;
}

.combo {
  position: relative;
}

.combo input {
  padding-right: 46px;
}

.combo-toggle {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #eef4f7;
  color: var(--brand-dark);
  cursor: pointer;
}

.combo-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.combo-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.combo-toggle:hover {
  background: #e2edf2;
}

/* Account scenario-scope toggle: "My scenarios" vs "Browse library". */
.scope-toggle {
  display: inline-flex;
  justify-self: start; /* hug the buttons instead of stretching across the column */
  gap: 2px;
  padding: 2px;
  margin-bottom: 8px;
  background: #eef3f6;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.scope-toggle[hidden] {
  display: none;
}
.scope-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.scope-btn:hover {
  color: var(--brand-dark);
}
.scope-btn.active {
  background: var(--panel);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(31, 45, 61, 0.12);
}

.app-mode-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin: 4px 0 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.app-mode-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.app-mode-btn:hover {
  color: var(--brand-dark);
  border-color: #c9d5de;
}
.app-mode-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: none;
}
.app-mode-btn[hidden] {
  display: none !important;
}

/* Admin library mode: Showcase | Research | Library */
.panel-mode-toggle {
  display: flex;
  width: 100%;
}
.panel-mode-toggle .scope-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

/* Period tabs — used in holdings table to switch between 13F report quarters */
.period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.period-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.period-tab:hover {
  color: var(--brand-dark);
  border-color: var(--brand);
}
.period-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Owned / locked badges in the browseable library list. */
.scn-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
}
.scn-badge.owned {
  background: #e6f4ec;
  color: var(--green);
}
.scn-badge.locked {
  background: #f1f0ee;
  color: var(--muted);
}
.lock-tag {
  color: var(--amber);
  font-weight: 600;
}

.selected-card {
  display: grid;
  gap: 4px;
  border: 1px solid #dce6ee;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #f8fbfc;
  padding: 9px 11px;
  min-height: 48px;
}

.result-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Metered key with nothing left (see #impactAllowanceMeta) — same amber as the
   fallback shock chip, so "out of runs" reads as a state, not body copy. */
.result-meta.warn {
  color: #b45309;
}

.selected-card:empty {
  display: none;
}

.selected-card strong,
.result-item strong {
  display: block;
  color: #17202a;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.combo-menu .result-item strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.selected-card span,
.result-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.combo-menu {
  display: none;
  gap: 6px;
  max-height: min(60vh, 520px);
  overflow: auto;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #cfd9e3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(31, 45, 61, 0.12);
}

.combo-menu.open {
  display: grid;
}

.compact-results {
  max-height: 340px;
}

.result-item {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid #e4ebf2;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.result-item:hover,
.result-item.active {
  border-color: rgba(23, 107, 135, 0.45);
  background: #f0f8fa;
}

.small-empty {
  padding: 10px;
  font-size: 12px;
}

.workspace {
  min-width: 0;
  /* Fill the whole content column — no fixed max-width — so wide monitors don't
     leave dead space on the right. */
  width: 100%;
  padding: 34px clamp(24px, 3.2vw, 52px) 52px;
  display: grid;
  gap: 24px;
}

.workspace > * {
  order: 20;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  order: 1;
}

.eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 28px;
  line-height: 1.18;
}

.status-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e7f4ef;
  color: var(--green);
  border: 1px solid rgba(24, 121, 78, 0.2);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pill.neutral {
  background: #eef2f6;
  color: #344054;
  border-color: var(--line);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  order: 2;
}

.metric-tile,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.metric-tile {
  min-height: 116px;
  padding: 18px;
  display: grid;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.metric-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 107, 135, 0.35);
  box-shadow: 0 22px 56px rgba(31, 45, 61, 0.12);
}

.metric-tile span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.metric-tile strong {
  font-size: 28px;
  line-height: 1.05;
}

.positive {
  color: var(--green);
}

.negative {
  color: var(--red);
}

.portfolio-input {
  min-height: 64px;
  font-size: 13px;
}

/* ---- Portfolio builder (ticker rows + autocomplete) ---- */
.portfolio-rows {
  display: grid;
  gap: 8px;
}

.pf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 30px;
  gap: 8px;
  align-items: center;
}

.pf-ticker-field {
  position: relative;
  min-width: 0;
}

.pf-ticker {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 38px;
  padding: 8px 10px;
}

.pf-ticker::placeholder {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.pf-weight {
  min-height: 38px;
  padding: 8px 8px;
  text-align: center;
}

.pf-invalid .pf-ticker {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.14);
}

.pf-remove {
  border: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--muted);
  border-radius: 8px;
  height: 38px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.pf-remove:hover {
  color: var(--red);
  border-color: rgba(197, 48, 48, 0.4);
}

.pf-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid #cfd9e3;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(31, 45, 61, 0.16);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.pf-suggest[hidden] {
  display: none;
}

.pf-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
}

.pf-suggest-item:hover {
  background: #eef6f8;
}

.pf-suggest-item strong {
  font-size: 13px;
  font-weight: 800;
}

.pf-suggest-item span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-suggest-empty {
  padding: 9px;
  font-size: 12px;
  color: var(--muted);
}

.pf-add-btn {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--brand-dark);
  border-radius: 8px;
  min-height: 34px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.pf-add-btn:hover {
  background: #eef6f8;
  border-color: #cfd9e3;
}

.secondary-btn {
  background: #eef4f7;
  color: var(--brand-dark);
  min-height: 38px;
  box-shadow: none;
}

.secondary-btn:hover {
  background: #e2edf1;
  box-shadow: none;
}

.portfolio-panel {
  padding: 28px;
  display: grid;
  gap: 28px;
  margin-bottom: 28px;
  order: 5;
}

.portfolio-panel[hidden] {
  display: none;
}

.portfolio-panel .panel-head {
  margin-bottom: 0;
  display: grid;
  gap: 8px;
}

.portfolio-panel .panel-head h3 {
  margin: 0;
}

.portfolio-panel .panel-head p {
  margin: 0;
  line-height: 1.45;
}

.portfolio-panel .portfolio-summary-grid {
  margin: 0;
}

.portfolio-panel .table-wrap {
  margin-top: 4px;
}

/* Covers only the workspace column, never the sidebar — left starts at the
   sidebar's width (see .shell grid-template-columns) so the sidebar stays fully
   visible and interactive during loads. */
.sling-loader-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 372px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(251, 252, 254, 0.94);
  backdrop-filter: blur(2px);
}

/* Below 1100px the sidebar stacks on top (full-width, in flow), so the overlay
   spans the full width of the content area beneath it. */
@media (max-width: 1100px) {
  .sling-loader-overlay {
    left: 0;
  }
}

.sling-loader-overlay[hidden] {
  display: none;
}

.sling-scene {
  position: relative;
  width: 130px;
  height: 130px;
}

.sling-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Each band pivots at its prong tip (35,30) and (95,30). At rest both are
   rotated to horizontal so they meet at the center (65,30) and read as one
   flat line across the fork. As the rock is drawn down they rotate toward
   vertical and stretch, forming a widening V that tracks the rock; on release
   they recoil back to the flat line. */
.sling-band {
  position: absolute;
  top: 30px;
  width: 3px;
  height: 30px;
  background: #176b87;
  border-radius: 2px;
  transform-origin: top center;
}

.sling-band.left {
  left: 33.5px;
  animation: sling-band-left 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.sling-band.right {
  left: 93.5px;
  animation: sling-band-right 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.sling-rock {
  position: absolute;
  left: 57px;
  top: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: sling-rock-fly 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.sling-loader-message {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.sling-loader-progress {
  width: min(320px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.08);
}

.sling-loader-progress[hidden] {
  display: none;
}

.sling-progress-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sling-progress-readout strong {
  color: var(--brand);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.sling-progress-readout span,
.sling-loader-progress small {
  color: var(--muted);
  font-size: 11px;
}

.sling-progress-track {
  height: 7px;
  margin: 8px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf2;
}

.sling-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #176b87, #39a37a);
  transition: width 0.45s ease;
}

.sling-loader-progress small {
  display: block;
  min-height: 15px;
}

/* The rock rises up from below the fork into the pouch on the flat band, draws
   it straight down into a V (top 22 → 74, center 30 → 82), holds at full
   stretch, then launches back up and off the top. left is fixed at 57px, so
   there is no sideways drift. */
@keyframes sling-rock-fly {
  0% {
    top: 118px;
    transform: scale(0.9);
    opacity: 0;
  }
  8% {
    top: 118px;
    transform: scale(0.9);
    opacity: 0;
  }
  12% {
    top: 112px;
    transform: scale(0.95);
    opacity: 1;
  }
  30% {
    top: 22px;
    transform: scale(1);
    opacity: 1;
  }
  35% {
    top: 22px;
    transform: scale(1);
    opacity: 1;
  }
  55% {
    top: 74px;
    transform: scale(1.06);
    opacity: 1;
  }
  61% {
    top: 74px;
    transform: scale(1.06);
    opacity: 1;
  }
  73% {
    top: -55px;
    transform: scale(0.95);
    opacity: 1;
  }
  78% {
    top: -55px;
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    top: -55px;
    transform: scale(0.9);
    opacity: 0;
  }
}

/* Left band pivots at the left prong tip (35,30). rotate(-90deg) lays it flat
   pointing right; scaleY(1.1) makes it reach just past center so the two bands
   overlap into one seamless flat line (no gap). rotate(-30deg) scaleY(2)
   stretches it down to the drawn-back rock at (65,82). Flat while the rock
   rises in and loads, V while it is pulled, flat again on release. */
@keyframes sling-band-left {
  0% {
    transform: rotate(-90deg) scaleY(1.1);
  }
  35% {
    transform: rotate(-90deg) scaleY(1.1);
  }
  55% {
    transform: rotate(-30deg) scaleY(2);
  }
  61% {
    transform: rotate(-30deg) scaleY(2);
  }
  71% {
    transform: rotate(-90deg) scaleY(1.1);
  }
  100% {
    transform: rotate(-90deg) scaleY(1.1);
  }
}

/* Right band mirrors the left (rotate(90deg) flat, rotate(30deg) scaleY(2) V). */
@keyframes sling-band-right {
  0% {
    transform: rotate(90deg) scaleY(1.1);
  }
  35% {
    transform: rotate(90deg) scaleY(1.1);
  }
  55% {
    transform: rotate(30deg) scaleY(2);
  }
  61% {
    transform: rotate(30deg) scaleY(2);
  }
  71% {
    transform: rotate(90deg) scaleY(1.1);
  }
  100% {
    transform: rotate(90deg) scaleY(1.1);
  }
}

.market-shell {
  display: grid;
  gap: 16px;
  order: 3;
}

.market-tabbar {
  min-height: 76px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  order: 2;
}

.market-tab-panel[hidden] {
  display: none;
}

.market-stack {
  display: grid;
  gap: 24px;
  order: 3;
}

.macro-stack {
  display: grid;
  gap: 18px;
  order: 3;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.scenario-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  order: 4;
}

.news-insights {
  order: 7;
}

.options-stack {
  display: grid;
  gap: 18px;
  order: 3;
}

.options-date-control {
  display: grid;
  gap: 5px;
  min-width: 160px;
}

.options-date-control span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.options-date-control input {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.option-expiration-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.option-expiration-tabs .period-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.options-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 18px 0 0;
}

.options-visual-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px 14px;
  min-width: 0;
  box-shadow: 0 8px 22px rgba(20, 30, 44, 0.06);
}

.options-visual-card.primary {
  min-height: 0;
  grid-column: 1 / -1;
}

.options-visual-card.wide {
  grid-column: 1 / -1;
}

.options-visual-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.options-visual-head h4,
.options-visual-head p {
  margin: 0;
}

.options-visual-head h4 {
  font-size: 15px;
  line-height: 1.25;
}

.options-visual-head p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.options-visual-head strong {
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.options-chart-card {
  padding: 14px 16px 16px;
}

.options-chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.options-chart-select {
  width: min(260px, 100%);
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  background-color: #fbfcfe;
}

.options-large-chart {
  width: 100%;
  height: auto;
  display: block;
}

.options-large-chart .plot-bg {
  fill: #f8fafc;
  stroke: #e8edf2;
  stroke-width: 1;
}

.options-large-chart .grid {
  stroke: #d8e0e8;
  stroke-width: 1;
}

.options-large-chart .reference {
  stroke: #8996a5;
  stroke-dasharray: 4 5;
  stroke-width: 1.2;
}

.options-large-chart .area {
  opacity: 1;
}

.options-large-chart .series {
  fill: none;
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.options-large-chart circle {
  fill: #fff;
  stroke: #176b87;
  stroke-width: 1.8;
}

.options-large-chart .tick-label,
.options-large-chart .axis-label {
  fill: var(--muted);
  font-size: 12px;
}

.options-large-chart .axis-label {
  font-weight: 700;
}

.options-empty-visual {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.options-flow-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 4px 0 8px;
}

.options-flow-axis span:nth-child(1) {
  text-align: right;
}

.options-flow-axis span:nth-child(2) {
  text-align: center;
}

.options-flow-chart {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.options-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  position: relative;
  min-height: 18px;
}

.options-flow-row strong {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}

.options-flow-row.atm strong {
  color: var(--ink);
  font-weight: 800;
}

.options-flow-row.atm::before {
  content: none;
}

.options-ladder-side {
  height: 15px;
  display: flex;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.options-ladder-side.put {
  justify-content: flex-end;
}

.options-ladder-side.call {
  justify-content: flex-start;
}

.options-ladder-side i {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 2px;
  position: relative;
  overflow: hidden;
}

.options-ladder-side i span {
  position: absolute;
  top: -1px;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  font-style: normal;
  opacity: 0;
  padding: 0 5px;
}

.options-ladder-side.put i span {
  right: 0;
}

.options-ladder-side.call i span {
  left: 0;
}

.options-ladder-side i:hover span {
  opacity: 1;
}

.options-ladder-side.put i {
  background: #d45b39;
}

.options-ladder-side.call i {
  background: #176b87;
}

.options-ladder-oi {
  grid-column: 1 / -1;
  height: 3px;
  background: #edf2f7;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: -2px;
}

.options-ladder-oi i {
  display: block;
  height: 100%;
  left: 0;
  background: #cbd5e1;
  border-radius: inherit;
}

.options-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.options-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
}

.options-legend .call::before {
  background: #176b87;
}

.options-legend .put::before {
  background: #d45b39;
}

.options-legend .oi::before {
  background: #cbd5e1;
}

.options-chain-wrap {
  max-height: 430px;
}

.options-chain-table {
  min-width: 1180px;
}

.options-chain-table th:nth-child(4),
.options-chain-table td:nth-child(4) {
  text-align: center;
}

.options-chain-table .atm-row td {
  background: #f5fbf8;
}

.options-surface-table {
  min-width: 820px;
}

.ownership-stack {
  display: grid;
  gap: 18px;
  order: 8;
}

.ownership-two-col {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.ownership-stack .panel {
  padding: 18px 22px;
}

.ownership-stack .panel-head {
  margin-bottom: 12px;
}

#financials {
  order: 9;
}

#events {
  order: 10;
}

.panel {
  min-width: 0;
  padding: 22px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.panel h3 {
  font-size: 18px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.chart-panel-head {
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.chart-title {
  min-width: 0;
  flex: 1 1 auto;
}

.chart-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
}

.chart-interval-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: -6px 0 14px;
}

.chart-interval-bar[hidden] {
  display: none !important;
}

.chart-interval-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exp-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.segment.active .exp-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #fff7ed;
}

.intraday-interval .segment {
  min-width: 40px;
  padding: 0 10px;
}

.intraday-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.intraday-nav .segment {
  min-width: 32px;
  padding: 0 9px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
}

/* The date input sits between the prev/next segments and reads as one of them. */
.intraday-date {
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  height: 34px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  width: 128px;
}

.intraday-date:focus {
  outline: none;
  background: #eef6f9;
}

.intraday-date::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.intraday-event-btn {
  border: 1px solid var(--brand);
  background: #f1f8fa;
  color: var(--brand);
  font-weight: 700;
  font-size: 12px;
  border-radius: 10px;
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
}

.intraday-event-btn:hover {
  background: #e3f1f5;
}

@media (max-width: 900px) {
  .chart-panel-head {
    flex-wrap: wrap;
  }

  .chart-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .chart-title p {
    white-space: normal;
  }
}

.segment {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 800;
}

.segment.active {
  background: var(--brand);
  color: white;
}

.chart-wrap {
  position: relative;
}

.chart-readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.chart-readout div {
  min-width: 0;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}

.chart-readout span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.chart-readout strong {
  color: #17202a;
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.chart-readout small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.chart-panel canvas {
  display: block;
  width: 100%;
  height: 430px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  cursor: crosshair;
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 210px;
  max-width: 280px;
  border: 1px solid #cfd9e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(31, 45, 61, 0.16);
  padding: 10px 11px;
  pointer-events: none;
  color: #17202a;
  font-size: 12px;
  line-height: 1.35;
}

.chart-tooltip strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.chart-tooltip dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 12px;
  margin: 0;
}

.chart-tooltip dt {
  color: var(--muted);
}

.chart-tooltip dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
}

.chart-tooltip .event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.chart-tooltip .event-tags span,
.chart-legend span {
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef2f6;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 26px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.chart-legend-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-catalyst {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.scenario-panel .scenario-copy {
  color: #344054;
  line-height: 1.55;
  margin-bottom: 18px;
}

.scenario-panel .current-event-copy {
  color: #344054;
  line-height: 1.55;
  border: 1px solid #e6ebf1;
  background: #fbfcfe;
  border-radius: 8px;
  padding: 13px 14px;
  margin: 0 0 28px;
}

.current-event-copy:empty {
  display: none;
}

/* ---- Prediction markets (scenario panel) ---- */
.prediction-markets {
  border: 1px solid #e6ebf1;
  background: #fbfcfe;
  border-radius: 8px;
  padding: 14px;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
}

.prediction-markets[hidden] {
  display: none;
}

.pm-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.pm-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.pm-note {
  color: var(--muted);
  font-size: 11.5px;
}

.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-chip {
  background: #eef4f7;
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.pm-links {
  display: grid;
  gap: 10px;
}

.pm-source {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.pm-source:hover {
  text-decoration: underline;
}

.pm-market {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.pm-market-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-market-head a {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  margin-left: auto;
}

.pm-market-head a:hover {
  text-decoration: underline;
}

.pm-badge {
  background: #4a2fed;
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pm-event-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.pm-odds-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
  border-top: 1px solid #f0f3f7;
}

.pm-odds-row span {
  color: #475467;
}

.pm-odds-row strong {
  font-variant-numeric: tabular-nums;
}

.pm-muted {
  color: var(--muted);
  font-size: 12px;
}

/* Clickable document cards (news / filings) */
.doc-card {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.doc-card:hover,
.doc-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(23, 107, 135, 0.12);
  outline: none;
}

.doc-preview {
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 0;
}

.doc-open-hint {
  display: inline-block;
  margin-top: 4px;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
}

.doc-link-btn {
  margin-top: 14px;
  border: 1px solid var(--brand);
  background: #f1f8fa;
  color: var(--brand);
  font-weight: 700;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  width: 100%;
}

.doc-link-btn:hover {
  background: #e3f1f5;
}

/* Earnings releases list */
.earnings-releases {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.press-release-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.earnings-release-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.earnings-release-row:hover,
.earnings-release-row:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(23, 107, 135, 0.12);
  outline: none;
}

.erow-period {
  font-weight: 700;
  color: #17202a;
}

.erow-metric {
  color: var(--muted);
  font-size: 13px;
}

/* Document reader modal */
.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.doc-modal.open {
  display: flex;
}

.doc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 32, 0.55);
  backdrop-filter: blur(2px);
}

.doc-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(16, 24, 32, 0.35);
  overflow: hidden;
}

.doc-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}

.doc-modal-kind {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}

.doc-modal-head h2 {
  margin: 6px 0 4px;
  font-size: 22px;
  line-height: 1.25;
}

.doc-modal-meta {
  color: var(--muted);
  font-size: 13px;
}

.doc-modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fbfcfe;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #344054;
}

.doc-modal-close:hover {
  background: #eef2f6;
}

.doc-modal-body {
  overflow-y: auto;
  padding: 22px 26px;
  /* A readable measure, like a filing/article page */
}

.doc-modal-body p {
  color: #2d3a47;
  line-height: 1.7;
  margin: 0 0 14px;
  font-size: 15px;
}

.doc-modal-body h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 22px 0 8px;
}

.doc-modal-body .filing-section {
  margin-bottom: 8px;
}

.doc-modal-body.filing-mode {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.65;
  color: #1a2332;
}

.doc-modal-body.filing-mode .filing-p,
.doc-modal-body.filing-mode .filing-caption,
.doc-modal-body.filing-mode .filing-dateline,
.doc-modal-body.filing-mode .filing-headline {
  margin: 0 0 14px;
}

.doc-modal-body.filing-mode .filing-p {
  text-align: left;
}

.doc-modal-body .filing-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
  font-family: var(--font, system-ui, sans-serif);
}

.doc-modal-body .filing-chrome-badge {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4f46e5;
}

.doc-modal-body .filing-chrome-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--muted);
}

.doc-modal-body .filing-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font, system-ui, sans-serif);
}

.doc-modal-body .filing-toc-link {
  font-size: 12px;
  font-weight: 700;
  color: #4f46e5;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #d8def0;
  background: #fff;
}

.doc-modal-body .filing-toc-link:hover {
  background: #eef2ff;
}

.doc-modal-body .filing-document {
  max-width: 780px;
}

.doc-modal-body .filing-item {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2d3a47;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-modal-body .filing-item-num {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font, system-ui, sans-serif);
}

.doc-modal-body .filing-section-label {
  margin: 24px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #2d3a47;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.doc-modal-body .filing-heading,
.doc-modal-body .filing-subsection {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1a2332;
  margin: 22px 0 10px;
}

.doc-modal-body .filing-headline,
.doc-modal-body .filing-press-headline {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #1a2332;
}

.doc-modal-body .filing-dateline {
  font-family: var(--font, system-ui, sans-serif);
  font-size: 14px;
  color: #3d4f63;
  margin: 0 0 18px;
}

.doc-modal-body .filing-caption,
.doc-modal-body .filing-table-caption {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a2332;
  margin: 10px 0 8px;
}

.doc-modal-body .filing-quote {
  margin: 16px 20px;
  padding: 12px 16px;
  border-left: 3px solid #4f46e5;
  background: #f8f9fc;
  font-style: italic;
  color: #2d3a47;
}

.doc-modal-body .filing-bullets {
  margin: 8px 0 16px 20px;
  padding: 0;
}

.doc-modal-body .filing-bullets li {
  margin: 0 0 8px;
}

.doc-modal-body .filing-risk-theme {
  font-family: var(--font, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: #1a2332;
  margin: 20px 0 8px;
}

.doc-modal-body .filing-table-wrap {
  overflow-x: auto;
  margin: 8px 0 18px;
}

.doc-modal-body table.filing-table,
.doc-modal-body table.filing-figures {
  width: 100%;
  border-collapse: collapse;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.doc-modal-body table.filing-table th,
.doc-modal-body table.filing-table td,
.doc-modal-body table.filing-figures td {
  padding: 5px 12px;
  border: 1px solid #c5cdd8;
  color: #1a2332;
  vertical-align: bottom;
}

.doc-modal-body table.filing-table th {
  font-weight: 800;
  background: #eef1f5;
  text-align: right;
  border-bottom: 2px solid #8a96a8;
}

.doc-modal-body table.filing-table th.fig-label,
.doc-modal-body table.filing-table td.fig-label,
.doc-modal-body table.filing-figures td:first-child {
  font-weight: 700;
  text-align: left;
  min-width: 180px;
}

.doc-modal-body table.filing-table td.fig-val,
.doc-modal-body table.filing-figures td.fig-val {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.doc-modal-body table.filing-table thead tr:first-child th {
  border-bottom: 1px solid #c5cdd8;
}

.doc-modal-body table.filing-table tbody tr:nth-child(even) td,
.doc-modal-body table.filing-figures tr:nth-child(even) td {
  background: #f8f9fb;
}

.doc-modal-footer {
  padding: 12px 26px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

body.modal-open {
  overflow: hidden;
}

.scenario-meta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scenario-meta div {
  border: 1px solid #e6ebf1;
  background: #fbfcfe;
  border-radius: 8px;
  padding: 11px;
}

.scenario-meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.scenario-meta strong {
  display: block;
  line-height: 1.35;
}

.facts-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fact-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf1f5;
  align-items: start;
}

.fact-row.wide {
  grid-column: 1 / -1;
  border-bottom: 0;
  padding-bottom: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 14px;
}

.fact-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.fact-row strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.fact-row.wide strong {
  text-align: left;
  line-height: 1.45;
}

.feed {
  display: grid;
  gap: 12px;
}

.feed-item {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.feed-item h4,
.signal-box h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.feed-item p,
.signal-box p {
  margin: 6px 0 0;
  color: #344054;
  line-height: 1.45;
}

.feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.feed-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #eef2f6;
  color: #344054;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
}

.feed-tag.positive {
  background: #e7f4ef;
  color: var(--green);
}

.feed-tag.negative {
  background: #fff1f0;
  color: var(--red);
}

.feed-tag.neutral {
  background: #eef2f6;
  color: #344054;
}

.compact {
  margin-bottom: 14px;
}

.signal-box {
  display: grid;
  gap: 12px;
  /* Match the Latest news feed beside it: cap at the same height and scroll the
     overflow rather than growing the panel taller than the news box. */
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}

.signal-card {
  border: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: 8px;
  padding: 14px;
}

.signal-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.signal-metrics div {
  background: white;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  padding: 10px;
}

.signal-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.compact-insights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insight-grid .empty {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.insight-metric {
  min-width: 0;
  border-top: 3px solid var(--brand);
  background: #fbfcfe;
  padding: 9px 0 0;
}

.insight-metric span,
.dense-data-table td span {
  color: var(--muted);
  font-size: 12px;
}

.insight-metric span {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.insight-metric strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.insight-metric small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dense-table-wrap {
  max-height: 340px;
}

.compact-scroll {
  max-height: 300px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf1f5;
  text-align: right;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: #fff;
}

th {
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.dense-data-table {
  min-width: 1040px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dense-data-table th,
.dense-data-table td {
  padding: 8px 10px;
}

.dense-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.dense-data-table th:first-child,
.dense-data-table td:first-child {
  z-index: 3;
}

.dense-data-table td {
  vertical-align: top;
}

.dense-data-table td strong {
  color: #17202a;
}

.row-subtext {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.row-subtext span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.dense-data-table .feed-tags {
  margin-top: 0;
  justify-content: flex-end;
}

.inline-doc-btn {
  border: 1px solid var(--brand);
  background: #f1f8fa;
  color: var(--brand-dark);
  border-radius: 8px;
  min-height: 30px;
  padding: 0 10px;
  font-weight: 800;
  cursor: pointer;
}

.inline-doc-btn:hover,
.inline-doc-btn:focus-visible {
  background: #e3f1f5;
  outline: none;
}

.error-empty {
  display: grid;
  gap: 5px;
  border-color: #f0b8b4;
  background: #fff8f7;
  color: var(--red);
}

.error-empty strong {
  color: var(--red);
}

.error-empty span {
  color: #7a271a;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.field.full {
  grid-column: 1 / -1;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(420px, calc(100vw - 44px));
  background: #17202a;
  color: white;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(23, 32, 42, 0.2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfe;
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .summary-grid,
  .market-stack,
  .two-col,
  .options-visual-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .nav a {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .workspace,
  .sidebar {
    padding: 16px;
  }

  .panel-head {
    flex-direction: column;
  }

  /* Keep the collapsible summary header as a row (title left, caret right) even
     when other panel-heads stack — its align-items:center would otherwise center
     the title once the column direction kicks in. */
  details.dropdown-panel > summary {
    flex-direction: row;
    align-items: center;
  }

  .summary-grid {
    gap: 10px;
  }

  .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav a {
    padding: 8px 6px;
  }

  .scenario-meta,
  .chart-readout,
  .facts-list,
  .insight-grid,
  .compact-insights {
    grid-template-columns: 1fr;
  }

  .combo-menu {
    max-height: 260px;
  }

  .dense-data-table {
    min-width: 900px;
  }

  .impact-factor-list,
  .impact-audit-grid,
  .impact-audit-considerations {
    grid-template-columns: 1fr;
  }

}

/* Collapsible dropdown panels (news / earnings / SEC filings) */
details.dropdown-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
details.dropdown-panel > summary::-webkit-details-marker { display: none; }
details.dropdown-panel > summary::marker { content: ""; }
details.dropdown-panel .dropdown-caret {
  font-size: 14px;
  color: var(--muted, #888);
  transition: transform 0.15s ease;
}
details.dropdown-panel[open] .dropdown-caret { transform: rotate(180deg); }

/* Document <select> pickers (news / SEC filings) */
.doc-select {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line, #d6dde4);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
.doc-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.doc-open-btn {
  padding: 8px 16px;
  border: 1px solid var(--accent, #2f6df4);
  border-radius: 8px;
  background: var(--accent, #2f6df4);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.doc-open-btn:hover { filter: brightness(1.05); }
.doc-select-hint { color: #7a8794; font-size: 12px; }

/* News feed: a browsable list of article cards that supersedes the doc-select
   dropdown for news, so a news-heavy scenario actually reads as one. */
.doc-detail:has(.doc-feed) {
  display: block;
}
.doc-feed {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 4px 0 0;
  display: grid;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
}
.doc-feed-item {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.doc-feed-item:hover {
  border-color: rgba(23, 107, 135, 0.45);
  background: #f0f8fa;
}
.doc-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.doc-feed-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-feed-item strong {
  font-size: 13.5px;
  line-height: 1.3;
}
.doc-feed-snippet {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-feed-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.doc-feed-tag.positive { background: #e7f4ef; color: var(--green); }
.doc-feed-tag.negative { background: #fdeceb; color: var(--red); }
.doc-feed-tag.neutral { background: #eef2f6; color: #475467; }

/* Interest rates & macro panel */
.macro-list { display: flex; flex-direction: column; }
.macro-list .facts-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid #edf1f5;
}
.macro-list .facts-row-head { font-size: 12px; color: #7a8794; }
.macro-list .facts-range { color: #7a8794; min-width: 120px; text-align: right; }