/* ==========================================================================
   KNOW THY BUYER — REPORT SURFACE  ("editorial dossier")
   Branch: redesign/ktb-ui-ux-light · Know Thy Buyer track only.

   Direction: d3 Editorial Dossier skin over the G+C report structure
   (owner decision 2026-10-06). Fraunces (questions, narrative, display)
   + Inter (data, labels, UI), warm paper #faf7f0, heritage green #1e4d3b
   for interactive elements only, hairlines never shadows. The report
   reads like a crafted dossier: brief-first, question-led evidence units,
   typographic verdict stamps. The rejected Kiln system must never return.

   This file loads after the base system in header.php, so these rules win
   on equal specificity. Rules that fight inline styles use !important
   deliberately and are marked below.
   ========================================================================== */

:root{
  --ktb-ink-soft:rgba(23,19,12,.72);
  --ktb-hairline:rgba(23,19,12,.16);
  --ktb-card-border:rgba(23,19,12,.8);
}

/* ---- report cover: quiet the topbar chrome ---- */
.report-topbar{
  background:transparent !important;            /* quiet topbar chrome: hairline only */
  border-bottom:1px solid var(--ktb-hairline);
  padding:1.05rem 2rem .95rem;
}
.report-topbar .sticker{
  box-shadow:none;
  border:none;
  background:none !important;                  /* beats .sticker.color fills */
  transform:none;
  border-radius:0;
  padding:0;
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--ktb-ink-soft);
}
.report-topbar .sticker.ink{color:var(--ink)}

/* ---- signature: the slogan signs the report, beneath the product title ---- */
.report-signoff{
  font-style:italic;
  font-size:.98rem;
  letter-spacing:.02em;
  color:var(--ktb-ink-soft);
  margin:-1.55rem 0 2.4rem;                    /* tucks under the H1's mb-8 */
}

/* ---- section cards: one quiet rhythm, no pastel rotation ---- */
.pi-section-card,
.pi-section-card:nth-of-type(4n+1),
.pi-section-card:nth-of-type(4n+2),
.pi-section-card:nth-of-type(4n+3),
.pi-section-card:nth-of-type(4n+4){
  background:#fff;
  border:1.5px solid var(--ktb-card-border);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(23,19,12,.85), 0 14px 30px -22px rgba(23,19,12,.4);
  padding:2rem;
  margin-bottom:2rem;
}
@media(max-width:640px){
  .pi-section-card,
  .pi-section-card:nth-of-type(4n+1),
  .pi-section-card:nth-of-type(4n+2),
  .pi-section-card:nth-of-type(4n+3),
  .pi-section-card:nth-of-type(4n+4){padding:1.3rem;margin-bottom:1.4rem}
}

/* ---- signature treatment: the Executive Brief is the verdict moment ----
   Gradient spine via ::before (a border can't carry a gradient without
   painting the ink frame too); overflow:hidden follows the card radius. */
.pi-section-card#sec-brief{
  position:relative;
  overflow:hidden;
}
.pi-section-card#sec-brief::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:var(--accent-v);
}

/* ---- section tag: kicker, not sticker ---- */
.sec-tag{
  box-shadow:none;
  background:transparent;
  border:1.5px solid rgba(23,19,12,.5);
  color:var(--ink);
  font-size:.68rem;
  letter-spacing:.16em;
  padding:.3rem .85rem;
  margin-bottom:1.1rem;
}
.sec-tag::before{
  content:"";
  display:inline-block;
  width:.5rem;height:.5rem;
  background:var(--green);
  border-radius:2px;
  margin-right:.55rem;
}

/* ---- editorial type hierarchy ---- */
.insight-body{font-size:1.02rem;max-width:68ch}
.insight-body h2{
  font-size:clamp(1.55rem,2.8vw,2rem);
  line-height:1.2;
  margin:0 0 1.1rem;
}
.insight-body h2::after{                      /* heritage-green rule per section */
  content:"";
  display:block;
  width:2.75rem;height:4px;
  background:var(--green);
  border-radius:2px;
  margin-top:.6rem;
}
.pi-section-card#sec-brief h2{font-size:clamp(1.7rem,3vw,2.15rem)}
.insight-body h3{
  color:var(--ink);                             /* was var(--blue): calmer */
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.01em;
  margin:1.9rem 0 .6rem;
}
.insight-body p{line-height:1.75;margin-bottom:1.05rem}
.insight-body li{line-height:1.7}
.insight-body ul li{margin-bottom:.55rem}
.insight-body ul li::before{border-width:1.5px}
.insight-body ol li::before{                    /* number chips: paper, not lime */
  background:#fff;
  border-width:1.5px;
}

/* ---- visuals: one cohesive set ---- */
.pi-section-card .pi-visual{margin:2rem 0 !important}   /* beats inline margin */
.pi-section-card .pi-visual svg{
  background:#fffdf8;
  border:1px solid var(--ktb-hairline);
  border-radius:12px;
  padding:.6rem;
}
/* calm the channel-quadrant rainbow into a wash (hues still encode meaning) */
.pi-section-card .pi-visual rect[fill="var(--lime)"],
.pi-section-card .pi-visual rect[fill="var(--blue)"],
.pi-section-card .pi-visual rect[fill="var(--yellow)"]{fill-opacity:.12}
.pi-section-card .pi-visual figcaption{
  margin-top:.9rem !important;                  /* beats inline styles */
  font-size:.88rem !important;
  opacity:1 !important;
  line-height:1.6;
  color:var(--ktb-ink-soft);
  border-top:1px solid var(--ktb-hairline);
  padding-top:.7rem;
}
/* journey stage map: same card language as everything else */
.pi-section-card .pi-journey h4{
  font-family:var(--serif);
  font-size:1.02rem;
  letter-spacing:.01em;
  margin:1.6rem 0 .4rem;
}
.pi-section-card .pi-journey-stages{gap:14px !important}  /* beats injected <style> */
.pi-section-card .pi-stage{
  background:#fff !important;
  border:1.5px solid rgba(23,19,12,.65);
  border-radius:10px;
  padding:1rem 1.1rem;
}
.pi-section-card .pi-stage-name{font-weight:700}
.pi-section-card .pi-leak{color:var(--red)}

/* ---- reading surface: honor reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .skel,
  #progress-bar,
  .stage .dot{animation:none !important}
}

/* ---- per-section export: Copy + CSV (quiet secondary actions) ----
   Standards §1: neutrals do the work; the accent wash is reserved for
   verdict moments, so these stay ink-on-paper. Blue focus ring = in-product rule. */
.ktb-export{float:right;display:inline-flex;align-items:center;gap:.6rem;margin:.1rem 0 .6rem .75rem}
.ktb-copy{font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;line-height:1.2;
  padding:.32rem .8rem;border:1.5px solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);cursor:pointer}
.ktb-copy:hover{background:var(--ink);color:var(--paper)}
.ktb-copy:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ktb-csv-link{font-size:.78rem;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:2px}
.ktb-csv-link:hover{color:var(--green)}
.ktb-csv-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .ktb-copy,.ktb-csv-link{transition:none !important}
}

/* ---- share sheet (dialog) ---- */
.ktb-share-sheet{
  border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);
  background:#fff;color:var(--ink);padding:1.6rem;
  width:min(26rem,calc(100vw - 2.5rem));
}
.ktb-share-sheet::backdrop{background:rgba(23,19,12,.55)}
.ktb-share-intent{text-decoration:none}
.ktb-share-intent:focus-visible,
#ktb-share-open:focus-visible,
#ktb-share-copy:focus-visible,
#ktb-share-native:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .ktb-share-sheet{transition:none}
}