/* Named semantic colours keep reading, editing and management surfaces consistent. */
:root,[data-palette=classic]{
 color-scheme:light;--page:#edf2f7;--surface:#ffffff;--inset:#f3f6fa;--reader:#ffffff;
 --text:#253447;--muted:#536477;--accent:#0960bd;--on-accent:#ffffff;--selected:#e6f0fc;
 --line:#d4dee9;--control:#7c8b9b;--success-bg:#e7f3eb;--success:#21603b;
 --warning-bg:#fff1d9;--warning:#724c0c;--error-bg:#fff0ed;--error:#9d3027;
 --brand-bg:#092947;--brand-text:#e9f2fc;--shadow:0 3px 14px #193c6010;
 --blue:var(--accent);--border:var(--line);
}
:root[data-theme=paper],[data-palette=paper]{
 color-scheme:light;--page:#ede7dc;--surface:#faf5e9;--inset:#f0e9dc;--reader:#fff9ed;
 --text:#3e3830;--muted:#6a5e4e;--accent:#175e9f;--on-accent:#ffffff;--selected:#dfeaf0;
 --line:#d7ccba;--control:#8a7b67;--success-bg:#e6edda;--success:#34572b;
 --warning-bg:#f6e4bf;--warning:#694409;--error-bg:#f6e1d9;--error:#982e25;
 --brand-bg:#283e4b;--brand-text:#f8f1e5;--shadow:0 3px 14px #4b392011;
}
:root[data-theme=sage],[data-palette=sage]{
 color-scheme:light;--page:#e3ece7;--surface:#f2f7f2;--inset:#e6eee7;--reader:#f5faf4;
 --text:#293e37;--muted:#50675d;--accent:#145e98;--on-accent:#ffffff;--selected:#dcebf0;
 --line:#c5d7cb;--control:#748b7d;--success-bg:#daeade;--success:#255b36;
 --warning-bg:#f2e9cc;--warning:#6a4c13;--error-bg:#f4e3dd;--error:#982e25;
 --brand-bg:#163d3c;--brand-text:#e6f3ea;--shadow:0 3px 14px #203d2d10;
}
:root[data-theme=night],[data-palette=night]{
 color-scheme:dark;--page:#171e29;--surface:#222d3c;--inset:#293649;--reader:#202b38;
 --text:#e3eaf2;--muted:#b9c7d8;--accent:#92c2ff;--on-accent:#102b4b;--selected:#2d4360;
 --line:#425269;--control:#8396ae;--success-bg:#274537;--success:#b2e5c2;
 --warning-bg:#4b3d25;--warning:#f1d393;--error-bg:#4c3034;--error:#ffbcb5;
 --brand-bg:#142337;--brand-text:#d9e7f8;--shadow:0 3px 14px #00000024;
}
html{background:var(--page);color:var(--text);accent-color:var(--accent)}
body{background:var(--page)}
/* Colour changes are immediate, so text and control backgrounds change together. */
button{transition:none}
::selection{background:var(--selected);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
dialog{color:var(--text)}
#notice{background:var(--brand-bg);color:var(--brand-text);border:1px solid var(--control);width:max-content;max-width:calc(100vw - 32px)}
#notice.error{background:var(--error-bg);color:var(--error);border-color:var(--error)}
button.primary:hover{background:var(--accent);box-shadow:inset 0 0 0 2px var(--on-accent)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.card{border-radius:10px;box-shadow:var(--shadow)}
header{box-shadow:0 2px 9px #132d4710;border-top:3px solid var(--accent)}
header .brand{border-left:4px solid var(--accent);padding-left:12px;flex-shrink:0}
header .bar{justify-content:flex-end}
.account{padding:4px 10px;background:var(--inset);border-radius:5px}
.global-sidebar{background:transparent;border-right:0;padding-top:24px}
.global-sidebar button{background:transparent;border-radius:6px}
.global-sidebar button:hover{background:var(--surface)}
.global-sidebar button[aria-current=page]{border-left:4px solid var(--accent);font-weight:600}
.sidebar-title{font-size:.94rem;margin-top:10px}
#workspace-main>h1{padding-top:4px}
.home-intro{display:flex;align-items:center;gap:24px;justify-content:space-between;margin:0 0 24px;padding:24px 28px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:10px;background:linear-gradient(115deg,var(--surface),var(--inset))}
.home-intro p{max-width:800px;margin-bottom:0}
.home-count{flex-shrink:0;color:var(--muted);padding-left:24px;border-left:1px solid var(--control);text-align:center}
.home-count strong{display:block;color:var(--accent);font-size:2rem;line-height:1.4}
.work-card{border-left:4px solid var(--control);padding:24px}
.work-card h2{font-size:1.3rem;overflow-wrap:anywhere}
.work-card p{margin-bottom:0}
.work-card:hover{border-left-color:var(--accent)}
.work-card button{min-width:128px}
.reader.card{background:var(--reader)}
.reader h2{border-bottom:1px solid var(--line);padding-bottom:12px}
.tabs{gap:10px;border-bottom:2px solid var(--line);padding-bottom:14px}
.tabs button.active{box-shadow:inset 0 -3px var(--accent)}
.answer,.quote,.fixed-source{background:var(--reader)}
.answer{border:1px solid var(--line)}
.turn{border-left-color:var(--control)}
.auth-intro{position:relative;isolation:isolate;overflow:hidden;background:var(--brand-bg)}
.auth-intro::after{content:"";position:absolute;z-index:-1;width:360px;height:360px;right:-120px;bottom:10%;border:1px solid #ffffff26;box-shadow:0 0 0 38px #ffffff08,0 0 0 76px #ffffff05;border-radius:50%;pointer-events:none}
.auth-intro h1{border-left:4px solid var(--brand-text);padding-left:20px}
.auth-intro p{padding-left:24px}
.auth-layout .auth-form{max-width:540px;padding:40px}
.auth-display{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.auth-form .auth-display button{margin:0}
.appearance-dialog{width:min(780px,calc(100vw - 32px));max-height:90dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--control);padding:28px;border-radius:12px;box-shadow:0 16px 50px #00000030;font:inherit}
.appearance-dialog::backdrop{background:#101b2c88}
.appearance-heading,.appearance-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.appearance-heading{position:sticky;top:-28px;background:var(--surface);padding:12px 0;z-index:1}
.appearance-heading h2{margin:0}.appearance-heading button{flex-shrink:0}
.appearance-dialog>p{margin:14px 0}
.theme-options{padding:0;margin:20px 0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.theme-options legend{font-weight:600;margin-bottom:14px}
.theme-option{border:1px solid var(--control);border-radius:9px;padding:14px;margin:0;display:flex;gap:10px;align-items:flex-start;cursor:pointer;min-width:0}
.theme-option:has(input:checked){border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px;background:var(--selected)}
.theme-option input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:3px 0;padding:0}
.theme-option:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.theme-content{display:block;min-width:0;flex:1}
.theme-preview{display:block;padding:12px;background:var(--page);border:1px solid var(--control);border-radius:6px;color:var(--text);font-size:16px;font-weight:400}
.theme-preview-paper{display:block;border-left:3px solid var(--accent);background:var(--surface);padding:10px}
.theme-preview-rule{display:block;border-top:1px solid var(--control);margin:8px 0;width:75%}
.theme-preview-mark{display:inline-block;padding:2px 6px;border-radius:3px;background:var(--selected);color:var(--text)}
.theme-name{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px;font-weight:600}
.theme-name [data-theme-status]{font-size:.9rem;font-weight:400;color:var(--muted)}
.theme-description{display:block;font-size:.94rem;font-weight:400;color:var(--muted);margin-top:4px}
.appearance-footer{border-top:1px solid var(--line);padding-top:18px;flex-wrap:wrap}
@media(max-width:1100px){header .brand span{display:none}}
@media(max-width:760px){.home-intro{padding:20px;gap:16px}.home-count{display:none}.auth-layout .auth-form{padding:28px 24px}.auth-intro p{padding-left:0}.auth-intro h1{padding-left:14px}.appearance-dialog{padding:20px}.appearance-heading{top:-20px}.theme-options{grid-template-columns:1fr}.theme-preview{display:block;height:12px;padding:0}.theme-preview-paper{display:none}.theme-name{margin-top:6px}.appearance-footer button{width:100%}.work-card{padding:20px}}
@media(max-width:600px){
 /* Let long text occupy the screen instead of keeping a large tool panel fixed. */
 header{position:static;display:block}
 header>.bar{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;gap:8px}
 header>.bar>button{width:100%;height:100%}
 header .account{grid-column:1/-1;order:1;max-width:none;text-align:center}
 #notice{left:16px;transform:none;bottom:12px;padding:12px 16px;gap:10px}
 #notice span{flex:1 1 180px}
}
@media(forced-colors:active){.theme-option:has(input:checked),.tabs button.active{outline:3px solid Highlight}.theme-preview{border:1px solid CanvasText}.auth-intro::after{display:none}}