/* Plan
   Subject: leveraged-loan flex and CLO demand, Bloomberg RA project. Audience: Ed and William, desktop first, phone sometimes. Job: read progress per task, open any figure.
   Layout: one column, 64rem container, left aligned, summary table first, then one section per task.
     [ title, one-liner, updated ]
     [ jump links ]
     [ status table ]
     [ asked vs delivered | task 1..5 | caveats | next steps ]
   Colour tokens: bg, surface, fg / fg-2 / muted, accent (links), status pills (done, doing, todo).
   Fonts: system sans only (served offline from the mini).
   Principles: utilitarian, text first; figures are the only large objects; status is a pill with text, never colour alone. */

:root {
  --bg: #f9f9f7; --surface: #fcfcfb; --fg: #0b0b0b; --fg-2: #52514e; --muted: #6b6a65;
  --line: rgba(11, 11, 11, 0.10); --accent: #256abf; --focus: #256abf;
  --done-bg: #dafbe1; --done-fg: #14532d; --doing-bg: #fff1cc; --doing-fg: #6b4700; --todo-bg: #ebebe6; --todo-fg: #52514e;
  --th-bg: #f1f1ed;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 6px; --radius-md: 10px;
  --step--1: 0.8rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d; --surface: #1a1a19; --fg: #f0efec; --fg-2: #c3c2b7; --muted: #a3a29b;
    --line: rgba(255, 255, 255, 0.10); --accent: #3987e5; --focus: #86b6ef;
    --done-bg: #16301b; --done-fg: #7ee787; --doing-bg: #3a2e0c; --doing-fg: #f2c14e; --todo-bg: #2c2c2a; --todo-fg: #c3c2b7;
    --th-bg: #232322;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0d; --surface: #1a1a19; --fg: #f0efec; --fg-2: #c3c2b7; --muted: #a3a29b;
  --line: rgba(255, 255, 255, 0.10); --accent: #3987e5; --focus: #86b6ef;
  --done-bg: #16301b; --done-fg: #7ee787; --doing-bg: #3a2e0c; --doing-fg: #f2c14e; --todo-bg: #2c2c2a; --todo-fg: #c3c2b7;
  --th-bg: #232322;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: var(--space-4); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-inline: var(--space-4); padding-block: var(--space-6) var(--space-8);
  background: var(--bg); color: var(--fg);
  font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.125rem) / 1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  accent-color: var(--accent);
}
@media (min-width: 40em) { body { padding-inline: var(--space-5); } }
::selection { background: var(--accent); color: var(--bg); }
[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; }

.wrap { max-width: 64rem; margin-inline: auto; }
.skip { position: absolute; left: var(--space-2); top: -4rem; background: var(--surface); color: var(--fg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-2); }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); letter-spacing: -0.02em; margin: 0 0 var(--space-3); font-weight: 700; }
h2 { font-size: var(--step-1); font-weight: 650; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: var(--space-4); }
h3 { font-size: var(--step-0); font-weight: 650; margin: var(--space-5) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); max-width: 65ch; text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; max-width: 65ch; }
li { margin-bottom: var(--space-2); }
.lede { color: var(--fg-2); }
.meta { color: var(--muted); font-size: var(--step--1); margin: 0; }

.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; max-width: none; }
.jump li { margin: 0; }
.jump a { display: inline-block; padding-block: var(--space-1); min-height: 24px; }

.scroll { overflow-x: auto; margin: 0 0 var(--space-4); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
caption { text-align: left; font-weight: 650; padding-bottom: var(--space-2); }
th, td { text-align: left; vertical-align: top; padding: 0.45em 0.7em; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
thead th { background: var(--th-bg); font-weight: 600; }
tbody th { font-weight: 600; }
@media (min-width: 40em) { .col-task { width: 28%; } .col-status { width: 16%; } .col-note { width: 56%; } }

.pill { display: inline-block; font-size: 0.78rem; font-weight: 600; line-height: 1.4; padding: 0.1em 0.7em; border-radius: 10px; white-space: nowrap; }
.pill-done { background: var(--done-bg); color: var(--done-fg); }
.pill-doing { background: var(--doing-bg); color: var(--doing-fg); }
.pill-todo { background: var(--todo-bg); color: var(--todo-fg); }

.hint { color: var(--muted); font-size: var(--step--1); margin: var(--space-2) 0 0; }

.figs { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
.figs-grid { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); }
figure { margin: 0; min-width: 0; }
figure a { display: block; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: var(--space-2); font-size: 0.95rem; color: var(--fg-2); max-width: 65ch; }
figcaption strong { color: var(--fg); font-weight: 600; }
.figs-grid figcaption { font-size: var(--step--1); }

.soon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); max-width: 65ch; }
.soon p { margin: 0; }

footer { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print {
  .jump, .skip { display: none; }
  body { background: #fff; color: #000; }
  figure, tr { break-inside: avoid; }
  @page { margin: 1.5cm; }
}