/* ══════════════════════════════════════════════════════════════════════════
   ATG Strategy — Premium redesign layer  (v9, 2026-09-07)
   Loads AFTER v8; elevates the stock-Material look into an executive
   strategy-dashboard for the Living Roadmap. Brandon: "complete authority."
   Design: slate structure · warm copper accent · Space Grotesk display ·
   crisp 🟢🟡🔴🎯 status badges · dashboard-grade tables.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- palette tokens ---------- */
:root {
  --atg-ink:      #0f172a;   /* slate-900 */
  --atg-ink-2:    #334155;   /* slate-700 */
  --atg-muted:    #64748b;   /* slate-500 */
  --atg-line:     #e2e8f0;   /* slate-200 */
  --atg-line-2:   #eef2f6;
  --atg-bg:       #ffffff;
  --atg-bg-soft:  #f8fafc;   /* slate-50 */
  --atg-panel:    #f1f5f9;   /* slate-100 */
  --atg-brand:    #1e293b;   /* slate-800 — header/structure */
  --atg-accent:   #b45309;   /* copper — interactive */
  --atg-accent-d: #92400e;
  --atg-accent-soft: rgba(180,83,9,.08);
  /* status */
  --atg-ok:   #059669;  --atg-ok-bg:   #ecfdf5;  --atg-ok-bd:   #a7f3d0;
  --atg-warn: #d97706;  --atg-warn-bg: #fffbeb;  --atg-warn-bd: #fcd34d;
  --atg-gap:  #dc2626;  --atg-gap-bg:  #fef2f2;  --atg-gap-bd:  #fecaca;
  --atg-tgt:  #4f46e5;  --atg-tgt-bg:  #eef2ff;  --atg-tgt-bd:  #c7d2fe;

  /* override Material interactive to copper */
  --md-accent-fg-color: var(--atg-accent);
  --md-typeset-a-color: var(--atg-accent);
  --md-primary-fg-color: var(--atg-brand);
}

/* ---------- global type ---------- */
.md-typeset { font-feature-settings: "kern","liga","cv05","ss01"; color: var(--atg-ink-2); }
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-nav__title, .md-header__title {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  color: var(--atg-ink);
  letter-spacing: -.015em;
}
.md-typeset h1 { font-weight: 700; font-size: 2rem; margin-bottom: .3em; }
.md-typeset h2 {
  font-weight: 600; font-size: 1.45rem; margin-top: 2.4em;
  padding-bottom: .35em; border-bottom: 2px solid var(--atg-line);
}
.md-typeset h3 { font-weight: 600; font-size: 1.12rem; color: var(--atg-ink); }

/* ---------- header: premium slate bar ---------- */
.md-header {
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
  color: #f8fafc; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 14px rgba(15,23,42,.12);
}
.md-header__title { font-weight: 600; }
.md-tabs {
  background: transparent; color: #cbd5e1;
  border-top: 1px solid rgba(255,255,255,.08);
}
.md-tabs__link { opacity: .82; font-weight: 500; font-size: .78rem; letter-spacing: .01em; }
.md-tabs__link:hover, .md-tabs__link--active { opacity: 1; color: #fff; }
.md-tabs__item--active .md-tabs__link { border-bottom: 2px solid var(--atg-accent); }
.md-search__form { background: rgba(255,255,255,.10); border-radius: 8px; }
.md-search__form:hover { background: rgba(255,255,255,.16); }

/* ---------- left nav ---------- */
.md-nav { font-size: .74rem; }
.md-nav__item .md-nav__link--active,
.md-nav__link--active { color: var(--atg-accent); font-weight: 600; }
.md-nav__link:hover { color: var(--atg-accent-d); }
.md-nav__item--section > .md-nav__link {
  color: var(--atg-muted); text-transform: uppercase; letter-spacing: .08em;
  font-size: .66rem; font-weight: 700;
}

/* ---------- links ---------- */
.md-typeset a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.md-typeset a:hover { border-bottom-color: var(--atg-accent); }

/* ---------- page-meta strip (the <dl class="page-meta">) ---------- */
.md-typeset dl.page-meta {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem;
  background: var(--atg-bg-soft); border: 1px solid var(--atg-line);
  border-left: 3px solid var(--atg-accent) !important;
  border-radius: 10px; padding: .8rem 1.1rem; margin: 0 0 1.6rem;
  font-size: .8rem;
}
.md-typeset dl.page-meta dt { color: var(--atg-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 700; align-self: center; }
.md-typeset dl.page-meta dt::before { content: none !important; }
.md-typeset dl.page-meta dd { color: var(--atg-ink); margin: 0; font-weight: 500; }

/* ---------- status marker admonitions (🟢 confirmed / 🟡 assumption / 🔴 gap / 🎯 target) ---------- */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--atg-line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  font-size: .84rem;
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; letter-spacing: -.01em;
}
.md-typeset .confirmed, .md-typeset .success { border-left: 4px solid var(--atg-ok); }
.md-typeset .confirmed > .admonition-title, .md-typeset .success > .admonition-title { background: var(--atg-ok-bg); color: #065f46; }
.md-typeset .assumption, .md-typeset .warning { border-left: 4px solid var(--atg-warn); }
.md-typeset .assumption > .admonition-title, .md-typeset .warning > .admonition-title { background: var(--atg-warn-bg); color: #92400e; }
.md-typeset .gap, .md-typeset .danger, .md-typeset .failure { border-left: 4px solid var(--atg-gap); }
.md-typeset .gap > .admonition-title, .md-typeset .danger > .admonition-title { background: var(--atg-gap-bg); color: #991b1b; }
.md-typeset .target, .md-typeset .abstract, .md-typeset .tip { border-left: 4px solid var(--atg-tgt); }
.md-typeset .target > .admonition-title, .md-typeset .abstract > .admonition-title { background: var(--atg-tgt-bg); color: #3730a3; }
.md-typeset .note { border-left: 4px solid var(--atg-muted); }

/* ---------- dashboard-grade tables (the scorecards) ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--atg-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); font-size: .82rem;
}
.md-typeset table:not([class]) th {
  background: var(--atg-brand); color: #f1f5f9;
  font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: .68rem;
  border: none; padding: .7rem .9rem;
}
.md-typeset table:not([class]) td { border: none; border-top: 1px solid var(--atg-line-2); padding: .6rem .9rem; }
.md-typeset table:not([class]) tr:nth-child(even) td { background: var(--atg-bg-soft); }
.md-typeset table:not([class]) tr:hover td { background: var(--atg-accent-soft); }
/* numeric feel for KPI cells */
.md-typeset table:not([class]) td:nth-child(n+2) { font-variant-numeric: tabular-nums; }

/* ---------- cards ---------- */
.md-typeset .grid.cards > :is(ul,ol) > li,
.md-typeset .grid > .card,
.md-typeset .grid.cards > .admonition {
  border: 1px solid var(--atg-line); border-radius: 14px; padding: 1rem 1.1rem;
  background: var(--atg-bg); box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.md-typeset .grid.cards > :is(ul,ol) > li:hover,
.md-typeset .grid > .card:hover {
  box-shadow: 0 10px 30px rgba(15,23,42,.10); transform: translateY(-2px);
  border-color: #cbd5e1;
}

/* ---------- content width + rhythm ---------- */
.md-grid { max-width: 66rem; }
.md-typeset { line-height: 1.68; }
.md-content__inner { margin-top: 1.2rem; }

/* ---------- code / inline ---------- */
.md-typeset code { background: var(--atg-panel); border: 1px solid var(--atg-line); border-radius: 6px; padding: .1em .35em; font-size: .85em; color: #b91c1c; }

/* ---------- blockquote ---------- */
.md-typeset blockquote { border-left: 3px solid var(--atg-accent); background: var(--atg-bg-soft); border-radius: 0 8px 8px 0; color: var(--atg-ink-2); }

/* ---------- footer ---------- */
.md-footer { background: var(--atg-brand); }
.md-footer-meta { background: #0f172a; }

/* ══════════════════════════════ DARK MODE ══════════════════════════════ */
[data-md-color-scheme="slate"] {
  --atg-ink:#e2e8f0; --atg-ink-2:#cbd5e1; --atg-muted:#94a3b8;
  --atg-line:#334155; --atg-line-2:#293548; --atg-bg:#0f172a; --atg-bg-soft:#111c30; --atg-panel:#1e293b;
  --atg-brand:#0b1220; --atg-accent:#fb923c; --atg-accent-d:#f97316; --atg-accent-soft:rgba(251,146,60,.10);
  --atg-ok-bg:#052e2b; --atg-warn-bg:#3a2a05; --atg-gap-bg:#3b0d0d; --atg-tgt-bg:#1e1b4b;
  --md-typeset-a-color: var(--atg-accent);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background:#0b1220; }
[data-md-color-scheme="slate"] .md-header { background: linear-gradient(180deg,#0b1220,#0a0f1c); }