/* styles.css — editorial data-report visual system (specs/05).
   Portrait A4. Self-hosted Fraunces + IBM Plex (woff2) → CORS-safe PNG export. */

/* ── Fonts (local woff2, latin + latin-ext for ă â î ș ț) ── */
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("fonts/fraunces-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("fonts/fraunces-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Fraunces"; font-style:italic; font-weight:300 900; font-display:swap;
  src:url("fonts/fraunces-var-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Fraunces"; font-style:italic; font-weight:300 900; font-display:swap;
  src:url("fonts/fraunces-var-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face { font-family:"Plex Sans"; font-weight:400; font-display:swap; src:url("fonts/plexsans-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Sans"; font-weight:400; font-display:swap; src:url("fonts/plexsans-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Plex Sans"; font-weight:500; font-display:swap; src:url("fonts/plexsans-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Sans"; font-weight:500; font-display:swap; src:url("fonts/plexsans-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Plex Sans"; font-weight:600; font-display:swap; src:url("fonts/plexsans-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Sans"; font-weight:600; font-display:swap; src:url("fonts/plexsans-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Plex Sans"; font-weight:700; font-display:swap; src:url("fonts/plexsans-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Sans"; font-weight:700; font-display:swap; src:url("fonts/plexsans-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Plex Mono"; font-weight:400; font-display:swap; src:url("fonts/plexmono-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Mono"; font-weight:400; font-display:swap; src:url("fonts/plexmono-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Plex Mono"; font-weight:500; font-display:swap; src:url("fonts/plexmono-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:"Plex Mono"; font-weight:500; font-display:swap; src:url("fonts/plexmono-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }

/* ── Tokens (specs/05) ────────────────────────────────────── */
:root{
  --paper:#FAF8F4;
  --surface:#FFFFFF;
  --ink:#1B1B19;
  --ink-soft:#6E6E68;
  --hairline:#E7E3DB;

  --red:#B23B2E;   --red-tint:#F7ECEA;
  --amber:#C07A2B; --amber-tint:#FAF1E5;
  --green:#4E7C5A; --green-tint:#EDF3EE;

  --change:#3E5C76; --change-tint:#ECF0F4;

  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --page-w:210mm;
  --pad:18mm;
  --maxw:880px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:#E6E0D6; color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Toolbar (screen only) ────────────────────────────────── */
.toolbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
}
.toolbar .title{ margin-right:auto; }
.toolbar a{ color:#CDBfa6; text-decoration:none; }
.toolbar a:hover{ color:#fff; }
.btn{
  appearance:none; cursor:pointer; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:2px;
  border:1px solid #45413a; background:#2b2823; color:var(--paper);
}
.btn:hover{ background:#3a362e; }
.btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.btn.primary:hover{ filter:brightness(1.08); }

/* ── Page sheet ───────────────────────────────────────────── */
.page{
  width:var(--page-w); background:var(--paper);
  margin:26px auto; padding:var(--pad);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 22px 60px rgba(70,55,30,.18);
}
.wrap{ max-width:var(--maxw); margin:0 auto; }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{ margin-bottom:8px; }
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.masthead h1{
  font-family:var(--display); font-weight:600; font-optical-sizing:auto;
  font-size:48px; line-height:1.04; letter-spacing:-.02em; margin:12px 0 0; color:var(--ink);
}
.masthead h1 .month{ font-style:italic; font-weight:400; color:var(--ink-soft); }
.masthead .rule{ height:2px; background:var(--ink); margin-top:18px; }
.masthead .meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:10px;
}

/* ── Sections ─────────────────────────────────────────────── */
section{ margin-top:60px; }
.section-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
.section-label::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.section-label .count{ color:var(--ink); font-weight:600; }

/* ── Exec gist ────────────────────────────────────────────── */
.gist{ margin-top:40px; }
.gist .lede{
  font-family:var(--display); font-weight:500; font-size:30px; line-height:1.22;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 16px; max-width:24ch;
}
.gist .lede .mark-red{ color:var(--red); }
.gist .lede .mark-amber{ color:var(--amber); }
.gist .lede .mark-green{ color:var(--green); }
.gist .sub{
  font-size:17px; color:var(--ink-soft); max-width:66ch; line-height:1.55;
  border-left:2px solid var(--ink); padding-left:18px;
}
.gist .sub b{ color:var(--ink); font-weight:600; }

/* ── RAG dot + tags ───────────────────────────────────────── */
.dot{ width:13px; height:13px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.dot.red{ background:var(--red); } .dot.amber{ background:var(--amber); } .dot.green{ background:var(--green); }
.dot.lg{ width:16px; height:16px; }

.pill{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; padding:3px 9px; border-radius:100px; display:inline-flex; align-items:center; white-space:nowrap;
}
.pill.stage{ border:1px solid var(--hairline); color:var(--ink-soft); background:transparent; }
.pill.change{ background:var(--change-tint); color:var(--change); }   /* slate, NEUTRAL — never RAG */
.pill.kind{ border:1px solid var(--hairline); color:var(--ink-soft); background:transparent; }

.warn{
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 9px; border-radius:2px;
  background:var(--amber); color:#fff; display:inline-flex; align-items:center; gap:6px;
}

/* ── Portfolio status blocks ──────────────────────────────── */
.status-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.status{ }
.status .shead{ display:flex; align-items:center; gap:10px; }
.status .sname{ font-family:var(--display); font-weight:600; font-size:21px; line-height:1.08; }
.status .skind{ margin-top:10px; }
.status .snote{ font-size:15px; color:var(--ink-soft); line-height:1.4; margin-top:12px; max-width:34ch; }

.meter{ margin-top:16px; }
.meter .track{ height:6px; background:#EDE7DC; border-radius:100px; overflow:hidden; }
.meter .track>span{ display:block; height:100%; background:var(--ink); }
.meter.red .track>span{ background:var(--red); } .meter.amber .track>span{ background:var(--amber); } .meter.green .track>span{ background:var(--green); }
.meter .mlabel{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.steps{ margin-top:12px; }
.step{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); padding:3px 0; }
.step .pip{ width:8px; height:8px; border-radius:2px; flex:0 0 auto; }
.pip.done{ background:var(--green); } .pip.in-progress{ background:var(--amber); } .pip.todo{ background:#CFC6B6; }
.lead-ind{ font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.45; }
.lead-ind b{ color:var(--ink); font-weight:600; }

/* ── Stat tiles (live metrics) ────────────────────────────── */
.tiles{ display:flex; flex-wrap:wrap; gap:34px 48px; }
.tile{ }
.tile .v{ font-family:var(--mono); font-size:44px; font-weight:500; color:var(--ink); line-height:.95; letter-spacing:-.01em; }
.tile .v.tbd{ font-size:26px; color:var(--ink-soft); }
.tile .l{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; max-width:18ch; line-height:1.3; }

/* ── Initiative card ──────────────────────────────────────── */
.cards{ display:flex; flex-direction:column; gap:24px; }
.card{
  position:relative; background:var(--surface);
  box-shadow:0 1px 2px rgba(60,45,20,.07), 0 10px 30px rgba(60,45,20,.08);
  border-left:4px solid var(--ink-soft); border-radius:4px;
  padding:30px 34px 30px;
}
.card.red{ border-left-color:var(--red); } .card.amber{ border-left-color:var(--amber); } .card.green{ border-left-color:var(--green); }
.card .chead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card .ctitle{ font-family:var(--display); font-weight:600; font-size:22px; line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0; flex:1 1 60%; }
.card .chead .meta-pills{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card .eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px;
}

.hero{ margin:18px 0 0; }
.hero .pair{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.hero .seg{ display:block; }
.hero .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:3px; }
.hero .val{ font-family:var(--display); font-weight:500; font-size:20px; line-height:1.28; color:var(--ink); }
.hero .arrow{ font-family:var(--display); font-size:24px; color:var(--green); align-self:center; transform:translateY(2px); }
.hero.todo .placeholder{
  font-family:var(--display); font-style:italic; font-weight:400; font-size:20px; color:var(--ink-soft);
  display:flex; align-items:center; gap:14px;
}

.desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:16px 0 0; max-width:68ch; }
.desc .lab,.ponotes .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.ponotes{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:8px 0 0; max-width:68ch; }
.blocker{ font-size:13.5px; color:var(--red); line-height:1.45; margin:12px 0 0; }
.blocker .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

.pbar{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.pbar .track{ flex:0 0 180px; height:6px; background:#EDE7DC; border-radius:100px; overflow:hidden; }
.pbar .track>span{ display:block; height:100%; background:var(--ink-soft); }
.card.red .pbar .track>span{ background:var(--red); } .card.amber .pbar .track>span{ background:var(--amber); } .card.green .pbar .track>span{ background:var(--green); }
.pbar .pct{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.pbar .relq{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-left:auto; letter-spacing:.04em; }

.ado-row{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ado{
  font-family:var(--mono); font-size:11px; color:var(--change); background:var(--change-tint);
  padding:3px 9px; border-radius:3px; text-decoration:none;
}
.ado:hover{ filter:brightness(.96); text-decoration:underline; }

.callout{
  margin-top:20px; border-radius:4px; padding:16px 18px; display:flex; gap:14px; align-items:baseline;
  font-size:15px; line-height:1.5; color:var(--ink);
}
.callout .ck{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; flex:0 0 auto; }
.card.red .callout{ background:var(--red-tint); } .card.red .callout .ck{ color:var(--red); }
.card.amber .callout{ background:var(--amber-tint); } .card.amber .callout .ck{ color:var(--amber); }
.card.green .callout{ background:var(--green-tint); } .card.green .callout .ck{ color:var(--green); }
.callout.missing{ background:var(--amber-tint); } .callout.missing .ck{ color:var(--amber); }

/* ── Editorial lists ──────────────────────────────────────── */
.ed-list{ display:flex; flex-direction:column; }
.ed-list .item{
  display:flex; gap:16px; align-items:baseline; padding:13px 0;
  border-bottom:1px solid var(--hairline); font-size:14.5px; color:var(--ink-soft); line-height:1.45;
}
.ed-list .item:first-child{ border-top:1px solid var(--hairline); }
.ed-list .item .lead-col{ flex:0 0 auto; min-width:92px; }
.ed-list .item .num{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); min-width:26px; }
.ed-list .item b{ color:var(--ink); font-weight:600; }
.ed-list .item .arrow{ color:var(--ink-soft); }
.ed-list .item .src{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.muted{ color:var(--ink-soft); font-style:italic; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; }

/* ── Delivery: product sections + metrics table ───────────── */
.product{ margin-top:64px; }
.product .phead{ display:flex; align-items:flex-start; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:14px; }
.product .phead .dot{ margin-top:11px; }
.product .phead h2{ font-family:var(--display); font-weight:600; font-size:32px; line-height:1.04; margin:0; letter-spacing:-.015em; }
.product .phead .pkind{ margin-top:12px; }
.product .phead .pnote{ margin-left:auto; max-width:44%; text-align:right; font-size:14px; color:var(--ink-soft); line-height:1.4; }
.product .psummary{ font-family:var(--display); font-weight:500; font-size:19px; line-height:1.35; color:var(--ink); margin:18px 0 0; max-width:56ch; }
.product .papproach{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:12px 0 0; max-width:74ch; font-style:italic; }
.sub-label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:30px 0 16px; }

table.metrics{ width:100%; border-collapse:collapse; }
table.metrics th{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:right; padding:8px 12px; border-bottom:1px solid var(--ink); font-weight:500; }
table.metrics th:first-child{ text-align:left; }
table.metrics td{ padding:9px 12px; border-bottom:1px solid var(--hairline); font-size:14px; color:var(--ink-soft); text-align:right; font-family:var(--mono); }
table.metrics td:first-child{ text-align:left; font-family:var(--body); color:var(--ink); font-weight:500; }
table.metrics td:last-child{ text-align:left; font-family:var(--body); color:var(--ink-soft); font-size:13px; }
.tbd{ color:var(--ink-soft); font-style:italic; }
.empty{ font-size:14px; color:var(--ink-soft); font-style:italic; }

/* ── Motion (print/PNG-safe: final state is default) ──────── */
@keyframes fadeup{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .anim{ animation:fadeup .55s cubic-bezier(.2,.7,.2,1) both; }
  .anim:nth-of-type(1){ animation-delay:.02s; } .anim:nth-of-type(2){ animation-delay:.10s; }
  .anim:nth-of-type(3){ animation-delay:.18s; } .anim:nth-of-type(4){ animation-delay:.26s; }
  .anim:nth-of-type(5){ animation-delay:.34s; } .anim:nth-of-type(6){ animation-delay:.42s; }
}

/* ── Print ────────────────────────────────────────────────── */
@page{ size:A4 portrait; margin:15mm; }
@media print{
  html,body{ background:#fff; }
  .toolbar,.no-print{ display:none !important; }
  .page{ width:auto; margin:0; padding:0; box-shadow:none; background:#fff; }
  .wrap{ max-width:none; }
  .anim{ animation:none !important; }
  section{ margin-top:44px; }
  .card,.status,.product .phead,.gist,.ed-list .item,.tile,
  .section-label{ page-break-inside:avoid; }
  .product{ page-break-inside:auto; }
  .card{ break-inside:avoid; box-shadow:none; border:1px solid var(--hairline); border-left:4px solid var(--ink-soft); }
  .card.red{ border-left-color:var(--red); } .card.amber{ border-left-color:var(--amber); } .card.green{ border-left-color:var(--green); }
  table.metrics thead{ display:table-header-group; }
}