.creator-top-actions{justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4)}
.creator-top-actions button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);background:transparent;white-space:nowrap}
.creator-top-actions .material-symbols-outlined{font-size:18px}
/* Settings (numbers-based branch): four tabs, one section each, in the
   Field Ledger style. Each section is groups of rows, a label (and a line of
   help) beside or over its control; on/off rows are square switches. */
/* One height for every tab, so the tab bar stays put; the footer at the foot. */
.settings-card{width:min(620px,94vw);height:min(88vh,820px);height:min(88dvh,820px);min-width:0;gap:var(--space-8)}
.settings-card [hidden]{display:none!important}
.settings-tabs{position:sticky;top:-20px;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;flex:none;margin:-6px -20px 0;background:var(--line);border-block:1px solid var(--line)}
.settings-tabs button{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:58px;padding:8px 0;border:0;border-radius:0;background:var(--surface-low);color:var(--muted);font:var(--size-tiny)/1.15 var(--head)}
.settings-tabs button>span:not(.material-symbols-outlined){max-width:100%;overflow:hidden;font-size:clamp(10px,2.9vw,var(--size-tiny));white-space:nowrap;text-overflow:ellipsis}
.settings-tabs .material-symbols-outlined{font-size:20px}
.settings-tabs button[aria-selected=true]{color:var(--accent);background:linear-gradient(var(--accent-950),var(--surface-warm)) var(--surface-warm);box-shadow:inset 0 -2px var(--accent)}
.settings-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.settings-panel{display:grid;gap:var(--space-6);min-width:0}
.settings-heading{margin:8px 0 0;color:var(--accent);font:600 var(--size-caption)/1.3 var(--head);letter-spacing:.18em;text-transform:uppercase}
.settings-panel>.settings-heading:first-child,.settings-panel>.settings-section-heading:first-child .settings-heading{margin-top:0}
.settings-section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6)}
.provider-badge{padding:1px 6px;border:1px solid var(--stone-600);border-radius:var(--ledger-radius);color:var(--text-dim);font:600 var(--size-micro)/1.5 var(--head);letter-spacing:.08em;text-transform:uppercase}
.settings-list{min-width:0;border:1px solid var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface)}
.settings-card .settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;min-height:58px;margin:0;padding:10px 12px;border-top:1px solid var(--stone-850);color:var(--text)}
.settings-list>.settings-row:first-child{border-top:0}
.settings-card .settings-row.stack{grid-template-columns:minmax(0,1fr)}
.settings-label{display:grid;gap:2px;min-width:0}
.settings-label b{color:var(--text);font:500 var(--size-small)/1.3 var(--head)}
.settings-label small,.settings-card .settings-row>small{color:var(--text-dim);font:var(--size-caption)/1.45 var(--head)}
.settings-card select,.settings-card input:not([type=checkbox],[type=radio]){min-width:0;max-width:100%;min-height:44px;padding:0 10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius);background-color:var(--field);color:var(--text);font:500 var(--size-caption) var(--head)}
.settings-card select{padding-right:26px;text-overflow:ellipsis}
.settings-row:not(.stack)>select{width:auto;max-width:min(52vw,240px)}
/* An in-page dropdown (controls.css) is as wide as its chosen option, not its longest; these keep one width so a choice does not move them. */
@supports (appearance:base-select){.settings-row:not(.stack)>select{width:min(52vw,240px)}}
.settings-row.stack select{width:100%}
/* Switches: square, in a 44px-tall row. */
.settings-card .settings-toggle input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:46px;height:26px;min-height:0;margin:0;padding:0;border:1px solid var(--stone-600);border-radius:var(--ledger-radius);background:var(--surface-low);cursor:pointer}
.settings-toggle input[role=switch]::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:1px;background:var(--text-dim)}
.settings-toggle input[role=switch]:checked{border-color:var(--accent-600);background:var(--accent-900)}
.settings-toggle input[role=switch]:checked::before{transform:translateX(20px);background:var(--accent)}
.settings-toggle input[role=switch]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.settings-card .settings-toggle:has(input:disabled){opacity:.6}
.settings-card :disabled{cursor:not-allowed}
.settings-card .hint{margin:0;color:var(--text-dim);font:var(--size-caption)/1.5 var(--head)}
.settings-card .reading-preview{border-radius:var(--ledger-radius)}
/* Theme picker (v6.42): each card carries its theme's data attribute, so its
   swatch and name show that theme's colours whatever the page is using. */
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.settings-card .theme-option{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
.settings-card .theme-option input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0}
.theme-card{display:grid;gap:var(--space-3);padding:8px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface-low)}
.theme-swatch{display:flex;height:22px;overflow:hidden;border-radius:1px}
.theme-swatch span{flex:1}
.theme-swatch span:nth-child(1){background:var(--accent-900)}
.theme-swatch span:nth-child(2){background:var(--accent-600)}
.theme-swatch span:nth-child(3){background:var(--accent)}
.theme-name{overflow:hidden;color:var(--accent);font:600 var(--size-label) var(--head);text-overflow:ellipsis;white-space:nowrap}
.theme-option input:checked+.theme-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-950)}
.theme-option input:focus-visible+.theme-card{outline:2px solid var(--accent);outline-offset:2px}
/* More: the trace panel diagnostics/ui.mjs drops in, then the credits. */
.settings-diagnostics section{display:grid;gap:var(--space-5)}
.settings-diagnostics hr{display:none}
.settings-diagnostics #trace-count{padding:10px 12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface);color:var(--text);font:500 var(--size-small)/1.4 var(--head)}
.settings-diagnostics .sync-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.settings-diagnostics .sync-actions button{min-height:44px;padding:0 12px;white-space:nowrap;border-color:var(--stone-700);border-radius:var(--ledger-radius);background:var(--surface-low)}
.settings-credits p{margin:0}
.settings-credits a{color:var(--accent);text-underline-offset:3px}
.settings-card button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.settings-card footer{position:sticky;bottom:-20px;z-index:2;margin:auto -20px -20px;padding:12px 20px;background:var(--surface);border-top:1px solid var(--line)}
.settings-card footer button{min-height:44px;padding:0 18px;border-radius:var(--ledger-radius);font:500 var(--size-label) var(--head)}
.settings-save-error{margin:auto 0 0;color:var(--danger);font:var(--size-small)/1.5 var(--body)}
.settings-card .settings-save-error+footer{margin-top:0}
@media(max-width:480px){
  .settings-card{width:calc(100vw - 20px);gap:var(--space-7)}
  .settings-tabs{top:-16px;margin:-4px -16px 0}
  .settings-card footer{bottom:-16px;margin:auto -16px -16px;padding:10px 16px}
  .settings-card select,.settings-card input:not([type=checkbox],[type=radio]){font-size:var(--size-body)}
  .settings-card .settings-row{padding:10px}
}
@media(max-width:760px){
  .creator-top-actions{gap:var(--space-3)}
  .creator-top-actions button{min-width:42px;padding:8px}
  .creator-top-actions .creator-action-label{display:none}
}
@media(max-width:420px){
  .creator-top-actions button[data-close="new-dialog"]{font-size:var(--size-label);padding-inline:7px}
}
/* Quills: the balance beside Cloud sync (src/ui/quill-wallet.mjs). */
/* Until the wallet is known, a chip that showed last time keeps its place unseen (the page's inline script marks <html>), so the top bar does not move when it arrives. */
html[data-quill-kept] .quill-chip[data-pending][hidden]{display:flex;visibility:hidden}
.top-actions .quill-chip{display:flex;align-items:center;gap:var(--space-2);width:auto;min-width:0;height:40px;padding:0 10px 0 8px;border:1px solid var(--stone-850);border-radius:var(--ledger-radius);background:var(--surface);color:var(--text-soft);font:600 var(--size-label) var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.top-actions .quill-chip[hidden]{display:none}
.top-actions .quill-chip .material-symbols-outlined{font-size:18px;color:var(--accent)}
.top-actions .quill-chip.low{border-color:var(--danger);color:var(--danger)}
@media(max-width:480px){.top-actions .quill-chip{width:auto;height:44px;padding:0 7px 0 5px}}
/* The owner's way to the admin page, in Cloud sync (admins only). */
.sync-admin{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;color:var(--accent)}
.sync-admin[hidden]{display:none}
/* Deleting the account (src/app/account-delete.mjs). */
#sync-dialog .danger,#delete-account-dialog .danger{border-color:var(--danger-700);color:var(--danger)}
#delete-account-dialog .danger:disabled{opacity:.5}
.delete-list{margin:0;padding-left:20px;color:var(--text-soft)}
#delete-account-dialog .checkbox-row{align-items:flex-start}
#delete-account-dialog .checkbox-row input{flex:none;margin-top:4px}
#delete-account-dialog .stack-label,#username-dialog .stack-label{display:grid;gap:6px}
#delete-account-dialog .stack-label b{overflow-wrap:anywhere}
/* Combining collections from before one per account (app/collection.mjs). */
.combine-list{display:grid;gap:8px;margin:0;padding-left:20px;color:var(--text-soft)}
.combine-list label{display:inline;color:inherit}
.combine-list input{margin-right:6px}
/* Reporting and support (app/report.mjs). */
.report-quote{margin:0;padding:8px 12px;border-left:2px solid var(--line);color:var(--text-soft);font-style:italic;white-space:pre-line;overflow-wrap:anywhere}
.report-reasons{display:grid;gap:6px;margin:0;padding:0;border:0}
.report-reasons legend{margin-bottom:6px;color:var(--muted)}
.report-reasons label{flex-direction:row;align-items:center;gap:8px;color:var(--text)}
#report-dialog .stack-label,#support-dialog .stack-label{display:grid;gap:6px}
/* NSFW: every switch, narrator, paint choice, writing choice and adult detail shows only for an account the owner marked adult (src/app/shell.mjs sets data-adult once /api/whoami says). */
:root:not([data-adult="yes"]) [data-adult-only]{display:none!important}