/* ============================================================================
   CATHEDRAL — DNA of a Leader design system
   "Chief" edition: the command-center language from the AI Chief of Staff
   dashboard, applied site-wide. Near-black surfaces, one gold accent,
   Playfair Display + Inter, white-alpha text, quiet status colors.
   Loaded LAST on every page so its :root wins the cascade and re-skins
   every variable-driven rule across the site in one place.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Canonical tokens (Chief palette) --- */
  --c-bg:            #0a0a0e;  /* app / page background (near-black) */
  --c-bg-deep:       #07070a;  /* hero & photo wells, deepest layer */
  --c-surface:       #1a1a24;  /* cards, raised panels */
  --c-surface-2:     #22222e;  /* inset rows / list items */
  --c-surface-3:     #2a2a36;  /* heavy chrome / raised controls */
  --c-panel:         #111118;  /* wide panels / sidebars (dark1) */
  --c-ink-dark:      #0a0a0e;  /* dark chips inside light contexts */

  --c-cream:         rgba(255, 255, 255, 0.88);  /* primary text */
  --c-cream-bright:  #ffffff;                     /* headlines, wordmark */
  --c-paper:         #f4f4f6;                     /* rare light wells */

  --c-copper:        #C8A96E;  /* PRIMARY accent — gold */
  --c-copper-soft:   #d4b87a;  /* gold hover/lift */
  --c-copper-deep:   #8a6d3b;  /* gold pressed/darken */
  --c-copper-ink:    #0a0a0e;  /* text on a gold surface */
  --c-evergreen:     #2D5A27;  /* altar green (positive band) */
  --c-evergreen-soft:#6aaa60;  /* readable green text/icons */

  --c-muted:         rgba(255, 255, 255, 0.55);  /* secondary text */
  --c-muted-2:       rgba(255, 255, 255, 0.38);  /* tertiary text */
  --c-muted-3:       rgba(255, 255, 255, 0.30);  /* quietest captions */

  --c-hairline:        rgba(255, 255, 255, 0.08);  /* borders & dividers */
  --c-hairline-strong: rgba(255, 255, 255, 0.16);  /* input borders */
  --c-fill-soft:       rgba(255, 255, 255, 0.04);  /* filled input bg */
  --c-scrim: linear-gradient(180deg, rgba(10,10,14,.55), rgba(10,10,14,.2) 35%, rgba(10,10,14,.85));
  --c-hatch: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 13px);

  /* Status colors (the CoS dot language) */
  --c-status-red:    #e74c3c;
  --c-status-amber:  #e67e22;
  --c-status-green:  #27ae60;
  --c-status-blue:   #2980b9;
  --c-status-purple: #8e44ad;

  /* --- Fonts --- */
  --c-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --c-sans:  "Inter", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --c-mono:  "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ==========================================================================
     Legacy variable remap — every name the existing stylesheets reference,
     pointed at the Chief palette. Loaded last so these win.
     ========================================================================== */

  /* Backgrounds / surfaces */
  --paper:      var(--c-bg);
  --bg:         var(--c-bg);
  --bg-deep:    var(--c-bg-deep);
  --surface:    var(--c-surface);
  --surface-2:  var(--c-surface-2);
  --surface-3:  var(--c-surface-3);
  --sand:       var(--c-surface-2);
  --sky:        var(--c-surface-2);
  --rose:       var(--c-surface-2);
  --ink-dark:   var(--c-ink-dark);

  /* Text */
  --ink:        var(--c-cream);
  --cream:      var(--c-surface);      /* becoming.css uses --cream as a SURFACE, not text */
  --cream-bright: var(--c-cream-bright);
  --muted:      var(--c-muted);
  --muted-2:    var(--c-muted-2);
  --muted-3:    var(--c-muted-3);

  /* Accents — gold family */
  --gold:       var(--c-copper);
  --gold-soft:  var(--c-copper-soft);
  --gold-pale:  var(--c-copper-soft);
  --gold-deep:  var(--c-copper-deep);
  --clay:       var(--c-copper);

  /* Greens — CoS uses real green for positive/done states */
  --sage:       var(--c-evergreen-soft);
  --sage-dark:  var(--c-copper);       /* many CTAs use sage-dark as a bg: keep those gold */
  --sage-100:   var(--c-surface-2);
  --sage-300:   var(--c-muted);
  --sage-500:   var(--c-muted-2);
  --green:      var(--c-status-green);

  /* Forest scale (becoming.css structural backgrounds) */
  --forest-950: var(--c-bg-deep);
  --forest-900: var(--c-surface);
  --forest-800: var(--c-surface-2);
  --forest-700: var(--c-surface-3);

  /* Lines */
  --line:        var(--c-hairline);
  --line-bright: var(--c-hairline-strong);
  --line-strong: var(--c-hairline-strong);

  /* Fonts (legacy names) */
  --serif:      var(--c-serif);
  --sans:       var(--c-sans);
  --tool-serif: var(--c-serif);
  --tool-sans:  var(--c-sans);
  --mono:       var(--c-mono);

  /* Chief radii (soft, not sharp) */
  --radius-xs:   6px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* Shadows — depth comes from surface steps; keep shadows deep and rare */
  --shadow:    0 18px 45px rgba(0, 0, 0, 0.5);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px rgba(200, 169, 110, 0.35), 0 10px 40px rgba(200, 169, 110, 0.10);

  /* Status tokens (styles.css / tool-shared.css consumers) */
  --status-done:        var(--c-status-green);
  --status-done-bg:     rgba(39, 174, 96, 0.16);
  --status-done-ink:    #2ecc71;
  --status-progress:    var(--c-status-amber);
  --status-progress-bg: rgba(230, 126, 34, 0.14);
  --status-progress-ink:#f39c12;
  --status-todo:        var(--c-status-blue);
  --status-todo-bg:     rgba(41, 128, 185, 0.14);
  --status-todo-ink:    #5dade2;
  --status-overdue:     var(--c-status-red);
  --status-overdue-bg:  rgba(192, 57, 43, 0.15);
  --status-overdue-ink: #e74c3c;

  --focus-ring: 0 0 0 3px rgba(200, 169, 110, 0.3);
}

.dna-nav .settings-nav-link {
  margin-left: 8px;
  font-size: .72rem;
  color: var(--c-muted);
}

/* Force dark even when a stylesheet declares a light prefers-color-scheme block.
   Only when the user has NOT explicitly chosen light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* ============================================================================
   LIGHT MODE — "cathedral in daylight"
   Redefining the canonical --c-* tokens re-skins the WHOLE site, because every
   legacy variable above resolves to var(--c-*). Warm ivory paper, white cards,
   deepened antique-gold accent so gold reads on light. Toggle sets
   <html data-theme="light">. See dna-theme-toggle.js.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:            #EBE3D1;  /* warm ivory page */
  --c-bg-deep:       #E0D6C0;  /* deeper wells */
  --c-surface:       #ffffff;  /* cards */
  --c-surface-2:     #FAF6ED;  /* inset rows */
  --c-surface-3:     #F1E9D9;  /* raised chrome */
  --c-panel:         #ffffff;  /* wide panels / sidebars */

  --c-cream:         rgba(38, 33, 24, 0.90);  /* primary text (warm charcoal) */
  --c-cream-bright:  #1c1810;                  /* headlines */
  --c-paper:         #ffffff;

  --c-copper:        #8a6d3b;  /* accent text + gold surfaces (deepened for light) */
  --c-copper-soft:   #a6822f;
  --c-copper-deep:   #6e5530;
  --c-copper-ink:    #ffffff;  /* text on a (now deeper) gold surface */

  --c-muted:         rgba(38, 33, 24, 0.56);
  --c-muted-2:       rgba(38, 33, 24, 0.40);
  --c-muted-3:       rgba(38, 33, 24, 0.30);

  --c-hairline:        rgba(60, 48, 24, 0.16);
  --c-hairline-strong: rgba(60, 48, 24, 0.26);
  --c-fill-soft:       rgba(60, 48, 24, 0.05);
  --c-hatch: repeating-linear-gradient(135deg, rgba(60,48,24,.035) 0 2px, transparent 2px 13px);

  /* Elevation with enough depth to read on a light surface */
  --shadow:    0 18px 45px rgba(40, 30, 12, 0.16);
  --shadow-xs: 0 1px 2px rgba(40, 30, 12, 0.10);
  --shadow-sm: 0 2px 12px rgba(40, 30, 12, 0.13);
  --shadow-md: 0 16px 42px rgba(40, 30, 12, 0.17);
  --shadow-lg: 0 24px 58px rgba(40, 30, 12, 0.20);
  --glow: 0 0 0 1px rgba(138, 109, 59, 0.30), 0 10px 40px rgba(138, 109, 59, 0.08);
  --focus-ring: 0 0 0 3px rgba(138, 109, 59, 0.30);
}

/* --- Global niceties --- */
html { background: var(--c-bg); }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-copper); color: var(--c-copper-ink); }
::-moz-selection { background: var(--c-copper); color: var(--c-copper-ink); }

/* ============================================================================
   CHIEF ACCENTS — small cross-page touches of the command-center language.
   (The two tool pages carry the full shell via chief.css.)
   ========================================================================== */

/* Eyebrows everywhere: Inter caps, gold, CoS tracking (kills leftover mono) */
.eyebrow {
  font-family: var(--c-sans) !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-copper);
}

/* Member app top-nav pills (dna-theme): active = gold tint like .cos-tab */
.app-top nav a.active {
  background: rgba(200, 169, 110, 0.15) !important;
  color: var(--c-copper) !important;
}

/* ============================================================================
   UNIFIED PLATFORM NAV — one .dna-nav used on every page: same items, same
   order, same styling. Context-qualified selectors so it wins inside .app-top,
   .cos-header and .platform-header regardless of their older nav rules.
   ========================================================================== */
.dna-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.dna-nav a,
.app-top .dna-nav a,
.cos-header .dna-nav a,
.platform-header .dna-nav a {
  padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--c-muted); font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.dna-nav a:hover,
.app-top .dna-nav a:hover,
.cos-header .dna-nav a:hover,
.platform-header .dna-nav a:hover { color: var(--c-cream); background: var(--c-surface-2); }
.dna-nav a.active,
.app-top .dna-nav a.active,
.cos-header .dna-nav a.active,
.platform-header .dna-nav a.active { color: var(--c-copper); background: rgba(200, 169, 110, 0.15); }
@media (max-width: 900px) {
  .dna-nav { overflow-x: auto; max-width: 60vw; scrollbar-width: none; }
  .dna-nav::-webkit-scrollbar { display: none; }
}

/* Tools dropdown inside the platform nav — click to open, same on laptop & phone.
   Uses a native <details> so it needs no JS and is keyboard-accessible. */
.dna-nav-tools { position: relative; display: inline-flex; }
.dna-nav-tools > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--c-muted); font-size: 0.88rem; font-weight: 600; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.dna-nav-tools > summary::-webkit-details-marker { display: none; }
.dna-nav-tools > summary::after { content: "\25BE"; font-size: 0.7em; opacity: 0.75; }
.dna-nav-tools > summary:hover { color: var(--c-cream); background: var(--c-surface-2); }
.dna-nav-tools > summary.active,
.dna-nav-tools[open] > summary { color: var(--c-copper); background: rgba(200, 169, 110, 0.15); }
.dna-nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
  min-width: 224px; display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface); border: 1px solid var(--c-hairline);
  border-radius: 12px; padding: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.dna-nav-menu a {
  padding: 11px 12px; border-radius: 8px; color: var(--c-cream);
  font-size: 0.9rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.dna-nav-menu a:hover { color: var(--c-cream-bright); background: var(--c-surface-2); }
.dna-nav-menu a.active { color: var(--c-copper); background: rgba(200, 169, 110, 0.15); }
@media (max-width: 900px) {
  /* The nav scrolls horizontally here, which would clip an absolute panel —
     anchor the menu to the viewport instead so it can't be cut off. */
  .dna-nav-menu { position: fixed; top: 62px; left: 12px; right: 12px; min-width: 0; }
}

/* Pathway: colored status dots on the progress track cards + focus cards */
.track-card, .focus-card { position: relative; }
.track-card::before, .focus-card::before {
  content: "";
  position: absolute; top: 18px; right: 18px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot, var(--c-copper));
}
.track-card:nth-of-type(3n + 1), .focus-card:nth-of-type(4n + 1) { --dot: #C8A96E; }
.track-card:nth-of-type(3n + 2), .focus-card:nth-of-type(4n + 2) { --dot: #27ae60; }
.track-card:nth-of-type(3n + 3), .focus-card:nth-of-type(4n + 3) { --dot: #e67e22; }
.focus-card:nth-of-type(4n + 4) { --dot: #2980b9; }

/* Landing hero CTAs: gold primary reads like btn-gold */
.button-gold { border-radius: 8px !important; font-weight: 700; }

/* Disabled controls actually look disabled (audit #12) */
button:disabled { opacity: 0.45; cursor: not-allowed; }