/* ===== SETTINGS + UPDATES (settings1112). New file: static/css/settings.css, loaded LAST (after update-popup.css).
   Tokens only (tokens.css). No new colours: tinted fills use existing palette -rgb channels.
   Scope: .st (Settings), .pb-upd (update status block, shared by Settings, the header popover and the notice),
   .pb-notice (update notice), .tn-update (header button + popover). ===== */

/* ---------- Settings shell: nav + one section at a time ---------- */
.settings-area.st{container:st / inline-size;background:var(--pb-bg)}
.settings-area.st.visible{display:block}
.st-shell{height:100%;display:grid;grid-template-columns:232px minmax(0,1fr);min-height:0}
.st-nav{min-height:0;overflow-y:auto;padding:24px 12px;border-right:1px solid var(--pb-border);background:var(--pb-pane-header-bg)}
.st-nav-title{margin:0 0 12px;padding:0 12px;font-family:var(--pb-font-display);font-size:var(--pb-fs-2xl);font-weight:600;line-height:1.25;letter-spacing:.02em;color:var(--pb-text)}
.st-nav-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.st-nav-item{position:relative;display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:36px;padding:0 12px;border-radius:var(--pb-radius-sm);
  color:var(--pb-text-muted);font-size:var(--pb-fs-base);font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color var(--pb-dur-fast) var(--pb-ease),color var(--pb-dur-fast) var(--pb-ease)}
.st-nav-item::before{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.st-nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-nav-text{display:flex;flex-direction:column;min-width:0;flex:1}
.st-nav-sum{display:none}
.st-nav-chev{display:none}
@media (hover:hover){.st-nav-item:hover{background:var(--pb-accent-soft);color:var(--pb-text)}}
.st-nav-item[aria-current="page"]{background:var(--pb-accent-soft-2);color:var(--pb-text);font-weight:600}
.st-nav-item[aria-current="page"] svg{color:var(--pb-accent-text)}
.st-nav-item:focus-visible{outline:2px solid var(--pb-focus);outline-offset:-2px}
.st-nav-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--pb-radius-pill);background:var(--pb-orange-fill)}
.st-nav-dot[hidden]{display:none}
.st-nav-dot[data-tone="err"]{background:var(--pb-danger)}
/* Visually hidden text (screen readers only) */
.st-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.st-main{min-height:0;overflow-y:auto;padding:32px 40px 64px}
.st-bar{display:none}
.st-page{max-width:720px}
.st-page[hidden]{display:none}
.st-page-head{margin:0 0 24px}
.st-h:focus{outline:none}
.st-h{margin:0;font-size:var(--pb-fs-2xl);font-weight:600;line-height:1.25;color:var(--pb-text)}
.st-lede{margin:4px 0 0;max-width:62ch;font-size:var(--pb-fs-base);line-height:1.5;color:var(--st-text-dim)}

/* ---------- Groups and rows ---------- */
.st-group{margin:28px 0 0}
.st-page-head + .st-group{margin-top:0}
.st-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:0 0 4px}
.st-group-head .st-group-title{margin:0 0 6px 4px}
.st-group-title{margin:0 0 8px 4px;font-size:var(--pb-fs-base);font-weight:600;line-height:1.3;color:var(--pb-text-muted)}
.st-list{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:var(--pb-radius)}
.st-group-foot{margin:8px 4px 0;font-size:var(--pb-fs-md);line-height:1.45;color:var(--pb-text-dim)}
.st-link{color:var(--pb-accent-text);text-decoration:underline;text-underline-offset:2px}
.st-link:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px;border-radius:2px}
/* The label column never drops under 40%: long values wrap inside the control column instead of squeezing the label. */
.st-row{display:grid;grid-template-columns:minmax(40%,1fr) minmax(0,auto);align-items:center;column-gap:24px;row-gap:12px;box-sizing:border-box;min-height:60px;padding:10px 16px}
.st-row + .st-row,.st-row + .st-callout,.st-callout + .st-row{border-top:1px solid var(--pb-border)}
.st-row[hidden]{display:none}
.st-row--stack{grid-template-columns:minmax(0,1fr)}
.st-row--sub{padding-left:32px}
.st-list > :last-child{border-bottom-left-radius:calc(var(--pb-radius) - 1px);border-bottom-right-radius:calc(var(--pb-radius) - 1px)}
.st-list > :first-child{border-top-left-radius:calc(var(--pb-radius) - 1px);border-top-right-radius:calc(var(--pb-radius) - 1px)}
.st-row-text{min-width:0}
.st-label{display:block;margin:0;font-size:var(--pb-fs-lg);font-weight:500;line-height:1.35;color:var(--pb-text)}
.st-help{margin:2px 0 0;font-size:var(--pb-fs-md);line-height:1.45;color:var(--st-text-dim);max-width:60ch}
.st-help--flush{margin:0}
.st-label--mono{font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;font-size:var(--pb-fs-base);overflow-wrap:anywhere}
.st-row-ctl{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap}
.st-row--stack .st-row-ctl{justify-content:flex-start}
.st-value{font-size:var(--pb-fs-base);line-height:1.4;color:var(--pb-text);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.st-value--muted{color:var(--pb-text-muted)}
.st-row-msg{grid-column:1 / -1;margin:-4px 0 0;font-size:var(--pb-fs-md);line-height:1.4}
.st-row-msg:empty{display:none}
.st-row-msg[data-tone="ok"]{color:var(--pb-success)}
.st-row-msg[data-tone="err"]{color:var(--pb-danger-text)}

/* Edit mode (Profile groups), loading and empty */
.st-row--edit{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
.st-row--edit .st-row-ctl{justify-content:stretch}
.st-row--acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:0}
.st-input[aria-invalid="true"]{border-color:var(--pb-danger-text)}
.st-row--skel{min-height:52px}
.st-skel{display:block;height:10px;border-radius:var(--pb-radius-pill);background:var(--pb-surface-3)}
.st-skel--l{width:60%}.st-skel--m{width:45%}.st-skel--s{width:72px}
.st-empty{padding:16px;font-size:var(--pb-fs-base);line-height:1.5;color:var(--pb-text-muted)}
.st-empty p{margin:0}
.st-row + .st-empty,.st-row + .st-row--skel{border-top:1px solid var(--pb-border)}

/* Key / value rows (Profile) */
.st-kv{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.st-kv .st-value{flex:1 1 auto}

/* ---------- Switch: <button role="switch" aria-checked> ---------- */
/* min-width/min-height 0: sizes.css gives every :where(button) a 44px minimum on phone, which would turn the switch into a 44px circle */
.st-switch{position:relative;flex:0 0 auto;box-sizing:border-box;width:36px;height:20px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid var(--pb-border-strong);
  border-radius:var(--pb-radius-pill);background:var(--pb-surface-3);cursor:pointer;
  transition:background-color var(--pb-dur-fast) var(--pb-ease),border-color var(--pb-dur-fast) var(--pb-ease)}
.st-switch::before{content:"";position:absolute;top:-11px;bottom:-11px;left:-4px;right:-4px}
.st-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--pb-radius-pill);background:var(--pb-text-muted);
  transition:transform var(--pb-dur-fast) var(--pb-ease),background-color var(--pb-dur-fast) var(--pb-ease)}
.st-switch[aria-checked="true"]{background:var(--pb-accent-fill);border-color:var(--pb-accent-fill)}
.st-switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--pb-on-accent)}
.st-switch:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px}
.st-switch:disabled{opacity:.5;cursor:not-allowed}
.st-switch:disabled::before{cursor:not-allowed}

/* ---------- Segmented control: role="radiogroup" > button role="radio" ---------- */
.st-seg{display:inline-flex;box-sizing:border-box;height:var(--pb-hit);padding:2px;gap:2px;border:1px solid var(--pb-border);border-radius:var(--pb-radius-sm);background:var(--pb-surface-2)}
.st-seg-opt{position:relative;box-sizing:border-box;min-width:64px;height:100%;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;
  color:var(--pb-text-muted);font:inherit;font-size:var(--pb-fs-base);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background-color var(--pb-dur-fast) var(--pb-ease),color var(--pb-dur-fast) var(--pb-ease)}
@media (hover:hover){.st-seg-opt:not([aria-checked="true"]):hover{color:var(--pb-text);background:var(--pb-accent-soft)}}
.st-seg-opt[aria-checked="true"]{background:var(--pb-surface);color:var(--pb-text);font-weight:600;box-shadow:0 0 0 1px var(--pb-border-hover)}
.st-seg-opt:focus-visible{outline:2px solid var(--pb-focus);outline-offset:1px;z-index:1}

/* ---------- Select and inputs ---------- */
.st-select-wrap{position:relative;display:inline-flex;min-width:200px}
.st-select-wrap::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid var(--pb-text-muted);border-bottom:1.5px solid var(--pb-text-muted);transform:rotate(45deg);pointer-events:none}
.st-select,.st-input{box-sizing:border-box;width:100%;height:var(--pb-hit);margin:0;padding:0 12px;border:1px solid var(--pb-border-strong);border-radius:var(--pb-radius-sm);
  background:var(--pb-surface);color:var(--pb-text);font:inherit;font-size:var(--pb-fs-base);line-height:1.2;outline:none;
  transition:border-color var(--pb-dur-fast) var(--pb-ease)}
.st-select{padding-right:34px;-webkit-appearance:none;appearance:none;cursor:pointer}
.st-select option{background:var(--pb-surface);color:var(--pb-text)}
.st-input::placeholder{color:var(--pb-text-dim)}
@media (hover:hover){.st-select:hover,.st-input:hover{border-color:var(--pb-focus)}}
.st-select:focus-visible,.st-input:focus-visible{outline:2px solid var(--pb-focus);outline-offset:1px;border-color:var(--pb-focus)}
.st-input--time{width:auto;min-width:112px;font-variant-numeric:tabular-nums}
.st-field{display:flex;gap:8px;align-items:center;width:100%;max-width:520px}
.st-field .st-input{flex:1;min-width:0}
.st-range{display:inline-flex;align-items:center;gap:8px;color:var(--pb-text-muted);font-size:var(--pb-fs-base)}

/* ---------- Choice tiles (theme) ---------- */
.st-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.st-tile{position:relative;display:flex;flex-direction:column;gap:0;margin:0;border:1px solid var(--pb-border-strong);border-radius:var(--pb-radius);background:var(--pb-surface);cursor:pointer;overflow:hidden;
  transition:border-color var(--pb-dur-fast) var(--pb-ease),box-shadow var(--pb-dur-fast) var(--pb-ease)}
.st-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.st-tile:has(input:checked){border-color:var(--pb-accent);box-shadow:0 0 0 1px var(--pb-accent)}
.st-tile:has(input:focus-visible){outline:2px solid var(--pb-focus);outline-offset:2px}
@media (hover:hover){.st-tile:not(:has(input:checked)):hover{border-color:var(--pb-focus)}}
.st-tile-prev{display:grid;grid-template-columns:28% 1fr;gap:6px;height:56px;padding:8px;box-sizing:border-box;background:var(--sw-bg)}
.st-tile-prev i{display:block;border-radius:4px;background:var(--sw-side)}
.st-tile-prev b{display:grid;align-content:start;gap:5px;padding:6px;border-radius:4px;background:var(--sw-surf)}
.st-tile-prev b::before,.st-tile-prev b::after{content:"";height:5px;border-radius:3px;background:var(--sw-line)}
.st-tile-prev b::after{width:45%;background:var(--sw-acc)}
.st-tile-name{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--pb-hit);padding:0 12px;box-sizing:border-box;border-top:1px solid var(--pb-border);font-size:var(--pb-fs-base);font-weight:500;color:var(--pb-text)}
.st-tile-check{width:16px;height:16px;border-radius:var(--pb-radius-pill);border:1px solid var(--pb-border-strong);box-sizing:border-box;flex:0 0 auto}
.st-tile:has(input:checked) .st-tile-check{border:5px solid var(--pb-accent-fill)}
.st-tile[data-sw="dark"]{--sw-bg:var(--pb-c-blue-7);--sw-side:var(--pb-c-blue-5);--sw-surf:var(--pb-c-blue-11a);--sw-line:var(--pb-c-slate-35);--sw-acc:var(--pb-c-sky-46)}
.st-tile[data-sw="light"]{--sw-bg:var(--pb-c-slate-91);--sw-side:var(--pb-c-slate-89);--sw-surf:var(--pb-c-blue-95);--sw-line:var(--pb-c-slate-87);--sw-acc:var(--pb-c-sky-46)}
.st-tile[data-sw="girly"]{--sw-bg:var(--pb-c-red-97);--sw-side:var(--pb-c-red-95);--sw-surf:var(--pb-c-white);--sw-line:var(--pb-c-rose-90);--sw-acc:var(--pb-c-pink-42)}

/* ---------- Status lines and callouts ---------- */
.st-status{display:flex;align-items:baseline;gap:8px;margin:0;font-size:var(--pb-fs-base);line-height:1.45;color:var(--pb-text-muted)}
.st-status::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:var(--pb-radius-pill);background:currentColor;transform:translateY(-1px)}
.st-status[data-tone="ok"]{color:var(--pb-success)}
.st-status[data-tone="warn"]{color:var(--pb-warning)}
.st-status[data-tone="err"]{color:var(--pb-danger-text)}
.st-status[data-tone="busy"]{color:var(--pb-accent-text)}
.st-status b{font-weight:600}
.st-status span{color:var(--pb-text-muted)}
.st-callout{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:8px;padding:14px 16px;font-size:var(--pb-fs-base);line-height:1.5;color:var(--pb-text)}
.st-callout > svg{width:16px;height:16px;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-callout p{margin:0}
.st-callout .st-help{margin:0}
.st-callout-acts{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.st-callout-acts .st-help{align-self:center}
.st-callout[data-tone="warn"]{background:rgba(var(--pb-c-orange-50-rgb),0.08)}
.st-callout[data-tone="warn"] > svg{color:var(--pb-warning)}
.st-callout[data-tone="err"]{background:var(--pb-danger-soft)}
.st-callout[data-tone="err"] > svg{color:var(--pb-danger-text)}
.st-callout[data-tone="info"]{background:var(--pb-accent-soft)}
.st-callout[data-tone="info"] > svg{color:var(--pb-accent-text)}
.st-details{grid-column:2;font-size:var(--pb-fs-md);color:var(--pb-text-muted)}
.st-details summary{cursor:pointer;width:max-content;min-height:var(--pb-hit);display:flex;align-items:center}
.st-details summary:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px;border-radius:4px}
.st-details code{display:block;margin-top:6px;padding:8px 10px;border-radius:var(--pb-radius-sm);background:var(--pb-surface-2);font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;font-size:var(--pb-fs-md);color:var(--pb-text);overflow-wrap:anywhere;white-space:pre-wrap}

/* Profile hero */
.st-hero{display:flex;align-items:center;gap:16px;padding:16px;box-sizing:border-box}
.st-hero .profile-avatar{width:56px;height:56px;flex:0 0 56px;border-width:1px;border-style:solid}
.st-avatar-ico{width:26px;height:26px;stroke:var(--pb-accent-text);fill:none;stroke-width:1.6}
.st-hero-text{flex:1;min-width:0}
.st-hero-name{margin:0;font-size:var(--pb-fs-xl);font-weight:600;line-height:1.3;color:var(--pb-text)}
.st-hero-sub{margin:2px 0 0;font-size:var(--pb-fs-base);color:var(--pb-text-dim)}
.st-hero-acts{display:flex;gap:8px;flex-wrap:wrap}
.st-quote{margin:0;padding:14px 16px;font-size:var(--pb-fs-base);line-height:1.6;color:var(--pb-text-muted)}

/* Release notes list */
.st-notes{padding:12px 16px}
.st-notes + .st-notes{border-top:1px solid var(--pb-border)}
.st-notes summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;min-height:var(--pb-hit);align-items:center;list-style:none}
.st-notes summary::-webkit-details-marker{display:none}
.st-notes summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--pb-text-muted);border-bottom:1.5px solid var(--pb-text-muted);transform:rotate(-45deg);flex:0 0 auto;margin-right:2px;transition:transform var(--pb-dur-fast) var(--pb-ease)}
.st-notes[open] summary::before{transform:rotate(45deg)}
.st-notes summary:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px;border-radius:4px}
.st-notes-ver{font-size:var(--pb-fs-base);font-weight:600;color:var(--pb-text);font-variant-numeric:tabular-nums}
.st-notes-title{flex:1;font-size:var(--pb-fs-base);color:var(--pb-text-muted)}
.st-notes-date{font-size:var(--pb-fs-md);color:var(--pb-text-dim);font-variant-numeric:tabular-nums}
.st-notes ul{margin:4px 0 6px 18px;padding:0 0 0 14px;font-size:var(--pb-fs-base);line-height:1.55;color:var(--pb-text-muted)}

/* ---------- Update block (shared: Settings, header popover, notice) ---------- */
.pb-upd{display:grid;gap:12px;padding:16px;box-sizing:border-box}
.pb-upd-head{display:flex;align-items:center;gap:12px;min-width:0}
.pb-upd-icon{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:var(--pb-radius-sm);background:var(--pb-accent-soft-2);color:var(--pb-accent-text)}
.pb-upd-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pb-upd[data-tone="err"] .pb-upd-icon{background:var(--pb-danger-soft);color:var(--pb-danger-text)}
.pb-upd[data-tone="warn"] .pb-upd-icon{background:rgba(var(--pb-c-orange-50-rgb),0.12);color:var(--pb-warning)}
.pb-upd[data-tone="ok"] .pb-upd-icon{background:rgba(var(--pb-c-green-45-rgb),0.12);color:var(--pb-success)}
.pb-upd-id{flex:1;min-width:0}
/* Long values wrap (spec 4.6 long fixture), never run under the head button (mirrors the 3.0 line fix, PR 565) */
.pb-upd-title{margin:0;font-size:var(--pb-fs-lg);font-weight:600;line-height:1.35;color:var(--pb-text);overflow-wrap:anywhere}
.pb-upd-sub{margin:1px 0 0;font-size:var(--pb-fs-md);line-height:1.4;color:var(--pb-text-dim);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pb-upd-notes-title{margin:0;font-size:var(--pb-fs-base);font-weight:600;color:var(--pb-text)}
.pb-upd-notes{margin:0;padding:0 0 0 18px;display:grid;gap:2px;font-size:var(--pb-fs-base);line-height:1.5;color:var(--pb-text-muted)}
.pb-upd-more{display:inline-flex;align-items:center;font-size:var(--pb-fs-md);color:var(--pb-accent-text);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;width:max-content;min-height:var(--pb-hit);margin:-8px 0}
.pb-upd-acts{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.pb-upd-acts .pb-upd-hint{margin-right:auto}
.pb-upd-hint{margin:0;font-size:var(--pb-fs-md);line-height:1.45;color:var(--pb-text-dim)}
.pb-upd-offer{display:grid;gap:8px;padding:12px 14px;border-radius:var(--pb-radius-sm);background:var(--pb-accent-soft);border:1px solid var(--pb-accent-soft-2)}
.pb-upd-progress{display:grid;gap:8px}
.pb-upd-step{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:var(--pb-fs-base);font-weight:600;color:var(--pb-text)}
.pb-upd-count{font-size:var(--pb-fs-md);font-weight:500;color:var(--pb-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-upd-bar{position:relative;height:6px;border-radius:var(--pb-radius-pill);background:var(--pb-surface-3);overflow:hidden}
.pb-upd-bar > span{position:absolute;inset:0;border-radius:inherit;background:var(--pb-accent-fill);transform-origin:0 50%;transform:scale(var(--p,0),1);transition:transform var(--pb-dur) var(--pb-ease)}
.pb-upd-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;counter-reset:s}
.pb-upd-steps li{display:flex;align-items:center;gap:5px;min-width:0;font-size:var(--pb-fs-md);line-height:1.3;color:var(--pb-text-dim);white-space:nowrap}
.pb-upd-steps li::before{content:"";flex:0 0 8px;width:8px;height:8px;box-sizing:border-box;border-radius:var(--pb-radius-pill);border:1.5px solid var(--pb-border-strong)}
.pb-upd-steps li[data-s="done"]{color:var(--pb-text-muted)}
.pb-upd-steps li[data-s="done"]::before{border-color:var(--pb-accent-fill);background:var(--pb-accent-fill)}
.pb-upd-steps li[data-s="now"]{color:var(--pb-text);font-weight:600}
.pb-upd-steps li[data-s="now"]::before{border-color:var(--pb-accent-text);box-shadow:0 0 0 2px var(--pb-accent-soft-2)}
.pb-upd .st-details{grid-column:auto}
.pb-upd .st-callout{border-radius:var(--pb-radius-sm)}
/* Notice: release notes sit in a disclosure (open on desktop, closed on phone) */
.pb-upd-whatsnew summary{display:flex;align-items:center;gap:8px;min-height:var(--pb-hit);width:max-content;cursor:pointer;list-style:none;font-size:var(--pb-fs-base);font-weight:600;color:var(--pb-accent-text)}
.pb-upd-whatsnew summary::-webkit-details-marker{display:none}
.pb-upd-whatsnew summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--pb-dur-fast) var(--pb-ease)}
.pb-upd-whatsnew[open] summary::before{transform:rotate(45deg)}
.pb-upd-whatsnew summary:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px;border-radius:4px}
/* The 5 named steps show only in Settings; the notice and popover keep step text, count and bar */
.pb-notice .pb-upd-steps,.update-panel .pb-upd-steps{display:none}
.pb-upd [hidden]{display:none}

/* ---------- Header update button + popover ---------- */
.tn-update{position:relative}
.tn-upd-ico{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tn-update .update-badge{top:7px;right:7px;width:8px;height:8px;padding:0;border:2px solid var(--pb-bg);box-sizing:content-box;background:var(--pb-orange-fill);animation:none;pointer-events:none;font-size:0}
.tn-update .update-badge[hidden]{display:none}
.tn-update[data-upd="busy"] .update-badge{background:var(--pb-accent-fill)}
.tn-update[data-upd="err"] .update-badge{background:var(--pb-danger)}
/* white-space:normal: the top bar's children may be nowrap (the 3.0 line's sizes.css sets it from 1025px);
   the panel always wraps its own text. Same rule as the 3.0 line (PR 565) so the two lines do not drift. */
.tn-update .update-panel{width:360px;padding:0;border-color:var(--pb-border-hover);box-shadow:var(--pb-shadow);white-space:normal}
.update-panel .pb-upd{padding:16px}
/* The panel is 360px or narrower: the head uses the spec's narrow layout (button on its own full-width row under the text) */
.update-panel .pb-upd-head{flex-wrap:wrap}
.update-panel .pb-upd-head > .pb-btn:not(.pb-notice-close){flex:1 1 100%}
/* Footer text uses the Settings-scoped --st-text-dim (settings-tokens.css, scoped to .tn-update): main's global
   --pb-text-dim was about 2.5:1 on the dark panel. 4.5:1 or better in every theme; the global token is untouched. */
.update-panel-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-top:1px solid var(--pb-border);font-size:var(--pb-fs-md);color:var(--st-text-dim)}
.update-panel-foot span{min-width:0}
.update-panel-foot .pb-btn{flex:0 0 auto}

/* ---------- Update notice (non-modal, top right; replaces the blocking modal) ---------- */
.pb-notice{position:fixed;top:60px;right:16px;z-index:10040;width:380px;max-width:calc(100vw - 16px);box-sizing:border-box;
  background:var(--pb-surface);border:1px solid var(--pb-border-hover);border-radius:var(--pb-radius);box-shadow:var(--pb-shadow);
  animation:pbNoticeIn var(--pb-dur) var(--pb-ease)}
.pb-notice .pb-upd{padding:16px 16px 14px}
.pb-notice-close{margin:-8px -8px 0 0;align-self:flex-start}
@keyframes pbNoticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pb-notice{animation:none}.st-switch,.st-switch::after,.pb-upd-bar > span,.st-seg-opt,.st-nav-item{transition:none}}

/* ---------- Phone and touch ---------- */
@media (max-width:1024px),(pointer:coarse){
  .st-select,.st-input{font-size:var(--pb-fs-xl)}
  .st-switch::before{top:-12px;bottom:-12px;left:-4px;right:-4px}
  .st-nav-item{min-height:var(--pb-tap)}
  .st-nav-item::before{top:0;bottom:0}
  /* Segment options are the tap target: at least 44px each (the 3.0 line gets this from sizes.css, main has none) */
  .st-seg{height:auto;min-height:var(--pb-hit)}
  .st-seg-opt{min-height:var(--pb-tap)}
  .pb-notice{top:56px;left:8px;right:8px;width:auto;max-width:none}
  .tn-update .update-panel{position:fixed;left:8px;right:8px;top:56px;width:auto}
}

/* Narrow Settings (phone, small windows, docked): drill-in. data-section="" = the list of sections. */
@container st (width < 760px){
  .st-shell{display:block;height:100%;overflow-y:auto}
  .st-nav{padding:16px 16px 32px;border-right:0;background:none;overflow:visible}
  .st-shell:not([data-section=""]) .st-nav{display:none}
  .st-shell[data-section=""] .st-main{display:none}
  .st-nav-title{padding:0 4px;font-size:var(--pb-fs-3xl)}
  .st-nav-list{gap:0;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:var(--pb-radius)}
  .st-nav-list li + li .st-nav-item{border-top:1px solid var(--pb-border);border-radius:0}
  .st-nav-list li:first-child .st-nav-item{border-radius:calc(var(--pb-radius) - 1px) calc(var(--pb-radius) - 1px) 0 0}
  .st-nav-list li:last-child .st-nav-item{border-radius:0 0 calc(var(--pb-radius) - 1px) calc(var(--pb-radius) - 1px)}
  .st-nav-item{min-height:60px;padding:10px 14px;gap:12px;color:var(--pb-text);font-size:var(--pb-fs-lg)}
  .st-nav-item[aria-current="page"]{background:none;font-weight:500}
  .st-nav-item svg{width:28px;height:28px;flex-basis:28px;padding:6px;box-sizing:border-box;border-radius:var(--pb-radius-sm);background:var(--pb-accent-soft-2);color:var(--pb-accent-text)}
  .st-nav-sum{display:block;margin-top:2px;font-size:var(--pb-fs-md);font-weight:400;color:var(--st-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st-nav-chev{display:block;flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--pb-text-dim);border-bottom:1.5px solid var(--pb-text-dim);transform:rotate(-45deg);margin-right:4px}
  .st-main{overflow:visible;padding:0 16px 32px}
  .st-bar{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;min-height:52px;margin:0 -16px 16px;padding:4px 8px;
    background:var(--pb-bg);border-bottom:1px solid var(--pb-border)}
  .st-back{display:inline-flex;align-items:center;gap:4px;min-height:var(--pb-tap);min-width:var(--pb-tap);padding:0 10px 0 8px;border:0;border-radius:var(--pb-radius-sm);background:none;
    color:var(--pb-accent-text);font:inherit;font-size:var(--pb-fs-lg);font-weight:500;cursor:pointer}
  .st-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:2px}
  .st-back:focus-visible{outline:2px solid var(--pb-focus);outline-offset:-2px}
  .st-bar-title{margin:0;font-size:var(--pb-fs-xl);font-weight:600;text-align:center;color:var(--pb-text)}
  .st-page-head .st-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .st-page-head{margin-bottom:20px}
  .st-row{grid-template-columns:minmax(40%,1fr) minmax(0,auto);column-gap:12px;padding:10px 14px}
  .st-row--edit{grid-template-columns:minmax(0,1fr)}
  .st-row--stack{grid-template-columns:minmax(0,1fr)} /* VANTAGE-PATCH-25: the two-column .st-row rule above beat the base stack rule and squeezed the theme tiles into the right 40% (Rose clipped at 390px) */
  .st-row--wrap{grid-template-columns:minmax(0,1fr)}
  .st-row--wrap .st-row-ctl{justify-content:flex-start}
  /* Menus and segmented controls sit under their label, full width, so labels keep their width and option text never clips */
  .st-row:has(> .st-row-ctl > .st-select-wrap),.st-row:has(> .st-row-ctl > .st-seg){grid-template-columns:minmax(0,1fr)}
  .st-row-ctl > .st-seg{width:100%}
  .st-row-ctl > .st-seg .st-seg-opt{flex:1 1 0;min-width:0}
  .pb-upd-head{flex-wrap:wrap}
  .pb-upd-head > .pb-btn:not(.pb-notice-close){flex:1 1 100%}
  .st-row--sub{padding-left:22px}
  .st-select-wrap{min-width:0;width:100%}
  .st-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .st-tile-name{padding:0 8px}
  .st-field{flex-wrap:wrap}
  .st-field .pb-btn{flex:1 0 auto}
  .st-hero{flex-wrap:wrap}
  .st-hero-acts{width:100%}
  .st-hero-acts .pb-btn{flex:1}
  .pb-upd-acts .pb-upd-hint{flex-basis:100%}
  .pb-upd-acts .pb-btn{flex:1 0 auto}
  .st-row--acts .pb-btn{flex:1}
}

/* [hidden] always wins (PR 563 fix round): .st-callout, .st-field and the other classes that
   set display would otherwise beat the browser's [hidden] rule and show hidden boxes. */
#settingsArea [hidden],.tn-update [hidden],.pb-notice [hidden]{display:none!important}

/* Builder addition (settings1112 build, not in the mockup sheet): profile loading bars. */
.st-group[data-loading] .st-value,.st-group[data-loading] .st-status{color:transparent;background:var(--pb-surface-3);border-radius:var(--pb-radius-pill);min-width:72px}

/* Main line build: an empty status line (no message yet) shows nothing, not a lone dot. */
.st-status:empty{display:none}