/*
 * How the Terminal looks to the person (appearance-choice.js; the Founder, 6 October 2026).
 *
 * Action color: twelve, Symbionia purple the default. Each sets --purple and --purple-dark for light and for dark, and
 * a swatch carrying data-accent draws its own colour from the same rule. Every value is at least 4.5:1 against the
 * page, the card and the selected row behind it, and against the button text drawn on it.
 */
[data-accent=purple]{--purple:#6d28b5;--purple-dark:#541c91}[data-accent=indigo]{--purple:#4338ca;--purple-dark:#342c9e}[data-accent=blue]{--purple:#245fce;--purple-dark:#1c4aa1}[data-accent=cyan]{--purple:#0e7490;--purple-dark:#0b5a70}[data-accent=teal]{--purple:#0a6e66;--purple-dark:#085650}[data-accent=green]{--purple:#167239;--purple-dark:#11592c}[data-accent=olive]{--purple:#46700e;--purple-dark:#37570b}[data-accent=amber]{--purple:#8f5706;--purple-dark:#704405}[data-accent=orange]{--purple:#b23c0b;--purple-dark:#8b2f09}[data-accent=rose]{--purple:#be123c;--purple-dark:#940e2f}[data-accent=pink]{--purple:#be185d;--purple-dark:#941349}[data-accent=graphite]{--purple:#4b5563;--purple-dark:#3b424d}[data-accent=black]{--purple:#000000;--purple-dark:#000000}
[data-theme=dark][data-accent=purple],[data-theme=dark] [data-accent=purple]{--purple:#ae7beb;--purple-dark:#be95ef}[data-theme=dark][data-accent=indigo],[data-theme=dark] [data-accent=indigo]{--purple:#a5b4fc;--purple-dark:#b7c3fd}[data-theme=dark][data-accent=blue],[data-theme=dark] [data-accent=blue]{--purple:#7fb0ff;--purple-dark:#99c0ff}[data-theme=dark][data-accent=cyan],[data-theme=dark] [data-accent=cyan]{--purple:#22d3ee;--purple-dark:#4edcf1}[data-theme=dark][data-accent=teal],[data-theme=dark] [data-accent=teal]{--purple:#2dd4bf;--purple-dark:#57ddcc}[data-theme=dark][data-accent=green],[data-theme=dark] [data-accent=green]{--purple:#4ade80;--purple-dark:#6ee599}[data-theme=dark][data-accent=olive],[data-theme=dark] [data-accent=olive]{--purple:#a3e635;--purple-dark:#b5eb5d}[data-theme=dark][data-accent=amber],[data-theme=dark] [data-accent=amber]{--purple:#fbbf24;--purple-dark:#fccc50}[data-theme=dark][data-accent=orange],[data-theme=dark] [data-accent=orange]{--purple:#fb923c;--purple-dark:#fca863}[data-theme=dark][data-accent=rose],[data-theme=dark] [data-accent=rose]{--purple:#fb7185;--purple-dark:#fc8d9d}[data-theme=dark][data-accent=pink],[data-theme=dark] [data-accent=pink]{--purple:#f472b6;--purple-dark:#f68ec5}[data-theme=dark][data-accent=graphite],[data-theme=dark] [data-accent=graphite]{--purple:#cbd5e1;--purple-dark:#d5dde7}[data-theme=dark][data-accent=black],[data-theme=dark] [data-accent=black]{--purple:#ffffff;--purple-dark:#ffffff}

/* Black (the Founder, 17 October 2026, 18:40: "My default colour is grey graphite… We also need a colour that is just BLACK, not graphite").
   Light: black controls and selected states. Dark: white controls, and the page itself true black with graphite cards one step up. */
body[data-theme=dark][data-accent=black]{--canvas:#000000;--surface:#121316;--soft:#1b1c20;--line:#2a2b30;--drawer-bg:#000000;--drawer-field:#0d0d0f;--drawer-pill:#1b1c20;--drawer-line:#24252a;--bar-bg:#121316;--bar-pill:#26272c;background:#000000}
html:has(>body[data-theme=dark][data-accent=black]){background:#000000}

/* "Make this space yours": the spacing every Settings form has (7px label to control, 17px between fields). */
.appearance-form{display:grid;gap:17px;margin-top:18px}
.appearance-field{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.appearance-field .field-label{font-size:.85rem;font-weight:600;padding:0}
fieldset.appearance-field>legend.field-label{margin-bottom:7px}
.appearance-field select{max-width:360px}
.accent-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.accent-option{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:500;min-width:0}
.accent-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.accent-swatch{flex:none;width:20px;height:20px;border-radius:50%;background:var(--purple);box-shadow:inset 0 0 0 1px #0000001f}
/* A colour's name holds one line, "Symbionia purple" included (Primy, 7 October 2026). */
.accent-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accent-option:hover{border-color:var(--purple)}
.accent-option:has(input:checked){border-color:var(--purple);box-shadow:0 0 0 1px var(--purple);font-weight:600}
.accent-option:has(input:focus-visible){outline:2px solid var(--purple);outline-offset:2px}
.accent-note{margin:2px 0 0}
.appearance-motion{padding:0}
.appearance-save{justify-self:start}
@media(max-width:700px){.accent-options{grid-template-columns:1fr 1fr}.accent-option{padding:8px 7px;gap:6px;font-size:.8125rem}.accent-swatch{width:18px;height:18px}.accent-option:has(input:checked){font-weight:500}.appearance-field select{max-width:none}}
@media(max-width:380px){.accent-option{font-size:.75rem}}

/*
 * Dark: what is selected or under the pointer is purple-tinted with light text, never the light theme's pale pill
 * under near-white text (the Founder, 6 October 2026: Home's row on Home was a white pill, unreadable). A touch
 * screen keeps :hover on the row last tapped, so the hover is dark too.
 */
[data-theme=dark] .nav-item:hover{background:#262433;background:color-mix(in srgb,var(--purple) 12%,var(--surface))}
[data-theme=dark] .nav-item.active,[data-theme=dark] .nav-item.active:hover{background:#3b2f52;background:color-mix(in srgb,var(--purple) 26%,var(--surface));color:var(--ink)}
[data-theme=dark] .nav-item.active .icon{color:var(--purple)}

[data-theme=dark] .segmented .active{background:var(--surface);color:var(--ink)}
[data-theme=dark] .btn.primary:hover{background:var(--purple-dark);border-color:var(--purple-dark);color:#15101c}
[data-theme=dark] .task-row:hover,[data-theme=dark] tbody tr:hover{background:var(--soft)}
[data-theme=dark] .harmony-add-agent .ha-door:hover{background:var(--soft)}