/* pocket/web-v2/css/settings.css — the settings frame and its first three sections (design §4.6,
   unit P07). The frame's rules are shared by P08/P09's sections, which fly on it. Tokens, `.srow`,
   `.seg`, `.tog`, `.chg`, `.bar` and `.absence` come from kit.css; nothing here is inline in the
   markup (CSP) — a meter's width and a bar's fill are set through the element's own style object.

   WIDTH IS THE PAGE COLUMN'S, never the viewport's: the nav is a rail beside the section and folds to
   a strip when the page column (`pk-page`, the container frame.css names on `.pk-main`) is 1000px or
   less. On a phone (`data-phone="1"`, set by settings.js from `P.frame.isPhoneBand`) the same nav is
   the LIST and a section is a second screen with a back control. */

.sgrid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.sbody, .sec, .sec-capacity, .sec-autonomy, .sec-assistant, .sec-models { min-width: 0; }
.sbody .h1, .snav .t {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 60; font-weight: 350; color: var(--ink);
}
.sbody .h1 { font-size: 36px; line-height: 1.12; margin: 0; }
.sbody .lede { font-size: 16px; line-height: 1.6; color: var(--ink2); margin: 14px 0 0; max-width: 60ch; }
.sbody .note { font-size: 13.5px; color: var(--ink3); margin: 12px 0 0; max-width: 62ch; }
.sbody .said { margin-top: 12px; font-size: 13.5px; color: var(--you); max-width: 62ch; }
.sbody .warnl { margin-top: 6px; font-size: 13px; color: var(--you); }
.sbody .jl { font-size: 12.5px; color: var(--ink3); padding: 3px 0; overflow-wrap: anywhere; }

/* ---- the nav ------------------------------------------------------------------------------------ */
.snav { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.snav .t { font-size: 30px; margin: 0 0 14px 10px; }
.snav button {
  height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px;
  color: var(--ink2); text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.snav button:hover { background: var(--sunk); color: var(--ink); }
.snav button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh); font-weight: 500; }
.snav button.stop { margin-top: 14px; color: var(--you); }
.snav button:focus-visible, .pback:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.pback {
  display: none; align-items: center; gap: 4px; margin: 0 0 10px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--ink3); cursor: pointer;
}

/* the nav folds to a strip on a narrow page column */
@container pk-page (max-width: 1000px) {
  .sgrid { grid-template-columns: 1fr; gap: 0; }
  .snav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .snav .t { display: none; }
  .snav button { white-space: nowrap; flex-shrink: 0; gap: 6px; }
  .snav button.stop { margin-top: 0; }
}

/* a phone: the nav is the list, a section is a second screen — ONE screen at a time, so one
   column at any width. Without this the phone state in a wide page column (Telegram Desktop grown
   from its ~384px modal to fullscreen, 2026-10-07) hid the nav and left the section in the 210px
   nav track of a two-column grid. settings.js re-labels the grid on a band flip; this is the
   geometry that state means, whatever the column measured when it was set. */
.sgrid[data-phone="1"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sgrid[data-phone="1"] .pback { display: inline-flex; }
.sgrid[data-phone="1"][data-view="sec"] .snav { display: none; }
.sgrid[data-phone="1"][data-view="list"] .sbody { display: none; }
.sgrid[data-phone="1"][data-view="list"] .snav {
  flex-direction: column; overflow: visible; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; gap: 2px;
}
.sgrid[data-phone="1"][data-view="list"] .snav .t { display: block; }
.sgrid[data-phone="1"][data-view="list"] .snav button { height: 46px; font-size: 15px; }
.sgrid[data-phone="1"][data-view="list"] .snav button.stop { margin-top: 14px; }

/* ---- groups and rows (kit.css owns `.srow`) ----------------------------------------------------- */
.sgrp { margin-top: 34px; }
.sgrp > h3 { font-size: 13px; font-weight: 600; color: var(--ink3); margin: 0 0 6px; letter-spacing: .01em; }
.sgrp > p.gn { font-size: 13.5px; color: var(--ink3); margin: 0 0 10px; max-width: 62ch; }
.sgrp .srows { border-top: 1px solid var(--line); }
.sgrp .srows .absence { padding: 12px 4px; }
.srow .v { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
/* A ROW SHARES ITS WIDTH, it never hands the value column everything (2026-09-27: three buttons in
   an `auto` column squeezed the title into a strip of prose). The title keeps at least 220px; when
   the value no longer fits beside it, the value drops under the title instead of crushing it. */
.srow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 10px; }
.srow > :first-child { flex: 1 1 220px; min-width: 0; }
.srow > .v { flex: 0 1 auto; margin-left: auto; min-width: 0; }
.srow .v .chg { white-space: nowrap; }
/* the "?" beside a title, and the words it holds */
.srow .th { display: flex; align-items: center; gap: 8px; position: relative; flex-wrap: wrap; }
.shelp {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--ink3); font-size: 11px; line-height: 16px; padding: 0; cursor: pointer;
}
.shelp:hover, .shelp:focus-visible { color: var(--ink); border-color: var(--ink3); outline: 0; }
.shelp-pop {
  display: none; flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--ink2);
  background: var(--sunk); border-radius: 10px; padding: 10px 12px; margin-top: 6px; max-width: 52ch;
}
.shelp:focus + .shelp-pop { display: block; }
/* Two-factor: the state reads as a quiet chip, the three acts sit together */
.stfa .v > .stfa-state { color: var(--ink2); font-size: 13.5px; margin-right: 4px; }
.chg { font: inherit; font-size: 12.5px; cursor: pointer; }
.chg[disabled] { opacity: .5; cursor: default; }
.tog { border: 0; padding: 0; cursor: pointer; }
.tog[disabled] { opacity: .5; cursor: default; }
.seg button { cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip {
  height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: none;
  font: inherit; font-size: 12.5px; color: var(--ink3); cursor: pointer;
}
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[disabled] { opacity: .5; cursor: default; }
/* A CHIP ROW STANDS UNDER ITS QUESTION (2026-10-07, the mint paper's project chips sat right-aligned and
   wrapped raggedly under a left-aligned title). `srow({cls: "stack"})` puts the value on its own line,
   starting at the title's left edge, at every width — the chips read as the answer to the line above. */
.srow.stack > .v { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
.srow.stack .chips { justify-content: flex-start; }

.setcard { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.setcard .t { font-size: 15px; }
.setcard .s { font-size: 13px; color: var(--ink3); margin: 2px 0 0; max-width: 60ch; }
.setcard .chg { margin-top: 10px; }
.sbody .srow .s.tgt { font-size: 12.5px; }

/* ---- Accounts and limits ------------------------------------------------------------------------ */
.atool { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; row-gap: 8px; }
.atool h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink3); }
.atool .grow { flex: 1; }
.atab { border-top: 1px solid var(--line); }
.ar {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 3fr) auto; gap: 8px 18px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--line); position: relative;
}
.ar > .an2 { grid-column: 1; grid-row: 1; }
.ar > .meters { grid-column: 2; grid-row: 1; }
.ar > .am { grid-column: 3; grid-row: 1; }
.ar.out .nm { color: var(--ink3); }
.an2 > div { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.an2 .nm { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an2 small { display: block; font-size: 12px; color: var(--ink3); }
.an2 small.bad { color: var(--you); font-weight: 500; }
.an2 .sub { font-size: 12px; color: var(--ink3); overflow-wrap: anywhere; }
.pen { border: 0; background: none; padding: 0 2px; color: var(--ink3); cursor: pointer; font-size: 14px; }
.pen:hover { color: var(--ink); }
.ren-in {
  height: 30px; border-radius: 8px; border: 1px solid var(--ink4); background: var(--card); color: var(--ink);
  padding: 0 8px; font: inherit; font-size: 16px; outline: 0; min-width: 0; flex: 1 1 120px;
}
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lc2 { display: block; font-size: 12.5px; color: var(--ink2); }
.lc2 .n { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; row-gap: 0; }
.lc2 .n em { font-style: normal; font-size: 11px; color: var(--ink3); }
.lc2 .n b { font-size: 13px; font-weight: 600; color: var(--ink); }
.lc2 .n small { font-size: 11.5px; color: var(--ink3); flex-basis: 100%; }
.lc2.w .n b, .lc2.full .n small { color: var(--you); }
.ar .foot { grid-column: 1 / -1; font-size: 12px; color: var(--ink3); }
.am { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.confirm { grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; background: var(--sunk); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.confirm .t { flex: 1 1 100%; font-size: 14.5px; }
.confirm .s { flex: 1 1 100%; font-size: 13px; color: var(--ink3); }
.addrow {
  display: flex; align-items: center; gap: 10px; padding: 13px 4px; width: 100%; border: 0; background: none;
  border-bottom: 1px solid var(--line); font: inherit; font-size: 14px; color: var(--ink3); cursor: pointer; text-align: left;
}
.addrow:hover { color: var(--ink); }

/* The Grid pool mirror (views/s-capacity.js, 2026-10-07): a seat header row, one row per provider
   (name · bar + money · the pool-out chip), and every other sign-in folded behind one muted line.
   Tokens only, so both themes carry it; the out chip is an OUTLINE in --you, Bleep's red pill. */
.ar > .gmeter { grid-column: 2; grid-row: 1; }
.ar.ghead, .ar.gprov { grid-template-columns: minmax(0, 1.15fr) minmax(0, 3fr); }
.gmeter { display: block; font-size: 12.5px; color: var(--ink2); min-width: 0; }
.gmeter .n { display: flex; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; flex-wrap: wrap; }
.gmeter .n b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gmeter .n small { font-size: 12px; color: var(--ink3); }
.ghead .an2 > div { gap: 8px; }
.ghead .nm { font-weight: 600; }
.gprov.out .gmeter .n b { color: var(--ink3); }
.gprov.out .bar i { background: var(--ink4); }
.gout {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--you); color: var(--you); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.gfoldg { margin-top: 18px; }
.gfold {
  display: block; width: 100%; text-align: left; padding: 10px 4px; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; font-size: 13px; color: var(--ink3); cursor: pointer;
}
.gfold:hover, .gfold.on { color: var(--ink2); }
.gfold:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gfoldg > .sgrp { margin-top: 8px; opacity: .85; }

.walk { margin: 6px 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--sunk); display: grid; gap: 8px; justify-items: start; }
.walk .s { font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; }
.walk .t { font-size: 14.5px; }
.cmd {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  font: inherit; font-size: 12.5px; color: var(--run); overflow-wrap: anywhere; cursor: pointer;
}
.code-in, .cap-in, .agtext {
  border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 12px;
  font: inherit; font-size: 16px; outline: 0; max-width: 100%;
}
/* border-box: a text input and a textarea are content-box by the UA, so `width: 100%` plus 12px
   padding and a 1px border ran 26px past the column at every width (measured 2026-10-07). The
   sizes below are the RENDERED boxes the content-box rules drew (40+2 tall, 240+26 wide, 96+22
   tall), so nothing that fitted moves by a pixel — only the overflow goes. */
.code-in { height: 42px; width: 100%; box-sizing: border-box; }
.cap-in { height: 32px; width: 72px; text-align: right; padding: 0 8px; }
.agtext { width: 100%; box-sizing: border-box; min-height: 118px; padding: 10px 12px; resize: vertical; }
.code-in:focus-visible, .cap-in:focus-visible, .agtext:focus-visible, .ren-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.srow .lim { font-size: 12px; color: var(--ink3); }

/* ---- P09: Execution, Spend, Account and people (views/s-execution.js, s-spend.js, s-account.js) --------
   A block of its own, in the middle of the file on purpose: P08's sections append at the end, and two
   units adding at one place is how a merge conflicts. Chart colours are the tokens' --k1…--k5. */
.sec-execution, .sec-spend, .sec-account { min-width: 0; }
.sbody .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink4); flex: none; }
.sbody .dot.ok { background: var(--done); }
.sbody .dot.warn { background: var(--you); }
.atool .lim { font-size: 12px; color: var(--ink3); }
.verdict { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); display: grid; gap: 6px; }
.verdict .s { font-size: 13.5px; color: var(--ink2); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.kpis .tile small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink3); line-height: 1.35; }
.kpis .tile.absent b { color: var(--ink3); }
.chart { margin-top: 6px; }
.plot { display: flex; align-items: flex-end; gap: 3px; height: 190px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.col2 { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; position: relative; }
.col2 > span { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.col2 > i { display: block; min-height: 1px; }
.k1 { background: var(--k1); }
.k2 { background: var(--k2); }
.k3 { background: var(--k3); }
.k4 { background: var(--k4); }
.k5 { background: var(--k5); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.legend > .leg { display: inline-flex; align-items: center; gap: 6px; }
.legend em { font-style: normal; }
.legend i, .sharel i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.share { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; }
.share i { display: block; min-width: 2px; }
.sharel { margin-top: 10px; display: grid; gap: 6px; }
.sharel > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; font-size: 13px; }
.sharel b { font-weight: 600; }
.sharel small { color: var(--ink3); text-align: right; }
.two2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.eff { border-top: 1px solid var(--line); margin-top: 8px; }
.eh, .er { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.eh { font-size: 12px; color: var(--ink3); }
.er .en { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.paper { margin-top: 12px; padding: 6px 16px 14px; border-radius: 14px; background: var(--sunk); }
.paper .am { justify-content: flex-start; margin-top: 12px; }
.cmd.secret { white-space: pre-wrap; margin: 8px 0; font-size: 13px; color: var(--ink); }
.cmd.secret::first-line { color: var(--ink3); font-size: 12px; }
.sec-account .confirm { margin-top: 10px; }
.sec-account .walk { margin-top: 10px; }

/* the Moonward stream's per-row detail (adopt / patch Status) — a plain sunk panel under the row
   it belongs to, its own chips reusing .chip/.chip.on above and its rows .addrow above. */
.mwrow-detail { margin: 6px 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--sunk); display: grid; gap: 8px; }
.mwrow-detail .note, .mwrow-detail .warnl { margin: 0; }

@container pk-page (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two2 { grid-template-columns: minmax(0, 1fr); }
  .eh, .er { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); font-size: 12.5px; }
}
@container pk-page (max-width: 460px) {
  .plot { height: 150px; }
  .sharel > div { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .sharel small { display: none; }
}

@container pk-page (max-width: 760px) {
  .ar { grid-template-columns: minmax(0, 1fr) auto; }
  .ar > .am { grid-column: 2; grid-row: 1; }
  .ar > .meters, .ar > .gmeter { grid-column: 1 / -1; grid-row: 2; }
  .srow > .v { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
  .chips { justify-content: flex-start; }
}
@container pk-page (max-width: 460px) {
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbody .h1 { font-size: 30px; }
}

/* ---- Assistant ----------------------------------------------------------------------------------- */
.agdetail { padding: 6px 4px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; }
.agdetail .t { font-size: 14.5px; }
.agdetail .s { font-size: 13px; color: var(--ink3); max-width: 62ch; }
.agdoc, .agfb, .agfields, .agjournal { display: grid; gap: 8px; justify-items: start; }
.agdetail .srow { width: 100%; }

/* Two-factor: the group heading carries the "?", the row is the state and its acts (2026-09-27) */
.sgrp > h3.shead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sgrp > h3.shead .shelp-pop { font-weight: 400; letter-spacing: 0; }
.srow.stfa > .v { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
.srow .name-in { width: 266px; max-width: 100%; }