/* ET Phase 1 — execution brief add-ons (extends report.css) */
@import url("report.css");

/* ============================================================
   ET CI BRIDGE — canonical design-system tokens → site var names
   ------------------------------------------------------------
   Imports the LOCKED ET design-system tokens (palette, type,
   spacing, fonts) and remaps them onto the var names the microsite
   HTML + report.css already consume (--brand, --paper-*, --ink-*,
   --rule-*, --font-sans, …). No brand value is hardcoded here:
   every site token resolves to a design-system token, so the CI is
   single-sourced. Supersedes the old temporary T1-green→brown hack
   + the Playfair/Trirong font stand-ins.

   --font-display / --font-thai / --font-body keep the SAME names in
   the design-system, so the @import below already sets them — they
   are intentionally NOT redefined here (a self-ref would break them).

   Source of truth: _ds/tokens/*.css (palette LOCKED).
   ============================================================ */
@import url("_ds/tokens/colors.css");
@import url("_ds/tokens/typography.css");   /* defines --font-display/-thai/-body + loads Bodoni Moda + Prompt (Didot/PK-Phrae fallbacks) */
@import url("_ds/tokens/spacing.css");
@import url("_ds/tokens/fonts.css");        /* real-font @font-face (disabled pending license) */

:root {
  /* ── Brand accent ─────────────────────────────────────────
     --brand was the T1 green; now the ET PRIMARY brown.       */
  --brand:        var(--et-brown);          /* #A26939 — CTAs, links, rules */
  --brand-deep:   var(--et-brown-press);    /* #774B26 — chips / headings / verdict */
  --brand-on:     var(--text-on-accent);    /* cream — text on brown */
  --brand-soft:   var(--et-brown-soft);     /* tinted fills */
  --brand-edge:   var(--et-brown-edge);     /* tinted borders */

  /* Legacy T1 green-scale names still referenced inside report.css
     (chips / table .gm / verdict). Re-point at ET brown so no green
     value survives anywhere. */
  --t1-green-400: var(--et-brown);
  --t1-green-700: var(--et-brown-press);
  --t1-green-800: var(--et-brown-press);

  /* ── Paper / surfaces ─────────────────────────────────────
     Warm earth-tone surfaces from the ET semantic scale.      */
  --paper-0: var(--surface-card);     /* #FFFFFF — card insets */
  --paper-1: var(--surface-page);     /* warm paper — page bedrock / quote bg */
  --paper-2: var(--surface-soft);     /* cream-soft — raised band */
  --paper-3: var(--surface-band);     /* cream — contrast band (body bg) */

  /* ── Ink / text ───────────────────────────────────────────  */
  --ink-1: var(--text-primary);       /* black — primary ink (+ dark cover bg) */
  --ink-2: var(--text-secondary);     /* secondary */
  --ink-3: var(--text-tertiary);      /* tertiary / labels */
  --ink-4: var(--text-disabled);      /* disabled / faint */

  /* ── Lines / rules ────────────────────────────────────────  */
  --rule-1: var(--line-hairline);     /* default hairline */
  --rule-2: var(--line-strong);       /* stronger */
  --rule-3: var(--line-accent);       /* focus / active = brown */

  /* ── Type ─────────────────────────────────────────────────
     --font-display / --font-thai / --font-body are already set by
     tokens/typography.css (same names). Only add the site-specific
     aliases the pages use that the design-system names differently. */
  --font-sans: var(--font-body);      /* PK Phrae / Prompt for Latin body */
  /* --font-mono: DATA GAP — ET CI defines no monospace face. The site
     uses mono for meta/labels/codes (utilitarian, non-brand). Keep a
     neutral system mono until CD specifies one. */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ── Dark-console legacy tokens (used only by the unused .t1-*
     semantic classes in colors_and_type.css). Remap onto ET light
     tokens so no green/dark-console value can leak if those classes
     are ever applied. */
  --bg-0: var(--surface-page);
  --bg-1: var(--surface-card);
  --bg-2: var(--surface-soft);
  --bg-3: var(--surface-band);
  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-tertiary);
  --fg-4: var(--text-disabled);
  --line-1: var(--line-hairline);
  --line-2: var(--line-strong);
  --line-3: var(--line-accent);

  /* default role accent = brand brown (overridden per data-role below) */
  --accent: var(--brand); --accent-deep: var(--brand-deep);
}

/* ---- audience banner (top of each role brief) ---- */
.audience {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 30px; padding: 18px 22px;
  border: 1px solid var(--rule-1); border-left: 5px solid var(--accent);
  border-radius: 8px; background: var(--paper-1);
  break-inside: avoid;
}
/* official gold clover mark in the banner (gold-on-light tile) */
.audience .brandmark {
  flex: none; width: 46px; height: 46px; display: block;
  border-radius: 8px;
}
.audience .ic {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; color: var(--accent); line-height: 1;
}
.audience .tx h2 {
  font-family: var(--font-thai); font-weight: 700; font-size: 19px; margin: 0 0 2px;
}
.audience .tx .who {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.audience .tx p { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 0; line-height: 1.55; }

/* ---- cover wordmark → official gold clover lockup (dark cover) ---- */
.cover-brand { display: flex; flex-direction: column; gap: 6px; }
.cover-brand img {
  height: 52px; width: auto; display: block;
}
.cover-brand .tagline {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--et-honey);   /* amber gold — on-CI, reads on dark cover */
}

/* tweak the brand top-bar + eyebrow to use accent */
.page.brief::before { background: linear-gradient(to right, var(--accent), transparent 65%); }
.brief .eyebrow::before { background: var(--accent); }
.brief .sec-no, .brief .exec-card .n, .brief .cover-scope .n { color: var(--accent); }

/* ---- RACI / responsibility table ---- */
.raci { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 14px 0 8px; }
.raci th {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 0 10px 9px 0; border-bottom: 1px solid var(--rule-2);
}
.raci th.c, .raci td.c { text-align: center; width: 72px; }
.raci td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule-1); vertical-align: top; }
.raci td.task { color: var(--ink-1); }
.raci td.task b { font-weight: 600; }
.raci .yes { color: var(--brand-deep); font-weight: 700; }
.raci .no  { color: var(--ink-4); }
.raci .ceo { color: var(--warn-fg); font-weight: 700; }
.raci tr { break-inside: avoid; }

/* ---- checklist (accounts / credentials CEO must provide) ---- */
ul.check { list-style: none; padding: 0; margin: 10px 0 14px; }
ul.check li {
  position: relative; padding: 9px 0 9px 30px;
  border-bottom: 1px dashed var(--rule-1); font-size: 13px; line-height: 1.6;
}
ul.check li::before {
  content: "▢"; position: absolute; left: 0; top: 7px;
  font-size: 15px; color: var(--accent-deep);
}
ul.check li b { font-weight: 600; }
ul.check li .cost { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* ---- DATA GAP callout ---- */
.gap {
  margin: 14px 0; padding: 12px 16px 12px 40px; position: relative;
  border: 1px dashed var(--warn-fg); border-radius: 8px;
  background: var(--warn-bg);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-1);
  break-inside: avoid;
}
.gap::before {
  content: "?"; position: absolute; left: 14px; top: 11px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--warn-fg); line-height: 1;
}
.gap b { color: var(--warn-fg); }
.gap .lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn-fg);
  display: block; margin-bottom: 2px;
}

/* ---- simple stack diagram (boxes) ---- */
.stack { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.stack .layer {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--rule-1); border-radius: 6px;
  background: var(--paper-0); break-inside: avoid;
}
.stack .layer .lk {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep);
}
.stack .layer .lv { font-size: 13px; color: var(--ink-1); line-height: 1.5; }
.stack .layer .lv b { font-weight: 600; }
.stack .layer.core { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent); }

/* ---- budget allocation bar ---- */
.budget { margin: 14px 0; }
.budget .row { display: grid; grid-template-columns: 150px 1fr 92px; gap: 12px; align-items: center; padding: 7px 0; font-size: 12.5px; }
.budget .row .nm { color: var(--ink-1); }
.budget .row .bar { height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.budget .row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.budget .row .amt { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-1); font-variant-numeric: tabular-nums; }

/* ---- hub / index cards ---- */
.hub { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0; }
@media (max-width:720px){ .hub { grid-template-columns: 1fr; } }
.hub a.card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule-1); border-top: 4px solid var(--ca);
  border-radius: 8px; padding: 20px; background: var(--paper-0);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.hub a.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.hub a.card .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ca); }
.hub a.card h3 { font-family: var(--font-thai); font-weight: 700; font-size: 17px; margin: 6px 0 6px; }
.hub a.card p { font-size: 12.5px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.6; }
.hub a.card .go { font-family: var(--font-mono); font-size: 11px; color: var(--ca); font-weight: 600; }

/* role accent palette — warm tones within the ET family, contrast-safe
   (brown / honey-amber / terracotta). --ca on hub cards mirrors these. */
[data-role="dev"]       { --accent: var(--et-brown);  --accent-deep: var(--et-brown-press); }
[data-role="ads"]       { --accent: #BE7A2E;          --accent-deep: #8F5A1C; }
[data-role="marketing"] { --accent: #B16A45;          --accent-deep: #8A4F30; }