.settings-shell {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0 20px 16px;
}

.settings-scroll {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 4px 2px 88px;
}

.settings-panel {
    display: none;
    min-width: 0;
    overflow-wrap: anywhere;
    flex-direction: column;
    gap: var(--space-4);
}

.settings-panel.active {
    display: flex;
}

/* The section (settings_controls.js settingsSection; DESIGN.md principle 7): a .ui-card holding the title row, one
   lead in owner words, the controls, and the former copy behind one Details disclosure. The section is the size
   container its segmented rows measure against (the tray below is one too, for the rows it holds). */
.settings-shell .form-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: 0;
    container: settingsbox / inline-size;
}
/* The Danger Zone is the red tone on the object. */
.settings-shell .form-section.danger { background: var(--tone-red); }

.settings-shell .form-section h3 {
    margin-bottom: 0;
}

/* The title row: the title, and the section's quiet actions docked at its end. */
.settings-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}
.settings-section-head > h3 { flex: 1 1 12rem; min-width: 0; }

.settings-section-lead,
.settings-section-copy {
    margin: 0;
    color: var(--text-meta);
    font-size: var(--type-body);
    line-height: var(--line-body);
    max-width: 72ch;
    overflow-wrap: anywhere;
}

/* A provider card's inset lives in its head and body (the disclosure's summary is the head), so the card itself
   has none: the inset token is set to nothing on this scope, never the padding property. */
.settings-provider-card {
    --card-pad: 0;
    overflow: hidden;
}

/* The card head: its disclosure (title and hint) and the card's own Add key, docked right
   (docs/DESIGN.md §6: a section-level action belongs in its group's header). */
.settings-provider-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 16px 18px;
}

.settings-provider-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-provider-toggle:focus-visible {
    outline: 2px solid var(--focus-accent-border);
    outline-offset: 4px;
    border-radius: var(--radius-inner);
}

.settings-provider-head > .btn { flex: 0 0 auto; }

.settings-provider-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-provider-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.settings-provider-hint {
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    font-weight: 400;
    text-align: right;
}

.settings-provider-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 18px 18px;
}

/* Key rows: the account-row anatomy (name and status, meta line, actions docked right) with the
   key's own fields and quiet result lines under the two lines (docs/DESIGN.md §6). */
.connection-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.harness-account-row.connection-row {
    grid-template-areas: "main actions" "meta actions" "fields fields";
}

.connection-fields {
    grid-area: fields;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    margin-top: var(--space-2);
}

.connection-fields > .settings-inline-status:empty { display: none; }

.connection-note {
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    overflow-wrap: anywhere;
}

/* "More providers" (the shared disclosure, ui.css details.ui-disclosure): rarely used provider cards stay mounted
   inside it whether it is open or not; the summary names them in meta ink, its caret says it opens. */
.settings-more-providers > summary { flex-wrap: wrap; padding: var(--space-2) 0; }
.settings-more-providers > summary .settings-provider-title { flex: 1 1 auto; }
.settings-more-providers > summary .settings-provider-hint { flex: 1 1 100%; padding-left: calc(6px + 2px + var(--space-1) + var(--space-2)); }

.settings-more-providers-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* A collapsed subsection inside a section (Agents → Delegation → Advanced) is the same shared disclosure. */
.settings-subsection-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0 var(--space-2);
}

.settings-extension-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-extension-section {
    padding: 12px 14px;
}

.settings-extension-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.settings-extension-components,
.settings-extension-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-extension-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: var(--type-body);
    line-height: var(--line-body);
}

.settings-shell .form-row,
.connection-fields .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
    margin-bottom: 0;
}

.settings-shell .form-grid {
    display: grid;
    gap: 14px;
}

.settings-shell .form-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.settings-shell .form-grid.four {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.settings-shell .form-field {
    min-width: 0;
    gap: 8px;
}

/* Uppercase micro-label retired (docs/DESIGN.md "Hierarchy rule"). */
.settings-shell .form-field label {
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    font-weight: 600;
    color: var(--text-meta);
    text-transform: none;
    letter-spacing: normal;
}


/* MCP servers: one tray per server (DESIGN "List editors"): the row (name, one state chip, Enabled, its actions),
   the action's result under it, then the form behind Edit and the stamps behind Details (the shared disclosure). */
.mcp-servers-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mcp-server-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
}

.mcp-server-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.mcp-server-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    flex: 1 1 16rem;
    min-width: 0;
}

.mcp-server-card-actions,
.mcp-server-enabled {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* The chip is a flat status tint (DESIGN "Status and chips"): the state word in its hue, never pressable. */
.mcp-server-status {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 1px var(--space-2);
    border-radius: var(--pill-radius);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    background: var(--status-neutral-bg);
}

.mcp-server-status-ok { color: var(--status-ok-fg); background: var(--status-ok-bg); }
.mcp-server-status-warn { color: var(--status-warn-fg); background: var(--status-warn-bg); }
.mcp-server-status-danger { color: var(--status-error-fg); background: var(--status-error-bg); }
.mcp-server-status-muted { color: var(--status-neutral-fg); }

/* A remote server's sign-in: one fact and one button; the paste and the app registration under Details. */
.mcp-sign-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mcp-sign-in[hidden] { display: none; }
.mcp-sign-in-details { flex-basis: 100%; }
.mcp-sign-in-details label { display: grid; gap: 6px; margin: 8px 0; }

.mcp-server-message:empty, .mcp-server-message[hidden] { display: none; }

.mcp-server-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mcp-server-facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mcp-server-facts > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--type-meta); line-height: var(--line-meta); }
.mcp-server-facts dt { flex: 0 1 9em; color: var(--text-meta); }
.mcp-server-facts dd { flex: 1 1 16rem; min-width: 0; margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.mcp-server-facts:empty + [data-mcp-weight][hidden] { display: none; }

.mcp-tools-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
    padding-left: 18px;
}

.mcp-tool-desc {
    display: block;
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
}

/* Was --text-muted (the DISABLED ink); load-bearing caveats are --text-meta. */
.settings-inline-note {
    margin-top: 2px;
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-body);
}

/* The note element carries a tone at a few call sites (the harness login card's
   failure) but had no tone rule, so a failure rendered as an ordinary hint. */
.settings-inline-note[data-tone="ok"] { color: var(--status-ok-fg); }
.settings-inline-note[data-tone="warn"] { color: var(--status-warn-fg); }
.settings-inline-note[data-tone="error"] { color: var(--status-error-fg); }

/* Utility: hide elements that start as hidden and are revealed via JS */
.local-model-hidden {
    display: none !important;
}

/* Local model download progress bar */
.local-model-progress-wrap {
    margin-top: 8px;
    height: 6px;
    border-radius: var(--pill-radius);
    background: rgba(var(--neutral-rgb), 0.08);
    overflow: hidden;
}

.local-model-progress-bar {
    height: 100%;
    border-radius: var(--pill-radius);
    background: var(--accent);
    width: 0%;
    transition: width 0.4s ease;
}

/* Install Local Runtime button */
.local-model-install-btn {
    margin-top: 10px;
}

.settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Rows that wrap on a phone (a toolbar, a secret's buttons, an account's actions and its resources, a segmented scale):
   under a finger their controls take the touch minimum as their own height through the control tokens (the lock
   writes the box), so no reach covers a neighbour (DESIGN "Touch and containment"). */
@media (pointer: coarse) {
    :is(.settings-toolbar, .secret-input-row, .harness-account-actions, .account-resource-panel, .settings-effort-group,
        .settings-extension-actions, .harness-maintenance-actions) {
        --control-h: var(--touch-target-min);
        --control-h-sm: var(--touch-target-min);
    }
}

/* One reader left, outside Settings: the Skills › Browse cards (skill_browse.js). Settings and Dashboard › Updates
   compose ui.css .ui-action-row; this goes with its last reader, once Skills composes the shared row too. */
.settings-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.settings-action-row > :first-child {
    flex: 1 1 0;
    min-width: min(100%, var(--result-copy-min-width));
    overflow-wrap: anywhere;
}
.settings-action-row > :last-child:not(:first-child) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-inline-start: auto;
    white-space: normal;
}
.settings-action-row > :empty { display: none; }

/* The Save bar is one shared action row (ui.css .ui-action-row): Reload, Save, then the one result right after
   them; About hides it. */
.settings-footer {
    flex-shrink: 0;
    padding: var(--space-3) 2px 0;
    border-top: 1px solid var(--divider);
    background: var(--surface-object);
}
.settings-footer[hidden] { display: none; }
.settings-footer > #settings-restart-status[hidden] { display: none; }

/* A secret's field row: the input, then its buttons at the field's middle, however many the row has. */
.secret-input-row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    gap: var(--space-2);
    align-items: center;
}

.secret-input-row input {
    min-width: 0;
}

.settings-secret-source,
.settings-secret-status {
    grid-column: 1 / -1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Show puts the value in the masked input's own cell (the input steps aside);
   the buttons keep to its first line rather than stretching with a long value. */
.settings-secret-value {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}

.settings-secret-value:not([hidden]) ~ .btn {
    align-self: start;
}

.available-subagents-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.available-subagents-toolbar,
.available-subagent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The section's Add and the card's own actions dock right (docs/DESIGN.md §6). */
.available-subagents-toolbar .btn-default,
.available-subagent-actions {
    margin-left: auto;
}

/* Reserve the intent slot even when Settings' Save bar owns the dirty word:
   the first edit never re-wraps or collapses a toolbar line above the cards. */
.available-subagents-intent {
    min-width: 8rem;
    min-height: calc(var(--type-meta) * var(--line-meta));
}

.available-subagents-count,
.available-subagents-source,
.available-subagents-diagnostics,
.available-subagents-empty,
.available-subagent-meta {
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-body);
}

.available-subagents-diagnostics[data-tone="error"],
.available-subagent-meta[data-tone="error"] {
    color: var(--status-error-fg);
}

.available-subagents-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Open card (docs/DESIGN.md §6 row anatomy): head → current exceptions →
   labelled Source and Model, then Account / Effort / Access → Description →
   one meta line → Processing and Details & history. The card is a size
   container, so its own width, not the viewport, picks the field columns. */
.available-subagent-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-inner);
    background: var(--surface-tray);
    container: subagentcard / inline-size;
}

.available-subagent-row [hidden] {
    display: none;
}

/* An entry the owner tried to save with an error is emphasised, not dimmed. */
.available-subagent-row[data-invalid] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

/* The title side wraps inside its own basis; the Reviewer mark and the actions
   keep the end slot. Whether the head wraps depends on the card width only, so
   no status word or caption moves the Reviewer box (docs/DESIGN.md §6). */
.available-subagent-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
}

.available-subagent-title {
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
    min-height: 34px;
}

/* Source beside a wide Model, then Account / Effort / Access; fewer columns as
   the card narrows. Tracks yield to the card (minmax(0, …)). */
.available-subagent-route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.available-subagent-field-model {
    grid-column: span 2;
}

@container subagentcard (max-width: 34rem) {
    .available-subagent-route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .available-subagent-field-model {
        grid-column: 1 / -1;
    }
}

@container subagentcard (max-width: 22rem) {
    .available-subagent-route {
        grid-template-columns: minmax(0, 1fr);
    }
}

.available-subagent-heading {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--type-body);
    font-weight: 600;
}

/* The per-row owner switch leads the card head. Padding buys a comfortable
   pointer target around the 14px native box; the matching negative margin
   keeps the head's own rhythm (docs/DESIGN.md §6). */
.available-subagent-enable {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
    cursor: pointer;
}

/* One short availability word; the full sentence is the status's title. */
.available-subagent-head .settings-inline-status {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.available-subagent-purpose {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--text-meta);
    font-size: var(--type-meta);
}

/* One line that grows with its text up to four, then scrolls: the browser
   sizes it (`field-sizing`); a shell without that property keeps the one-line
   field and manual resize. 22px is the control's own padding and border. */
.available-subagent-purpose textarea {
    width: 100%;
    field-sizing: content;
    line-height: var(--line-body);
    min-height: calc(var(--type-body) * var(--line-body) + 22px);
    max-height: calc(4 * var(--type-body) * var(--line-body) + 22px);
    overflow-y: auto;
    resize: vertical;
}

.available-subagent-meta {
    overflow-wrap: anywhere;
}

/* A current exception in words (a specific refusal, a marked row switched off):
   the status title needs a hover a phone lacks. */
.available-subagent-status-reason {
    color: var(--status-warn-fg);
    font-size: var(--type-meta);
    line-height: var(--line-body);
    overflow-wrap: anywhere;
}

.available-subagent-reviewer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 34px;
    color: var(--text-primary);
    font-size: var(--type-body);
    cursor: pointer;
}

/* Details & history: label beside value, stacked on a narrow card. */
.available-subagent-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
}

.available-subagent-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--space-2);
}

/* A row whose level is in the model name: the effort facet reads, it does not edit. */
.available-subagent-readonly {
    display: flex;
    align-items: center;
    color: var(--text-meta);
}

.available-subagent-facts dt {
    color: var(--text-meta);
    font-size: var(--type-meta);
    font-weight: 600;
}

.available-subagent-facts dd {
    margin: 0;
    color: var(--text-meta);
    font-size: var(--type-meta);
    overflow-wrap: anywhere;
}

@container subagentcard (max-width: 28rem) {
    .available-subagent-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

.available-subagents-review-empty,
.available-subagents-review-copies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--status-warn-fg);
    font-size: var(--type-meta);
}

/* A key is its name, its field and who asked for it; the space between two keys is wider than inside one. */
.settings-secret-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* A custom key's row: its name beside its value (the value's field row holds every button). */
.settings-custom-secret-row {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
}

.settings-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-model-card,
.settings-effort-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-width: 0;
}

.settings-model-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.settings-model-header h4 {
    font-size: var(--type-section);
    line-height: var(--line-title);
    font-weight: 600;
    margin: 0 0 4px;
}

.settings-model-header p {
    margin: 0;
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
}







.settings-effort-card {
    gap: 10px;
    /* The tray's own width, not the viewport, decides when a segmented group wraps. */
    container: settingsbox / inline-size;
}

.settings-effort-card label {
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    font-weight: 600;
    color: var(--text-meta);
    text-transform: none;
    letter-spacing: normal;
}

/* One equal-width grid for every segmented control. The renderer writes how many
   choices it drew (`--segment-count`, page_header.js renderSegmentedField): up to
   four share one row and fill it; a longer scale keeps four equal columns and
   leaves its last row partly empty rather than stretching a lone choice. Each
   track is that exact fraction of the row, so no math function sits in the
   repeat count. */
.settings-effort-group {
    --segment-gap: 8px;
    --segment-columns: min(var(--segment-count, 4), 4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--segment-columns) - 1) * var(--segment-gap)) / var(--segment-columns)), 1fr));
    gap: var(--segment-gap);
}

/* A card of 20rem or less stacks two equal columns. Above it today's longest
   labels ("Development" in three columns, "Advanced" in four) still sit inside
   their buttons, and the default desktop window keeps its four-column effort
   scales. */
@container settingsbox (max-width: 20rem) {
    .settings-effort-group {
        --segment-columns: min(var(--segment-count, 4), 2);
    }
}

/* Max review cycles: five one-glyph values (1 / 2 / 3 / 5 / ∞) keep one compact
   row at every width. */
[data-review-cycles-group].settings-effort-group {
    --segment-columns: var(--segment-count, 5);
}

/* The segment itself (.ui-segment, its states) is ui.css's; the group's layout stays here. */


/* The local toggle's checkbox and gap: one pair of dimensions for the toggles and for the
   notes that line up with their label text (Startup & background). */
:root {
    --local-toggle-box: 14px;
    --local-toggle-gap: 6px;
}

.local-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--local-toggle-gap);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    color: var(--text-meta);
    cursor: pointer;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.local-toggle input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--accent);
    width: var(--local-toggle-box);
    height: var(--local-toggle-box);
    cursor: pointer;
}

/* The notification choices sit under their master switch; while it is off they are disabled (the words say so
   in the disabled ink). */
.notify-choices { display: flex; flex-direction: column; gap: 10px; padding-left: calc(var(--local-toggle-box) + var(--local-toggle-gap)); }
.notify-choices :is(.local-toggle:has(> input:disabled), .notify-tone-volume > label:has(+ input:disabled)) {
    color: var(--text-disabled);
    cursor: default;
}

/* A slider row (Notifications: the soft app tone's level, under Sound; Appearance: the interface size). The label on
   its own line, the slider and its value on one, then its action and the note across the row. */
.notify-tone-volume,
.interface-size-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
}
.interface-size-range[hidden] { display: none; }
.notify-tone-volume > label,
.notify-tone-volume > .settings-toolbar,
.notify-tone-volume > .settings-inline-note,
.interface-size-range > label,
.interface-size-range > .settings-toolbar {
    grid-column: 1 / -1;
}
.notify-tone-volume > .settings-toolbar,
.interface-size-range > .settings-toolbar {
    margin: 0;
}
.notify-tone-volume input[type="range"],
.interface-size-range input[type="range"] {
    min-width: 0;
    width: 100%;
    accent-color: var(--accent-light);
}
.notify-tone-volume input[type="range"]:disabled,
.interface-size-range input[type="range"]:disabled {
    opacity: var(--control-disabled-opacity);
    cursor: not-allowed;
}
.notify-tone-volume input[type="range"]:focus-visible,
.interface-size-range input[type="range"]:focus-visible {
    outline: 2px solid var(--focus-accent-border);
    outline-offset: 2px;
}
.notify-tone-volume output,
.interface-size-range output {
    min-width: 4ch;
    text-align: right;
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    font-variant-numeric: tabular-nums;
    color: var(--text-meta);
}

/* Startup & background: a row's note starts where its checkbox label's text starts, and a
   status dot hangs under the checkbox, so wrapped lines and both rows share one text edge. */
[data-autostart-settings] {
    --autostart-dot: var(--mark-fact);   /* the status sentence's dot, ui.css */
}
[data-autostart-settings] .settings-inline-status,
[data-autostart-settings] .settings-inline-note {
    padding-left: calc(var(--local-toggle-box) + var(--local-toggle-gap));
}
/* Both rows sit in the card's one column, so a note is as far from its own checkbox in either
   row, and an empty note takes no room. */
[data-autostart-settings] [data-background-row]:not([hidden]) {
    display: contents;
}
[data-autostart-settings] .settings-inline-status:empty {
    display: none;
}
/* A row's plain note (no tone, no dot) reads in meta ink, like the shared note. */
[data-autostart-settings] .settings-inline-status:not([data-tone]) {
    color: var(--text-meta);
}
[data-autostart-settings] .settings-inline-status[data-tone]:not(:empty)::before {
    margin-left: calc(var(--autostart-dot) / 2 - var(--local-toggle-box) / 2 - var(--local-toggle-gap) - var(--autostart-dot));
    margin-right: calc(var(--local-toggle-box) / 2 + var(--local-toggle-gap) - var(--autostart-dot) / 2);
}

.local-toggle[data-warning="1"] {
    color: var(--status-warn-fg);
}

.settings-test-result {
    display: none;
    margin-top: 4px;
    color: var(--text-meta);
    font-size: var(--type-meta);
    line-height: var(--line-meta);
}

@media (max-width: 980px) {
    .settings-shell {
        padding: 0 14px 14px;
    }

    .harness-account-row.connection-row {
        grid-template-areas: "main" "meta" "fields" "actions";
    }

    .settings-model-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .settings-provider-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .settings-provider-hint {
        text-align: left;
    }

    /* A narrow field row: the input on its own line, the buttons under it from the left. */
    .secret-input-row {
        display: flex;
        flex-wrap: wrap;
    }
    .secret-input-row > input,
    .secret-input-row > .settings-secret-value { flex: 1 1 100%; }

    .settings-custom-secret-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .available-subagents-toolbar .btn-default {
        margin-left: 0;
    }

}

@media (max-width: 640px) {
    .settings-shell {
        padding: 0 10px 10px;
    }

    .settings-provider-head {
        padding: 14px 14px;
    }

    .settings-provider-body {
        padding: 0 14px 14px;
    }
}


/* Account resource disclosure (the Accounts store owns its data). */
.account-resource-panel {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--type-body);
    line-height: var(--line-body);
    min-width: 0;
    overflow-wrap: anywhere;
}
.account-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.account-resource-head h5 {
    font-size: var(--type-body);
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
}
.resource-age {
    font-size: var(--type-meta);
    color: var(--text-meta);
}
.resource-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}
.resource-section h6 {
    font-size: var(--type-body);
    color: var(--text-primary);
    font-weight: 600;
    margin: 0 0 var(--space-3);
}
.resource-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.resource-fact dt {
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    color: var(--text-meta);
    min-width: 0;
}
.resource-fact dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.resource-window {
    margin: 0 0 var(--space-4);
}
.resource-window .resource-fact {
    margin-bottom: var(--space-2);
}
.resource-track {
    height: var(--space-1);
    border-radius: var(--pill-radius);
    background: var(--surface-tray);
    overflow: hidden;
    margin-bottom: var(--space-1);
}
.resource-fill {
    width: var(--resource-used);
    height: 100%;
    background: var(--text-meta);
    border-radius: var(--pill-radius);
}
.resource-window[data-spent="true"] .resource-fill {
    background: var(--amber);
}
.resource-reset-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--divider);
}
.resource-reset-section > h6 {
    font-size: var(--type-body);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}
.resource-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
.resource-offer + .resource-offer {
    border-top: 1px solid var(--divider);
}
.resource-offer-title {
    font-size: var(--type-body);
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.resource-offer-copy {
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    color: var(--text-meta);
}
.resource-offer .btn {
    flex-shrink: 0;
}
.resource-message {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-inner);
    background: var(--surface-tray);
    color: var(--text-primary);
    font-size: var(--type-body);
    line-height: var(--line-body);
}
.resource-message[data-tone="warn"] {
    color: var(--status-warn-fg);
    background: var(--status-warn-bg);
}
.resource-message[data-tone="ok"] {
    color: var(--status-ok-fg);
    background: var(--status-ok-bg);
}
.resource-message strong {
    font-size: var(--type-body);
    color: var(--text-primary);
    font-weight: 600;
    display: block;
}
.resource-message small {
    font-size: var(--type-meta);
    color: var(--text-meta);
    display: block;
    line-height: var(--line-meta);
    margin-top: var(--space-1);
}

.resource-reset-offer + .resource-reset-offer {
    border-top: 1px solid var(--divider);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
}
.harness-account-actions [data-resources][aria-expanded="true"] {
    background: var(--surface-capsule-hover);
}
@media (max-width: 980px) {
    .account-resource-panel {
        padding: var(--space-3);
    }
    .resource-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
    .resource-section + .resource-section {
        border-top: 1px solid var(--divider);
        padding-top: var(--space-3);
    }
    .resource-offer {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
    }
    .account-resource-head {
        align-items: flex-start;
    }
    .resource-offer .btn {
        align-self: flex-start;
    }
}

.resource-provenance {
    margin-top: var(--space-4);
    font-size: var(--type-meta);
    color: var(--text-meta);
}
.resource-provenance summary {
    cursor: pointer;
    min-height: var(--touch-target-min);
}
.resource-provenance dl { margin-top: var(--space-2); }

/* Header rows keep long credentials inside their own column, including WebKit. */
.mcp-headers-fields { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.mcp-headers-fields .settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.mcp-headers-fields h4 { margin: 0; font-size: var(--type-body); font-weight: 600; color: var(--text-primary); }
.mcp-headers-fields p { margin: 0; }
.mcp-header-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-2); min-width: 0; }
.mcp-header-row > button { justify-self: start; align-self: center; }
.mcp-header-row .form-field, .mcp-header-row .secret-input-row { min-width: 0; }
.mcp-import-entry { display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.mcp-import-entry-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mcp-import-choice { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
@media (max-width: 600px) {
    .mcp-header-row { grid-template-columns: minmax(0, 1fr); }
}

/* About: a centred page block, its title at the page size and the versions as one meta line. */
.about-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-5);
    padding: 40px 20px;
    text-align: center;
}
.about-logo {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-object);
    object-fit: cover;
}
.about-title { font-size: var(--type-page); line-height: var(--line-title); font-weight: 600; margin: 0; }
.about-version { color: var(--text-meta); font-size: var(--type-meta); line-height: var(--line-meta); margin: var(--space-1) 0 0; }
.about-desc { max-width: 480px; color: var(--text-secondary); font-size: var(--type-body); line-height: var(--line-body); }
.about-credits { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--type-body); }
.about-links { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-1); }
.about-links a { color: var(--accent); text-decoration: none; }