/* ═══════════════════════════════════════════════════════════════════════════
   docs.css — six ways for a result to look, chosen by what the tool produces.

   Every tool on this platform rendered into the same stack of .kft-card. That
   is a reasonable default and a bad answer, because it made a profit and loss
   statement, a brand identity and a testing plan arrive looking like the same
   memo — and a reader who cannot tell at a glance what kind of document they
   are holding reads all of them the same shallow way.

   KF Brain solved this for itself with 512 lines scoped to .kfb. This is that
   idea generalised, but deliberately not fifteen times over: the registry tags
   each tool with what it PRODUCES, and there are six answers across fifteen
   tools. A suite where every tool invented its own look stops reading as a
   suite, and the shared vocabulary — cards, metric grids, tables, the type
   ramp — stays identical underneath. What changes is emphasis: which element
   is allowed to be the loudest thing on the page.

     strategy  a verdict, then prose. Already .kfb — untouched here.
     plan      a briefing. Numbered, sequential, built to be worked through.
     ledger    money. Tabular, right-aligned, monospaced figures, quiet.
     diagram   a shape. The drawing leads and the prose supports it.
     board     a brand. Swatches, specimens, and space to look at them.
     calendar  a month. Lives in calendar.css.
     brief     something to hand to somebody else. Prompts read as blocks.

   Scoped under .kfdoc so nothing here can reach the app chrome around it.
   ═══════════════════════════════════════════════════════════════════════════ */

.kfdoc { --kfdoc-accent: var(--kf-purple); }

/* The accent is what makes two documents feel different before a word is read,
   and it is the one thing that varies per archetype rather than per tool —
   fifteen accents would be a paint chart, not a system. */
.kfdoc-plan     { --kfdoc-accent: #3b7ddd; }
.kfdoc-ledger   { --kfdoc-accent: #1d8a5f; }
.kfdoc-diagram  { --kfdoc-accent: #c2603a; }
.kfdoc-board    { --kfdoc-accent: #8b5cf6; }
.kfdoc-brief    { --kfdoc-accent: #6b7280; }
.kfdoc-calendar { --kfdoc-accent: #d97706; }

.kfdoc .kft-card h3 { display: flex; align-items: baseline; gap: 9px; }

/* ── plan ─────────────────────────────────────────────────────────────────
   A media plan is worked through in order — you do the campaign structure
   before you write the ad. So the cards number themselves and carry a rule
   down the side, which is what turns a stack of panels into a sequence. */

.kfdoc-plan { counter-reset: kfplan; }
.kfdoc-plan .kft-card {
  counter-increment: kfplan;
  border-inline-start: 3px solid var(--kfdoc-accent);
  padding-inline-start: 22px;
}
.kfdoc-plan .kft-card > h3::before {
  content: counter(kfplan);
  flex: none;
  min-width: 25px; height: 25px; padding: 0 6px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--kfdoc-accent) 14%, transparent);
  color: var(--kfdoc-accent);
  font: 700 12.5px/25px var(--font-mono, ui-monospace, monospace);
  text-align: center;
}
/* The hero and the executive summary are not steps. */
.kfdoc-plan .kft-result-hero { counter-increment: none; border-inline-start-color: transparent; }
.kfdoc-plan .kft-result-hero::before { display: none; }
.kfdoc-plan .kft-metric strong { color: var(--kfdoc-accent); }
/* A campaign name is a string somebody types into Ads Manager. */
.kfdoc-plan code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.4px; letter-spacing: -.01em;
  background: color-mix(in srgb, var(--kfdoc-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kfdoc-accent) 22%, transparent);
  border-radius: 5px; padding: 2px 6px;
  unicode-bidi: plaintext;
}

/* ── ledger ───────────────────────────────────────────────────────────────
   Money wants to be dull and legible. Tabular figures so columns line up
   digit over digit, numbers pushed to the trailing edge, and no colour doing
   emphasis a number should be doing itself. */

.kfdoc-ledger .kft-card { border-radius: 10px; }
.kfdoc-ledger table { font-variant-numeric: tabular-nums; }
.kfdoc-ledger td + td,
.kfdoc-ledger th + th { text-align: end; }
.kfdoc-ledger td:first-child,
.kfdoc-ledger th:first-child { text-align: start; }
.kfdoc-ledger .kft-metric strong,
.kfdoc-ledger .kft-bignum {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* A total is a rule above it, the way a ledger has always done it. */
.kfdoc-ledger tr.kft-row-total td {
  border-top: 2px solid var(--border-strong);
  font-weight: 700; color: var(--heading);
}
.kfdoc-ledger .kft-metric-grid { gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.kfdoc-ledger .kft-metric { border: 0; border-radius: 0; background: var(--card); }

/* ── diagram ──────────────────────────────────────────────────────────────
   The funnel is the answer; the prose explains it. So the drawing gets room
   and the cards around it get out of its way. */

.kfdoc-diagram .kft-funnel-wrap,
.kfdoc-diagram .kft-vfunnel,
.kfdoc-diagram .kft-chart { margin: 8px 0 20px; }
.kfdoc-diagram .kft-card:has(.kft-vfunnel),
.kfdoc-diagram .kft-card:has(.kft-funnel-wrap),
.kfdoc-diagram .kft-card:has(.kft-chart) {
  background: var(--surface-2, var(--surface));
  border-color: var(--border-strong);
  padding: 24px 26px;
}
.kfdoc-diagram .kft-vfunnel-bar { background: linear-gradient(90deg, var(--kfdoc-accent), color-mix(in srgb, var(--kfdoc-accent) 55%, transparent)); }
/* The leaking stage is the finding. It is allowed to be loud. */
.kfdoc-diagram .kft-bad,
.kfdoc-diagram .kft-warn { color: var(--kfdoc-accent); }

/* ── board ────────────────────────────────────────────────────────────────
   A brand identity is looked at before it is read. Wider gutters, larger
   headings, and colour shown as colour rather than described as a hex value
   in a table cell. */

.kfdoc-board .kft-card { padding: 24px 26px; }
.kfdoc-board .kft-card h3 { font-size: 16.5px; letter-spacing: -.01em; }
.kfdoc-board .kft-narrative { font-size: 15.4px; line-height: 1.8; }
.kfdoc-board .kft-result-hero h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; }
/* Swatches get room to be judged against each other. */
.kfdoc-board .bi-swatches { gap: 16px; }
.kfdoc-board .bi-swatch { min-width: 118px; }
.kfdoc-board .bi-swatch > span { height: 76px; }
/* The identity block is a specimen, not a code listing. */
.kfdoc-board .kft-pre {
  background: var(--surface-2, var(--bg));
  border-inline-start: 3px solid var(--kfdoc-accent);
  font-size: 13.2px; line-height: 1.85;
}

/* ── brief ────────────────────────────────────────────────────────────────
   A brief is written to be handed to somebody else — a GPT, a designer, a
   writer. It should look like something you copy, so the prompt blocks are the
   figure and everything else is ground. */

.kfdoc-brief .kft-card { background: transparent; border-style: dashed; }
.kfdoc-brief .cr-pre,
.kfdoc-brief .kft-pre {
  background: var(--surface-2, var(--bg));
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.kfdoc-brief .kft-card h3 {
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
html[dir="rtl"] .kfdoc-brief .kft-card h3 { letter-spacing: 0; text-transform: none; font-size: 14.5px; }

/* ── Print and PDF ────────────────────────────────────────────────────────
   The archetypes have to survive the thing they exist for. Backgrounds that
   read as texture on screen become grey boxes on paper, so they are dropped;
   the structural cues — the rules, the numbering, the alignment — are kept,
   because those are what make the printed page legible rather than decorated. */

@media print {
  .kfdoc .kft-card { background: none; box-shadow: none; break-inside: avoid; }
  .kfdoc-brief .kft-card { border-style: solid; }
  .kfdoc-plan .kft-card { border-inline-start-width: 2px; }
  .kfdoc-board .bi-swatch > span { height: 46px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kfdoc-plan .kft-card > h3::before,
  .kfdoc-diagram .kft-vfunnel-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* html2canvas photographs computed styles, and color-mix() is resolved by the
   browser before the picture is taken — so these need no fallback. What it does
   not do is inherit the page's dark theme, which .doc-pdf-stage already forces
   to white in doc.css. */
.doc-pdf-stage .kfdoc-brief .kft-card { border-color: #d8dbe0; }
.doc-pdf-stage .kfdoc-ledger .kft-metric { background: #fff; }

/* ── One line, in its own direction ────────────────────────────────────────
   kf_lines() wraps every line of a multi-line value in a span carrying
   dir="auto", so a document whose own direction is English renders an Arabic
   line right-to-left and vice versa. The span has to be a block for that to
   mean anything — an inline element takes the direction but not the alignment,
   so the text would reorder correctly and still sit against the wrong margin,
   which reads as a punctuation bug rather than an alignment one.

   A div would have been the obvious element and is not allowed: these sit
   inside <p>, <td> and <li>, and the parser closes a <p> at the point a <div>
   opens inside it. */
.kfdoc .l,
.doc .l {
  display: block;
}

/* Successive lines of one value are one thought, not one paragraph each, so
   they sit closer than paragraphs do. */
.kfdoc .l + .l,
.doc .l + .l {
  margin-block-start: .18em;
}