settings.css

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-base);
}
/* Settings and onboarding are native <dialog>s opened with showModal()
   (dialog-shell.ts). Neutralise the UA dialog box defaults (centered,
   fit-content, bordered, CanvasText) so they fill the window like the previous
   div overlays did. */
dialog.settings-overlay {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  color: inherit;
  overflow: hidden;
}
dialog.settings-overlay::backdrop {
  background: var(--bg-base);
}
.settings-overlay h2 {
  margin-bottom: 0;
}
.settings-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The separator is extra to the row, not carved out of it. Everything is
     `border-box` (base.css), so declaring the plain titlebar height here would
     spend a pixel of the content box on the border and centre the title half a
     pixel above the panel title it is supposed to match. In the main window the
     titlebar is a full row and the separator belongs to `#thread-tabs` beneath
     it; Settings collapses both into one element, so it needs the row plus the
     line. */
  height: calc(var(--titlebar-height) + 1px);
  padding: 0 var(--spacing-lg) 0 var(--traffic-light-inset);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  -webkit-app-region: drag;
}
.settings-header h2 {
  font-size: var(--font-size-sm);
  /* Match the regular panel title rather than introducing a heavier heading
     treatment when Settings takes over the same titlebar position. The panel
     title (`.workspace-name`) is not a heading, so it takes the interface face
     from the body; this is an `h2`, so the brand layer's `h1, h2, h3` rule
     (brand.css) hands it the display serif and the serif's tighter tracking.
     Neither belongs on chrome, and both have to be named here to be undone —
     matching weight and colour alone leaves the face mismatched. */
  font-family: var(--font-family);
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: var(--titlebar-height);
}
.settings-close-btn {
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  line-height: 1;
}
.settings-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.settings-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.settings-nav {
  width: calc(240px * var(--ui-scale));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-md);
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
  min-height: 0;
  overflow-y: auto;
}
/* Section rows are the dialog's primary navigation, so they get a full row of
   target rather than a line of text: the whole 36px band is clickable, the way
   a chat row or a file-tree row is. */
.settings-nav-btn {
  display: flex;
  align-items: center;
  text-align: left;
  min-height: var(--action-min-height);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.settings-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.settings-nav-btn.active {
  background: var(--bg-selected);
  color: var(--text-primary);
  font-weight: 600;
}
/* The open section's own groups, listed under its row. A long section (General,
   Appearance) is several screens tall, so the sidebar doubles as its table of
   contents: what is on this page, and a way to jump straight to it. Only the
   open section expands — the nav stays a list of sections, not a tree. */
.settings-nav-subheadings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-xs) 0;
}
.settings-nav-subheading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: left;
  min-height: calc(30px * var(--ui-scale));
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs)
    calc(var(--spacing-xl) + var(--spacing-xs));
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
/* The turned arrow marks these as belonging to the row above rather than being
   sections in their own right. Decorative: the label carries the meaning. */
.settings-nav-subheading::before {
  content: '↳';
  color: var(--text-muted);
  font-weight: 400;
}
.settings-nav-subheading:hover {
  color: var(--text-primary);
}
.settings-nav-subheading:hover::before {
  color: var(--text-secondary);
}
/* Cross-section search box, pinned above the section list in the sidebar. */
.settings-search {
  margin-bottom: var(--spacing-md);
}
.settings-search-input {
  width: 100%;
  min-height: var(--action-min-height);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.settings-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.settings-search-input::placeholder {
  color: var(--text-muted);
}

/* Search results mode: the matching blocks are lifted out of their sections
   into #settings-search-results (ranked, legend hits first). Hide the section
   list and show only that results list; cleared search restores the sections. */
.settings-search-results {
  display: none;
}
.settings-content.settings-searching .settings-section {
  display: none;
}
.settings-content.settings-searching .settings-search-results {
  display: block;
}
.settings-search-empty {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-md) 0;
}

.settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  /* Keep controls clear of the sticky action bar when the browser scrolls them
     into view for focus, keyboard navigation, or an accessibility click. The
     footer stays translucent and keeps hit-testing its own box; its occupied
     depth simply is not usable viewport space for an interaction target.

     The reserve rounds *up* past the bar's own box. `--action-min-height` is a
     floor, not the button's height — the real box is its line-height plus
     `--spacing-md` twice, a few px taller — so the token sum alone lands a
     scrolled target a hair inside the bar. One more `--spacing-md` clears it
     with margin to spare; over-reserving only leaves breathing room. Pinned by
     `tests/demo/settings-footer.demo.ts`. */
  scroll-padding-bottom: calc(
    var(--action-min-height) + var(--spacing-lg) + var(--spacing-xl) + var(--spacing-lg) +
      var(--spacing-md)
  );
  /* No bottom padding: a sticky footer cannot extend past its containing
     block's content box, so bottom padding here would leave a gap below the
     sticky .settings-buttons bar that scrolled content shows through. The
     footer carries its own bottom padding instead.
     Scroll surface is full width of the pane (beside the nav); the form
     column self-limits via --settings-content-max, matching chat's
     .messages-list / .msg split. */
  padding: calc(var(--spacing-xl) * 2) var(--spacing-xl) 0;
}
.settings-section,
.settings-search-results,
.settings-search-empty,
.settings-buttons {
  width: min(100%, var(--settings-content-max));
  margin-inline: auto;
}
.settings-section {
  display: none;
}
.settings-section.active {
  display: block;
}
/* Settings is a destination surface, not chrome: its section titles and group
   headings carry the display face, sized so the page has a clear masthead and
   an obvious second tier under it. Everything below that tier — field labels,
   nested card titles, hints — stays in the interface family, so the serif
   reads as structure rather than decoration. */
.settings-section h3 {
  font-family: var(--font-display);
  font-size: calc(28px * var(--ui-scale));
  /* Averia ships a single 400 weight; asking for 600 only invites Chromium's
     synthetic bold, which smears the serifs at this size. */
  font-weight: 400;
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
}
.settings-section-desc,
.settings-fieldset-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-base);
}
/* The section blurb answers "what is this page", so it sits a step above the
   per-group blurbs and takes a full group-sized gap to the first heading. */
.settings-section-desc {
  font-size: var(--font-size-md);
  max-width: 62ch;
  margin-bottom: calc(var(--spacing-xl) + var(--spacing-sm));
}
/* A blurb under a group heading introduces the whole group, so it stays tight to
   the heading (which now carries that gap itself — hence no negative pull here
   any more) and keeps a clear gap to the first control. Some groups write theirs
   as a .field-hint, so give that the same rhythm rather than leaving it jammed
   against the control below. */
.settings-content legend + .field-hint {
  margin-bottom: var(--spacing-lg);
}
.settings-field-label {
  display: block;
  margin: calc(var(--spacing-lg) + var(--spacing-xs)) 0 var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
}
.field-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-base);
}
/* Live advisor-pair assessment under the advisor model picker: colour tracks
   how much lift the model annotations expect from the pairing. */
.advisor-pair-hint[data-level='good'] {
  color: var(--success);
}
.advisor-pair-hint[data-level='warn'] {
  color: var(--warning, #d29922);
}
/* Inline preview of the external-link glyph shown in the links hint copy. */
.external-link-hint-icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--external-link-mask);
  mask: var(--external-link-mask);
}
/* A range slider paired with a live numeric readout. */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.slider-row input[type='range'] {
  flex: 1;
}
.slider-value {
  min-width: 2.75em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
/* Actions that act on a whole section (reload, add) rather than on one field.
   They sit between the section blurb and the first group, so they carry a
   group-sized gap below and stay clear of the heading that follows. */
.settings-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: calc(var(--spacing-xl) + var(--spacing-md));
}
/* A row that closes out a group has nothing left to separate from — the group's
   own bottom margin is already the gap to whatever follows. */
.settings-action-row:last-child {
  margin-bottom: 0;
}
.settings-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  /* Lift the buttons off the window's bottom edge. This padding lives inside
     the sticky footer box, so the bar still reaches the scrollport bottom and
     keeps covering scrolled content — only the buttons move up. */
  padding-bottom: calc(var(--spacing-xl) + var(--spacing-lg));
  position: sticky;
  bottom: 0;
  /* Frosted, not opaque: the bar is tall enough to hide a whole row of content,
     and an opaque slab makes a long section look like it has stopped when it
     has only scrolled under the footer. Letting content read through says
     "there is more below" while the blur keeps Save and Cancel legible over
     whatever passes beneath them.

     The wash and the blur live on a masked pseudo-element rather than on the
     bar itself: masking the layer that carries `backdrop-filter` ramps the blur
     with it, so content dissolves into the bar instead of hitting a hard line
     where a full-strength filter starts. Buttons are children of the bar, not
     of the pseudo, so they stay perfectly sharp.

     No `border-top`: a hairline across a see-through bar reads as the cut the
     fade exists to avoid. */
  background: none;
}
.settings-buttons::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg-base) 55%, transparent) 40%,
    color-mix(in srgb, var(--bg-base) 88%, transparent) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.settings-buttons button {
  -webkit-app-region: no-drag;
  /* Lift the buttons over the frosted ::before. Without this the absolutely
     positioned pseudo paints above them — in-flow content sits below the
     positioned layer — and Save comes out blurred along with the backdrop. */
  position: relative;
  z-index: 1;
}
.settings-buttons button[type='submit'] {
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius);
  padding: var(--spacing-md) var(--spacing-xl);
}
.settings-buttons button[type='button'] {
  border-radius: var(--radius);
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--text-secondary);
}
.settings-buttons button[type='button']:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* A card — elevated surface, roomier internal padding — marks a discrete
   sub-object inside a group: one provider's credentials, one widget. No border:
   the surface alone reads as a panel, and a border would force the legend to
   notch a hole through it.

   Top-level groups opt out of this entirely (below) — see the Usage section for
   the target: a heading and space do the grouping, so the only boxes on screen
   are the things that really are boxes. */
.settings-content fieldset {
  border: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}
/* Uniform gap between a section's top-level panels. Scoped to direct fieldsets,
   fieldsets injected into a `.settings-mount` host, and the same blocks once
   search lifts them into the results list — so an inline panel, a JS-mounted one
   and a search hit share the exact same rhythm.

   Deliberately NOT `.settings-content fieldset { margin-bottom } +
   fieldset:last-child { 0 }`: the JS mount points wrap each injected panel in a
   host <div>, which made that panel the *last child of its wrapper*. So the
   `:last-child` reset matched — and zeroed — the gap after every mounted panel
   (Providers, model routing, GitHub CLI, ACP agents, …) while inline panels kept
   the full gap. That parent-relative reset was the inconsistent-spacing bug.

   Nested fieldsets (e.g. the auth cards inside "Remote agents") are intentionally
   excluded — they are not top-level panels and space themselves. No last-panel
   reset is needed: the sticky `.settings-buttons` footer carries its own top
   margin, which collapses with the final panel's bottom margin to the same gap. */
.settings-section > fieldset,
.settings-section > .settings-mount > fieldset,
.settings-search-results > fieldset {
  /* Flat, not a card: the group's own heading and the gap to the next group are
     what separate it, so its controls share the section's left edge instead of
     sitting inset in a frame. Gap matches .usage-section-root's. */
  background: none;
  padding: 0;
  margin-bottom: calc(var(--spacing-xl) * 2);
}
/* The group's title is a heading, one step below the section's <h3> and on the
   same left edge — not a faint caption stamped into a border. Matches the
   Usage section's headings (.usage-plan-heading and friends). */
.settings-content legend {
  padding: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
}
/* Only a flat group needs this: a card's own top padding already sits between
   its title and its first control (a legend is laid out above the padding box),
   and adding a margin there too would leave the title floating. */
.settings-section > fieldset > legend,
.settings-section > .settings-mount > fieldset > legend,
.settings-search-results > fieldset > legend {
  /* A top-level group is the section's second tier, so it takes the display
     face too — one clear step down from the <h3>. Nested card titles (provider
     auth, hook cards) stay in the interface family via the base rule above. */
  font-family: var(--font-display);
  font-size: calc(20px * var(--ui-scale));
  font-weight: 400;
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
}
/* A field and its own controls stay tight; the gap belongs *between* fields. */
.settings-content fieldset label {
  margin-bottom: calc(var(--spacing-lg) + var(--spacing-sm));
}
.settings-content fieldset label:last-child {
  margin-bottom: 0;
}
/* Chat, lightweight prompts, and task-role routing are one decision surface.
   Keep the roles visibly nested inside the Models card without introducing a
   second card / nested fieldset. */
#settings-model-routing-host {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}
/* Generation parameters belong to the chat model picked above them, so they get
   the same nested-inside-the-Models-card treatment as the task roles below —
   one card, three stacked decisions, no second border box. */
#settings-model-parameters-host {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}
.model-parameter-note {
  margin-bottom: var(--spacing-lg);
}
.model-parameter-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
/* Temperature and top-p hold two characters. A full-width box would read as a
   text field and invite prose. */
.model-parameter-fields input[type='number'] {
  max-width: 10rem;
}
/* The recipe offer introduces the fields it fills, so the action, provenance,
   and resulting reasoning/output budget remain together near the top. */
.model-parameter-recommend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.model-parameter-recommend-note {
  margin: 0;
}
.model-role-heading {
  margin: 0 0 var(--spacing-xs);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
}
.model-role-fields > .settings-fieldset-desc {
  margin-bottom: var(--spacing-lg);
}
/* A hint explains the field *above* it, so it has to sit nearer that field than
   the next one. The between-fields gap normally lives on the label's bottom
   margin — which would land between a control and its own hint — so a label
   that owns a following hint hands that margin over to the hint. Skip this and
   every hint reads as a preamble to the field below it. */
.settings-content label:has(+ .field-hint),
.settings-content label:has(+ .settings-fieldset-desc) {
  margin-bottom: var(--spacing-xs);
}
/* A hint straight off the fieldset (trailing a list or a status row rather than
   one field) is the same story, so it carries the gap too. `:not(:last-child)`
   throughout: a hint that ends its group has nothing to separate from, and the
   group's own bottom margin already handles the next group. */
.settings-content label + .field-hint:not(:last-child),
.settings-content label + .settings-fieldset-desc:not(:last-child),
.settings-content fieldset > .field-hint:not(:last-child) {
  margin-bottom: calc(var(--spacing-lg) + var(--spacing-sm));
}
/* A hint continued over a second paragraph is still one hint: keep the pair
   tight, and let the last paragraph carry the gap to the next field. Tightened
   from above rather than pulled up from below, because some of these hints sit
   in flex containers where a negative margin would eat the row gap. */
.settings-content .field-hint:not(:last-child):has(+ .field-hint) {
  margin-bottom: var(--spacing-xs);
}
/* A checkbox hint also indents under the label text it belongs to. */
.settings-content .checkbox-label + .field-hint,
.settings-content .checkbox-label + .settings-fieldset-desc {
  padding-left: calc(var(--spacing-lg) + var(--spacing-xs));
}
/* Consecutive checkboxes are one cluster — keep them snug, not double-spaced.
   Pulls back the between-fields gap the label above already spent, leaving the
   same `--spacing-sm` between rows now that gap has grown. */
.settings-content .checkbox-label + .checkbox-label {
  margin-top: calc(-1 * var(--spacing-lg));
}
.app-icon-picker {
  /* Fixed 4 columns so the 16 variants land as a clean 4×4 grid with no
     orphaned last row. Capped width keeps the tiles grouped rather than
     spread thin across the settings column. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl) var(--spacing-lg);
  max-width: 560px;
}
.app-icon-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.app-icon-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.app-icon-preview {
  display: block;
  padding: var(--spacing-xs);
  border: 2px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-base);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.app-icon-preview img {
  display: block;
  /* The tile is the choice here, so it is drawn at a size you can actually
     judge rather than at list-icon scale. The assets are 512px square, so this
     stays a downscale on every display density. */
  width: 88px;
  height: 88px;
  border-radius: 14px;
}
.app-icon-option:hover .app-icon-preview {
  border-color: var(--border-strong);
}
.app-icon-option:has(input:checked) .app-icon-preview {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.app-icon-option:has(input:checked) .app-icon-label {
  color: var(--text-primary);
}
.app-icon-label {
  font-size: 12px;
}
.settings-content label select,
.settings-content label input[type='text'],
.settings-content label input[type='password'],
.settings-content label input[type='number'] {
  width: 100%;
  max-width: 480px;
  /* Fields are the section's other main target. `forms.css` sizes them from
     `--spacing-sm` alone, which lands a ~30px control; match the nav rows and
     the action buttons so nothing in the form is fiddlier than the chrome
     around it. */
  min-height: var(--action-min-height);
  padding-inline: var(--spacing-md);
}
/* The whole checkbox line — box and its wording — is one target. Padding does
   that without moving the row's text, and the negative inline start keeps the
   box on the section's left edge. */
.settings-content .checkbox-label {
  min-height: calc(28px * var(--ui-scale));
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-inline-start: calc(-1 * var(--spacing-sm));
  border-radius: var(--radius);
  font-size: var(--font-size-base);
}
.settings-content .checkbox-label:hover {
  background: var(--bg-hover);
}
/* Accent and tint sit as a pair. The labels keep the between-fields gap for the
   control that follows the row, but between themselves they only need enough
   room to stay two distinct choices. */
.settings-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}
/* Colour swatch (accent, interface tint): a well rather than a full-width row,
   sized so the colour itself is legible and the target matches the other
   controls in the section. */
.settings-content input[type='color'] {
  width: calc(88px * var(--ui-scale));
  height: var(--action-min-height);
  padding: 2px;
  cursor: pointer;
}
.settings-content input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius);
}
.settings-content input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}
/* The onboarding half of this list is gone: `.onboarding-overlay` now opts the
   whole overlay out in one rect (onboarding.css), which covers the containers
   an enumeration of leaves always missed. These are the settings panel's own,
   and are themselves redundant now that the shared `dialog` rule (forms.css)
   opts out `dialog.settings-overlay` — kept for now because removing them is a
   separate change from the drag-region fix. */
.settings-nav,
.settings-content,
.settings-content button,
.settings-content input,
.settings-content select {
  -webkit-app-region: no-drag;
}
.key-status {
  font-size: 11px;
  color: var(--text-muted);
}
.key-status.ok {
  color: var(--success);
}
.key-status.err {
  color: var(--error);
}

/* Opt-in environment key detection: action row + masked results list. */
.env-key-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.env-key-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  margin-top: var(--spacing-sm);
}
.env-key-results:empty {
  display: none;
}
.env-key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm);
  font-size: 12px;
}
.env-key-provider {
  font-weight: 600;
  min-width: 7em;
}
.env-key-source {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}
.env-key-masked {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  margin-left: auto;
}

/* Providers panel: chip row selects one provider; its form shows below. */
.provider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
/* Picking a provider is the first thing General asks of you, so the chips are
   sized as controls — the section's standard target height and body type —
   rather than as tags. */
.provider-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: var(--action-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.provider-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* The chosen provider is the one whose panel is showing below, so it takes the
   same accent wash every other selected row in the app uses. */
.provider-chip.active {
  border-color: var(--accent);
  background: var(--bg-selected);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.provider-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* One provider can offer several things at once (an API key, a cloud agent, a
   copy installed on this machine). Each is a titled block, stacked. */
.provider-vendor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.provider-capability {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}
.provider-vendor > .provider-capability:first-child {
  padding-top: 0;
  border-top: none;
}
.provider-capability-title {
  margin: 0;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.provider-panel-embedded {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.provider-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.provider-form > label {
  margin-bottom: 0;
}
.provider-form-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.provider-form-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px var(--spacing-xs);
}
/* Data-policy badge in the provider form title: where prompts go by default.
   Kinds mirror privacyBadge() in @copse/llm/data-policies.ts. */
.provider-privacy-badge {
  font-size: 10px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px var(--spacing-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.provider-privacy-badge.zdr,
.provider-privacy-badge.local {
  color: var(--success);
  border-color: var(--success);
}
.provider-privacy-badge.trains {
  color: var(--warning);
  border-color: var(--warning);
}
.provider-privacy-badge.unknown {
  color: var(--warning);
  border-color: var(--border);
}
.provider-privacy-hint code {
  overflow-wrap: anywhere;
}
.provider-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.provider-field-group > label {
  margin-bottom: 0;
}

/* Evenly spaced action row: button(s) then an inline status. */
.provider-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.provider-form-footer {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}
.provider-delete {
  margin-left: auto;
  color: var(--error);
}

/* Structured model list: id / context / label rows with add + remove. */
.provider-models {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.provider-model-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.provider-model-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr auto;
  gap: var(--spacing-sm);
  align-items: center;
}
.provider-model-row input {
  width: 100%;
}
.provider-model-head {
  font-size: 11px;
  color: var(--text-muted);
}
.provider-model-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-muted);
}
.provider-model-remove:hover {
  color: var(--error);
}
/* The base `button` rule strips every border and background, so an action with
   no recipe of its own reads as a run of text. Everything you can press in a
   provider form gets real button chrome. */
.provider-save,
.provider-secondary,
.provider-delete,
.provider-add-model {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.provider-save:hover:not(:disabled),
.provider-secondary:hover:not(:disabled),
.provider-delete:hover:not(:disabled),
.provider-add-model:hover:not(:disabled) {
  opacity: 1;
  background: var(--bg-hover);
}
.provider-save:disabled,
.provider-secondary:disabled,
.provider-delete:disabled,
.provider-add-model:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Saving or adding is the form's confirming action, so it carries the accent. */
.provider-save {
  border-color: var(--accent);
  background: var(--accent-fill);
  color: var(--text-on-accent);
}
.provider-save:hover:not(:disabled) {
  background: var(--accent-fill-hover);
  color: var(--text-on-accent);
}
.provider-delete {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
}
.provider-add-model {
  align-self: flex-start;
}
.provider-advanced summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.provider-advanced[open] summary {
  margin-bottom: var(--spacing-sm);
}

.routing-advanced {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.routing-advanced summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.routing-advanced[open] summary {
  margin-bottom: var(--spacing-sm);
}

.usage-section-root {
  display: flex;
  flex-direction: column;
  /* Separate plan limits from local ledger as distinct sections. */
  gap: calc(var(--spacing-xl) + var(--spacing-md));
}
.usage-plan-section,
.usage-worth-section,
.usage-ledger-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.usage-plan-heading,
.usage-worth-heading,
.usage-ledger-heading {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}
.usage-worth-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.usage-worth-verdict {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}
.usage-worth-card[data-verdict='worth_it'] .usage-worth-verdict {
  color: var(--success);
}
.usage-worth-card[data-verdict='not_worth_it'] .usage-worth-verdict {
  color: var(--warning);
}
.usage-worth-card[data-verdict='borderline'] .usage-worth-verdict {
  color: var(--text-secondary);
}
.usage-worth-reason {
  margin: 0;
}
.usage-worth-fee-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
.usage-worth-fee-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.usage-worth-fee-input {
  width: 7rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.usage-worth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.usage-worth-inference-btn {
  -webkit-app-region: no-drag;
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}
.usage-worth-inference-btn:hover {
  background: var(--bg-hover);
}
.usage-plan-providers {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-xl) + var(--spacing-md));
}
.usage-plan-provider {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.usage-plan-provider-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.usage-plan-name {
  margin: 0;
}
.usage-plan-status-error {
  color: var(--danger, #c44);
}
.usage-plan-signin-btn {
  align-self: flex-start;
  -webkit-app-region: no-drag;
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}
.usage-plan-signin-btn:hover {
  filter: brightness(1.05);
}
.usage-plan-window,
.usage-credit-grant {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-plan-window-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--font-size-sm);
}
.usage-plan-window-label {
  color: var(--text-primary);
  font-weight: 500;
}
.usage-plan-window-stats {
  color: var(--text-muted);
}
.usage-plan-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}
.usage-plan-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.usage-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Model value map (usage page) */
.frontier-fieldset {
  position: relative;
}
.frontier-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.frontier-control-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.frontier-controls .frontier-btn,
.frontier-controls .frontier-cost-axis {
  margin-left: 0;
}
.frontier-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--spacing-md);
  margin: var(--spacing-sm) 0 0;
  padding: 0;
  list-style: none;
}
.frontier-key-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Each swatch repeats the chart's own mark: filled = best value, grey =
   beaten, ring = estimated, faded = not set up, dashed halo = on your plan. */
.frontier-key-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.frontier-key-swatch[data-mark='dominated'] {
  background: var(--border-strong);
}
.frontier-key-swatch[data-mark='estimated'] {
  background: var(--bg-base);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.frontier-key-swatch[data-mark='discovery'] {
  opacity: 0.55;
}
.frontier-key-swatch[data-mark='plan'] {
  margin: 0 3px;
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}
.frontier-banded {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.frontier-band-row {
  display: grid;
  grid-template-columns: 52px 28px 1fr;
  gap: 8px;
  align-items: baseline;
}
.frontier-band-key {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: 600;
}
.frontier-band-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}
.frontier-band-models {
  color: var(--text-muted);
}
.frontier-tooltip {
  position: absolute;
  z-index: 30;
  /*
   * Reachable, not just readable: the card carries a link to the model's
   * vendor-published system card, so the pointer has to be able to land on it.
   * createTooltipLayer() holds the card open for a grace period after the
   * pointer leaves its point so the gap between the two can be crossed.
   */
  pointer-events: auto;
  width: max-content;
  max-width: 360px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-md);
}
.frontier-tooltip[hidden] {
  display: none;
}
.frontier-tooltip .tt-title {
  font-size: var(--font-size-sm);
}
.frontier-tooltip .tt-section {
  margin-top: 6px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.frontier-tooltip .tt-muted {
  color: var(--text-muted);
  font-size: 11px;
}
.frontier-tooltip .tt-status {
  margin-top: 6px;
  color: var(--text-secondary);
  font-style: italic;
}
.frontier-tooltip .tt-card-link {
  color: var(--link);
}
.frontier-tooltip .tt-card-link:hover {
  color: var(--link-hover);
}
.frontier-btn {
  padding: 2px 10px;
  margin-left: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  /* Weight stays constant so active/inactive never widens the glyph box. */
  font-weight: 600;
}
.frontier-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.frontier-btn.active {
  border-color: var(--accent);
  color: var(--text-primary);
  /* Sit above overlapping segment neighbors so the accent border wraps all four sides. */
  position: relative;
  z-index: 1;
}
.frontier-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.frontier-discover {
  /* Both translated state labels share a cell, so the wider one reserves the width. */
  display: inline-grid;
}
.frontier-discover-label {
  grid-area: 1 / 1;
}
.frontier-discover-label[aria-hidden='true'] {
  visibility: hidden;
}
.frontier-cost-axis {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}
.frontier-cost-axis .frontier-btn {
  margin-left: 0;
  border-radius: 0;
}
.frontier-cost-axis .frontier-btn + .frontier-btn {
  margin-left: -1px;
}
.frontier-cost-axis .frontier-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.frontier-cost-axis .frontier-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.frontier-expand-dialog {
  /* position:relative makes the dialog the containing block for the hover
     tooltip layer appended inside it — without it the absolutely-positioned
     tooltip resolves against an ancestor behind the modal and never shows. */
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
  color: var(--text-primary);
  padding: 16px;
  width: min(1400px, 96vw);
  /* The controls must stay reachable however tall the chart gets. */
  max-height: 90vh;
  overflow: auto;
}
.frontier-expand-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
/* The controls stay put while the (tall) chart scrolls under them. */
.frontier-expand-controls {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-base);
  padding-bottom: 6px;
}
.frontier-expand-chart {
  min-height: 0;
}
.frontier-expand-dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}
.frontier-expand-dialog button {
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.usage-period-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.usage-period-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.usage-period-btn.active {
  border-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}
.usage-period-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.usage-headline {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.usage-token-total {
  margin: 0;
}
.usage-model-group {
  margin-top: var(--spacing-md);
}
.usage-model-group h4 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.usage-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.usage-table {
  width: 100%;
  /* Fixed layout + a shared colgroup make the Cloud and Local tables share one
     column grid, so their columns align despite being separate elements. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.usage-col-model {
  width: 34%;
}
.usage-col-num {
  width: 13.2%;
}
.usage-table th,
.usage-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.usage-table th {
  color: var(--text-muted);
  font-weight: 500;
}
.usage-estimated {
  color: var(--text-muted);
  font-style: italic;
}
.usage-table td code {
  font-size: 12px;
  /* Long model ids must wrap inside their fixed-width column, not overflow it. */
  overflow-wrap: anywhere;
}

/* ACP agents panel: detect results + a card per configured agent. */
.acp-detect-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
}
.acp-detect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.acp-agent-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}
.acp-agent-card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.acp-agent-card-head code {
  font-size: 12px;
  color: var(--text-muted);
}
.acp-agent-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.acp-model-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}
.acp-model-row select {
  flex: 1 1 auto;
  min-width: 0;
}

/* ACP known-agent status badge: installed / running state from the last scan. */
.acp-known-status {
  font-size: 12px;
}
.acp-known-status.ok {
  color: var(--success, var(--accent));
}
.acp-known-status.missing {
  color: var(--text-muted);
}
.acp-cmd-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.acp-cmd-label {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 52px;
}
.acp-cmd {
  flex: 1;
  user-select: all;
  font-size: 12px;
  background: var(--bg-subtle, var(--bg));
  padding: 2px 6px;
  border-radius: var(--radius);
  overflow-x: auto;
}
.acp-cmd-copy {
  flex: none;
}

/* Sources section — read-only view of everything auto-loaded for the workspace
   (instruction files, skills, Cursor hooks, Cursor plugins). */
.sources-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}
.sources-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-sm);
  /* Flex-column item default min-width:auto would let a long hover path
     expand the Sources list past the settings column. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sources-row-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  min-width: 0;
  overflow: hidden;
}
/* Title (+ hover path) claim the free header space; badges/actions stay put. */
.sources-row-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  overflow: hidden;
}
.sources-row-title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
/* When a hover origin is showing, keep the title to content width so the path
   can claim the primary gutter without wrapping the row taller. */
.sources-row:hover:has(.sources-row-hover-detail) .sources-row-title,
.sources-row:focus-within:has(.sources-row-hover-detail) .sources-row-title {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.sources-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 6px;
}
.sources-badge-project {
  color: var(--warning, #d29922);
  border-color: var(--warning, #d29922);
}
/* Hooks list states: authoring warnings, unwired events, runtime failures. */
.sources-badge-warning {
  color: var(--warning, #d29922);
  border-color: var(--warning, #d29922);
}
.sources-row-warning {
  border-color: var(--warning, #d29922);
}
.sources-badge-unsupported {
  color: var(--text-muted);
  border-style: dashed;
}
.sources-badge-error {
  color: var(--error);
  border-color: var(--error);
}
/* `sandbox: false` escape (F3): hook runs outside the project sandbox. */
.sources-badge-unsandboxed {
  color: var(--warning, #d29922);
  border-color: var(--warning, #d29922);
}
.sources-row-error {
  font-size: 11px;
  color: var(--error);
  word-break: break-word;
  margin-top: 2px;
}
.sources-badge-auto {
  color: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
}
/* Instruction file discovered but inert: untrusted workspace (issue #100 gate). */
.sources-badge-untrusted {
  color: var(--warning, #d29922);
  border-style: dashed;
  border-color: var(--warning, #d29922);
}
/* A badge that is also the control that resolves it (Sources → Instructions:
   the "not loaded" badge trusts the workspace). Keeps the badge's shape and
   inherits the app font a bare <button> would otherwise drop. */
.sources-badge-btn {
  font-family: inherit;
  background: transparent;
  cursor: pointer;
}
.sources-badge-untrusted.sources-badge-btn:hover,
.sources-badge-untrusted.sources-badge-btn:focus-visible {
  border-style: solid;
  background: color-mix(in srgb, var(--warning, #d29922) 14%, transparent);
}
/* Row title as the "open this file" control: identical to the plain span until
   it is hovered or focused, so a list of rows still reads as a list. */
.sources-row-title-btn {
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sources-row-title-btn:hover,
.sources-row-title-btn:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.sources-row-detail {
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-word;
  margin-top: 2px;
}
/* Skills (and similar): filesystem origin in the primary gutter on hover —
   never a second line. Elide from the left so the leaf stays readable.
   `width: 0` + `flex-basis: 0` makes the flex algorithm ignore the path's
   intrinsic min-content so truncation actually kicks in. */
.sources-row-hover-detail {
  display: none;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  pointer-events: none;
}
.sources-row:hover .sources-row-hover-detail,
.sources-row:focus-within .sources-row-hover-detail {
  display: block;
}
.sources-empty {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.storage-project-path {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* Worktrees: same row shape as the loaded-source lists, plus the two things
   only this list has — a measured size that arrives after the row, and a
   destructive per-row action. The size keeps its own colour so it reads as a
   value rather than more of the sentence around it. */
.sources-row[data-worktree-path] .sources-row-title {
  /* Worktree headers also hold status chips and three actions. Keep a long
     branch/path on one ellipsized line at rest so revealing the hover path
     cannot collapse a previously wrapped row and visibly change its shape. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.sources-worktree-size {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.sources-worktree-thread-btn {
  background: transparent;
  cursor: pointer;
}
.sources-worktree-thread-btn:hover,
.sources-worktree-thread-btn:focus-visible {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.sources-worktree-action-btn {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px var(--spacing-sm);
  cursor: pointer;
}
.sources-worktree-action-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sources-worktree-delete-btn:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
}
.sources-worktree-action-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* G2 dry-run hook tester: a per-hook "Test" button in the row header and the
   result panel it toggles (summary chips + labeled stdin/stdout/stderr). */
.sources-hook-test-btn {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px var(--spacing-sm);
  cursor: pointer;
}
.sources-hook-test-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sources-hook-test-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.hook-test {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.hook-test-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}
.hook-test-summary.hook-test-error {
  color: var(--error);
}
.hook-test-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 6px;
}
.hook-test-outcome {
  font-size: 11px;
  color: var(--text-secondary);
  word-break: break-word;
}
.hook-test-stream-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}
.hook-test-stream pre {
  margin: 2px 0 0;
  padding: var(--spacing-sm);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}
.hook-test-stream pre.hook-test-stream-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* P3 Settings → Plugins list ("about:addons" for feature plugins). One row per
   registered plugin: name + trust badge + enable toggle in the header, then a
   description, contribution chips enumerating what the plugin contributes, and a
   generic settings block rendered from the manifest schema. */
.plugins-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}
/* "Active" / "Inactive" over each run of rows. Sans and small — the section's
   <h3> and the group legend above already carry the display face, and a third
   serif tier inside the list would flatten that order. */
.plugins-group-heading {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}
.plugins-group-heading:not(:first-child) {
  margin-top: var(--spacing-md);
}
.plugins-empty {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
/* One plugin reads as a card: it is a discrete object you act on, with a title,
   a body, and its own settings folded inside. Elevated and roomier than the
   flat groups around it, per the card convention at the top of this file. */
.plugin-row {
  background: var(--bg-elevated);
  /* `--border`, not `--border-subtle`: these cards are the primary object of the
     section and each one is a decision (on or off), so the edge that says where
     one plugin ends and the next begins should be legible rather than implied.
     #333 on the #252526 card was close enough to vanish. */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.plugin-row-disabled {
  opacity: 0.65;
}
.plugin-row-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}
/* The plugin's mark. Sized to span the eyebrow + name pair beside it, with the
   app-icon tile's corner treatment so the two read as the same family of
   object. */
.plugin-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
  border-radius: 10px;
  overflow: hidden;
  /* Fallback tile for a user-installed plugin: its initial on a neutral surface,
     deliberately unbranded. */
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  font-weight: 600;
}
.plugin-icon-copse {
  /* The mark asset carries its own neon field and corner radius. */
  background: none;
}
.plugin-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Cursor's mark sits on the same neutral tile a user-installed plugin gets —
   the glyph identifies the origin, and borrowing the Copse tile's neon field
   for someone else's plugin would read as an endorsement. The asset is taller
   than it is wide, so it is inset and contained rather than filling the tile
   like the Copse mark (which is drawn to the tile's own bounds). */
.plugin-icon-cursor img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}
.plugin-row-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.plugin-row-name-line {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.plugin-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.plugin-version {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.plugin-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 6px;
}
/* The publisher eyebrow is a caption, not a chip: no frame, wide tracking, and
   it keeps the trust colour that told first-party from user-installed. */
.plugin-badge-first-party,
.plugin-badge-user {
  align-self: flex-start;
  border: none;
  padding: 0;
  letter-spacing: 0.08em;
}
.plugin-badge-first-party {
  color: var(--text-secondary);
}
.plugin-badge-user {
  color: var(--warning, #d29922);
}
/* Cursor-installed: same eyebrow treatment as the trust badges, but muted —
   it names an owner Copse does not control rather than a trust tier. The row
   itself is styled identically to every other one: origin belongs in the badge,
   not in a different-shaped card. */
.plugin-badge-cursor {
  align-self: flex-start;
  border: none;
  padding: 0;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.plugin-source-path {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* Off — [switch] — On. Which side is live is read off the checkbox itself, so
   there is no state to keep in sync in JS. */
.plugin-toggle-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: none;
}
.plugin-toggle-control .plugin-toggle {
  /* This label is a switch handle, not a stacked settings field. Without the
     reset it inherits the field label's bottom margin, so flex centres Off/On
     against the switch's taller outer box while the visible track stays at its
     top edge. */
  margin-bottom: 0;
}
.plugin-toggle-state {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  /* Centre the *glyphs* on the switch, not the line box. A default line-height
     pads above the cap height and below the baseline, and "Off"/"On" have no
     descenders — so flex centring lines up boxes that are optically bottom-heavy
     and both labels read as sitting low beside the pill. */
  line-height: 1;
}
.plugin-toggle-control:has(.plugin-toggle-input:checked) .plugin-toggle-state[data-side='on'],
.plugin-toggle-control:not(:has(.plugin-toggle-input:checked))
  .plugin-toggle-state[data-side='off'] {
  color: var(--text-primary);
  font-weight: 600;
}
/* Inset within the plugin card, so it takes the base surface — matching
   `--bg-elevated` to the card it sits in would leave it invisible. */
.plugin-source-review {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
}
.plugin-source-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.plugin-source-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px var(--spacing-sm);
  margin: 0;
  font-size: 11px;
}
.plugin-source-details dt {
  color: var(--text-muted);
}
.plugin-source-details dd {
  margin: 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
/* Stability sits next to the plugin's name as a pill in sentence case — a label
   on the thing, not a shouted status. `plugin.stability` arrives lowercase, so the
   capital comes from CSS. */
.plugin-badge-stable,
.plugin-badge-experimental {
  border-radius: var(--action-radius);
  padding: 1px var(--spacing-sm);
  text-transform: capitalize;
  letter-spacing: 0;
}
.plugin-badge-stable {
  color: var(--success, #3fb950);
  border-color: var(--success, #3fb950);
}
/* Experimental is the one thing on the card you must read before flipping the
   switch, so it takes the interaction accent rather than a status hue — the
   documented exception in docs/ui-taste.md. */
.plugin-badge-experimental {
  color: var(--accent);
  border-color: var(--accent);
}
.plugin-row-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
  word-break: break-word;
}
.plugin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.plugin-chip {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px var(--spacing-sm);
}
.plugin-chips-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
/* "Plugin settings ⌄" — one fold per card holding the manifest fields and any
   first-party detail panel. Closed by default: a list of plugins is for deciding
   which ones you want, and every plugin's form unrolled at once buries that. */
.plugin-settings-fold {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--spacing-sm);
}
.plugin-settings-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* The row is the target, so it takes padding — pulled back inline so the
     label still starts on the card's own left edge. */
  min-height: calc(28px * var(--ui-scale));
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-inline: calc(-1 * var(--spacing-sm));
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  /* Drop the UA disclosure triangle; the chevron below is ours, and it matches
     every other disclosure in the app. */
  list-style: none;
}
.plugin-settings-summary::-webkit-details-marker {
  display: none;
}
.plugin-settings-summary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.plugin-settings-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}
.plugin-settings-fold[open] .plugin-settings-chevron {
  transform: rotate(180deg);
}
.plugin-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}
/* Names a block *inside* the fold ("Schedules", the Parallel Search key) — the
   summary already names the fold itself, so these stay captions. */
.plugin-settings-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.plugin-setting-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}
.plugin-setting-title {
  color: var(--text-primary);
}
.plugin-setting-desc {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
}
/* What the selected rule names right now — the one thing a rule hides that a
   pinned model id showed. Hidden when the stored value is already concrete. */
.plugin-setting-resolved {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.plugin-setting-input {
  justify-self: end;
}
.plugin-setting-input.plugin-setting-string,
.plugin-setting-input.plugin-setting-number {
  min-width: 180px;
}

.parallel-search-plugin-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-sm);
}
.parallel-search-key-fieldset {
  margin: 0;
}
.parallel-search-notice {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.parallel-search-actions {
  display: flex;
  gap: var(--spacing-xs);
}
.parallel-search-save-btn,
.parallel-search-clear-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
}
.parallel-search-save-btn:hover:not(:disabled),
.parallel-search-clear-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}
.parallel-search-save-btn:disabled,
.parallel-search-clear-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
/* Why a credential-gated plugin's toggle is inert (or on-but-inactive). Warning
   tinted: the plugin cannot contribute its tool in this state. */
.plugin-credential-gate {
  margin: 0;
  font-size: 11px;
  color: var(--warning, #d29922);
}
.plugin-toggle-input:disabled + .toggle-switch-track {
  cursor: not-allowed;
  opacity: 0.5;
}
/* A Cursor plugin's switch is on and locked, not broken. The 0.5 above is meant
   for a toggle you cannot use *yet* (a credential-gated plugin); dimming this
   one that far reads as "off or failing" when the plugin is in fact running.
   Enough fade to say "not yours to move", not enough to lose the accent. */
.plugin-row[data-plugin-origin='cursor'] .plugin-toggle-input:disabled + .toggle-switch-track {
  opacity: 0.8;
}

/* First-party level-3 detail for copse.automations. It lives inside the plugin
   row so scope, enablement, and configuration remain one coherent surface. */
.automation-plugin-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-sm);
}
.automation-plugin-heading,
.automation-row,
.automation-row-meta,
.automation-row-actions,
.automation-form-actions {
  display: flex;
  align-items: center;
}
.automation-plugin-heading {
  justify-content: space-between;
  gap: var(--spacing-md);
}
.automation-add-btn,
.automation-save-btn,
.automation-cancel-btn,
.automation-row-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
}
.automation-add-btn:hover:not(:disabled),
.automation-cancel-btn:hover:not(:disabled),
.automation-row-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}
.automation-add-btn:disabled,
.automation-row-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.automation-scope,
.automation-notice,
.automation-status,
.automation-empty,
.automation-row-last-run,
.automation-hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.automation-notice {
  color: var(--text-secondary);
}
.automation-status {
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--success);
}
.automation-status-error {
  color: var(--error);
}
.automation-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.automation-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  text-align: center;
}
.automation-row {
  gap: var(--spacing-md);
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-sm);
  background: var(--bg-base);
}
.automation-row-paused {
  opacity: 0.7;
}
.automation-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.automation-row-title {
  color: var(--text-primary);
  font-weight: 600;
}
.automation-row-meta {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 11px;
  color: var(--text-secondary);
}
.automation-row-meta code {
  color: var(--accent);
}
.automation-row-actions,
.automation-form-actions {
  flex: none;
  gap: var(--spacing-sm);
}
.automation-run-btn,
.automation-save-btn {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--text-on-accent);
}
.automation-remove-btn {
  color: var(--error);
}
.automation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  background: var(--bg-base);
}
.automation-form[hidden],
.automation-list[hidden],
.automation-plugin-heading[hidden] {
  display: none;
}
.automation-form-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--font-size-md);
}
.automation-label {
  display: flex;
  margin-bottom: 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-xs);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.automation-label:has(.automation-prompt-input),
.automation-worktree-limit-label,
.automation-enabled-label,
.automation-form-actions {
  grid-column: 1 / -1;
}
.automation-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--spacing-sm);
  font: inherit;
}
.automation-prompt-input {
  min-height: 88px;
  resize: vertical;
}
.automation-enabled-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: start;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}
.automation-enabled-input {
  width: auto;
}
.automation-form-actions {
  justify-content: flex-end;
}

/* The plugin's project editor also mounts outside the full Settings surface. */
#automation-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  color: var(--text-primary);
  overflow: hidden;
}
#automation-dialog[open] {
  display: flex;
  flex-direction: column;
}
#automation-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
.automation-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border);
}
.automation-dialog-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}
.automation-dialog-body {
  padding: var(--spacing-lg);
  overflow: auto;
  min-height: 0;
}
.automation-dialog-plugin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.automation-dialog-plugin > span {
  flex: 1;
}
.automation-dialog-body > [role='status']:empty {
  display: none;
}
@media (max-width: 600px) {
  #automation-dialog .automation-form {
    grid-template-columns: 1fr;
  }
  #automation-dialog .automation-row {
    align-items: flex-start;
    flex-direction: column;
  }
  #automation-dialog .automation-row-actions {
    flex-wrap: wrap;
  }
}

.sources-worktrees-selection,
.sources-worktrees-selection label,
#sources-worktrees-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.sources-worktrees-selection {
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.settings-content .sources-worktrees-selection label {
  flex-direction: row;
  margin: 0;
}

.sources-worktree-select,
#sources-worktrees-select-all {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

#sources-worktrees-selected-count {
  color: var(--text-secondary);
}

#sources-worktrees-status {
  white-space: pre-line;
}

/* Fieldset's native min-content width otherwise defeats row truncation. */
.sources-worktrees-fieldset {
  min-inline-size: 0;
}