/*
 * Swift Institute dashboard chrome — matched to DocC theme-settings.json.
 * Colors mirror Swift Institute.docc/theme-settings.json and Apple's DocC
 * defaults so the dashboard reads as the same site as /documentation/.
 */

:root {
  /* Apple / DocC font stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* Shared tokens (DocC uses 8px base / 6px for code) */
  --radius-base: 8px;
  --radius-code: 6px;

  /* Light mode palette — matches Swift Institute.docc/theme-settings.json */
  --c-bg: #ffffff;
  --c-bg-intro: #fbf8f6;           /* documentation-intro-fill light */
  --c-bg-panel: #f9f6f4;           /* code-background light */
  --c-bg-inline: #f5f0ed;          /* inline-code-background light */
  --c-bg-chip: #f5f0ed;
  --c-fg: #1d1d1f;                  /* documentation-intro-title light */
  --c-fg-muted: #6e6e73;
  --c-border: #e5e2e0;
  --c-border-strong: #d0cbc8;

  --c-accent: #f05138;              /* Swift-institute orange (fill-blue / button) */
  --c-accent-hover: #d84727;        /* button-background-hover */
  --c-accent-active: #c03d20;
  --c-accent-soft: rgba(240, 81, 56, 0.12);  /* fill-orange-secondary */
  --c-accent-focus: rgba(240, 81, 56, 0.6);
  --c-link: #c93a25;                /* link light */
  --c-eyebrow: #d84727;
  --c-capstone: #d4a017;            /* four-layer pyramid gold capstone */

  /* Status palette — tuned to read native alongside swift-institute-orange */
  --s-positive-fg: #0f6b3a;
  --s-positive-bg: #e6f2ea;
  --s-negative-fg: #a42318;
  --s-negative-bg: #fbe9e6;
  --s-warning-fg: #8a5a00;
  --s-warning-bg: #fbefd7;
  --s-info-fg: #8f3820;
  --s-info-bg: rgba(240, 81, 56, 0.14);
  --s-neutral-fg: #55514e;
  --s-neutral-bg: #ecebe9;
  --s-muted-fg: #807b78;
  --s-muted-bg: #f2eeec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #161514;
    --c-bg-intro: #2c2523;          /* documentation-intro-fill dark */
    --c-bg-panel: #2c2926;          /* code-background dark */
    --c-bg-inline: #3a3532;         /* inline-code-background dark */
    --c-bg-chip: #2c2926;
    --c-fg: #f5f5f7;
    --c-fg-muted: #a1a1a6;
    --c-border: #3a3532;
    --c-border-strong: #4a4542;

    --c-accent: #ff6e56;            /* dark-mode accent across theme-settings */
    --c-accent-hover: #ff8770;
    --c-accent-active: #e05540;
    --c-accent-soft: rgba(255, 110, 86, 0.16);
    --c-accent-focus: rgba(255, 110, 86, 0.6);
    --c-link: #ff6e56;
    --c-eyebrow: #ff6e56;
    --c-capstone: #f2c94c;           /* dark-mode gold */

    --s-positive-fg: #5ad28b;
    --s-positive-bg: rgba(90, 210, 139, 0.15);
    --s-negative-fg: #ff8a7f;
    --s-negative-bg: rgba(255, 138, 127, 0.16);
    --s-warning-fg: #f3c16a;
    --s-warning-bg: rgba(243, 193, 106, 0.16);
    --s-info-fg: #ff9680;
    --s-info-bg: rgba(255, 110, 86, 0.18);
    --s-neutral-fg: #c8c5c2;
    --s-neutral-bg: #3a3532;
    --s-muted-fg: #a8a5a2;
    --s-muted-bg: #2c2926;
  }
}

/* User-forced color scheme via body[data-color-scheme] (matches DocC's attr). */
body[data-color-scheme="dark"] {
  color-scheme: dark;
  --c-bg: #161514;
  --c-bg-intro: #2c2523;
  --c-bg-panel: #2c2926;
  --c-bg-inline: #3a3532;
  --c-bg-chip: #2c2926;
  --c-fg: #f5f5f7;
  --c-fg-muted: #a1a1a6;
  --c-border: #3a3532;
  --c-border-strong: #4a4542;
  --c-accent: #ff6e56;
  --c-accent-hover: #ff8770;
  --c-accent-active: #e05540;
  --c-accent-soft: rgba(255, 110, 86, 0.16);
  --c-accent-focus: rgba(255, 110, 86, 0.6);
  --c-link: #ff6e56;
  --c-eyebrow: #ff6e56;
  --c-capstone: #f2c94c;
  --s-positive-fg: #5ad28b;
  --s-positive-bg: rgba(90, 210, 139, 0.15);
  --s-negative-fg: #ff8a7f;
  --s-negative-bg: rgba(255, 138, 127, 0.16);
  --s-warning-fg: #f3c16a;
  --s-warning-bg: rgba(243, 193, 106, 0.16);
  --s-info-fg: #ff9680;
  --s-info-bg: rgba(255, 110, 86, 0.18);
  --s-neutral-fg: #c8c5c2;
  --s-neutral-bg: #3a3532;
  --s-muted-fg: #a8a5a2;
  --s-muted-bg: #2c2926;
}

body[data-color-scheme="light"] {
  color-scheme: light;
  --c-bg: #ffffff;
  --c-bg-intro: #fbf8f6;
  --c-bg-panel: #f9f6f4;
  --c-bg-inline: #f5f0ed;
  --c-bg-chip: #f5f0ed;
  --c-fg: #1d1d1f;
  --c-fg-muted: #6e6e73;
  --c-border: #e5e2e0;
  --c-border-strong: #d0cbc8;
  --c-accent: #f05138;
  --c-accent-hover: #d84727;
  --c-accent-active: #c03d20;
  --c-accent-soft: rgba(240, 81, 56, 0.12);
  --c-accent-focus: rgba(240, 81, 56, 0.6);
  --c-link: #c93a25;
  --c-eyebrow: #d84727;
  --c-capstone: #d4a017;
  --s-positive-fg: #0f6b3a;
  --s-positive-bg: #e6f2ea;
  --s-negative-fg: #a42318;
  --s-negative-bg: #fbe9e6;
  --s-warning-fg: #8a5a00;
  --s-warning-bg: #fbefd7;
  --s-info-fg: #8f3820;
  --s-info-bg: rgba(240, 81, 56, 0.14);
  --s-neutral-fg: #55514e;
  --s-neutral-bg: #ecebe9;
  --s-muted-fg: #807b78;
  --s-muted-bg: #f2eeec;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--c-bg-inline);
  padding: 1px 6px;
  border-radius: var(--radius-code);
}

/* ---------- Site header (matched to DocC nav) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 22px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}

.site-title:hover { text-decoration: none; color: var(--c-fg); }

.site-title-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
  overflow: visible;
}

.pyramid-tier {
  fill: var(--c-accent);
}

/* Opacity ramp matches Swift Institute.docc/Resources/card-layers.svg —
   base most prominent, tiers fade toward the capstone. */
.pyramid-tier-1 { opacity: 1; }
.pyramid-tier-2 { opacity: 0.8; }
.pyramid-tier-3 { opacity: 0.6; }

.pyramid-capstone {
  fill: var(--c-capstone);
}

.site-header nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}

.nav-link {
  font-size: 14px;
  color: var(--c-fg-muted);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--c-accent);
  text-decoration: none;
}

.nav-link-active {
  color: var(--c-fg);
  border-bottom-color: var(--c-accent);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  color: var(--c-fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease;
}

.theme-toggle:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.theme-toggle svg { width: 16px; height: 16px; }

/* ---------- Main ---------- */

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 22px 60px;
}

/* Intro band mirroring DocC's documentation-intro */

.intro {
  background: var(--c-bg-intro);
  border-radius: calc(var(--radius-base) * 1.5);
  padding: 28px 32px 24px;
  margin: 0 0 24px;
  border: 1px solid var(--c-border);
}

.intro .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-eyebrow);
  margin: 0 0 8px;
}

.intro h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  font-size: 32px;
  color: var(--c-fg);
}

.intro p.lead {
  margin: 0;
  color: var(--c-fg-muted);
  font-size: 15px;
  max-width: 72ch;
  line-height: 1.55;
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 22px;
  padding: 0 2px;
}

.tab {
  background: none;
  border: none;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  letter-spacing: -0.005em;
}

.tab:hover { color: var(--c-fg); }

.tab-active {
  color: var(--c-fg);
  border-bottom-color: var(--c-accent);
}

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--c-bg-chip);
  border-radius: var(--radius-base);
  border: 1px solid var(--c-border);
}

#search {
  flex: 1 1 280px;
  min-width: 280px;
  padding: 9px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-base);
  font-size: 14px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-fg);
}

#search::placeholder { color: var(--c-fg-muted); }

#search:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  color: var(--c-fg-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

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

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--c-bg);
  color: var(--c-fg);
  border: 1px solid var(--c-border-strong);
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  white-space: nowrap;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.pill:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.pill-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.pill-active:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: #fff;
}

.pill-count {
  opacity: 0.75;
  margin-left: 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.clear-btn {
  background: none;
  border: none;
  color: var(--c-link);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 8px;
}

.clear-btn:hover { text-decoration: underline; }

/* ---------- Table ---------- */

.corpus-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 4px 0 14px;
}

.corpus-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 24px;
}

.count {
  margin: 0;
  color: var(--c-fg-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-base);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-fg-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
  user-select: none;
  background: var(--c-bg);
  position: sticky;
  top: 52px; /* matches site-header height */
  z-index: 5;
}

thead th.sortable {
  cursor: pointer;
  transition: color 120ms ease;
}

thead th.sortable::after {
  content: attr(data-sort-hint);
}

thead th.sortable:hover {
  color: var(--c-accent);
}

thead th .sort-arrow {
  opacity: 0.55;
  margin-left: 4px;
  font-size: 11px;
  display: inline-block;
  transition: opacity 120ms ease, color 120ms ease, transform 120ms ease;
}

thead th.sortable:hover .sort-arrow {
  opacity: 0.9;
  color: var(--c-accent);
}

thead th.sorted {
  color: var(--c-fg);
}

thead th.sorted .sort-arrow {
  opacity: 1;
  color: var(--c-accent);
}

tbody tr {
  border-bottom: 1px solid var(--c-border);
  transition: background-color 120ms ease;
}

tbody tr:hover { background: var(--c-bg-intro); }

tbody td {
  padding: 14px 12px;
  font-size: 14px;
  vertical-align: top;
  line-height: 1.5;
}

tbody td .title {
  font-weight: 500;
}

tbody td .title a {
  color: var(--c-fg);
}

tbody td .title a:hover { color: var(--c-link); text-decoration: none; }

tbody td .title code {
  font-size: 13px;
  background: transparent;
  padding: 0;
}

tbody td .title a:hover code { color: var(--c-link); }

tbody td .topic {
  color: var(--c-fg-muted);
  font-size: 13px;
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

tbody tr.expanded td .topic {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

tbody td .expand-toggle {
  display: inline-block;
  font-size: 12px;
  color: var(--c-link);
  cursor: pointer;
  margin-top: 4px;
  user-select: none;
}

tbody td .expand-toggle:hover { text-decoration: underline; }

/* ---------- Status chips ---------- */

.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-code);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.status-CONFIRMED,
.status-FIXED,
.status-COMPLETE,
.status-IMPLEMENTED,
.status-DECISION,
.status-CONVERGED {
  color: var(--s-positive-fg);
  background: var(--s-positive-bg);
}

.status-REFUTED {
  color: var(--s-negative-fg);
  background: var(--s-negative-bg);
}

.status-PARTIAL,
.status-IN_PROGRESS,
.status-INVESTIGATION,
.status-ANALYSIS,
.status-DRAFT,
.status-ACTIVE,
.status-INVENTORY {
  color: var(--s-warning-fg);
  background: var(--s-warning-bg);
}

.status-RECOMMENDATION {
  color: var(--s-info-fg);
  background: var(--s-info-bg);
}

.status-DEFERRED,
.status-PENDING {
  color: var(--s-muted-fg);
  background: var(--s-muted-bg);
}

.status-SUPERSEDED,
.status-MOVED,
.status-REFERENCE,
.status-TRANSCRIPT {
  color: var(--s-muted-fg);
  background: var(--s-muted-bg);
}

.status-CONSOLIDATED {
  color: var(--s-neutral-fg);
  background: var(--s-neutral-bg);
}

.status-detail {
  color: var(--c-fg-muted);
  font-size: 11px;
  margin-left: 6px;
  font-style: italic;
}

.status-detail code {
  font-style: normal;
  background: transparent;
  padding: 0;
}

/* ---------- Tier chips ---------- */

.tier-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--c-bg-chip);
  color: var(--c-fg);
  white-space: nowrap;
  border: 1px solid var(--c-border);
}

.tier-1 { background: var(--c-bg-chip); }
.tier-2 { background: var(--c-accent-soft); color: var(--c-accent); border-color: transparent; }
.tier-3 { background: var(--s-warning-bg); color: var(--s-warning-fg); border-color: transparent; }

/* ---------- Category chips (experiments) ---------- */

.cat-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-code);
  font-size: 11px;
  font-weight: 500;
  background: var(--c-bg-chip);
  color: var(--c-fg-muted);
  margin-top: 4px;
}

/* ---------- Empty / footer ---------- */

.empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--c-fg-muted);
}

footer {
  max-width: 1400px;
  margin: 56px auto 24px;
  padding: 20px 22px 0;
  color: var(--c-fg-muted);
  font-size: 13px;
  border-top: 1px solid var(--c-border);
}

footer code {
  font-size: 12px;
}

/* ---------- Column widths (corpus-specific) ---------- */

table.research colgroup col:nth-child(1) { width: 30%; }
table.research colgroup col:nth-child(2) { width: 46%; }
table.research colgroup col:nth-child(3) { width: 8%; }
table.research colgroup col:nth-child(4) { width: 16%; }

table.experiments colgroup col:nth-child(1) { width: 24%; }
table.experiments colgroup col:nth-child(2) { width: 42%; }
table.experiments colgroup col:nth-child(3) { width: 11%; }
table.experiments colgroup col:nth-child(4) { width: 11%; }
table.experiments colgroup col:nth-child(5) { width: 12%; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .site-header-inner { padding: 0 14px; height: 48px; }
  .site-header nav { gap: 14px; }
  .nav-link { font-size: 13px; }
  .site-title-mark { width: 22px; height: 22px; }
  .site-title { font-size: 15px; }
  main { padding: 16px 14px 40px; }
  .intro { padding: 20px 20px 18px; }
  .intro h1 { font-size: 24px; }
  .controls { padding: 12px; }
  #search { flex-basis: 100%; min-width: 0; }
  thead th, tbody td { padding: 10px 8px; font-size: 13px; }
  thead th { top: 48px; }
  /* Always surface sort arrows on touch — hover state is unavailable. */
  thead th .sort-arrow { opacity: 0.75; }
  /* Hint the table can scroll horizontally */
  .table-scroll {
    margin: 0 -14px;
    padding: 0 14px;
  }
}