/* Any K-i? Settings: centred dialog, section list left, content right. */
.sp-dialog {
  --sp-bg: #14181f; --sp-side: #101319; --sp-card: #1a1f28; --sp-line: #2a303b; --sp-text: #e7eaf1; --sp-muted: #8e98ac;
  --sp-accent: #7de9df; --sp-accent-ink: #062321; --sp-danger: #ff8a80; --sp-warn: #f2c66d; --sp-ok: #6fd6a0; --sp-hover: rgba(255,255,255,.06);
  --sp-select: rgba(125,233,223,.13);
  box-sizing: border-box; padding: 0; border: 1px solid var(--sp-line); border-radius: 16px; background: var(--sp-bg); color: var(--sp-text);
  width: min(960px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55); font: 14px/1.5 var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}
html[data-theme="light"] .sp-dialog {
  --sp-bg: #ffffff; --sp-side: #f5f4f0; --sp-card: #faf9f6; --sp-line: #e3e0d8; --sp-text: #1f1e1b; --sp-muted: #6b6860;
  --sp-accent: #0f766e; --sp-accent-ink: #fff; --sp-danger: #b3261e; --sp-warn: #8a5a00; --sp-ok: #1b7a4b; --sp-hover: rgba(0,0,0,.05); --sp-select: rgba(15,118,110,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .sp-dialog { }
}
.sp-dialog[open] { display: grid; grid-template-columns: 236px minmax(0, 1fr); animation: sp-in .18s ease-out; }
.sp-dialog::backdrop { background: rgba(4,6,10,.6); backdrop-filter: blur(3px); animation: sp-fade .18s ease-out; }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-dialog *, .sp-dialog *::before, .sp-dialog *::after { box-sizing: border-box; }

.sp-side { background: var(--sp-side); border-right: 1px solid var(--sp-line); padding: 18px 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.sp-side-title { font-size: 15px; font-weight: 650; padding: 2px 10px 6px; }
.sp-nav { display: flex; flex-direction: column; gap: 2px; }
.sp-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--sp-muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.sp-tab svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-tab:hover { background: var(--sp-hover); color: var(--sp-text); }
.sp-tab[aria-selected="true"] { background: var(--sp-select); color: var(--sp-text); font-weight: 600; }
.sp-tab:focus-visible, .sp-btn:focus-visible, .sp-switch:focus-visible, .sp-seg button:focus-visible, .sp-close:focus-visible, .sp-subtabs button:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

.sp-content { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px 12px; flex: none; }
.sp-title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.sp-close { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--sp-muted); cursor: pointer; }
.sp-close:hover { background: var(--sp-hover); color: var(--sp-text); }
.sp-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 26px 28px; scrollbar-width: thin; outline: 0; }
.sp-pane { animation: sp-pane .16s ease-out; display: flex; flex-direction: column; gap: 22px; }
@keyframes sp-pane { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sp-group { display: flex; flex-direction: column; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-card); padding: 4px 16px; }
.sp-group > h3 { margin: 12px 0 2px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); }
.sp-group > .sp-note, .sp-group > .sp-actions, .sp-group > .sp-inline { margin: 8px 0; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--sp-line); }
.sp-group > h3 + .sp-row, .sp-group > .sp-row:first-child { border-top: 0; }
.sp-row-text { min-width: 0; flex: 1 1 auto; }
.sp-row-text strong { font-weight: 600; font-size: 14px; }
.sp-row-text p { margin: 2px 0 0; color: var(--sp-muted); font-size: 13px; }
.sp-row-control { flex: none; max-width: 56%; display: flex; justify-content: flex-end; }
.sp-note { margin: 0; color: var(--sp-muted); font-size: 13px; }
.sp-note.warn { color: var(--sp-warn); }
.sp-error { margin: 8px 0; color: var(--sp-danger); font-size: 13px; }
.sp-loading { display: flex; align-items: center; gap: 10px; color: var(--sp-muted); padding: 24px 4px; }
.sp-dots { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sp-line); border-top-color: var(--sp-accent); animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--sp-line); background: transparent; color: var(--sp-text); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.sp-btn:hover:not(:disabled) { background: var(--sp-hover); }
.sp-btn:disabled, .sp-switch:disabled { opacity: .5; cursor: not-allowed; }
.sp-btn-primary { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.sp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--sp-accent); }
.sp-btn-danger { color: var(--sp-danger); border-color: color-mix(in srgb, var(--sp-danger) 45%, transparent); }
.sp-btn-ghost { border-color: transparent; color: var(--sp-muted); }
.sp-actions, .sp-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sp-switch { position: relative; width: 40px; height: 22px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--sp-muted) 45%, transparent); cursor: pointer; padding: 0; transition: background .15s; flex: none; }
.sp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.sp-switch[aria-checked="true"] { background: var(--sp-accent); }
.sp-switch[aria-checked="true"]::after { transform: translateX(18px); }
.sp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sp-hover); border: 1px solid var(--sp-line); }
.sp-seg button { padding: 5px 12px; border: 0; border-radius: 7px; background: none; color: var(--sp-muted); font: inherit; font-size: 13px; cursor: pointer; }
.sp-seg button[aria-checked="true"] { background: var(--sp-bg); color: var(--sp-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

.sp-dialog input[type="text"], .sp-dialog input[type="password"], .sp-dialog input[type="number"], .sp-dialog input[type="search"] { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--sp-line); background: var(--sp-bg); color: var(--sp-text); font: inherit; font-size: 13px; min-width: 0; }
.sp-dialog input[type="number"] { width: 110px; }
.sp-dialog input:focus-visible, .sp-dialog select:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp-dialog select { width: auto; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--sp-line); background: var(--sp-bg); color: var(--sp-text); font: inherit; font-size: 13px; }
.sp-caps { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--sp-line); font-size: 12px; color: var(--sp-muted); white-space: nowrap; }
.sp-chip.ok { color: var(--sp-ok); border-color: color-mix(in srgb, var(--sp-ok) 40%, transparent); }
.sp-chip.warn { color: var(--sp-warn); border-color: color-mix(in srgb, var(--sp-warn) 40%, transparent); }

.sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.sp-group .sp-stats { margin: 10px 0 12px; }
.sp-stat { padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-card); display: flex; flex-direction: column; gap: 2px; }
.sp-stat span { font-size: 12px; color: var(--sp-muted); text-transform: capitalize; }
.sp-stat strong { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.sp-bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin: 12px 0; padding: 0 2px; }
.sp-bar { flex: 1; min-width: 3px; background: var(--sp-accent); border-radius: 3px 3px 0 0; opacity: .85; }
.sp-bar:hover { opacity: 1; }
.sp-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table th { text-align: left; color: var(--sp-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--sp-line); }
.sp-table td { padding: 7px 8px; border-bottom: 1px solid var(--sp-line); overflow-wrap: anywhere; }
.sp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-list { margin: 8px 0 12px; padding-left: 18px; color: var(--sp-muted); font-size: 13px; display: grid; gap: 6px; }
.sp-list strong { color: var(--sp-text); }

.sp-memory-list { display: grid; gap: 6px; margin: 10px 0; }
.sp-memory-item { display: flex; gap: 6px; }
.sp-memory-item input { flex: 1; }
.sp-topic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sp-topic code { padding: 4px 8px; border-radius: 7px; background: var(--sp-hover); font-size: 12px; overflow-wrap: anywhere; }

.sp-subtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sp-hover); border: 1px solid var(--sp-line); align-self: flex-start; }
.sp-subtabs button { padding: 6px 14px; border: 0; border-radius: 7px; background: none; color: var(--sp-muted); font: inherit; font-size: 13px; cursor: pointer; }
.sp-subtabs button[aria-selected="true"] { background: var(--sp-bg); color: var(--sp-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sp-subpane { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.sp-adopt { padding: 8px 0 12px; }
.sp-adopt > * { max-width: 100%; }
.sp-adopt .panel, .sp-adopt section { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* Reused Docker plugin catalogue: installed left, available right, inside the pane. */
#plugins-skills-dialog.sp-embedded { display: none !important; }
.sp-ps { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sp-ps .ps-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; min-height: 420px; }
.sp-ps .ps-installed-side { max-height: 520px; overflow-y: auto; }
.sp-ps .ps-main { max-height: 520px; overflow-y: auto; }
.sp-ps .ps-sections { display: none; }
.sp-ps .ps-list { display: grid; gap: 10px; }
.sp-ps button, .sp-ps select, .sp-ps input { font: inherit; font-size: 13px; }
.sp-ps button { color: var(--sp-text); border: 1px solid var(--sp-line); background: transparent; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.sp-ps button:disabled { opacity: .5; cursor: not-allowed; }
.sp-ps button.primary-button { background: var(--sp-accent); color: var(--sp-accent-ink); border-color: var(--sp-accent); }
.sp-ps [aria-selected="true"] { background: var(--sp-select); }
.sp-ps input[type="search"], .sp-ps select { color: var(--sp-text); background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: 9px; padding: 7px 10px; }
.sp-ps .ps-card, .sp-ps .ps-installed-item { background: var(--sp-bg); border-color: var(--sp-line); color: var(--sp-text); }
.sp-ps .input-note, .sp-ps .ps-status { color: var(--sp-muted); }

.sp-phone-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 10px 0 14px; }
.sp-qr { width: 168px; height: 168px; image-rendering: pixelated; border-radius: 10px; border: 1px solid var(--sp-line); background: #fff; }
.sp-phone-info { display: grid; gap: 10px; }
.sp-phone-info label { font-size: 12px; color: var(--sp-muted); }
.sp-phone-info .sp-inline input { flex: 1; }
.sp-code { display: flex; flex-direction: column; gap: 2px; }
.sp-code span, .sp-code small { color: var(--sp-muted); font-size: 12px; }
.sp-code strong { font: 650 28px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.sp-phone .sp-row:first-child { border-top: 0; }

.sp-toast { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 9px 16px; border-radius: 10px; background: var(--sp-text); color: var(--sp-bg); font-size: 13px; max-width: 80%; transition: opacity .18s, transform .18s; }
.sp-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Daniel size and placement (applied from Appearance). */
html[data-daniel-size="small"] .horse-avatar-button { width: min(180px, 100%); }
html[data-daniel-size="large"] .horse-avatar-button { width: min(340px, 100%); }
html[data-daniel-placement="left"] .horse-welcome #horse-avatar-mount { align-items: flex-start; }
html[data-daniel-placement="right"] .horse-welcome #horse-avatar-mount { align-items: flex-end; }
html[data-daniel-placement="left"] .horse-conversation #horse-avatar-mount { justify-content: flex-start; }
html[data-daniel-placement="right"] .horse-conversation #horse-avatar-mount { justify-content: flex-end; }

body.no-motion .sp-dialog, body.no-motion .sp-dialog *, html[data-reduce-motion="true"] .sp-dialog, html[data-reduce-motion="true"] .sp-dialog * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sp-dialog, .sp-dialog *, .sp-dialog::backdrop { animation: none !important; transition: none !important; } }

@media (max-width: 720px) {
  .sp-dialog { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .sp-dialog[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sp-side { flex-direction: row; padding: 10px; border-right: 0; border-bottom: 1px solid var(--sp-line); overflow-x: auto; overflow-y: hidden; }
  .sp-side-title { display: none; }
  .sp-nav { flex-direction: row; gap: 4px; }
  .sp-tab { width: auto; white-space: nowrap; padding: 8px 12px; }
  .sp-head { padding: 12px 16px 6px; }
  .sp-body { padding: 4px 16px 24px; }
  .sp-row { flex-wrap: wrap; }
  .sp-row-control { max-width: 100%; }
  .sp-phone-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-ps .ps-layout { grid-template-columns: minmax(0, 1fr); }
}

/* 1 Nov: phone - model/context/thinking/budget selects full width, no clipped text */
@media (max-width: 800px) {
  .sp-adopt select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; font-size: 15px !important; text-overflow: ellipsis; }
  .sp-adopt [class*="grid"], .sp-adopt [class*="row"] { display: flex !important; flex-direction: column !important; gap: 10px !important; }
}

/* 1 Nov: ChatGPT-sized settings on phone (everything was too big) */
@media (max-width: 800px) {
  .sp-tab { padding: 6px 10px; font-size: 13px; gap: 8px; }
  .sp-tab svg, body.ps .sp-dialog .sp-tab svg { width: 16px; height: 16px; } /* 2 Nov: beats the phone shell's 22px icon rule (body.ps svg) */
  .sp-head { padding: 10px 14px 4px; }
  .sp-title { font-size: 17px; }
  .sp-body { padding: 2px 12px 20px; }
  .sp-group { padding: 2px 12px; border-radius: 10px; }
  .sp-group > h3 { font-size: 11px; margin: 9px 0 1px; }
  .sp-row { padding: 8px 0; gap: 10px; }
  .sp-row-text strong { font-size: 13px; }
  .sp-row-text p, .sp-note { font-size: 12px; }
  .sp-chip { font-size: 11px; padding: 1px 8px; }
  .sp-btn { font-size: 13px; padding: 5px 11px; }
  .sp-stat { padding: 8px 10px; border-radius: 10px; }
  .sp-stat strong { font-size: 16px; }
  .sp-stat span { font-size: 11px; }
  .sp-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sp-bars { height: 70px; margin: 8px 0; }
  .sp-switch { width: 34px; height: 19px; }
  .sp-seg button, .sp-subtabs button { font-size: 12px; padding: 4px 10px; }
  .sp-dialog select { font-size: 13px !important; padding: 5px 7px; }
  .sp-adopt select { font-size: 13px !important; }
  .sp-ps button, .sp-ps select, .sp-ps input { font-size: 12px; }
}

/* compact usage chart */
.sp-bar { align-self: flex-end; min-height: 3px; }
.sp-stats .sp-stat strong { font-size: 15px; }

/* 1 Nov: a second way out on phones - Done button always at the bottom, big enough to hit */
.sp-done { display: none; }
@media (max-width: 800px) {
  .sp-done { display: block; flex: none; margin: 6px 12px calc(10px + env(safe-area-inset-bottom)); padding: 11px 14px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-hover); color: var(--sp-text); font: inherit; font-size: 15px; font-weight: 600; touch-action: manipulation; }
  .sp-close { width: 44px; height: 44px; touch-action: manipulation; }
}

/* 2 Nov: memory items wrap and show in full; nothing clipped at the top or bottom on phones */
.sp-memory-item textarea{flex:1;min-width:0;width:100%;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px;line-height:1.4;padding:6px 8px;border-radius:8px;border:1px solid var(--sp-line);background:var(--sp-card);color:var(--sp-text)}
.sp-memory-item{align-items:flex-start}
@media (max-width: 800px) {
  .sp-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .sp-body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); scroll-padding-top: 8px; }
  .sp-ps { min-height: 0; max-height: none; }
  .sp-dialog .vm-list { max-height: none; overflow: visible; }
  .sp-dialog .vm-group { position: static; }
}
/* Shared memory search (4 Nov 2026) */
.sp-memory-results{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.sp-memory-hit{position:relative;padding:7px 9px 7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(205,225,240,.10)}
.sp-memory-hit-meta{font-size:11px;color:#9fb6c6;margin-bottom:2px}
.sp-memory-hit-text{font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word;max-height:9.8em;overflow:hidden;padding-right:58px}
.sp-memory-hit .sp-btn,.sp-memory-hit button{position:absolute;top:6px;right:6px;font-size:12px;padding:3px 8px}

/* 5 Nov (Jamie): one Settings window docked on the LEFT, next to the sidebar; five plain tabs. */
.sp-dialog[open]{position:fixed;inset:0 auto 0 var(--ps-dockw,0px);margin:0;width:min(760px,calc(100vw - var(--ps-dockw,0px)));height:100dvh;max-height:100dvh;border-radius:0 16px 16px 0;border-left:0;grid-template-columns:200px minmax(0,1fr);animation:sp-slide .18s ease-out}
@keyframes sp-slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
body:not(.ps-dock) .sp-dialog[open]{--ps-dockw:42px}
.sp-dialog::backdrop{background:rgba(4,6,10,.45);backdrop-filter:none}
.sp-intro{margin:0 0 2px;font-size:14px;color:var(--sp-muted);line-height:1.5}
.sp-choice-list{display:flex;flex-direction:column;gap:6px}
.sp-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-card);color:var(--sp-text);font:inherit;text-align:left;cursor:pointer}
.sp-choice strong{font-size:14px}
.sp-choice span{font-size:12.5px;color:var(--sp-muted)}
.sp-choice em{font-size:12px;font-style:normal;color:var(--sp-warn)}
.sp-choice.is-on{border-color:var(--sp-accent);background:var(--sp-select)}
.sp-memory-item textarea,.sp-memory-text{min-height:40px!important;font:14px/1.45 var(--sans,system-ui,sans-serif)!important;color:var(--sp-text)!important;letter-spacing:normal!important;width:100%;resize:vertical;padding:8px 10px;border:1px solid var(--sp-line);border-radius:8px;background:var(--sp-card);-webkit-text-security:none!important}
.sp-memory-item{display:flex;gap:8px;align-items:flex-start}
@media (max-width:800px){.sp-dialog[open]{inset:0;width:100vw;border-radius:0;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .sp-dialog[open] .sp-side{flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--sp-line)}
  .sp-dialog[open] .sp-side-title{display:none}
  .sp-dialog[open] .sp-nav{flex-direction:row;gap:4px}
  .sp-dialog[open] .sp-tab{white-space:nowrap;padding:6px 10px;font-size:13px}}

/* 5 Nov 2026 (Jamie): a row with an on/off switch keeps the switch on the right of the same line on every screen width. */
.sp-row:has(> .sp-row-control > .sp-switch) { flex-wrap: nowrap; }
.sp-row:has(> .sp-row-control > .sp-switch) .sp-row-text { flex: 1 1 0; }
.sp-row:has(> .sp-row-control > .sp-switch) .sp-row-control { flex: 0 0 auto; max-width: none; }

/* 5 Nov 2026 (Jamie): phone Settings like ChatGPT. A plain list of sections, tap a row to open it, back arrow to return.
   No sliding tab strip. */
.sp-back{display:none}
@media (max-width: 800px) {
  .sp-dialog .sp-side{display:none!important}
  .sp-dialog[open]{grid-template-rows:minmax(0,1fr)!important}
  .sp-head{display:flex;align-items:center;gap:6px;padding:10px 10px 6px!important}
  .sp-head .sp-title{flex:1;font-size:17px;margin:0}
  .sp-back{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--sp-text);padding:0}
  .sp-back svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:2}
  .sp-at-home .sp-back{visibility:hidden}
  .sp-at-home .sp-done{display:none}
  .sp-at-home .sp-head .sp-title{text-align:center}
  .sp-home-list{display:flex;flex-direction:column;margin:6px 0 0;border-radius:12px;overflow:hidden;background:var(--sp-card);border:1px solid var(--sp-line)}
  .sp-home-row{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border:0;border-top:1px solid var(--sp-line);background:transparent;color:var(--sp-text);font:500 15px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left}
  .sp-home-row:first-child{border-top:0}
  .sp-home-row:active{background:rgba(255,255,255,.06)}
  .sp-home-ico svg,body.ps .sp-dialog .sp-home-ico svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.85}
  .sp-home-label{flex:1}
  .sp-home-chev svg,body.ps .sp-dialog .sp-home-chev svg{width:16px!important;height:16px!important;fill:none;stroke:currentColor;stroke-width:2;opacity:.45}
}

/* 5 Nov 2026 (Jamie): Models page on the phone = ChatGPT-style rows with a tick, not boxed cards. */
@media (max-width: 800px) {
  .sp-choice-list{display:flex;flex-direction:column;gap:0!important}
  .sp-choice-list .sp-choice{position:relative;display:block;width:100%;margin:0!important;padding:9px 30px 9px 0!important;border:0!important;border-top:1px solid var(--sp-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left}
  .sp-choice-list .sp-choice:first-child{border-top:0!important}
  .sp-choice-list .sp-choice strong{font-size:14px}
  .sp-choice-list .sp-choice span{display:block;font-size:12px;color:var(--sp-muted);margin-top:1px}
  .sp-choice-list .sp-choice.is-on::after{content:"";position:absolute;right:6px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #7de9df;border-width:0 2px 2px 0;transform:rotate(45deg)}
}

/* 5 Nov 2026 (Jamie): on the phone Settings is a panel docked on the LEFT (like the sidebar), not the whole screen. */
@media (max-width: 800px) {
  .sp-dialog[open]{inset:0 auto 0 0!important;width:min(360px,86vw)!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0 16px 16px 0!important;border:0!important;border-right:1px solid var(--sp-line)!important;box-shadow:12px 0 40px rgba(0,0,0,.45)}
  .sp-dialog::backdrop{background:rgba(0,0,0,.45)}
}

/* 5 Nov 2026 (Jamie): ChatGPT/Codex-style grouped Settings (rounded cards, icon left, value or switch right). */
.sp-card{border-radius:16px;background:var(--sp-card);overflow:hidden;margin:0 0 14px}
.sp-card-label{font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--sp-text);margin:18px 4px 8px}
.sp-card-foot,.sp-card-note{font-size:12px;color:var(--sp-muted);margin:-8px 6px 14px}
.sp-card-note{margin:12px 14px}
.sp-cell-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 14px;border:0;background:transparent;color:var(--sp-text);text-align:left;font:400 15px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;position:relative}
.sp-cell-row+.sp-cell-row::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:var(--sp-line)}
.sp-cell-row:has(.sp-cell-ico)+.sp-cell-row::before,.sp-cell-row+.sp-cell-row:has(.sp-cell-ico)::before{left:48px}
button.sp-cell-row:active{background:rgba(255,255,255,.05)}
.sp-cell-ico svg,body.ps .sp-dialog .sp-cell-ico svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.7;display:block}
.sp-cell-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sp-cell-sub{font-size:12.5px;color:var(--sp-muted);display:flex;align-items:center}
.sp-cell-val{color:var(--sp-muted);font-size:14px;white-space:nowrap}
.sp-cell-chev svg,body.ps .sp-dialog .sp-cell-chev svg{width:15px!important;height:15px!important;fill:none;stroke:currentColor;stroke-width:2;opacity:.45;display:block}
.sp-cell-select{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;color:var(--sp-muted)!important;font-size:14px!important;padding:0 16px 0 6px!important;text-align:right;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;background-position:right 5px center,right 1px center!important;background-size:4px 4px!important;background-repeat:no-repeat!important;width:auto!important}
.sp-av-sm{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7de9df,#bc9cf7);color:#0b1018;font:700 12px/30px system-ui,sans-serif;text-align:center;flex:none}
.sp-prof-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 16px}
.sp-prof-av{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#7de9df,#bc9cf7);color:#0b1018;font:700 30px/84px system-ui,sans-serif;text-align:center}
.sp-prof-name{font:600 18px/1.2 system-ui,sans-serif}
.sp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.sp-tile{background:var(--sp-card);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sp-tile strong{font-size:16px}
.sp-tile span{font-size:12.5px;color:var(--sp-muted)}
.sp-heat-wrap{display:flex;flex-direction:column;gap:10px;padding:12px;position:relative}
.sp-heat-wrap .sp-seg{display:flex;width:100%}
.sp-heat-wrap .sp-seg button{flex:1}
.sp-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);grid-auto-columns:10px;gap:3px;overflow-x:auto;justify-content:end}
.sp-hc{width:10px;height:10px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.06)}
.sp-hc-pad{background:transparent}
.sp-hc[data-l="1"]{background:rgba(125,233,223,.3)}
.sp-hc[data-l="2"]{background:rgba(125,233,223,.55)}
.sp-hc[data-l="3"]{background:#9ec6ef}
.sp-hc[data-l="4"]{background:#bc9cf7}
.sp-hc.is-on{outline:1.5px solid #fff;outline-offset:1px}
.sp-heat-tip{position:absolute;left:50%;top:58px;transform:translateX(-50%);background:#0b1018;border:1px solid var(--sp-line);border-radius:12px;padding:4px 10px;font-size:12.5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.sp-heat-tip.on{opacity:1}
.sp-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#5a6372}
.sp-dot.on{background:#6fd6a0}
.sp-dot.off{background:#8a93a3}
@media (max-width:800px){
  .sp-intro{display:none}
}
.sp-card-label{margin:14px 4px 6px}
.sp-pane > .sp-card-label:first-child{margin-top:4px}
.sp-heat{grid-template-rows:repeat(7,14px);grid-auto-columns:14px;gap:4px}
.sp-hc{width:14px;height:14px}

.sp-card-input{display:block;width:100%;box-sizing:border-box;border:0!important;background:transparent!important;color:var(--sp-text)!important;font:15px/1.4 system-ui,-apple-system,sans-serif!important;padding:12px 14px!important;resize:vertical;outline:none;border-radius:0!important}
.sp-memsum{padding:2px 4px 20px}
.sp-memsum h3{font:600 16px/1.3 system-ui,sans-serif;margin:18px 0 6px}
.sp-memsum p{font:15px/1.55 system-ui,sans-serif;margin:0 0 10px;color:var(--sp-text)}

/* 5 Nov 2026 (Jamie): switches were "melting" (knob 16px in a 34x19 track, pushed past the edge). iOS geometry, knob always centred. */
.sp-dialog .sp-switch,.sp-dialog .sp-switch:disabled{width:44px!important;height:26px!important;border-radius:13px!important;flex:none;padding:0}
.sp-dialog .sp-switch::after{top:2px!important;left:2px!important;width:22px!important;height:22px!important;border-radius:50%!important}
.sp-dialog .sp-switch[aria-checked="true"]::after{transform:translateX(18px)!important}

.sp-usage{padding:6px 14px 10px}
.sp-usage-row{display:grid;grid-template-columns:92px 1fr 52px;align-items:center;gap:10px;min-height:28px;font-size:13px}
.sp-usage-day{color:var(--sp-muted)}
.sp-usage-track{height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.sp-usage-bar{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#7de9df,#bc9cf7)}
.sp-usage-val{text-align:right;font-variant-numeric:tabular-nums}