/* css/frame.css — the v2 shell chrome (prp/2026-09-26-pocket-web-v2/units/U03.md, design §3.5).
   Sidebar/rail/tabbar, the dock host, and the layout bands — container queries on `#pk-app`
   itself, and on the page host (`.pk-page-slot`) for the page's own internal rules, exactly as
   the prototype (hub v14) does it. Tokens come from tokens.css/css/kit.css (U02); nothing here
   defines a new one. */

#pk-app {
  container-type: inline-size;
  container-name: pk-app;
  /* the containing block for .pk-askbar's absolute grid-area placement (≥761px): without a
     positioned grid container the bar's box is the viewport, whatever its grid-column says */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* THREE rows, not two (round 2 fix): `.pk-askbar` and `.pk-tabbar` used to share row 2 — both
     `position:static` grid items with an OPAQUE background, so a grid cell with two static
     occupants stretches BOTH to the row's full auto height and paints them in DOM order, and
     `.pk-askbar` (created after `.pk-tabbar` in frame.js's `shell()`) painted its own `var(--side)`
     rectangle straight over the tab bar's icons and labels — invisible in every band, every theme,
     because the two elements share the same background token and the row's height was always the
     TALLER of the two (the tab bar's), so an "empty" askbar was never actually zero-height.
     Confirmed live: `document.elementFromPoint()` over a tab bar label returned `.pk-askbar`, not
     the tab. The askbar now owns its own row, ABOVE the tab bar — the prototype's own stacking
     order (`.bar2` floats above `.tabbar`, head.html:471). */
  grid-template-rows: 1fr auto auto;
  /* A BOUNDED height, not `min-height`: `min-height: 100vh` let the grid grow TALLER than the
     glass on a tall page, so the whole document scrolled and the phone tab bar (row 2) drifted off
     the bottom of the viewport at 390px instead of staying pinned while `.pk-main` (row 1) scrolled
     internally (his report). `100vh` first as the fallback for a browser with no `dvh` support,
     `100dvh` after it — the dynamic viewport height, which on iOS Safari shrinks with the address
     bar instead of hiding content under it the way a bare `100vh` does. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
}

/* ---- entry surface: full screen, no shell (design §3.1 — pair, signin) ------------------------
   WR audit, 2026-09-27: a signed-out browser opening Pocket saw the sidebar (Today / Projects /
   All projects / Journal / Settings, the account-usage footer), the floating ask bar and, on the
   phone, the bottom tab bar drawn around an entry screen that carries no plane and lights no tab —
   because none of this chrome was ever gated on the SURFACE of the route being mounted; it painted
   unconditionally the moment frame.js loaded and on every `onRoute` after. `js/frame.js`'s
   `page(host)` toggles `body.pk-entry-open` from the mounted host's own `data-surface` (written by
   `js/router.js`'s `newPageHost`, off the SAME `SURFACE_OF` table §3.1 declares) — the one signal
   this file hides the chrome on; leaving the entry route (a sign-in success) drops the class and
   every rule below stops applying, in the same repaint that puts the shell back. */
body.pk-entry-open .pk-sidebar,
body.pk-entry-open .pk-tabbar,
body.pk-entry-open .pk-askbar,
body.pk-entry-open .pk-resume-pill { display: none; }
body.pk-entry-open #pk-app { grid-template-columns: 1fr; }
body.pk-entry-open .pk-main { grid-column: 1; }

/* ---- sidebar / rail (>=761; a phone never sees this element at all) -------------------------
   Prototype: app.js:108-118 (side()) + head.html's own rules (.side/.brand/.si/.sl/.plist/.sfoot/
   .lims, head.html:44-67). Class names here are `pk-` prefixed twins of those, kept 1:1 so this
   block reads next to the prototype's without translation. */
.pk-sidebar {
  /* ALL rows, not just row 1 (round 3 fix): the sidebar used to stop at the bottom of the main
     content row, so wherever another row had real height (the askbar's own grid row, round 2's
     fix) column 1 beneath the sidebar was #pk-app's bare background instead of the sidebar's own
     — a pale strip under the sidebar's bottom-left corner, his screenshot at 1440. Spanning every
     row keeps the sidebar running the full height of the window regardless of what else is in
     flow below row 1, matching the prototype (its sidebar is a CSS grid row of its own,
     full-height by construction, head.html:39 `#root{grid-template-rows: ...}` has no
     row the sidebar does not span either). */
  grid-row: 1 / -1;
  grid-column: 1;
  display: none;
  flex-direction: column;
  width: 252px;
  padding: 20px 12px 18px;
  border-right: 1px solid var(--line);
  background: var(--side);
  overflow-y: auto;
  min-height: 0;
}

/* brand row: P mark + wordmark + collapse toggle (head.html:46-50, 494-495) */
.pk-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 22px; flex-shrink: 0; }
.pk-logo {
  width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px; flex-shrink: 0;
}
.pk-wordmark { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 20px; }
.pk-sidebar-brand .pk-rail-toggle { margin-left: auto; }
.pk-rail-toggle {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: none; border: none; color: var(--ink3); cursor: pointer; flex-shrink: 0;
}
.pk-rail-toggle:hover { background: rgba(120, 100, 70, .08); color: var(--ink); }

/* a nav row: icon + label + (badge | pct), one shape shared by Today/All projects/Journal/Settings
   and by a project row (head.html:51-57) */
.pk-sidebar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink2);
  text-decoration: none;
  flex-shrink: 0;
}
.pk-sidebar-row:hover, .pk-sidebar-row:focus-visible { background: rgba(120, 100, 70, .07); color: var(--ink); }
.pk-sidebar-row.pk-lit { background: var(--card); color: var(--ink); box-shadow: var(--sh); font-weight: 500; }
.pk-sidebar-ico { width: 16px; display: grid; place-items: center; color: var(--ink3); flex-shrink: 0; }
.pk-sidebar-row:hover .pk-sidebar-ico, .pk-sidebar-row.pk-lit .pk-sidebar-ico { color: var(--ink); }
.pk-sidebar-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--you); color: #fff; font-size: 11.5px; font-weight: 600;
  display: grid; place-items: center; flex-shrink: 0;
}

/* "Projects" section label + its "new project" button (head.html:58-59) */
.pk-sidebar-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink3); padding: 0 10px; margin: 22px 0 6px; flex-shrink: 0;
}
.pk-sidebar-add {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: none; border: none; color: var(--ink3); cursor: pointer;
}
.pk-sidebar-add:hover { color: var(--ink); }

/* project rows, scrollable, "All projects" as their last row (head.html:60) */
.pk-sidebar-projects { overflow: auto; min-height: 0; flex: 1; }
.pk-side-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink4); flex-shrink: 0; }
.pk-side-dot-you { background: var(--you); }
.pk-side-dot-run { background: var(--run); }
.pk-side-dot-done { background: var(--done); }
.pk-side-dot-off { background: transparent; border: 1.5px solid var(--ink4); }
.pk-sidebar-project-name { font-family: var(--sans); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sidebar-project-pct { font-size: 12px; color: var(--ink3); flex-shrink: 0; }

/* footer: Journal, Settings, the usage widget (head.html:61-67) */
.pk-sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 10px; flex-shrink: 0; }
.pk-sidebar-usage {
  display: block; width: 100%; padding: 10px; border-radius: 10px; margin-top: 4px;
  background: none; border: none; color: inherit; cursor: pointer; text-align: left; font: inherit;
}
.pk-sidebar-usage:hover { background: rgba(120, 100, 70, .07); }
.pk-sidebar-usage-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 12px; color: var(--ink3); height: 22px; }
/* the middle grid cell (`minmax(0, 1fr)`) — an unclamped label can only overflow it, since a
   grid track this narrow has no natural wrap point of its own (test_v2_css_coverage.mjs). */
.pk-sidebar-usage-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sidebar-usage-row b { font-weight: 500; color: var(--ink2); text-align: right; }
.pk-sidebar-usage-warn { color: var(--you) !important; }
.pk-sidebar-usage-bar { position: relative; height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; }
.pk-sidebar-usage-bar i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--ink3); border-radius: 2px; }
.pk-sidebar-usage-bar.pk-sidebar-usage-full i { background: var(--you); }
.pk-sidebar-usage-next, .pk-sidebar-usage-absence { font-size: 12px; color: var(--ink3); margin-top: 8px; line-height: 1.3; padding: 0 2px; }

/* rail (collapsed sidebar): icon-only width, kept as a class so ⌘\ has one thing to toggle
   (head.html:496-503) */
body.pk-rail-collapsed .pk-sidebar { width: 64px; padding: 16px 10px; align-items: center; }
body.pk-rail-collapsed .pk-sidebar-brand { flex-direction: column; gap: 8px; padding: 0; margin-bottom: 10px; }
body.pk-rail-collapsed .pk-wordmark { display: none; }
body.pk-rail-collapsed .pk-sidebar-brand .pk-rail-toggle { margin-left: 0; }
body.pk-rail-collapsed .pk-sidebar-row { width: 42px; height: 38px; padding: 0; justify-content: center; position: relative; }
body.pk-rail-collapsed .pk-sidebar-label-text,
body.pk-rail-collapsed .pk-sidebar-project-name,
body.pk-rail-collapsed .pk-sidebar-project-pct { display: none; }
body.pk-rail-collapsed .pk-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; margin-left: 0;
  font-size: 10px; padding: 0 4px;
}
body.pk-rail-collapsed .pk-side-dot { position: absolute; right: 5px; bottom: 6px; }
body.pk-rail-collapsed .pk-sidebar-label { display: none; }
body.pk-rail-collapsed .pk-sidebar-usage { display: none; }

/* ---- phone tabbar (<=600 only) --------------------------------------------------------------- */
.pk-tabbar {
  display: none;
  grid-row: 3 / 4;
  grid-column: 1 / 4;
  border-top: 1px solid var(--line);
  background: var(--side);
  /* the iOS home-indicator strip — `viewport-fit=cover` (index.html) is what makes this report a
     real number instead of 0 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pk-tab {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--ink3);
  font-family: var(--sans);
  font-size: 11px;
  padding: 8px 0 10px;
}
.pk-tab[data-glyph]::before { content: attr(data-glyph); font-size: 18px; }
.pk-tab-lit { color: var(--you); }

/* ---- the page host --------------------------------------------------------------------------- */
.pk-main {
  grid-row: 1 / 2;
  grid-column: 2;
  container-type: inline-size;
  container-name: pk-page;
  overflow-y: auto;
  min-height: 100%;
  /* the containing block for the floating askbar at >=761px (below) — an absolutely positioned
     descendant anchors to THIS box, not the scrolled content inside it, which is what keeps it
     pinned to the visible bottom of the pane while the page scrolls underneath. */
  position: relative;
}
.pk-page-slot { min-height: 100%; }
main.pk-page { min-height: 100%; }

/* ---- the sheet host: a floating drawer over the current page (design §3.5/§10 "only the sheet
   and dock slides"; prototype `.scrim`/`.sheet`, head.html:254-256) ---------------------------
   His fidelity report, 2026-09-27: "goals page opens in the middle of the screen, but in design
   it opens from the right side." This host used to center a BOTTOM sheet at every width
   (`align-items:flex-end; justify-content:center`, the v1 shape) — never what v14 draws. v14 has
   ONE sheet: a right-inset floating card (12/12/12px from top/right/bottom, 520px wide, 24px
   radius on all four corners) above its single breakpoint (760px), and a true full-bleed sheet at
   or below it — never a bottom sheet at any width. `.pk-sheet` stays the fixed, full-viewport
   backdrop (and the click target `js/frame.js`'s listener closes on); `.pk-sheet-content` is the
   card, absolutely positioned INSIDE it — v14's own `.scrim`+`.sheet` pair, one host each. */
.pk-sheet {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(30, 20, 5, .18);
  animation: pk-sheet-fade .2s;
}
.pk-sheet[hidden] { display: none; }
@keyframes pk-sheet-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-sheet { animation: none; } }
/* THE PANEL/BODY SPLIT (his fidelity report, 2026-09-27: "text inside doesn't fit to the block…
   How to close this block?"). `.pk-sheet-content` is the visual panel — shape, background, the
   close button — and is NEVER cleared by a view's own repaint. `.pk-sheet-body` is what
   `js/frame.js` hands the router to mount into, and every sheet view's own `HOST.innerHTML = ""`
   (goal.js/task.js/etc.'s `paint()`) only ever touches THIS inner box — a close button living
   inside it would be wiped on the very first repaint it reacts to. Establishes its OWN container
   ("pk-sheet"), because a sheet's real width is never the page's — `css/project.css`'s
   `@container pk-sheet` rows restack on THIS, never `@container pk-page`. */
.pk-sheet-content {
  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;
  container-type: inline-size;
  container-name: pk-sheet;
  animation: pk-sheet-slide .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pk-sheet-slide { from { transform: translateX(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-sheet-content { animation: none; } }
/* <=760 (phone and the Fold band): the one breakpoint v14 draws for its sheet — full bleed, no
   floating card. Matches the container's own phone+Fold cutoffs used everywhere else in this
   file rather than introducing a third value. */
@container pk-app (max-width: 760px) {
  .pk-sheet-content {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; max-width: 100%;
    border-radius: 0;
  }
}
.pk-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: var(--sunk);
  color: var(--ink2);
  cursor: pointer;
}
.pk-sheet-close:hover { background: var(--line); color: var(--ink); }
.pk-sheet-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@container pk-app (max-width: 760px) {
  .pk-sheet-close { top: calc(10px + env(safe-area-inset-top, 0px)); }
}
/* THE ONE GUTTER EVERY SHEET GETS. Before this, only `.pk-sh`/`.pk-addrow`/`.pk-goals`/
   `.pk-absence` self-padded (each carries its own `padding: 0 20px` for use on a PAGE, whose own
   host is unpadded the same way) — everything else a sheet view puts directly on its mount host
   (`.pk-goal-field`/`.pk-metric-row`/`.pk-task-field`, `P.moment`'s own `.pk-voice`/`.pk-block`/
   `.pk-actions`/`.pk-why`, used by policy.js/body.js) relied on an ancestor padding no sheet ever
   supplied, and sat flush against the glass instead. Giving THIS box the gutter fixes every sheet
   at once; the four self-padding classes are neutralised below so they read 20px, not 40. */
.pk-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 44px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.pk-sheet-body > .pk-sh,
.pk-sheet-body > .pk-addrow,
.pk-sheet-body > .pk-goals,
.pk-sheet-body > .pk-absence {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---- the sheet content kit: the "say" line, prop rows, the 3-stat measure grid and the sticky
   footer action bar — v14's `.say`/`.props`/`.prop`/`.measure`/`.shf` (head.html:263-267,
   284-285), `pk-` prefixed and living here (not css/project.css) because every sheet — task, goal,
   doc, policy, body — can reach for the same shapes, the same way `.pk-sh`/`.pk-addrow` already do
   above. goal.js and task.js are its first callers. */
.pk-sheet-title {
  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);
}
.pk-say {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.5;
}
.pk-say::before { content: "\2726"; color: var(--you); flex: none; }
.pk-props { margin-top: 20px; border-top: 1px solid var(--line); }
.pk-prop {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 14px;
}
.pk-prop-k { color: var(--ink3); font-size: 13px; }
.pk-prop-v { min-width: 0; overflow-wrap: break-word; }
@container pk-sheet (max-width: 420px) {
  .pk-prop { grid-template-columns: 96px minmax(0, 1fr); }
  .pk-prop-a { grid-column: 2; }
}
.pk-measure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pk-measure > div { background: var(--sunk); border-radius: 12px; padding: 12px 14px; }
.pk-measure b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-weight: 350;
  font-size: 28px;
  line-height: 1;
}
.pk-measure span { font-size: 12px; color: var(--ink3); }
.pk-blk { margin-top: 26px; }
.pk-blk-h { font-size: 12.5px; font-weight: 600; color: var(--ink3); margin-bottom: 8px; }
.pk-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  background: var(--sunk);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink2);
  word-break: break-all;
}
/* the sticky footer action bar: pinned to the visible bottom of `.pk-sheet-body`'s own scroll
   box (v14's `.shf` sits OUTSIDE the scrollable `.shb` entirely; here the mount host IS the
   scroller, so `position: sticky` on its last child reaches the same result with no second host
   for a view to keep in sync — it rides `.pk-sheet-body`'s own repaint, nothing else to wire). */
.pk-sheet-foot {
  position: sticky;
  bottom: calc(-1 * (20px + env(safe-area-inset-bottom, 0px)));
  margin: 24px -20px calc(-1 * (20px + env(safe-area-inset-bottom, 0px)));
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- the dock host: a side panel by default, a bottom sheet on the phone --------------------- */
.pk-dock {
  grid-row: 1 / 2;
  grid-column: 3;
  width: 400px;
  border-left: 1px solid var(--line);
  background: var(--card);
  overflow-y: auto;
}
.pk-dock[hidden] { display: none; }
/* The resize grip (js/frame.js dockGrip): a 8px strip over the dock's left border, drawn only in
   the bands where the dock sits BESIDE the page. `--pk-dock-w` is the width he dragged to. */
.pk-dock { position: relative; }
.pk-dock-grip { display: none; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.pk-dock-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.pk-dock-grip:hover::after, body.pk-dock-resizing .pk-dock-grip::after { background: var(--ink3); }
body.pk-dock-resizing { cursor: col-resize; user-select: none; }
.pk-dock-content { min-height: 100%; }

/* ---- the ask bar slot + the resume pill (design §4.5's answered-while-closed dot) ------------- */
/* the dock's collapsed composer (prototype's `.bar2`/`.cb`, head.html:321-337).
   DEFAULT (<761px, the phone/Fold bands): a real grid row of its own, ABOVE the tab bar (round 2
   fix — #pk-app's three-row grid exists FOR this band, so the tab bar's icons/labels are never
   painted over). >=761px overrides this below: there the prototype's own sidebar runs the full
   window height and the composer FLOATS inside the page column instead of claiming a row that
   would stop the sidebar short (round 3 fix, his screenshot: a pale strip of #pk-app's bare
   background sat under the sidebar's bottom-left corner once the askbar's row had real height). */
.pk-askbar {
  grid-row: 2 / 3;
  grid-column: 2;
  border-top: 1px solid var(--line);
  background: var(--side);
  min-height: 0;
  padding: 10px 16px;
  display: flex;
  justify-content: center;
}
body.pk-dock-open .pk-askbar { display: none; }
@container pk-app (min-width: 761px) {
  /* Out of grid flow entirely — anchored to `.pk-main` (position:relative, above), which is the
     scrollable pane's own fixed-size box, so `bottom:0` stays pinned to the visible bottom of the
     pane regardless of scroll position, never to the page column's own (narrower) width, matching
     the prototype's `.bar2{position:absolute;left:0;right:0;bottom:0}` inside `.main` exactly —
     "the column" in the round 3 ask is `.pk-main`'s own track, the same one `.bar2` centres on in
     the prototype, not the narrower 720-900px reading column `.pk-goals` etc use. */
  /* grid-column 2 / grid-row 1: an absolutely positioned grid child takes its GRID AREA as its
     containing block, so the bar spans the page track only. With `auto` it spanned the whole
     #pk-app (1440px measured) and its fade painted over the sidebar's usage widget (round 3). */
  .pk-askbar {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-top: none;
    background: linear-gradient(to bottom, transparent, var(--bg) 45%);
    padding: 34px 16px 22px;
    pointer-events: none;
  }
  .pk-askbar > * { pointer-events: auto; }
  /* the last card in a scrolled page must not end up permanently hidden under the floating bar */
  .pk-page-slot { padding-bottom: 96px; }
}
.pk-ask {
  width: 100%; max-width: 640px; min-height: 48px; border-radius: 18px; background: var(--card);
  box-shadow: var(--shl); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px;
}
.pk-ask-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 9px; background: var(--sunk); font-size: 12.5px; color: var(--ink2);
  white-space: nowrap; flex-shrink: 0;
}
.pk-ask-in {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px;
  padding: 0 6px; color: var(--ink); font-family: var(--sans);
}
.pk-ask-in::placeholder { color: var(--ink3); }
.pk-ask-tb {
  width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  background: none; border: none; color: var(--ink3); border-radius: 8px; cursor: pointer;
}
.pk-ask-tb:hover { background: rgba(120, 100, 70, .08); color: var(--ink); }
.pk-ask-send {
  width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; flex-shrink: 0; border: none; cursor: pointer;
}
.pk-resume-pill {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shl);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}
.pk-resume-pill[hidden] { display: none; }
/* inside the ask bar it is a chip in the row, not a floating layer */
.pk-ask .pk-resume-pill {
  position: static; flex: none; box-shadow: none; border: 0; background: var(--you-t, var(--sunk));
  padding: 5px 10px; font-size: 12.5px; white-space: nowrap; margin-left: 6px;
}
.pk-resume-pill.pk-answered-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--you);
  margin-right: 8px;
}

/* ================================================================================================
   LAYOUT BANDS (design §3.5) — container queries on #pk-app.
   ================================================================================================ */

/* <=600 (phone): tabbar, no sidebar; the dock is a bottom sheet over the page. */
@container pk-app (max-width: 600px) {
  .pk-tabbar { display: flex; }
  .pk-askbar { grid-column: 1 / 4; }
  .pk-dock {
    grid-row: 1 / 3;
    grid-column: 1 / 4;
    position: fixed;
    /* TOP + BOTTOM, not `inset: auto 0 0 0` with a `max-height` cap (v14 head.html:469's own
       `.dock{top:40px;bottom:0}`, the design source of truth). A fixed box with `top: auto` has
       no definite computed height for a percentage child to resolve against — `max-height` only
       ever CLAMPS a content-driven auto height, it does not make one definite — so
       `.pk-dock-content`'s `height: 100%` (dock.css) fell through to its own content's natural
       height (~1230px, measured) instead of the panel's, and `.pk-dock`'s inherited
       `overflow-y: auto` (below) scrolled the WHOLE panel as one block: the header and composer
       both scrolled out of view together, and neither the working row's clock nor the Send button
       stayed reachable without hunting for it (2026-09-27 fidelity report, "chat doesn't work
       well"). Setting both insets gives the box a definite used height, which is what lets
       `.pk-dock-content`'s flex column actually confine scrolling to `.pk-dock-body` alone. */
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    overflow: hidden;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shl);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .pk-main { grid-column: 1 / 4; }
}

/* A narrowed-to-rail sidebar collapses the SAME way body.pk-rail-collapsed does above — icon-only
   rows, dots pinned to a corner, the wordmark/usage widget/section-label gone. Every container
   band below that puts the sidebar into its rail shape composes this list onto its own selector
   prefix (a plain container-query nesting selector isn't safe to assume everywhere this ships, so
   the declarations are repeated per band rather than shared through one). */
@container pk-app (min-width: 601px) and (max-width: 760px) {
  /* 601-760 (Fold open): ALWAYS rail; the dock COVERS the page and the rail stays on the glass. */
  .pk-sidebar {
    display: flex; width: 64px; padding: 16px 10px; align-items: center;
  }
  .pk-sidebar .pk-sidebar-brand { flex-direction: column; gap: 8px; padding: 0; margin-bottom: 10px; }
  .pk-sidebar .pk-wordmark { display: none; }
  .pk-sidebar .pk-sidebar-brand .pk-rail-toggle { margin-left: 0; }
  .pk-sidebar .pk-sidebar-row { width: 42px; height: 38px; padding: 0; justify-content: center; position: relative; }
  .pk-sidebar .pk-sidebar-label-text, .pk-sidebar .pk-sidebar-project-name, .pk-sidebar .pk-sidebar-project-pct { display: none; }
  .pk-sidebar .pk-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; margin-left: 0; font-size: 10px; padding: 0 4px; }
  .pk-sidebar .pk-side-dot { position: absolute; right: 5px; bottom: 6px; }
  .pk-sidebar .pk-sidebar-label { display: none; }
  .pk-sidebar .pk-sidebar-usage { display: none; }

  body.pk-dock-open .pk-dock {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
    position: static;
    width: auto;
  }
  body.pk-dock-open .pk-main { display: none; }
}

/* 761-1200: full sidebar normally; rail ONLY while docked (the dock sits 360px, beside the page). */
@container pk-app (min-width: 761px) and (max-width: 1200px) {
  .pk-sidebar { display: flex; width: 252px; }
  .pk-dock { width: var(--pk-dock-w, 360px); }
  .pk-dock-grip { display: block; }
  body.pk-dock-open .pk-sidebar {
    width: 64px; padding: 16px 10px; align-items: center;
  }
  body.pk-dock-open .pk-sidebar .pk-sidebar-brand { flex-direction: column; gap: 8px; padding: 0; margin-bottom: 10px; }
  body.pk-dock-open .pk-sidebar .pk-wordmark { display: none; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-brand .pk-rail-toggle { margin-left: 0; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-row { width: 42px; height: 38px; padding: 0; justify-content: center; position: relative; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-label-text, body.pk-dock-open .pk-sidebar .pk-sidebar-project-name, body.pk-dock-open .pk-sidebar .pk-sidebar-project-pct { display: none; }
  body.pk-dock-open .pk-sidebar .pk-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; margin-left: 0; font-size: 10px; padding: 0 4px; }
  body.pk-dock-open .pk-sidebar .pk-side-dot { position: absolute; right: 5px; bottom: 6px; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-label { display: none; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-usage { display: none; }
}

/* >1200: sidebar 252, dock 400 beside the page. Below 1600 the sidebar folds to the rail while
   docked — the one rule that reads TWO axes, so it is its own block rather than a shared one. */
@container pk-app (min-width: 1201px) {
  .pk-sidebar { display: flex; width: 252px; }
  .pk-dock { width: var(--pk-dock-w, 400px); }
  .pk-dock-grip { display: block; }
}
@container pk-app (min-width: 1201px) and (max-width: 1599px) {
  body.pk-dock-open .pk-sidebar {
    width: 64px; padding: 16px 10px; align-items: center;
  }
  body.pk-dock-open .pk-sidebar .pk-sidebar-brand { flex-direction: column; gap: 8px; padding: 0; margin-bottom: 10px; }
  body.pk-dock-open .pk-sidebar .pk-wordmark { display: none; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-brand .pk-rail-toggle { margin-left: 0; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-row { width: 42px; height: 38px; padding: 0; justify-content: center; position: relative; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-label-text, body.pk-dock-open .pk-sidebar .pk-sidebar-project-name, body.pk-dock-open .pk-sidebar .pk-sidebar-project-pct { display: none; }
  body.pk-dock-open .pk-sidebar .pk-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; margin-left: 0; font-size: 10px; padding: 0 4px; }
  body.pk-dock-open .pk-sidebar .pk-side-dot { position: absolute; right: 5px; bottom: 6px; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-label { display: none; }
  body.pk-dock-open .pk-sidebar .pk-sidebar-usage { display: none; }
}

/* ⌘\ always wins over the band's own default, on any band wide enough to have a sidebar. */
@container pk-app (min-width: 601px) {
  body.pk-rail-collapsed .pk-sidebar { width: 64px; }
}