/* Settings-only additions: keep the original centered, 672px reading column. */
.settings-page .settings-main{max-width:720px;padding:32px 24px 40px}
.settings-page .settings-layout{display:block}
.settings-page .settings-title{gap:16px;align-items:flex-start}
.settings-page fieldset{min-width:0;margin-inline:0;padding:0;border:0}
.settings-page .section-title{flex-wrap:wrap}
.settings-page .section-count{margin-left:auto;font-size:11px;color:var(--muted)}
.settings-page .settings-subheading{font-size:14px;font-weight:600;margin:26px 0 8px}
.settings-page .ordered-options{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:16px 0}
.settings-page .ordered-option{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px}
.settings-page .ordered-option:last-child{border-bottom:0}
.settings-page .ordered-option[data-enabled=false]{background:var(--subtle)}
.settings-page .ordered-option>label{display:flex;gap:10px;align-items:center;flex:1;min-width:0;cursor:pointer}
.settings-page .ordered-label{min-width:0;line-height:1.6}
.settings-page .ordered-label strong{font-weight:500;display:block}
.settings-page .ordered-label small{display:block;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.settings-page .lens-stripe{width:4px;min-height:28px;align-self:stretch;border-radius:4px;background:var(--lens-color);flex-shrink:0}
.settings-page .ordered-option[data-id=camps] .lens-stripe{background:linear-gradient(#15803d 0 50%,#1d4ed8 50%)}
.settings-page .ordered-option[data-enabled=false] .lens-stripe{opacity:.55}
.settings-page .ordered-option .lens-source-state{color:var(--accent)}
.settings-page .ordered-option button,.settings-page .source-order-row button{width:36px;height:40px;padding:0;flex-shrink:0;font-size:15px;background:transparent}
.settings-page .source-order-row.traffic .source-stripe{background:#0369a1}
.settings-page .source-order-row label{min-height:36px}
.settings-page .source-order-row label small{display:block;margin-left:0}
.settings-page .timing-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-page .cycle-estimate{border-left:3px solid var(--accent-fill);background:var(--subtle);padding:14px 16px;margin:20px 0;border-radius:0 8px 8px 0;font-size:13px;line-height:1.8}
.settings-page .cycle-estimate strong{font-weight:500}
.settings-page .cycle-estimate p{margin:5px 0}
.settings-page .cycle-estimate small{display:block;color:var(--muted);font-size:11px}
.settings-page .choice-options{display:flex;flex-wrap:wrap;gap:8px;margin-block:16px}
.settings-page .choice-options label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:12px}
.settings-page .choice-options label:has(input:checked){background:var(--accent-soft);border-color:var(--accent-fill)}
.settings-page .choice-options small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.settings-page .accent-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 14px}
.settings-page .accent-picker{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.settings-page .accent-picker input[type=color]{width:54px;height:40px;padding:3px;cursor:pointer}
.settings-page .accent-picker output{color:var(--muted);font-family:monospace;font-size:12px}
.settings-page .accent-swatches{display:flex;flex-wrap:wrap;gap:8px}
.settings-page .accent-swatches button{width:36px;height:36px;min-width:36px;border-radius:50%;padding:5px;background:var(--swatch);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.settings-page .accent-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.settings-page .palette-preview{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;padding:22px 16px;margin-bottom:18px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.settings-page .palette-preview>span{border:1px solid color-mix(in srgb,var(--chip-color) 55%,var(--line));border-left:4px solid var(--chip-color);background:color-mix(in srgb,var(--chip-color) 10%,var(--panel));padding:6px 10px;font-size:12px;color:var(--ink);border-radius:5px}
.settings-page [data-background=plain]{background:var(--panel)}
.settings-page [data-background=grid]{background-color:var(--paper);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px}
.settings-page .palette-preview[data-cloud-style=bubbles]>span{border-radius:99px;padding:12px;border-left-width:1px}
.settings-page .palette-preview[data-cloud-style=list]{display:grid;grid-template-columns:1fr 1fr}
.settings-page .advanced-settings{margin-top:20px;padding:14px 16px;background:var(--subtle);border-radius:8px;font-size:13px}
.settings-page .advanced-settings summary{font-weight:500;min-height:24px}
.settings-page .settings-aside{position:static;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;margin:0 0 28px}
.settings-page .settings-preview{min-width:0}
.settings-page .draft-preview{height:90px}
.settings-page .draft-preview[data-mode=simple]>i:first-child{color:var(--preview-accent,var(--accent))}
.settings-page .draft-preview[data-mode=simple][data-cloud-style=list]{display:grid;grid-template-columns:1fr 1fr}
.settings-page .draft-preview[data-mode=simple][data-cloud-style=bubbles]>i{padding:6px;border:1px solid var(--line);border-radius:99px}
.settings-page .presets{margin-top:0}
.settings-page .presets button{min-height:44px;gap:10px;text-align:left}
.settings-page .save-bar{padding-bottom:max(16px,env(safe-area-inset-bottom));gap:8px}
.settings-page .save-bar>div{min-width:0;flex:1}
.settings-page .save-bar button{font-size:12px;min-height:42px}
.settings-page .save-bar small{line-height:1.5}
.settings-page .setting-utilities{margin-bottom:0}
.settings-page .settings-footnote a{text-decoration:underline;text-underline-offset:3px}
.settings-page [hidden]{display:none!important}
@media(max-width:760px){
  .settings-page .settings-main{padding:26px 16px 30px}
  .settings-page .save-bar>div{display:block;flex-basis:100%}
  .settings-page .save-bar small{margin-top:4px}
  .settings-page .settings-preview .draft-preview{display:flex}
  .settings-page .settings-preview .draft-preview[data-mode=full],.settings-page .settings-preview .draft-preview[data-mode=reading]{display:grid}
}
@media(max-width:480px){
  .settings-page .settings-aside{grid-template-columns:1fr;gap:22px}
  .settings-page .settings-preview{display:block}
  .settings-page .section-count{width:100%;margin-left:32px}
  .settings-page .ordered-option{gap:3px;padding:9px 8px}
  .settings-page .ordered-option>label{gap:8px}
  .settings-page .ordered-option button{width:32px;min-height:44px}
  .settings-page .ordered-label small{font-size:10px}
  .settings-page .timing-fields{grid-template-columns:1fr}
  .settings-page .choice-options{display:grid;grid-template-columns:1fr}
  .settings-page .choice-options small{display:inline;margin-left:6px}
  .settings-page .palette-preview[data-cloud-style=list]{grid-template-columns:1fr}
  .settings-page .save-bar>button{padding-inline:8px}
  .settings-page .site-header{gap:16px}
}

/* Fixed presets stay compatible with the server’s style-src self policy. */
.settings-page [data-accent="#c2410c"]{--swatch:#c2410c}
.settings-page [data-accent="#1d4ed8"]{--swatch:#1d4ed8}
.settings-page [data-accent="#15803d"]{--swatch:#15803d}
.settings-page [data-accent="#7e22ce"]{--swatch:#7e22ce}
.settings-page [data-accent="#0f766e"]{--swatch:#0f766e}
.settings-page [data-accent="#27272a"]{--swatch:#27272a}

/* Type and rhythm of tag.observe.tw/liveboard/setting/: a 672px column, a plain
   h1 and intro, then 18px section headings 32px apart with no rules between. */
.settings-page{--note:#52525b}
:root[data-theme=dark] .settings-page{--note:#a1a1aa}
.settings-page .site-header{position:sticky;top:0;z-index:30;height:58px;background:color-mix(in srgb,var(--panel) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.settings-page .site-header .wordmark{font-size:26px}
.settings-page .site-header nav{font-size:14px}
.settings-page .back-board{font-size:14px}
.settings-page .settings-main{padding-top:24px}
.settings-page .settings-title{display:block;margin:0}
.settings-page .settings-title h1{margin:0;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.025em}
.settings-page .settings-title p{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--note)}
.settings-page .account-settings{margin-top:24px}
.settings-page .account-settings:empty{display:none}
.settings-page .setting-section{margin:32px 0 0;padding:0;border:0}
.settings-page .section-title{margin-bottom:12px;gap:10px}
.settings-page .section-title h2{font-size:18px;line-height:28px;font-weight:600}
.settings-page .help{font-size:12px;line-height:1.7}
.settings-page .scope-note{border-left-width:2px}
.settings-page .mode-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.settings-page .mode-option{padding:12px 16px;border-radius:8px;background:var(--panel)}
.settings-page .mode-option:hover{border-color:#d4d4d8}
.settings-page .mode-option:has(input:checked){background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.settings-page .mode-option:has(input:focus-visible){outline:2px solid var(--accent-fill);outline-offset:2px}
.settings-page .mode-option>input{position:absolute;opacity:0;pointer-events:none}
.settings-page .mode-option>strong{margin:0;font-size:16px;line-height:24px;font-weight:600}
.settings-page .mode-option>small{margin-top:4px;font-size:12px;line-height:16px;color:var(--note)}
.settings-page .board-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.settings-page .board-actions .help{flex-basis:100%;margin:0}
.settings-page .button,.settings-page .save-bar button,.settings-page .utility-buttons button{min-height:36px;padding:0 14px;border-radius:99px;font-size:14px}
.settings-page .primary{background:var(--accent);border-color:var(--accent);color:#fff}
.settings-page .primary:hover{color:#fff;filter:brightness(.92)}
.settings-page .settings-subheading{margin:24px 0 8px;font-size:14px;line-height:20px}
.settings-page .field{gap:6px;font-size:14px;line-height:20px;font-weight:600}
.settings-page .field>*,.settings-page .field small{font-weight:400}
.settings-page .field small{font-size:12px;line-height:16px}
.settings-page .field>select,.settings-page .field>input,.settings-page .field>textarea,.settings-page .field input,.settings-page .field select{font-size:14px;border-radius:8px}
.settings-page .check-row{font-size:14px;line-height:20px}
.settings-page .check-row small{font-size:12px;line-height:16px;margin-top:2px}
.settings-page .ordered-options,.settings-page .source-order{border-radius:8px;margin:8px 0 12px}
.settings-page .ordered-option{gap:6px;padding:6px 8px 6px 12px;font-size:14px}
.settings-page .ordered-option>label{gap:12px}
.settings-page .ordered-label{line-height:20px}
.settings-page .ordered-label strong{display:inline;font-weight:500}
.settings-page .ordered-label small{display:inline;margin-left:8px;font-size:12px}
.settings-page .ordered-option .lens-source-state:empty{display:none}
.settings-page .ordered-option button,.settings-page .source-order-row button{width:32px;height:32px;min-height:32px;border:0;border-radius:6px;color:var(--muted)}
.settings-page .ordered-option button:hover:not(:disabled),.settings-page .source-order-row button:hover:not(:disabled){color:var(--accent);background:var(--subtle)}
.settings-page .ordered-option[data-enabled=false]{background:transparent;color:var(--muted)}
.settings-page .source-order-row{font-size:14px;padding:8px 8px 8px 12px}
.settings-page .settings-aside{margin:32px 0 0}
.settings-page .settings-preview{border-radius:8px;background:var(--subtle)}
.settings-page .settings-preview h2{font-size:16px;font-weight:600;margin:10px 0 4px}
.settings-page .presets h3{font-size:14px;font-weight:600;color:var(--ink)}
.settings-page .presets button{font-size:14px}
.settings-page .presets button>span{font-size:12px}
.settings-page .setting-utilities{margin-top:32px}
.settings-page .save-bar{margin-top:24px}
.settings-page .save-bar>div{font-size:14px}
.settings-page .save-bar small{font-size:12px}
.settings-page .settings-footnote{font-size:14px;line-height:1.7;color:var(--note)}
.settings-page .settings-footnote h2{font-size:16px;font-weight:600}
@media(max-width:640px){
  .settings-page .mode-options{grid-template-columns:1fr}
  .settings-page .mode-option{padding:12px 16px;min-height:0}
  .settings-page .mode-option>strong{font-size:16px;margin:0}
  .settings-page .mode-option>small{font-size:12px}
  .settings-page .ordered-label small{display:block;margin-left:0}
  .settings-page .site-header{height:56px}
  .settings-page .site-header .wordmark{font-size:24px}
}
/* Account panel (account.mjs fills #account-settings): a quiet card under the intro. */
.settings-page .account-settings:not(:empty){padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.settings-page .account-heading{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.settings-page .account-heading h2{margin:0;font-size:16px;line-height:24px;font-weight:600}
.settings-page [data-account-state]{font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;background:var(--subtle);color:var(--note)}
.settings-page .account-settings[data-state=ready] [data-account-state]{color:#047857;background:color-mix(in srgb,#10b981 14%,transparent)}
.settings-page .account-settings[data-state=conflict] [data-account-state],.settings-page .account-settings[data-state=error] [data-account-state]{color:var(--accent);background:var(--accent-soft)}
.settings-page [data-account-description]{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--note)}
.settings-page .account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.settings-page .account-actions button{min-height:36px;padding:0 14px;border-radius:99px;font-size:14px}