/* ============================================================
   Investment Desk - page styles
   Builds on the site design tokens in /css/style.css (colours,
   fonts, .section, .container, .page-hero, .footer). Only the
   desk-specific components live here. Mobile-first.
   ============================================================ */

/* Desk-local palette: deliberately softer / lower-contrast than the site
   brand maroon, so the data-heavy page reads calmly. */
:root {
  --desk-accent: #9a6b76;        /* muted maroon (milder than --primary) */
  --desk-accent-soft: #d7c2c7;   /* faint maroon for thin borders */
  --desk-pos: #5f8a6e;           /* muted sage green */
  --desk-neg: #b5817a;           /* muted terracotta */
  --desk-tier-strong: #6f9a7e;
  --desk-tier-good: #8fb09a;
  --desk-tier-weak: #cfa888;
}

.desk-narrow { max-width: 820px; }

.desk-updated {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* ----- Page contents (dynamic table of contents) ----- */
/* Anchor jumps land below the fixed 72px site nav; smooth-scroll the page. */
html { scroll-behavior: smooth; }
.section { scroll-margin-top: 90px; }
.desk-toc-section { padding-bottom: 0; }
.desk-toc {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--desk-accent);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.desk-toc__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  font-weight: 600;
  margin: 0 0 12px;
}
/* Single numbered column: an ordered list of chapters whose reading order is
   unambiguous (top to bottom, 1..n). The CSS counter restores the numbering
   that list-style:none removes. */
.desk-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: desk-toc;
}
.desk-toc__link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  color: var(--text-medium);
  text-decoration: none;
  font-size: 0.96rem;
  transition: background 0.15s ease, color 0.15s ease;
  counter-increment: desk-toc;
}
.desk-toc__link::before {
  content: counter(desk-toc) ".";
  flex: 0 0 auto;
  min-width: 1.5em;
  color: var(--desk-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.desk-toc__link:hover { background: var(--bg); color: var(--desk-accent); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----- Prose ----- */
.desk-prose {
  color: var(--text-medium);
  font-size: 1.02rem;
  line-height: 1.75;
}
.desk-prose p { margin: 0 0 1em; }
.desk-prose ul, .desk-prose ol { margin: 0 0 1em 1.2em; }
.desk-prose li { margin-bottom: 0.4em; }
.desk-prose h3 { margin: 1.4em 0 0.5em; font-size: 1.2rem; }
.desk-prose h4 { margin: 1.2em 0 0.4em; font-size: 1.05rem; }
.desk-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.desk-prose strong { color: var(--text); font-weight: 600; }

/* ----- Stat row ----- */
.desk-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.desk-stat {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  flex: 1 1 180px;
}
.desk-stat--block { display: flex; flex-direction: column; gap: 4px; }
.desk-stat__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 6px;
}
.desk-stat__value {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--dark);
}
.desk-stat__value--sm { font-size: 0.95rem; font-weight: 500; }
.desk-stat__sub { font-size: 0.8rem; color: var(--text-light); font-weight: 400; }
.desk-stat__hint { font-size: 0.8rem; color: var(--text-light); margin-top: 4px; }

/* ----- Charts ----- */
.desk-chart-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
  /* Flex column so the chart area can grow to fill the card. Paired with a
     stretched grid, this makes the chart match the height of the cards beside
     it - symmetrical regardless of how much content the other column holds. */
  display: flex;
  flex-direction: column;
}
.desk-chart-title {
  font-size: 1.05rem;
  margin-bottom: 16px;
  color: var(--dark);
}
.desk-chart-wrap { position: relative; width: 100%; flex: 1 1 auto; min-height: 240px; }
.desk-chart-wrap--tall { min-height: 460px; }
.desk-chart-note {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 12px;
}

.desk-grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }

/* ----- Tables ----- */
.desk-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  margin-bottom: 40px;
}
.desk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 720px;
}
.desk-table th {
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  padding: 14px 14px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}
.desk-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-medium);
  vertical-align: top;
}
.desk-table tbody tr:last-child td { border-bottom: none; }
.desk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Numeric column headers must right-align too, so the label sits over its
   right-aligned values (`.desk-table th` would otherwise force them left). */
.desk-table th.desk-num { text-align: right; }
/* Keep the Greek beta lowercase - the header's uppercase transform would
   otherwise render β as Β, which is indistinguishable from a Latin "B". */
.desk-beta { text-transform: none; }
.desk-ticker { font-weight: 600; color: var(--dark); white-space: nowrap; }
.desk-nowrap { white-space: nowrap; }
.desk-table--ideas { min-width: 640px; }
.desk-table--ideas .desk-driver { color: var(--text-medium); line-height: 1.6; min-width: 320px; }
.desk-driver p { margin: 0 0 0.6em; }
.desk-driver p:last-child { margin-bottom: 0; }

/* Matrix tables: per-security regime betas (A), scheme weights (C), scheme
   dimension scores (E), scheme regime betas (F). They scroll horizontally
   inside .desk-table-scroll when narrow. */
.desk-table--matrix { min-width: 520px; }
.desk-table--matrix th, .desk-table--matrix td { font-size: 0.88rem; }
.desk-table--book { min-width: 880px; }

/* Equal-width value columns: a fixed layout shares the space after the label
   column evenly, so the numeric columns all read at the same width. */
.desk-table.desk-table--equal { table-layout: fixed; }
.desk-table--equal th:first-child, .desk-table--equal td:first-child { width: 30%; }

/* Fit-to-width matrix (no horizontal scroll): drop the matrix min-width, wrap
   the header labels onto two lines and shrink the type so every column fits
   the container. The values are short (<= 3 chars), so narrow columns are fine. */
.desk-table.desk-table--fit { min-width: 0; table-layout: fixed; }
.desk-table--fit th { white-space: normal; vertical-align: bottom; font-size: 0.64rem; padding: 9px 6px; line-height: 1.25; }
.desk-table--fit td { font-size: 0.82rem; padding: 8px 6px; }
.desk-table--fit th:first-child, .desk-table--fit td:first-child { width: 22%; }

/* Sweep weights as proportional bars: one row per scheme, each holding a
   segment sized by its weight, largest first, labelled when wide enough. */
.desk-weights { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.desk-weights__row {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.desk-weights__scheme { font-size: 0.82rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
/* No overflow:hidden on the bar/segment so the hover tooltip can escape; the
   rounded ends are carried by the first and last segments instead. */
.desk-weights__bar { display: flex; height: 30px; border-radius: 6px; background: var(--bg); }
.desk-weights__seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}
.desk-weights__seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.desk-weights__seg:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.desk-weights__lbl { width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 0 5px; }
/* Weight tooltip: ticker + its share of the portfolio, shown on hover/focus. */
.desk-weights__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 40;
}
.desk-weights__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}
.desk-weights__seg:hover .desk-weights__tip { opacity: 1; visibility: visible; }

/* Skipped scheme: a weighting method Souppe could not build at the target size.
   Shown muted so the scheme is still listed (not silently dropped). */
.desk-weights__row--na { opacity: 0.72; }
.desk-weights__na { font-size: 0.78rem; color: var(--text-light); font-style: italic; }
/* Skipped rows in the scores / regime tables read as dashes; mute them and tag
   the scheme name with a small "n/a" chip. */
.desk-table .desk-row--na { color: var(--text-light); }
.desk-na-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

.desk-pos { color: var(--desk-pos); }
.desk-neg { color: var(--desk-neg); }
.desk-flat { color: var(--text-medium); }

/* Sign colours have to out-specify `.desk-table td` (element+class), which
   would otherwise repaint these cells in the default body colour. */
.desk-table td.desk-pos { color: var(--desk-pos); }
.desk-table td.desk-neg { color: var(--desk-neg); }
.desk-table td.desk-flat { color: var(--text-medium); }

/* Holding return - the owner's gain/loss since entry. Bold with a clearer
   green/red so each position's result reads at a glance. */
.desk-table td.desk-return { font-weight: 600; }
.desk-table td.desk-return.desk-pos { color: #2e9e63; }
.desk-table td.desk-return.desk-neg { color: #d0584c; }

.desk-status {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.desk-status--active { background: rgba(95,138,110,0.14); color: var(--desk-pos); }
.desk-status--closed { background: rgba(0,0,0,0.06); color: var(--text-light); }

/* Closed (sold) rows: listed for their realized return but de-emphasised so
   the current holdings stand out. The holding-return cell keeps its colour
   (it out-specifies this rule). */
.desk-row--closed td { color: var(--text-light); }
.desk-row--closed .desk-ticker { color: var(--text-light); }

/* ----- Stat stack (RCR / drawdown) ----- */
.desk-stat-stack { display: flex; flex-direction: column; gap: 16px; }

/* ----- Structural dimensions ----- */
.desk-dims { display: flex; flex-direction: column; gap: 16px; }
.desk-composite {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.desk-composite__score {
  font-family: 'Quicksand', sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--desk-accent);
  line-height: 1;
}
.desk-composite__label { font-size: 0.9rem; color: var(--text-light); }

.desk-dim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.desk-dim {
  display: grid;
  grid-template-columns: 1fr 90px 32px;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}
.desk-dim__name { color: var(--text-medium); }
.desk-dim__bar { background: var(--border); border-radius: 999px; height: 7px; overflow: hidden; }
.desk-dim__bar span { display: block; height: 100%; border-radius: 999px; background: var(--secondary); }
.desk-dim__score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--dark); }
.desk-tier-excellent .desk-dim__bar span { background: var(--desk-tier-strong); }
.desk-tier-good .desk-dim__bar span { background: var(--desk-tier-good); }
.desk-tier-moderate .desk-dim__bar span { background: var(--secondary); }
.desk-tier-weak .desk-dim__bar span { background: var(--desk-tier-weak); }

/* ----- Opportunity / entries ----- */
.desk-opportunity {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--desk-accent-soft);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.desk-opportunity__date {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--desk-accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.desk-entry { margin-bottom: 28px; }
.desk-entry__title { font-size: 1.15rem; margin-bottom: 8px; color: var(--dark); }

.desk-disclaimer { font-size: 0.84rem; color: var(--text-light); font-style: italic; line-height: 1.7; }
.desk-empty {
  color: var(--text-light);
  font-style: italic;
  padding: 24px;
  text-align: center;
  background: var(--bg-white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ----- Desktop layout ----- */
@media (min-width: 860px) {
  .desk-grid-2 { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .desk-grid-2--radar { grid-template-columns: 1fr 1fr; }
  /* Inside a side-by-side grid the chart card must not carry its standalone
     40px bottom margin, or it stretches 40px short of the column beside it
     (the "chart ends before the second card" gap). Drop it so both columns
     fill the row to the same height. */
  .desk-grid-2 > .desk-chart-card { margin-bottom: 0; }
  /* The stacked stat cards split the column evenly and grow to the chart
     card's height, so the two columns line up edge-to-edge (symmetry). */
  .desk-stat-stack > .desk-stat { flex: 1 1 0; justify-content: center; }
}

/* ----- Small screens ----- */
@media (max-width: 600px) {
  .desk-stat__value { font-size: 1.35rem; }
  .desk-composite__score { font-size: 2.1rem; }
  .desk-dim { grid-template-columns: 1fr 60px 28px; font-size: 0.82rem; }
  .desk-chart-card { padding: 16px; }
}