/* ============================================================================
   css/kit.css — the v2 page kit + the pk- compatibility block.
   prp/2026-09-26-pocket-web-v2, design §2, §10; U02 accept bullet 4.

   TWO THINGS LIVE HERE, DELIBERATELY TOGETHER (one file keeps the campaign's
   `owns` disjoint — design §2's "one file per owner"):

   1. THE PAGE KIT — new, small, named primitives every P0x page view builds
      pages out of, so no page invents its own row/toggle/segment/sheet markup.
      Ported from prototype/head.html (hub v14) where a matching class already
      exists there (`.srow` :426, `.seg` :169, `.tog` :232, `.bar` :91,
      `.sheet`+`.scrim` :254-261) — cited so a later unit can check this
      against the prototype rather than trust this comment. Three names in the
      unit's own accept text have no prototype twin and are this unit's own
      naming, stated plainly rather than left to be guessed at:
        - `.tile`     a small stat card (based on prototype's `.measure > div` :284)
        - `.chg`      a compact chip/tag (based on prototype's `.chip.sm` :112,115)
        - `.absence`  design §3.4's "absence line" — a body field or door the
                      channel doesn't send yet, rendered in plain words, never a
                      zero or a blank. No prototype markup describes this; the
                      style here is this unit's own (muted, no border, no weight).
      `.page` is the page container (prototype's `.col`/`.sgrid` :72,415) — the
      root a future `P.page(host, spec)` helper mounts into. That helper itself
      is NOT this unit's file: no JS file in U02's `owns` carries new logic (the
      nine kept files are copied byte-identical, design §2), so `P.page` is a
      forward reference for whichever unit builds page-mounting logic (U03's
      frame.js, by the load order below). Naming the gap rather than silently
      inventing a ui.js/ask.js edit that bullet 1 forbids.

   2. THE pk- COMPATIBILITY BLOCK — `js/ui.js` and `js/ask.js` are kept
      byte-identical (design §2, U02 accept bullet 1: "styling only via CSS"),
      so every class they still emit needs a rule here or the primitives they
      built go unstyled. The set is DERIVED, not retyped by hand — see
      `tests/test_v2_skeleton.mjs`'s `extractPkClasses()`, which greps both
      files the same way this comment does, so a class ui.js/ask.js stops
      emitting or starts emitting is a test failure here, not a silent drift.
      Restyled to the v2 tokens and the v14 look (rounded surfaces, `--card`/
      `--line`/`--sh`), not v1's pocket.css pixel values — bullet 1 says
      "styling only via CSS", which is the license to redraw, not a mandate to
      copy v1's box model.
   ============================================================================ */

/* ---- THE BASE TYPE — prototype/head.html:24,26 (hub v14), verbatim in values -----------------
   Missing until 2026-09-26: no v2 file set `font-family` on body, so every element without its own
   rule (body copy, buttons, labels, rows) fell to the browser default — Times — while the design
   is Inter throughout, with Fraunces only on the headings that name it. Found on the glass by him
   ("text styles are not exactly the same as we designed"). The prototype's html/body background
   (#e3ddd0) is its demo desk, not the app's, so it is NOT carried; the frame paints --bg. */
html, body {
  margin: 0;
  height: 100%;   /* #pk-app's own height:100% (frame.css) needs a sized ancestor to resolve
                     against, or it collapses to auto and the WHOLE DOCUMENT scrolls instead of
                     `.pk-main` — the bug that let the phone tab bar drift off the bottom of the
                     glass at 390px (his report). */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
button, input, select, textarea { font: inherit; color: inherit; }


/* ---------------------------------------------------------------------------
   THE PAGE KIT
   --------------------------------------------------------------------------- */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 140px;
}
.page.wide { max-width: 1080px; }

.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.srow .t { font-size: 15px; color: var(--ink); }
.srow .s { font-size: 13px; color: var(--ink3); margin-top: 2px; max-width: 52ch; }
.srow .v { font-size: 14px; color: var(--ink2); display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.seg { display: inline-flex; gap: 2px; background: var(--sunk); padding: 3px; border-radius: 10px; }
.seg button {
  height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px;
  color: var(--ink2); font-weight: 500; background: none; border: 0;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh); }

.tog {
  width: 40px; height: 24px; border-radius: 999px; background: var(--ink4);
  position: relative; transition: .2s; display: inline-block; flex-shrink: 0;
}
.tog::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--card); transition: .2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.tog.on { background: var(--ink); }
.tog.on::after { left: 19px; }
.tog.lock { opacity: .4; cursor: default; }

/* .chg — a compact chip/tag (this unit's naming; see the header comment) */
.chg {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink2);
  background: var(--card); white-space: nowrap;
}
.chg.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chg.you { color: var(--you); border-color: var(--you); }

.bar { position: relative; height: 6px; border-radius: 6px; background: var(--sunk); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ink2); }
.bar u { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--ink3); opacity: .8; }
.bar.behind i, .bar.full i { background: var(--you); }
.bar.thin { height: 4px; }

/* .tile — a small stat card (this unit's naming, based on the prototype's .measure) */
.tile { background: var(--sunk); border-radius: 12px; padding: 12px 14px; }
.tile b {
  display: block; font-family: var(--serif); font-variation-settings: "SOFT" 100;
  font-weight: 350; font-size: 26px; line-height: 1;
}
.tile span { font-size: 12px; color: var(--ink3); }

.scrim { position: absolute; inset: 0; z-index: 35; background: rgba(30, 20, 5, .18); }
.sheet {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 520px;
  max-width: calc(100% - 24px); background: var(--card); border-radius: 24px;
  box-shadow: var(--shl); z-index: 36; display: flex; flex-direction: column;
}
.sheet h2 {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 60;
  font-weight: 350; font-size: 28px; line-height: 1.18; margin: 6px 0 0; color: var(--ink);
}

/* .absence — design §3.4: a field or door the body's channel hasn't sent yet, in plain
   words, never a zero or a blank. This unit's own styling; no prototype markup for it. */
.absence { color: var(--ink3); font-size: 13px; font-style: italic; }

/* .pk-lede — a single lede line under a sheet/page title (goal.js's pace label, task.js's reason
   line, project.js's token/turn counts). Until now it was styled only inside `.pk-j-page`
   (css/journal.css) — a bare use anywhere else (every sheet) rendered as unstyled browser-default
   text. This is the general case; `.pk-j-page .pk-lede`'s own higher specificity still wins there,
   unchanged. */
.pk-lede { font-size: 15px; line-height: 1.5; color: var(--ink2); margin: 10px 0 0; }

/* ---------------------------------------------------------------------------
   THE pk- COMPATIBILITY BLOCK — js/ui.js + js/ask.js, kept byte-identical.
   Ordered as the 25 classes appear in each file (ui.js first, then ask.js).
   --------------------------------------------------------------------------- */

/* ui.js — P.anim("in"): the arrival fade (ui.js:566-572, only ever called with "in") */
@keyframes pk-in { from { opacity: 0; transform: translateY(6px); } }
.pk-anim-in { animation: pk-in .22s ease both; }

/* ui.js — P.dots (ui.js:574-583): the progress-dot row a moment() may render */
.pk-dots { display: flex; gap: 6px; justify-content: center; padding: 6px 0 0; }
.pk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); display: inline-block; transition: .15s; }
.pk-dot.on { width: 18px; border-radius: 4px; background: var(--you); }

/* ui.js — P.moment (ui.js:617+): one line of system voice */
.pk-voice { font-size: 15px; line-height: 1.5; color: var(--ink2); margin: 0 0 8px; }

/* ui.js — the ONE content block a moment renders */
.pk-block { font-size: 15px; line-height: 1.55; color: var(--ink); }
.pk-block > * + * { margin-top: 8px; }

/* ui.js — look-only chrome in place of the actions (the money seal) */
.pk-seal {
  font-size: 13px; color: var(--ink3); border: 1px dashed var(--ink4); border-radius: 10px;
  padding: 10px 12px; margin-top: 10px;
}

/* ui.js — the actions row: at most two .pk-btn, exactly one .primary */
.pk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pk-btn {
  height: 38px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2); flex: 1 1 0;
}
.pk-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-btn.primary.quiet { background: var(--card); color: var(--ink); border-color: var(--line); }
.pk-btn.ghost { background: none; border-color: transparent; color: var(--ink3); }
.pk-btn.tone-ok:not(.primary) { color: var(--done); border-color: var(--done); }
.pk-btn.tone-warn:not(.primary), .pk-btn.tone-err:not(.primary) { color: var(--you); border-color: var(--you); }
.pk-btn.tone-err.primary { background: var(--you); border-color: var(--you); color: #fff; }
.pk-btn:active { transform: scale(.985); }
.pk-btn[disabled] { opacity: .45; cursor: default; }
.pk-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ui.js — a disabled action's reason line, printed as visible text (never a title tooltip) */
.pk-why { font-size: 13px; color: var(--you); padding-top: 6px; text-align: center; }

/* ui.js — the "done" flash on a completed action */
.pk-done .pk-voice { color: var(--done); }

/* ui.js — a filled-arrival failure block */
.pk-fail { font-size: 15px; color: var(--ink); }
.pk-fail-line { color: var(--ink3); font-size: 14px; }

/* ui.js — the toast host + its stacked cards (ui.js's P.toast/toastHost/dismissToast).
   TOP-RIGHT, NEVER THE WORK AREA (his fidelity report, 2026-09-27, with a screenshot: bottom-center
   sat over the composer on the phone and over the ask bar on desktop, on every band — the one place
   guaranteed to be exactly where he was working). The host itself never scrolls with the page (it
   is appended straight to `<body>` by ui.js, outside `#pk-app`'s grid) and never intercepts a click
   meant for the page under it — `pointer-events: none` on the host, `auto` only on a card, is what
   keeps the corner itself clickable through the gaps between toasts. Cards stack downward in
   arrival order and each carries its own dismiss (ui.js), so a second toast no longer erases the
   first — `.pk-toast` is now N siblings, never a `clear()`-and-replace of one. */
.pk-toast-host {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; left: auto;
  bottom: auto; transform: none; z-index: 65; display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; pointer-events: none; max-width: calc(100vw - 32px);
}
.pk-toast {
  display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg);
  border-radius: 12px; padding: 10px 16px; box-shadow: var(--shl); font-size: 13.5px;
  pointer-events: auto; animation: pk-in .2s ease both; max-width: 360px; cursor: pointer;
}
.pk-toast-msg { flex: 1 1 auto; }
.pk-toast-act { color: inherit; opacity: .8; font-weight: 500; flex: none; }
.pk-toast-act:hover { opacity: 1; }

/* <=600 (phone, the same band frame.js's isPhoneBand() and today.css's own query use): a corner
   is not a place on a screen this narrow, so the stack runs the top edge instead — full width,
   compact, clear of the status bar/notch via the same safe-area inset, tap or swipe to dismiss
   (ui.js). Never the bottom: that band is the composer/tabbar's, the exact spot his report named. */
@media (max-width: 600px) {
  .pk-toast-host { top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px; left: 12px; max-width: none; }
  .pk-toast { max-width: none; }
}

/* ask.js — the one modal, P.ask (ask.js:~50-280): veil + panel + fields + actions */
.pk-dlg-veil { position: fixed; inset: 0; z-index: 70; background: rgba(30, 20, 5, .28); }
.pk-dlg {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 71;
  width: 360px; max-width: calc(100% - 32px); background: var(--card); border-radius: 20px;
  box-shadow: var(--shl); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px;
}
.pk-dlg-h { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 350; font-size: 22px; color: var(--ink); }
.pk-dlg-note { font-size: 13px; color: var(--ink3); line-height: 1.45; }
.pk-dlg-in {
  height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  padding: 0 12px; font-size: 15px; outline: 0; color: var(--ink);
}
.pk-dlg-in::placeholder { color: var(--ink3); }
.pk-dlg-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pk-dlg-err { font-size: 13px; color: var(--you); line-height: 1.4; }
.pk-dlg-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.pk-dlg-btn {
  height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
}
.pk-dlg-btn[disabled] { opacity: .55; cursor: default; }
.pk-dlg-go { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   THE DOCUMENT RENDERER — js/briefdoc.js's own chrome (the rank square, the run-confirm strip,
   the sources fold, the card callout's answer) plus the server's markdown primitives
   (backend._md_to_html / render_need_doc_html: mdcall, mdtiles, mdfig, mdimg, mdcode, mdtable,
   task lists) and the brief profile (backend's six callout kinds under `.mdbrief`).

   Every class below was collected by grepping js/briefdoc.js's own string literals (the classes
   it creates with mk()/classList, plus the server classes it queries for by name) and, separately,
   backend._md_to_html's `class="…"` literals — nothing here is retyped from memory; see
   tests/test_v2_doc_css.mjs, which re-derives both sets the same way and fails if either grows a
   class this section has no rule for.

   BEHAVIOUR IS PORTED FROM v1 (pocket/web/pocket.css, its .pk-doc/.pk-brief/.pk-src/.pk-af rules):
   the callout anatomy, the brief's flat-row profile with its rank counter and three door weights,
   the row's own done/running square, the money-spending run gate, the sources fold behind a
   summary line, and the two-column desk layout once a brief carries all six of its blocks. LOOK is
   redrawn for v2: no shadowed callout cards (design says the decision surface is the only raised
   one), a left rule + a `--sunk` tint instead, and every colour is a v2 token
   (--pk-t2→--ink2, --pk-t3→--ink3, --pk-link→--run, --ok/--ok-ink→--done, --warn/--pk-warn-ink→
   --you, plus --card/--line carried straight over). "Running" now reads var(--run) rather than
   plain ink — v1 predates a dedicated run token; v2 has one, so the mark uses it.

   DROPPED, and why: v1's `.docbox`/`.artdoc` box (a bordered, height-capped preview cropped to the
   parent room's own scroll fit — `--tg-stable-vh`, a per-band `data-fit` measurement, `#room`) only
   existed because the room embeds the document as one panel among several. In v2 the renderer
   always owns the whole sheet or page column, which already frames and scrolls the content — a
   second nested box with its own border and height cap would double the framing for nothing, so
   `.docbox`/`.artdoc` are a deliberate no-op here. The brief's own four-tiles-on-"Yesterday"
   exception (2 columns on a phone, 4 from the tablet band up) is dropped too — a rail-width special
   case a fortnight in the tuning, not load-bearing for reading the document, and the tiles' own
   `auto-fit` grid already reads reasonably at every width without it.

   WIDTH BEHAVIOUR is a container query on `pk-page` (css/frame.css names it on `.pk-main`, the page
   host), never a viewport media query — the same seam the rest of v2 uses. A document opened as a
   sheet never reaches the threshold anyway: `.pk-sheet-content` caps at 640px, well under the
   1100px this section switches on, so the two-column flow only ever fires for a document that is
   the page itself.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- base content typography, inside the artifact's own root ------------------------------- */
.pk-doc-body { font-size: 15px; line-height: 1.55; color: var(--ink); }
.pk-doc-body h1, .pk-doc-body h2, .pk-doc-body h3 { font-size: 17px; font-weight: 500; margin: 0 0 8px; color: var(--ink); }
.pk-doc-body p { margin: 0 0 10px; }
.pk-doc-body p:last-child { margin-bottom: 0; }
.pk-doc-body a { color: var(--run); }
.pk-doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.pk-doc-body ul, .pk-doc-body ol { padding-left: 20px; margin: 0 0 10px; }
.pk-doc-body li { margin: 0 0 4px; }
.pk-doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
  background: var(--sunk); border-radius: 4px; padding: 1px 5px; color: var(--ink);
}
.pk-doc-body blockquote { margin: 0 0 10px; padding: 0 0 0 12px; border-left: 2px solid var(--line); color: var(--ink2); }

/* .docbox/.artdoc — v1's nested preview box and its room-scroll height cap; both dropped (see the
   header comment). The sheet or page host that hands this element its host already owns the frame
   and the scroll, so this box takes whatever height its content needs. */
.pk-doc-body.docbox.artdoc { max-height: none; overflow: visible; }

/* the "why there's no answer bar" line, and the "reading…" wait line — both ride .absence (kit's
   own primitive, above) for their italic/muted look; this only adds the gap above it. */
.pk-doc-nobar { margin-top: 8px; }

/* ---- the callout, outside a brief: a left rule + a sunk tint, never a shadowed card ---------- */
.pk-doc-body .mdcall {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 12px;
  border-left: 3px solid var(--ink4); background: var(--sunk);
}
.pk-doc-body .mdcall-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.pk-doc-body .mdcall-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink3); flex: none;
}
.pk-doc-body .mdcall-t { font-weight: 600; color: var(--ink); }
.pk-doc-body .mdcall-b { margin-top: 4px; color: var(--ink2); }
.pk-doc-body .mdcall-b > :last-child { margin-bottom: 0; }
.pk-doc-body .mdcall[data-kind="decision"] { border-left-color: var(--run); }
.pk-doc-body .mdcall[data-kind="decision"] .mdcall-k { color: var(--run); }
.pk-doc-body .mdcall[data-kind="why"],
.pk-doc-body .mdcall[data-kind="stakes"] { border-left-color: var(--done); }
.pk-doc-body .mdcall[data-kind="why"] .mdcall-k,
.pk-doc-body .mdcall[data-kind="stakes"] .mdcall-k { color: var(--done); }
.pk-doc-body .mdcall[data-kind="risk"],
.pk-doc-body .mdcall[data-kind="warning"] { border-left-color: var(--you); }
.pk-doc-body .mdcall[data-kind="risk"] .mdcall-k,
.pk-doc-body .mdcall[data-kind="warning"] .mdcall-k { color: var(--you); }

/* ---- number tiles, an inline figure, an image (backend._md_image/_md_svg/_md_tiles) ---------- */
.pk-doc-body .mdtiles {
  display: grid; gap: 8px; margin: 0 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.pk-doc-body .mdtile { background: var(--sunk); border-radius: 12px; padding: 8px 10px; }
.pk-doc-body .mdtile-v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--ink); }
.pk-doc-body .mdtile-l { font-size: 11px; color: var(--ink3); margin-top: 2px; line-height: 1.3; }
.pk-doc-body .mdfig { margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pk-doc-body .mdfig svg { display: block; max-width: 100%; height: auto; }
.pk-doc-body .mdfig-out, .pk-doc-body .mdimg-out { color: var(--ink3); font-size: 12px; font-style: italic; }
.pk-doc-body .mdimg { margin: 0 0 12px; }
.pk-doc-body .mdimg img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.pk-doc-body .mdimg figcaption { margin-top: 5px; color: var(--ink3); font-size: 12px; line-height: 1.4; }

/* ---- a fenced code block, and a pipe table's own scroll wrapper ------------------------------ */
.pk-doc-body .mdcode {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--sunk); border-radius: 10px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink);
}
.pk-doc-body .mdtable { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10px; }
.pk-doc-body .mdtable table { border-collapse: collapse; font-size: 13px; width: 100%; }
.pk-doc-body .mdtable th, .pk-doc-body .mdtable td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }

/* a task-list line (`- [ ] …` / `- [x] …`) */
.pk-doc-body li.task { list-style: none; display: flex; align-items: baseline; gap: 6px; }
.pk-doc-body li.task .tbox { flex: none; }
.pk-doc-body li.task.done { color: var(--ink3); text-decoration: line-through; }

/* ═══ THE BRIEF'S PROFILE — scoped under `.mdbrief`, the class the ENGINE mints (never author
   text), so these rules reach a brief and nothing else; an ordinary document keeps the plain
   callout look above. Every row shares one anatomy — title / why / source / doors — and a kind
   picks how it opens: a rank numeral, a bullet, a time, a bordered card, or nothing at all. ═══ */
.pk-doc-body .mdbrief { counter-reset: pkbrief; }
.pk-doc-body .mdbrief h2 {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3); margin: 26px 0 10px; padding: 0; border: 0;
}
.pk-doc-body .mdbrief > h2:first-child { margin-top: 8px; }
.pk-doc-body .mdbrief > blockquote {
  margin: 0 0 4px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.45; color: var(--ink);
}
.pk-doc-body .mdbrief > blockquote p { margin: 0; }
.pk-doc-body .mdbrief .mdcall { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 14px; }
.pk-doc-body .mdbrief .mdcall-h { display: block; }
.pk-doc-body .mdbrief .mdcall-k {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 2px;
}
.pk-doc-body .mdbrief .mdcall-t { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.pk-doc-body .mdbrief .mdcall-b { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.pk-doc-body .mdbrief .mdcall-b p { margin: 0 0 4px; }
.pk-doc-body .mdbrief .mdcall-b > :last-child { margin-bottom: 0; }

/* [!push] — the one filled surface, so it reads first */
.pk-doc-body .mdbrief .mdcall[data-kind="push"] { background: var(--sunk); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.pk-doc-body .mdbrief .mdcall[data-kind="push"] .mdcall-t { font-size: 17px; }

/* [!todo] — a rank numeral drawn by a counter, never a digit anyone typed */
.pk-doc-body .mdbrief .mdcall[data-kind="todo"] { counter-increment: pkbrief; position: relative; padding: 12px 0 0 26px; border-top: 1px solid var(--line); }
.pk-doc-body .mdbrief .mdcall[data-kind="todo"]::before {
  content: counter(pkbrief); position: absolute; left: 0; top: 11px;
  font-size: 19px; font-weight: 500; line-height: 1.1; color: var(--ink3); font-variant-numeric: tabular-nums;
}
.pk-doc-body .mdbrief .mdcall[data-kind="todo"] .mdcall-k { display: none; }

/* [!update] — not ranked, so a marker rather than a number */
.pk-doc-body .mdbrief .mdcall[data-kind="update"] { position: relative; padding: 0 0 0 18px; margin-bottom: 12px; }
.pk-doc-body .mdbrief .mdcall[data-kind="update"]::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--ink3);
}
.pk-doc-body .mdbrief .mdcall[data-kind="update"] .mdcall-k { display: none; }

/* [!meeting] — the time is lifted out of the flow, the row indented past it */
.pk-doc-body .mdbrief .mdcall[data-kind="meeting"] { position: relative; padding: 9px 0 0 5.2rem; border-top: 1px solid var(--line); margin-bottom: 0; }
.pk-doc-body .mdbrief .mdcall[data-kind="meeting"] .mdcall-t strong {
  position: absolute; left: 0; width: 4.8rem; font-weight: 400; font-size: 13.5px;
  color: var(--ink3); font-variant-numeric: tabular-nums; line-height: 1.35;
}

/* [!card] — the queue's own look, so a card in the brief is recognisably the same object */
.pk-doc-body .mdbrief .mdcall[data-kind="card"] { border: 1px solid var(--ink4); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.pk-doc-body .mdbrief .mdcall[data-kind="card"] .mdcall-t { font-size: 15px; }
.pk-doc-body .mdbrief .mdcall[data-kind="card"] ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-doc-body .mdbrief .mdcall[data-kind="card"] li {
  font-size: 13px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink2);
}
.pk-doc-body .mdbrief .mdcall[data-kind="card"] li[data-armed="1"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* the card's own send: sized for the callout, never the answer bar's send elsewhere */
.pk-doc-body .mdbrief .mdcall[data-kind="card"] .pk-af-send {
  display: inline-flex; align-items: center; flex: none;
  min-height: 44px; margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--sunk); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pk-doc-body .mdbrief .mdcall[data-kind="card"] .pk-af-send:disabled { color: var(--ink3); cursor: default; }
.pk-doc-body .mdbrief .mdcall[data-kind="card"] .pk-af-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* a card the queue does not hold: an absence with a reason, never a live-looking row */
.pk-af-why { color: var(--you); margin-top: 8px; font-size: 13px; font-style: italic; }

/* [!sources] — one summary line over a table, folded behind its own <details> */
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .mdcall-k { color: var(--ink2); }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .mdcall-t { font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] table { font-size: 12.5px; margin: 6px 0 0; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] th,
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] td { padding: 3px 8px 3px 0; border: 0; color: var(--ink3); line-height: 1.4; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] td:first-child { color: var(--ink2); white-space: nowrap; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold > .pk-src-sum {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; margin: -12px 0; padding: 12px 0; list-style: none;
}
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold > .pk-src-sum::-webkit-details-marker { display: none; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold > .pk-src-sum::after { content: "\25B8"; font-size: 11px; color: var(--ink3); }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold[open] > .pk-src-sum::after { content: "\25BE"; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold > .pk-src-sum .mdcall-h { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pk-doc-body .mdbrief .mdcall[data-kind="sources"] .pk-src-fold table { margin-top: 10px; }

/* the counts, three across inside a brief (the tiles' own auto-fit rule above covers every other case) */
.pk-doc-body .mdbrief .mdtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-doc-body .mdbrief .mdtile { padding: 9px 8px; }
.pk-doc-body .mdbrief .mdtile-v { font-size: 20px; }

/* a door is a pill button; `chat:`/`card:` are the only in-app schemes, plus `flight:` below */
.pk-doc-body .mdbrief a[data-door] {
  display: inline-block; position: relative; margin: 14px 8px 0 0; padding: 8px 12px;
  font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
}
/* 44px of target without 44px of ink — an invisible hit area around the visible pill */
.pk-doc-body .mdbrief a[data-door]::before { content: ""; position: absolute; inset: -8px -5px; }
.pk-doc-body .mdbrief .mdcall[data-kind="push"] a[data-door] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-doc-body .mdbrief a[data-door]:active { opacity: .72; }
.pk-doc-body .mdbrief a[data-door]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* a door the body cannot open says so instead of looking pressable */
.pk-doc-body .mdbrief a[data-door][data-dead] { color: var(--ink3); border-color: var(--line); pointer-events: none; }
/* a paragraph holding a door becomes a wrapping row, so a pair of doors never splits from its
   source line; an engine without :has() keeps the plain paragraph flow instead of a half rule */
@supports selector(:has(*)) {
  .pk-doc-body .mdbrief .mdcall-b p:has(> a[data-door]) { display: flex; flex-wrap: wrap; align-items: center; }
  .pk-doc-body .mdbrief .mdcall-b p:has(> a[data-door]) > em { flex: 1 1 100%; font-style: normal; font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
}

/* three door weights, one per kind of act: flight: FILLS (it spends money), card: reads as text,
   chat: keeps the plain outline above */
.pk-doc-body .mdbrief a[data-door="flight"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-doc-body .mdbrief a[data-door="flight"][data-armed] { opacity: .72; }
.pk-doc-body .mdbrief a[data-door="card"] { border-color: transparent; padding-left: 4px; padding-right: 4px; color: var(--ink2); }

/* the row's own square: its rank, and its done control (mounted by briefdoc.js on every push/todo
   row) — a pseudo-element cannot be pressed, so the numeral becomes a real button and absorbs the
   row's state instead of a separate chip beside the doors */
.pk-doc-body .mdbrief .mdcall[data-marked][data-kind="todo"]::before { content: none; }
.pk-doc-body .mdbrief .mdcall[data-marked][data-kind="todo"] { padding-left: 0; }
.pk-doc-body .mdbrief .pk-doc-mark {
  float: left; margin: 1px 10px 0 0; width: 26px; min-width: 26px; height: 26px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink3); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
/* 44px of target without 44px of ink, same trick as the doors above */
.pk-doc-body .mdbrief .pk-doc-mark::before { content: ""; position: absolute; width: 44px; height: 44px; margin: -9px 0 0 -9px; }
.pk-doc-body .mdbrief .pk-doc-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pk-doc-body .mdbrief .mdcall[data-kind="push"] .pk-doc-mark { border-color: var(--line); }
/* done is the whole row saying so, not a tick in a corner: it keeps its place in reading order and
   loses its ink and its doors, because there is nothing left to press */
.pk-doc-body .mdbrief .mdcall[data-state="done"] .pk-doc-mark { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.pk-doc-body .mdbrief .mdcall[data-state="done"] .mdcall-t { color: var(--ink3); text-decoration: line-through; text-decoration-thickness: 1px; }
.pk-doc-body .mdbrief .mdcall[data-state="done"] .mdcall-b { color: var(--ink3); }
.pk-doc-body .mdbrief .mdcall[data-state="done"] a[data-door] { display: none; }
.pk-doc-body .mdbrief .mdcall[data-state="done"][data-kind="push"] { background: transparent; }
/* running: the engine has it — not done, not idle, never a spinner (nothing here watches the run);
   v2 carries a dedicated run token, so this reads --run rather than plain ink */
.pk-doc-body .mdbrief .mdcall[data-state="running"] .pk-doc-mark { color: var(--run); border-color: var(--run); }

/* the run gate — the one door in a document that spends money. A tap only opens this strip under
   the row; the verb fires on "Run it" alone */
.pk-doc-body .mdbrief .pk-doc-run { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--you); border-radius: 12px; }
.pk-doc-body .mdbrief .pk-doc-run-v { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-bottom: 6px; }
.pk-doc-body .mdbrief .pk-doc-run-l { font-size: 13px; color: var(--ink2); line-height: 1.45; }
.pk-doc-body .mdbrief .pk-doc-run-row { display: flex; gap: 10px; margin-top: 12px; }
.pk-doc-body .mdbrief .pk-doc-run-go,
.pk-doc-body .mdbrief .pk-doc-run-no {
  min-height: 44px; padding: 11px 16px; font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pk-doc-body .mdbrief .pk-doc-run-go { color: var(--bg); background: var(--you); border: 1px solid var(--you); }
.pk-doc-body .mdbrief .pk-doc-run-go[disabled] { opacity: .6; }
.pk-doc-body .mdbrief .pk-doc-run-no { color: var(--ink2); background: transparent; border: 1px solid var(--line); }
.pk-doc-body .mdbrief .pk-doc-run-go:focus-visible,
.pk-doc-body .mdbrief .pk-doc-run-no:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the engine's own refusal, printed where the button was — a teammate's node refuses this verb for
   reasons this screen cannot enumerate */
.pk-doc-body .mdbrief .pk-doc-run-no-why { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--you); }

/* ═══ THE BRIEF ON THE GLASS — sectioning (briefdoc.js wraps a brief at paint time into a header
   and one section per h2) and, from 1100px of page width up, six blocks balanced into two columns
   the engine breaks, never a template that assigns them. `.pk-brief`/`.pk-brief-six` apply even
   when a document reads as a brief only by its h2 slugs (no engine `.mdbrief` marker); the profile
   above stays `.mdbrief`-only, exactly as v1 kept the two separate. ═══ */
.pk-doc-body .pk-brief > .pk-brief-head,
.pk-doc-body .pk-brief > .pk-brief-sec { max-width: 720px; min-width: 0; }
.pk-doc-body .mdbrief.pk-brief > .pk-brief-head > h1 { margin-top: 0; }
.pk-doc-body .mdbrief.pk-brief > .pk-brief-head > blockquote {
  margin: 0 0 4px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.45; color: var(--ink);
}
.pk-doc-body .mdbrief.pk-brief > [data-block="yesterday"] > h2:first-child { margin-top: 8px; }

@container pk-page (min-width: 1100px) {
  .pk-doc-body .pk-brief.pk-brief-six { display: block; columns: 2; column-gap: clamp(28px, 4vw, 64px); }
  .pk-doc-body .pk-brief.pk-brief-six > .pk-brief-head { column-span: all; max-width: none; }
  .pk-doc-body .pk-brief.pk-brief-six > .pk-brief-head > * { max-width: 720px; }
  .pk-doc-body .pk-brief.pk-brief-six > .pk-brief-sec { break-inside: avoid; }
}