:root {
  --bg: #f7f5f0; --fg: #1c1c1a; --muted: #605f59; --line: #d9d6ce; --card: #ffffff;
  --accent: #0b5d4e; --accent-2: #8a5a00; --good: #0b5d4e; --bad: #9b2c2c; --ci: #cfd8d5;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121311; --fg: #ebe9e3; --muted: #a2a19a; --line: #2b2c28; --card: #191a17;
    --accent: #7fd1bf; --accent-2: #e0a84a; --good: #7fd1bf; --bad: #f08a8a; --ci: #3a3d39;
  }
}
:root[data-theme="dark"] {
  --bg: #121311; --fg: #ebe9e3; --muted: #a2a19a; --line: #2b2c28; --card: #191a17;
  --accent: #7fd1bf; --accent-2: #e0a84a; --good: #7fd1bf; --bad: #f08a8a; --ci: #3a3d39;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; }

/* masthead: a title page, not a hero */
.hero { padding: 44px 0 18px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.brand h1 { margin: 0; font: 700 2.1rem/1.1 var(--serif); letter-spacing: .01em; }
.glyph { font: 700 2.6rem/1 "Noto Naskh Arabic", "Amiri", "Scheherazade New", var(--serif); direction: rtl; }
.tag { max-width: 820px; margin: 12px 0 0; font-size: 1.02rem; color: var(--fg); }
.tag em { font-style: italic; }
.pills { margin-top: 10px; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.pill { margin-right: 18px; }
.pill::before { content: none; }

/* navigation */
.tabs { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 0; font: inherit; font-size: .95rem; color: var(--muted); cursor: pointer; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--fg); }
.tab { display: none; } .tab.on { display: block; }

/* controls */
.controls { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 22px 0 6px; font-size: .9rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { background: transparent; border: 0; color: var(--muted); padding: 6px 11px; cursor: pointer; font: inherit; font-size: .88rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--fg); color: var(--bg); }
.chk { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

h2 { font: 700 1.25rem/1.3 var(--serif); margin: 30px 0 10px; }
h2 .sub { font: 400 .88rem/1.4 var(--sans); color: var(--muted); margin-left: 10px; }

/* tables */
.scroll { overflow-x: auto; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
th { position: sticky; top: 0; background: var(--bg); font-weight: 600; cursor: pointer; user-select: none; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
th.sorted { color: var(--fg); }
th.sorted::after { content: " ↓"; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg); }
th.measured, th.declared { color: var(--muted); }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.model { font-weight: 600; }
.kind { display: block; font-size: .72rem; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ci { display: block; font-size: .72rem; color: var(--muted); font-family: var(--mono); }
.bar { display: inline-block; height: 3px; background: var(--ci); vertical-align: middle; margin-left: 8px; position: relative; width: 60px; }
.bar i { position: absolute; top: -3px; width: 2px; height: 9px; background: var(--fg); }
.bar b { position: absolute; top: 0; height: 3px; background: var(--fg); opacity: .35; }
.delta.neg { color: var(--good); } .delta.pos { color: var(--bad); }
.pending { color: var(--muted); font-style: italic; }
.note { color: var(--muted); font-size: .85rem; max-width: 900px; }

/* dataset cards: plain definition rows */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; border-top: 1px solid var(--fg); }
.card { padding: 12px 0; border-bottom: 1px solid var(--line); }
.card h3 { margin: 0 0 4px; font: 600 1rem/1.3 var(--sans); }
.card .kv { font-size: .84rem; color: var(--muted); }
.card .kv b { color: var(--fg); font-family: var(--mono); font-weight: 500; }

/* forms */
.form { display: grid; gap: 14px; max-width: 560px; margin-top: 14px; }
.form label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.form input, .form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); color: var(--fg); }
button.primary { background: var(--fg); color: var(--bg); border: 0; border-radius: 3px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.status { font-family: var(--mono); font-size: .75rem; }
.s-DONE { color: var(--good); } .s-FAILED { color: var(--bad); } .s-RUNNING, .s-NEEDS_REVIEW { color: var(--accent-2); } .s-QUEUED, .s-PENDING, .s-APPROVED { color: var(--muted); }

.method p { max-width: 820px; }
.policy { border-left: 2px solid var(--line); padding-left: 14px; color: var(--muted); }

dialog { border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--fg); max-width: 640px; width: calc(100% - 32px); padding: 20px 22px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h3 { margin: 0 0 10px; font: 700 1.1rem var(--serif); }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .88rem; }
dialog dt { color: var(--muted); } dialog dd { margin: 0; font-family: var(--mono); word-break: break-all; }
dialog form { margin-top: 14px; text-align: right; }
dialog button { background: var(--fg); color: var(--bg); border: 0; border-radius: 3px; padding: 7px 14px; font: inherit; cursor: pointer; }

.foot { margin: 48px auto 36px; color: var(--muted); font-size: .78rem; font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 640px) { .brand h1 { font-size: 1.6rem; } .glyph { font-size: 2rem; } th, td { padding: 6px 8px; } }

.flag { font-family: var(--mono); font-size: .66rem; margin-left: 3px; padding: 0 3px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }
.flag.decl { border-color: var(--accent-2); color: var(--accent-2); }
.flag.anom { border-color: var(--bad); color: var(--bad); }
td.excluded { color: var(--muted); }
.flag.fp { border-color: var(--accent); color: var(--accent); }

.dflt { color: var(--muted); margin-left: 1px; cursor: help; }
.decl-note { border-bottom: 1px dotted var(--muted); cursor: help; }
.kind.nc { color: var(--accent-2); }