/* ============================================================================
   css/project.css — the Project page + task/goal sheets (design §4.3, §10).
   Owner unit: P03 (prp/2026-09-26-pocket-web-v2/units/P03.md).

   Rendered through css/kit.css tokens only — no inline styles, no inline scripts (CSP, design
   §11). Reuses kit.css's `.pk-btn`/`.pk-actions`/`.absence`/`.bar` where the shapes already match
   and adds the classes this page's own markup needs (views/project.js, views/task.js,
   views/goal.js). No page-kit primitive is redefined here.
   ============================================================================ */

/* ---- head ---------------------------------------------------------------------------------- */
.pk-phead { padding: 20px 20px 4px; max-width: 720px; margin: 0 auto; }
/* the phone-only back affordance (prototype `.pback`, head.html:717/737) — hidden by default,
   shown only inside the phone container band below. Desktop's back affordance is the sidebar's
   own project list, already on the glass, so no breadcrumb duplicates it there. */
.pk-pback {
  display: none; align-items: center; gap: 4px; font-size: 13px; color: var(--ink3);
  margin-bottom: 10px; background: none; border: none;
}
.pk-pback-ico { font-size: 16px; line-height: 1; }
.pk-phead-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; }
.pk-h1 {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 60;
  font-weight: 350; font-size: 30px; line-height: 1.15; color: var(--ink); flex: 1 1 auto;
  margin: 0;
}
/* the lede row: a state dot beside the note (prototype `.pnote2`, head.html:157-158) */
.pk-pnote { display: flex; gap: 12px; margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink2); max-width: 62ch; }
.pk-pnote .pk-side-dot { margin-top: 10px; flex-shrink: 0; }
.pk-pmeta {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3);
  margin-top: 10px; flex-wrap: wrap;
}
.pk-sep { color: var(--ink4); }
/* the autonomy word: an underlined link (prototype `.meta button`, head.html:80) */
.pk-meta-link {
  color: var(--ink2); text-decoration: underline; text-decoration-color: var(--ink4);
  text-underline-offset: 3px; background: none; border: none; font-size: inherit;
}
.pk-meta-link:hover { color: var(--ink); }
@container pk-page (max-width: 600px) {
  .pk-pback { display: inline-flex; }
}

/* ---- section heading, shared by every block below (prototype `.sh`/`.sh h2`, head.html:81-84) -
   Small, muted, uppercase-ish sans — NOT a serif display heading. v2 originally rendered these as
   19px serif h2s (the sheet/card question's own type scale, `.pk-q` below); the design reserves
   serif display type for the page title and a card's own question, and marks a SECTION with a
   small label instead (round 2 fix, his side-by-side against the prototype). */
.pk-sh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 720px; margin: 26px auto 8px; padding: 0 20px;
}
.pk-sh h2 {
  font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink3);
  letter-spacing: .01em; margin: 0; flex: 1;
}
/* the action at the right of a section label ("Add") — prototype `.sh .a`, head.html:83-84 */
.pk-sh-action { font-size: 13px; color: var(--ink3); background: none; border: none; }
.pk-sh-action:hover { color: var(--ink); }

/* ---- Your call ------------------------------------------------------------------------------ */
.pk-card {
  max-width: 720px; margin: 0 auto; padding: 16px 20px; background: var(--card);
  border-radius: 16px; box-shadow: var(--sh);
}
/* the column .td-ask (Today's own card, reused here — round 2) sits in — width/centering ONLY,
   no chrome of its own, since .td-ask already carries its own background/padding/shadow (round 3
   fix: reusing .td-ask bare left it unconstrained, full page-host width). */
.pk-card-col { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.pk-q {
  font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 350;
  font-size: 19px; line-height: 1.3; color: var(--ink); margin: 0 0 12px;
}
.pk-cardfoot { display: flex; gap: 6px; margin-top: 10px; }
.pk-laters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Goals (round 2: real bar/%/date, prototype `.goal2`, head.html:505-515) ------------------- */
.pk-goals { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.pk-goal-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px 58px; gap: 16px;
  align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0; flex: none; height: auto;
  font-size: 14.5px;
}
.pk-goal-row:hover { background: rgba(120, 100, 70, .05); }
.pk-goal-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.pk-goal-pc { font-weight: 600; text-align: right; font-size: 14px; color: var(--ink); }
.pk-goal-pc.y { color: var(--you); }
.pk-goal-due { font-size: 12.5px; color: var(--ink3); text-align: right; }
/* a goal with no measure — no bar, no invented %, spans the bar+pct+due columns */
.pk-goal-nopace { grid-column: 2 / 5; font-size: 12.5px; color: var(--ink3); text-align: right; }
/* the legend row under the goal list (prototype `.gkey`, head.html:511-515) */
.pk-gkey { display: flex; gap: 16px; font-size: 12px; color: var(--ink3); padding: 8px 4px 0; align-items: center; max-width: 720px; margin: 0 auto; }
.pk-gkey span { display: inline-flex; align-items: center; gap: 6px; }
.pk-gkey u { display: inline-block; width: 2px; height: 10px; background: var(--ink3); }
.pk-gkey i { display: inline-block; width: 14px; height: 4px; border-radius: 4px; background: var(--you); }
.pk-gkey-hint { margin-left: auto; }
@container pk-page (max-width: 600px) {
  .pk-goal-row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 6px; }
  .pk-goal-row .bar { grid-column: 1 / 3; grid-row: 2; }
  /* `.pk-gkey span { display: inline-flex }` above (specificity 0,1,1) otherwise outranks a bare
     `.pk-gkey-hint` (0,1,0) regardless of source order — measured: the hint stayed on the glass
     at 390px, computed `display: flex`, while this rule's own `display: none` never applied. The
     `.pk-gkey-due` sibling escapes the same trap only because nothing else styles a bare `span`
     there with a matching specificity — the fix is to match `.pk-gkey span`'s own shape, not to
     out-specify it by accident. */
  .pk-goal-due { display: none; }
  .pk-gkey span.pk-gkey-hint { display: none; }
}

/* ---- Plan (search, group, list, bulk) --------------------------------------------------------- */
.pk-ptools {
  display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto 8px;
  padding: 0 20px; flex-wrap: wrap;
}
.pk-input {
  height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  padding: 0 12px; font-size: 14.5px; color: var(--ink); outline: 0; flex: 1 1 160px; min-width: 0;
}
.pk-input::placeholder { color: var(--ink3); }
.pk-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pk-seg { display: inline-flex; gap: 2px; background: var(--sunk); padding: 3px; border-radius: 10px; }
.pk-seg .pk-btn { height: 28px; padding: 0 10px; font-size: 12.5px; border: 0; background: none; flex: none; }
.pk-seg .pk-btn.on { background: var(--card); color: var(--ink); box-shadow: var(--sh); }

.pk-gl {
  display: flex; align-items: baseline; gap: 8px; max-width: 720px; margin: 14px auto 4px;
  padding: 0 20px; font-size: 12.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .03em;
}
.pk-gl-n { color: var(--ink4); }
.pk-rows { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.pk-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pk-task-row.sel { background: var(--sunk); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.pk-check { width: 18px; height: 18px; flex: none; }
.pk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); flex: none; }
.pk-dot-active { background: var(--run); }
.pk-dot-blocked { background: var(--you); }
.pk-dot-proposed { background: var(--ink3); }
.pk-dot-later { background: var(--ink4); }
.pk-dot-landed { background: var(--done); }
.pk-task-text {
  flex: 1 1 auto; text-align: left; background: none; border: 0; height: auto; padding: 0;
  font-size: 14.5px; color: var(--ink); white-space: normal;
}
.pk-task-why { font-size: 12.5px; color: var(--ink3); white-space: nowrap; flex: none; }
.pk-row.pk-task-row { align-items: flex-start; }
.pk-task-row > .pk-dot { margin-top: 8px; }
.pk-task-row > .pk-check { margin-top: 2px; }
.pk-task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-task-body .pk-task-text {
  line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}
.pk-task-body .pk-task-why {
  white-space: normal; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.pk-addrow {
  display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 10px auto; padding: 0 20px;
  flex-wrap: wrap;
}
.pk-bulk {
  position: sticky; bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 680px; margin: 14px auto; padding: 10px 14px; background: var(--ink); color: var(--bg);
  border-radius: 14px; box-shadow: var(--shl);
}
.pk-bulk b { font-size: 13px; }

/* ---- Flights ----------------------------------------------------------------------------------- */
.pk-flights { max-width: 720px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 8px; }
.pk-flight-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); }

/* ---- More -------------------------------------------------------------------------------------- */
.pk-more-foot { max-width: 720px; margin: 8px auto 0; padding: 0 20px; display: flex; }
/* `hidden` must win over the list's own display:flex — an author `display` rule on the SAME element
   beats the UA's [hidden]{display:none}, which is why Details opened nothing (2026-09-27). */
.pk-more-list[hidden] { display: none; }
.pk-more-list { max-width: 720px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; }
.pk-more-row {
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; height: auto; padding: 12px 4px; font-size: 14.5px; color: var(--ink); flex: none;
}
.pk-more-row.on { color: var(--you); }
.pk-more-panel {
  max-width: 720px; margin: 10px auto 0; padding: 14px 20px; background: var(--sunk);
  border-radius: 14px; display: flex; flex-direction: column; gap: 10px;
}
.pk-hint { font-size: 13px; color: var(--ink3); margin: 0; }

/* ---- shared button size/tone modifiers this page adds onto kit.css's .pk-btn ------------------- */
.pk-btn.sm { height: 32px; padding: 0 12px; font-size: 13px; flex: none; }
.pk-btn.chip { height: 28px; padding: 0 12px; font-size: 12.5px; border-radius: 999px; flex: none; }
.pk-btn.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-btn.danger { color: var(--you); border-color: var(--you); }
.pk-btn.danger.primary { background: var(--you); border-color: var(--you); color: #fff; }
.pk-btn.icon { width: 38px; flex: none; padding: 0; justify-content: center; }

/* ---- absence lines (design §3.4) — this page's own styling, kit.css tokens only --------------- */
.pk-absence { color: var(--ink3); font-size: 13px; font-style: italic; padding: 8px 20px; max-width: 720px; margin: 0 auto; }

/* ---- the task/goal sheets — shared field rows -------------------------------------------------- */
/* `.pk-task-field` stays a flex row — task.js's own field shapes vary too much for one grid (a
   label+input, a bare input+button, an input+button with no label at all). */
.pk-task-field {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
/* `.pk-goal-field`/`.pk-metric-row` — a real LABEL | VALUE [| actions] GRID (his fidelity report,
   2026-09-27: "KPI value inputs start at a different x per row — label width drives it, no grid").
   A FIXED track width, not each row's own content, is what makes every sibling row agree — two
   sibling grid boxes never share a track by content size alone without subgrid, which nothing here
   uses. */
.pk-goal-field {
  display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
  align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pk-metric-row {
  display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pk-field-label { font-size: 13px; color: var(--ink3); }
.pk-metric-name {
  font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the sheet's OWN narrow band (css/frame.css's `.pk-sheet-content` container — never the page's)
   stacks the grid instead of crowding a value column and two chip buttons into a squeeze. */
@container pk-sheet (max-width: 480px) {
  .pk-goal-field { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .pk-metric-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .pk-metric-row .pk-metric-name, .pk-metric-row .pk-input { grid-column: 1 / -1; }
}

/* ---- container queries: the page column, not the viewport (design §3.5) ----------------------- */
@container pk-page (min-width: 900px) {
  .pk-phead, .pk-sh, .pk-card, .pk-card-col, .pk-goals, .pk-ptools, .pk-gl, .pk-rows, .pk-addrow,
  .pk-flights, .pk-more-list, .pk-more-panel, .pk-more-foot, .pk-absence {
    max-width: 900px;
  }
}

/* ---- Flights, v14's shape: one status line, the quiet acts beside it (2026-09-27) ------------- */
.pk-flight-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pk-flight-status { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-flight-row { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 14px; }
.pk-flight-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.pk-flight-row.live .pk-flight-dot { background: var(--you); }
.pk-flight-acts { display: flex; gap: 6px; flex: none; }
.pk-btn.pk-flight-act {
  width: auto; flex: none; height: 30px; min-height: 0; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink2); font-size: 13px;
}
.pk-btn.pk-flight-act:hover { color: var(--ink); border-color: var(--ink3); }
.pk-btn.pk-flight-act.danger { color: var(--warn, var(--you)); }
.pk-btn.pk-flight-fan { margin-top: 8px; }
/* the hold fill: a band that crosses the button in exactly the hold time */
.pk-hold { position: relative; overflow: hidden; }
.pk-hold::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: currentColor; opacity: .16; pointer-events: none;
}
.pk-hold.holding::after { transform: scaleX(1); transition: transform 3s linear; }
.pk-skip-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pk-skip-row { font-size: 12.5px; color: var(--ink3); line-height: 1.45; text-align: left; }
.pk-flights .pk-why { color: var(--ink3); text-align: left; font-size: 12.5px; }