/* The hosted shell. The --color-* / --cds-* / --font-anthropic-* tokens are the ones the dashboard page was written against. */
:root {
  --font-anthropic-sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-anthropic-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --color-fg: #1c1f23; --color-fg-muted: #6b7079; --color-border-line: #e4e1da; --color-panel: #faf9f6;
  --color-ok: #1f7a4d; --color-bad: #b4322e; --color-warn: #a66a00;
  --cds-font-size-caption: 12px; --cds-font-size-body: 14px; --cds-font-size-heading: 18px; --cds-font-size-title: 22px;
  --cds-font-weight-medium: 600; --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px; --cds-radius: 10px;
  --cds-text-secondary: var(--color-fg-muted); --cds-surface-popover: #fff; --cds-shadow-popover: 0 6px 24px rgba(0,0,0,.12);
  --cds-dur-slow: 300ms; --cds-chart-muted: #b8b3aa; --cds-chart-grid: #ece9e3; --cds-chart-axis: #c9c5bd; --cds-border: var(--color-border-line);
  --bg: #ffffff; --accent: #2e6f8e; --accent-ink: #ffffff; --tide: #1d4f66;
  --pill-bg: #ebe9e3; --pill-fg: #555;
}
@media (prefers-color-scheme: dark) {
  :root { --color-fg: #ecebe7; --color-fg-muted: #9a9ea6; --color-border-line: #2f3338; --color-panel: #1b1e22; --bg: #121417;
    --cds-surface-popover: #1f2328; --cds-chart-grid: #2a2e33; --cds-chart-axis: #3a3f45; --cds-chart-muted: #6c7076;
    --accent: #6fb3d2; --accent-ink: #0f1a20; --tide: #3b86a8; --pill-bg: #2a2e33; --pill-fg: #d0d3d8; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--bg); line-height: 1.45; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.top { border-bottom: 1px solid var(--color-border-line); background: var(--color-panel); position: sticky; top: 0; z-index: 5; }
.bar { display: flex; align-items: center; gap: 20px; min-height: 52px; flex-wrap: wrap; }
.brand { font-weight: 600; color: var(--color-fg); text-decoration: none; letter-spacing: .01em; }
.brand .dot { color: var(--color-fg-muted); margin: 0 .4em; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--color-fg-muted); text-decoration: none; padding: 14px 10px; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--color-fg); border-bottom-color: var(--color-fg); font-weight: 600; }
.badge { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--color-warn); color: #fff; font-size: 11px; text-align: center; font-weight: 600; vertical-align: 1px; }
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.who .role { color: var(--color-fg-muted); }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; font-weight: 400; }
main { padding: 20px 16px 48px; }
h1 { font-size: 24px; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 18px; margin: 0 0 8px; font-weight: 600; }
.muted { color: var(--color-fg-muted); } .small { font-size: 12px; }
.head { margin-bottom: 4px; } .head p { margin: 0; max-width: 72ch; }
.flash { background: var(--color-panel); border: 1px solid var(--color-border-line); border-left: 4px solid var(--color-ok); padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.flash.warn { border-left-color: var(--color-warn); }
.card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: 18px; margin: 0 0 16px; }
.card.narrow { max-width: 460px; margin: 48px auto; }
label { display: block; font-size: 13px; color: var(--color-fg-muted); margin: 10px 0 4px; }
input, select, textarea { font: inherit; color: var(--color-fg); background: var(--bg); border: 1px solid var(--color-border-line); border-radius: 8px; padding: 8px 10px; width: 100%; }
textarea { resize: vertical; }
button, .btn { font: inherit; font-weight: 600; border: 1px solid var(--color-border-line); background: var(--bg); color: var(--color-fg); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.big { padding: 12px 22px; font-size: 16px; }
.btn.launch { background: var(--tide); color: #fff; border-color: var(--tide); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; margin: 16px 0 20px; }
.tile { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: 14px 16px; }
.tile .num { font-family: var(--font-anthropic-serif); font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile .label, .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-fg-muted); margin-top: 4px; }
.tile.hot { border-color: var(--color-warn); }
.move h2 { margin-top: 8px; }
.move-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border-line); background: var(--bg); }
.entity { color: var(--color-fg-muted); font-size: 13px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg); }
.move-top .pill { margin-left: auto; }
.st-approved, .st-approve { background: #dff1e6; color: #1f6b43; }
.st-denied, .st-decline { background: #f7dcda; color: #923028; }
.st-adjusted, .st-adjust { background: #f8e8c7; color: #7a5200; }
.st-launched, .st-launch { background: #dbe9f3; color: #1d4f66; }
.st-confirmed, .st-confirm { background: #1d4f66; color: #fff; }
.act { font-size: 15px; margin: 4px 0 10px; max-width: 80ch; }
.figs { display: flex; gap: 28px; flex-wrap: wrap; margin: 8px 0 10px; }
.fig-n { font-family: var(--font-anthropic-serif); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.1; }
details.why { margin: 6px 0 10px; } details.why summary { cursor: pointer; color: var(--color-fg-muted); font-size: 13px; }
details.why p { margin: 8px 0 0; max-width: 72ch; }
.thread { border-top: 1px solid var(--color-border-line); padding-top: 10px; margin-top: 6px; display: grid; gap: 8px; }
.dec .by { font-weight: 600; margin-left: 6px; }
.comment { margin: 4px 0 0 2px; padding-left: 10px; border-left: 3px solid var(--color-border-line); white-space: pre-wrap; }
.launch-lines { margin: 6px 0 2px; padding-left: 18px; }
.actions { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.decide { flex: 1 1 360px; } .decide textarea { margin: 0; }
form.inline { display: inline; }
.asof { margin-top: 10px; }
.note { background: var(--color-panel); border-left: 4px solid var(--accent); padding: 8px 12px; border-radius: 6px; max-width: 80ch; }
.lines { display: grid; gap: 10px; }
fieldset.line { border: 1px solid var(--color-border-line); border-radius: 8px; padding: 6px 12px 12px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; }
fieldset.line legend { font-size: 12px; color: var(--color-fg-muted); padding: 0 4px; }
fieldset.line label { margin: 0; } fieldset.line .grow { grid-column: span 2; }
.methods label { font-size: 14px; color: var(--color-fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.methods input[type="radio"] { width: auto; margin: 0; } .methods input[type="date"] { width: auto; }
.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.t th, .t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
.t th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-fg-muted); font-weight: 600; }
.t .r { text-align: right; } .t .arrow { color: var(--color-fg-muted); } .nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; margin-bottom: 20px; }
.cap { padding: 10px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--color-border-line); }
.cap.over { border-color: var(--color-warn); }
.ack { font-size: 15px; color: var(--color-fg); display: flex; align-items: center; gap: 8px; } .ack input { width: auto; margin: 0; }
.crumbs { margin: 0 0 8px; } .crumbs a { color: var(--color-fg-muted); text-decoration: none; }
.meta { margin: 0 0 10px; }
.foot { padding: 20px 16px; color: var(--color-fg-muted); font-size: 12px; border-top: 1px solid var(--color-border-line); }
code { font-size: 12px; background: var(--color-panel); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 760px) {
  fieldset.line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who { margin-left: 0; } .move-top .pill { margin-left: 0; } .nav a { padding: 10px 8px; }
}

/* The dashboard page's own CSS gives its tab pages display: grid, which outranks the browser's [hidden] rule; the artifact runtime
   hid [hidden] globally, so the shell does too (2026-10-29: the three question tabs only moved the highlight on the host). */
.dash [hidden] { display: none !important; }