/* settings.css — the §3.7b settings frame, the panel grid, the forms, and the
 * persona tree + editor pane.
 * Cascade position: fifth and last. No custom property, no literal colour.
 * Styles no other file's root class: `.field`, `.table`, `.tree`, `.kv`, `.chip`
 * and friends keep the look components.css gave them; this file only places them.
 */

/* ══ the frame ═════════════════════════════════════════════════════════════ */

.settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
  grid-template-areas:
    "bar"
    "main"
    "foot";
  min-block-size: 100dvh;
}

.settings__bar {
  grid-area: bar;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--header-h);
  padding-inline: var(--sp-4);
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}

.settings__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  max-inline-size: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings__back:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.settings__brand {
  margin-inline-start: auto;
  font-weight: var(--fw-semibold);
}

/* ── the left column ─────────────────────────────────────────────────────── */

.settings__nav {
  grid-area: nav;
  min-inline-size: 0;
  padding-block: var(--sp-4);
  padding-inline: var(--sp-2);
  border-inline-end: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow-y: auto;
}

.settings__navlist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings__navgroup {
  margin-block-start: var(--sp-4);
  padding: 0 var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* 36 px rows for a mouse, so the whole column — and the current row with it —
   fits a 900 px window; a coarse pointer gets the full tap size back below */
.settings__navitem {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 36px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  text-align: start;
}

.settings__navitem:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.settings__navitem[aria-current="page"] {
  background: var(--accent-subtle);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.settings__navitem .chip {
  margin-inline-start: auto;
}

/* an indented child row: Agents / Briefing / Connections / Sync */
.settings__navitem--sub {
  padding-inline-start: var(--sp-5);
}

/* the workspace switcher heads the Workspace group, whose rows it re-points */
.settings__navswitch {
  padding-block-end: var(--sp-1);
}

@media (pointer: coarse) {
  .settings__navitem,
  .settings__nav .wsswitch {
    min-block-size: var(--tap);
  }
}

/* ── the panel column ────────────────────────────────────────────────────── */

.settings__main {
  grid-area: main;
  min-inline-size: 0;
  overflow-y: auto;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-7);
}

.settings__head {
  max-inline-size: 720px;
  margin-block-end: var(--sp-5);
}

.settings__head h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* the "?" beside a heading: a quiet glyph whose negative margin keeps the
   heading's line box as tall as on a screen without one, so the subtitle and
   the first panel do not jump between neighbouring nav rows; a coarse pointer
   gets the full tap size, still without growing the line */
.settings__head h1 .settings__learn {
  inline-size: 28px;
  min-block-size: 28px;
  margin-block: -4px;
  color: var(--text-muted);
}

@media (pointer: coarse) {
  .settings__head h1 .settings__learn {
    inline-size: var(--tap);
    min-block-size: var(--tap);
    margin-block: -12px;
  }
}

/* 62ch broke two-line subtitles at ~500 px with a one-word last line */
.settings__sub {
  margin-block-start: var(--sp-2);
  color: var(--text-muted);
  max-inline-size: 72ch;
  text-wrap: pretty;
}

.settings__panels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-inline-size: 720px;
}

/* an empty, classless host — an alert or error slot with nothing in it yet —
   takes no room: in a flex column it still cost a gap (Server's first panel
   sat 16 px low; "Where co-chat works" ended in a blank band).  Skeleton
   lines have a class, and live regions are never collapsed */
.settings__panels > div:empty:not([class], [role], [aria-live]),
.panel__body > div:empty:not([class], [role], [aria-live]) {
  display: none;
}

.settings__panels--wide {
  max-inline-size: 1040px;
}

/* ── the sticky save footer, only while dirty ────────────────────────────── */

.settings__foot {
  grid-area: foot;
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3);
  padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--sh-2);
}

.settings__dirty {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  font-size: var(--fs-sm);
  color: var(--warn);
}

@media (min-width: 720px) {
  .settings {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-areas:
      "bar bar"
      "nav main"
      "foot foot";
  }

  .settings__foot {
    padding-inline-start: calc(var(--rail-w) + var(--sp-4));
  }
}

/* "In <workspace> · Change", below 720 px on a workspace-scoped screen */
.settings__scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.settings__scope[hidden] {
  display: none;
}

.settings__scope strong {
  min-inline-size: 0;
  color: var(--text);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

/* below 720 the index and a panel are two screens, not two columns (§3.7b) */
@media (max-width: 719px) {
  .settings[data-view="panel"] .settings__nav {
    display: none;
  }

  /* the index scrolls as one: Get started, then the left column (switcher and
     every destination) in place of "All settings", which would repeat it */
  .settings[data-view="index"] {
    block-size: 100dvh;
    overflow-y: auto;
    grid-template-rows: var(--header-h) auto auto auto;
    grid-template-areas:
      "bar"
      "main"
      "nav"
      "foot";
  }

  .settings[data-view="index"] .settings__main {
    overflow: visible;
    padding-block-end: var(--sp-4);
  }

  .settings[data-view="index"] .settings__destinations {
    display: none;
  }

  .settings[data-view="index"] .settings__nav {
    border-inline-end: 0;
    background: var(--bg);
    padding-inline: var(--sp-4);
    padding-block: 0 var(--sp-7);
    overflow: visible;
  }
}

/* ══ tables at 360 px: one labelled card per row ═══════════════════════════ */

/* no sideways scroll hiding State, tokens or Revoke: each cell on its own line
   beside its heading (data-label), what decides the row first (data-lead) */
@media (max-width: 719px) {
  :is(.table--usage, .table--models, .table--keys),
  :is(.table--usage, .table--models, .table--keys) :is(tbody, tfoot) {
    display: block;
    inline-size: 100%;
  }

  :is(.table--usage, .table--models, .table--keys) thead {
    display: none;
  }

  :is(.table--usage, .table--models, .table--keys) tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-3);
    padding-block: var(--sp-2);
    border-block-end: 1px solid var(--border);
  }

  :is(.table--usage, .table--models, .table--keys) :is(td, th) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    justify-items: start;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    text-align: start;
  }

  :is(.table--usage, .table--models, .table--keys) td.num {
    text-align: start;
  }

  :is(.table--usage, .table--models, .table--keys) th {
    display: block;
  }

  :is(.table--usage, .table--models, .table--keys) td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  :is(.table--usage, .table--models, .table--keys) td > * {
    min-inline-size: 0;
  }

  /* the usage bar spans the value column, not just the name */
  :is(.table--usage, .table--models, .table--keys) td > .stack {
    justify-self: stretch;
  }

  :is(.table--models, .table--keys) td[data-lead="1"] {
    order: -3;
  }

  :is(.table--models, .table--keys) td[data-lead="2"] {
    order: -2;
  }

  :is(.table--models, .table--keys) td[data-lead="3"] {
    order: -1;
  }

  /* a model card opens with its radio beside the name, unlabelled */
  .table--models td[data-lead="1"] {
    display: block;
    grid-column: auto;
  }

  .table--models td[data-lead="1"]::before {
    content: none;
  }

  .table--keys code {
    white-space: nowrap;
  }

  /* the action ends the key's card, after every fact about the key, with no
     "Action" label and its word on the labels' edge */
  .table--keys td.keys__action {
    order: 1;
    padding-block-start: var(--sp-1);
  }

  .table--keys td.keys__action::before {
    content: none;
  }

  .table--keys td.keys__action > * {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* on its own line at the end of a card a ghost "Revoke" reads as a faint
     label; the card's one action is drawn as a real button instead */
  .table--keys td.keys__action .btn {
    margin-inline-start: 0;
    padding-inline: var(--sp-4);
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text);
  }

  .table--keys td.keys__action .btn:hover {
    background: var(--bg-inset);
  }

  /* a revoked key has nothing to do; its "—" fills a table cell, not a line */
  .table--keys td.keys__action:not(:has(.btn)) {
    display: none;
  }

  /* a rule between cards, none under the last (the panel foot draws its own);
     Usage's totals are the last group, so the rule above them stays */
  :is(.table--usage, .table--models, .table--keys) > :last-child > tr:last-child {
    border-block-end: 0;
  }
}

/* the ghost button's own padding put "Revoke" a gap right of its column */
.table--keys td.keys__action .btn {
  margin-inline-start: calc(-1 * var(--sp-2));
}

@media (min-width: 720px) {
  /* the last row's rule doubled the panel's edge or its foot's rule */
  .panel__body .table > :last-child > tr:last-child > :is(td, th) {
    border-block-end: 0;
  }

  /* a 36 px button beside one line of text: centred, not hung 9 px low */
  .table--keys td {
    vertical-align: middle;
  }

  /* "up to 128,000 out" is one fact: never broken into "up to" / "128,000" /
     "out" (the table scrolls in its own box before it would wrap it) */
  .table--models td.num .faint {
    white-space: nowrap;
  }
}

/* one set of column widths for every provider's table, so Context, Reasoning,
   Source and State line up down the page; Reasoning takes what is left, and
   the chip and its effort list are always two lines.  From 1000 px: below
   that each table already scrolls in its own box, where fixed widths align
   nothing and only lengthen the scroll */
@media (min-width: 1000px) {
  .table--models th:nth-child(1) {
    inline-size: 44px;
  }

  .table--models th:nth-child(2) {
    inline-size: 25%;
  }

  .table--models th:nth-child(3) {
    inline-size: 10rem;
  }

  .table--models th:nth-child(5),
  .table--models th:nth-child(6) {
    inline-size: 7rem;
  }

  .table--models td:nth-child(4) > .row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }
}

/* ══ panel ═════════════════════════════════════════════════════════════════ */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  min-inline-size: 0;
}

/* the title with its count or badge at the end of the same line, and the hint
   ALWAYS on its own line under both: a sentence beside a heading reads as a
   caption.  A wrapping row, so an aside too wide for the title's line (an
   agent's id at 360 px) goes under the title instead of over it — a two-column
   grid squeezed the title under the chip.  The hint's row is the head's whole
   width: its 62ch measure comes from its end padding, because a max-inline-size
   clamps the `100%` basis and a short title then fits beside it again */
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
}

.panel__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.panel__hint {
  flex: 1 0 100%;
  box-sizing: border-box;
  padding-inline-end: max(0px, calc(100% - 62ch));
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
}

.panel__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--border);
}

.panel--danger {
  border-color: var(--danger);
}

.panel--danger .panel__title {
  color: var(--danger);
}

/* a panel whose data failed to load is replaced, siblings keep working */
.panel--error {
  border-color: var(--danger);
  background: var(--danger-subtle);
}

/* a fact the server states and we do not edit */
.panel__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.panel__fact dt {
  color: var(--text-muted);
}

/* plain words in the text face: a date, "never", a status chip.  A value that
   IS an identifier brings its own `code.mono` (copyValue) */
.panel__fact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 719px) {
  /* one shape for every fact at 360: the label over its value, both on the
     left edge (some wrapped and some did not, so the eye zig-zagged) */
  .panel__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* a copy button keeps its tap area without making its fact taller */
  .panel__fact dd .btn {
    margin-block: calc(-1 * var(--sp-2));
  }
}

/* ══ forms ═════════════════════════════════════════════════════════════════ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
}

.form__row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.form__row > * {
  flex: 1 1 22ch;
  min-inline-size: 0;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr));
  gap: var(--sp-4);
}

.form__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
}

.form__section:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.form__legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* the form-level error summary a failed submit focuses (§5.5) */
.form__error {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--danger);
  border-inline-start-width: 3px;
  border-radius: var(--r-md);
  background: var(--danger-subtle);
  font-size: var(--fs-sm);
}

.form__error h2 {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--danger);
}

.form__error ul {
  padding-inline-start: var(--sp-5);
}

/* the server's own message, always verbatim, always next to our sentence */
.verbatim {
  margin-block-start: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-inline-start: 3px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}

/* the "here is exactly what will be sent" diff before a full-replace PUT */
.diff {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--code-border);
  border-radius: var(--r-md);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-block-size: 40vh;
  overflow: auto;
}

.diff__add {
  display: block;
  background: var(--ok-subtle);
  color: var(--ok);
}

.diff__del {
  display: block;
  background: var(--danger-subtle);
  color: var(--danger);
  text-decoration: line-through;
}

/* the plaintext API key, shown exactly once */
.keyout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ══ the workspace switcher in the left column ═════════════════════════════ */

.wsswitch {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 36px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: start;
}

.wsswitch:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.wsswitch__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ persona: resolution tree on the left, a plain textarea on the right ═══ */

.persona {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  min-inline-size: 0;
}

.persona__tree {
  min-inline-size: 0;
  max-block-size: 60vh;
  overflow: auto;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.persona__editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-inline-size: 0;
}

/* "Pick a document" fills the column beside the tree, not its top half */
.persona__editor > .empty {
  flex: 1 1 auto;
  justify-content: center;
}

.persona__path {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* no editor library, no highlighting: a textarea and a rule (§3.19) */
.persona__ta {
  inline-size: 100%;
  min-block-size: 22lh;
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--code-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  tab-size: 2;
  resize: vertical;
}

.persona__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.persona__count {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.persona__count[data-level="near"] {
  color: var(--warn);
}

.persona__count[data-level="over"] {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

/* the YAML frontmatter block, marked by a rule rather than highlighted */
.persona__fm {
  padding: var(--sp-2) var(--sp-3);
  border-inline-start: 3px solid var(--info);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--info-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .persona {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

  .persona__tree {
    max-block-size: none;
  }
}

/* ══ usage ═════════════════════════════════════════════════════════════════ */

.usage__headline {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.usage__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* the table's two filters; they sit with the table because they narrow only it */
.usage__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24ch), 1fr));
  align-items: start;
  gap: var(--sp-3);
}

.usage__table[aria-busy="true"] {
  opacity: 0.6;
}

.usage__scroll {
  overflow-x: auto;
}

.usage__scroll th.num {
  text-align: end;
}

.usage__scroll .mono {
  white-space: nowrap;
}

.usage__scroll .table__bar {
  margin-block-start: var(--sp-1);
}

.usage__scroll tfoot th,
.usage__scroll tfoot td {
  border-block-end: 0;
  font-weight: var(--fw-semibold);
}

/* ══ deep links ════════════════════════════════════════════════════════════ */

/* the control a "Why was this allowed?" link landed on, until focus leaves it */
.settings [data-deeplink] {
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 2px var(--focus);
}

/* ══ sync ══════════════════════════════════════════════════════════════════ */

.sync__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14ch), 1fr));
  gap: var(--sp-3);
}

.sync__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.sync__num {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.sync__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  text-align: center;
  color: var(--text-muted);
}

.sync__drop[data-drag] {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--text);
}

/* ══ danger ════════════════════════════════════════════════════════════════ */

.danger__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.danger__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}