/* ============================================================================
   css/psettings.css — Project settings (design §4.3, §10). Owner unit: P04
   (prp/2026-09-26-pocket-web-v2/units/P04.md).

   THE SHELL (`.sgrid`/`.snav`/`.sbody`/`.sgrp`/`.srows`/`.pback`) is css/settings.css's own —
   global via index.html's <link> tags, so it needs no second copy here. This file adds only what
   that shared shell does not already draw: the eyebrow line under the back link (v14's own
   `.eyebrow`, prototype/head.html:74) and the always-visible "back to the project" nav link
   (settings.css's `.pback` is phone-only by design — the top-level Settings page it was built for
   has nowhere else to go back to; a project's settings page does, on every band). Row-level
   primitives (`.srow`, `.tog`, `.seg`, `.absence`, `.pk-btn`/`.pk-actions`) are kit.css's own; this
   file adds only what views/psettings.js's own markup needs beyond them.
   ============================================================================ */

/* ---- eyebrow — v14's own `.eyebrow` (prototype/head.html:74), this file's own spelling to keep
   it out of any other page's selector reach ------------------------------------------------------ */
.ps-eyebrow { font-size: 13px; color: var(--ink3); margin: 2px 0 0; }

/* ---- the always-visible "back to the project" nav link — `.snav .ps-toproj` out-specifies the
   generic `.snav button` rule (settings.css), which would otherwise box it like a section button */
.snav .ps-toproj {
  display: inline-flex; align-items: center; gap: 4px; height: auto; margin: 0 0 10px 4px;
  padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink3);
  cursor: pointer; justify-content: flex-start;
}
.snav .ps-toproj:hover { color: var(--ink); }
.snav .ps-toproj:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- forms this file's sections open inline — SCOPED to `.sgrid`: unscoped, these copies loaded
   after project.css and reset the project page's own rows (its plan list sat flush left, off the
   page column, and a long parked reason could not wrap — his 2026-09-27 screenshot) (rename, GitHub repo, routine add/ask, status note) -
   these are this file's OWN copies (module boundary — psettings.css depends on nothing outside
   kit.css/settings.css), reusing project.css's naming so the two pages read as one system -------- */
.sgrid .pk-addrow {
  display: flex; align-items: center; gap: 8px; margin: 10px 0; 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; }
.sgrid .pk-rows { margin: 0; }
.sgrid .pk-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sgrid .pk-task-text { flex: 1 1 auto; font-size: 14.5px; color: var(--ink); }
.sgrid .pk-task-why { font-size: 12.5px; color: var(--ink3); white-space: nowrap; flex: none; }

/* a standalone `.seg` (routine template, status color) sits OUTSIDE any `.srow`'s value column —
   kit.css gives it none of its own vertical rhythm, so this section supplies it */
.sec > .seg { margin: 10px 0 18px; }

.ps-hint { font-size: 13px; color: var(--ink3); margin: 8px 0 0; }
.sec > .absence { margin: 10px 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.danger { color: var(--you); border-color: var(--you); }
.pk-btn.danger.primary { background: var(--you); border-color: var(--you); color: #fff; }

/* ---- the project fan-width stepper (`slots.<pid>`, design §4.3) — two `.pk-btn.sm` buttons
   around the live number, SCOPED to `.sgrid` like every other form this file opens inline -------- */
.sgrid .pk-stepper { display: flex; align-items: center; gap: 10px; }
.sgrid .pk-stepper .pk-btn.sm { width: 32px; padding: 0; }
.pk-stepper-n { min-width: 1.4em; text-align: center; font-size: 14.5px; color: var(--ink); }

/* ---- the per-project MODEL PICKS and the SEAT PIN (board lines 14 and 15, 2026-09-28) — a chip row
   and one native select, on the same 44px touch height and the same card/line tokens as every other
   control on this page; the select is the browser's own, restyled only at its edges. ---------------- */
.sgrid .pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sgrid .pk-select, .pk-select {
  min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; max-width: 100%;
}
.pk-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }