/* Programme appearance. appearance.js sets these variables from Settings › Appearance;
   the defaults reproduce the original blue look so nothing changes until a school saves its own. */
:root{--brand:#2563eb;--brand2:#edf4ff;--brand-hover:#1d55d5;--brand-ink:#215bd0;--brand-soft:#e3edff;--brand-softer:#f2f5fb;--brand-shadow:#2563eb26}
:root[data-text-tone=strong]{--ink:#0b1324;--muted:#3d4a60}

/* Accent surfaces */
.primary{background:var(--brand);box-shadow:0 3px 8px var(--brand-shadow)}
.primary:hover{background:var(--brand-hover);box-shadow:0 4px 12px var(--brand-shadow)}
.sidebar{background:var(--brand-softer)}
.nav-button.active,.nav-sub-button.active,.nav-button.active:hover{background:var(--brand-soft);color:var(--brand-ink)}
.segmented button.active{color:var(--brand-ink)}
.link-button{color:var(--brand-ink)}
.class-item.active,.family-link{background:var(--brand-soft)}
.directory-tabs button.active{color:var(--brand-ink);background:var(--brand-soft)}
.segmented button:hover{color:var(--brand-ink)}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--brand) 45%,white)!important;box-shadow:0 0 0 3px var(--brand-soft)}
.room-class-choice input,.inline-book-issue input,.appearance-settings input[type=radio]{accent-color:var(--brand)}
.timetable-assignable:hover{box-shadow:inset 0 0 0 2px var(--brand)}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:color-mix(in srgb,var(--brand) 55%,white)}

/* Sidebar brand: school logo + programme name; the product name is a small credit line. */
.brand-mark{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 62%,white),var(--brand))}
.brand-mark.has-logo{background:#fff;padding:3px;box-shadow:0 2px 8px #1b2a4614;border:1px solid var(--line);overflow:hidden}
.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block}
.brand-copy #programmeName{display:block;font-size:16px;font-weight:720;letter-spacing:-.3px;line-height:1.25}
.app-credit{font-size:11px;font-weight:650;letter-spacing:.3px;color:var(--muted)}
.sidebar-credit{padding:0 8px;margin-top:-8px}
.sidebar-collapsed .sidebar-credit{display:none}

/* Settings › Appearance */
.appearance-settings fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.appearance-settings legend{font-size:13px;font-weight:700;margin-bottom:10px;padding:0}
.appearance-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:28px;align-items:start;margin-top:8px}
.appearance-logo-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.appearance-logo-preview{width:84px;height:84px;border-radius:18px;border:1px dashed #cfd8e6;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;color:var(--muted);font-size:12px}
.appearance-logo-preview img{width:100%;height:100%;object-fit:contain}
.appearance-logo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.appearance-logo-actions small{flex-basis:100%;color:var(--muted)}
.appearance-upload{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.appearance-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.appearance-upload:focus-within{outline:3px solid color-mix(in srgb,var(--brand) 55%,white);outline-offset:2px}
.appearance-swatches{display:flex;flex-wrap:wrap;gap:8px}
.appearance-swatch-group{margin:12px 0 6px;font-size:12px;font-weight:700;color:var(--muted)}.appearance-swatch-group:first-of-type{margin-top:0}
.appearance-swatch-note{display:block;margin-top:8px;color:var(--muted)}
.appearance-suggestion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;color:var(--muted);font-size:13px}
.appearance-swatch{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.appearance-swatch input{position:absolute;opacity:0;width:1px;height:1px}
.appearance-swatch span{width:30px;height:30px;border-radius:9px;background:var(--swatch);flex:none}
.appearance-swatch:has(input:checked){border-color:var(--swatch);box-shadow:0 0 0 2px var(--swatch)}
.appearance-swatch:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--swatch) 55%,white);outline-offset:2px}
.appearance-settings .checkbox-label{display:flex;align-items:center;gap:8px;min-height:36px}
.appearance-preview{display:grid;grid-template-columns:120px 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:190px;background:#fff;position:sticky;top:90px}
.appearance-preview-side{background:var(--p-softer);padding:12px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.appearance-preview-brand{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-width:0}
.appearance-preview-brand img,.appearance-preview-dot{width:24px;height:24px;border-radius:7px;object-fit:contain;background:#fff;flex:none}
.appearance-preview-dot{background:var(--p-brand)}
.appearance-preview-brand strong{font-size:12px;line-height:1.2;overflow-wrap:anywhere}
.appearance-preview-nav{padding:7px 8px;border-radius:8px;color:#52627c}
.appearance-preview-nav.active{background:var(--p-soft);color:var(--p-ink);font-weight:700}
.appearance-preview-side small{margin-top:auto;color:#62718a;font-size:10px;font-weight:650}
.appearance-preview-main{padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:#17233d}
.appearance-preview-main p{margin:0;color:#62718a;font-size:12px}
.appearance-preview-main.strong{color:#0b1324}.appearance-preview-main.strong p{color:#3d4a60}
.appearance-preview-button{margin-top:auto;background:var(--p-brand);color:#fff;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:650}
@media(max-width:900px){.appearance-grid{grid-template-columns:1fr}.appearance-preview{position:static;max-width:380px}}

/* Autosaving settings (Door Check-in, Appearance): saving / saved / error line with Retry */
.autosave-status{min-height:20px;margin:8px 0;font-size:13px;font-weight:600;color:var(--muted)}
.autosave-status.saved{color:#166534}
.autosave-status.error{color:#b42318}
.autosave-status .link-button{font-size:13px}

/* Settings › Statement details */
.statement-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;max-width:820px}
.statement-form .statement-wide{grid-column:1/-1}
.statement-form textarea{width:100%;min-height:72px;resize:vertical}
@media(max-width:640px){.statement-form{grid-template-columns:1fr}}