/* ET Phase 1 — execution brief add-ons (extends report.css) */
@import url("report.css");
/* ET brand fonts (web stand-ins for Didot + a Thai Didone) — real Didot/PK Phrae from CD assets later */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,800;1,900&family=Trirong:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ============================================================
   ET CI OVERRIDE (temporary — placeholder logo pending CD)
   Remap the T1 green scale → ET brown, swap display/Thai type
   to the Didot mood, warm the paper. Logo stays a text wordmark
   until CD returns the new ET mark.
   ============================================================ */
:root {
  /* brown scale replaces green; --brand / --brand-deep auto-follow */
  --t1-green-50:  #f6efe6;
  --t1-green-100: #ecdcc6;
  --t1-green-200: #d8b78c;
  --t1-green-300: #c08f57;
  --t1-green-400: #a26939;   /* ET primary — becomes --brand */
  --t1-green-500: #8f5b30;
  --t1-green-600: #7d4f29;
  --t1-green-700: #6e4524;   /* deep accent text (chips/gm/verdict) */
  --t1-green-800: #50301a;
  --t1-green-900: #341e0f;
  --brand-on: #ffffff;       /* white reads better on brown */

  /* type — Didot mood */
  --font-display: "Playfair Display", "Trirong", Georgia, serif;
  --font-thai:    "Trirong", "IBM Plex Sans Thai", serif;

  /* warm the paper toward ET cream */
  --paper-1: #faf6ef;
  --paper-2: #f1e6d6;
  --paper-3: #e8e0d2;

  --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;
}
.audience .ic {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  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; }

/* 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(--t1-green-700); font-weight: 700; }
.raci .no  { color: var(--ink-4); }
.raci .ceo { color: #b45309; 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 rgba(180,83,9,0.5); border-radius: 8px;
  background: rgba(245,158,11,0.07);
  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-style: italic; font-weight: 900;
  font-size: 18px; color: #b45309; line-height: 1;
}
.gap b { color: #92580d; }
.gap .lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #b45309;
  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: 0 8px 28px -12px rgba(10,10,10,0.25); 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 */
/* role distinguishers — warm tones within the ET family, contrast-safe */
[data-role="dev"]       { --accent: #a26939; --accent-deep: #6e4524; }
[data-role="ads"]       { --accent: #be7a2e; --accent-deep: #8f5a1c; }
[data-role="marketing"] { --accent: #b16a45; --accent-deep: #8a4f30; }