:root[data-theme=pink][data-mode=light][data-intensity=light],[data-preview-theme=pink][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#913766;--accent-hover:#772d54;--line:#D7E2F1;--control-line:#7187AA;--soft:#f4ebf0;--soft-strong:#ebdbe3;--on-soft:#793653;--surface-tint:#FAFCFF;--accent-mid:#913766;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=pink][data-mode=light][data-intensity=standard],[data-preview-theme=pink][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#a72c69;--accent-hover:#87204f;--line:#D7E2F1;--control-line:#7187AA;--soft:#f6eaf0;--soft-strong:#efd9e4;--on-soft:#793653;--surface-tint:#FAFCFF;--accent-mid:#bb4b80;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=pink][data-mode=light][data-intensity=strong],[data-preview-theme=pink][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#c60066;--accent-hover:#a20054;--line:#D7E2F1;--control-line:#7187AA;--soft:#f9e6f0;--soft-strong:#f5d1e3;--on-soft:#793653;--surface-tint:#FAFCFF;--accent-mid:#c60066;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=pink][data-mode=dark][data-intensity=light],[data-preview-theme=pink][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#deb5c8;--accent-hover:#e4c2d2;--line:#36506E;--control-line:#8BA6C9;--soft:#39415a;--soft-strong:#4c4f67;--on-soft:#efe7ea;--surface-tint:#17283F;--accent-mid:#deb5c8;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=pink][data-mode=dark][data-intensity=standard],[data-preview-theme=pink][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#f391bf;--accent-hover:#f5a5cb;--line:#36506E;--control-line:#8BA6C9;--soft:#3c3b59;--soft-strong:#524665;--on-soft:#efe7ea;--surface-tint:#17283F;--accent-mid:#f391bf;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=pink][data-mode=dark][data-intensity=strong],[data-preview-theme=pink][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ff85be;--accent-hover:#ff9bca;--line:#36506E;--control-line:#8BA6C9;--soft:#3e3958;--soft-strong:#554264;--on-soft:#efe7ea;--surface-tint:#17283F;--accent-mid:#ff85be;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=lavender][data-mode=light][data-intensity=light],[data-preview-theme=lavender][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#5349ae;--accent-hover:#443c8f;--line:#D7E2F1;--control-line:#7187AA;--soft:#eeedf7;--soft-strong:#e0def0;--on-soft:#514179;--surface-tint:#FAFCFF;--accent-mid:#5349ae;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=lavender][data-mode=light][data-intensity=standard],[data-preview-theme=lavender][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#5145cd;--accent-hover:#4136b7;--line:#D7E2F1;--control-line:#7187AA;--soft:#eeecfa;--soft-strong:#e0def6;--on-soft:#514179;--surface-tint:#FAFCFF;--accent-mid:#7161cf;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=lavender][data-mode=light][data-intensity=strong],[data-preview-theme=lavender][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#6334d5;--accent-hover:#512baf;--line:#D7E2F1;--control-line:#7187AA;--soft:#efebfb;--soft-strong:#e3daf7;--on-soft:#514179;--surface-tint:#FAFCFF;--accent-mid:#6334d5;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=lavender][data-mode=dark][data-intensity=light],[data-preview-theme=lavender][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#bdb5de;--accent-hover:#c9c2e4;--line:#36506E;--control-line:#8BA6C9;--soft:#33415d;--soft-strong:#444f6d;--on-soft:#e8e7ef;--surface-tint:#17283F;--accent-mid:#bdb5de;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=lavender][data-mode=dark][data-intensity=standard],[data-preview-theme=lavender][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ab9bf4;--accent-hover:#b4a5f5;--line:#36506E;--control-line:#8BA6C9;--soft:#2f3b61;--soft-strong:#3d4672;--on-soft:#e8e7ef;--surface-tint:#17283F;--accent-mid:#a491f3;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=lavender][data-mode=dark][data-intensity=strong],[data-preview-theme=lavender][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#a996ff;--accent-hover:#af9bff;--line:#36506E;--control-line:#8BA6C9;--soft:#2e3963;--soft-strong:#3b4275;--on-soft:#e8e7ef;--surface-tint:#17283F;--accent-mid:#9d85ff;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=ocean][data-mode=light][data-intensity=light],[data-preview-theme=ocean][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#2d5e8c;--accent-hover:#254d73;--line:#D7E2F1;--control-line:#7187AA;--soft:#eaeff4;--soft-strong:#d9e2ea;--on-soft:#275b82;--surface-tint:#FAFCFF;--accent-mid:#2d5e8c;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=ocean][data-mode=light][data-intensity=standard],[data-preview-theme=ocean][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#1d629e;--accent-hover:#164e7e;--line:#D7E2F1;--control-line:#7187AA;--soft:#e8eff5;--soft-strong:#d6e3ee;--on-soft:#275b82;--surface-tint:#FAFCFF;--accent-mid:#347eb6;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=ocean][data-mode=light][data-intensity=strong],[data-preview-theme=ocean][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#0063aa;--accent-hover:#00518b;--line:#D7E2F1;--control-line:#7187AA;--soft:#e6eff6;--soft-strong:#d1e3f0;--on-soft:#275b82;--surface-tint:#FAFCFF;--accent-mid:#0063aa;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=ocean][data-mode=dark][data-intensity=light],[data-preview-theme=ocean][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#b5cbde;--accent-hover:#c2d4e4;--line:#36506E;--control-line:#8BA6C9;--soft:#32455d;--soft-strong:#42556d;--on-soft:#e7ebef;--surface-tint:#17283F;--accent-mid:#b5cbde;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=ocean][data-mode=dark][data-intensity=standard],[data-preview-theme=ocean][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#91c7f3;--accent-hover:#a5d1f5;--line:#36506E;--control-line:#8BA6C9;--soft:#2c4461;--soft-strong:#385472;--on-soft:#e7ebef;--surface-tint:#17283F;--accent-mid:#91c7f3;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=ocean][data-mode=dark][data-intensity=strong],[data-preview-theme=ocean][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#85c8ff;--accent-hover:#9bd2ff;--line:#36506E;--control-line:#8BA6C9;--soft:#2a4463;--soft-strong:#355475;--on-soft:#e7ebef;--surface-tint:#17283F;--accent-mid:#85c8ff;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=mint][data-mode=light][data-intensity=light],[data-preview-theme=mint][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#326758;--accent-hover:#295448;--line:#D7E2F1;--control-line:#7187AA;--soft:#eaf0ee;--soft-strong:#dae4e1;--on-soft:#2e5d46;--surface-tint:#FAFCFF;--accent-mid:#326758;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=mint][data-mode=light][data-intensity=standard],[data-preview-theme=mint][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#246e55;--accent-hover:#19553f;--line:#D7E2F1;--control-line:#7187AA;--soft:#e9f0ee;--soft-strong:#d8e5e0;--on-soft:#2e5d46;--surface-tint:#FAFCFF;--accent-mid:#398364;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=mint][data-mode=light][data-intensity=strong],[data-preview-theme=mint][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#007347;--accent-hover:#005e3a;--line:#D7E2F1;--control-line:#7187AA;--soft:#e6f1ed;--soft-strong:#d1e6de;--on-soft:#2e5d46;--surface-tint:#FAFCFF;--accent-mid:#007347;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=mint][data-mode=dark][data-intensity=light],[data-preview-theme=mint][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#b5decb;--accent-hover:#c2e4d4;--line:#36506E;--control-line:#8BA6C9;--soft:#32485a;--soft-strong:#425a68;--on-soft:#e7efeb;--surface-tint:#17283F;--accent-mid:#b5decb;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=mint][data-mode=dark][data-intensity=standard],[data-preview-theme=mint][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#91f3c7;--accent-hover:#a5f5d1;--line:#36506E;--control-line:#8BA6C9;--soft:#2c4b5a;--soft-strong:#385f67;--on-soft:#e7efeb;--surface-tint:#17283F;--accent-mid:#91f3c7;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=mint][data-mode=dark][data-intensity=strong],[data-preview-theme=mint][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#85ffc8;--accent-hover:#9bffd2;--line:#36506E;--control-line:#8BA6C9;--soft:#2a4d5a;--soft-strong:#356267;--on-soft:#e7efeb;--surface-tint:#17283F;--accent-mid:#85ffc8;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=spark][data-mode=light][data-intensity=light],[data-preview-theme=spark][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#3E5AA2;--accent-hover:#1939A4;--line:#D7E2F1;--control-line:#7187AA;--soft:#F1F5FC;--soft-strong:#D9E6FF;--on-soft:#294786;--surface-tint:#FAFCFF;--accent-mid:#4263B5;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root,:root[data-theme=spark][data-mode=light][data-intensity=standard],[data-preview-theme=spark][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#254CCB;--accent-hover:#1939A4;--line:#D7E2F1;--control-line:#7187AA;--soft:#EAF1FF;--soft-strong:#D9E6FF;--on-soft:#294786;--surface-tint:#FAFCFF;--accent-mid:#4263B5;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=spark][data-mode=light][data-intensity=strong],[data-preview-theme=spark][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#153ACC;--accent-hover:#1939A4;--line:#D7E2F1;--control-line:#7187AA;--soft:#EAF1FF;--soft-strong:#C4D6FF;--on-soft:#294786;--surface-tint:#FAFCFF;--accent-mid:#4263B5;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=spark][data-mode=dark][data-intensity=light],[data-preview-theme=spark][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ADBFEE;--accent-hover:#D1E2FF;--line:#36506E;--control-line:#8BA6C9;--soft:#1D304B;--soft-strong:#294469;--on-soft:#C2D8FF;--surface-tint:#17283F;--accent-mid:#ADCAFF;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-mode=dark],:root[data-theme=spark][data-mode=dark][data-intensity=standard],[data-preview-theme=spark][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ADCAFF;--accent-hover:#D1E2FF;--line:#36506E;--control-line:#8BA6C9;--soft:#213959;--soft-strong:#294469;--on-soft:#C2D8FF;--surface-tint:#17283F;--accent-mid:#ADCAFF;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=spark][data-mode=dark][data-intensity=strong],[data-preview-theme=spark][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#BFD7FF;--accent-hover:#D1E2FF;--line:#36506E;--control-line:#8BA6C9;--soft:#213959;--soft-strong:#36577D;--on-soft:#C2D8FF;--surface-tint:#17283F;--accent-mid:#ADCAFF;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=peach][data-mode=light][data-intensity=light],[data-preview-theme=peach][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#915237;--accent-hover:#77432d;--line:#D7E2F1;--control-line:#7187AA;--soft:#f4eeeb;--soft-strong:#ebe0db;--on-soft:#794a36;--surface-tint:#FAFCFF;--accent-mid:#915237;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=peach][data-mode=light][data-intensity=standard],[data-preview-theme=peach][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#a7512c;--accent-hover:#873f20;--line:#D7E2F1;--control-line:#7187AA;--soft:#f6eeea;--soft-strong:#efe0d9;--on-soft:#794a36;--surface-tint:#FAFCFF;--accent-mid:#bb6d4b;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=peach][data-mode=light][data-intensity=strong],[data-preview-theme=peach][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#c23a00;--accent-hover:#a23100;--line:#D7E2F1;--control-line:#7187AA;--soft:#f9ebe6;--soft-strong:#f4dcd1;--on-soft:#794a36;--surface-tint:#FAFCFF;--accent-mid:#c63b00;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=peach][data-mode=dark][data-intensity=light],[data-preview-theme=peach][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#dec1b5;--accent-hover:#e4ccc2;--line:#36506E;--control-line:#8BA6C9;--soft:#394357;--soft-strong:#4c5262;--on-soft:#efe9e7;--surface-tint:#17283F;--accent-mid:#dec1b5;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=peach][data-mode=dark][data-intensity=standard],[data-preview-theme=peach][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#f3ae91;--accent-hover:#f5bda5;--line:#36506E;--control-line:#8BA6C9;--soft:#3c4051;--soft-strong:#524d59;--on-soft:#efe9e7;--surface-tint:#17283F;--accent-mid:#f3ae91;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=peach][data-mode=dark][data-intensity=strong],[data-preview-theme=peach][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ffaa85;--accent-hover:#ffb99b;--line:#36506E;--control-line:#8BA6C9;--soft:#3e3f4f;--soft-strong:#554c56;--on-soft:#efe9e7;--surface-tint:#17283F;--accent-mid:#ffaa85;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=teal][data-mode=light][data-intensity=light],[data-preview-theme=teal][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#2e7876;--accent-hover:#2d7772;--line:#D7E2F1;--control-line:#7187AA;--soft:#eaf2f2;--soft-strong:#dae8e7;--on-soft:#347573;--surface-tint:#FAFCFF;--accent-mid:#37918b;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=teal][data-mode=light][data-intensity=standard],[data-preview-theme=teal][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#217774;--accent-hover:#1f847d;--line:#D7E2F1;--control-line:#7187AA;--soft:#e9f2f2;--soft-strong:#d7e8e7;--on-soft:#347573;--surface-tint:#FAFCFF;--accent-mid:#4bbbb4;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=teal][data-mode=light][data-intensity=strong],[data-preview-theme=teal][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#027872;--accent-hover:#00857c;--line:#D7E2F1;--control-line:#7187AA;--soft:#e6f2f1;--soft-strong:#d1e8e7;--on-soft:#347573;--surface-tint:#FAFCFF;--accent-mid:#00c6b9;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=teal][data-mode=dark][data-intensity=light],[data-preview-theme=teal][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#b5dedb;--accent-hover:#c2e4e2;--line:#36506E;--control-line:#8BA6C9;--soft:#32485d;--soft-strong:#425a6c;--on-soft:#e7efee;--surface-tint:#17283F;--accent-mid:#b5dedb;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=teal][data-mode=dark][data-intensity=standard],[data-preview-theme=teal][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#91f3ec;--accent-hover:#a5f5f0;--line:#36506E;--control-line:#8BA6C9;--soft:#2c4b60;--soft-strong:#385f70;--on-soft:#e7efee;--surface-tint:#17283F;--accent-mid:#91f3ec;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=teal][data-mode=dark][data-intensity=strong],[data-preview-theme=teal][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#85fff7;--accent-hover:#9bfff8;--line:#36506E;--control-line:#8BA6C9;--soft:#2a4d61;--soft-strong:#356273;--on-soft:#e7efee;--surface-tint:#17283F;--accent-mid:#85fff7;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=berry][data-mode=light][data-intensity=light],[data-preview-theme=berry][data-mode=light][data-intensity=light]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#91378e;--accent-hover:#772d75;--line:#D7E2F1;--control-line:#7187AA;--soft:#f4ebf4;--soft-strong:#ebdbeb;--on-soft:#793677;--surface-tint:#FAFCFF;--accent-mid:#91378e;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=berry][data-mode=light][data-intensity=standard],[data-preview-theme=berry][data-mode=light][data-intensity=standard]{--bg:#F7FAFF;--board:#F0F5FF;--ink:#182B48;--muted:#526580;--accent:#a72ca3;--accent-hover:#872084;--line:#D7E2F1;--control-line:#7187AA;--soft:#f6eaf6;--soft-strong:#efd9ee;--on-soft:#793677;--surface-tint:#FAFCFF;--accent-mid:#bb4bb7;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=berry][data-mode=light][data-intensity=strong],[data-preview-theme=berry][data-mode=light][data-intensity=strong]{--bg:#F7FAFF;--board:#E6EEFF;--ink:#182B48;--muted:#526580;--accent:#b900b3;--accent-hover:#a2009d;--line:#D7E2F1;--control-line:#7187AA;--soft:#f8e6f7;--soft-strong:#f2d1f1;--on-soft:#793677;--surface-tint:#FAFCFF;--accent-mid:#c600bf;--card-edge:#CFDDF4;--paper:#FFFFFF;--on-accent:#FFFFFF;--mint:#1a7764;--peach:#a7492e;--success-bg:#eaf5ee;--success-ink:#235c44;--success-solid:#236e58;--on-success-solid:#ffffff;--caution-bg:#fff3dd;--caution-ink:#674b21;--error-ink:#943b26;}
:root[data-theme=berry][data-mode=dark][data-intensity=light],[data-preview-theme=berry][data-mode=dark][data-intensity=light]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#deb5dd;--accent-hover:#e4c2e3;--line:#36506E;--control-line:#8BA6C9;--soft:#39415d;--soft-strong:#4c4f6d;--on-soft:#efe7ef;--surface-tint:#17283F;--accent-mid:#deb5dd;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=berry][data-mode=dark][data-intensity=standard],[data-preview-theme=berry][data-mode=dark][data-intensity=standard]{--bg:#101E34;--board:#14243D;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#f391f0;--accent-hover:#f5a5f2;--line:#36506E;--control-line:#8BA6C9;--soft:#3c3b60;--soft-strong:#524671;--on-soft:#efe7ef;--surface-tint:#17283F;--accent-mid:#f391f0;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
:root[data-theme=berry][data-mode=dark][data-intensity=strong],[data-preview-theme=berry][data-mode=dark][data-intensity=strong]{--bg:#101E34;--board:#172C4A;--ink:#EDF4FF;--muted:#B0C3DD;--accent:#ff85fb;--accent-hover:#ff9bfc;--line:#36506E;--control-line:#8BA6C9;--soft:#3e3962;--soft-strong:#554274;--on-soft:#efe7ef;--surface-tint:#17283F;--accent-mid:#ff85fb;--card-edge:#2B4568;--paper:#192B45;--on-accent:#152C56;--mint:#8bd5b4;--peach:#ffbd8d;--success-bg:#17382b;--success-ink:#b8edcf;--success-solid:#9cdbb9;--on-success-solid:#132c20;--caution-bg:#392d1b;--caution-ink:#ffdda4;--error-ink:#ffb2a4;}
@media print{:root{color-scheme:light;--bg:#F7FAFF!important;--board:#F0F5FF!important;--ink:#182B48!important;--muted:#526580!important;--accent:#254CCB!important;--accent-hover:#1939A4!important;--line:#D7E2F1!important;--control-line:#7187AA!important;--soft:#EAF1FF!important;--soft-strong:#D9E6FF!important;--on-soft:#294786!important;--surface-tint:#FAFCFF!important;--accent-mid:#4263B5!important;--card-edge:#CFDDF4!important;--paper:#FFFFFF!important;--on-accent:#FFFFFF!important;--mint:#1a7764!important;--peach:#a7492e!important;--success-bg:#eaf5ee!important;--success-ink:#235c44!important;--success-solid:#236e58!important;--on-success-solid:#ffffff!important;--caution-bg:#fff3dd!important;--caution-ink:#674b21!important;--error-ink:#943b26!important;}}
/* The Wise Sparks spacing standard (design/layout-spacing-standard.md), 26 September 2026. One scale for every page:
   the account site, the Administration Portal, the learner app, the website, Plans and Policies all load this first.
   Boxes never touch, an action comes after the words it acts on and stands clear of them, text breathes inside its
   box, and visuals keep their distance from the words around them. New CSS takes its spacing from these tokens. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;
  --gap-chips:var(--space-2);     /* pills, chips and tags in a row, both ways */
  --gap-items:var(--space-3);     /* boxes stacked in a list, a group or a column */
  --gap-cards:var(--space-4);     /* cards in a section, side by side or stacked */
  --gap-panels:var(--space-5);    /* page panels and cards that stand alone */
  --gap-sections:var(--space-6);  /* page sections */
  --gap-action:var(--space-4);    /* from the words to the action under them */
  --pad-row:var(--space-3);       /* one-line rows and list cards */
  --pad-box:var(--space-4);       /* notices and compact boxes */
  --pad-card:var(--space-5);      /* cards and panels */
}
@media (max-width:640px){:root{--gap-panels:var(--space-4);--gap-sections:var(--space-5);--pad-card:var(--space-4)}}

:root{font-family:'Avenir Next',Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent)}
/* A date or time field keeps its ring while Tab moves between its day, month and year (28 September 2026): Chrome moves focus
   into the field's own parts, where the field itself matches neither :focus nor :focus-visible, only :focus-within. */
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]):focus-within{outline:3px solid var(--accent)}
a{color:var(--accent)}button,.button{border:1px solid var(--control-line);border-radius:16px;padding:12px 18px;background:var(--paper);color:var(--ink);min-height:46px;font-weight:650;cursor:pointer;text-decoration:none;display:inline-block}button.primary,.button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}button:disabled{opacity:.6;cursor:wait}.account-header{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1200px;margin:24px auto;padding:0 28px}.account-header>a{font-size:25px;font-weight:750;text-decoration:none;color:#392c50}.account-header nav:where(:not(.site-nav)){display:flex;gap:12px;align-items:center}.account-header nav:where(:not(.site-nav)) a{font-size:14px;text-decoration:none;font-weight:650}main{max-width:1150px;margin:35px auto 80px;padding:0 28px}h1{font-size:clamp(32px,5vw,48px);letter-spacing:-.035em;line-height:1.12;margin:10px 0 18px}h2{font-size:26px;line-height:1.2;margin:0 0 16px}h3{margin:0 0 12px}p{line-height:1.65;max-width:70ch}.account-entry{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.entry-world{min-height:320px;position:relative;display:grid;place-items:center}.entry-orbit{height:275px;width:275px;border-radius:50%;background:var(--soft);box-shadow:inset 10px 16px 0 var(--surface-tint),0 28px 0 -12px var(--line);display:grid;place-items:center;font-size:128px;transform:rotate(-8deg)}.entry-orbit>span{transform:rotate(8deg)}.entry-star{position:absolute;font-size:35px;color:#987016}.entry-star.one{top:45px;left:20%}.entry-star.two{bottom:22px;right:17%}.entry-copy>p{font-size:18px}.account-card{padding:32px;background:var(--paper);border:1px solid var(--line);border-radius:30px;box-shadow:0 7px 0 var(--line)}.account-card form{display:grid;gap:16px}label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:650}input,select{width:100%;border:1px solid var(--control-line);border-radius:12px;padding:12px;background:var(--paper);color:var(--ink);min-height:46px}label.check{flex-direction:row;align-items:center;line-height:1.5}label.check input{width:20px;min-height:20px}input[type=checkbox],input[type=radio]{accent-color:var(--accent,#6843bd)}small,.small{font-size:13px;color:#665778;line-height:1.6}.account-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.account-columns>.account-card{align-self:start}.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.avatar-choices{display:flex;flex-wrap:wrap;gap:8px}.avatar-choices label{display:flex;flex-direction:row;align-items:center;font-size:22px;border:1px solid var(--line);padding:8px;border-radius:14px}.avatar-choices input{width:18px;min-height:18px}.profile-hero{display:flex;align-items:center;gap:25px;margin-bottom:28px}.profile-avatar{height:100px;width:100px;display:grid;place-items:center;font-size:65px;background:var(--soft);border-radius:35px;box-shadow:0 5px 0 var(--line)}.admin-toolbar{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.admin-toolbar input{max-width:340px}.member-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}.member-card{background:white;border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px}.member-card .face{font-size:45px}.member-card p{font-size:14px;margin:0}.member-card h2{font-size:22px;margin:0}.status{font-size:12px;font-weight:700;background:var(--success-bg);padding:5px 9px;border-radius:12px;align-self:start}.status.off{background:var(--caution-bg)}.member-card button{margin-top:auto}.account-card details{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-weight:650;min-height:42px}#account-message:empty{display:none}#account-message{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:18px;box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 13%,transparent);max-width:min(92vw,650px);z-index:10;cursor:pointer;animation:wise-say-in .18s ease-out}
@keyframes wise-say-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){#account-message{animation:none}}.account-notice{padding:14px 20px;background:var(--soft);border-radius:16px;font-size:14px}.account-audit{overflow-x:auto}.account-audit table{width:100%;border-collapse:collapse;font-size:13px}.account-audit td,.account-audit th{text-align:left;padding:12px;border-bottom:1px solid var(--line)}@media(max-width:800px){.account-entry,.account-columns{grid-template-columns:1fr;gap:24px}.entry-world{display:none}.member-list{grid-template-columns:repeat(2,minmax(0,1fr))}.account-header{padding:0 20px;align-items:flex-start}.account-header nav:where(:not(.site-nav)){flex-wrap:wrap;justify-content:flex-end}main{padding:0 20px}.account-card{padding:24px}.profile-hero h1{font-size:35px}}@media(max-width:480px){.member-list{grid-template-columns:1fr}.account-header>a{font-size:20px}.account-header nav:where(:not(.site-nav)) a{font-size:12px}.profile-avatar{height:78px;width:78px;font-size:45px;flex-shrink:0}.profile-hero{gap:16px}.account-header nav:where(:not(.site-nav)) button:not(.ws-mode){font-size:12px;padding:8px;min-height:38px}}@media(prefers-reduced-motion:no-preference){button:active,.button:active{transform:translateY(2px)}.account-card{animation:arrive .2s ease-out}@keyframes arrive{from{opacity:.7;transform:translateY(6px)}to{opacity:1;transform:none}}}
:root[data-mode=dark]{color:var(--ink);background:var(--bg)}:root[data-mode=dark] .account-card,:root[data-mode=dark] .member-card,:root[data-mode=dark] input,:root[data-mode=dark] select,:root[data-mode=dark] button,:root[data-mode=dark] .button{background:var(--paper);color:var(--ink);border-color:var(--line)}:root[data-mode=dark] button.primary,:root[data-mode=dark] .button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}:root[data-mode=dark] small,:root[data-mode=dark] .small{color:var(--muted)}:root[data-mode=dark] .account-header>a{color:var(--ink)}:root[data-mode=dark] .account-notice{background:var(--soft);color:var(--ink)}

[hidden]{display:none!important}
@media(max-width:380px){.account-header{flex-wrap:wrap}.account-header nav:where(:not(.site-nav)){justify-content:flex-start}.account-card{padding:20px}.profile-hero h1{font-size:30px}}

/* Wise Sparks account surfaces share the learner color tokens. */
:root{background:var(--bg);color:var(--ink)}body{color:var(--ink);background:var(--bg)}.account-header>a{display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:-.04em;white-space:nowrap}.wise-mark{width:42px;height:42px}.account-header{max-width:none;padding:14px clamp(20px,4vw,52px);margin:0;border-bottom:0}.account-header a{color:var(--ink)}main{max-width:1200px}.entry-copy>p:first-child{font-size:13px;font-weight:750;letter-spacing:.04em;color:var(--accent)}.entry-copy h1{font-size:clamp(38px,5vw,60px);letter-spacing:-.05em;line-height:1.08}.entry-copy>p{color:var(--muted)}.entry-spark{display:grid;place-items:center}.entry-spark img{width:310px;max-width:80%;height:auto;object-fit:contain}.account-card,.member-card{background:var(--paper);border-color:var(--line);box-shadow:0 8px 28px -20px #182b4830}.account-card{border-radius:24px}.account-card h2{letter-spacing:-.035em}.account-notice,.profile-avatar{background:var(--soft);color:var(--ink);box-shadow:none}button,.button,input,select{background:var(--paper);color:var(--ink);border-color:var(--control-line)}button.primary,.button.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}small,.small{color:var(--muted)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--accent)}.status{background:var(--success-bg);color:var(--success-ink)}.status.off{background:var(--caution-bg);color:var(--caution-ink)}.account-card fieldset{min-width:0;border:1px solid var(--line);border-radius:14px}.account-card legend{font-size:14px}#account-message{background:var(--ink);color:var(--paper)}
@media(max-width:800px){.entry-spark{display:none}.account-header{padding:10px 20px}.entry-copy h1{max-width:14ch}.account-entry{gap:28px}.account-header>a{font-size:21px}.account-header .wise-mark{width:32px;height:32px}}@media(max-width:480px){.account-header{flex-wrap:wrap;gap:12px}.account-header nav:where(:not(.site-nav)){justify-content:flex-start;gap:14px}.account-header nav:where(:not(.site-nav)) a{min-height:44px;display:flex;align-items:center}.member-list{grid-template-columns:1fr}.account-card{padding:22px}.profile-hero{gap:16px}.profile-hero h1{font-size:30px;overflow-wrap:anywhere}.profile-avatar{width:70px;height:70px;font-size:45px;flex:none}}
.account-header>a{font-weight:650}

.registration-step{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--accent);font-weight:650}.registration-step span{color:var(--muted);font-weight:500}.registration-grade-label{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--soft);padding:14px 16px;border-radius:16px;margin:18px 0}.registration-grade-label button{font-size:13px;min-height:44px;padding:8px 12px}.account-parent-link{padding-top:18px;border-top:1px solid var(--line);margin-top:24px;font-size:13px}.setup-key-help{margin:0 0 18px}.setup-key-help summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent)}

/* Guided account welcome: one short step and a clear next action. */
.welcome-card{min-width:0;align-self:center}.welcome-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0 0 26px;gap:6px}.welcome-steps li{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:11px;position:relative;text-align:center}.welcome-steps li>span{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:12px;z-index:1}.welcome-steps li:not(:last-child):after{content:'';position:absolute;top:15px;left:65%;width:72%;height:1px;background:var(--line)}.welcome-steps [aria-current] {color:var(--accent)}.welcome-steps [aria-current]>span{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}.welcome-steps .done>span{background:var(--soft);color:var(--accent)}.welcome-count{font-size:12px;color:var(--muted);margin:0 0 8px}.welcome-card h2{font-size:clamp(26px,3vw,32px);line-height:1.15}.welcome-card>p{font-size:15px}.welcome-buttons{display:flex;gap:12px;justify-content:space-between;margin-top:12px}.welcome-buttons .primary{margin-left:auto;flex:1;max-width:300px}.welcome-footnote{border-top:1px solid var(--line);padding-top:16px;margin:24px 0 0}.welcome-preview,.welcome-identity{display:flex;align-items:center;gap:18px;background:var(--soft);padding:20px;border-radius:18px}.welcome-preview>span,.welcome-identity>span{font-size:50px;flex:none}.welcome-preview p,.welcome-identity p{font-size:13px;margin:6px 0 0}.welcome-card .avatar-choices{display:grid;grid-template-columns:repeat(4,1fr)}.welcome-card .avatar-choices label{position:relative;justify-content:center;padding:16px 6px;font-size:32px;min-height:70px;border-width:2px}.welcome-card .avatar-choices input{position:absolute;opacity:0;width:1px;min-height:1px}.welcome-card .avatar-choices label:has(:checked){border-color:var(--accent);background:var(--soft)}.welcome-card .avatar-choices label:focus-within{outline:3px solid var(--accent);outline-offset:3px}.welcome-card fieldset{border:0;padding:0}.welcome-card legend{margin-bottom:10px}.field-help{margin:-8px 0 0}.welcome-card [data-caregiver]{padding:16px;background:var(--soft);border-radius:16px;display:grid;gap:14px}.welcome-card [data-caregiver] p{margin:0}.welcome-card input:invalid:not(:placeholder-shown){box-shadow:none}
/* Administration keeps tasks separate, with readable, real account status. */
.admin-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0 26px}.admin-hero h1{font-size:clamp(30px,4vw,46px)}.admin-hero p{margin:8px 0;color:var(--muted)}.admin-hero>div>p:first-child{color:var(--accent);font-weight:650;font-size:13px}.admin-sections{display:flex;gap:8px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:18px;width:fit-content;max-width:100%;margin:0 0 28px}.admin-sections button{border:0;background:transparent;font-size:14px}.admin-sections [aria-current]{background:var(--soft);color:var(--accent)}.admin-workspace{background:var(--paper);padding:30px;border:1px solid var(--line);border-radius:24px;min-height:340px}.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:26px}.admin-section-head h2{font-size:25px}.admin-section-head p{margin:0;color:var(--muted);font-size:14px}.admin-section-head .primary{white-space:nowrap}.admin-toolbar{align-items:end;gap:18px;margin-bottom:20px}.admin-toolbar label:first-child{flex:1}.admin-toolbar input{max-width:none}.admin-toolbar label:last-child{min-width:190px}.student-table{width:100%;border-top:1px solid var(--line)}.student-row{display:grid;grid-template-columns:1.35fr 1.2fr 1fr auto;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);font-size:14px}.student-head{padding:12px 0;color:var(--muted);font-size:12px}.student-row strong{font-weight:650;overflow-wrap:anywhere}.student-row small{display:block;margin-top:5px}.student-name{display:flex;gap:14px;align-items:center;min-width:0}.student-name .face{width:50px;height:50px;flex:none;font-size:32px;background:var(--soft);border-radius:16px;display:grid;place-items:center}.student-row button{font-size:13px;white-space:nowrap}.student-row .status{display:inline-block;line-height:1.5}.admin-form{max-width:660px;box-shadow:none;border:0;padding:0}.admin-form form{max-width:600px}.admin-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:24px 4px;color:var(--muted);font-size:13px}.admin-empty{padding:32px}.account-audit table{min-width:560px}.account-audit{max-width:100%}
@media(max-width:800px){.admin-hero{align-items:flex-start;flex-direction:column;gap:12px}.student-row{grid-template-columns:1.2fr 1fr}.student-head{display:none}.student-row>[role=cell]:last-child{text-align:right}.admin-workspace{padding:24px}.account-entry{align-items:start}.entry-copy h1{font-size:40px;max-width:18ch}.entry-copy>p:last-of-type{margin-bottom:0}}
@media(max-width:480px){main{margin-top:24px}.welcome-card{padding:22px 18px}.welcome-steps b{font-weight:600}.entry-copy h1{font-size:34px}.entry-copy>p{font-size:15px}.welcome-buttons{gap:8px}.welcome-buttons button{padding:12px}.admin-workspace{padding:20px 16px}.admin-sections{width:100%;gap:0;padding:4px}.admin-sections button{flex:1;font-size:12px;padding:10px 8px}.admin-section-head{flex-direction:column;gap:16px}.admin-toolbar{align-items:stretch}.admin-toolbar label{width:100%;flex:auto}.student-row{gap:14px;font-size:13px}.student-name{gap:8px}.student-name .face{width:38px;height:42px;font-size:27px}.student-row>div:nth-child(2){text-align:right}.student-row button{padding:10px 12px}.welcome-preview,.welcome-identity{padding:16px;gap:12px}.welcome-preview strong,.welcome-identity strong{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:no-preference){.welcome-card .avatar-choices label{transition:transform .16s ease,border-color .16s ease}.welcome-card .avatar-choices label:hover{transform:translateY(-2px)}}
.insight-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.insight-metrics .account-card{margin:0;padding:24px}.insight-symbol{display:block;font-size:1.7rem;color:var(--accent,#3155b7);margin-bottom:14px}.insight-number{display:block;font-size:2.7rem;line-height:1.1;letter-spacing:-.04em;margin:10px 0}.insight-metrics h3{font-size:1rem;line-height:1.4}.insight-columns{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}.insight-columns .account-card{margin:0 0 20px}.insight-bars{display:grid;gap:14px;margin-top:24px}.insight-bars>div{display:grid;grid-template-columns:95px minmax(0,1fr) 35px;gap:12px;align-items:center;font-size:.85rem}.insight-bars meter{width:100%;height:17px;accent-color:#37688a}.insight-columns hr{border:0;border-top:1px solid #dfe6e9;margin:25px 0}.insight-columns .account-empty{padding:24px 0}@media(max-width:1000px){.insight-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-columns{grid-template-columns:1fr}}@media(max-width:480px){.insight-metrics{gap:10px}.insight-metrics .account-card{padding:16px}.insight-number{font-size:2.2rem}.insight-metrics .small{font-size:.8rem}}
/* A welcoming entrance: one illustrated space, one clear account action. */
body:has(.entry-concierge) .account-header{max-width:1360px;margin:14px auto 0;padding:18px 32px}
main:has(.entry-concierge){max-width:1360px;min-height:calc(100svh - 105px);margin:0 auto;padding:42px 48px 52px;display:flex;align-items:center}
.entry-concierge{width:100%;grid-template-columns:minmax(0,1.12fr) minmax(360px,.92fr);grid-template-areas:"copy form" "scene form" "peek form";column-gap:clamp(48px,6vw,100px);row-gap:16px;align-items:center}
.entry-concierge .entry-copy{grid-area:copy;text-align:center;min-width:0}
.entry-concierge .entry-copy h1{font-size:clamp(38px,3.5vw,56px);line-height:1.09;max-width:16ch;margin:12px auto 18px;letter-spacing:-.045em;text-wrap:balance}
.entry-concierge .entry-copy>p{margin:0 auto;font-size:17px;line-height:1.6;text-wrap:balance}
.entry-concierge .entry-copy>p:first-child{font-size:13px;font-weight:700;color:var(--accent)}
.entry-concierge>.welcome-card{grid-area:form;width:100%;padding:clamp(28px,3vw,42px);border-radius:28px;box-shadow:0 18px 48px -30px color-mix(in srgb,var(--ink) 22%,transparent);align-self:center}
.entry-signin-card h2{font-size:32px;letter-spacing:-.035em}
.entry-signin-card>p{line-height:1.6}
.entry-signin-card form{gap:18px;margin:28px 0 16px}
.entry-signin-card input:not([type=checkbox]){min-height:52px;border-radius:13px}
.entry-signin-card form>.primary{min-height:52px;border-radius:14px}
.entry-signin-card .check{font-size:13px;color:var(--muted)}
.entry-signin-card .account-parent-link{margin-bottom:0;padding-top:20px;margin-top:22px}
.entry-local-note{margin:20px 0 0;font-size:12px}
.entry-scene{grid-area:scene;position:relative;isolation:isolate;min-width:0;height:300px;display:grid;place-items:center;padding-bottom:35px;overflow:hidden}
.entry-scene:before{content:'';position:absolute;z-index:-1;inset:40px 10% 45px;border-radius:50%;background:color-mix(in srgb,var(--soft) 60%,transparent)}
.entry-orbit-line{position:absolute;z-index:-1;inset:48px 5% 60px;border:1px solid color-mix(in srgb,var(--accent) 17%,transparent);border-radius:50%;transform:rotate(-14deg)}
.entry-mascot{display:block;width:270px;max-width:76%;height:auto;max-height:268px;object-fit:contain;filter:drop-shadow(0 13px 13px #17335412)}
.entry-glint{position:absolute;color:#c99a2d;font-size:24px;line-height:1;pointer-events:none}.glint-one{top:55px;right:13%;transform:rotate(10deg)}.glint-two{left:12%;bottom:72px;font-size:30px}
.entry-scene-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--muted);font-size:12px;margin:0;padding:8px 16px;text-wrap:balance}
.entry-scene[data-scene=growth]:before{background:color-mix(in srgb,var(--soft) 55%,#dceee630)}
.entry-scene[data-scene=style] .entry-orbit-line{transform:rotate(14deg);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.entry-peek{grid-area:peek;min-width:0;max-width:520px;width:100%;margin:0 auto}
.entry-preview-options{display:flex;justify-content:center;gap:6px;width:fit-content;max-width:100%;margin:0 auto;padding:5px;border:1px solid var(--line);background:var(--paper);border-radius:18px}
.entry-preview-options button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;min-height:44px;padding:10px 14px;font-size:13px;color:var(--muted);border-radius:12px;white-space:nowrap}
.entry-preview-options svg{width:19px;height:19px;flex:none}.entry-preview-options [aria-pressed=true]{background:var(--soft);color:var(--accent)}
.entry-preview-copy{text-align:center;min-height:116px;padding:20px 10px 0}
.entry-preview-copy h2{font-size:17px;line-height:1.4;margin:0 0 8px;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.entry-preview-copy p{font-size:13px;line-height:1.65;max-width:48ch;margin:0 auto;color:var(--muted);text-wrap:pretty}
@media(min-width:1500px) and (min-height:900px){.entry-scene{height:350px}.entry-mascot{width:310px;max-height:310px}.entry-concierge{row-gap:24px}.entry-concierge .entry-copy h1{font-size:60px}}
@media(max-width:1000px) and (min-width:801px){main:has(.entry-concierge){padding:32px 28px}.entry-concierge{column-gap:32px;grid-template-columns:minmax(0,1fr) minmax(330px,1fr)}.entry-concierge>.welcome-card{padding:26px}.entry-preview-options{gap:0}.entry-preview-options button{padding:10px;font-size:12px}}
@media(max-width:800px){
 body:has(.entry-concierge) .account-header{padding:12px 24px;margin-top:8px}
 main:has(.entry-concierge){display:block;min-height:0;padding:28px 24px 40px;max-width:600px}
 .entry-concierge{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "scene" "peek";gap:24px}
 .entry-concierge .entry-copy h1{font-size:36px;margin:10px auto 12px;max-width:20ch}
 .entry-concierge .entry-copy>p{font-size:15px}.entry-concierge .entry-copy>p:first-child{font-size:12px}
 .entry-concierge>.welcome-card{padding:28px}.entry-signin-card form{margin-top:22px;gap:16px}
 .entry-scene{height:230px;margin-top:0}.entry-mascot{width:200px;max-height:195px}.entry-peek{margin-top:-12px}
 .entry-guided .entry-scene,.entry-guided .entry-peek{display:none}
}
@media(max-width:480px){
 body:has(.entry-concierge) .account-header{padding:10px 20px;gap:6px}.account-header:has(+main .entry-concierge) nav:where(:not(.site-nav)){gap:18px}
 main:has(.entry-concierge){padding:24px 18px 32px}.entry-concierge .entry-copy h1{font-size:32px}
 .entry-concierge>.welcome-card{padding:24px 22px;border-radius:24px}.entry-signin-card h2{font-size:28px}
 .entry-signin-card input:not([type=checkbox]){font-size:16px}.entry-preview-options button{padding:10px;font-size:12px;gap:6px}
 .entry-preview-copy{padding-top:16px;min-height:132px}.entry-preview-copy h2{font-size:16px}
}
@media(prefers-reduced-motion:no-preference){
 .entry-mascot{animation:spark-welcome .65s cubic-bezier(.2,.7,.3,1) both}
 .entry-orbit-line{transition:transform .35s ease,border-color .2s ease}.entry-preview-options button{transition:background .16s ease,color .16s ease}
 .entry-preview-options button:hover{background:var(--soft)}
 @keyframes spark-welcome{from{opacity:0;transform:translateY(10px) rotate(-3deg)}to{opacity:1;transform:none}}
}

/* Two included starter colors; studios remain in Rewards. */
.starter-colors{border:0;padding:0;margin:22px 0;min-width:0}
.starter-colors legend{font-weight:800;margin-bottom:12px}
.starter-color-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.starter-colors .starter-color-option{display:flex;flex-direction:row;align-items:center;gap:10px;padding:14px 12px;border:1px solid var(--control-line);border-radius:16px;background:var(--paper);cursor:pointer;min-width:0}
.starter-color-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--soft)}
.starter-colors .starter-color-option input[type=radio]{width:18px;height:18px;min-height:0;min-width:0;padding:0;margin:0;flex:none;accent-color:var(--accent)}
.starter-color-dot{width:24px;height:24px;flex:none;border-radius:50%;background:#2078ad}
[data-starter-color=pink] .starter-color-dot{background:#cb2675}
.starter-color-option strong,.starter-color-option small{display:block}.starter-color-option small{margin-top:3px;color:var(--muted);font-size:12px}
.starter-theme-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.reward-colors-heading{margin-top:28px}
@media(max-width:420px){.starter-color-option{gap:7px;padding:12px 9px}.starter-color-dot{width:18px;height:18px}.starter-color-option strong{font-size:14px}.starter-theme-gallery{grid-template-columns:1fr}}

/* Participation and points: clear ownership, calm controls, no learner ranking. */
.member-management-head{display:flex;justify-content:space-between;gap:28px;align-items:center;margin:24px 0 30px}.member-management-head h1{margin:8px 0 16px}.membership-summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px}
.member-badge{display:inline-flex;align-items:center;width:fit-content;margin-top:7px;padding:5px 10px;border:1px solid var(--line);border-radius:30px;color:var(--accent);background:var(--soft);font-size:12px;font-weight:650;line-height:1.4}
.member-badge[data-membership=pioneer]{color:#705019;background:#fff1c9;border-color:#ead69b}.member-badge[data-membership=beta]{color:#285b64;background:#def1f1;border-color:#b2d5d5}
.member-balance{border:1px solid var(--line);border-radius:26px;background:var(--paper);padding:22px 28px;display:flex;flex-direction:column;gap:8px;min-width:245px}.member-balance>span{font-size:13px;color:var(--muted)}.member-balance>strong{font-size:48px;line-height:1.1;color:var(--accent)}
.member-controls{grid-template-columns:1fr 1fr;align-items:start}.member-controls .eyebrow{display:block;margin-bottom:10px;color:var(--accent);font-size:12px;font-weight:650}.member-controls .small{margin:12px 0 22px}.point-edit-row{display:grid;grid-template-columns:1.2fr 1fr;gap:15px}.point-preview{display:grid;gap:9px;border:1px solid var(--line);border-radius:18px;background:var(--soft);padding:20px;color:var(--on-soft)}.point-preview strong{font-size:29px;line-height:1.2}.point-preview span{font-size:12px;line-height:1.6}.group-create summary{color:var(--accent)}
.admin-change-list{padding:0;margin:0;list-style:none}.admin-change-list li{padding:20px 0;border-bottom:1px solid var(--line)}.admin-change-list li:last-child{border:0}.admin-change-list li>div{display:flex;align-items:center;flex-wrap:wrap;gap:15px;color:var(--muted);font-size:13px}.admin-change-list p{margin:10px 0;font-size:14px;overflow-wrap:anywhere}.adjustment-amount{color:var(--accent);font-size:26px}.student-points{color:var(--accent);font-weight:650}.testing-group-label{font-style:italic}.admin-toolbar label{min-width:150px!important}.admin-toolbar label:first-child{flex-basis:100%}
@media(max-width:800px){.member-management-head{align-items:flex-start;flex-direction:column}.member-balance{width:100%}.member-controls{grid-template-columns:1fr}.member-sections{flex-wrap:wrap}.member-sections button{flex:1}.member-management-head h1{font-size:35px}}
@media(max-width:480px){.point-edit-row{grid-template-columns:1fr}.member-controls .account-card{padding:23px 18px}.member-sections{border-radius:17px}.member-sections button{font-size:12px;padding:12px 10px}.admin-toolbar label{min-width:0!important}.member-balance{padding:20px 24px}}
.member-management-head h1,.membership-summary,.admin-change-list p,.admin-change-list small{overflow-wrap:anywhere}.member-controls>section,.admin-change-list li{min-width:0}

/* Shared administration spacing: a readable work area, not stretched form fields. */
body:has(.admin-hero,.support-main,.care-metrics,.member-management-head){--admin-content:1320px;--admin-gutter:clamp(20px,3vw,36px);--admin-gap:24px}
body:has(.admin-hero,.support-main,.care-metrics,.member-management-head) #account-main{max-width:var(--admin-content);padding-inline:var(--admin-gutter);margin-inline:auto}
#account-main:has(.admin-hero,.member-management-head){margin-top:28px}
.admin-hero{padding:8px 0 24px;margin-bottom:0;align-items:center}.admin-hero h1{margin:8px 0 12px}.admin-hero>div{min-width:0}.admin-hero .button{flex:none}
.admin-sections{width:100%;gap:6px;padding:7px;border-radius:18px;margin-bottom:24px;align-items:center}.admin-sections button,.admin-sections>a.button{border-radius:12px;padding:11px 15px;min-height:44px;line-height:1.4;white-space:normal}.admin-sections [aria-current]{box-shadow:inset 0 0 0 1px var(--line)}
.admin-workspace{padding:clamp(22px,2.8vw,36px)}.admin-section-head{margin-bottom:28px;align-items:center}.admin-section-head h2{margin:0 0 10px}.admin-section-head>div{min-width:0}.admin-section-head p{max-width:65ch}.admin-section-head>label{min-width:170px}
.admin-toolbar{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(140px,1fr));align-items:end;gap:18px;margin:0 0 24px}.admin-toolbar label{min-width:0!important}.admin-toolbar label:first-child{width:auto}.admin-toolbar label:last-child{min-width:0}
.account-card form{gap:20px}.account-card label{gap:9px;line-height:1.5}.account-card form>button:not(.avatar-choices button){justify-self:start;min-height:46px;margin-top:4px}.welcome-card form>button,.entry-signin-card form>button{justify-self:stretch!important}.account-card textarea{font:inherit;line-height:1.55;padding:14px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--control-line);border-radius:13px;width:100%;max-width:100%;resize:vertical;min-height:112px}.account-card textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.account-columns,.member-controls{gap:24px}.account-columns>*,.insight-columns>*{min-width:0}.insight-columns{margin-block:24px;gap:24px}.insight-columns .account-card{margin-bottom:0}.insight-metrics .account-card{padding:24px}.insight-metrics h3{margin:0 0 12px}.insight-metrics .small{margin-bottom:0}.account-audit th{color:var(--muted);font-size:12px;font-weight:600;background:var(--soft)}.account-audit td,.account-audit th{padding:16px 18px;line-height:1.5}.account-audit table{border-spacing:0}.account-audit td{vertical-align:top;overflow-wrap:anywhere}
.admin-editor-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:clamp(30px,4vw,60px);align-items:start}.admin-editor-layout .admin-form{max-width:none;min-width:0}.admin-editor-layout .admin-form form{max-width:none}.admin-context{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,40px);min-width:0}.admin-context>.eyebrow{color:var(--accent);font-size:12px;font-weight:700;margin:0 0 20px}.admin-context h3{font-size:28px;letter-spacing:-.035em;line-height:1.2}.admin-welcome-preview{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--ink);overflow-wrap:anywhere}.admin-welcome-preview h3{margin:22px 0 12px;font-size:27px}.admin-welcome-preview p{font-size:16px;margin:0 0 24px;color:var(--muted)}.admin-preview-action{display:inline-flex;gap:20px;padding:13px 18px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:650}.admin-context-facts{margin:24px 0}.admin-context-facts>div{display:flex;gap:12px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.admin-context-facts dt{color:var(--muted)}.admin-context-facts dd{margin:0;font-weight:650}.admin-arrival-steps{list-style:none;padding:0;margin:24px 0;display:grid;gap:24px}.admin-arrival-steps li{display:flex;gap:14px;align-items:start}.admin-arrival-steps li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--accent);flex:none;font-size:12px}.admin-arrival-steps strong{font-size:14px}.admin-arrival-steps p{font-size:13px;color:var(--muted);margin:8px 0 0}
@media(max-width:1050px){.admin-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-editor-layout{grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:28px}.admin-context{padding-left:24px}.admin-welcome-preview{padding:22px}}
@media(max-width:800px){.admin-editor-layout{grid-template-columns:1fr}.admin-context{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}.admin-context .admin-welcome-preview{max-width:520px}.admin-sections{gap:4px}.admin-hero{align-items:flex-start}.admin-section-head{align-items:flex-start}.admin-sections button,.admin-sections>a.button{font-size:13px;padding:10px 13px;flex:0 1 auto}.admin-section-head>label{min-width:0;width:100%}.account-columns,.member-controls{gap:20px}}
@media(max-width:480px){.admin-toolbar{grid-template-columns:1fr;gap:18px}.admin-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-sections button,.admin-sections>a.button{justify-content:center;text-align:center;width:100%;min-width:0}.account-card form>button{justify-self:stretch}.account-header nav:where(:not(.site-nav)){justify-content:flex-end}.admin-workspace{padding:22px 18px}.admin-context h3{font-size:25px}.admin-hero .button{max-width:100%;white-space:normal}.admin-section-head{gap:20px}.insight-metrics{grid-template-columns:1fr 1fr;gap:12px}.insight-metrics .account-card{padding:18px}.insight-metrics .small{font-size:12px}}
@media(max-width:480px){.entry-preview-options{width:100%}.entry-preview-options button{flex:1;min-width:0;white-space:normal;padding-inline:6px}}
.daily-joke blockquote span,.daily-joke blockquote strong{white-space:pre-line}

/* Keep sign-in within easy reach on phones; the joke has its own friendly space. */
.entry-joke{grid-area:joke;min-width:0}.entry-joke .daily-joke{margin:0}
.entry-concierge:has(.entry-joke){grid-template-areas:"copy form" "joke form" "scene form" "peek form"}
@media(max-width:800px){.entry-concierge:has(.entry-joke){grid-template-areas:"copy" "form" "joke" "scene" "peek"}}

/* ---- The sign-in has to fit one screen, for every user and every role.
        It did not: the left column stacked copy 176 + joke 265 + scene 430 +
        peek 172 = about 1090px into the ~755px a 860px-tall laptop actually
        offers, so the page scrolled and on /parents the primary button landed
        at y=1037, below the fold. The essentials are the brand line and the
        form; everything else is company. So the company is dropped by
        available HEIGHT, tallest-first, and the sign-in itself always fits. --- */
/* ---- The companion on the sign-in is the RENDERED Sparki, the same one the
        public page and the product use. It was still the old drawn star here,
        which is the one place a visitor meets him before signing in. One pose
        and the halo, as background layers so each payload lands once in this
        stylesheet instead of inline. Geometry is the render's own 385x560. --- */
.entry-sparki{position:relative;display:block;width:clamp(120px,15vw,190px);
 margin:18px auto 0;aspect-ratio:385/560;z-index:2}
/* On a short screen he is the one piece of the scene that stays. */
@media(max-height:620px){.entry-sparki{width:clamp(96px,11vw,132px);margin-top:10px}}
.entry-sparki .sparki-float{animation:entry-sparki-hover 5.2s ease-in-out infinite;transform-origin:50% 88%}
.entry-sparki .sparki-frame{filter:drop-shadow(0 14px 22px #0b142859)}
.entry-sparki .sparki-character[data-show=joy] [data-f=joy]{animation:ws-joke-bob .62s ease-in-out}
/* he is not in a box: the button around him is a control, not a surface */
.entry-joker-sparki,.entry-joker-sparki:hover,.entry-joker-sparki:active{
 background:transparent!important;border-radius:0;border:0;box-shadow:none}
/* Until the app draws its first screen, which replaces this, Sparki holds the page. */
.account-splash{min-height:min(62vh,560px);display:grid;place-content:center;justify-items:center;gap:14px;text-align:center}
.account-splash-sparki{width:clamp(88px,11vw,124px);filter:drop-shadow(0 0 26px rgba(255,209,92,.45))}
.account-splash .sparki-float{animation:entry-sparki-hover 5.2s ease-in-out infinite;transform-origin:50% 88%}
.account-splash p{margin:0;font-weight:600;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.account-splash .sparki-float{animation:none}}
@keyframes entry-sparki-hover{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-8px) rotate(1.4deg)}}
@media(prefers-reduced-motion:reduce){.entry-sparki .sparki-float{animation:none}}
:root[data-motion=off] .entry-sparki .sparki-float{animation:none}

/* ---- The day/night switch these pages never had. Sized and spaced like a
        real target, not a text link, because the people using it include
        children and adults on phones. ---- */
/* The switch itself now lives in app/mode-switch.css, shared with the
   welcome page. Only its placement is this file's business. */

/* On a phone the stack was 1533px against 812 of screen, putting the sign-in
   button at y=999 -- below the fold on the device most families will use. The
   companion and the copy give way so the form does not. */
@media(max-width:800px){
 .entry-sparki{width:clamp(84px,24vw,110px);margin:12px auto 0}
 .entry-concierge .entry-copy h1{font-size:30px;margin:6px auto 8px}
 .entry-concierge .entry-copy>p:last-of-type{display:none}
 main:has(.entry-concierge){padding:18px 18px 28px}
 .entry-concierge>.welcome-card{padding:22px 20px}
 .entry-signin-card form{margin-top:14px;gap:12px}
 /* the eyebrow is the first thing to go: the logo above already says it */
 .entry-concierge .entry-copy>p:first-child{display:none}
 .entry-concierge .entry-copy h1{font-size:27px}
 .entry-signin-card h2{font-size:25px;margin-bottom:4px}
 /* side padding here must not inherit the tall-screen rule's 48px */
 main:has(.entry-concierge){padding:18px 18px 28px!important}
}

/* ---- The sign-in is the first room of the product, and it was a flat panel
        with a form on it while the marketing page next door is a lit world.
        Same plates the public bands use, the same veil, the same glass. The
        art is full-bleed and fixed so the card floats over a world rather than
        sitting on a colour. ---- */
body:has(.entry-concierge){position:relative;isolation:isolate}
body:has(.entry-concierge)::before{content:'';position:fixed;inset:0;z-index:-2;
 background:url("/assets/b71e73eaf765a87c887f4a7c081347cee16c6e6535b5f31a2b52f673d9bcdbf6.webp") center/cover no-repeat}
/* The veil that used to sit over the whole picture is gone: it was covering the
   thing it was there to show. What needed it was the text on the left, so the
   readability lives on the text instead of on the window. */
:root[data-mode=dark] body:has(.entry-concierge)::before{background-image:url("/assets/582c701579c7a345897a67028c6e474a3c52f6dcb133538ef5f74ad29ebb3229.webp")}
/* The sharpest render of the world each screen can use (the Architect, 24 September 2026: "why the
   background image is not high quality ... looks like is blurry"): the portrait crop was stretched
   over wide screens. A landscape window gets the landscape renders, the largest there are. */
@media (min-aspect-ratio:23/20){
 body:has(.entry-concierge)::before{background-image:url("/assets/ffd2f2f7bc209ff2e1462380d8e8b3451b010f5a72ac2e724d74c746510c2669.webp")}
 :root[data-mode=dark] body:has(.entry-concierge)::before{background-image:url("/assets/28df3119294faf915c95af940a6f1c21b1a63f9318ad4f2a55325befddb7d6be.webp")}
}
/* Without the veil the picture is bright behind the words, and a text shadow is
   not enough over a sky. The copy column carries its own soft scrim, in the
   page's own background colour, so the artwork still shows at its edges and the
   words read in either theme. */
.entry-concierge .entry-copy{padding:clamp(18px,2vw,28px);border-radius:24px;
 background:radial-gradient(130% 110% at 28% 42%,
  color-mix(in srgb,var(--bg) 88%,transparent) 0%,
  color-mix(in srgb,var(--bg) 62%,transparent) 52%,transparent 100%)}
.entry-duo .entry-copy{display:grid;gap:14px;align-content:start}
.entry-joker{text-shadow:0 1px 2px #0b152c3d}
:root:not([data-mode=dark]) .entry-joker{text-shadow:0 1px 2px #ffffffb3}
/* The card becomes glass over the world, the way every card on the public page
   now does, instead of an opaque slab. */
.entry-concierge>.welcome-card{
 background:color-mix(in srgb,var(--paper) 82%,transparent);
 backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05);
 border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
@media(forced-colors:active){
 body:has(.entry-concierge)::before{display:none}}

/* ---- Dark on the entry pages is the WEBSITE's night, not a learner theme.
        Nobody has signed in yet, so there is no personal theme to honour --
        yet the pages were rendering data-theme=ocean's dark palette, which is
        #0c1217 near-black against the marketing page's #101e34 navy. Same
        product, two different darks, one click apart. These are the canopy
        tokens verbatim. Once a learner IS signed in their own theme governs
        again, because this is scoped to the entry layout only. ---- */
:root[data-mode=dark][data-entry],
:root[data-mode=dark][data-entry][data-theme][data-intensity],
:root[data-mode=dark][data-theme][data-intensity]:has(.entry-concierge),
:root[data-mode=dark][data-theme]:has(.entry-concierge){
 --bg:#101e34;--paper:#192b45;--ink:#edf4ff;--muted:#b0c3dd;
 --soft:#213959;--line:#36506e;--accent:#adcaff;--on-accent:#152c56;
 background:#101e34;color:#edf4ff}

@media(max-height:1320px){.entry-concierge .entry-peek{display:none}}
@media(max-height:1120px){.entry-concierge .entry-scene{display:none}}
@media(max-height:860px){.entry-concierge .entry-joke{display:none}}
/* Below that the form itself has to give: trim its padding and breathing room
   rather than let the button fall off the bottom. */
@media(max-height:900px){
 main:has(.entry-concierge){padding:22px 48px 26px;min-height:0}
 .entry-concierge>.welcome-card{padding:24px 26px}
 .entry-concierge .entry-copy h1{font-size:clamp(30px,2.6vw,40px);margin:8px auto 10px}
 /* The code page's one sentence of why stays: its card is short, and that
    sentence is how a child learns their grown-up is the one saying yes. */
 .entry-concierge:not(.activation-page) .entry-copy>p:last-child{display:none}
 .entry-signin-card form{margin-top:16px;gap:12px}
}
/* A short, wide window is a laptop in a video call, not a phone: keep two
   columns and let the form drive the height. */
@media(max-height:620px) and (min-width:801px){
 .entry-concierge{row-gap:12px}
 .entry-concierge .entry-copy>p:first-child{display:none}
}

/* One set of destinations. Page-specific controls sit quietly below it. */
:root[data-mode]{background:var(--bg)}
/* Signed in, the header sits exactly where it does on the sign-in page, so
   signing in moves nothing: the brand at the left edge, the bar at the right. */
.account-header:has(>.site-nav-member){max-width:none;margin:0;padding:14px 52px;align-items:center;gap:20px}
@media(max-width:800px){.account-header:has(>.site-nav-member){padding:10px 16px;gap:10px}}
.admin-local-sections{display:flex;gap:22px;width:100%;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;margin-bottom:26px}
.admin-local-sections button{position:relative;flex:0 0 auto;padding:12px 4px 15px;border-radius:0;min-height:48px;background:transparent;color:var(--muted);white-space:nowrap}
:root .admin-local-sections button{background:transparent;color:var(--muted)}
:root .admin-local-sections button:hover{color:var(--accent)}
:root .admin-local-sections [aria-current]{background:transparent;color:var(--accent);box-shadow:none}
.admin-local-sections [aria-current]::after{content:"";position:absolute;inset:auto 0 -1px;height:3px;border-radius:3px;background:var(--accent)}
.admin-back{margin-bottom:24px}.admin-back button{font-size:13px}
@media(max-width:480px){
 .account-header .wise-mark{width:32px;height:32px}
 .admin-local-sections{display:flex;gap:0;padding:0;border-radius:0}
 .admin-local-sections button{width:auto;flex:1;font-size:12px;padding:12px 3px 15px;min-height:46px}
}
.enquiries-list{display:grid;gap:22px;max-width:1000px}.enquiry-card{min-width:0}.enquiry-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.enquiry-heading h2{overflow-wrap:anywhere}.enquiry-heading .member-badge{flex:none}.enquiry-message{white-space:pre-wrap;overflow-wrap:anywhere;padding:22px;background:var(--soft);border-radius:16px;line-height:1.8}.enquiry-contact{display:grid;gap:12px}.enquiry-contact>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px}.enquiry-contact dt{font-size:13px;color:var(--muted)}.enquiry-contact dd{margin:0;overflow-wrap:anywhere}.enquiry-card form{display:flex;flex-wrap:wrap;align-items:end;gap:16px;margin-top:24px}.enquiry-card form label{min-width:180px}.enquiry-card details{font-size:13px}.enquiry-card details p{overflow-wrap:anywhere}.enquiry-card summary{cursor:pointer;padding-block:12px}.enquiries-list+nav{display:flex;gap:12px;margin-block:24px}@media(max-width:480px){.enquiry-heading{flex-wrap:wrap}.enquiry-contact>div{grid-template-columns:1fr;gap:4px}.enquiry-message{padding:16px}.enquiry-card form label{width:100%;min-width:0}}

/* Shared administrator work area, including secondary destinations. */
:root[data-account-role=admin] #account-main{max-width:1320px;margin:28px auto;padding-inline:clamp(20px,3vw,36px)}
:root[data-account-role=admin] #account-main :is(h1,h2,h3,p,dd){overflow-wrap:anywhere}
:root[data-account-role=admin] :is(.operations-hero,.admin-hero){margin-top:0;padding-block:12px 28px}
:root[data-account-role=admin] :is(.account-card,.ops-card){box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 3%,transparent)}
:root[data-account-role=admin] :is(input,select,textarea,button,a.button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.enquiry-overview{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:24px;margin-bottom:28px;max-width:1000px}
.enquiry-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:22px}
.enquiry-metrics>div{display:grid;gap:8px}.enquiry-metrics strong{font-size:32px;color:var(--accent);line-height:1.2}.enquiry-metrics span{font-size:14px;color:var(--muted)}
.enquiry-overview summary{cursor:pointer;padding:12px 0;font-weight:700}.enquiry-topics{display:grid;gap:10px}.enquiry-topics>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:10px 0}.enquiry-topics dd{margin:0;font-weight:700}
.ops-search-empty{padding:24px;background:var(--soft);border-radius:16px;margin-top:20px}
@media(max-width:600px){.enquiry-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.enquiry-overview{padding:20px}.ops-card fieldset{padding:16px}.ops-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ops-tabs button{min-width:0;white-space:normal;text-align:center}}

.username-choice{min-width:0}.username-choice>label{display:grid;gap:8px}.username-choice>button{margin-top:4px}.username-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.username-options button{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:left;font-size:14px}.username-options button[aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--accent)}

/* ---- The phone header, and the greeting that sits under it.

        At 375x812 the header came to 181px: a 58px lockup, then four 44px
        pills wrapping onto two rows, then the day/night switch pushed onto a
        third. The greeting below stacked the heading and Sparki for another
        216px. Between them they put the Sign in button 46px below the fold,
        so the first thing the page asks you to do was the one thing you
        could not see.

        The switch is pinned beside the lockup, the pills run in one row that
        slides, and Sparki stands next to the heading rather than beneath it.
        113px and 140px, and at 375x812 the button lands 99px clear.

        The pills cannot simply be dropped on a phone: /recover offers no
        other way back to sign-in, and /register, /parent-register and
        /parents each carry only one of the four doors inside their card.
        The fourth pill is cut by the right edge on purpose -- a pill half in
        view is what tells you the row slides. ---- */
@media(max-width:800px){
 :root[data-entry] .account-header{position:relative;margin:8px auto 0;
  padding:8px 16px;gap:6px;align-items:center}
 :root[data-entry] .account-header [data-brand-name="Wise Sparks"],
 .account-header:has(>.site-nav-member) [data-brand-name="Wise Sparks"]{min-width:77px;min-height:44px}
 :root[data-entry] .account-header [data-brand-name="Wise Sparks"]::before,
 .account-header:has(>.site-nav-member) [data-brand-name="Wise Sparks"]::before{width:77px;height:44px}
 :root[data-entry] .ws-mode{position:static;margin:0}

 /* This used to be a flex row: the heading on the left, a mute Sparki on the
    right. He is the joker now and brings a bubble with him, so the row put
    the joke's words straight through the heading. The column stacks, and the
    joker does its own side-by-side inside. */
 :root[data-entry] .entry-concierge .entry-copy{display:block;text-align:left}
 :root[data-entry] .entry-concierge .entry-copy h1{margin:0 0 4px;min-width:0;
  max-width:none;text-align:left}
 :root[data-entry] .entry-sparki{width:84px;margin:0}
 :root[data-entry] .entry-joker{margin-top:0;gap:10px;align-items:center}
 /* He goes below the card here. The reserved height comes off too: at this
    width the longest joke needs seven lines beside him and a fixed box would
    cut the punchline, which is worse than a page that scrolls -- and a phone
    scrolls anyway. The reserve exists for the desktop, where the screen has
    to fit a viewport exactly. */
 :root[data-entry] .entry-joke-words{height:auto;overflow:visible}
}

/* The rungs above this are for tall phones. A 375x667 handset -- an SE or an
   8, which is exactly the phone a child is handed down -- still put the
   button 46px under, and a 320x568 put it 148px under. Two more rungs, and
   the greeting gives way before the form does.

   At 790 the greeting compacts: Sparki stays, smaller, beside a smaller
   heading, and the card's opening line goes -- "Welcome back" right above
   the username box says the same thing in less room. Only under 640, where
   nothing else will do, does the greeting go entirely; the lockup in the
   header and the card's own heading carry the page from there. */
@media(max-width:800px) and (max-height:790px){
 :root[data-entry] main:has(.entry-concierge){padding-top:12px}
 :root[data-entry] .entry-sparki{width:64px}
 :root[data-entry] .entry-concierge .entry-copy{gap:12px}
 :root[data-entry] .entry-concierge .entry-copy h1{font-size:21px;letter-spacing:-.03em}
 :root[data-entry] .entry-concierge>.welcome-card{padding:18px}
 /* only the sign-in card's opening line, which 'Welcome back' already says.
    The same position on /parents carries a real instruction about who the
    step belongs to, so this is keyed to the page, not to the shape. */
 :root[data-entry=login] .entry-signin-card>h2+p{display:none}
 :root[data-entry] .entry-signin-card form{margin-top:12px;gap:10px}
}
@media(max-width:800px) and (max-height:640px){
 :root[data-entry] .entry-concierge .entry-copy{display:none}
 :root[data-entry] .entry-concierge{row-gap:0}
}

/* ---- The desktop sign-in, footer and all, on one screen.

        Measured on the live pilot: 1280x800 ran 62px past the viewport,
        1440x900 by 145, 1536x864 by 187 and 1920x1080 by 137. What fell off
        the bottom was the policy footer -- Terms, Privacy, AI use notice,
        password recovery -- so the one row of the page that exists to be
        found was the one row you had to go looking for.

        The height comes from the left column, not the card. Above 860px of
        viewport the daily joke joins the column and takes 265px of it, on
        top of a 276px Sparki, which together stand taller than the 572px
        card beside them. So the trim is all on that side plus the page's own
        margins: nothing is removed, the joke and Sparki are simply sized to
        the room the screen actually has.

        The joke's blockquote carried min-height:104px from the Community
        page, where it sits in a wide card. Here it reserves space for lines
        that are not there. ---- */
@media(min-width:801px){
 :root[data-entry] main:has(.entry-concierge){padding-top:14px;padding-bottom:16px}
 :root[data-entry] .entry-concierge{row-gap:12px}
 :root[data-entry] .entry-sparki{width:clamp(110px,10vw,152px)}


 :root[data-entry] footer.policy-links{margin-top:8px}
}
/* A 1280x800 laptop is the shortest desktop in common use, and there the joke
   is already gone (the 860px rung above takes it) -- so the last 41px has to
   come from the card's own margins rather than from anything it says. */
/* And the reason the footer was under the fold in the first place: main asks
   for calc(100svh - 105px), but the chrome around it is not 105px. The header
   is 103 plus a 14px top margin, and the footer 44 plus its own 8 -- 169. The
   page reserved 64px it did not have, every time, at every width.

   A number like that has to be maintained by hand and silently rots the day
   either one changes height, which is what happened. The column does the
   arithmetic now: body is the page, main takes what is left after the header
   and the footer have had theirs, whatever those turn out to be. */
@media(min-width:801px){
 :root[data-entry] body:has(.entry-concierge){min-height:100svh;display:flex;flex-direction:column}
 /* width:100% is not decoration. The header and the footer centre themselves
    with margin-inline:auto inside a max-width, and in a flex column an auto
    margin on the cross axis beats the default stretch -- so each one shrank
    to fit its own contents and sat in the middle of the page. The sign-in
    header went from 1360px to 482px and looked nothing like the marketing
    one. Giving them their width back leaves the auto margins with the job
    they were written for: centring the block, not sizing it. */
 :root[data-entry] body:has(.entry-concierge)>:is(header,main,footer){width:100%}
 :root[data-entry] main:has(.entry-concierge){flex:1 1 auto;min-height:0}
}
@media(min-width:801px) and (max-height:860px){
 :root[data-entry] .entry-concierge>.welcome-card{padding:clamp(20px,2vw,26px)}
 :root[data-entry] .entry-signin-card h2{font-size:26px;margin-bottom:6px}
 :root[data-entry] .entry-switch{margin-bottom:16px}
 :root[data-entry] .entry-signin-card form{margin-top:12px;gap:10px}
 :root[data-entry] main:has(.entry-concierge){padding-top:10px;padding-bottom:12px}
 :root[data-entry] footer.policy-links{margin-top:4px}
}

/* ---- The one front door: its switcher, and the choice behind it.

        Four screens became one card with two states. The switcher is a real
        segmented control rather than two links -- the thumb sits under the
        live panel and slides, so the card reads as one object changing its
        mind instead of two pages swapping. It is a role, not a tablist:
        both buttons stay reachable and aria-pressed carries the state, which
        is what a screen reader needs when the thing that changes is the body
        of the same card rather than a panel it can move focus into. ---- */
.entry-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;
 margin:0 0 20px;padding:4px;border-radius:999px;
 background:color-mix(in srgb,var(--soft) 72%,transparent);
 border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.entry-tab{position:relative;z-index:1;min-height:42px;padding:9px 14px;border:0;
 border-radius:999px;background:transparent;box-shadow:none;cursor:pointer;
 font:inherit;font-size:14.5px;font-weight:650;color:var(--muted);
 transition:color .2s ease,background-color .2s ease}
.entry-tab[aria-pressed=true]{color:var(--on-accent);background:var(--accent);
 box-shadow:0 6px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.entry-tab:hover:not([aria-pressed=true]){color:var(--ink)}
.entry-tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.entry-tab{transition:none}}

/* The two doors behind Create account. Big targets with a sentence each,
   because the person choosing may be nine years old or may be a head of
   school, and "Student / Parent" alone does not tell either of them which
   one carries what they came to do. */
.entry-roles{display:grid;gap:12px;margin-top:4px}
.entry-role{display:grid;gap:5px;text-align:left;min-height:44px;
 padding:16px 18px;border-radius:18px;cursor:pointer;font:inherit;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);
 box-shadow:none;transition:border-color .18s ease,transform .18s ease,background-color .18s ease}
.entry-role strong{font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.entry-role span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.entry-role:hover{border-color:var(--accent);transform:translateY(-1px);
 background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.entry-role:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.entry-role{transition:none}.entry-role:hover{transform:none}}
.entry-role-note{cursor:default;margin-top:12px;background:color-mix(in srgb,var(--soft) 55%,transparent);border-style:dashed}
.entry-role-note:hover{border-color:var(--line);transform:none;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.entry-role-note a{font-weight:650}
.entry-ways{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.entry-ways h3{margin:0 0 8px;font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--muted)}
.entry-ways ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.entry-ways li{font-size:13px;line-height:1.55;color:var(--muted)}
.entry-ways strong{color:var(--ink);font-weight:650}
.entry-link{border:0;background:none;box-shadow:none;padding:0;min-height:0;font:inherit;font-size:13px;
 color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.entry-back-row{margin-top:14px}
.entry-back{border:0;background:none;box-shadow:none;padding:6px 0;min-height:44px;
 font:inherit;font-size:13px;color:var(--accent);cursor:pointer;text-decoration:underline;
 text-underline-offset:3px}
.entry-back:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- Sparki, telling the joke.

        He used to stand on the sign-in doing nothing while a separate card
        told the joke beside him. Now the bubble is his and the mascot is the
        button: press him and he tells you another.

        The bubble's height is RESERVED, not fitted. The deck holds 48 jokes
        running from 37 to 142 characters and one is drawn per load, so a
        bubble that sizes to its content moves every row beneath it from one
        visit to the next -- which is exactly how this screen kept missing the
        viewport by a different amount each time it was measured. The longest
        needs four lines at this width, so every joke is given four. ---- */
.entry-joker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;
 align-items:end;margin-top:18px;text-align:left}
/* No box. Sparki is standing in a world, not holding a card -- a panel around
   his words put a piece of interface between him and the place he lives in.
   The words float on the art instead, and carry their own legibility: a glow
   the colour of the page behind them, which reads as light on the day plate
   and as depth on the night one without either needing its own rule. */
.entry-joke-bubble{position:relative;padding:0;background:none;border:0;box-shadow:none}
.entry-joke-kicker{margin:0 0 6px;font-size:11.5px;font-weight:750;letter-spacing:.04em;
 text-transform:uppercase;color:var(--accent);
 text-shadow:0 1px 12px color-mix(in srgb,var(--bg) 92%,transparent)}
.entry-joke-words{margin:0;min-height:96px;font-size:15px;line-height:1.5;color:var(--ink);
 text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 92%,transparent),
             0 1px 3px color-mix(in srgb,var(--bg) 70%,transparent)}
.entry-joke-words>span,.entry-joke-words>strong{display:block}
.entry-joke-words>strong{margin-top:7px;font-weight:650}

.entry-joker-sparki{display:grid;justify-items:center;gap:6px;padding:0;border:0;
 background:none;box-shadow:none;cursor:pointer;font:inherit;min-height:44px}
.entry-joker-sparki .entry-sparki{margin:0}
.entry-joker-hint{font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap;
 transition:color .18s ease}
.entry-joker-sparki:hover .entry-joker-hint{color:var(--accent)}
.entry-joker-sparki:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:18px}
@media(prefers-reduced-motion:reduce){.entry-joker-hint{transition:none}}
@media(max-width:800px){
 .entry-joker{grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:12px}
 .entry-joke-words{min-height:84px;font-size:13.5px}
}

/* The joke's box keeps a steady height for the usual joke, so a new one does not move the page,
   and grows for a long one instead of cutting it off mid line (the Architect's screenshot, 24
   September 2026). */

/* ---- Sparki speaking, rather than a joke appearing.

        A different voice: ui-rounded is SF Rounded on Apple systems and the
        stack falls back through the friendliest thing each platform has. A
        system face on purpose -- this page's content policy has no font-src
        at all, so a webfont here would be blocked, and the marketing page's
        handwriting is DRAWN as outlines, which only works for four fixed
        sentences and not for 48 jokes drawn at random.

        And the timing is the joke. The setup arrives, then a beat, then the
        punchline -- which is how a person tells one, and why the punchline is
        a separate element rather than a second line of the same paragraph.
        Both replay on every new joke for free: the handler replaces the
        innerHTML, so these are new elements each time and the animations
        start again. ---- */
.entry-joke-words{font-family:ui-rounded,'SF Pro Rounded','Hiragino Maru Gothic ProN',
 'Varela Round','Trebuchet MS',system-ui,sans-serif;letter-spacing:.005em}
.entry-joke-words>span{animation:ws-joke-line .34s ease-out both}
.entry-joke-words>strong{animation:ws-joke-line .4s cubic-bezier(.34,1.4,.5,1) .62s both}
@keyframes ws-joke-line{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* the beat between them, so the pause reads as Sparki thinking rather than as
   the page having stopped */
.entry-joke-bubble::after{content:'';position:absolute;left:2px;bottom:6px;
 width:22px;height:6px;border-radius:999px;pointer-events:none;
 background:radial-gradient(circle 3px at 3px 3px,var(--muted) 96%,transparent),
            radial-gradient(circle 3px at 11px 3px,var(--muted) 96%,transparent),
            radial-gradient(circle 3px at 19px 3px,var(--muted) 96%,transparent);
 animation:ws-joke-thinking .62s ease-out both}
@keyframes ws-joke-thinking{0%{opacity:.75}70%{opacity:.75}100%{opacity:0}}

.entry-joker-sparki .entry-sparki.is-telling{animation:ws-joke-bob .62s ease-in-out}
@keyframes ws-joke-bob{0%,100%{transform:translateY(0) rotate(0)}
 30%{transform:translateY(-6px) rotate(-3deg)}65%{transform:translateY(-2px) rotate(2deg)}}

@media(prefers-reduced-motion:reduce){
 .entry-joke-words>span,.entry-joke-words>strong,
 .entry-joker-sparki .entry-sparki.is-telling{animation:none}
 .entry-joke-bubble::after{display:none}
}

/* Sparki's own row in the grid: under the heading on a desktop, under the card
   on a phone. The areas have to be declared for both, because the concierge
   grid names every slot it uses. */
.entry-joker-area{grid-area:joke;min-width:0}
.entry-concierge:has(.entry-joker-area){grid-template-areas:"copy form" "joke form" "scene form" "peek form"}
@media(max-width:800px){
 .entry-concierge:has(.entry-joker-area){grid-template-areas:"copy" "form" "joke" "scene" "peek"}
 .entry-joker-area{margin-top:4px}
}

/* ---- The sign-in header, matched to the marketing one.

        Measured side by side at 1440x900 they were two different headers.
        The marketing page runs full bleed with 52px of air and no rule under
        it, and its destinations sit in a translucent pill bar with the switch
        and Sign in inside. This one was a 1360px block centred in the page
        with 32px of padding, a 1px line beneath it, and bare links with a
        12px-cornered Sign in. Same brand, same corner, nothing else shared.

        Both stray lines go: the rule under the header, and the border-top on
        the policy footer. Neither exists on the marketing page, and on a
        screen that is one card floating over a world they read as the seams
        of a document. ---- */
:root[data-entry] .account-header{max-width:none;margin:0;padding:14px 52px;
 border-bottom:0;align-items:center;gap:20px}
@media(max-width:800px){
 :root[data-entry] .account-header{padding:10px 16px;gap:10px}
}

/* Sparki laughing at his own joke. The bob was a polite nod; this is a laugh
   -- he rocks, and the star over his head swings a beat behind him, because a
   halo that moves with the head reads as a decal and one that lags reads as a
   thing that is his. */
.entry-sparki[data-show=joy] [data-f=joy]{animation:ws-sparki-laugh .78s cubic-bezier(.3,1.3,.5,1)}
.entry-sparki[data-show=joy] .entry-sparki-halo{animation:ws-halo-swing .78s cubic-bezier(.3,1.2,.5,1)}
@keyframes ws-sparki-laugh{
 0%{transform:translateY(0) rotate(0) scale(1)}
 18%{transform:translateY(-9px) rotate(-6deg) scale(1.05)}
 40%{transform:translateY(-2px) rotate(5deg) scale(1.01)}
 62%{transform:translateY(-6px) rotate(-4deg) scale(1.04)}
 82%{transform:translateY(-1px) rotate(2deg) scale(1)}
 100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes ws-halo-swing{
 0%{transform:translateY(0) rotate(0)}
 26%{transform:translateY(-7px) rotate(-11deg)}
 52%{transform:translateY(-3px) rotate(9deg)}
 78%{transform:translateY(-5px) rotate(-5deg)}
 100%{transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:reduce){
 .entry-sparki[data-show=joy] [data-f=joy],
 .entry-sparki[data-show=joy] .entry-sparki-halo{animation:none}}

/* Two fields that belong together, side by side. The password hint that
   passwordFields() emits after its pair spans the row, because it is about
   both of them. */
.entry-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;min-width:0}
.entry-pair>label{min-width:0}
.entry-pair>.small,.entry-pair>p{grid-column:1/-1;margin:0}
@media(max-width:620px){.entry-pair{grid-template-columns:1fr}}

/* The setup card carries six fields where the sign-in carries two, so it gets
   its own trim. data-entry names the page, which is what makes this sayable
   without reaching for the URL in a stylesheet. */
@media(min-width:801px){
 :root[data-entry=parents] .entry-signin-card #setup{gap:10px;margin-top:14px}
 /* .account-card details carries a border-top and 16px above it, which is
    right for a disclosure at the foot of a card and wrong for one standing
    between two fields of a form -- there it draws a rule across the middle of
    the thing you are filling in. The 44px summary target stays. */
 :root[data-entry=parents] .setup-key-help{margin:0;border-top:0;padding-top:0}
 :root[data-entry=parents] .entry-signin-card{padding:24px 26px}
 :root[data-entry=parents] main:has(.entry-concierge){padding-bottom:10px}
}

/* What each door actually is. The title and one line left the card thin and
   the choice guessy -- these are the things the account does, so the person
   picking can pick rather than guess. */
.entry-role{gap:7px}
.entry-role ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}
.entry-role li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.entry-role li::before{content:'';position:absolute;left:2px;top:.55em;width:5px;height:5px;
 border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,transparent)}
.entry-role:hover li::before{background:var(--accent)}

/* and what the administrator is taking on, beside the form that creates them */
.entry-holds{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;max-width:42ch}
.entry-holds li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.entry-holds li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;
 border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 75%,transparent)}
@media(max-width:800px){.entry-holds{margin-top:12px;gap:7px}.entry-holds li{font-size:13px}}

/* The username block stacked label, hint and the ideas button on three rows,
   207px of a 531px card. The hint and the button belong on one line: the hint
   says what makes a good name and the button offers some, so they are one
   thought, and the parent form goes from 40px past the viewport to inside it. */
:root[data-entry] .username-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;
 gap:8px 12px;align-items:center}
:root[data-entry] .username-choice>label{grid-column:1/-1}
:root[data-entry] .username-choice>p{margin:0}
:root[data-entry] .username-choice>button{margin:0;white-space:nowrap;min-height:44px}
:root[data-entry] .username-choice>.username-options,
:root[data-entry] .username-choice>p:last-child{grid-column:1/-1}
@media(max-width:520px){
 :root[data-entry] .username-choice{grid-template-columns:1fr}
 /* Stacked under its hint, the ideas button stands clear of it (design/layout-spacing-standard.md). */
 :root[data-entry] .username-choice>button{justify-self:start;margin-top:var(--space-1)}
}

/* The answer for the people who cannot use this page, said before the form
   rather than under it. */
.entry-recovery-branch{padding:12px 14px;border-radius:14px;
 background:color-mix(in srgb,var(--accent) 10%,transparent);
 border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.entry-recovery-branch strong{color:var(--accent)}
.entry-signin-card code{font-size:.92em;padding:1px 6px;border-radius:6px;
 background:color-mix(in srgb,var(--ink) 10%,transparent);white-space:nowrap}

/* An optional field says so on its own label, rather than leaving the person
   to infer it from the absence of an asterisk nobody else uses. */
.field-optional{align-self:flex-start;justify-self:start;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;
 font-weight:650;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle;
 color:var(--muted);background:color-mix(in srgb,var(--soft) 70%,transparent);
 border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}

/* ---- The belt: what is waiting, and the door to each of them.

        One line across the top of the administrator's shell. Counts come from
        queues the platform already keeps; nothing here is new state. An item
        with a count of zero is not rendered at all rather than greyed out,
        because a belt that always shows the same rows is one people stop
        reading -- and when nothing is waiting it says so in one quiet line
        instead of disappearing, so its absence is never ambiguous. ---- */
/* The belt is a bell and a panel now, and both live in admin-portal.css beside
   the header that holds them. What was here styled a horizontal row of cards
   across the top of the page, which no longer exists, and its grid areas were
   quietly landing every span of the new row in the same cell. */

/* ---- Rows reserved for things that are not on screen.

        entry-peek is hidden below 1320px of viewport height and entry-scene
        below 1120px, which is every phone and most laptops. A display:none
        grid item drops out, but the row named for it in grid-template-areas
        does not, and row-gap keeps paying for it: 48px of nothing between
        Sparki and the footer on a phone, 32px on a laptop.

        The areas now follow the same two heights that hide the items. ---- */
@media(max-height:1320px){
 .entry-concierge{grid-template-areas:"copy form" "scene form"}
 .entry-concierge:has(.entry-joke),.entry-concierge:has(.entry-joker-area){
  grid-template-areas:"copy form" "joke form" "scene form"}
}
@media(max-height:1120px){
 .entry-concierge{grid-template-areas:"copy form"}
 .entry-concierge:has(.entry-joke),.entry-concierge:has(.entry-joker-area){
  grid-template-areas:"copy form" "joke form"}
}
@media(max-width:800px) and (max-height:1320px){
 .entry-concierge{grid-template-areas:"copy" "form" "scene"}
 .entry-concierge:has(.entry-joke),.entry-concierge:has(.entry-joker-area){
  grid-template-areas:"copy" "form" "joke" "scene"}
}
@media(max-width:800px) and (max-height:1120px){
 .entry-concierge{grid-template-areas:"copy" "form"}
 .entry-concierge:has(.entry-joke),.entry-concierge:has(.entry-joker-area){
  grid-template-areas:"copy" "form" "joke"}
}
/* the guided flow hides both by width alone, whatever the height */
@media(max-width:800px){
 .entry-guided.entry-concierge{grid-template-areas:"copy" "form"}
 .entry-guided.entry-concierge:has(.entry-joke),
 .entry-guided.entry-concierge:has(.entry-joker-area){
  grid-template-areas:"copy" "form" "joke"}
}
/* and nothing follows the policy footer, so its trailing margin is just fall */
@media(max-width:800px){
 :root[data-entry] footer.policy-links{margin-bottom:10px}
}

/* ---- The belt, as a list.

        Each notice sized itself to its own sentence, so five of them made five
        different right edges down the side of a phone: 283, 295, 221, 256, 267.
        Flex fixed the edges and broke the other end: a fifth notice alone on
        the second row grew to the full 1144px, one card the width of the page.

        A grid of auto-fill tracks keeps the empty columns, so the last notice
        stays the width of a notice, and one column is what a phone gets. ---- */
.attention-belt{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
 align-items:stretch;gap:8px}
.attention-belt[data-quiet=true]{display:flex}

@media(max-width:800px){
 .attention-belt{grid-template-columns:minmax(0,1fr)}
}

/* ---- A parent account, by request. The trap for form-filling robots sits out
        of sight and out of the tab order; the notice reads as part of the form,
        because ticking that it was read is. ---- */
.request-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* The notice, as one row that opens. Seven paragraphs printed into the form put
   the send button below the fold, which is the opposite of reading carefully:
   people scrolled past all of it to find the button. */
.request-agree{display:grid;gap:11px;margin:4px 0 2px}
.request-disclosure{border:1px solid var(--line);border-radius:14px;overflow:hidden;
 background:color-mix(in srgb,var(--soft) 45%,transparent)}
.request-disclosure>summary{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;
 list-style:none;min-height:52px}
.request-disclosure>summary::-webkit-details-marker{display:none}
.request-disclosure>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.request-disclosure-mark{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
 background:var(--paper);color:var(--accent);border:1px solid var(--line)}
.request-disclosure-copy{display:grid;gap:2px;min-width:0;flex:1}
.request-disclosure-copy strong{font-size:13.5px}
.request-disclosure-copy small{font-size:11.5px;color:var(--muted);line-height:1.45}
.request-disclosure-more{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
 color:var(--accent)}
.request-disclosure-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
 transform:rotate(45deg) translate(-2px,-2px)}
.request-disclosure[open] .request-disclosure-more{color:var(--muted)}
.request-disclosure[open] .request-disclosure-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.request-disclosure>ol{margin:0;padding:2px 17px 15px 34px;display:grid;gap:9px;max-height:210px;overflow:auto;
 border-top:1px solid var(--line)}
.request-disclosure>ol li{font-size:12.5px;line-height:1.55}
.request-agree>.check{align-items:flex-start;gap:10px;font-size:13px;font-weight:650;line-height:1.45}
@media(prefers-reduced-motion:no-preference){.request-disclosure-chevron{transition:transform .18s ease}}
.request-reason{display:grid;gap:6px;margin:14px 0}
.request-decisions{margin:0;padding-left:18px;display:grid;gap:6px}
.request-code-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,.7fr) auto;gap:10px;align-items:end;margin:10px 0}
@media(max-width:700px){.request-code-form{grid-template-columns:1fr}}
.request-new-code{padding:12px 14px;border-radius:14px;border:1px solid var(--accent);background:color-mix(in srgb,var(--soft) 60%,transparent)}
.request-new-code code{font-size:17px;letter-spacing:.06em}
.list-more{display:block;margin:14px auto 0;}

/* The theme picker: each swatch wears the theme it offers, so the choice is the
   thing itself rather than a label. data-preview-theme carries that theme's
   tokens (build_playground.theme_palette_css). */
.appearance-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin-top:14px}
.appearance-choice button{display:grid;justify-items:center;gap:8px;padding:12px 10px;border-radius:16px;font:inherit;font-size:13px;font-weight:650;
 cursor:pointer;background:var(--paper);color:var(--ink);border:1px solid var(--line);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.appearance-choice button span{display:block;width:100%;height:30px;border-radius:11px;border:1px solid var(--line);
 background:linear-gradient(135deg,var(--accent) 0 46%,var(--soft) 46% 100%)}
.appearance-choice button:hover{transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--ink) 9%,transparent)}
.appearance-choice button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.appearance-choice button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Nothing but the loading screen, while it is the loading screen. */
html[data-booting] .policy-links{display:none}

/* ---- The door, as one screen. ----
   Signing in and choosing a way in were two halves behind a switcher, so a
   visitor had to answer "which of these am I" before the page would show them
   anything. Both are on the card now, side by side, and the card is wider to
   pay for it. Everything else that lives here is a form in its own right and
   keeps the single column it had. */
/* The duo layout has to beat .entry-concierge:has(.entry-joker-area), which is
   more specific than a single class, so it names both. */
.entry-concierge.entry-duo,.entry-concierge.entry-duo:has(.entry-joker-area){
 grid-template-columns:minmax(300px,.85fr) minmax(560px,1.2fr);
 grid-template-areas:"copy form";
 column-gap:clamp(28px,3.5vw,60px);align-items:start}

.entry-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* A chosen flow takes the whole card. A parent form in half a card was a column
   of pairs nobody could see the end of, and the sign-in beside it had nothing
   to do while somebody typed. The way back is one line under the form. */
.entry-pane-only{border-left:0;background:transparent;padding:clamp(20px,2.2vw,28px);gap:10px}
.entry-pane-only .entry-back-row{display:flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;margin-top:6px}
.entry-concierge.entry-duo:has(.entry-pane-only){grid-template-columns:minmax(260px,.65fr) minmax(600px,1.45fr)}
.entry-pane{padding:clamp(22px,2.4vw,30px);min-width:0;display:grid;gap:12px;align-content:start}
.entry-pane h2{margin:0}
.entry-pane>.small{margin:0}
.entry-pane-new{border-left:1px solid var(--line)}
.entry-duo .entry-local-note{margin:0;padding:12px clamp(22px,2.4vw,30px);border-top:1px solid var(--line);font-size:12px}
.entry-door-list{display:grid;gap:9px}
.entry-door{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
 padding:13px 15px;border-radius:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
 font:inherit;text-align:left;text-decoration:none;cursor:pointer;min-height:44px;box-shadow:none}
.entry-door-copy{display:grid;gap:2px;min-width:0;flex:1}
.entry-door strong{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.entry-door em{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted)}

.entry-door:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.entry-door:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.entry-door-quiet{border-style:dashed}
.entry-promises{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;text-align:left}
.entry-promises li{display:flex;gap:13px;align-items:flex-start}
.entry-promise-mark{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.entry-promise-mark svg{width:18px;height:18px}
.entry-promises strong{display:block;font-size:14.5px;font-weight:700}
.entry-promises em{font-style:normal;display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:2px}
@media(max-width:1180px){
 .entry-concierge.entry-duo,.entry-concierge.entry-duo:has(.entry-joker-area){
  grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "copy";row-gap:22px}
 .entry-panes{grid-template-columns:1fr}
 .entry-pane-new{border-left:0;border-top:1px solid var(--line)}
 .entry-duo .entry-copy{text-align:left}
}
@media(max-width:620px){.entry-promises{gap:11px}.entry-promise-mark{width:30px;height:30px}}

/* ---- The door, with its lights on. ----
   The card carries a soft ring of its own accent so it reads as the lit thing on
   the page, each way in has a mark in its own hue, and the fields say what they
   are before you read their labels. All of it is drawn from the palette tokens,
   so a theme change carries the glow with it. */
/* ---- One surface, lit from outside. ----
   Two nested surfaces and a backdrop filter made a muddy slab: the glass was
   sampling its own glow, and a frame inside a card left two rounded corners
   that never quite agreed. The card is one opaque surface with a thin bright
   edge and a soft accent glow around it, which is all the neon was ever for. */
body .entry-concierge.entry-duo>.entry-signin-card{
 position:relative;padding:0;overflow:hidden;border-radius:24px;
 background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
 border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
 box-shadow:
  inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent),
  0 0 22px color-mix(in srgb,var(--accent) 26%,transparent),
  0 0 60px color-mix(in srgb,var(--accent) 14%,transparent),
  0 24px 50px -30px #0b152cbf}
@media(prefers-reduced-motion:no-preference){
 body .entry-concierge.entry-duo>.entry-signin-card{transition:box-shadow .4s ease}}

.entry-field{display:grid;gap:7px;position:relative}
.entry-field>span:first-child{font-size:12px;font-weight:650;color:var(--muted)}
.entry-field-box{position:relative;display:block}
.entry-field-mark{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;
 color:color-mix(in srgb,var(--accent) 78%,var(--muted));pointer-events:none}
.entry-field-box input{width:100%;padding-left:44px}
.entry-field-box input:focus{border-color:var(--accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.entry-signin-button{width:100%;justify-self:stretch;min-height:50px;font-size:15px;letter-spacing:-.01em;
 background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#7b5cff));
 border:0;color:var(--on-accent);
 box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.entry-signin-button:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 52%,transparent);filter:brightness(1.05)}
.entry-door{position:relative;gap:13px}
.entry-door-mark{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--door) 18%,transparent);color:var(--door)}
.entry-door-mark svg{width:19px;height:19px}
.entry-door[data-tone=student]{--door:#3fb27f}
.entry-door[data-tone=parent]{--door:#8a6cf6}
.entry-door[data-tone=request]{--door:#3d86e0}
.entry-door[data-tone=school]{--door:#d99a2b}
.entry-door:hover{border-color:color-mix(in srgb,var(--door,var(--accent)) 60%,transparent);
 background:color-mix(in srgb,var(--door,var(--accent)) 8%,var(--paper))}
.entry-door-go{font-size:20px;color:var(--muted);flex:none}
.entry-door:hover .entry-door-go{color:var(--door,var(--accent))}
.entry-promises li:nth-child(1) .entry-promise-mark{background:color-mix(in srgb,#8a6cf6 16%,transparent);color:#8a6cf6}
.entry-promises li:nth-child(2) .entry-promise-mark{background:color-mix(in srgb,#3fb27f 16%,transparent);color:#3fb27f}
.entry-promises li:nth-child(3) .entry-promise-mark{background:color-mix(in srgb,#d99a2b 18%,transparent);color:#d99a2b}
.entry-promises li:nth-child(4) .entry-promise-mark{background:color-mix(in srgb,#3d86e0 16%,transparent);color:#3d86e0}
@media(prefers-reduced-motion:no-preference){
 .entry-door,.entry-signin-button,.entry-field-box input{transition:border-color .16s,background-color .16s,box-shadow .16s,filter .16s}
}

/* A registration form in two columns, so it ends where a screen does. */
.entry-form-grid{gap:12px}
.entry-form-grid .entry-pair{align-items:start}
.entry-form-note{margin:0!important;font-size:12px;line-height:1.5}
.entry-pane-only .username-choice{display:grid;gap:7px}
.entry-pane-only .username-choice>.small{margin:0;font-size:11.5px}
.entry-pane-only .username-choice button[data-username-suggest]{justify-self:start;min-height:38px;padding:7px 12px;font-size:12.5px}
.entry-pane-only .entry-form-grid>button.primary{justify-self:start;min-height:48px;margin-top:2px}
@media(max-width:900px){.entry-pane-only .entry-pair{grid-template-columns:1fr}}

/* The two ways out of a flow, as controls rather than two underlined phrases
   trailing off the bottom of the card. */
.entry-flow-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
 margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.entry-flow-foot .small{margin:0;display:flex;align-items:center;gap:6px}
.entry-pane-only .entry-back,.entry-flow-foot .entry-back{
 display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:10px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:650;
 text-decoration:none;cursor:pointer;box-shadow:none}
.entry-pane-only .entry-back:hover,.entry-flow-foot .entry-back:hover{
 border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
.entry-flow-foot .entry-back-strong{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.entry-flow-foot .entry-back:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Sparki in the same box as the words, a size smaller so both boxes start at
   the same line. */
.entry-duo .entry-joker-area{margin:0;grid-area:auto}
.entry-duo .entry-joker{gap:10px}
.entry-duo .entry-sparki,.entry-duo .entry-joker-sparki .sparki-character{width:120px;height:120px}
.entry-duo .entry-joke-words{font-size:14px;line-height:1.55}
.entry-duo .entry-joke-kicker{font-size:10.5px}

/* ---- The door fits a screen. ----
   Measured at 1440x820, which is a 13-inch laptop with a browser chrome on it:
   sign-in was 52px over and the learner flow 117px. Every number below is a few
   pixels taken from somewhere that had them to spare. */
body:has(.entry-duo) main{margin-top:10px;padding-top:6px;padding-bottom:8px}
.entry-duo .entry-copy{display:grid;gap:11px;align-content:start;padding:clamp(14px,1.6vw,22px)}
.entry-duo .entry-copy h1{margin-bottom:2px}
.entry-duo .entry-promises{gap:11px;margin-top:12px}
.entry-duo .entry-promises em{line-height:1.45}
.entry-duo .entry-sparki,.entry-duo .entry-joker-sparki .sparki-character{width:104px;height:104px}
.entry-duo .entry-pane{padding:clamp(18px,2vw,26px);gap:11px}
.entry-duo .entry-pane h2{line-height:1.1}
.entry-duo .entry-door{padding:11px 14px}
.entry-duo .entry-door em{line-height:1.4}
.entry-duo .welcome-steps{margin-bottom:12px}
.entry-duo .entry-pane-only{padding:clamp(16px,1.8vw,24px)}
.entry-duo .entry-local-note{padding:10px clamp(18px,2vw,26px);font-size:11.5px}
.entry-duo .entry-pane-only{align-content:start;gap:9px}
.entry-duo .entry-pane-only form{gap:13px}
.entry-duo .entry-pane-only h2{margin-bottom:0}
.entry-duo .welcome-card>p:first-of-type{margin-top:2px}

/* A step of a flow can be taller than a short laptop screen, and trimming
   padding only buys so much. The pane takes what the viewport has and scrolls
   inside itself if a step needs more, so the card always ends on the screen and
   the page behind it never moves. */
@media(min-height:600px){
 .entry-duo .entry-pane-only{max-height:calc(100vh - 250px);overflow:auto;
  scrollbar-width:thin;scrollbar-gutter:stable}
}
/* The hint under a door: the extra sentence that only some doors need, kept out
   of the line the others give one sentence to. */
.entry-door-hint{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;
 color:var(--door,var(--accent));opacity:.9}
.entry-door-quiet .entry-door-hint{color:var(--muted);opacity:1}

/* A guided flow is a form, and the column beside it is a heading and one line
   of copy. Splitting the page down the middle gave the form 560px and the
   sentence 900, which is how "Let's start with you." came out one word per
   line on a 2000px screen. */
.entry-guided.entry-concierge{grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);align-items:start}
.entry-guided .entry-copy{position:sticky;top:26px}
@media(max-width:800px){
 .entry-guided.entry-concierge{grid-template-columns:minmax(0,1fr)}
 .entry-guided .entry-copy{position:static}
}

/* The account id, where the one command that needs it can find it. */
.member-account-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
 padding-top:14px;border-top:1px solid var(--line)}
.member-account-id .small{margin:0;font-weight:650}
.member-account-id code{font-size:12.5px;padding:4px 8px;border-radius:7px;background:var(--soft);
 overflow-wrap:anywhere;user-select:all}
.member-account-id button{min-height:34px;padding:5px 12px;font-size:12.5px}

/* Opening a new space with the grown-up's code (app/accounts.js activationView). */
.activation-card form{display:grid;gap:14px;margin:6px 0 8px}
.activation-code{font-size:30px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:14px 12px}
.activation-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.activation-help summary{cursor:pointer;font-weight:650}
.member-activation{margin:0 0 20px;border-color:color-mix(in srgb,var(--caution-ink) 30%,var(--line));background:var(--caution-bg)}
.member-activation h2{margin:4px 0 8px}
.member-activate{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0 4px}
.member-activate label{flex:1 1 320px}

/* A short laptop window: each door keeps its name and its line, and its second note steps aside, so
   sign-in and its doors stand whole between the bar and the footer (the Architect, 24 September 2026:
   one frame, the footer in one place, on every page). */
@media (min-width:801px) and (max-height:820px){:root[data-entry] .entry-door-hint{display:none}}
/* Shorter still, sign-in and recovery tighten so each stands whole in the frame: Sparki's joke steps
   aside beside sign-in (the promises stay), the doors and panes draw in, and recovery puts its
   username beside its key. */
@media (min-width:801px) and (max-height:780px){
 :root[data-entry] .entry-duo .entry-joker-area{display:none}
 :root[data-entry] .entry-door{padding-block:8px}
 :root[data-entry] .entry-door-list{gap:7px}
 :root[data-entry] .entry-duo .entry-local-note{padding-block:8px}
 :root[data-entry=recover] .entry-signin-card form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;margin-block:8px 10px}
 :root[data-entry=recover] .entry-signin-card form>:not(label){grid-column:1/-1}
 :root[data-entry=recover] .entry-recovery-branch{margin-block:10px;padding-block:9px}
 :root[data-entry=recover] .entry-signin-card>p{margin-block:10px}
 :root[data-entry] .entry-duo .entry-pane>h2+p.small{display:none}
 :root[data-entry] .entry-duo .entry-pane{padding-block:16px}
 :root[data-entry=recover] .entry-copy .entry-sparki{display:none}
 :root[data-entry=recover] .entry-concierge>.entry-signin-card{padding-block:14px}
 :root[data-entry=recover] .entry-signin-card form{row-gap:7px}
 :root[data-entry=recover] .entry-signin-card>p,:root[data-entry=recover] .entry-recovery-branch{font-size:13px;line-height:1.5}
}

/* The sign-in pages' own boxes and discs wear the page's colours, never the browser's white squares,
   as the journeys' do (the audit, 24 September 2026). */
:root[data-entry] .entry-concierge :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}
:root[data-mode=dark][data-entry] .entry-concierge :is(input[type=checkbox],input[type=radio]){color-scheme:dark}
/* Grown-ups on a learner's page (memberGrownUps, 28 September 2026): the card stands clear of the cards below; each address is a row
   with its action at the end; the forms sit side by side, each its own box, words before the button; the answer about
   practice letters is a box the full row wide, its field as wide as the address fields above it. */
.member-grownups-card{margin-bottom:var(--gap-panels)}
.member-addresses{list-style:none;padding:0;margin:var(--gap-items) 0 0;display:grid;gap:var(--gap-items)}
.member-addresses li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-items) var(--gap-cards);padding:var(--pad-row) var(--pad-box);border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.member-addresses li[data-receives="true"]{border-color:var(--accent)}
.member-addresses li>div{display:grid;gap:var(--space-1);min-width:0}
.member-addresses li strong{overflow-wrap:anywhere}
.member-addresses .member-address-here{align-self:center}
.member-address-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap-cards);margin-top:var(--gap-panels);container:grownup-forms/inline-size}
.member-address-form{display:grid;align-content:start;padding:var(--pad-box);border:1px solid var(--line);border-radius:16px;margin:0}
.member-address-form label{margin:0}.member-address-form p{margin:0}.member-address-form button{justify-self:start}
.member-letters-block{grid-column:1/-1}
/* Two columns from 616px (two 300px boxes and the gap): the field then ends where the first box's field ends, half the
   row less that box's padding, its border and half the gap. */
@container grownup-forms (min-width:616px){.member-letters-block label{max-width:calc(50% - var(--pad-box) - var(--gap-cards) / 2 - 1px)}}

/* Shared by the account pages (scripts/hosted_assets.py) and the learner space
   (scripts/build_playground.py): one account menu, the same wherever a person is.
   Add a rule here, not in either page's own stylesheet, or it governs only one. */
/* The account menu: the person, what they can change about themselves, and the
   way out. One control, wherever they signed in from. */
.account-menu{position:relative}
.account-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line);
 background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.account-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.account-chip svg{width:14px;height:14px;opacity:.7}
.account-chip-face{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--accent);font-weight:800;font-size:13px}
.account-chip-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:70;width:min(92vw,300px);display:grid;gap:2px;padding:10px;
 border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 18%,transparent)}
.account-menu-panel[hidden]{display:none}
.account-menu-who{display:grid;gap:2px;margin:0 0 6px;padding:8px 12px 10px;border-bottom:1px solid var(--line)}
.account-menu-who strong{font-size:14px}
.account-menu-who span{font-size:12px;color:var(--muted)}
.account-menu-panel a,.account-menu-item{display:grid;gap:1px;padding:9px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.account-menu-item{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer;min-height:0}
.account-menu-panel a:hover,.account-menu-item:hover{background:var(--soft)}
.account-menu-panel a strong,.account-menu-item strong{font-size:13px;font-weight:650}
.account-menu-panel a span,.account-menu-item span{font-size:12px;color:var(--muted)}
.account-menu-out{margin-top:6px;width:100%;min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper);
 color:var(--error-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.account-menu-out:hover{background:color-mix(in srgb,var(--error-ink) 8%,var(--paper))}
/* The menu opens over the page, whatever the page draws. The site bar is its own
   layer (its backdrop blur makes it one), so the panel's z-index only counted
   inside it, and the tilted tiles on Schools & family painted over the open menu
   (24 September 2026). The header itself now sits above the page. */
.account-header{position:relative;z-index:40}
/* The learner space's top bar is its own layer at z-index 5, and the subject
   filters under it stick at 12, so the filters painted over Mia's open menu
   (The Architect, 24 September 2026: "the same that happen in the parent side").
   The bar sits above the filters; and while a menu is open, the bar it is in
   rises above everything a page draws, Sparki and the dock included, then goes
   back to its place when the menu closes. */
header.app-header{z-index:13}
:is(.app-header,.account-header):has(.account-menu-panel:not([hidden])){z-index:60}

/* The one guided journey. The family concierge got here first and the shape it
   found is the right one, so this is that shape, named so anything can use it:
   a rail of steps, one question group at a time, what you have chosen kept in
   view, and a receipt at the end instead of a message that vanishes. */
/* The journey is laid out against ITS OWN width, not the window's. It sits in a
   full management page in the portal and in a half-width card beside the hero
   on the entrance, and a viewport query cannot tell those apart: on a 2000px
   screen the entrance card is 560px wide, every desktop rule applied, and the
   heading came out one word per line. */
.jy-workspace{border:1px solid var(--line);border-radius:22px;background:var(--paper);overflow:hidden;
 container-type:inline-size;container-name:journey}
.jy-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;
 border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 color:var(--muted)}
.jy-top button{font-size:12px;background:transparent;box-shadow:none;border:0;min-height:40px;color:var(--accent);
 font-weight:650;cursor:pointer;text-transform:none;letter-spacing:0}
.jy-steps{list-style:none;display:flex;gap:22px;margin:0;padding:22px 26px;border-bottom:1px solid var(--line)}
.jy-steps li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--muted);flex:1;font-weight:650;
 min-width:0}
.jy-steps span{overflow-wrap:anywhere}
.jy-steps b{display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid var(--line);
 border-radius:50%;font-size:12px}
.jy-steps [aria-current=step]{color:var(--accent)}
.jy-steps [aria-current=step] b{background:var(--accent);border-color:var(--accent);color:var(--on-accent,var(--paper));
 box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.jy-steps [data-complete=true] b{color:var(--accent);background:var(--soft)}

.jy-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:34px;padding:30px 26px}
.jy-main{min-width:0}
.jy-main h2{font-size:clamp(22px,2.6vw,30px);line-height:1.2;max-width:26ch;margin:6px 0 10px}
.jy-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.jy-lead{font-size:14px;max-width:62ch;margin:0 0 20px}
.jy-main form{display:grid;gap:18px;margin:0}
.jy-main form label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted);min-width:0}
.jy-main form .small{margin:0;font-weight:400}
/* A tick and its sentence belong on one line. The grid above would stack them. */
.jy-main form label.check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;
 color:var(--ink);line-height:1.45}
.jy-main form label.check input{width:18px;min-height:18px;margin-top:1px;flex:none}
.jy-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.jy-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.jy-actions .primary{min-height:46px}
.jy-actions>button[data-journey-back]{order:-1}
.jy-error:not(:empty){margin:0;border-left:3px solid var(--accent);padding:12px 14px;background:var(--soft);
 font-size:13px;border-radius:0 9px 9px 0}
.jy-error:empty{display:none}

.jy-summary{align-self:start;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:20px;
 font-size:13px;min-width:0}
.jy-summary h3{margin:0 0 8px;font-size:14px}
.jy-summary p{font-size:12.5px;line-height:1.6;margin:0 0 8px}
.jy-summary p:last-child{margin-bottom:0}
.jy-summary dl{margin:0;display:grid;gap:11px}
.jy-summary dt{font-size:11px;color:var(--muted);font-weight:650}
.jy-summary dd{margin:2px 0 0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.jy-summary-toggle{display:none}
.jy-draft-note{border-top:1px solid var(--line);padding:16px 26px;margin:0;font-size:11px;line-height:1.6;
 color:var(--muted);max-width:none}

.jy-done{border:0;background:transparent}
.jy-receipt{padding:38px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.jy-receipt h2{font-size:clamp(24px,3vw,32px);line-height:1.25;margin:0 0 12px}
.jy-receipt>p{max-width:60ch;font-size:14px}
.jy-seal{display:grid;place-items:center;width:52px;height:52px;background:var(--soft);color:var(--accent);
 border:1px solid var(--line);border-radius:18px;margin-bottom:22px;font-size:24px}
.jy-next{list-style:none;margin:26px 0;padding:0;display:grid;gap:0}
.jy-next li{border-left:2px solid var(--line);padding:0 0 22px 20px;position:relative;display:grid;gap:6px;
 font-size:14px}
.jy-next li:before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;
 background:var(--accent)}
.jy-next li:last-child{padding-bottom:0;border-color:transparent}
.jy-next span{font-size:13px;color:var(--muted);line-height:1.6}
.jy-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;align-items:center;padding:18px 20px;
 border:1px solid var(--line);border-radius:14px;background:var(--bg);margin:20px 0}
.jy-card-face{font-size:38px;line-height:1;width:58px;height:58px;display:grid;place-items:center;border-radius:16px;
 background:var(--soft)}
.jy-card-who{display:grid;gap:3px;min-width:0}
.jy-card-who strong{font-size:16px;overflow-wrap:anywhere}
.jy-card-who span{font-size:12px;color:var(--muted)}
.jy-card-who code{font-size:13px;overflow-wrap:anywhere}
.jy-blank{color:var(--muted);font-weight:400;font-style:italic}

@container journey (max-width:900px){.jy-layout{grid-template-columns:minmax(0,1fr) 240px;gap:22px;padding:24px 20px}}
/* Below this the aside cannot hold a sentence, so it goes under the step it
   belongs to rather than squeezing the step into a column of single words. */
@container journey (max-width:760px){
 .jy-layout{grid-template-columns:1fr;padding:22px 20px;gap:20px}
 .jy-main h2{max-width:none}
 .jy-summary{order:2}
 .jy-steps{padding:16px 20px;gap:8px}
 .jy-steps li{flex-direction:column;align-items:flex-start;gap:6px;font-size:10.5px;line-height:1.3;
  hyphens:none;word-break:keep-all}
 .jy-steps b{width:26px;height:26px}
 .jy-top{padding:13px 20px}
 .jy-draft-note{padding:14px 20px}
 .jy-receipt{padding:26px}
}
@container journey (max-width:520px){
 .jy-pair{grid-template-columns:1fr}
 .jy-layout{padding:20px 16px;gap:18px}
 .jy-steps{padding:14px 16px;gap:6px}
 .jy-steps span{display:none}
 .jy-steps li{flex-direction:row;font-size:11px}
 .jy-steps li[aria-current=step] span{display:inline}
 .jy-top{padding:12px 16px}
 .jy-draft-note{padding:13px 16px}
 .jy-receipt{padding:20px}
 .jy-actions{display:grid;grid-template-columns:1fr}
 .jy-actions button{width:100%}
 .jy-actions .primary{grid-row:1}
 .jy-summary-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:0;
  padding:0;background:transparent;box-shadow:none;font-size:13.5px;color:var(--accent);min-height:44px;
  font-weight:650;cursor:pointer}
 .jy-summary-content{display:none}
 .jy-summary-toggle[aria-expanded=true]+.jy-summary-content{display:block;margin-top:18px}
 .jy-summary-toggle[aria-expanded=true] span{transform:rotate(180deg)}
}

/* What a review step shows: the answers, laid out so they can be checked at a
   glance rather than re-read out of the inputs that collected them. */
.jy-review{margin:0 0 4px;display:grid;gap:0}
.jy-review>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:13px 0;
 border-bottom:1px solid var(--line);font-size:14px}
.jy-review>div:first-child{padding-top:0}
.jy-review dt{color:var(--muted);font-size:12.5px}
.jy-review dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@container journey (max-width:640px){.jy-review>div{grid-template-columns:1fr;gap:5px}}

/* ---- The journeys' stage, and Sparki beside every step (guided-journey.js) ----------------
   The Architect, 24 September 2026, on the school application: "the page is to simple, dont see
   animated Sparki, background, colors, glow or neon box ... the website have some config, lets
   keep the standard". The standard is Canopy's (docs/canopy-design-package-2026-09-20.md): a deep
   night lit in Sparki's orange, violet and blue, premium glass on it, and Sparki himself. A
   journey that is a whole page (stage:true) stands on that sky; any journey gets the concierge. */

/* The world: the same plates the sign-in page stands on (accounts.css, body:has(.entry-concierge)),
   fixed behind the page so it fills the window however long the step is. The Architect, later the
   same day: "footer needs fix and aligments with other areas already configured". The journeys used
   a sky of their own, three blurred lights on a gradient, and its orange light pooled under the
   footer as a brown band; the site's own world replaces it. At night the same small sparks the
   home page drifts cross it. */
.jy-stage{position:relative;padding:clamp(8px,2vw,24px) 0 clamp(20px,4vw,48px)}
.jy-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
 background:#eaf1ff url("/assets/b71e73eaf765a87c887f4a7c081347cee16c6e6535b5f31a2b52f673d9bcdbf6.webp") center/cover no-repeat}
:root[data-mode=dark] .jy-sky{background:#101e34 url("/assets/582c701579c7a345897a67028c6e474a3c52f6dcb133538ef5f74ad29ebb3229.webp") center/cover no-repeat}
/* A landscape window gets the landscape renders, the sharpest there are, never the portrait crop
   stretched across it (the Architect: "looks like is blurry and low quality"). */
@media (min-aspect-ratio:23/20){
 .jy-sky{background-image:url("/assets/ffd2f2f7bc209ff2e1462380d8e8b3451b010f5a72ac2e724d74c746510c2669.webp")}
 :root[data-mode=dark] .jy-sky{background-image:url("/assets/28df3119294faf915c95af940a6f1c21b1a63f9318ad4f2a55325befddb7d6be.webp")}
}
.jy-sky>i{display:none}
.jy-sky>.jy-motes{display:block;position:absolute;inset:0;opacity:0}
:root[data-mode=dark] .jy-sky>.jy-motes{opacity:.7;background-image:
 radial-gradient(1.4px 1.4px at 12% 44%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 36% 76%,#ffe3a6 50%,transparent 52%),
 radial-gradient(1.6px 1.6px at 48% 8%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 72% 40%,#cfe0ff 50%,transparent 52%),
 radial-gradient(1.4px 1.4px at 84% 30%,#ffd79a 50%,transparent 52%),radial-gradient(1px 1px at 4% 78%,#fff 50%,transparent 52%),
 radial-gradient(1.6px 1.6px at 8% 22%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 18% 64%,#ffe3a6 50%,transparent 52%),
 radial-gradient(1.4px 1.4px at 31% 12%,#cfe0ff 50%,transparent 52%),radial-gradient(1px 1px at 42% 48%,#fff 50%,transparent 52%),
 radial-gradient(1.8px 1.8px at 57% 26%,#ffd79a 50%,transparent 52%),radial-gradient(1.2px 1.2px at 66% 72%,#fff 50%,transparent 52%),
 radial-gradient(1.4px 1.4px at 78% 14%,#d9ccff 50%,transparent 52%),radial-gradient(1px 1px at 88% 56%,#fff 50%,transparent 52%),
 radial-gradient(1.6px 1.6px at 94% 84%,#ffe3a6 50%,transparent 52%),radial-gradient(1.2px 1.2px at 24% 88%,#cfe0ff 50%,transparent 52%)}
@media (prefers-reduced-motion:no-preference){
 :root[data-mode=dark]:not([data-motion=off]) .jy-sky>.jy-motes{animation:jy-drift 38s ease-in-out infinite alternate}
}
@keyframes jy-drift{to{transform:translate3d(-2%,3%,0)}}
@media (forced-colors:active){.jy-sky{display:none}}
/* The page is its own stacking context, as the sign-in page's is, so the world paints over the
   page's own background colour and under everything on it. */
body:has(.jy-stage){position:relative;isolation:isolate}
/* No seams: the rule under the site's bar and the one over the policy links are gone here as they
   are on the sign-in page, where one card floats over a world. */
#account-main:has(.jy-stage){margin-bottom:0}

/* The glass, with a neon edge: a thin light of Sparki's colours running around it. */
@property --jy-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
.jy-glass{position:relative;border-color:transparent;
 background:color-mix(in srgb,var(--paper) 86%,transparent);
 -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
 box-shadow:0 40px 90px -52px rgba(24,43,72,.55),0 0 70px -34px rgba(138,108,246,.5),0 0 60px -36px rgba(246,165,58,.45)}
:root[data-mode=dark] .jy-glass{background:color-mix(in srgb,var(--paper) 80%,transparent);
 box-shadow:0 46px 100px -48px rgba(0,0,0,.85),0 0 90px -30px rgba(138,108,246,.55),0 0 70px -34px rgba(246,165,58,.5)}
.jy-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
 background:conic-gradient(from var(--jy-turn),#f6a53a,#ffd475 12%,#8a6cf6 30%,#3d86e0 52%,#8a6cf6 74%,#f6a53a);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.9}
@media (prefers-reduced-motion:no-preference){:root:not([data-motion=off]) .jy-glass::before{animation:jy-turn 14s linear infinite}}
@keyframes jy-turn{to{--jy-turn:360deg}}
.jy-glass .jy-top,.jy-glass .jy-steps{border-color:color-mix(in srgb,var(--line) 70%,transparent)}
/* The step you are on is lit the colour of Sparki's spark. */
.jy-glass .jy-steps [aria-current=step]{color:var(--ink)}
.jy-glass .jy-steps [aria-current=step] b{background:linear-gradient(135deg,#ffd475,#f6a53a);border-color:transparent;color:#3a1a05;
 box-shadow:0 0 0 4px rgba(246,165,58,.18),0 0 22px rgba(246,165,58,.55)}
.jy-glass .jy-steps [data-complete=true] b{background:color-mix(in srgb,#f6a53a 18%,var(--paper));color:#a8670a;border-color:transparent}
:root[data-mode=dark] .jy-glass .jy-steps [data-complete=true] b{color:#ffd475}
.jy-glass .jy-actions .primary{box-shadow:0 12px 30px -14px color-mix(in srgb,var(--accent) 80%,transparent)}
.jy-glass input,.jy-glass select,.jy-glass textarea{background:color-mix(in srgb,var(--paper) 70%,var(--bg))}

/* ---- Sparki, the concierge ---------------------------------------------------------------- */
.jy-layout.has-guide{grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"main guide" "main glance";
 grid-template-rows:auto 1fr;align-items:start}
.jy-layout.has-guide>.jy-main{grid-area:main}
.jy-layout.has-guide>.jy-concierge{grid-area:guide}
.jy-layout.has-guide>.jy-summary{grid-area:glance}
.jy-layout.has-guide.has-ask{grid-template-areas:"main guide" "main ask" "main glance";grid-template-rows:auto auto 1fr}
.jy-layout.has-guide>.jy-ask{grid-area:ask}
.jy-concierge{display:grid;gap:12px;min-width:0}
.jy-guide{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:start}
.jy-guide-face{width:78px;margin-top:-6px;filter:drop-shadow(0 10px 18px rgba(246,165,58,.35))}
.jy-spark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(#fff6dc,#f6a53a);color:#3a1a05;font-size:28px}
.jy-bubble{position:relative;display:grid;gap:6px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);
 background:color-mix(in srgb,var(--soft) 88%,transparent);font-size:13.5px;line-height:1.55;min-width:0}
.jy-bubble::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;rotate:45deg;
 background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.jy-bubble p{margin:0;max-width:none}
.jy-guide-name{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#a8670a}
:root[data-mode=dark] .jy-guide-name{color:#ffd475}
.jy-asked{font-weight:700;color:var(--ink)}
.jy-go{justify-self:start;display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:12px;background:var(--accent);color:var(--on-accent,#fff);font-size:13px;font-weight:700;text-decoration:none}
.jy-bubble .jy-link,:root[data-mode=dark] .jy-bubble .jy-link{justify-self:start;min-height:32px;padding:4px 0;border:0;background:none;box-shadow:none;color:var(--accent);font-size:12.5px;font-weight:650;cursor:pointer}
.jy-notice{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jy-notice li{position:relative;padding:9px 12px 9px 30px;border-radius:12px;font-size:12.5px;line-height:1.5;
 background:color-mix(in srgb,#f6a53a 13%,transparent);color:var(--ink)}
.jy-notice li::before{content:"✦";position:absolute;left:11px;top:9px;color:#d98a1c}
.jy-ask{display:grid;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 70%,transparent)}
/* The sign-in card spaces every form in it; the question box keeps only the layout's own gap. */
:root .jy-layout>form.jy-ask{margin:0}
.jy-ask-label{font-size:12px;font-weight:700;color:var(--muted)}
.jy-ask-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.jy-ask-row input{min-height:40px;font-size:13.5px}
.jy-ask-row button{min-height:40px;padding:6px 14px}
.jy-ask-chips{display:flex;flex-wrap:wrap;gap:6px}
.jy-ask-chips button{min-height:32px;padding:4px 11px;border-radius:14px;font-size:12px;font-weight:600;text-align:left}
.jy-ask-note{margin:0;font-size:11.5px;color:var(--muted)}
@container journey (max-width:900px){.jy-layout.has-guide{grid-template-columns:minmax(0,1fr) 260px}}
/* Narrow: Sparki speaks first, above the step, and what you have chosen follows it. */
@container journey (max-width:760px){
 .jy-layout.has-guide{grid-template-columns:1fr;grid-template-areas:"guide" "main" "glance";grid-template-rows:auto}
 .jy-layout.has-guide.has-ask{grid-template-areas:"guide" "main" "ask" "glance"}
 .jy-guide{grid-template-columns:56px minmax(0,1fr)}
 .jy-guide-face{width:56px}
}
/* Where the glass is too narrow for every step's name in one row (a tablet, or the family request
   beside its title on a laptop), the steps are numbers and only the one you are on is named, whole,
   beside its number (the audit, 24 September 2026: names squeezed between the numbers broke mid
   word, "learner / s", "Yo / u", or ran into each other). Wider, every name stays on one line. */
.jy-steps span{white-space:nowrap}
@container journey (max-width:900px){
 .jy-steps{gap:8px;align-items:center}
 .jy-steps li{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;font-size:12px}
 .jy-steps li span{display:none}
 .jy-steps li[aria-current=step]{flex:1 1 auto;min-width:0}
 .jy-steps li[aria-current=step] span{display:inline;overflow:hidden;text-overflow:ellipsis}
}

/* ---- What the audit found, at every size ---------------------------------------------------
   24 September 2026: 140 captures of the three journeys, reviewed independently. */
.jy-main h2,.jy-top span,.jy-receipt h2{text-wrap:balance}
.jy-lead,.jy-receipt>p,.jy-next span,.jy-bubble p{text-wrap:pretty}
#jy-title{scroll-margin-top:96px}
/* Examples read as examples, never as answers; a list with nothing chosen reads as unchosen. */
.jy-workspace ::placeholder{font-weight:400;color:var(--muted);opacity:.8}
.jy-workspace select:has(option[value=""]:checked){color:var(--muted);font-weight:500}
/* The controls on the glass: the chosen pill is lit, and the browser's white discs and squares go. */
.jy-workspace :is(input[type=radio],input[type=checkbox]){accent-color:var(--accent)}
:root[data-mode=dark] .jy-workspace :is(input[type=radio],input[type=checkbox]){color-scheme:dark}
.jy-workspace .jy-options label:has(input:checked){border-color:var(--accent);color:var(--ink);
 background:color-mix(in srgb,var(--accent) 16%,transparent)}
.jy-main form legend{padding:0;font-size:inherit;font-weight:650;color:var(--muted)}
.jy-workspace textarea{min-height:88px}
/* A step that refused says so: a warning with its mark, and every field still to fill in lit. */
.jy-error:not(:empty){display:flex;gap:10px;align-items:flex-start;max-width:none;padding:10px 14px;border-radius:10px;
 border:1px solid color-mix(in srgb,#f0a43a 55%,transparent);border-left-width:4px;color:var(--ink);font-weight:600;
 background:color-mix(in srgb,#f0a43a 13%,var(--paper))}
.jy-error:not(:empty)::before{content:"!";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
 background:#f0a43a;color:#2a1600;font-size:13px;font-weight:800;line-height:1}
form[data-checked] :is(input,select,textarea):invalid{border-color:#f0a43a;box-shadow:0 0 0 3px color-mix(in srgb,#f0a43a 24%,transparent)}
/* The question box's label is for screen readers at every size; its placeholder says what it is for. */
.jy-ask-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The receipt: the glass the steps stood in, one centred column, nothing boxed inside it. */
.jy-glass .jy-receipt{max-width:680px;margin:0 auto;padding:clamp(26px,3vw,40px);background:none;border:0;border-radius:0}
.jy-receipt-note{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.jy-receipt .jy-actions .button{justify-content:center;text-align:center}
@container journey (max-width:520px){.jy-receipt .jy-actions>*{flex:1 1 100%}}
/* The family request is the glass alone, never a card inside the sign-in page's card, at any width. */
.entry-concierge.entry-guided>.entry-signin-card:has(.jy-glass){padding:0;background:none;border:0;box-shadow:none;
 -webkit-backdrop-filter:none;backdrop-filter:none}
.entry-concierge.entry-guided:has(.jy-glass)>:is(.entry-scene,.entry-peek){display:none}
@media (max-width:800px){:root main:has(.entry-guided .jy-glass){max-width:none;padding-inline:clamp(12px,3vw,24px)}}
.jy-draft-note:has(a){display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px}
.jy-draft-note a{font-weight:650}
.jy-summary dl+p.small{margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.jy-glass .username-options:empty{display:none}
.jy-glass .request-disclosure{margin-top:2px;padding-top:0}
/* The city with its suggestions (school-journeys.js, places.py): a list of glass under the field, or
   over it when the glass has no room below, never cut off by the card's edge. */
.jy-combo{position:relative}
/* Its label reads like every other field's, though the field now sits in the suggestions' box. */
.jy-main form [data-school-city]>label{display:block;font-size:inherit}
.jy-suggest{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;
 max-height:244px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;
 background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 22px 44px -18px rgba(0,0,0,.55)}
.jy-suggest.opens-up{top:auto;bottom:calc(100% + 4px)}
.jy-suggest [role=option]{padding:8px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.jy-suggest [role=option]:hover,.jy-suggest [role=option][aria-selected=true]{background:var(--soft)}
.jy-suggest [role=option][aria-selected=true]{box-shadow:inset 0 0 0 1px var(--accent)}
.jy-suggest-credit{padding:6px 12px 2px;font-size:11.5px;font-weight:500;color:var(--muted)}
/* A code is short, so its field is too. */
.school-join .jy-main input[name=code]{max-width:420px}
.school-join .jy-main form>.small{max-width:52ch}
.school-journey .jy-grid{align-items:end}
/* The policy links are the one footer every page wears (site-footer.css); here only its place. */

/* ---- One frame for every page before sign-in --------------------------------------------------
   The Architect, 24 September 2026: "sign in footer location is not the same when you go into the
   parents registration ... some of them are centered correctly, and other ones are to high on the
   screen living a big dead space at the bottom, again we need standarization on the pages to have a
   premium simetry when navigation happen". Sign-in, the parent pages, registration, recovery, the
   family request and the school journeys share one frame on a laptop or larger: the site's bar at the
   top, the footer at the foot of the window in the same place on every page, and the page centred
   between them. A page taller than the window scrolls between the two, which never move. */
@media (min-width:801px){
 :root[data-entry] body:has(.entry-concierge){height:100svh;min-height:0}
 :root[data-entry] body:has(.entry-concierge)>main{overflow-y:auto;overscroll-behavior:contain;align-items:safe center}
 :root[data-entry] body:has(.entry-concierge)>footer.site-footer{flex:none;margin:8px auto 12px}
}

/* ---- One screen ------------------------------------------------------------------------------
   The Architect, 24 September 2026: "i want to fit the experience in the screen without scrolling
   or expanding", then "acomodate layout to cover proper screen size and resposiveness", "the school
   page have a dead area at the bottom of the page" and "big empty spaces". Wherever the journey is
   wide enough for Sparki's column, the page is one column the way the sign-in page is: the site's
   bar at the top, the policy links at the bottom, and the journey between, its edges on the bar's.
   The glass is as tall as its step, and stands where the journey's tallest step would stand in the
   middle of the world, the same place at every step, receipt included; past the whole height the
   step scrolls inside the glass, never the page. A phone or a tablet held upright scrolls. */
@media (min-width:761px){
 .jy-glass .jy-top,.jy-glass .jy-steps{min-width:0}
 .jy-glass .jy-steps b{width:26px;height:26px}
 .jy-glass .jy-main h2{font-size:clamp(22px,2.1vw,28px);margin:2px 0 6px}
 .jy-glass .jy-lead{margin:0 0 12px}
 .jy-glass .jy-main form{gap:12px}
 .jy-glass .jy-grid{gap:10px 14px}
 .jy-glass .jy-options{gap:8px}
 .jy-glass .jy-options label{padding:8px 12px}
 .jy-glass .jy-actions .primary{min-height:44px}
 .jy-glass .jy-concierge{gap:10px}
 .jy-glass .jy-guide{grid-template-columns:60px minmax(0,1fr);gap:10px}
 .jy-glass .jy-guide-face{width:60px;margin-top:-2px}
 .jy-glass .jy-bubble{padding:10px 12px;font-size:13px;line-height:1.5;gap:4px}
 .jy-glass .jy-notice li{padding:7px 10px 7px 28px}
 .jy-glass .jy-ask{padding:10px;gap:6px}
 .jy-glass .jy-ask-row input,.jy-glass .jy-ask-row button{min-height:38px}
 .jy-glass .jy-ask-chips button{min-height:28px;padding:3px 9px;font-size:11.5px}
 .jy-glass .jy-ask-note{font-size:12px;line-height:1.4}
 .jy-glass .jy-summary{padding:14px 16px}
 .jy-glass .jy-summary dl{gap:6px}
 .jy-glass .jy-summary dl>div{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:10px;align-items:baseline}
 .jy-glass .jy-summary dd{margin:0}
 .jy-glass .jy-summary h3{margin:0 0 6px}
 /* The journey's name and its steps share one row, the steps spread to the glass's edge, and the
    step itself takes what is left. */
 .jy-glass:not(.jy-done){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
 .jy-glass>.jy-top{grid-column:1;grid-row:1;padding:0 18px 0 24px;max-width:300px;line-height:1.35}
 .jy-glass>.jy-steps{grid-column:2;grid-row:1;padding:11px 24px;gap:14px 28px}
 .jy-glass>.jy-steps li{flex:0 1 auto}
 .jy-glass>.jy-steps:has(li:nth-child(3)){justify-content:space-between}
 .jy-glass>.jy-layout{grid-column:1/-1;grid-row:2;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 24px 22px;gap:26px}
 .jy-glass>.jy-draft-note{grid-column:1/-1;grid-row:3;padding:8px 24px;font-size:12px}
}
/* The family request. The sign-in page's column centres its card, so a taller step moved the whole
   card and the tallest ran past the window. On a screen wide enough for its title beside it, the
   title and the glass stand where the tallest step would stand centred, the glass as tall as its
   step and never taller than the window. Narrower, the journey takes the whole width below its
   title, where Sparki's column fits beside the step, and the page scrolls as a page. */
@media (min-width:801px) and (max-width:1180px){
 .entry-concierge.entry-guided:has(.jy-glass){grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form";row-gap:14px}
 .entry-concierge.entry-guided:has(.jy-glass)>.entry-joker-area{display:none}
}
@media (min-width:1181px){
 /* A title column wide enough for "A parent account," on one line (the Architect: "big font format
    on the box"; the audit: "A parent / account, / by request."). */
 .entry-concierge.entry-guided:has(.jy-glass){grid-template-columns:minmax(300px,.5fr) minmax(0,1.5fr);column-gap:36px}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-copy h1{font-size:clamp(26px,1.9vw,32px);line-height:1.1;margin:8px auto 10px}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-copy>p{font-size:15px}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-copy>p:first-child{font-size:13px}
 /* Sparki's joke: the words take the column's whole width and as many lines as they need (the
    Architect's screenshot: a joke cut off mid line), on a soft shade of the page so they read over
    the picture, and he stands under them. The row is the column's own, so nothing else moves. */
 .entry-concierge.entry-guided:has(.jy-glass) .entry-joker-area{padding:14px 16px;border-radius:20px;
  background:radial-gradient(130% 110% at 30% 40%,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 48%,transparent) 60%,transparent 100%)}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-joker{grid-template-columns:minmax(0,1fr);justify-items:start;gap:10px}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-joke-words{height:auto;overflow:visible;text-wrap:pretty}
 .entry-concierge.entry-guided:has(.jy-glass) .entry-joker-sparki .entry-sparki{width:92px}
 :root[data-entry] body:has(.entry-guided .jy-glass){height:100svh;min-height:0}
 :root[data-entry] main:has(.entry-guided .jy-glass){flex-direction:column;align-items:stretch;justify-content:safe center}
 .entry-concierge.entry-guided:has(.jy-glass){flex:none;max-height:100%;grid-template-rows:auto minmax(0,1fr);min-height:0;width:100%}
 .entry-concierge.entry-guided>.entry-signin-card:has(>.jy-glass){align-self:stretch;display:flex;flex-direction:column;min-height:0}
 .entry-concierge.entry-guided>.entry-signin-card>.jy-glass{flex:0 1 auto;min-height:0}
 .entry-concierge.entry-guided>.entry-signin-card>.jy-glass.jy-done{overflow:auto}
}
/* A laptop's short window: the recap of what the family has said steps aside (the last step reviews
   all of it), so the step and its button stand whole in the glass. */
@media (min-width:1181px) and (max-height:800px){
 .entry-concierge.entry-guided .jy-glass .jy-summary{display:none}
 .entry-concierge.entry-guided .jy-glass .jy-review>div{padding:5px 0}
 .entry-concierge.entry-guided .jy-glass .request-disclosure summary{padding:8px 12px}
 .entry-concierge.entry-guided .jy-glass .request-agree{gap:6px}
 .entry-concierge.entry-guided .jy-glass .jy-ask.is-answering :is(.jy-ask-chips,.jy-ask-note){display:none}
 .entry-concierge.entry-guided .jy-glass .jy-receipt{padding:22px 28px}
 .entry-concierge.entry-guided .jy-glass .jy-next{margin:16px 0}
 .entry-concierge.entry-guided .jy-glass .jy-next li{padding-bottom:12px}
}
@media (min-width:861px){
 body:has(.jy-stage>.jy-glass){height:100svh;min-height:0;display:flex;flex-direction:column}
 body:has(.jy-stage>.jy-glass)>:is(header,main){width:100%;flex:none}
 body:has(.jy-stage>.jy-glass)>#account-main{flex:1 1 auto;min-height:0;max-width:none;margin:0;
  display:flex;flex-direction:column;padding:clamp(4px,1.2vh,16px) clamp(20px,4vw,52px)}
 #account-main>:has(>.jy-stage>.jy-glass){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  width:100%;max-width:1240px;margin:0 auto}
 .jy-stage:has(>.jy-glass){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0}
 .jy-stage>.jy-glass{flex:none;min-height:0;max-height:100%;width:100%;margin-block:auto}
 .jy-stage>.jy-glass.jy-done{max-width:760px;margin-inline:auto;overflow:auto}
 body:has(.jy-stage>.jy-glass)>footer.site-footer{flex:none;margin:8px auto 12px}
}
@media (min-width:861px) and (max-height:800px){
 /* While Sparki answers, his answer has the room: the suggested questions and the note wait until it
    is closed, and what has been chosen so far steps aside (the last step reviews all of it). */
 .jy-glass .jy-ask.is-answering :is(.jy-ask-chips,.jy-ask-note){display:none}
 .jy-glass .jy-summary{display:none}
 .jy-glass>.jy-steps{padding:9px 24px}
 .jy-glass>.jy-layout{padding:14px 24px 18px;gap:22px}
 .jy-glass .jy-main h2{font-size:22px;margin:0 0 4px}
 .jy-glass .jy-lead{margin:0 0 10px}
 .jy-glass .jy-main form{gap:10px}
 .jy-glass>.jy-draft-note{padding:6px 24px}
 .jy-glass .jy-review>div{padding:6px 0}
 .jy-glass .jy-review{margin-bottom:0}
}

/* ---- Room on a big screen ----------------------------------------------------------------------
   The Architect, 24 September 2026, on a large screen: "boxes can be better accomodated, expaned a
   little more to allow better content size and distribution, i see it to tied". The spacing above
   was tuned for a small laptop; where there is room, the glass is wider, the step breathes, Sparki's
   column widens so his words take fewer lines and his suggestions sit side by side, and the type
   steps up a size. */
@media (min-width:1500px) and (min-height:900px){
 #account-main>:has(>.jy-stage>.jy-glass){max-width:1400px}
 .jy-glass>.jy-top{padding:0 22px 0 34px;max-width:360px;font-size:12.5px}
 .jy-glass>.jy-steps{padding:16px 34px}
 .jy-glass .jy-steps b{width:30px;height:30px}
 .jy-glass .jy-steps li{font-size:13.5px}
 .jy-glass>.jy-layout{padding:30px 36px 34px;gap:44px}
 .jy-glass .jy-layout.has-guide{grid-template-columns:minmax(0,1fr) 400px}
 .jy-glass .jy-main h2{font-size:32px;margin:4px 0 8px}
 .jy-glass .jy-lead{font-size:15.5px;margin:0 0 20px}
 .jy-glass .jy-main form{gap:18px}
 .jy-glass .jy-grid,.jy-glass .jy-pair{gap:16px 22px}
 .jy-glass .jy-main form label{font-size:13px}
 .jy-glass .jy-main :is(input,select){min-height:48px;font-size:15px}
 .jy-glass .jy-options label{padding:10px 16px}
 .jy-glass .jy-actions .primary{min-height:50px;padding-inline:26px}
 .jy-glass .jy-concierge{gap:14px}
 .jy-glass .jy-guide{grid-template-columns:76px minmax(0,1fr);gap:12px}
 .jy-glass .jy-guide-face{width:76px}
 .jy-glass .jy-bubble{padding:14px 18px;font-size:14.5px;line-height:1.55;gap:6px}
 .jy-glass .jy-ask{padding:14px;gap:10px}
 .jy-glass .jy-ask-row input,.jy-glass .jy-ask-row button{min-height:42px;font-size:14px}
 .jy-glass .jy-ask-chips{gap:8px}
 .jy-glass .jy-ask-chips button{min-height:32px;padding:5px 12px;font-size:12.5px}
 .jy-glass .jy-ask-note{font-size:12.5px}
 .jy-glass .jy-summary{padding:18px 20px;font-size:14px}
 .jy-glass>.jy-draft-note{padding:12px 36px;font-size:12.5px}
 /* The family request: a wider composition, its frame the tallest step at this size. */
 :root[data-entry] main:has(.entry-guided .jy-glass){max-width:1560px}
 .entry-concierge.entry-guided:has(.jy-glass){grid-template-columns:minmax(340px,.52fr) minmax(0,1.48fr);column-gap:44px}
}

/* ---- Sparki, the one character: his drawn face and his living spark. Every
        page that shows him loads this, so he is the same everywhere. A rig is
        any element carrying data-sparki; "live" lets him move, "still" does
        not, and reduced motion or the page's motion switch always win. The
        face sits exactly over the frames (the render's 385x560 geometry, body
        in rows 116..560) and shows only on the forward pose, whose painted
        eyes were removed for it. ---- */
/* ---- Sparki's face. The visor is a screen and the eyes are drawn on it, so
        they follow the pointer up and down as well as sideways, blink as eyes
        rather than as a cut to another picture, and change shape. Shown only
        on the forward frame, whose painted eyes were removed to make room. ---- */
.sparki-face{position:absolute;left:0;top:20.7143%;width:100%;height:79.2857%;
 overflow:visible;pointer-events:none;opacity:0;
 transform:translateZ(1px);backface-visibility:hidden}
[data-sparki][data-show="c"] .sparki-face,
[data-sparki]:not([data-show]) .sparki-face{opacity:1}
.sparki-face .sf-glow{fill:#ffb02e;opacity:.8;filter:url(#sparki-blur)}
.sparki-face .sf-ring{fill:url(#sparki-ring)}
.sparki-face .sf-iris{fill:url(#sparki-iris)}
.sparki-face .sf-rim{fill:url(#sparki-rim)}
.sparki-face .sf-hi{fill:#fffdf6}
.sparki-face .sf-hi2{fill:#fffdf6;opacity:.75}
.sparki-face .sf-cheek{fill:#170903}
/* Aim. The whole eye shifts a little on the screen and the pupil further inside
   it; together that is up to 12px, enough to read as looking, not drifting. */
.sparki-face .sf-look{transform:translate(calc(var(--lx,0) * 6px),calc(var(--ly,0) * 5px));
 transition:transform .09s ease-out}
.sparki-face .sf-pupil{transform:translate(calc(var(--lx,0) * 6.5px),calc(var(--ly,0) * 6.5px));
 transition:transform .09s ease-out}
.sparki-face .sf-lid{transform-box:fill-box;transform-origin:50% 50%;transition:transform .07s ease-in}
[data-sparki][data-blink="true"] .sf-lid{transform:scaleY(.07)}
/* The cheek rests below the eye and rises for a warm, smiling look: what a miss
   gets from him, instead of a frown. */
.sparki-face .sf-cheek{transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
[data-sparki][data-face="soft"] .sf-eye[data-eye="0"] .sf-cheek{transform:translateY(-17px)}
[data-sparki][data-face="soft"] .sf-eye[data-eye="1"] .sf-cheek{transform:translateY(-18px)}

/* ---- The living spark. A light, not a picture: the core breathes, two flares
        turn against each other, three motes ride tilted orbits, and only a
        right answer sets off the burst. ---- */
.sparki-spark{display:block;width:100%;height:100%;overflow:visible;
 transition:scale .3s ease,opacity .4s ease}
.sparki-spark .sk-bloom{fill:url(#sparki-bloom)}
.sparki-spark .sk-flare path{fill:url(#sparki-flare)}
.sparki-spark .sk-star{fill:url(#sparki-core)}
.sparki-spark .sk-hot{fill:#fffef8}
.sparki-spark .sk-orbit circle{fill:#fff4d0}
.sparki-spark .sk-b{fill:#ffe39a;opacity:0}
/* The pivot is the spark's centre, which is the ORIGIN of its viewBox. A view-box
   reference box starts at that origin, so "50% 50%" would be (44,44), and a
   turning flare swung off to one side and drew a stray cross. */
.sparki-spark .sk-bloom,.sparki-spark .sk-flare,.sparki-spark .sk-body,.sparki-spark .sk-orbit,.sparki-spark .sk-b{
 transform-box:view-box;transform-origin:0 0}
.sparki-spark .sk-b[data-b="1"]{--a:45deg}.sparki-spark .sk-b[data-b="2"]{--a:90deg}
.sparki-spark .sk-b[data-b="3"]{--a:135deg}.sparki-spark .sk-b[data-b="4"]{--a:180deg}
.sparki-spark .sk-b[data-b="5"]{--a:225deg}.sparki-spark .sk-b[data-b="6"]{--a:270deg}
.sparki-spark .sk-b[data-b="7"]{--a:315deg}
[data-sparki="live"] .sparki-spark .sk-bloom{animation:ws-sk-glow 3.8s ease-in-out infinite alternate}
[data-sparki="live"] .sparki-spark .sk-flare{animation:ws-sk-turn 26s linear infinite,ws-sk-breathe 3.4s ease-in-out infinite alternate}
[data-sparki="live"] .sparki-spark .sk-flare-2{animation:ws-sk-turn-back 38s linear infinite,ws-sk-twinkle 2.2s ease-in-out infinite alternate}
[data-sparki="live"] .sparki-spark .sk-body{animation:ws-sk-pulse 2.6s ease-in-out infinite alternate}
[data-sparki="live"] .sparki-spark .sk-o1{animation:ws-sk-turn 5.8s linear infinite}
[data-sparki="live"] .sparki-spark .sk-o2{animation:ws-sk-turn-back 8.6s linear infinite}
[data-sparki="live"] .sparki-spark .sk-o3{animation:ws-sk-turn 12.5s linear infinite}
@keyframes ws-sk-turn{to{rotate:360deg}}
@keyframes ws-sk-turn-back{to{rotate:-360deg}}
@keyframes ws-sk-breathe{from{scale:.86}to{scale:1.08}}
@keyframes ws-sk-twinkle{from{scale:.7;opacity:.5}to{scale:1.15;opacity:1}}
@keyframes ws-sk-pulse{from{scale:.94}to{scale:1.06}}
@keyframes ws-sk-glow{from{opacity:.62;scale:.92}to{opacity:1;scale:1.06}}
/* a right answer: the core pops a quarter turn (a four-point star lands on
   itself, so nothing snaps) and eight sparks fly out */
[data-sparki="live"][data-show="joy"] .sk-body{animation:ws-sk-pop .8s cubic-bezier(.3,1.6,.4,1)}
[data-sparki="live"][data-show="joy"] .sk-bloom{animation:ws-sk-flash .9s ease-out}
[data-sparki="live"][data-show="joy"] .sk-b{animation:ws-sk-burst .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes ws-sk-pop{0%{scale:1;rotate:0deg}35%{scale:1.45;rotate:45deg}100%{scale:1;rotate:90deg}}
@keyframes ws-sk-flash{0%{opacity:1;scale:1}30%{opacity:1;scale:1.55}100%{opacity:.8;scale:1}}
@keyframes ws-sk-burst{
 0%{opacity:1;transform:rotate(var(--a,0deg)) translateX(6px) scale(1)}
 100%{opacity:0;transform:rotate(var(--a,0deg)) translateX(56px) scale(.25)}}
/* a clue: one bright beat, the "idea" */
[data-sparki="live"][data-show="curious"] .sk-bloom{animation:ws-sk-flash .7s ease-out}
/* carried: brighter and a little bigger; a miss: calmer */
[data-sparki][data-face="soft"] .sparki-spark{opacity:.82}

@media(prefers-reduced-motion:reduce){
 .sparki-spark *,.sparki-face *{animation:none!important;transition:none!important}}
:root[data-motion=off] .sparki-spark *,:root[data-motion=off] .sparki-face *{
 animation:none!important;transition:none!important}


/* wide eyes: noticing something */
.sparki-face .sf-lid{scale:1;transition:transform .07s ease-in,scale .25s ease}
[data-sparki][data-face="wide"] .sf-lid{scale:1.12;transition:transform .07s ease-in,scale .18s cubic-bezier(.3,1.6,.5,1)}

/* ---- His layers, for every page that draws him with sparkiCharacter(): eight
        rendered poses stacked with one opaque (swapping OPACITY keeps every
        frame decoded, so a turn never flickers), the drawn face over the
        forward pose, and the spark in a box of its own so it can trail the
        head. Each picture is referenced once, here, so several of him on one
        page share one copy. The forward pose is the empty-visor render. ---- */
/* Sparki waits with the visitor while the next page loads (welcome.js). */
.wise-leaving{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;
 background:rgba(12,8,24,.26);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 animation:wise-leaving-in .3s ease both}
.wise-leaving-sparki{width:clamp(72px,8vw,104px);filter:drop-shadow(0 0 28px rgba(255,209,92,.55))}
.wise-leaving .sparki-float{transform-origin:50% 88%;animation:wise-leaving-hover 1.6s ease-in-out infinite}
.wise-leaving-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes wise-leaving-in{from{opacity:0}}
@keyframes wise-leaving-hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.wise-leaving,.wise-leaving .sparki-float{animation:none}}
/* The shared defs are an inline SVG at the end of the page: out of flow, or
   its empty line box adds a strip of page background under the last section. */
.sparki-defs{position:absolute;width:0;height:0;overflow:hidden}
.sparki-character{position:relative;display:block;width:100%;aspect-ratio:385/560;
 --f-m2:url(/assets/19cbdb10e1208a2faccae5bce3d1f5be4d45e2680665354a0470bc63b74d200e.webp);--f-m1:url(/assets/38a256a612b35a3de42edcf5828d5d258299e0ae443cd90846c1df2e792d6c34.webp);--f-c:url(/assets/4dbaa613a81c2235f91309c1ef0f628405ccb4dcc0836e2f59677057e9217c9d.webp);
 --f-r1:url(/assets/38b5a8b0990874a482d3bad58ae998af39d4710b87f406150777198f528c0c22.webp);--f-r2:url(/assets/a1d84f99119858c8af4ca454e85545ac9c58ad8972f7b598bbf50f955168534a.webp);
 --f-blink:url(/assets/fc82bd7fc2980b38876ffcc965391e13a8b323792f99515255fc4d4ac86437d3.webp);--f-joy:url(/assets/82fe1d11d54472ce002e6781cc23415578e83451ca8d7af3ae9152471e24ddcc.webp);
 --f-curious:url(/assets/4da11859136e61d37b7e623d01fa0b046f4cff40b9b122e687375342470eaf91.webp)}
.sparki-float{position:absolute;inset:0;display:block}
.sparki-frame{position:absolute;left:0;top:20.7143%;width:100%;height:79.2857%;
 display:block;opacity:0;background-repeat:no-repeat;background-size:contain;
 background-position:50% 100%;filter:drop-shadow(0 6px 5px #bd892226)}
.sparki-frame[data-f=m2]{background-image:var(--f-m2)}
.sparki-frame[data-f=m1]{background-image:var(--f-m1)}
.sparki-frame[data-f=c]{background-image:var(--f-c)}
.sparki-frame[data-f=r1]{background-image:var(--f-r1)}
.sparki-frame[data-f=r2]{background-image:var(--f-r2)}
.sparki-frame[data-f=blink]{background-image:var(--f-blink)}
.sparki-frame[data-f=joy]{background-image:var(--f-joy)}
.sparki-frame[data-f=curious]{background-image:var(--f-curious)}
.sparki-character:not([data-show]) .sparki-frame[data-f=c],
.sparki-character[data-show=c] .sparki-frame[data-f=c],
.sparki-character[data-show=m2] .sparki-frame[data-f=m2],
.sparki-character[data-show=m1] .sparki-frame[data-f=m1],
.sparki-character[data-show=r1] .sparki-frame[data-f=r1],
.sparki-character[data-show=r2] .sparki-frame[data-f=r2],
.sparki-character[data-show=joy] .sparki-frame[data-f=joy],
.sparki-character[data-show=curious] .sparki-frame[data-f=curious]{opacity:1}
.sparki-halo{position:absolute;left:27.7922%;top:1.9643%;width:41.8182%;height:18.75%;
 display:block;overflow:visible;filter:drop-shadow(0 0 11px #ffd98a96);
 transform:translateX(calc(var(--sx,0) * -7px)) rotate(calc(var(--sx,0) * -7deg));
 transition:transform .55s cubic-bezier(.22,.61,.36,1)}

/* Where Sparki stands in for a glyph: the tutor's launcher and its panel head
   wore a star in a yellow square. The character is the same one used
   everywhere else, sized to the box that square left behind. */
.sparki-symbol:has(.sparki-character){background:transparent;box-shadow:none;overflow:visible;padding:0}
.sparki-symbol .sparki-character{width:auto;height:100%}

/* A layered version of the original artwork. Every animated layer owns its pivot. */
.ws-living-art{width:350px;max-width:88%;position:relative;container-type:inline-size;aspect-ratio:1240/1268;--spark-look-x:0px;--spark-look-y:0px;--spark-lean:0deg;filter:drop-shadow(0 15px 20px #17386616)}
.ws-scene-svg{display:block;width:100%;height:auto;overflow:visible}
.ws-gaze{transform:translate(var(--spark-look-x),var(--spark-look-y))}
.ws-star-curiosity{transform-origin:630px 815px;transform:rotate(var(--spark-lean))}
.ws-star-float{transform-origin:632px 835px;animation:ws-star-wonder 6.8s cubic-bezier(.45,0,.55,1) infinite}
.ws-leaf-breeze{transform-origin:342px 528px;animation:ws-leaf-wind 4.8s cubic-bezier(.45,0,.55,1) infinite}
.ws-page-left{transform-origin:550px 924px;animation:ws-page-left-flutter 5.8s cubic-bezier(.45,0,.55,1) infinite}
.ws-page-right{transform-origin:664px 975px;animation:ws-page-right-flutter 6.4s cubic-bezier(.45,0,.55,1) infinite}
.ws-book-breathe{transform-origin:620px 1140px;animation:ws-book-breathe 6.8s cubic-bezier(.45,0,.55,1) infinite}
.ws-pencil-write{transform-origin:1150px 368px;animation:ws-pencil-write 5.4s cubic-bezier(.45,0,.55,1) infinite}
.ws-writing-trail{stroke-dasharray:130;stroke-dashoffset:130;animation:ws-pencil-line 5.4s linear infinite}
.ws-scene-glints{animation:ws-scene-glow 6.8s ease-in-out infinite}
.ws-math-orbit{--cube-edge:56px;--cube-edge:16cqw;--cube-half:calc(var(--cube-edge)/2);position:absolute;left:75.5%;top:17%;width:var(--cube-edge);height:var(--cube-edge);perspective:600px;transform:translate(-50%,-50%);pointer-events:none}
.ws-math-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-32deg) rotateZ(12deg);animation:ws-cube-earth 18s linear infinite}
.ws-cube-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12%;border:1px solid #b3ddff;backface-visibility:hidden;background:linear-gradient(140deg,#99d4ff,#4b94d4 66%,#347bbd);color:#fff6e9;font:750 calc(var(--cube-edge)*.72)/1 'Avenir Next',system-ui,sans-serif;text-shadow:0 2px 1px #2e5e98;box-shadow:inset 2px 2px 3px #e8f5ff80,inset -2px -3px 4px #2361a250}
.ws-cube-front{transform:translateZ(var(--cube-half))}.ws-cube-back{transform:rotateY(180deg) translateZ(var(--cube-half))}.ws-cube-right{transform:rotateY(90deg) translateZ(var(--cube-half));background:linear-gradient(150deg,#83b9ec,#3e75b4)}.ws-cube-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}.ws-cube-top{transform:rotateX(90deg) translateZ(var(--cube-half));background:linear-gradient(145deg,#badffb,#83bdea)}.ws-cube-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}
.ws-scene-controls{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:-4px 0 16px;color:var(--muted);font-size:11px;line-height:1.4;text-align:center}
.ws-scene-controls button{font-size:11px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:22px;box-shadow:none;white-space:nowrap}.ws-scene-controls button:hover{background:var(--soft)}.ws-scene-controls button:disabled{cursor:default;color:var(--muted)}
.ws-illustration>.ws-orbit-label{z-index:1;pointer-events:none;top:40px;left:0}
.ws-living-art[data-running=false] *{animation-play-state:paused!important}
:root[data-motion=off] .ws-living-art *{animation:none!important}
@keyframes ws-star-wonder{0%,100%{transform:translate(0,0) rotate(-.6deg)}30%{transform:translate(7px,-14px) rotate(1deg)}65%{transform:translate(-5px,-8px) rotate(-1deg)}}
@keyframes ws-leaf-wind{0%,100%{transform:rotate(-7deg)}35%{transform:rotate(9deg)}55%{transform:rotate(-2deg)}78%{transform:rotate(6deg)}}
@keyframes ws-page-left-flutter{0%,100%{transform:rotate(0deg)}22%{transform:rotate(-3deg)}38%{transform:rotate(-1deg)}65%{transform:rotate(-2.5deg)}82%{transform:rotate(0deg)}}
@keyframes ws-page-right-flutter{0%,100%{transform:rotate(0deg)}35%{transform:rotate(3.2deg)}53%{transform:rotate(.5deg)}72%{transform:rotate(2deg)}}
@keyframes ws-book-breathe{0%,100%{transform:scaleY(1)}48%{transform:scaleY(1.006)}}
@keyframes ws-pencil-write{0%,100%{transform:translate(0,0) rotate(0deg)}14%{transform:translate(-13px,-7px) rotate(-3deg)}26%{transform:translate(9px,-17px) rotate(3deg)}38%{transform:translate(19px,-5px) rotate(-2deg)}48%{transform:translate(30px,-14px) rotate(3deg)}65%,85%{transform:translate(5px,-5px) rotate(0deg)}}
@keyframes ws-pencil-line{0%,8%{stroke-dashoffset:130;opacity:0}12%{opacity:.85}48%,58%{stroke-dashoffset:0;opacity:.85}76%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ws-scene-glow{0%,100%{opacity:.6}48%{opacity:1}}
@keyframes ws-cube-earth{from{transform:rotateX(-22deg) rotateY(-32deg) rotateZ(12deg)}to{transform:rotateX(-22deg) rotateY(328deg) rotateZ(12deg)}}
@media(max-width:760px){.ws-living-art{width:310px;max-width:88%}.ws-illustration>.ws-orbit-label{top:28px;font-size:10px;padding:7px 10px;left:0}.ws-scene-controls{font-size:10px;gap:2px 8px;margin-top:0}.ws-scene-controls button{font-size:10px}}
@media(hover:none){.ws-scene-invite{display:none}}
@media(prefers-reduced-motion:reduce){.ws-living-art *{animation:none!important}.ws-scene-invite{display:none}}

/* One cream sheet lifts from the binding, turns over and settles behind the cover. */
.ws-turning-page{transform-origin:620px 925px;transform:perspective(1400px) rotateY(0deg);opacity:0;animation:ws-book-page-turn 8s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
@keyframes ws-book-page-turn{0%,12%{opacity:0;transform:perspective(1400px) rotateY(0deg) rotateZ(0deg)}18%{opacity:1;transform:perspective(1400px) rotateY(-5deg) rotateZ(-2deg)}39%{opacity:1;transform:perspective(1400px) rotateY(-86deg) rotateZ(-9deg)}62%{opacity:1;transform:perspective(1400px) rotateY(-166deg) rotateZ(-3deg)}72%{opacity:0;transform:perspective(1400px) rotateY(-178deg) rotateZ(0deg)}100%{opacity:0;transform:perspective(1400px) rotateY(-178deg) rotateZ(0deg)}}

/* Public entry previews: illustrative worlds, never saved learner progress. */
.entry-scene{height:430px;padding:0 0 84px;overflow:visible;align-content:center}
.entry-scene:before,.entry-orbit-line{display:none}
.entry-scene .ws-living-art{width:310px;max-width:70%;z-index:2}
.entry-scenery{position:absolute;inset:0 0 80px;pointer-events:none;overflow:hidden}
.entry-world-halo{position:absolute;inset:4% 5% 0;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff2c9 0%,#e1eeff 45%,transparent 71%)}
.entry-world-ring{position:absolute;inset:19% 8% 9%;border:1px solid #9cbde6;border-radius:50%;transform:rotate(-17deg);box-shadow:0 12px 26px -20px #305c9d}
.entry-world-ground{position:absolute;bottom:6%;left:19%;width:62%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#7899c05c,transparent 70%);transform:rotate(-5deg)}
.entry-world-props{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.94)}
.entry-world-props>span{position:absolute;font-size:11px;font-weight:750;background:var(--paper);color:var(--ink);padding:11px 14px;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 0 -4px #bed3ed,0 16px 24px -18px #254e83}
.entry-missions>span:nth-child(1){top:27%;left:2%;transform:rotate(-8deg)}
.entry-missions>span:nth-child(2){top:10%;right:8%;transform:rotate(8deg)}
.entry-missions>span:nth-child(3){bottom:8%;right:1%;transform:rotate(-4deg)}
.entry-scene[data-scene=missions] .entry-missions,.entry-scene[data-scene=growth] .entry-growth,.entry-scene[data-scene=style] .entry-style{opacity:1;transform:none}
.entry-scene[data-scene=growth] .entry-world-halo{background:radial-gradient(ellipse at 50% 45%,#fff3cc,#d7f0e2 48%,transparent 72%)}
.entry-scene[data-scene=growth] .entry-world-ring{border-color:#8cc7a8;transform:rotate(12deg)}
.entry-scene[data-scene=growth] .entry-world-ground{background:radial-gradient(ellipse,#6aa68177,transparent 70%);width:80%;left:10%}
.entry-growth>span,.entry-style>span{bottom:1%;left:50%;transform:translateX(-50%);white-space:nowrap}
.entry-plant{position:absolute;bottom:19%;left:11%;height:105px;width:6px;border-radius:6px;background:linear-gradient(90deg,#6a9b71,#a4d690);transform:rotate(-9deg);transform-origin:bottom}
.entry-plant:before,.entry-plant:after{content:'';position:absolute;width:42px;height:26px;background:linear-gradient(145deg,#bfed9f,#529d77);border-radius:2px 90% 2px 90%;box-shadow:inset 0 2px 2px #ffffff70;top:28%;right:3px;transform:rotate(12deg)}
.entry-plant:after{left:3px;top:3%;transform:scaleX(-1) rotate(12deg)}
.entry-plant.plant-two{left:85%;height:132px;transform:rotate(12deg)}.entry-plant.plant-three{left:94%;height:67px;transform:rotate(22deg)}
.entry-scene[data-scene=style] .entry-world-halo{background:radial-gradient(ellipse at 50% 30%,#fff0d5,#eadbfc 40%,#f8dce8 58%,transparent 73%)}
.entry-scene[data-scene=style] .entry-world-ring{border-color:#c29ad4;transform:rotate(20deg)}
.entry-style>i{position:absolute;top:35%;left:6%;width:56px;height:65px;border:5px solid #fff;border-radius:18px;transform:rotate(-18deg);background:linear-gradient(140deg,#abe1ff,#569ce7);box-shadow:0 6px 0 #afc2e1,0 14px 24px #546b8425}
.entry-style>i:nth-child(2){left:auto;right:6%;top:18%;transform:rotate(18deg);background:linear-gradient(140deg,#ffd6e9,#e688b7);box-shadow:0 6px 0 #d7a0c7}
.entry-style>i:nth-child(3){left:auto;right:3%;top:56%;width:40px;height:46px;transform:rotate(-12deg);background:linear-gradient(140deg,#e2d5ff,#9e89d4);box-shadow:0 6px 0 #b0a0cf}
.entry-scene .ws-scene-controls{position:absolute;bottom:28px;left:0;right:0;margin:0;z-index:3}.entry-scene .ws-scene-invite{display:none}
.entry-scene-caption{padding:0 6px;font-size:12px}
.entry-preview-options{box-shadow:0 8px 28px -20px #31507770}
.entry-preview-options [aria-pressed=true]{box-shadow:inset 0 1px 0 #ffffff90,0 4px 10px -7px var(--accent)}
@media(prefers-reduced-motion:no-preference){.entry-world-ring,.entry-world-props{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s}.entry-scene:has([data-running=true]) .entry-plant{animation:entry-leaf 5s ease-in-out infinite alternate}.entry-scene:has([data-running=true]) .entry-style>i{animation:entry-color 4s ease-in-out infinite alternate}.entry-scene:has([data-running=true]) .entry-style>i:nth-child(2){animation-delay:-2s}@keyframes entry-leaf{to{rotate:6deg}}@keyframes entry-color{to{translate:0 -10px}}}
@media(max-width:800px){.entry-scene{height:370px;margin-top:0}.entry-scene .ws-living-art{width:260px}.entry-world-props>span{font-size:10px;padding:8px 10px}.entry-missions>span:nth-child(1){left:0;top:14%}.entry-missions>span:nth-child(2){right:0;top:3%}.entry-plant{scale:.8}.entry-style>i{scale:.8}}
@media(max-width:380px){.entry-scene{height:340px}.entry-scene .ws-living-art{width:230px}.entry-world-props>span{font-size:9px}.entry-missions>span:nth-child(3){right:0;bottom:4%}}

/* Selected direction B. Preserve text names for accessibility and custom branding. */
[data-brand-name="Wise Sparks"]{position:relative;min-width:116px;min-height:64px}
[data-brand-name="Wise Sparks"]::before{content:"";display:block;width:116px;height:66px;background:url("/assets/d2c14e3d12515f144b1387f8c1348e207197a7e14eb60e2c3ea5bd481012e9a6.svg") center/contain no-repeat;flex:none}
[data-brand-name="Wise Sparks"]>.wise-mark{display:none!important}
[data-brand-name="Wise Sparks"]>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* At night the wordmark itself changes (26 September 2026). The night one was laid over the day one across the
   whole brand box, so wherever the box was wider than the mark, as in the phone header, both showed. */
:root[data-mode="dark"] [data-brand-name="Wise Sparks"]::before,:root[data-welcome-night="true"] [data-brand-name="Wise Sparks"]::before{background-image:url("/assets/81847952de9e906330eb12d338cc6053f181c9b42e8e5abd201958e0c55e0f07.svg")}
@media(max-width:520px){[data-brand-name="Wise Sparks"]{min-width:102px;min-height:58px}[data-brand-name="Wise Sparks"]::before{width:102px;height:58px}}
/* Moving between Wise Sparks pages crossfades instead of blanking, where the
   browser supports it. Both pages must opt in, so every public page does. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- One day/night switch, everywhere.

        There were two. The welcome page had an 86x44 chip with a 12px radius,
        no fill, 12px text reading "Day view", sitting beside the Sign in
        button and losing to it. The account pages had a filled 999px pill at
        14px semibold that collapsed to a 44px circle only under 600px. Same
        job, same two glyphs, two different controls -- and a visitor crosses
        between them in one click.

        This is the one control. A 44px circle, a line icon that follows
        currentColor, and nothing else: no label to translate, no width to
        wrap, no second shape to keep in step. 44px is the target size, not a
        decoration, because the people reaching for it include children on
        phones.

        Loaded by both bundles -- scripts/build_playground.py for the welcome
        page and scripts/hosted_assets.py for the account pages. Add it to
        both or it silently governs only one of them.

        The icon is inline SVG in the markup rather than a background, so it
        inherits the button's colour on hover and focus and there is nothing
        for a content policy to fetch. Both builders emit the same shape:
        app/welcome.js and app/accounts.js. ---- */
.ws-mode{
 display:inline-flex;align-items:center;justify-content:center;flex:none;
 width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
 border:1px solid var(--line);border-radius:999px;
 background:color-mix(in srgb,var(--paper) 72%,transparent);
 color:var(--ink);font:inherit;line-height:1;cursor:pointer;box-shadow:none;
 transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.ws-mode>svg{width:20px;height:20px;display:block;pointer-events:none}
.ws-mode:hover{border-color:var(--accent);color:var(--accent);
 background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.ws-mode:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ws-mode{transition:none}}

/* ---- The menu bar: one component on every page.

        Home, Plans, Sign in and the Trust & care pages each used to draw
        their own: the same six destinations in three fonts, two sizes and
        two colours, and even on the home page the four section links and the
        two page links were styled differently. This is the one bar. Every
        item is the same link at the same size; the current page is bold.
        Signed in, the same bar carries the member's own destinations
        (.site-nav-member) with Sign out where Sign in sits.

        It carries its own colours, the home page's day and night, so it
        reads the same whatever the page around it is doing: night follows
        data-welcome-night (home, Plans) or data-mode (Sign in, Trust & care).
        The day/night switch inside it is mode-switch.css, fed these colours.

        Loaded by all four builders; site-nav.js builds it where a script runs:
        scripts/build_playground.py, scripts/plans_page.py,
        scripts/hosted_assets.py and scripts/policy_center.py. ---- */
.site-nav{--ink:#182b48;--muted:#526580;--accent:#254ccb;--soft:#eaf1ff;--paper:#fff;--line:#d7e2f1;--control-line:#7187aa;
 position:relative;display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-left:auto;
 padding:5px 6px 5px 14px;border-radius:999px;color:var(--ink);
 font:400 14px/1.2 'Avenir Next','Trebuchet MS',system-ui,sans-serif;letter-spacing:normal;
 background:color-mix(in srgb,#f7faff 66%,transparent);
 backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);
 box-shadow:0 1px 0 #ffffffcc inset,0 18px 40px -30px #1d356440}
:root[data-welcome-night=true] .site-nav,:root[data-mode=dark] .site-nav{
 --ink:#edf4ff;--muted:#b0c3dd;--accent:#adcaff;--soft:#213959;--paper:#192b45;--line:#36506e;--control-line:#8ba6c9;
 background:color-mix(in srgb,#0b1428 42%,transparent);box-shadow:0 1px 0 #ffffff1f inset,0 18px 40px -28px #00000099}
.site-nav .ws-nav-links{display:contents}
.site-nav .ws-nav-more{display:none}
.site-nav .ws-nav-toggle{list-style:none}
.site-nav .ws-nav-toggle::-webkit-details-marker{display:none}
.site-nav .ws-nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;
 color:var(--ink);font:inherit;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.site-nav .ws-nav-link:hover{background:var(--soft)}
.site-nav .ws-nav-link[aria-current=page]{font-weight:700}
/* Sign out is a <button>, and the account pages paint every night button;
   :root keeps it the same pill as Sign in. */
:root .site-nav .ws-nav-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
 color:var(--ink);font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;
 border:1px solid color-mix(in srgb,var(--control-line) 60%,transparent);
 background:color-mix(in srgb,var(--paper) 55%,transparent);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease}
:root .site-nav .ws-nav-signin:hover{background:color-mix(in srgb,var(--paper) 85%,transparent);border-color:var(--control-line)}
:root .site-nav .ws-nav-signin[aria-current=page]{font-weight:700;border-color:var(--accent)}
/* Signed in: the way back to their own space, with their initial (policy_center.me_link). */
:root .site-nav .ws-nav-me{gap:9px;padding-left:6px}
.site-nav .ws-nav-me-face{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
 background:color-mix(in srgb,var(--accent) 16%,var(--paper));color:var(--accent);font-weight:800;font-size:13px}
.site-nav :is(.ws-nav-link,.ws-nav-signin,.ws-nav-toggle):focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* The Menu disclosure takes the row's place on phones and small tablets, on a
   signed-in bar from a wider screen (it carries more), and always on a bar
   with more destinations than any row holds. The menu hangs from the bar's
   right edge, so it never runs off a small screen. */
.site-nav .ws-nav-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;
 font:inherit;font-weight:650;color:var(--ink);background:color-mix(in srgb,var(--paper) 72%,transparent);
 border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:none;cursor:pointer;user-select:none}
.site-nav .ws-nav-toggle svg{width:16px;height:16px}
.site-nav .ws-nav-more[open]>.ws-nav-toggle{border-color:var(--accent);color:var(--accent)}
.site-nav .ws-nav-menu{display:flex;position:absolute;top:calc(100% + 10px);right:0;z-index:30;min-width:220px;
 flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:var(--paper);border:1px solid var(--line);
 box-shadow:0 24px 48px -24px color-mix(in srgb,var(--ink) 45%,transparent)}
.site-nav .ws-nav-menu>.ws-nav-link{width:100%;font-size:15px;font-weight:600}
.site-nav .ws-nav-menu>.ws-nav-link[aria-current=page]{color:var(--accent)}
.site-nav .ws-nav-menu>.ws-nav-link:hover{background:var(--soft);color:var(--accent)}
.site-nav.site-nav-folded .ws-nav-links{display:none}
.site-nav.site-nav-folded .ws-nav-more{display:block}
@media(min-width:701px){.site-nav.site-nav-folded .ws-nav-menu{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr))}}
/* Where the row stops fitting, measured on 2026-09-22 with the brand beside
   it: the website's six links need 978px of window (Sign in's 52px margins),
   a family's six signed-in destinations 1157px. Each fold has room to spare
   for wider fallback fonts. */
@media(max-width:1240px){
 .site-nav.site-nav-member .ws-nav-links{display:none}
 .site-nav.site-nav-member .ws-nav-more{display:block}}
@media(max-width:1040px){
 .site-nav .ws-nav-links{display:none}
 .site-nav .ws-nav-more{display:block}}
@media(max-width:760px){
 .site-nav{padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:8px}
 /* The night bar's glass must go too, or its buttons sit on a square of it (the audit, 24 September 2026). */
 :root[data-welcome-night=true] .site-nav,:root[data-mode=dark] .site-nav{background:none;box-shadow:none}}
@media(max-width:560px){
 .site-nav{gap:6px;white-space:nowrap}
 .site-nav .ws-nav-toggle{width:44px;padding:0;justify-content:center;border-radius:50%}
 .site-nav .ws-nav-toggle span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 :root .site-nav .ws-nav-signin{padding:0 16px}}
@media(prefers-reduced-motion:no-preference){.site-nav .ws-nav-more[open] .ws-nav-menu{animation:site-menu-in .16s ease-out both}}
@keyframes site-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media print{.site-nav{display:none}}
.site-nav[hidden]{display:none}

/* Help & ideas: a calm conversation for families, focused work for operators. */
.support-main{max-width:1320px;margin:32px auto 70px;min-height:65svh}
.support-main h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.035em;line-height:1.16;max-width:24ch;overflow-wrap:anywhere}
.support-main h2{font-size:24px;line-height:1.3}.support-main h3{font-size:18px;line-height:1.4}
.support-main p{line-height:1.65}.support-main button,.support-main .button{min-height:44px}.support-main button:disabled{opacity:.45;cursor:default}
.support-main textarea{resize:vertical;width:100%;max-width:100%;min-height:100px;padding:14px 16px;border:1px solid var(--control-line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;line-height:1.6}
.support-main input,.support-main select{max-width:100%;font-size:15px}.support-main textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.support-main label{font-size:13px;min-width:0}.support-main summary{min-height:44px;cursor:pointer;font-size:13px;color:var(--accent);padding:13px 0}
.support-main .small{font-size:12px;line-height:1.65}.support-main form{margin:0;gap:18px}.support-main section,.support-main aside{min-width:0}
.support-mark{width:76px;height:76px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:24px;background:var(--soft);color:var(--accent);box-shadow:0 5px 0 var(--line)}
.support-mark svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.support-profile-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:26px 30px;background:var(--paper);border:1px solid var(--line);border-radius:24px;margin:0 0 26px}.support-profile-card>div:nth-child(2){flex:1;min-width:200px}.support-profile-card h2{font-size:23px;margin:0 0 8px}.support-profile-card p{margin:0 0 14px;font-size:14px;color:var(--muted)}.support-profile-counts{display:flex;gap:20px;font-size:12px;color:var(--accent)}
.support-heading{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:end;margin:36px 0}.support-heading-copy{display:flex;gap:24px;align-items:center}.support-heading-copy>div:last-child{max-width:670px}.support-heading-copy p:first-child{color:var(--accent);font-size:12px;font-weight:700;margin:0 0 12px}.support-heading-copy p:last-child{color:var(--muted);font-size:14px;margin:16px 0 0}.support-heading .account-actions{margin:0;gap:10px;flex-wrap:wrap}.support-heading button{font-size:13px}
/* Four numbers that are also filters, as cards rather than one wide band with
   dividers down it. The same language the rest of the portal uses. */
.support-pulse{border:0;background:transparent;margin-bottom:20px;display:grid;gap:12px}.support-pulse-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:0;padding:0;gap:12px}.support-pulse-counts button{display:flex;flex-direction:column;align-items:start;padding:15px 18px;gap:5px;
 border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--paper);min-height:0;
 box-shadow:0 2px 5px #162d5010}.support-pulse-counts strong{font-size:30px;line-height:1.05;font-weight:650;letter-spacing:-.035em;color:var(--ink)}.support-pulse-counts span{font-size:12px;color:var(--muted)}.support-pulse-counts button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.support-health{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;padding:0}
.support-health>div{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:15px 18px;box-shadow:0 2px 5px #162d5010}.support-health>div{display:flex;flex-direction:column;gap:7px}.support-health strong{font-size:13px}.support-health span,.support-health small{font-size:12px;color:var(--muted)}.support-health meter{width:100%;height:16px;accent-color:var(--accent)}.support-pulse>details{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:12px 18px}.support-pulse>details p{font-size:12px;color:var(--muted);max-width:90ch}.support-kind-counts{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0;font-size:12px}.support-kind-counts b{margin-left:6px}
.support-trend-bars{display:flex;align-items:end;gap:4px;height:54px;border-bottom:1px solid var(--line)}.support-trend-bars>span{display:flex;align-items:end;gap:2px;flex:1;height:100%}.support-trend-bars i,.support-trend-bars b{display:block;height:var(--height);max-height:100%;width:50%;border-radius:3px 3px 0 0;background:#367caf}.support-trend-bars b{background:#39917d}
.support-queue{border:1px solid var(--line);background:var(--paper);border-radius:24px;padding:28px 32px}.support-queue-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.support-queue-head h2{margin:0}.support-queue-head>span{color:var(--muted);font-size:12px}
.support-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px!important;align-items:end;padding-bottom:18px;border-bottom:1px solid var(--line)}.support-filter button{font-size:13px;padding:13px;min-height:46px;align-self:end}.support-filter .support-more-filters{grid-column:1/-1;display:block}.support-more-filters[open]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.support-more-filters summary{grid-column:1/-1;padding:6px 0;min-height:28px}.support-ticket-list{margin:6px 0}
.support-ticket-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 12px;align-items:center;width:100%;gap:18px;text-align:left;padding:24px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}.support-ticket-row:hover{background:var(--soft);border-radius:14px}.support-ticket-symbol{display:grid;place-items:center;width:42px;height:46px;border:1px solid var(--line);border-radius:15px;color:var(--accent);background:var(--soft);font-size:26px;font-weight:500}.support-ticket-copy{display:flex;flex-direction:column;gap:7px;min-width:0}.support-ticket-copy>span{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--muted);font-weight:500}.support-ticket-copy strong{font-size:16px;font-weight:650;overflow-wrap:anywhere}.support-ticket-copy small{font-size:12px;font-weight:400}.support-ticket-state{display:flex;flex-direction:column;gap:9px;align-items:end}.support-ticket-state small{font-size:11px;font-weight:400}.support-status{display:inline-flex;width:fit-content;align-items:center;min-height:28px;padding:4px 10px;border-radius:24px;background:var(--soft);color:var(--accent);border:1px solid var(--line);font-size:11px;white-space:nowrap;font-weight:650}.support-status[data-status=waiting_requester]{color:var(--caution-ink);background:var(--caution-bg)}.support-status[data-status=resolved],.support-status[data-status=closed]{background:var(--success-bg);color:var(--success-ink)}.support-new{color:var(--accent);font-size:10px}.support-new:before{content:'●';padding-right:4px}.support-late{color:var(--caution-ink)!important}
.support-pages{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:22px;font-size:12px}.support-pages button{font-size:12px}.support-empty{display:flex;align-items:center;flex-direction:column;text-align:center;padding:44px 20px 50px}.support-empty h3{margin:28px 0 8px}.support-empty p{color:var(--muted);max-width:54ch;font-size:14px;margin:0 0 20px}
.support-wizard{max-width:780px;margin:32px auto;background:var(--paper);border:1px solid var(--line);padding:32px 42px 38px;border-radius:28px}.support-wizard>button{padding-left:0;border:0;color:var(--muted);background:transparent;font-size:12px}.support-wizard h2{font-size:29px;margin:8px 0}.support-wizard form>p{font-size:14px;color:var(--muted);margin:0}.support-steps{display:flex;justify-content:space-between;gap:15px;padding:24px 0;margin:0 0 20px;list-style:none;border-bottom:1px solid var(--line)}.support-steps li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.support-steps span,.support-journey span{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;font-size:11px}.support-steps [aria-current]{color:var(--accent);font-weight:700}.support-steps [aria-current] span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.support-kind-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0}.support-kind-options button{display:flex;flex-direction:column;align-items:start;gap:10px;padding:22px 20px;border-radius:19px;text-align:left;white-space:normal;border-color:var(--line)}.support-kind-options button>span{width:37px;height:37px;display:grid;place-items:center;border-radius:13px;background:var(--soft);color:var(--accent);font-size:24px;font-weight:500}.support-kind-options strong{font-size:15px}.support-kind-options small{font-size:12px;font-weight:400;line-height:1.55}.support-kind-options [aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--soft)}.support-wizard-actions{display:flex;gap:16px;justify-content:space-between;margin-top:16px}.support-wizard-actions .primary{margin-left:auto;min-width:170px}.support-review{background:var(--soft);border-radius:20px;padding:24px}.support-review>span{font-size:12px;color:var(--accent)}.support-review h3{margin:18px 0 12px;overflow-wrap:anywhere}.support-review p{font-size:14px}.support-words{white-space:pre-wrap;overflow-wrap:anywhere}
.support-detail-head{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:28px 0}.support-detail-head>div>span{font-size:12px;color:var(--accent)}.support-detail-head h1{max-width:34ch;margin:14px 0}.support-detail-head p{font-size:13px;color:var(--muted)}.support-journey{list-style:none;display:flex;gap:0;padding:18px 28px;background:var(--paper);border:1px solid var(--line);border-radius:18px;margin:0 0 30px}.support-journey li{display:flex;gap:10px;align-items:center;flex:1;font-size:12px;color:var(--muted)}.support-journey .reached{color:var(--accent);font-weight:650}.support-journey .reached span{background:var(--soft);border-color:var(--accent)}
.support-workspace{display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:28px;align-items:start}.support-message{padding:24px 28px;border:1px solid var(--line);background:var(--paper);border-radius:22px;margin:18px 0}.support-message.original{margin-top:0}.support-message.mine{border-left:3px solid var(--accent)}.support-message header{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12px}.support-message header time{font-size:11px;color:var(--muted);flex:none}.support-message p{font-size:15px;margin:18px 0 0}.support-message>div{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;font-size:12px}.support-message.internal{background:var(--soft);border-style:dashed}.support-event{font-size:11px;color:var(--muted);padding:0 24px;margin:18px 0;overflow-wrap:anywhere}.support-event small{display:block;margin-top:4px;font-size:10px}.support-event.internal{border-left:2px dashed var(--line)}
.support-composer{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:28px;margin-top:24px}.support-composer>p{margin-bottom:22px}.support-composer-actions{display:flex;flex-wrap:wrap;gap:12px}.support-composer-actions button{font-size:13px}.support-composer details{margin-top:22px;border-top:1px solid var(--line)}.support-composer details form{margin-top:10px}
.support-routing,.support-targets{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:20px;margin-bottom:18px}.support-routing h3,.support-targets h3{margin:0 0 22px}.support-routing p{font-size:13px;color:var(--muted)}.support-routing form{margin-top:22px}.support-routing-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.support-targets>div{display:flex;flex-direction:column;gap:7px;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.support-targets>div span{font-size:11px;color:var(--muted)}.support-targets>div strong{font-size:14px;font-weight:650}.support-targets>div small{font-size:11px}
.support-policy-list>form{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px;margin:24px 0}.support-policy-list>p{color:var(--muted);font-size:14px}.support-policy-list form h3{margin:0}.support-parent-list{margin:32px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;padding:28px 0 0}.support-parent-list>div{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.support-parent-list small{display:block;margin-top:8px;font-size:12px}.support-parent-list .button{margin-top:24px}.admin-sections{flex-wrap:wrap}.admin-sections>a.button{border:0;font-size:14px;display:flex;align-items:center}
@media(max-width:1050px){.support-workspace{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.support-filter{grid-template-columns:1fr 1fr 1fr}.support-filter>label:first-child{grid-column:span 2}.support-heading-copy{align-items:start}.support-health{gap:18px;padding:18px}.support-pulse-counts button{padding:18px}.support-ticket-row{gap:12px}}
@media(max-width:760px){.support-main{margin-top:24px}.support-workspace{grid-template-columns:1fr}.support-workspace>aside{display:grid;grid-template-columns:1fr 1fr;gap:18px}.support-workspace>aside.support-routing{display:block}.support-health{grid-template-columns:1fr 1fr}.support-health .support-trend{grid-column:1/-1}.support-pulse-counts strong{font-size:32px}.support-wizard{padding:24px;margin:16px auto}.support-heading-copy .support-mark{width:60px;height:64px;border-radius:20px}.support-heading-copy{gap:18px}.support-queue{padding:24px}.support-detail-head{align-items:start}.support-profile-card{padding:24px;gap:18px}.support-profile-card>.button{flex:1;text-align:center;font-size:13px}}
@media(max-width:480px){.support-main{padding:0 16px}.support-main input,.support-main select,.support-main textarea{font-size:16px}.support-heading-copy{display:block}.support-heading-copy .support-mark{margin-bottom:24px}.support-heading{margin:20px 0 28px}.support-heading h1{font-size:32px}.support-pulse-counts{grid-template-columns:1fr 1fr}.support-pulse-counts button{padding:15px}.support-health{grid-template-columns:1fr;padding:22px;gap:24px}.support-health .support-trend{grid-column:auto}.support-pulse>details{padding-left:22px;padding-right:22px}.support-queue{padding:22px 16px}.support-filter{grid-template-columns:1fr 1fr!important}.support-filter>label:first-child{grid-column:1/-1}.support-filter button{width:100%}.support-more-filters[open]{grid-template-columns:1fr}.support-ticket-row{grid-template-columns:32px minmax(0,1fr) 10px;padding:22px 0;gap:12px}.support-ticket-symbol{width:30px;height:36px;border-radius:12px;font-size:23px}.support-ticket-state{grid-column:2;grid-row:2;align-items:start;flex-direction:row;flex-wrap:wrap;align-items:center}.support-ticket-row>span:last-child{grid-column:3;grid-row:1}.support-ticket-copy strong{font-size:15px}.support-ticket-copy small{line-height:1.55}.support-wizard{padding:20px 18px}.support-steps{gap:8px}.support-steps li{font-size:11px;gap:5px}.support-kind-options{gap:10px}.support-kind-options button{padding:16px 12px}.support-kind-options strong{font-size:14px}.support-kind-options small{font-size:11px}.support-wizard h2{font-size:26px}.support-detail-head{flex-direction:column;gap:6px}.support-detail-head h1{font-size:30px}.support-journey{padding:16px 10px}.support-journey li{flex-direction:column;gap:8px;font-size:10px}.support-message,.support-composer{padding:22px 18px}.support-message header{align-items:start;flex-direction:column;gap:7px}.support-message p{font-size:14px}.support-workspace>aside{display:block}.support-event{padding:0 14px}.support-pages{gap:10px}.support-pages button{padding:12px}.support-review{padding:20px}.support-profile-card{padding:20px}.support-policy-list>form{padding:22px 18px}}
@media(prefers-reduced-motion:no-preference){.support-ticket-row,.support-kind-options button{transition:background .15s ease,border-color .15s ease}.support-wizard{animation:help-arrival .2s ease-out}@keyframes help-arrival{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}

.support-main ~ #account-message{pointer-events:none;max-width:calc(100vw - 40px)}

/* Forms need a real layout for their gap to work. Keep related actions together. */
#account-main.support-main{max-width:1320px;padding-inline:clamp(20px,3vw,36px);margin-top:28px}
.support-main form{display:grid;gap:20px}.support-main form>button[type=submit]{justify-self:start;margin-top:4px}.support-main label{gap:9px;line-height:1.5}.support-main input,.support-main select{min-height:48px;padding:12px 14px;line-height:1.45}.support-main textarea{min-height:132px;line-height:1.65}
.support-heading{margin:28px 0}.support-heading-copy{gap:22px}.support-heading h1{margin:8px 0 12px}.support-heading-copy p:last-child{margin-top:10px}.support-workspace{grid-template-columns:minmax(0,1fr) 350px;gap:28px}.support-conversation{min-width:0}.support-side{display:grid;gap:24px}.support-side>section{margin:0}.support-message,.support-composer{padding:28px 30px}.support-message{margin:0 0 20px}.support-message header{line-height:1.5}.support-message p{line-height:1.7;max-width:74ch}.support-event{margin:16px 0;padding:4px 22px;border-left:2px solid var(--line);font-size:12px;line-height:1.6}.support-event small{font-size:11px}.support-composer{margin-top:24px}.support-composer h2{font-size:26px;margin-bottom:12px}.support-composer>p{margin:0 0 24px}.support-composer-actions{padding-top:20px;border-top:1px solid var(--line);gap:12px;align-items:center}.support-composer-actions button{padding:12px 18px;line-height:1.4;min-height:46px}.support-composer details{margin-top:24px;padding-top:4px}.support-composer details form{margin-top:16px}.support-routing,.support-targets{padding:26px}.support-routing h3,.support-targets h3{margin-bottom:20px}.support-routing form{margin-top:20px}.support-routing-pair{gap:16px}.support-routing>p.small{margin:20px 0 0}.support-targets>div{padding-bottom:16px;margin-bottom:16px;gap:8px}.support-targets>div span{font-size:12px}.support-targets>div strong{font-size:15px;line-height:1.5}.support-target-help summary{font-size:12px;padding:8px 0;min-height:44px}.support-target-help p{margin:8px 0 0;font-size:12px}.support-policy-list>form{margin:0;padding:26px}.support-policy-list{display:grid;gap:20px;align-content:start}.support-policy-list>h2{margin:0}.support-policy-list>p{margin:0 0 4px}.support-policy-list form>button{margin-top:4px}.support-workspace>aside.support-routing{margin-bottom:0}.support-filter .support-more-filters{margin:0}.support-filter>button[type=submit]{margin:0;justify-self:stretch}.support-queue{padding:28px 30px}.support-ticket-copy>span{flex-wrap:wrap}.support-health{gap:28px;padding:26px 30px}
@media(max-width:1100px){.support-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:24px}.support-message,.support-composer{padding:24px}.support-routing,.support-targets{padding:22px}.support-main select{font-size:14px}}
@media(max-width:850px){.support-workspace{grid-template-columns:1fr}.support-workspace>.support-side{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.support-workspace>.support-routing{max-width:none}.support-heading-copy{align-items:start}.support-heading .account-actions{gap:12px}.support-composer-actions{justify-content:flex-start}.support-journey{margin-bottom:24px}}
@media(max-width:560px){.support-workspace>.support-side{grid-template-columns:1fr}.support-message,.support-composer,.support-routing,.support-targets{padding:22px 20px}.support-composer-actions{align-items:stretch}.support-composer-actions button{flex:1 1 160px}.support-main form>button[type=submit]{justify-self:stretch}.support-queue{padding:22px 18px}.support-main input,.support-main select,.support-main textarea{font-size:16px}.support-main .support-filter{gap:18px!important}.support-policy-list>form{padding:22px 20px}.support-event{margin:16px 0;padding:4px 16px}.support-composer h2{font-size:24px}.support-journey{padding:18px 12px}.support-detail-head h1{font-size:30px}.support-routing-pair{gap:14px}}
.support-routing form+a{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;line-height:1.5}

.daily-joke{display:flex;gap:16px;background:var(--paper,#fff);border:2px solid var(--line,#d9e4f5);border-left:7px solid #e7b646;border-radius:22px;padding:20px 24px;box-shadow:0 6px 0 var(--soft,#eaf0fc);margin-top:24px;text-align:left}.daily-joke>span{font-size:42px;color:#b97e07;line-height:1}.daily-joke p{font-size:12px;font-weight:800;color:var(--accent,#254ccb);margin:0 0 4px}.daily-joke h2{font-size:19px;margin:0 0 10px}.daily-joke blockquote{font-size:18px;line-height:1.5;margin:0;font-weight:650}.care-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.care-metrics article{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:24px}.care-metrics strong{display:block;font-size:36px;color:var(--accent)}.care-metrics span{display:block;margin-top:8px}.care-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.care-columns .account-card{margin:0}.care-incident,.care-notice{border-top:1px solid var(--line);padding:20px 0}.care-incident summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}.care-incident small{display:block;margin-top:8px}.care-incident blockquote{margin:20px 0;padding:16px;background:var(--soft);border-radius:12px;overflow-wrap:anywhere;white-space:pre-wrap}.care-incident form{max-width:640px}.care-columns+section{margin-top:24px}@media(max-width:800px){.care-columns{grid-template-columns:1fr}.care-metrics{grid-template-columns:1fr 1fr}.daily-joke{padding:16px;gap:12px}.daily-joke blockquote{font-size:16px}}

.admin-sections{flex-wrap:wrap}.care-metrics article,.care-columns>*{min-width:0}.care-incident summary{overflow-wrap:anywhere}.daily-joke{max-width:540px;margin:22px auto 0}.daily-joke h2{font-size:18px!important;text-align:left}.daily-joke blockquote{text-wrap:pretty}

/* A joke gets a setup, a punchline, and an explicit shuffle — never a date lock. */
.daily-joke .joke-copy{min-width:0;flex:1}.daily-joke blockquote{min-height:104px;font-size:16px;font-weight:500;line-height:1.55}.daily-joke blockquote>span,.daily-joke blockquote>strong{display:block}.daily-joke blockquote>strong{font-size:17px;font-weight:650;margin-top:10px;line-height:1.5}.daily-joke [data-another-joke]{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:18px;padding:9px 15px;font-size:12px;background:var(--soft);color:var(--accent);border-color:var(--line);border-radius:22px}.daily-joke [data-another-joke]:hover{background:var(--paper)}.daily-joke [data-another-joke]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#account-main:has(.care-metrics)>.account-card{margin-bottom:24px}.care-columns{margin-block:24px;gap:24px;align-items:start}.care-columns .account-card{padding:28px}.care-columns .account-card>p{margin:0 0 24px}.care-metrics{gap:20px}.care-metrics article{padding:24px}.care-metrics span{font-size:13px;color:var(--muted);line-height:1.5}.care-incident summary{line-height:1.5;padding-bottom:8px}.care-incident form{margin-top:24px}.care-incident .small{line-height:1.65}.care-notice p{overflow-wrap:anywhere}.care-columns .account-actions{margin-top:24px}
@media(max-width:800px){.care-columns{gap:20px}.care-columns .account-card{padding:24px}.care-metrics{gap:14px}.daily-joke blockquote{min-height:112px}}
@media(max-width:480px){.daily-joke{padding:20px 18px;gap:12px}.daily-joke>span{font-size:30px}.daily-joke blockquote{font-size:15px}.daily-joke blockquote>strong{font-size:16px}.care-columns .account-card{padding:22px 20px}.care-metrics article{padding:20px 16px}.care-metrics strong{font-size:32px}.care-metrics span{font-size:12px}}
.care-columns form+h3{margin:28px 0 12px;padding-top:24px;border-top:1px solid var(--line)}

/* A quiet family reading space: story first, evidence on demand. */
.family-compass{color-scheme:light}[data-mode=dark] .family-compass{color-scheme:dark}
.family-compass{--family-teal:#28766e;--family-teal-soft:#e5f3ee;--family-gold:#98661c;--family-gold-soft:#fff3d5;display:grid;gap:26px;color:var(--ink);max-width:1180px;margin:auto}
.family-compass *{min-width:0}.family-compass h1,.family-compass h2,.family-compass h3{color:var(--ink)}.family-compass p{color:var(--muted);margin:10px 0}.family-compass h2{font-size:clamp(23px,2.2vw,30px);letter-spacing:-.025em;margin-bottom:12px}.family-compass small{color:var(--muted);line-height:1.6}.family-compass .family-eyebrow{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}.family-compass .account-card{box-shadow:none;border-radius:26px;padding:30px;margin:0}.family-title{display:flex;gap:30px;align-items:center;justify-content:space-between;margin:12px 0 0}.family-title h1{font-size:clamp(32px,4.6vw,54px);margin:10px 0 14px}.family-title>div{max-width:690px}.family-title p{max-width:57ch}.family-compass-mark{display:grid;place-items:center;width:100px;height:100px;background:var(--soft);border:1px solid var(--line);border-radius:30% 45% 35% 45%;transform:rotate(-6deg);flex:none;color:var(--accent);box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 12%,transparent)}.family-compass-mark svg{width:70%;height:70%;transform:rotate(6deg)}
.family-toolbar{display:flex;align-items:end;gap:14px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--paper);flex-wrap:wrap}.family-toolbar label:first-child{flex:1;min-width:160px}.family-toolbar label{font-size:12px}.family-toolbar button{font-size:13px;white-space:nowrap}.family-learner{display:flex;gap:20px;align-items:center;padding:8px 6px}.family-learner>span:first-child{font-size:48px;display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:var(--soft);flex:none}.family-learner h2{margin:4px 0;font-size:32px}.family-learner p{margin:4px 0;font-size:14px}.family-private{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap;align-self:flex-start;padding-top:16px}
.family-stories{display:grid;grid-template-columns:1fr 1fr;gap:20px}.family-stories article{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:30px 30px 26px;overflow:hidden}.family-stories h2{font-size:25px;max-width:80%;margin:18px 0 12px}.family-stories p:not(.family-eyebrow){max-width:52ch;font-size:15px;line-height:1.75}.family-stories small{display:block;font-size:12px;border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.family-story-icon{display:grid;place-items:center;color:var(--family-teal);background:var(--family-teal-soft);border-radius:18px;width:52px;height:52px;float:right;margin-left:10px}.family-story-icon svg{width:34px;height:34px}.family-stories article:nth-child(2) .family-story-icon{color:var(--family-gold);background:var(--family-gold-soft)}
.family-section-title{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.family-section-title p{max-width:57ch}.family-period,.family-rule{font-size:12px;color:var(--muted);white-space:nowrap}.family-week-body{display:grid;grid-template-columns:1.6fr 1fr;gap:42px;align-items:center}.family-week-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;text-align:center}.family-week-bars>div{display:grid;gap:10px}.family-week-bars strong{font-size:15px;color:var(--ink)}.family-week-bars span{font-size:11px;color:var(--muted)}.family-bar-track{height:104px;background:var(--soft);border-radius:12px;display:flex;align-items:flex-end;overflow:hidden}.family-bar-track i{display:block;width:100%;height:var(--fill);background:linear-gradient(0deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--paper)));border-radius:12px;min-height:2px}.family-week-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}.family-week-numbers>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px}.family-week-numbers dd{margin:0;font-size:34px;font-weight:750;letter-spacing:-.04em}.family-week-numbers dt{font-size:12px;line-height:1.5;color:var(--muted)}.family-week-numbers small{font-size:15px;font-weight:400}.family-week>.small{border-top:1px solid var(--line);padding-top:18px;margin:25px 0 0}
.family-plan{border-top:4px solid var(--accent)!important}.family-plan-symbol{height:65px;width:65px;color:var(--family-teal);flex:none}.family-plan-symbol svg{height:100%;width:100%}.family-plan-choose{display:grid;grid-template-columns:1fr 1fr;gap:32px}.family-choice-reason{font-size:14px;line-height:1.75;margin:18px 0!important}.family-choice-reason strong{color:var(--ink)}.family-conversation{background:var(--soft);border-radius:20px;padding:25px}.family-conversation h3{font-size:23px}.family-conversation p{font-size:14px}.family-conversation blockquote{margin:20px 0;padding:0 0 0 16px;border-left:3px solid var(--accent);font-size:19px;line-height:1.5;color:var(--ink)}.family-current-plan{border-bottom:1px solid var(--line);margin:0 0 26px;padding:0 0 25px}.family-current-plan h3{font-size:20px}.family-current-plan p{font-size:14px}.family-plan-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:25px 0}.family-plan-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.family-plan-steps span{height:30px;width:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}.family-plan-steps .done{color:var(--family-teal)}.family-plan-steps .done span{background:var(--family-teal-soft);border-color:var(--family-teal)}
.family-activity{border-top:1px solid var(--line);padding:20px 0}.family-activity summary{display:flex;align-items:center;gap:15px;justify-content:space-between;cursor:pointer;list-style:none}.family-activity summary:after{content:'+';color:var(--accent);font-size:22px;margin-left:4px}.family-activity[open] summary:after{content:'−'}.family-activity summary>span:first-child{flex:1}.family-activity summary strong{font-size:16px;display:block}.family-activity small{display:block;font-size:12px;margin-top:5px}.family-signal{font-size:11px!important;border-radius:30px;padding:7px 10px;background:var(--soft);color:var(--muted);line-height:1.5}.family-signal[data-signal=steady]{background:var(--family-teal-soft);color:var(--family-teal)}.family-signal[data-signal=revisit]{background:var(--family-gold-soft);color:var(--family-gold)}.family-activity-details{padding-top:12px;max-width:72ch;font-size:14px}.family-method{border-top:1px solid var(--line);padding-top:20px;font-size:13px}.family-method summary{font-weight:700;color:var(--accent);cursor:pointer}.family-soft-empty{background:var(--soft);padding:24px;border-radius:18px}.family-soft-empty p{font-size:14px;margin-bottom:0}.family-soft-empty .account-actions{margin:var(--gap-action) 0 0}.family-school-body{display:grid;gap:var(--gap-cards)}.family-school-body>.account-actions{margin:0}.family-school summary{cursor:pointer;font-size:14px;font-weight:650}.family-school-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.family-school-grid>article{border:1px solid var(--line);border-radius:20px;padding:24px}.family-school-grid h3{font-size:17px}.family-school-grid p{font-size:13px}.family-school-score{font-size:32px;color:var(--ink)}.family-empty{display:flex;gap:35px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:40px}.family-empty>span{width:130px;height:130px;color:var(--family-teal);flex:none}.family-empty svg{width:100%;height:100%}.family-footer{padding:18px 4px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:12px;color:var(--muted)}.family-footer p{font-weight:700;width:100%;font-size:15px;margin:0;color:var(--ink)}.family-footer a{margin-left:auto}
[data-mode=dark] .family-compass{--family-teal:#a3dbca;--family-teal-soft:#203b3a;--family-gold:#e7ca91;--family-gold-soft:#393326}
@media(max-width:900px){.family-week-body{grid-template-columns:1fr;gap:25px}.family-week-numbers{gap:24px;padding-top:20px;border-top:1px solid var(--line)}.family-private{display:none}.family-toolbar button{flex:1}.family-title{gap:18px}.family-compass-mark{width:75px;height:75px}.family-stories h2{font-size:22px}}
@media(max-width:640px){.family-compass{gap:20px}.family-title h1{font-size:34px}.family-title p{font-size:14px}.family-compass-mark{display:none}.family-toolbar{padding:15px;gap:12px}.family-toolbar label:first-child{min-width:100%;}.family-toolbar label:nth-child(2){flex:1;min-width:100%}.family-toolbar button{padding:10px;font-size:12px}.family-stories,.family-plan-choose,.family-school-grid{grid-template-columns:1fr}.family-compass .account-card,.family-stories article{padding:22px;border-radius:22px}.family-stories h2{max-width:none}.family-learner{gap:14px;padding:0}.family-learner>span:first-child{width:62px;height:62px;font-size:38px;border-radius:19px}.family-learner h2{font-size:26px}.family-learner p{font-size:12px}.family-section-title{flex-wrap:wrap;margin-bottom:20px}.family-section-title .family-plan-symbol{display:none}.family-compass h2{font-size:23px}.family-week-bars{gap:9px}.family-bar-track{height:80px}.family-week-numbers dd{font-size:30px}.family-week-numbers{gap:15px}.family-conversation{padding:22px}.family-plan-steps{gap:8px}.family-plan-steps li{flex-direction:column;align-items:flex-start;font-size:11px}.family-activity summary{flex-wrap:wrap;gap:9px}.family-activity summary>span:first-child{flex-basis:70%}.family-signal{font-size:10px!important}.family-empty{padding:25px;flex-direction:column;gap:18px;align-items:flex-start}.family-empty>span{width:70px;height:70px}.family-footer a{margin-left:0}.family-period{white-space:normal}}
@media print{body:has(.family-compass){background:#fff!important;color:#182c45!important}.account-header,#account-message,.family-toolbar,.family-compass button,.family-footer a{display:none!important}body:has(.family-compass) main{padding:0;max-width:none;margin:0}.family-compass{--ink:#182c45;--muted:#43546b;--paper:#fff;--soft:#f4f7fb;--line:#ccd7e4;--accent:#284d9d;gap:14px}.family-title h1{font-size:30px}.family-compass .account-card,.family-stories article{break-inside:avoid;border-radius:10px;padding:18px}.family-plan-choose{display:block}.family-plan-choose>div{display:none}.family-footer{font-size:10px}.family-activity{break-inside:avoid}.family-compass-mark{display:none}}
.family-teacher-note{margin:0 auto 16px;max-width:1200px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}

/* Choosing a learner when there are hundreds of them. */
.family-find{display:grid;gap:6px;min-width:min(420px,100%)}
.family-find input{width:100%}
.family-find .small{margin:0;font-size:11.5px}
/* The AI tutor for this child, and the parent's own switch (app/family-learning-ui.js). */
.family-sparki{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;margin:18px 0}
.family-sparki h2{margin:2px 0 6px}
.family-sparki p{margin:0 0 6px}
.family-sparki-face{width:72px;display:block}
.family-sparki-face .sparki-character{width:100%}
.family-sparki[data-state=off],.family-sparki[data-state=paused]{background:var(--soft)}
@media(max-width:700px){.family-sparki{grid-template-columns:56px minmax(0,1fr)}.family-sparki-face{width:56px}.family-sparki button{grid-column:1/-1}}
/* This week beside the week before (familyGrowth): Today's challenge and Table Trail, told as practice. */
.family-growth-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap-cards)}
.family-growth-part{display:grid;gap:var(--space-2);align-content:start;padding:var(--pad-box);border:1px solid var(--line);border-radius:16px}
.family-growth-part h3{margin:0;font-size:17px}.family-growth-part p{margin:0;font-size:15px;line-height:1.55}
.family-growth-list{display:grid;gap:var(--gap-items);margin:var(--space-1) 0 0;padding:0;list-style:none}
.family-growth-list li{display:grid;gap:var(--space-1);padding:var(--pad-row);border-radius:12px;background:var(--soft)}
.family-growth-list li span{font-size:14px;line-height:1.5}
.family-growth>.small{border-top:1px solid var(--line);padding-top:var(--space-4);margin:var(--space-5) 0 0}

/* Scoped to the family connection desk; existing learner themes remain intact. */
.connections{max-width:1160px;margin:auto;display:grid;gap:26px;color-scheme:light}.connections *{min-width:0}.connections h1,.connections h2,.connections h3,.connections h4{color:var(--ink)}.connections h1{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.04em;margin:10px 0 16px}.connections h2{font-size:27px;letter-spacing:-.02em;margin:0 0 12px}.connections h3{font-size:20px;margin:0 0 7px}.connections h4{font-size:16px;margin:0}.connections p{color:var(--muted);line-height:1.7;margin:10px 0}.connections .cx-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:var(--accent);margin:0 0 12px}.cx-hero{display:flex;align-items:center;gap:30px;justify-content:space-between;padding:14px 2px 0}.cx-hero>div:first-child{max-width:640px}.cx-illustration{display:flex;align-items:center;flex:none;transform:rotate(-4deg);padding:26px 8px}.cx-illustration span{display:grid;place-items:center;width:70px;height:80px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:0 7px 0 var(--soft);font-size:36px;color:var(--accent)}.cx-illustration span:nth-of-type(2){background:var(--soft);transform:translateY(-15px);color:var(--ink)}.cx-illustration i{width:20px;border-top:2px dashed var(--line)}.cx-flow{list-style:none;margin:0;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.cx-flow li{display:flex;gap:13px;align-items:center;font-size:14px;font-weight:700}.cx-flow b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);flex:none}.cx-flow small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:6px}.cx-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:4px 8px}.cx-metrics>div{display:grid;gap:8px}.cx-metrics strong{font-size:30px;letter-spacing:-.04em}.cx-metrics span{font-size:12px;color:var(--muted)}.cx-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}.cx-tabs button{background:transparent;box-shadow:none;border-color:transparent;font-size:14px;min-height:44px;padding:12px 17px}.cx-tabs button[aria-current=page]{color:var(--accent);background:var(--soft);border-color:var(--line)}#cx-panel{display:grid;gap:26px}.connections .account-card{margin:0;padding:32px;box-shadow:none;border-radius:26px}.cx-section-head{margin-bottom:26px}.cx-section-head p{max-width:72ch;font-size:14px}.connections form{display:grid;gap:18px;margin-top:18px;max-width:720px}.connections form button{justify-self:start;min-height:44px}.connections label{display:grid;gap:8px;font-size:13px;font-weight:650}.connections input,.connections select{margin:0;width:100%;min-height:46px}.connections .cx-check{display:flex;flex-direction:row;align-items:flex-start;gap:11px;line-height:1.65;font-weight:500}.cx-check input{width:19px;min-width:19px;height:19px;min-height:0;margin-top:2px;accent-color:var(--accent)}.connections fieldset{border:1px solid var(--line);padding:20px;border-radius:18px;display:grid;gap:15px;min-width:0}.connections legend{font-size:14px;font-weight:700;padding:0 8px}.cx-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cx-record{padding:24px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.cx-record:first-child{border-top:0;padding-top:0}.cx-record:last-child{padding-bottom:0}.cx-record-head{display:flex;align-items:flex-start;gap:18px;justify-content:space-between}.cx-record-head p{margin-bottom:0;font-size:13px}.cx-badge{font-size:11px;padding:7px 11px;border-radius:30px;background:var(--soft);color:var(--muted);text-transform:capitalize;white-space:nowrap;flex:none}.cx-badge[data-state=active],.cx-badge[data-state=connected],.cx-badge[data-state=accepted]{color:#21675a;background:#e5f3ee}.cx-badge[data-state=pending],.cx-badge[data-state=invited]{color:#785516;background:#fff3d8}.cx-permissions{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.8;margin:16px 0}.cx-actions{display:flex;gap:12px;flex-wrap:wrap}.cx-note{background:var(--soft);padding:18px 20px;border-radius:16px;font-size:14px;margin:18px 0}.cx-note p{margin-bottom:0}.connections details{margin-top:22px}.connections details summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--accent);line-height:1.6}.connections .cx-separate summary{font-size:12px;color:var(--muted)}.cx-invitation{border:1px solid var(--line)!important;border-radius:20px;padding:24px!important;margin-bottom:18px;background:var(--paper)}.cx-school-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.cx-school-grid>.cx-record{border:1px solid var(--line);border-radius:20px;padding:24px}.cx-school-grid>.cx-empty{grid-column:1/-1}.cx-empty{background:var(--soft);border-radius:20px;padding:28px}.cx-empty>span{color:var(--accent);font-size:32px;display:block;margin-bottom:14px}.cx-empty p{max-width:65ch;font-size:14px;margin-bottom:0}.cx-learner-school{padding:28px 0;border-top:1px solid var(--line)}.cx-learner-school:first-child{padding-top:0;border:0}.cx-learner-school:last-child{padding-bottom:0}.cx-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding:24px 4px;font-size:12px;color:var(--muted)}.cx-footer span{font-weight:650}.connections .small{font-size:12px}.connections button:focus-visible,.connections summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
[data-mode=dark] .connections{color-scheme:dark}[data-mode=dark] .cx-badge[data-state=active],[data-mode=dark] .cx-badge[data-state=connected],[data-mode=dark] .cx-badge[data-state=accepted]{color:#b1e5d5;background:#203e37}[data-mode=dark] .cx-badge[data-state=pending],[data-mode=dark] .cx-badge[data-state=invited]{color:#f1d49b;background:#3b3323}
@media(max-width:860px){.cx-illustration{display:none}.cx-school-grid{grid-template-columns:1fr}.cx-flow{gap:15px;padding:18px}.cx-flow li{align-items:flex-start;font-size:13px}.cx-record-head{gap:12px}}
@media(max-width:600px){.connections{gap:20px}.connections h1{font-size:36px}.connections h2{font-size:24px}.connections .account-card{padding:23px;border-radius:22px}.cx-hero p{font-size:14px}.cx-flow{grid-template-columns:1fr;gap:18px;padding:20px}.cx-flow small{margin-top:3px}.cx-metrics{grid-template-columns:1fr 1fr;gap:20px}.cx-metrics strong{font-size:27px}.cx-tabs{gap:6px}.cx-tabs button{flex:1 1 42%;padding:12px 9px;font-size:12px}.cx-form-pair{grid-template-columns:1fr;gap:18px}.cx-record-head{flex-wrap:wrap}.cx-record-head h3{font-size:19px}.connections .cx-badge{font-size:10px}.cx-invitation{padding:20px!important}.connections form button{max-width:100%;white-space:normal}.cx-note,.cx-empty{padding:20px}.cx-footer{padding:18px 0}.cx-actions{gap:10px}}

@media(max-width:600px){.connections input:not([type=checkbox]),.connections select{font-size:16px}}

/* One adult account, with a separate branch for every child's permissions. */
.cx-family-group{border:1px solid var(--line);border-radius:22px;overflow-wrap:anywhere}
.cx-family-group+.cx-family-group{margin-top:24px}
.cx-family-head{display:flex;align-items:center;gap:16px;background:var(--soft);padding:22px 24px;border-radius:21px 21px 0 0;border-bottom:1px solid var(--line)}
.cx-family-head h3{margin:0}.cx-family-head p{font-size:13px;margin:5px 0 0}
.cx-family-avatar{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--accent);font-size:16px;font-weight:750}
.cx-family-children{padding:0 24px 0 38px;margin-left:24px;border-left:2px solid var(--line)}
.cx-family-child{position:relative;padding:24px 0}.cx-family-child+.cx-family-child{border-top:1px solid var(--line)}
.cx-family-child:before{content:'';position:absolute;top:33px;left:-39px;width:21px;border-top:2px solid var(--line)}
.connections .cx-family-child h4{font-size:19px;line-height:1.4}
.cx-family-child .cx-record-head p{margin:3px 0 0;font-size:12px;text-transform:capitalize}
.cx-scope-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0}
.cx-scope-tags li{font-size:12px;line-height:1.5;color:var(--muted);background:var(--soft);border-radius:7px;padding:5px 9px}
.connections .cx-child-details{margin-top:14px}.connections .cx-child-details>summary{font-size:12px;min-height:32px;align-content:center}
@media(max-width:600px){.cx-family-head{padding:18px 16px;gap:12px}.cx-family-children{padding:0 14px 0 20px;margin-left:18px}.cx-family-child:before{left:-21px;width:12px}.cx-family-child{padding:20px 0}.connections .cx-family-child h4{font-size:18px}.cx-scope-tags{gap:6px}.cx-scope-tags li{font-size:11px}.cx-family-head h3{font-size:19px}.cx-family-head p{font-size:12px}}
/* A focused welcome desk: a real sequence, a live summary, a clear next step. */
.cxc-entry-action{align-items:center;margin:24px 0 16px}.cxc-entry-action span{font-size:12px;color:var(--muted)}
.cxc-workspace{border:1px solid var(--line);border-radius:28px;background:var(--paper);overflow:hidden;box-shadow:0 15px 45px color-mix(in srgb,var(--ink) 4%,transparent)}
.cxc-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 32px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.cxc-top button{font-size:12px;background:transparent;box-shadow:none;min-height:44px}.cxc-steps{list-style:none;display:flex;gap:26px;margin:0;padding:30px 38px;border-bottom:1px solid var(--line)}
.cxc-steps li{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);flex:1;font-weight:650}.cxc-steps b{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:12px}
.cxc-steps [aria-current=step]{color:var(--accent)}.cxc-steps [aria-current=step] b{background:var(--accent);border-color:var(--accent);color:var(--paper)}.cxc-steps [data-complete=true] b{color:var(--accent);background:var(--soft)}
.cxc-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding:40px}.cxc-main h2{font-size:clamp(25px,3vw,34px);line-height:1.2;max-width:25ch}.cxc-main>p{font-size:14px;max-width:60ch}.cxc-main form{gap:22px}.cxc-main .cx-actions{margin-top:8px}
.cxc-summary{align-self:start;background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:26px}.cxc-summary p{font-size:13px}.cxc-summary .cx-permissions{font-size:12px;padding-left:17px}.cxc-summary .cx-note{padding:0}.cxc-summary h3{line-height:1.35}
.cxc-person{display:flex;gap:14px;align-items:center}.cxc-person>span{display:grid;place-items:center;flex:none;width:48px;height:52px;border-radius:16px;color:var(--accent);background:var(--paper);border:1px solid var(--line);font-size:24px;font-weight:700;box-shadow:0 4px 0 var(--line)}.cxc-person div{display:grid;gap:5px;overflow-wrap:anywhere}.cxc-person small{font-size:11px;color:var(--muted)}.cxc-person strong{font-size:16px;line-height:1.35}.cxc-join{padding:14px 0 14px 17px;color:var(--accent);font-size:23px}.cxc-scope{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;font-size:13px}.cxc-school{display:grid;gap:9px;font-size:16px;overflow-wrap:anywhere}.cxc-school>span{font-size:32px;color:var(--accent)}.cxc-school small{font-size:12px;color:var(--muted)}
.cxc-review{margin:25px 0}.cxc-review>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}.cxc-review dt{color:var(--muted)}.cxc-review dd{margin:0;font-weight:600;overflow-wrap:anywhere}.cxc-review .cx-permissions{margin:0;font-weight:400}.cxc-review dd li{margin:0 0 7px}
.cxc-help,.cxc-create{border-top:1px solid var(--line);padding-top:22px;margin-top:30px!important}.cxc-help p{font-size:13px}.cxc-draft-note{border-top:1px solid var(--line);padding:20px 40px;margin:0!important;font-size:11px;line-height:1.6!important}.cxc-error:not(:empty){border-left:3px solid var(--accent);padding:14px 16px;background:var(--soft);font-size:13px}.cxc-error:empty{display:none}
.connections .cxc-receipt{padding:48px;max-width:820px;margin:0 auto;width:100%;box-sizing:border-box}.cxc-receipt>p{max-width:60ch}.cxc-receipt h2{font-size:34px;line-height:1.25}.cxc-seal{display:grid;place-items:center;width:58px;height:58px;background:var(--soft);color:var(--accent);border:1px solid var(--line);border-radius:20px;margin-bottom:28px;font-size:26px;box-shadow:0 5px 0 var(--line)}.cxc-next{list-style:none;margin:32px 0;padding:0;display:grid;gap:0}.cxc-next li{border-left:2px solid var(--line);padding:0 0 27px 22px;position:relative;display:grid;gap:8px;font-size:14px}.cxc-next li:before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}.cxc-next li:last-child{padding-bottom:0;border-color:transparent}.cxc-next span{font-size:13px;color:var(--muted);line-height:1.6}.cxc-resume{display:flex;align-items:center;justify-content:space-between;gap:20px}
@media(max-width:900px){.cxc-layout{grid-template-columns:minmax(0,1fr) 260px;gap:26px;padding:28px}.cxc-summary{padding:22px}.cxc-review>div{grid-template-columns:110px 1fr;gap:16px}}
@media(max-width:680px){.cxc-top{padding:16px 20px}.cxc-top>span{max-width:20ch}.cxc-steps{padding:22px 20px;gap:12px}.cxc-steps li{flex-direction:column;align-items:flex-start;gap:9px;font-size:11px;line-height:1.4}.cxc-layout{grid-template-columns:1fr;padding:26px 22px;gap:28px}.cxc-summary{padding:22px}.cxc-draft-note{padding:18px 22px}.cxc-review>div{grid-template-columns:1fr;gap:8px}.cxc-main .cx-actions{display:grid;grid-template-columns:1fr;width:100%}.cxc-main .cx-actions button{width:100%}.cxc-main .cx-actions button.primary{grid-row:1}.connections .cxc-receipt{padding:27px}.cxc-receipt h2{font-size:28px}.cxc-resume{align-items:stretch;flex-direction:column}}

.cxc-draft-note{max-width:none!important}.cxc-summary-toggle{display:none}
@media(max-width:680px){.cxc-summary-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;border:0;padding:0;background:transparent;box-shadow:none;font-size:14px;color:var(--accent);min-height:44px}.cxc-summary-content{display:none}.cxc-summary-toggle[aria-expanded=true]+.cxc-summary-content{display:block;margin-top:22px}.cxc-summary-toggle[aria-expanded=true] span{transform:rotate(180deg)}}

/* Teachers a parent approves: what the teacher said about themselves is labelled
   as theirs, and the notice sits inside the approval it governs. */
.cx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px;margin:10px 0}
.cx-facts div{min-width:0}.cx-facts dt{font-size:12px;color:var(--muted)}.cx-facts dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.cx-notice{margin:10px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--soft) 55%,transparent)}
.cx-notice p{margin:0 0 6px;font-size:14px;line-height:1.5}.cx-notice p:last-child{margin-bottom:0}
.cx-usernames{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cx-usernames code{font-size:15px;padding:2px 8px;border-radius:8px;background:var(--soft)}
/* A teacher request, decided in a guided journey: what they would see, beside what they never see. */
.cx-teacher-sees{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.cx-teacher-sees>div{border:1px solid var(--line);border-radius:18px;padding:16px 18px;background:var(--paper)}
.cx-teacher-sees>div:first-child{background:var(--soft)}
.cx-teacher-sees h3{font-size:14px;margin:0 0 10px}
.cx-teacher-sees ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px}
.cx-teacher-sees li{display:flex;gap:10px;align-items:baseline}
.cx-teacher-sees li::before{content:'✓';font-weight:800;color:var(--accent)}
.cx-teacher-sees>div+div li::before{content:'✕';color:var(--muted)}
.cx-usernames li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cx-copy{min-height:36px;padding:6px 14px;font-size:13px}
.cx-suggestion .cx-actions{margin-top:10px}
.cx-suggestion form{display:inline-flex}

/* One family at a time, with the way back to the board above it. */
.cx-back{margin:0 0 14px}
.cx-back button{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;
 font-weight:650;min-height:40px;padding:8px 14px;border-radius:10px;cursor:pointer;box-shadow:none}
.cx-back button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
/* Invite someone in your family (family-invites-ui.js) */
.family-invites form{display:grid;gap:12px;margin-top:10px}
.family-invite-children{display:grid;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.family-invite-child{display:grid;gap:6px}.family-invites .family-invite-child label{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:650;margin:0}.family-invites .family-invite-child input[type=checkbox]{width:20px;height:20px;min-height:0;margin:0;flex:none;padding:0}.family-invites .family-invite-child .family-invite-learning{padding-left:30px;font-size:13px;font-weight:500}
.family-invite-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.family-invite-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.family-invite-list li>div:first-child{display:grid;gap:2px}.family-invite-list span,.family-invite-list small{font-size:13px;color:var(--muted)}
.family-invite-actions{display:flex;gap:8px;flex-wrap:wrap}
.request-invited{padding:12px 16px;border-radius:14px;background:var(--soft);font-weight:600}
@media(max-width:600px){.family-invite-list li{flex-direction:column;align-items:flex-start}}

.copilot-panel{margin:1.5rem 0 2rem;padding:clamp(1.25rem,3vw,2.5rem);border:1px solid var(--line,#d8e4f4);border-radius:28px;background:var(--paper,#fff);color:var(--ink,#182d49);min-width:0}
.copilot-panel>header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem}.copilot-panel>header p{max-width:65ch}.copilot-panel h2{font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.2;margin:.4rem 0 .8rem}.copilot-mark{display:grid;place-items:center;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:20px;background:var(--soft,#edf3ff);color:var(--accent,#2848dc);font-size:2.5rem}
.copilot-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}.copilot-layout form{display:grid;gap:1rem;min-width:0}.copilot-layout label{display:grid;gap:.6rem}.copilot-layout textarea{width:100%;resize:vertical;min-height:120px;font:inherit;line-height:1.6;padding:14px 16px;border:1px solid var(--line,#b6c9df);border-radius:14px;background:var(--paper,#fff);color:var(--ink,#182d49)}.copilot-layout textarea:focus-visible{outline:3px solid var(--accent,#2848dc);outline-offset:3px}.copilot-prompts{display:flex;flex-wrap:wrap;gap:.5rem}.copilot-prompts button{font-size:.85rem;min-height:40px;text-align:left;white-space:normal;padding:.6rem .8rem;border-radius:12px}.copilot-layout .primary{justify-self:start;white-space:normal}.copilot-result{padding:clamp(1.1rem,2.4vw,1.75rem);border-radius:22px;background:var(--soft,#f3f7fe);min-width:0;overflow-wrap:anywhere}.copilot-result h3{margin:.3rem 0 .8rem;font-size:1.3rem;line-height:1.3}.copilot-fact{font-weight:700}.copilot-next{border-left:3px solid var(--accent,#2848dc);padding-left:1rem;margin:1.5rem 0}.copilot-sources{display:grid;gap:.65rem}.copilot-result a{font-size:.88rem;text-underline-offset:3px}.copilot-about{border-top:1px solid var(--line,#d8e4f4);padding-top:1rem;margin-top:1.75rem}.copilot-about summary{cursor:pointer;font-weight:700}.copilot-about p{max-width:90ch;font-size:.9rem;line-height:1.7}
@media(max-width:780px){.copilot-layout{grid-template-columns:1fr}.copilot-panel>header{align-items:start}.copilot-mark{width:2.7rem;height:2.7rem;font-size:2rem}.copilot-layout .primary{width:100%}}
@media print{.copilot-panel{display:none}}

/* ---- The Architect's conversation. One column, the newest at the bottom,
        the composer always under it. ---- */
.copilot-chat .copilot-thread{display:grid;gap:14px;align-content:start;max-height:min(62vh,720px);min-height:240px;overflow-y:auto;
 padding:clamp(12px,2vw,20px);border:1px solid var(--line,#d8e4f4);border-radius:22px;background:var(--bg,#f6f9fe);scroll-behavior:smooth}
.copilot-turn{display:flex;gap:10px;align-items:flex-start;min-width:0}
.copilot-turn.is-you{justify-content:flex-end}
.copilot-bubble{max-width:min(78%,68ch);min-width:0;padding:12px 16px;border-radius:18px;border:1px solid var(--line,#d8e4f4);
 background:var(--paper,#fff);color:var(--ink,#182d49);line-height:1.6;overflow-wrap:anywhere}
.copilot-bubble>:first-child{margin-top:0}.copilot-bubble>:last-child{margin-bottom:0}
.copilot-bubble p,.copilot-bubble ul,.copilot-bubble ol{margin:0 0 .6rem}.copilot-bubble ul,.copilot-bubble ol{padding-left:1.2rem}
.copilot-turn.is-you .copilot-bubble{background:var(--soft,#edf3ff);border-color:transparent;border-bottom-right-radius:6px}
.copilot-turn.is-sparki .copilot-bubble{border-bottom-left-radius:6px}
.copilot-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft,#edf3ff);color:var(--accent,#2848dc);font-size:16px}
.copilot-turn.is-thinking .copilot-bubble{color:var(--muted,#566982)}
.copilot-turn.is-thinking .copilot-avatar{animation:copilot-think 1.4s ease-in-out infinite}
@keyframes copilot-think{50%{transform:scale(1.12) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.copilot-turn.is-thinking .copilot-avatar{animation:none}.copilot-chat .copilot-thread{scroll-behavior:auto}}
.copilot-proposal{margin:.4rem 0 .7rem;padding:12px 14px;border:1px dashed var(--accent,#2848dc);border-radius:14px;background:var(--paper,#fff)}
.copilot-proposal[data-state=done]{border-style:solid;border-color:var(--success-ink,#20573f);background:var(--success-bg,#e2f4eb)}
.copilot-proposal[data-state=declined]{border-style:solid;border-color:var(--line,#d8e4f4);color:var(--muted,#566982)}
.copilot-proposal p{margin:0 0 .5rem}.copilot-proposal-actions{display:flex;flex-wrap:wrap;gap:8px}
.copilot-error{color:var(--caution-ink,#7a5200)}
.copilot-looked{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.copilot-looked span{color:var(--muted,#566982);margin-right:2px}
.copilot-looked a{padding:3px 10px;border-radius:999px;background:var(--soft,#edf3ff);text-decoration:none;font-weight:650}
.copilot-meta{font-size:11px;color:var(--muted,#566982)}
.copilot-compose{display:grid;gap:10px;margin-top:14px}
.copilot-compose textarea{width:100%;resize:vertical;min-height:56px;font:inherit;line-height:1.5;padding:12px 14px;border:1px solid var(--line,#b6c9df);border-radius:14px;background:var(--paper,#fff);color:var(--ink,#182d49)}
.copilot-compose textarea:focus-visible{outline:3px solid var(--accent,#2848dc);outline-offset:3px}
.copilot-compose-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.copilot-compose .small{margin:0}
.copilot-chat .copilot-prompts{margin-top:.4rem}
.copilot-chat .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.copilot-bubble{max-width:92%}.copilot-chat .copilot-thread{max-height:none}}

/* Responsibilities: the copilot's standing work and what it delivered (app/copilot-ui.js). */
.copilot-duties .duty-head h2{margin:.2rem 0 .4rem}
.copilot-duties .duty-head p{margin:0;max-width:70ch}
.duty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-top:18px}
.duty-card{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--line,#d8e4f4);border-radius:18px}
.duty-card[data-on=true]{border-color:color-mix(in srgb,var(--accent,#2848dc) 45%,var(--line,#d8e4f4))}
.duty-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.duty-top h3,.duty-card p{margin:0}
.duty-actions{display:flex;flex-wrap:wrap;gap:8px}
.duty-cadence{display:grid;gap:4px;font-weight:600}
.duty-cadence select{width:100%}
.duty-status{color:var(--muted,#5b6b86);display:flex;align-items:center;gap:8px}
.duty-spinner{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:duty-spin .8s linear infinite}
@keyframes duty-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.duty-spinner{animation:none}}
.duty-delivery summary{cursor:pointer;font-weight:700}
.duty-delivery .copilot-bubble{margin-top:10px}
.duty-done{color:var(--muted,#5b6b86)}

/* ---- The Operations desk (copilot-ui.js, 24 September 2026). What needs you leads; beside it
        what waits for your approval, Sparki's duties as switches, and Sparki in a side panel. ---- */
.desk{--crit:#8a2432;--crit-bg:#fbe9ec;display:grid;gap:18px;max-width:1500px;margin:auto}
:root[data-mode=dark] .desk{--crit:#ffb3bf;--crit-bg:#3d1d27}
.desk .desk-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.desk .desk-top h1{margin:0}
.desk .desk-top p{margin:6px 0 0;color:var(--muted)}
.desk .desk-body{display:grid;gap:18px;min-width:0}
.desk .desk-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.desk .desk-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.desk .desk-stat{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none}
.desk a.desk-stat:hover{border-color:var(--accent)}
.desk .desk-stat span{font-size:12.5px;font-weight:700;color:var(--muted)}
.desk .desk-stat strong{font-size:26px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.desk .desk-stat small{font-size:12.5px;color:var(--muted)}
.desk .desk-stat.is-crit strong{color:var(--crit)}
.desk .desk-stat.is-good strong{color:var(--success-ink)}
.desk .desk-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:18px;align-items:start}
.desk .desk-card{display:grid;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);min-width:0}
.desk .desk-card-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.desk .desk-card-head h2{margin:0;font-size:18px}
.desk .desk-card>p{margin:0}
.desk .desk-side{display:grid;gap:14px}
.desk .desk-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.desk .desk-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-size:13.5px;font-weight:700}
.desk .desk-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
:root[data-mode=dark] .desk .desk-tabs button{background:none;border-color:transparent}
:root[data-mode=dark] .desk .desk-tabs button[aria-selected=true]{border-bottom-color:var(--accent)}
.desk .desk-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.desk .desk-dot.is-on{background:var(--success-ink)}.desk .desk-dot.is-failed{background:var(--caution-ink)}.desk .desk-dot.is-running{background:var(--accent)}
.desk .desk-delivery{display:grid;gap:12px;min-width:0}
.desk .desk-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.desk .desk-item{display:grid;grid-template-columns:104px minmax(0,1fr) auto;grid-template-areas:"pill title go" "pill detail go";gap:4px 14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.desk .desk-item.is-point{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title go" "detail go"}
.desk .desk-item .desk-pill{grid-area:pill;justify-self:start;margin-top:2px}
.desk .desk-item h3{grid-area:title;margin:0;font-size:15px;line-height:1.35}
.desk .desk-item p{grid-area:detail;margin:0;color:var(--muted);font-size:13.5px}
.desk .desk-item .desk-go{grid-area:go;align-self:center}
.desk .desk-go .button{min-height:36px;padding:7px 13px;font-size:13px;border-radius:10px;white-space:nowrap}
.desk .desk-item code,.desk .desk-banner code{font-size:.9em;padding:1px 5px;border-radius:5px;background:var(--soft)}
.desk .desk-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.desk .desk-pill.is-crit{background:var(--crit-bg);color:var(--crit)}
.desk .desk-pill.is-warn{background:var(--caution-bg);color:var(--caution-ink)}
.desk .desk-pill.is-info{background:var(--soft);color:var(--accent)}
.desk .desk-text{padding:4px 2px}.desk .desk-text>:first-child{margin-top:0}
.desk .desk-banner{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--caution-bg);color:var(--caution-ink)}
.desk .desk-banner p{margin:0;max-width:none}
.desk .desk-working{display:flex;gap:10px;align-items:center;padding:18px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.desk .desk-empty{display:grid;gap:10px;justify-items:start;padding:18px;border:1px dashed var(--line);border-radius:14px}
.desk .desk-empty p{margin:0}
.desk .desk-sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;font-size:12.5px;color:var(--muted)}
.desk .desk-sources a{padding:2px 9px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.desk .desk-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
.desk .desk-earlier summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);min-height:32px}
.desk .desk-earlier section{display:grid;gap:8px;margin-top:10px}
.desk .desk-earlier h4{margin:0;font-size:13px;color:var(--muted)}
.desk .desk-proposal{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--soft)}
.desk .desk-proposal p{margin:0;font-size:13.5px}
.desk .desk-proposal button,.desk .desk-side .desk-row button{min-height:36px;padding:7px 13px;font-size:13px;border-radius:10px}
.desk .desk-duties{list-style:none;margin:0;padding:0;display:grid}
.desk .desk-duty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.desk .desk-duty:first-child{border-top:0;padding-top:2px}
.desk .desk-duty>div{display:grid;gap:2px;min-width:0}
.desk .desk-duty strong{font-size:14px}
.desk .desk-duty small{font-size:12.5px;color:var(--muted)}
.desk .desk-duty[data-state=failed] small{color:var(--caution-ink)}
.desk .desk-cadence select{min-height:32px;margin-top:4px;padding:3px 8px;font-size:12.5px;border-radius:8px;width:auto;max-width:100%}
.desk .desk-switch{position:relative;width:44px;min-height:26px;height:26px;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--soft)}
.desk .desk-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.desk .desk-switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.desk .desk-switch[aria-checked=true]::after{left:20px}
:root[data-mode=dark] .desk .desk-switch{background:var(--soft);border-color:var(--line)}
:root[data-mode=dark] .desk .desk-switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
@media(prefers-reduced-motion:no-preference){.desk .desk-switch::after{transition:left .15s}}
.desk .desk-ask{background:linear-gradient(135deg,var(--soft),var(--paper))}
.desk .desk-ask-field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted);font-weight:500;text-align:left}
.desk .desk-ask-field b{padding:6px 12px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:13px}
:root[data-mode=dark] .desk .desk-ask-field{background:var(--paper);color:var(--muted)}
.desk .desk-chips{display:flex;flex-wrap:wrap;gap:6px}
.desk .desk-chips button{min-height:32px;padding:5px 12px;border-radius:16px;font-size:12.5px;font-weight:600;text-align:left}
.desk .desk-work{display:grid}
.desk .desk-work a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px}
.desk .desk-work a:first-child{border-top:0}
.desk .desk-work b{min-width:24px;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--accent);text-align:center;font-size:12.5px}
.desk .desk-work svg{width:14px;height:14px;color:var(--muted)}
.desk .desk-drawer-backdrop{position:fixed;inset:0;z-index:80;background:rgba(8,16,32,.45)}
.desk .desk-drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;display:flex;flex-direction:column;width:min(560px,100vw);overflow:auto;background:var(--bg);border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(8,16,32,.5)}
.desk .desk-drawer-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.desk .desk-drawer-bar strong{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.desk .desk-drawer-bar strong span{color:var(--accent)}
.desk .desk-drawer-close{width:40px;min-height:40px;padding:0;border-radius:50%;font-size:20px;line-height:1}
.desk .desk-drawer .copilot-panel{margin:0;padding:20px 22px 24px;border:0;border-radius:0;background:none}
.desk .desk-drawer .copilot-panel>header{margin-bottom:16px}
.desk .desk-drawer .copilot-mark{display:none}
.desk .desk-drawer .copilot-chat .copilot-thread{max-height:none;min-height:300px}
body.desk-drawer-open{overflow:hidden}
body.desk-drawer-open #account-message{z-index:90}
@media(prefers-reduced-motion:no-preference){.desk .desk-drawer{animation:desk-drawer-in .18s ease-out}}
@keyframes desk-drawer-in{from{transform:translateX(24px);opacity:.5}}
@media(max-width:1100px){.desk .desk-cols{grid-template-columns:1fr}.desk .desk-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.desk .desk-item,.desk .desk-item.is-point{grid-template-columns:minmax(0,1fr);grid-template-areas:"pill" "title" "detail" "go"}
 .desk .desk-item.is-point{grid-template-areas:"title" "detail" "go"}.desk .desk-item .desk-go{justify-self:start;margin-top:6px}
 .desk .desk-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-bottom:0}
 .desk .desk-tabs button,:root[data-mode=dark] .desk .desk-tabs button{justify-content:flex-start;border:1px solid var(--line);border-radius:10px}
 .desk .desk-tabs button[aria-selected=true],:root[data-mode=dark] .desk .desk-tabs button[aria-selected=true]{border-color:var(--accent);background:var(--soft)}
 .desk .desk-drawer-bar{padding:10px 12px 10px 16px}.desk .desk-drawer .copilot-panel{padding:16px}}

.ops-kicker{font-weight:800;color:var(--accent,#2847d7);font-size:.88rem;letter-spacing:.02em}.operations-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2.6rem 0 2rem}.operations-hero h1{margin:.35rem 0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.07;letter-spacing:-.04em}.operations-hero p{max-width:58ch}.operations-hero-mark{border-radius:32px;background:var(--soft,#e9efff);padding:1.4rem;font-size:3.3rem;flex:none}.ops-tabs{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem;border:1px solid var(--line,#d8e3f6);border-radius:18px;background:var(--paper,#fff);margin-bottom:1.5rem}.ops-tabs button{border:0;background:transparent;min-height:44px}.ops-tabs button[aria-current=page]{background:var(--soft,#e9efff);color:var(--accent,#2847d7)}.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.ops-grid>*{min-width:0}.ops-card,.ops-workspace{border:1px solid var(--line,#d8e3f6);background:var(--paper,#fff);border-radius:24px;padding:clamp(1.2rem,2.5vw,2rem);margin-bottom:1.25rem}.ops-card h2,.ops-workspace h2{margin-top:0}.ops-card p{max-width:65ch}.ops-card form,.ops-workspace form,.recovery-card form,[data-recovery-form]{display:grid;gap:1.15rem}.ops-card label,.ops-workspace label{display:grid;gap:.45rem}.ops-card fieldset{min-width:0}.ops-card legend{font-weight:800;margin-bottom:.8rem}.ops-catalog{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}.ops-badge{display:inline-block;border-radius:999px;padding:.4rem .8rem;background:var(--soft,#e9efff);font-size:.8rem;font-weight:750}.ops-card details{border-top:1px solid var(--line,#d8e3f6);margin-top:1.2rem;padding-top:1rem}.ops-card details form{margin-top:1rem}.ops-card summary{cursor:pointer;font-weight:750}.ops-muted{color:var(--muted,#566c8c);font-size:.88rem}.ops-empty{padding:2rem;text-align:center;border:1px dashed var(--line,#d8e3f6);border-radius:20px}.ops-item{border-top:1px solid var(--line,#d8e3f6);padding:1.25rem 0}.ops-item:first-child{border-top:0}.ops-item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.ops-item h3{margin:0 0 .45rem}.ops-item p{margin:.5rem 0}.ops-proof{border-left:3px solid var(--accent,#2847d7);padding:.5rem 1rem;margin:1rem 0;background:var(--soft,#e9efff);border-radius:0 12px 12px 0}.ops-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.ops-card textarea{min-height:100px}.ops-card input,.ops-card select,.ops-card textarea{max-width:100%;min-width:0}.ops-card code{overflow-wrap:anywhere}.ops-table{width:100%;border-collapse:collapse}.ops-table th,.ops-table td{padding:.85rem;text-align:left;border-bottom:1px solid var(--line,#d8e3f6);vertical-align:top;overflow-wrap:anywhere}.ops-scroll{overflow:auto}.ops-stage{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.ops-stage span{background:var(--soft,#e9efff);border-radius:10px;padding:.65rem .8rem}.recovery-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start;padding:3rem 0}.recovery-intro h1{font-size:clamp(2.4rem,4.5vw,4.2rem);line-height:1.06;letter-spacing:-.04em;margin:1rem 0}.recovery-intro>p{max-width:43ch}.recovery-steps{list-style:none;padding:0;display:grid;gap:1rem;margin:2rem 0}.recovery-steps li{display:flex;gap:.8rem;align-items:center}.recovery-steps span{display:grid;place-items:center;background:var(--soft,#e9efff);width:34px;height:34px;border-radius:50%;font-weight:800;flex:none}.recovery-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;margin:1.5rem 0}.recovery-secret{display:block;padding:1rem;border:2px dashed var(--accent,#2847d7);border-radius:12px;font-size:1.05rem;line-height:1.8;overflow-wrap:anywhere;user-select:all}.policy-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.5rem;margin:2rem auto;padding:1.3rem;border-top:1px solid var(--line,#d8e3f6);max-width:1280px;font-size:.84rem}.policy-links a{color:inherit;text-underline-offset:4px}.ops-check{display:flex!important;align-items:center;gap:.6rem!important}.ops-check input{width:20px;min-height:20px!important;flex:none}.ops-readonly{padding:1rem;border-radius:12px;background:var(--soft,#e9efff)}
@media(max-width:760px){.ops-grid,.recovery-layout,.recovery-card{grid-template-columns:minmax(0,1fr)}.operations-hero-mark{display:none}.operations-hero{margin:1.5rem 0}.recovery-layout{padding:1.5rem 0}.ops-card,.ops-workspace{border-radius:18px}.ops-item-header{flex-direction:column}.ops-tabs{gap:.25rem}.ops-tabs button{flex:1 0 auto;padding:.7rem}.ops-table th,.ops-table td{padding:.65rem}.ops-actions>*{flex:1 1 auto}}
/* Teacher quizzes waiting for a person: findings, then the questions, then a decision. */
.ops-quiz{border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px;background:var(--paper);display:grid;gap:12px}
.ops-quiz header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ops-quiz h3{margin:0}
.ops-quiz header p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ops-quiz-state{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--soft)}
.ops-quiz-state[data-state=approved]{background:var(--success-bg);color:var(--success-ink)}
.ops-quiz-state[data-state=changes_requested]{background:var(--caution-bg);color:var(--caution-ink)}
.ops-quiz-state[data-state=rejected]{background:var(--soft);color:var(--muted)}
.ops-quiz-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.ops-quiz-checks li{padding:8px 12px;border-radius:10px;background:var(--soft);border-left:3px solid var(--accent)}
.ops-quiz-checks li[data-ok=note]{border-left-color:var(--caution-ink)}
.ops-quiz-checks li[data-ok=none]{border-left-color:var(--line)}
.ops-quiz-questions{margin:10px 0 0;padding-left:20px;display:grid;gap:12px;font-size:14px}
.ops-quiz-questions ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.ops-quiz-questions li[data-answer]{font-weight:700;color:var(--accent)}
/* An agent at work (opsAgentWork): its switch and schedule, Run now, and its last runs */
.ops-agent-switch{display:grid;gap:10px;margin:10px 0}.ops-actions{display:flex;flex-wrap:wrap;gap:8px}
.ops-runs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.ops-runs li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px}
.ops-runs li span{color:var(--muted);white-space:nowrap}.ops-runs li em{grid-column:2;font-style:normal;color:var(--muted);font-size:12px}
.ops-item h4{margin:12px 0 4px;font-size:14px}
@media(max-width:600px){.ops-runs li{grid-template-columns:1fr}.ops-runs li em{grid-column:1}}
/* Content studio (opsContent): filters, and each proposal shown as a child would see it */
/* The studio as a table (contentBoard): four tiles that pick the view, the table, and a panel for each piece. */
.content-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--gap-cards);margin:0 0 var(--space-5)}
.content-tiles button{display:grid;gap:var(--space-1);justify-items:start;text-align:left;padding:var(--pad-box);border-radius:14px;min-height:0}
.content-tiles button strong{font-size:1.6rem;line-height:1.1}.content-tiles button span{font-size:.85rem;font-weight:500;color:var(--muted,#566c8c)}
.content-tiles button[aria-pressed=true]{border-color:var(--accent,#2847d7);box-shadow:inset 0 0 0 1px var(--accent,#2847d7)}
.content-open{display:grid;gap:var(--space-1);text-align:left;border:0;background:none;padding:0;min-height:0;font-weight:400;color:inherit}
.content-open strong{font-weight:650}
#board-content .content-open{min-width:16rem}
.content-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--soft,#e9efff);font-size:.78rem;font-weight:650;white-space:nowrap}
.content-chip[data-check=pass],.content-chip[data-state=live]{background:var(--success-bg,#e7f6ee);color:var(--success-ink,#1f7a4d)}
.content-chip[data-check=fail],.content-chip[data-state=taken-out]{background:var(--miss-bg,#fdeceb);color:var(--miss-ink,#9b2c2c)}
.content-panel .content-preview{margin:0}
.content-panel form{display:grid;gap:var(--space-4)}
.content-answers{margin:0;padding:var(--pad-row);border-radius:12px;background:var(--soft,#e9efff);font-size:.92rem}
.content-answers[data-answers=out]{background:var(--miss-bg,#fdeceb);color:var(--miss-ink,#9b2c2c)}
.content-preview{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0}
.content-prompt{font-weight:650;margin:0 0 8px}
.content-preview>.ops-muted:first-child{margin:0 0 var(--space-2)}
.content-passage{margin:0 0 var(--space-3);padding:var(--pad-row);border-radius:12px;background:var(--soft,#f3f1fb)}
.content-passage h4{margin:0 0 var(--space-1);font-size:15px}.content-passage p{margin:0;line-height:1.6}
.content-answer{margin:0 0 10px}
.content-choices{margin:0 0 10px;padding-left:22px;display:grid;gap:4px}
.content-choices li.is-right{font-weight:700}.content-choices li em{font-style:normal;font-size:12px;color:var(--success-ink,#1f7a4d)}
.content-live{font-weight:650;color:var(--success-ink,#1f7a4d)}.content-panel .content-live{margin:0}
/* School enrollments says what it is, and where the School Portal is (24 September 2026). */
.ops-note{max-width:none;margin:0 0 16px;padding:12px 16px;border-radius:14px;border:1px solid var(--line,#d7e2f0);background:var(--soft,#eef3fb);font-size:.92rem;line-height:1.5}
.ops-note a{font-weight:700}
/* The content scout's card (opsScout) and the check on each draft (contentCheck). */
.content-scout-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--gap-cards);margin:var(--space-4) 0}
.content-scout-week>div{display:grid;gap:var(--space-1);padding:var(--pad-box);border:1px solid var(--line,#d8e3f6);border-radius:14px}
.content-scout-week dt{font-size:.82rem;color:var(--muted,#566c8c)}.content-scout-week dd{margin:0;font-size:1.7rem;font-weight:750}
.content-scout .ops-actions{margin-top:var(--gap-action)}
.content-scout-setup{margin-top:var(--space-5)}
.content-scout-subjects{display:flex;flex-wrap:wrap;gap:var(--gap-chips) var(--space-4)}
.content-check{margin:var(--space-3) 0 0!important;padding:var(--pad-row);border-radius:12px;background:var(--soft,#e9efff);font-size:.92rem}
.content-check[data-check=pass]{background:var(--success-bg,#e7f6ee);color:var(--success-ink,#1f7a4d)}
.content-check[data-check=fail]{background:var(--miss-bg,#fdeceb);color:var(--miss-ink,#9b2c2c)}

.report-intro{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem 0}.report-intro h1{max-width:18ch;margin:.6rem 0;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05}.report-intro p{max-width:60ch}.report-hero-symbol{width:130px;height:130px;display:grid;place-items:center;border-radius:36px;background:var(--soft);color:var(--accent);transform:rotate(6deg);flex-shrink:0}.report-hero-symbol>svg{width:66px;height:66px}.report-hero-symbol>span{position:absolute;right:15px;top:10px;color:#b98218;font-size:2rem}.report-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:1.25rem;gap:1rem;border:1px solid var(--line);border-radius:24px;list-style:none;background:var(--paper)}.report-process li{display:flex;gap:.8rem;align-items:center}.report-process b{width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}.report-process small{display:block;color:var(--muted);margin-top:.3rem}.report-toolbar{display:flex;align-items:center;gap:1.3rem;margin:2rem 0}.report-toolbar label{min-width:200px}.report-private{font-size:.88rem;color:var(--muted);flex:1}.report-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.5rem}.report-workspace>div{min-width:0}.report-shelf>div,.report-section-heading{display:flex;justify-content:space-between;gap:1rem;align-items:center}.report-shelf h2{font-size:1.1rem}.report-file-card{display:grid!important;grid-template-columns:36px minmax(0,1fr);gap:.35rem .6rem;text-align:left;width:100%;margin:.7rem 0;padding:1rem!important;white-space:normal}.report-file-card>span{grid-row:span 2;color:var(--accent)}.report-file-card svg{width:32px;height:38px}.report-file-card strong{overflow-wrap:anywhere}.report-file-card small{font-size:.76rem;color:var(--muted)}.report-file-card[aria-current=true]{background:var(--soft);border-color:var(--accent)}.report-upload form,.report-detail form{display:grid;gap:1.35rem}.report-section-heading{margin-bottom:1.5rem;flex-wrap:wrap}.report-symbol{color:var(--accent);background:var(--soft);border-radius:20px;padding:.8rem}.report-drop{border:2px dashed var(--line);background:var(--soft);padding:1.5rem;border-radius:20px;gap:.65rem}.report-drop span{font-size:.82rem;color:var(--muted)}.report-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.report-context,.report-score-section{padding:1.25rem 0;border-top:1px solid var(--line)}.report-context summary span,.report-score-section summary span{color:var(--muted);font-size:.8rem;margin-left:.5rem}.report-context .report-fields{margin-top:1rem}.report-source{background:var(--soft);border-radius:20px;padding:1.25rem;margin:1.5rem 0}.report-source details+details{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.8rem}.report-source pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:.9rem;line-height:1.65;max-height:420px;overflow-y:auto}.report-source img{max-width:100%;max-height:600px;object-fit:contain;display:block;margin:1rem auto}.report-reader{padding:1.5rem;border:1px solid var(--line);border-radius:20px;margin:1.5rem 0;background:var(--soft)}.report-observation{border:1px solid var(--line);padding:1.25rem;margin:1rem 0;border-radius:18px;display:grid;gap:1rem;min-width:0}.report-observation legend{font-weight:800;padding:0 .4rem}.report-row-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.report-row-actions label{max-width:130px}.report-next-step{border-top:1px solid var(--line);margin-top:2rem;padding-top:2rem}.report-next-step article{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}.report-next-step article+article{border-top:1px solid var(--line)}.report-next-step small{color:var(--muted)}.report-remove{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem}.report-remove button{color:var(--muted)}.report-comparisons{margin-top:2rem}.report-comparisons article{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.5rem;margin:1rem 0}.report-confirmed-findings article{border-left:3px solid var(--line);padding-left:1rem;margin:1.5rem 0}.report-confirmed-findings blockquote{margin:.7rem 0}.report-workspace button{min-height:44px}.report-upload input[type=file]{max-width:100%;font-size:.85rem}.report-upload .check input,.report-detail .check input{flex-shrink:0}.report-detail h3{margin-bottom:.6rem}
@media(max-width:900px){.report-workspace{grid-template-columns:1fr}.report-shelf{display:flex;gap:.75rem;overflow-x:auto;padding:.3rem 0 .8rem}.report-shelf>div{flex:0 0 150px;display:grid;align-content:center}.report-file-card{flex:0 0 230px;max-width:230px}.report-shelf>p{min-width:180px}.report-toolbar{flex-wrap:wrap}.report-toolbar .report-private{flex-basis:50%}}
@media(max-width:540px){.report-hero-symbol{width:75px;height:75px;border-radius:24px}.report-hero-symbol>svg{width:45px;height:45px}.report-intro{gap:.7rem;padding-top:1rem}.report-intro h1{font-size:2.1rem}.report-process{grid-template-columns:1fr}.report-fields{grid-template-columns:1fr}.report-toolbar label{min-width:0;flex:1}.report-private{flex-basis:100%!important}.report-next-step article{align-items:stretch;flex-direction:column}.report-row-actions{align-items:stretch;flex-direction:column}.report-row-actions label{max-width:none}.report-detail,.report-upload{padding:1.1rem!important}.report-source,.report-reader,.report-observation{padding:1rem}.report-section-heading h2{font-size:1.45rem}}

.report-edit{margin:1.5rem 0;border-top:1px solid var(--line);padding-top:1.2rem}.report-edit[open]>summary{margin-bottom:1.4rem}.report-confirmed-findings small{color:var(--muted)}

/* Sparki's library: a quiet folder rail, useful covers and one guided task at a time. */
.report-intro{padding:1.3rem 0}.report-intro h1{max-width:22ch;font-size:clamp(2rem,3.8vw,3.1rem)}.report-mascot{display:block;flex:0 0 auto;width:118px}.report-toolbar{padding:1.1rem 0;margin:0 0 1.6rem;border-bottom:1px solid var(--line)}.report-library-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:2rem}.report-library-layout>*{min-width:0}.report-folders{padding-right:1.25rem;border-right:1px solid var(--line)}.report-folders h2{font-size:1rem;margin:0 0 1rem}.report-folders nav{display:grid;gap:.4rem}.report-folders nav button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:.5rem;background:transparent;border:1px solid transparent;text-align:left;white-space:normal;padding:.7rem;min-height:48px}.report-folders nav button strong{overflow-wrap:anywhere;font-weight:700;font-size:.88rem}.report-folders nav button small{color:var(--muted)}.report-folders nav button[aria-pressed=true]{background:var(--soft);border-color:var(--line);color:var(--accent)}.report-create-folder{padding:1rem 0;margin-top:.6rem;border-top:1px solid var(--line)}.report-create-folder summary{font-size:.88rem;cursor:pointer}.report-create-folder label{margin:.85rem 0}.report-create-folder button{font-size:.85rem;min-height:44px}.report-filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}.report-search input{background:var(--paper);min-height:50px}.report-filter-row label{font-size:.8rem}.report-filter-row select{font-size:.87rem}.report-result-count{font-size:.85rem;color:var(--muted)}.report-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.report-card-grid .report-file-card{display:flex!important;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0!important;overflow:hidden;max-width:none;min-width:0;transition:border-color .16s,box-shadow .16s}.report-card-grid .report-file-card:hover{border-color:var(--accent);box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 9%,transparent);transform:none}.report-cover{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:90px;background:var(--soft);padding:1rem 1.2rem;color:var(--accent)}.report-cover small{max-width:14ch;text-align:right;color:var(--ink)}.report-cover[data-category=state]{border-top:4px solid #5c8da2}.report-cover[data-category=school]{border-top:4px solid #6384d2}.report-cover[data-category=county]{border-top:4px solid #7b739a}.report-cover[data-category=practice]{border-top:4px solid #58937e}.report-cover[data-category=other]{border-top:4px solid #bd943c}.report-card-grid strong{font-size:1.05rem;padding:1rem 1.2rem .3rem;line-height:1.4}.report-card-context{font-size:.78rem;color:var(--muted);padding:0 1.2rem 1rem;overflow-wrap:anywhere}.report-card-grid .report-status{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:.8rem 1.2rem;font-size:.78rem;margin-top:auto}.report-sparki{display:flex;align-items:center;gap:1rem;padding:1.15rem 0;margin-top:1.5rem;border-top:1px solid var(--line)}.report-sparki img{object-fit:contain;flex-shrink:0;width:85px;height:85px}
/* The animated character fills what it is given and is taller than it is wide,
   so it gets a box rather than the width and height an <img> took. */
.report-sparki-face{flex:0 0 auto;display:block;width:62px}
.report-sparki-face .sparki-character{width:100%}.report-sparki p{font-size:.92rem;margin:.4rem 0;max-width:57ch}.report-sparki small{font-size:.75rem;color:var(--muted)}.report-sparki strong{color:var(--accent);font-size:.85rem}.report-empty{padding:2.5rem 1.2rem;text-align:center;background:var(--paper);border:1px dashed var(--line);border-radius:24px}.report-empty>svg{color:var(--accent)}.report-empty h3{margin:.8rem 0}.report-empty p{max-width:45ch;margin:1rem auto}.report-workspace{display:block;max-width:950px;margin:0 auto}.report-back{border:0!important;padding:.3rem 0!important;min-height:44px;margin-bottom:.7rem;background:transparent!important;color:var(--accent)}.report-upload h2{margin:.4rem 0}.report-upload-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding:0;list-style:none;margin:2rem 0}.report-upload-progress li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);padding-bottom:.8rem;border-bottom:3px solid var(--line)}.report-upload-progress li>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--soft);flex-shrink:0}.report-upload-progress li[aria-current=step]{border-color:var(--accent);color:var(--accent);font-weight:800}.report-upload [data-upload-step]{display:grid;gap:1rem}.report-upload [hidden]{display:none!important}.report-upload h3{font-size:1.35rem;line-height:1.4;margin:.2rem 0 .5rem}.report-file-summary{font-size:.85rem;color:var(--muted);overflow-wrap:anywhere;margin:0}.report-wizard-actions{display:flex;gap:1rem;justify-content:space-between;border-top:1px solid var(--line);padding-top:1.3rem}.report-wizard-actions>.primary{margin-left:auto}.report-save-summary{background:var(--soft);border-radius:20px;padding:1.2rem;margin:0 0 1rem}.report-save-summary>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:1rem;padding:.6rem 0}.report-save-summary dt{color:var(--muted);font-size:.85rem}.report-save-summary dd{margin:0;font-weight:700;overflow-wrap:anywhere}.report-upload .check{display:block;line-height:1.7}.report-upload .check input{width:auto;display:inline-block;vertical-align:middle;margin-right:.6rem}.report-organization{border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem}.report-organization[open]>summary{margin-bottom:1rem}.report-organization form>button{justify-self:start}.report-organization .report-create-folder{margin:0;padding:.75rem 0}

@media(max-width:760px){.report-library-layout{grid-template-columns:1fr;gap:1rem}.report-folders{padding:0 0 .8rem;border-right:0;border-bottom:1px solid var(--line)}.report-folders nav{grid-template-columns:repeat(2,minmax(0,1fr))}.report-folders>p{display:none}.report-folders .report-create-folder{margin:0;border:0}.report-folders h2{margin-bottom:.5rem}.report-mascot{width:120px;height:120px}.report-toolbar{gap:.8rem}.report-toolbar .report-private{flex-basis:100%;order:3}.report-toolbar>.primary{margin-left:auto}}
@media(max-width:440px){.report-intro{gap:.4rem}.report-intro h1{font-size:1.8rem}.report-mascot{width:72px}.report-filter-row{grid-template-columns:1fr 1fr}.report-filter-row>label:first-child{grid-column:1/-1}.report-card-grid{grid-template-columns:1fr}.report-upload-progress{gap:.4rem}.report-upload-progress li{font-size:.7rem;align-items:flex-start;flex-direction:column}.report-save-summary>div{grid-template-columns:1fr;gap:.15rem}.report-wizard-actions{gap:.5rem}.report-wizard-actions button{font-size:.85rem}.report-sparki{gap:.6rem}.report-sparki img{width:64px;height:75px}.report-folders nav button{padding:.6rem .4rem}.report-toolbar>.primary{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.report-file-card{transition:none!important}}
.report-intro-compact{padding:.5rem 0}.report-intro-compact h1{font-size:1.6rem;max-width:none}.report-intro-compact .report-mascot{width:60px}.report-intro-compact p:not(.eyebrow){display:none}body:has(.report-intro) #account-message{width:max-content;max-width:calc(100vw - 40px)}
@media(max-width:540px){.report-toolbar label{flex-basis:100%}.report-toolbar>[data-report-refresh]{flex:1}.report-toolbar>.primary{flex:2}.report-intro-compact h1{font-size:1.35rem}}

/* Learning support for the adults who help a learner (learning-support-ui.js, family-learning-ui.js), 26 September 2026:
   the library's own card language; a disagreement stands apart; the primary action is always one clear button. */
.report-owner-note{margin:.2rem 0 0;padding:.7rem 1rem;border-radius:14px;background:var(--soft);font-size:.92rem}
.support-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding:1rem 1.25rem;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.support-strip p{margin:.2rem 0;max-width:62ch}.support-strip .eyebrow{margin:0}.support-strip[data-support=review_due],.support-strip[data-support=review_needed]{border-color:var(--accent)}
.support-evidence{margin:1.8rem 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.support-evidence h3{margin:.2rem 0}.support-evidence h4{display:flex;align-items:center;gap:.5rem;margin:1.2rem 0 .6rem;font-size:1rem}
.support-group{display:grid;gap:var(--gap-items)}.support-decided>.support-item+.support-item{margin-top:var(--gap-items)}.support-decided>summary{font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.5rem;margin:1rem 0 .6rem}
.support-item{border:1px solid var(--line);border-radius:18px;padding:1rem 1.15rem;background:var(--paper);display:grid;gap:.5rem}
.support-item[data-state=confirmed]{border-left:5px solid var(--mint,#3f9d78)}.support-item[data-state=disputed],.support-item[data-state=excluded],.support-item[data-state=unreadable]{opacity:.82}
.support-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}.support-item-head strong{line-height:1.4;overflow-wrap:anywhere}
.support-chip{flex:none;font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:var(--soft);color:var(--accent)}
.support-item blockquote,.support-choice blockquote{margin:0;padding:.55rem .85rem;border-left:3px solid var(--line);background:var(--soft);border-radius:0 10px 10px 0;font-size:.92rem;overflow-wrap:anywhere}
.support-item small,.support-choice small{color:var(--muted);font-size:.8rem}
.support-item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.support-item-actions .check{flex:1 1 100%;margin:0;font-size:.88rem}
.support-item-actions button{min-height:42px;font-size:.88rem}.support-change{border:0!important;margin:0!important;padding:0!important}.support-change>summary{cursor:pointer;font-size:.85rem;color:var(--accent)}.support-change[open]>summary{margin-bottom:.6rem}
.support-clash{border:2px solid var(--miss-line,#d64a33);border-radius:18px;padding:1rem 1.15rem;margin:1rem 0;display:grid;gap:.7rem;background:var(--paper)}
.support-clash legend{font-weight:800;padding:0 .4rem}.support-clash>p{margin:0}
.support-choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;padding:.7rem;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.support-choice input{width:auto;margin-top:.3rem}.support-choice>span{display:grid;gap:.35rem}
.support-add{margin:1.4rem 0 0;border:1px solid var(--line);border-radius:18px;padding:.9rem 1.15rem}.support-add>summary{cursor:pointer;font-weight:700}.support-add[open]>summary{margin-bottom:1rem}
.support-add form{display:grid;gap:1rem}.support-places{display:grid;gap:.35rem;border:0;padding:0;margin:0}.support-places legend{font-weight:600;margin-bottom:.3rem}.support-places .check{margin:0}
.support-next{display:flex;justify-content:flex-end;margin-top:1.2rem}
.support-link{border:0!important;background:none!important;padding:0!important;min-height:0!important;color:var(--accent);text-decoration:underline;font-size:inherit;font-weight:600}
.support-plan h2:focus{outline:none}
.support-readiness,.family-readiness{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-items);list-style:none;padding:0;margin:0 0 1.4rem}
.support-readiness li,.family-readiness li{display:flex;flex-direction:column;gap:.2rem;padding:.75rem .95rem;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.support-readiness span,.family-readiness span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.support-readiness strong,.family-readiness strong{font-size:.98rem}
.support-active,.support-waiting,.support-empty{border:1px solid var(--line);border-radius:20px;padding:1.1rem 1.25rem;margin:0 0 1.4rem;background:var(--paper)}
.support-active[data-status=review_needed]{border-color:var(--accent)}.support-active .eyebrow,.support-waiting .eyebrow{margin:0 0 .4rem}
.support-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}.support-columns h3{font-size:1rem;margin:.4rem 0 .6rem}
.support-columns article{display:grid;gap:.2rem;padding:.7rem 0;border-top:1px solid var(--line)}.support-columns article span,.support-columns article small{font-size:.86rem;color:var(--muted)}
/* A goal's practice and how it counts (supportPractice, ES-08). */
.support-progress{display:grid;gap:var(--space-2);margin-top:var(--space-2);font-size:.86rem;color:var(--muted)}.support-progress p{margin:0}
.support-progress .support-measure-read{color:var(--ink);font-weight:650}
.support-measure{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-2) var(--space-3);margin-top:var(--space-1)}
.support-measure label{display:grid;gap:var(--space-1);flex:1 1 12rem;min-width:0;color:var(--ink)}.support-measure select{width:100%}.support-measure p{flex:1 1 100%}
.support-stop{margin-top:1rem}.support-stop>summary{cursor:pointer;color:var(--accent);font-size:.9rem}.support-stop[open]>summary{margin-bottom:.6rem}
.support-proposal{display:grid;gap:1.2rem}.support-proposal h3{margin:0}.support-proposal fieldset{border:0;padding:0;margin:0;display:grid;gap:.6rem}
.support-proposal legend{font-weight:800;margin-bottom:.4rem}.support-proposal legend .small{font-weight:400;color:var(--muted);margin-left:.4rem}
.support-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;padding:.85rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer}
.support-option input{width:auto;margin-top:.25rem}.support-option>span{display:grid;gap:.3rem}.support-option>span>span{font-size:.88rem;color:var(--muted);line-height:1.5}
.support-option .support-link{justify-self:start;font-size:.85rem}
.support-noted p{margin:.3rem 0;font-size:.9rem;padding:.7rem 1rem;border:1px dashed var(--line);border-radius:14px}
.support-preview-box{border-radius:18px;background:var(--soft);padding:1rem 1.15rem}.support-preview-box h4{margin:0 0 .6rem}
.support-preview{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}.support-preview li{display:grid;gap:.15rem}.support-preview li span{font-size:.86rem;color:var(--muted)}
.support-preview li[data-change=stops] strong{color:var(--miss-ink,#8a2414)}
.support-revise{border:1px solid var(--line);border-radius:18px;padding:.9rem 1.15rem;margin:0 0 1.2rem}.support-revise>summary{cursor:pointer;font-weight:700}.support-revise[open]>summary{margin-bottom:1rem}
.support-history{margin-top:.6rem}.support-history summary{cursor:pointer;font-size:.9rem;color:var(--muted)}.support-history ul{font-size:.88rem;margin:.6rem 0 0;padding-left:1.1rem}
.family-documents .account-actions{margin-top:0}.family-documents .family-plan-week{margin:0 0 var(--space-4);font-size:.92rem}.family-documents>p.small{margin:.9rem 0 0;color:var(--muted)}
@media(max-width:700px){.support-readiness,.family-readiness{grid-template-columns:1fr}.support-columns{grid-template-columns:1fr}.support-strip button{width:100%}.support-item-actions button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.support-item,.support-option{transition:none}}

/* Automations: a heading that says what waits, two tabs, and each job's own tiles,
   table and side panel (automation-studio.js). */
.automation-studio{gap:20px;min-width:0}
/* Each tab is a stack of sections with the same air between them as every management page: a
   content tab without it ran its tiles, schedule, cards and table into one block (26 September 2026). */
#automation-content{display:grid;gap:20px;min-width:0}
.automation-studio .management-heading button{display:inline-flex;align-items:center;gap:8px}
.automation-studio .management-heading .management-icon{width:18px;height:18px}
.automation-studio .auto-tabs{margin:0}
.auto-tabs a .management-icon{width:16px;height:16px}

/* The schedule, as one line that says whether anything is prepared on its own. */
.auto-schedule{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.auto-schedule h2{margin:0;font-size:18px!important}
.auto-schedule p{margin:4px 0 0}
.auto-schedule-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--success-bg);color:var(--success-ink)}
.auto-schedule[data-paused=true] .auto-schedule-icon{background:var(--caution-bg);color:var(--caution-ink)}
.auto-schedule-icon .management-icon{width:22px;height:22px}

/* Three workflows: a fixed set, so three cards, each with its switch and its button. */
.auto-workflows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.auto-workflow{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;padding:18px;border:1px solid var(--line);border-radius:14px;
 background:var(--paper);box-shadow:0 2px 5px #162d5010}
.auto-workflow[data-on=false] .cc-watch-icon{background:var(--bg);color:var(--muted)}
.auto-workflow-head{display:flex;gap:12px;align-items:center}
.auto-workflow-head h3{margin:0;font-size:15px}
.auto-workflow-head p{margin:2px 0 0}
.auto-workflow-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px!important}
.auto-workflow>p.auto-workflow-when{margin:0;font-size:12.5px;color:var(--ink);font-weight:600}
.auto-workflow>p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.auto-workflow-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.auto-workflow-foot>button:not(.cc-switch){min-height:36px;padding:0 12px;border-radius:12px;font-size:12.5px;white-space:nowrap}
@media(min-width:1001px){.auto-workflow-foot{flex-wrap:nowrap}}

/* One draft, in the side panel. */
.auto-editor{display:grid;gap:12px}
.auto-editor textarea{width:100%;box-sizing:border-box;font:inherit;font-weight:400;line-height:1.6;resize:vertical;min-height:14rem;padding:12px;
 border:1px solid var(--control-line,var(--line));border-radius:12px;background:var(--paper);color:var(--ink)}
.auto-approve{display:grid;gap:10px;margin:0}
.automation-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;font-weight:500!important;line-height:1.5}
.automation-check input{width:18px;min-height:18px;margin-top:2px;flex:none}
.automation-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:12px}

/* Good to know: what used to be four cards and two lists, folded into one place. */
.auto-more>summary{min-height:44px;display:flex;align-items:center}
.auto-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.auto-more-grid h3{margin:0 0 6px;font-size:15px}
.auto-more-grid p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.auto-links{display:flex;flex-wrap:wrap;gap:14px}
.auto-links a{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.auto-links .management-icon{width:14px;height:14px}
.auto-log{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.auto-log li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin:0}

@media(max-width:1000px){.auto-workflows{grid-template-columns:1fr}.auto-more-grid{grid-template-columns:1fr}}
@media(max-width:640px){.auto-schedule{grid-template-columns:auto minmax(0,1fr)}.auto-schedule>button{grid-column:1/-1}
 .auto-tabs{flex-wrap:nowrap;width:100%}.auto-tabs a{flex:1;justify-content:center;padding:0 8px;font-size:13px}}

/* ---- Connectors (integrations.js, 24 September 2026) ------------------------------------------
   A table like Features: the summary tiles, the table and the side panel reuse the Features
   styles (admin-portal.css: .feature-summary, .feature-tile, .feature-panel, .feature-facts).
   What is here is only what a connector adds: a failed check in red, the last check, and the
   panel's settings, setup steps and technical names. */
.integrations{display:grid;gap:1.1rem;max-width:1180px;margin:auto}
.integrations .feature-summary{margin:0}
.integrations .management-panel{margin:0}
.integration-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.management-status.is-failing{background:#fbe9ec;color:#8a2432}
:root[data-mode=dark] .management-status.is-failing{background:#3d1d27;color:#ffb3bf}
.connector-last{font-size:13px;color:var(--muted);white-space:nowrap}
.connector-last.is-failed{color:#8a2432;font-weight:650}
:root[data-mode=dark] .connector-last.is-failed{color:#ffb3bf}
.connector-powers{display:block;max-width:34ch;font-size:13px;line-height:1.5;color:var(--ink);white-space:normal}
.connector-foot{margin:0;max-width:none}
.connector-missing{color:var(--caution-ink);font-weight:650}
.connector-panel .connector-settings{display:grid;gap:12px;padding:14px;border-radius:12px;background:var(--soft)}
.connector-panel .connector-settings label{display:grid;gap:5px;font-size:13px;font-weight:650}
.connector-panel .connector-settings small{font-weight:400;color:var(--muted);font-size:12px}
.connector-panel .connector-settings button{justify-self:start}
.connector-more summary{cursor:pointer;font-weight:650;font-size:13px}
.connector-more[open] summary{margin-bottom:8px}
.connector-needs{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.connector-needs code{padding:2px 7px;border-radius:7px;background:var(--soft);font-size:12px;overflow-wrap:anywhere}
.connector-box{padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.connector-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.5}
.connector-m365{display:grid;gap:8px;justify-items:start;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.connector-m365 p{margin:0}
.connector-result{margin:10px 0 0;font-size:13px;color:var(--muted)}
.connector-result:empty{display:none}
/* 25 September 2026: not connected is a choice, drawn quietly; pausing and Microsoft 365's journey. */
.management-status.is-off{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.connector-pause{display:grid;gap:6px;justify-items:start;padding-top:14px;border-top:1px solid var(--line)}
.connector-pause p,.connector-always{margin:0}
.connector-journey{display:grid;gap:12px;padding:14px;border-radius:12px;border:1px solid var(--line)}
.connector-journey>p{margin:0;line-height:1.55}
.connector-journey .feature-facts{margin:0}
.connector-steps.is-journey{gap:12px}
.connector-steps.is-journey li{color:var(--muted)}
.connector-steps.is-journey li strong{color:var(--ink)}
.connector-steps.is-journey li.is-now{color:var(--ink)}
.connector-command{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.connector-command code{padding:4px 9px;border-radius:7px;background:var(--soft);font-size:12.5px;overflow-wrap:anywhere}
.connector-confirm{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:650;line-height:1.45}
.connector-confirm input{margin-top:3px;flex:none}
.connector-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.connector-danger{color:#8a2432}
:root[data-mode=dark] .connector-danger{color:#ffb3bf}
.connector-said{margin:0;font-size:13px}
.connector-inbox-title{margin:4px 0 0;font-size:14px}
.connector-inbox{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:10px}
.connector-inbox li{display:grid;gap:3px;padding:10px 12px;border-bottom:1px solid var(--line);min-width:0}
.connector-inbox li:last-child{border-bottom:0}
.connector-inbox strong{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.connector-inbox li.is-unread strong{font-weight:800}
.connector-inbox li.is-unread strong::before{content:'';display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--accent,#3b82f6)}
.connector-inbox span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
/* On a phone each connector is a short card: its name and state, then its last check and what it
   powers, then its buttons, as on Features. */
@media(max-width:600px){
 #board-connectors .board-table{min-width:0}
 #board-connectors .board-table thead{display:none}
 #board-connectors .board-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:14px 12px;border-bottom:1px solid var(--line)}
 #board-connectors .board-table tbody tr:last-child{border-bottom:0}
 #board-connectors .board-table tbody tr>*{display:block;padding:0;border:0;width:auto}
 #board-connectors .board-table tbody td:nth-child(2){grid-column:2;grid-row:1}
 #board-connectors .board-table tbody td:nth-child(3),#board-connectors .board-table tbody td:nth-child(4){grid-column:1/3}
 #board-connectors .board-table tbody .board-actions{grid-column:1/3;text-align:left;white-space:normal}
 .connector-last{white-space:normal}
}

/* One management shell across adult administration surfaces. Learner styles remain independent.
   Its page, cards, text and lines are the Wise Sparks standard, the same light and dark as every
   other page (build_playground.standard_palettes; The Architect, 24 September 2026: "dark theme
   are not matching, we need standarization"). The accent is the theme its owner chose. */
body.management-portal{--management-rail:224px;--management-top:72px;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55}

.management-portal .account-header{display:none!important}.management-portal #management-nav[hidden],.management-portal #management-topbar[hidden]{display:none}
.management-portal #management-nav{position:fixed;inset:0 auto 0 0;width:var(--management-rail);background:var(--paper);border-right:1px solid var(--line);z-index:45;overflow-y:auto;padding:24px 14px;display:flex;flex-direction:column;gap:24px}
.management-brand{display:grid;gap:8px;text-decoration:none!important;padding:0 12px;color:var(--muted);font-size:12px}.management-brand .management-logo{display:block;width:120px;height:65px;background:url("/assets/d2c14e3d12515f144b1387f8c1348e207197a7e14eb60e2c3ea5bd481012e9a6.svg") left center/contain no-repeat}
/* Night has its own wordmark, as the site header does: the ink one disappears into a dark rail. */
html[data-mode=dark] .management-brand .management-logo{background-image:url("/assets/81847952de9e906330eb12d338cc6053f181c9b42e8e5abd201958e0c55e0f07.svg")}.management-portal #management-nav section{margin:0 0 22px}.management-portal #management-nav h2{font-family:inherit;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 12px 8px;font-weight:700}.management-portal #management-nav nav a{display:block;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:7px;font-size:13px;line-height:1.45;min-height:40px}.management-portal #management-nav nav a:hover{background:var(--bg);color:var(--ink)}.management-portal #management-nav nav a[aria-current]{background:var(--soft);color:var(--accent);font-weight:750;border-left:3px solid var(--accent);padding-left:9px}.management-sidebar-foot{border-top:1px solid var(--line);padding:18px 10px;display:grid;gap:12px}.management-sidebar-foot a{font-size:12px}.management-sidebar-foot button{text-align:left;padding:8px 0;border:0;background:none;font-size:13px}
.management-portal #management-topbar{position:sticky;top:0;margin-left:var(--management-rail);height:var(--management-top);padding:12px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,30vw,440px)) minmax(0,1fr);align-items:center;gap:16px;background:var(--paper);border-bottom:1px solid var(--line);z-index:40}.management-breadcrumb{color:var(--muted);font-size:12px;white-space:nowrap}.management-breadcrumb strong{color:var(--ink);font-weight:600}.management-breadcrumb>span{margin:0 10px}.management-search{position:relative;width:100%}.management-search input{height:40px;padding:8px 12px;font-size:13px;border-radius:7px}.management-account{font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.management-menu{display:none!important}#management-search-results{position:absolute;top:45px;left:0;right:0;border:1px solid var(--line);border-radius:9px;background:var(--paper);box-shadow:0 12px 24px #0002;max-height:340px;overflow:auto;padding:8px}#management-search-results a{display:block;padding:10px;text-decoration:none;color:var(--ink)}#management-search-results a:hover{background:var(--soft)}#management-search-results p{padding:8px}
.management-portal #account-main{margin:0 0 0 var(--management-rail)!important;padding:28px!important;max-width:none!important;min-height:calc(100vh - var(--management-top))}.management-portal .policy-links{margin-left:var(--management-rail);padding:18px 28px}.management-portal h1,.management-portal h2,.management-portal h3{font-family:inherit;color:var(--ink);letter-spacing:-.025em;line-height:1.25}.management-portal h1{font-size:30px!important;margin:0 0 8px!important}.management-portal h2{font-size:20px!important;margin:0 0 12px}.management-portal h3{font-size:16px!important}.management-portal p{font-size:14px}.management-portal p.small,.management-portal .small{font-size:12px}.management-portal button,.management-portal .button{font-family:inherit;font-size:13px;min-height:40px;border-radius:7px;padding:9px 14px;line-height:1.5}.management-portal input,.management-portal select,.management-portal textarea{font-family:inherit;font-size:14px;border-radius:7px;padding:10px 12px}.management-portal label{font-size:12px;font-weight:650}.management-portal .account-card,.management-portal .ops-card,.management-portal .admin-workspace{border-radius:12px;box-shadow:none;padding:24px;background:var(--paper);border:1px solid var(--line)}.management-portal .admin-hero,.management-portal .operations-hero{padding:0 0 24px;margin:0;min-height:0;background:none;border:0}.management-portal .admin-hero>div>p:first-child,.management-portal .ops-kicker,.management-portal .operations-hero-mark{display:none}.management-portal .admin-local-sections{display:none}.management-portal .admin-workspace{margin-top:20px}.management-portal .admin-footer{margin-top:20px}.management-portal .admin-toolbar{grid-template-columns:minmax(160px,1.4fr) repeat(3,minmax(120px,1fr));gap:12px}.management-portal .student-row{padding:14px 16px}.management-portal .student-head{background:var(--bg)}.management-portal .face{font-size:26px}.management-portal .admin-hero br,.management-portal .operations-hero br{display:none}.management-portal .admin-hero h1+ p{margin-top:8px}.management-portal .integrations,.management-portal .automation-studio{max-width:none;gap:20px}.management-portal .integration-brand{width:48px}.management-portal .integration-brand i{height:22px}.management-portal .integration-feature{gap:20px}.management-portal .account-audit{overflow:auto}.management-portal .account-audit table{min-width:560px}.management-portal #account-message{font-size:13px;max-width:calc(100vw - 40px)}
.management-overview{display:grid;gap:20px;max-width:1500px;margin:auto}.management-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:4px}.management-heading p{margin:6px 0 0;color:var(--muted)}.management-heading button{flex:none}.management-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 8px;background:var(--paper);border:1px solid var(--line);border-radius:12px}.management-metrics a{padding:0 24px;border-right:1px solid var(--line);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px}.management-metrics a:last-child{border:0}.management-metrics span{font-size:12px;color:var(--muted);font-weight:650}.management-metrics strong{font-size:30px;line-height:1.1;letter-spacing:-.03em}.management-work-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(230px,1fr);gap:20px;align-items:stretch}.management-panel{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:22px}.management-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.management-panel-head h2{margin:0}.management-panel-head label{min-width:140px}.management-panel-head p{margin:8px 0 0}.management-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.6fr);gap:12px;margin-bottom:14px}.management-filters input,.management-filters select{width:100%}.management-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px}.management-table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}.management-table th,.management-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}.management-table th{font-weight:650}.management-table thead th{background:var(--bg);color:var(--muted);white-space:nowrap}.management-table tr:last-child>*{border-bottom:0}.management-table a{white-space:nowrap;font-weight:650;text-decoration:none}.management-status{display:inline-block;border-radius:5px;padding:4px 7px;background:var(--soft);color:var(--ink);font-size:11px}.management-copilot{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.management-copilot h2,.management-copilot p{margin:0}.management-copilot .button{width:100%;text-align:center;margin:10px 0}.management-copilot hr{width:100%;border:0;border-top:1px solid var(--line);margin:12px 0}.management-copilot h3{margin:0}.management-value{font-size:28px}.management-topics{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0 0}.management-topics>div{display:flex;align-items:center;gap:18px}.management-topics dt{color:var(--muted)}.management-topics dd{font-weight:700;margin:0}.management-footnote{font-size:11px;line-height:1.7;color:var(--muted)}.management-portal .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1150px){body.management-portal{--management-rail:200px}.management-portal #account-main{padding:22px!important}.management-work-grid{grid-template-columns:1fr}.management-copilot{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.management-copilot hr{grid-column:1/-1}.management-metrics a{padding:0 16px}.management-portal .admin-toolbar{grid-template-columns:1fr 1fr}.management-breadcrumb{display:none}}
@media(max-width:760px){body.management-portal{--management-rail:0px;--management-top:64px}.management-portal #management-nav{width:240px;transform:translateX(-100%);padding-top:76px;box-shadow:10px 0 30px #0002}.management-portal.management-nav-open #management-nav{transform:translateX(0)}.management-portal #management-topbar{z-index:50;padding:10px 16px;gap:10px}.management-menu{display:block!important}.management-search{width:100%}.management-account{display:none}.management-portal #account-main{padding:20px 16px!important}.management-portal h1{font-size:26px!important}.management-heading{align-items:flex-start;flex-direction:column}.management-metrics{grid-template-columns:1fr 1fr;gap:24px 0}.management-metrics a:nth-child(2){border:0}.management-metrics strong{font-size:28px}.management-panel{padding:18px}.management-copilot{display:flex}.management-table{min-width:520px}.management-panel-head{align-items:flex-start;flex-direction:column}.management-panel-head label{width:100%}.management-filters{grid-template-columns:1fr}.management-portal .admin-toolbar{grid-template-columns:1fr}.management-portal .account-card,.management-portal .ops-card,.management-portal .admin-workspace{padding:18px}.management-portal .policy-links{padding:16px}.management-portal .admin-hero{flex-direction:column;gap:12px;align-items:flex-start}.management-portal .account-columns,.management-portal .insight-columns,.management-portal .ops-grid{grid-template-columns:1fr}.management-portal .automation-grid,.management-portal .integration-columns{grid-template-columns:1fr}}
.enquiry-metric{display:flex;flex-direction:column;padding:0 24px;border-right:1px solid var(--line);gap:8px}.enquiry-metric:last-child{border:0}.management-portal .insight-metrics{gap:16px}.management-portal .insight-number{font-size:32px}.management-portal .insight-symbol{font-size:24px}.management-portal .insight-metrics .account-card{padding:20px}.management-portal .insight-metrics h3{font-size:14px!important}.management-portal .account-empty{padding:24px}.management-portal .admin-workspace .eyebrow{display:none}@media(max-width:760px){.enquiry-metric:nth-child(2){border:0}.management-portal .insight-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.management-portal #management-nav{visibility:hidden}.management-portal.management-nav-open #management-nav{visibility:visible}}
.management-portal #management-nav h2{font-size:11px!important;line-height:1.4;letter-spacing:.055em}.management-portal .management-brand .management-logo{width:115px;height:62px}.management-portal .management-heading h1{font-weight:650}.management-portal .management-table th{font-weight:600}
/* Reference fidelity: recognizable navigation, clear status and purposeful workflow detail. */
body.management-portal{--management-rail:254px}

.management-icon{width:20px;height:20px;flex:none;vertical-align:middle;display:inline-block}
.management-portal #management-nav{padding:24px 16px;gap:28px}
.management-portal #management-nav nav a{display:flex;align-items:center;gap:16px;font-size:14px;padding:10px 14px;min-height:42px}
.management-portal #management-nav nav a[aria-current]{border:0;padding-left:14px;font-weight:650}
.management-portal #management-nav h2{font-size:13px!important;text-transform:none;letter-spacing:0;margin-bottom:8px}
.management-portal #management-nav section{margin-bottom:24px}
.management-brand{font-size:13px}.management-portal .management-brand .management-logo{width:124px;height:68px}
.management-breadcrumb{display:flex;align-items:center;gap:10px;font-size:13px}.management-breadcrumb>span{margin:0}.management-breadcrumb .management-icon{width:16px;color:var(--muted)}
.management-search>.management-icon{position:absolute;left:12px;top:11px;width:18px;height:18px;color:var(--muted)}.management-search input{padding-left:38px}.management-account{display:flex;align-items:center;gap:9px;font-size:13px}.management-account>.management-icon{box-sizing:content-box;padding:9px;border:1px solid var(--line);border-radius:50%;width:17px;height:17px}
.management-portal .management-heading h1{font-size:34px!important;font-weight:700;letter-spacing:-.035em}.management-heading p{font-size:17px}.management-heading button{display:flex;align-items:center;gap:6px}
.management-panel,.management-metrics{box-shadow:0 2px 5px #162d5010;border-radius:11px}.management-portal .management-panel h2{font-size:21px!important;letter-spacing:-.025em}
.management-metrics{padding:22px 8px}.management-metrics a{flex-direction:row;align-items:center;gap:18px;padding:0 24px}.management-metric-icon{display:grid!important;place-items:center;width:60px;height:60px;border-radius:50%;flex:none}.management-metric-icon .management-icon{width:28px;height:28px;stroke-width:1.9}.management-metric-copy{display:flex;flex-direction:column;gap:4px}.management-metric-copy strong{font-size:34px;color:var(--ink)}.management-metric-copy>span{font-size:13px;white-space:nowrap}
.tone-0{background:#eef6ff;color:#1267b5!important}.tone-1{background:#ecf9f4;color:#198273!important}.tone-2{background:#fff8e4;color:#b6840e!important}.tone-3{background:#f1eeff;color:#50439e!important}
/* The standard's night for the four tones: the same hue, laid over the dark paper. */
:root[data-mode=dark] .tone-0{background:color-mix(in srgb,#1267b5 34%,var(--paper));color:#cfe6ff!important}:root[data-mode=dark] .tone-1{background:color-mix(in srgb,#198273 34%,var(--paper));color:#b8edcf!important}:root[data-mode=dark] .tone-2{background:color-mix(in srgb,#b6840e 32%,var(--paper));color:#ffdda4!important}:root[data-mode=dark] .tone-3{background:color-mix(in srgb,#50439e 40%,var(--paper));color:#ddd6ff!important}
.management-queue-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}.management-queue-head h2{margin:0;white-space:nowrap}.management-queue-head .management-filters{display:flex;gap:10px;margin:0;max-width:65%}.management-queue-head label:first-child{flex:1;min-width:0}.management-queue-head label:last-child{width:132px;flex:none}.management-queue-head input,.management-queue-head select{height:39px;font-size:12px}.management-queue-head input{min-width:0}
#management-queue>p{font-size:11px;margin:0 0 9px;color:var(--muted)}.management-table{font-size:13px}.management-table th,.management-table td{padding:13px 12px}.management-table tbody tr:hover{background:var(--bg)}.management-table td a .management-icon{width:18px}.management-table td a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:28px;border-radius:5px}.management-table td a:hover{background:var(--soft)}
.management-status{border-radius:20px;padding:5px 11px;font-size:11px;font-weight:650;white-space:nowrap}.management-status.is-ready{background:var(--success-bg);color:var(--success-ink)}.management-status.is-attention{background:var(--caution-bg);color:var(--caution-ink)}.management-status.is-paused{background:var(--line);color:var(--ink)}
.management-copilot{position:relative;gap:12px}.management-copilot-symbol{color:var(--accent);margin-bottom:0}.management-copilot-symbol .management-icon{width:26px;height:26px}.management-copilot .button.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 3px 7px #075cdd25}.management-copilot h3{font-size:13px!important}.management-copilot hr{margin:4px 0}.management-copilot .management-value{font-size:26px}
.management-copilot-page{max-width:1400px;margin:auto;display:grid;gap:24px}.management-assistant-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:24px}.management-assistant-intro{padding:30px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.management-assistant-intro h2,.management-assistant-intro p{margin:0}.management-assistant-intro p{color:var(--muted);line-height:1.75}.management-assistant-intro>a{margin-top:auto;text-decoration:none;font-weight:650}.management-assistant-intro>a .management-icon{margin-left:8px;width:16px}.management-assistant-mark{display:grid;place-items:center;width:64px;height:64px;background:var(--soft);border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 12px #13335b0b;color:var(--accent)}.management-assistant-mark svg{width:34px;height:34px}
.management-workflows{padding:28px}.management-workflow{display:flex;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none!important}.management-workflow:last-child{border-bottom:0;padding-bottom:4px}.management-workflow>span:nth-child(2){flex:1;display:grid;gap:5px}.management-workflow strong{font-size:16px}.management-workflow span span{font-size:13px;color:var(--muted)}.management-workflow small{font-size:12px;font-weight:650;color:var(--accent);margin-top:4px}.management-workflow-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}.management-workflow:hover strong{color:var(--accent)}.management-workflow>.management-icon{color:var(--muted)}.management-review-path{padding:28px}.management-review-path p{color:var(--muted)}.management-review-path ol{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;gap:20px;padding:22px 0;margin:0}.management-review-path li{display:flex;align-items:center;gap:12px}.management-review-path li strong{display:grid;place-items:center;background:var(--soft);color:var(--accent);font-size:12px;width:34px;height:34px;border-radius:50%;flex:none}.management-review-path>a{font-size:13px;text-decoration:none}.management-review-path>a svg{width:16px;margin-left:7px}.management-portal .copilot-panel{margin:0;border-radius:12px}
.management-portal a:focus-visible,.management-portal button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(min-width:1151px){.management-work-grid{grid-template-columns:minmax(0,2.25fr) minmax(280px,1fr)}}
@media(max-width:1300px){.management-metrics a{padding:0 14px;gap:12px}.management-metric-icon{width:44px;height:44px}.management-metric-copy>span{white-space:normal}.management-queue-head{align-items:flex-start;flex-direction:column}.management-queue-head .management-filters{max-width:100%;width:100%}}
@media(max-width:1150px){body.management-portal{--management-rail:224px}.management-breadcrumb{display:none}.management-copilot{display:flex}.management-portal #management-nav nav a{font-size:13px;gap:12px}.management-heading p{font-size:15px}}
@media(max-width:760px){body.management-portal{--management-rail:0px}.management-portal #management-nav{padding-top:80px}.management-account{display:none}.management-portal .management-heading h1{font-size:27px!important}.management-assistant-layout{grid-template-columns:1fr}.management-assistant-intro,.management-workflows,.management-review-path{padding:20px}.management-review-path ol{grid-template-columns:1fr;gap:16px}.management-metrics a{gap:10px;padding:0 12px}.management-metric-icon{width:36px;height:36px}.management-metric-icon svg{width:22px!important;height:22px!important}.management-metric-copy strong{font-size:28px}.management-metric-copy>span{font-size:11px}.management-queue-head .management-filters{flex-wrap:wrap}.management-queue-head label:last-child{width:100%}.management-workflow{gap:12px}.management-workflow-icon{width:36px;height:36px}}
@media(prefers-reduced-motion:no-preference){.management-portal #management-nav nav a,.management-workflow,.management-table tbody tr{transition:background-color .15s,color .15s}.management-workflow>.management-icon{transition:transform .15s}.management-workflow:hover>.management-icon{transform:translateX(3px)}}
body.management-portal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.management-portal #management-nav,.management-portal #management-topbar,.management-portal #account-main{font-family:inherit}
.management-settings-guide{border-bottom:1px solid var(--line);margin-bottom:28px;padding-bottom:24px}.management-settings-guide nav{display:flex;flex-wrap:wrap;gap:12px 24px}.management-settings-guide nav a{font-size:13px;text-decoration:none}.management-settings-guide svg{width:16px}.management-settings-guide ol{display:flex;gap:24px;list-style:none;padding:20px 0 0;margin:0;color:var(--muted);font-size:13px}.management-settings-guide li{flex:1}.management-settings-guide li strong{display:block;color:var(--ink);margin-bottom:4px}.management-security{display:grid;gap:24px}.management-identity{display:flex;align-items:center;gap:20px}.management-identity h2,.management-identity p{margin:0}.management-identity>.management-status{margin-left:auto}.management-security form{display:grid;gap:16px}.security-facts{display:grid;gap:8px}.security-facts dt{font-weight:650}.security-facts dd{margin:0 0 12px;color:var(--muted)}.management-portal .recovery-card{margin-top:24px;border-radius:12px}.management-portal .recovery-card .ops-kicker{display:none}.stripe-setup>header{display:flex;align-items:center;gap:18px}.stripe-setup>header .management-status{margin-left:auto}.stripe-wordmark{font-size:30px;font-weight:800;letter-spacing:-1.5px;color:#635bff}.stripe-setup header h2,.stripe-setup header p{margin:0}.stripe-setup-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;margin:24px 0}.stripe-setup-grid aside{border-left:1px solid var(--line);padding-left:28px}.connection-checklist{padding-left:20px}.connection-checklist li{padding-left:8px;margin-bottom:18px}.connection-checklist strong,.connection-checklist span{display:block}.connection-checklist span{font-size:13px;color:var(--muted);margin-top:5px}.stripe-setup details{border-top:1px solid var(--line);padding-top:18px}@media(max-width:760px){.management-settings-guide ol,.management-identity{flex-direction:column;align-items:flex-start}.management-identity>.management-status{margin:0}.stripe-setup-grid{grid-template-columns:1fr}.stripe-setup-grid aside{border-left:0;padding:20px 0 0;border-top:1px solid var(--line)}.stripe-setup>header{flex-wrap:wrap}.stripe-setup>header .management-status{margin-left:0}}
.people-entry-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.people-entry-paths>a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:18px 0}.people-entry-paths>a>span{display:grid;gap:7px;flex:1}.people-entry-paths small{font-size:12px;color:var(--muted);font-weight:400}.people-entry-paths>a>.management-icon:first-child{color:var(--accent)}.people-entry-paths>a:hover strong{color:var(--accent)}.people-username{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:4px}.people-access-flow{list-style:none;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0}.people-access-flow li{display:grid;gap:8px}.people-access-flow span{color:var(--muted);font-size:13px}.management-settings-links{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0}.management-settings-links a{font-weight:600;text-decoration:none}.management-settings-links svg{width:16px}@media(max-width:900px){.people-entry-paths,.people-access-flow{grid-template-columns:1fr}.people-entry-paths{gap:0}.people-entry-paths>a{border-bottom:1px solid var(--line)}.people-entry-paths>a:last-child{border:0}}
.permission-group{padding:24px 0;border-top:1px solid var(--line)}.permission-group header{display:flex;justify-content:space-between;gap:16px}.permission-group h3{margin:0}.permission-group form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.permission-group details{margin-top:14px}.permission-group form button{justify-self:start}.management-panel form[data-operations-form]{display:grid;gap:14px}.management-panel select[multiple]{min-height:130px}@media(max-width:760px){.permission-group form{grid-template-columns:1fr}}
.management-panel>summary{font-size:17px;font-weight:650;cursor:pointer}.management-panel[open]>summary{margin-bottom:20px}.permission-group summary{font-size:14px}.management-panel details summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.management-overview>.ops-grid{align-items:start}.management-portal .ops-tabs{flex-wrap:wrap}.management-panel form .small{font-weight:400}

/* Shared spacing keeps adjacent management panels separate without changing learner pages. */
.management-portal .analytics-workspace{display:grid;gap:24px;background:transparent;border:0;padding:0;margin-top:4px}
.management-portal .analytics-workspace>.insight-metrics,.management-portal .analytics-workspace>.insight-columns{margin:0}
.management-portal .analytics-workspace>.admin-section-head{margin:0;padding:0}
.management-portal .analytics-workspace>.account-card{margin:0}
.management-portal .collection-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.management-portal #account-main>.account-card+.account-card,.management-portal .admin-workspace>.account-card+.account-card{margin-top:20px}
.management-portal .analytics-workspace>.account-card+.account-card{margin-top:0}
.management-portal .admin-hero{padding-bottom:12px}
.management-portal .admin-workspace:not(.analytics-workspace){margin-top:12px}
.management-portal .permission-group header{align-items:flex-start}
.management-portal .status.needs-setup{background:var(--caution-bg);color:var(--caution-ink)}
.management-portal .people-purpose summary{cursor:pointer;font-weight:650;color:var(--accent);padding:8px 0}
.people-purpose-list{display:grid;margin-top:16px}
.people-purpose-list article{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:20px 0;border-top:1px solid var(--line);align-items:center}
.people-purpose-list h3{margin:0 0 6px}.people-purpose-list strong{font-size:13px;color:var(--muted)}.people-purpose-list p{margin:8px 0 0}.people-purpose-list a{font-weight:650;font-size:13px}
.management-portal :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:760px){.management-portal .analytics-workspace{padding:0}.people-purpose-list article{grid-template-columns:1fr;gap:12px}.management-portal .collection-metrics{grid-template-columns:1fr}.management-portal .analytics-workspace>.insight-metrics{grid-template-columns:1fr}}
.management-portal #account-main>.management-heading+.management-metrics{margin-top:20px}
.ai-learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}.ai-learning-grid label{display:grid;gap:8px;align-content:start}.ai-learning-grid input,.ai-learning-grid select{width:100%;min-width:0}.ai-learning-estimate{padding:20px;border-radius:16px;background:var(--soft,#eaf2ff);font-size:1.35rem;font-weight:750}@media(max-width:800px){.ai-learning-grid{grid-template-columns:1fr}}

.ai-simple-metrics article{padding:20px;border:1px solid var(--line,#d7e2f0);border-radius:16px}.ai-simple-metrics strong{display:block;font-size:clamp(1.5rem,3vw,2.2rem);margin:12px 0;line-height:1.2}.ai-simple-metrics p{font-size:.85rem}.ai-simple summary{font-weight:700;cursor:pointer}

/* ---- Features: a table to find, filter, select and switch, and a panel for each one. ----
   The cards stopped scaling as capabilities grew. A row says where a capability
   stands and why; its panel says what it does, where it shows, and switches it. */
.feature-name{display:grid;gap:2px;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.feature-name strong{font-size:14px}
.feature-name:hover strong{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.feature-why{display:block;max-width:56ch;color:var(--muted);font-size:13px;line-height:1.5;white-space:normal}
.feature-bulk-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.feature-bulk-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--line)}
.feature-bulk-list span{grid-row:2;font-size:12px;color:var(--muted)}
.feature-bulk-list .management-status{grid-row:1/3;grid-column:2}
.feature-panel .feature-bulk-stays{margin:4px 0 0;font-size:13px;color:var(--muted)}
.feature-links{display:grid;gap:6px}
.feature-links a{display:inline-flex;align-items:center;gap:6px;font-weight:650;text-decoration:none}
.feature-links svg{width:14px;height:14px}
body.feature-panel-open{overflow:hidden}
/* What a switch or a test says is read above the panel, not under it. */
body.feature-panel-open #account-message{z-index:90}
/* A fixed dark veil: --ink turns light in dark mode, so a veil made from it washed the page out. */
.feature-panel-backdrop{position:fixed;inset:0;z-index:80;background:rgba(8,16,32,.45)}
.feature-panel{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(480px,100vw);overflow:auto;padding:26px;background:var(--paper);
 border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(8,16,32,.5);display:grid;gap:16px;align-content:start}
.feature-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.feature-panel header h2{margin:0 0 8px}
.feature-panel>p{margin:0;line-height:1.6}
.feature-panel .feature-panel-close{flex:none;width:40px;min-height:40px;padding:0;border-radius:50%;font-size:20px;line-height:1}
.feature-panel .feature-area{margin:0 0 5px;font-size:11px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.feature-facts{display:grid;gap:var(--gap-items);margin:0}
.feature-facts div{display:grid;gap:3px;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.feature-facts dt{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.feature-facts dd{margin:0;font-size:14px;line-height:1.5}
.feature-panel .feature-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:13px}
.feature-test-button{min-height:36px;padding:6px 14px;font-size:13px}
.feature-panel-switch{padding-top:16px;border-top:1px solid var(--line)}
.feature-panel-switch p{margin:0 0 10px}
@media(prefers-reduced-motion:no-preference){.feature-panel{animation:feature-panel-in .18s ease-out}}
@keyframes feature-panel-in{from{transform:translateX(24px);opacity:.5}}
@media(max-width:760px){.feature-panel{padding:20px 16px}}
/* On a phone each capability is a short card: its name and state, then why, then its buttons,
   so nothing sits off to the side of a table that has to be scrolled across. */
@media(max-width:600px){
 #board-features .board-table{min-width:0}
 #board-features .board-table thead{display:none}
 #board-features .board-table tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:14px 12px;border-bottom:1px solid var(--line)}
 #board-features .board-table tbody tr:last-child{border-bottom:0}
 #board-features .board-table tbody tr>*{display:block;padding:0;border:0;width:auto}
 #board-features .board-table tbody .board-pick{grid-row:1/4;padding-top:2px}
 #board-features .board-table tbody td:nth-child(3){grid-column:3;grid-row:1}
 #board-features .board-table tbody td:nth-child(4){grid-column:2/4}
 #board-features .board-table tbody .board-actions{grid-column:2/4;text-align:left;white-space:normal}
}

/* The account id, where the owner needs it: allow-lists in Azure are written by id. */
.member-account-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.member-account-id code{font-size:12px;padding:2px 8px;border-radius:8px;background:var(--soft);color:var(--ink);user-select:all}

/* What needs a person, first and unmistakable. Each one opens where the work is,
   so nothing here is a label without a door. */
.management-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 22px}
.management-need{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;text-decoration:none;
 border:1px solid color-mix(in srgb,var(--caution-ink) 35%,var(--line));background:color-mix(in srgb,var(--caution-bg) 55%,var(--paper));
 color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.management-need:hover{transform:translateY(-2px);box-shadow:0 12px 26px color-mix(in srgb,var(--ink) 10%,transparent)}
.management-need-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;background:var(--paper);color:var(--caution-ink)}
.management-need>span:nth-child(2){display:grid;gap:2px;min-width:0}
.management-need strong{font-size:15px;line-height:1.25}
.management-need span span{font-size:12px;color:var(--muted)}
.management-need-go{margin-left:auto;color:var(--accent);font-weight:700}
/* What only the owner can move, said in the words of the thing that is waiting. */
.management-blocked{margin-bottom:22px}
/* Cards, not ruled lines. Each of these is one thing that is stuck, and a
   full-width band for a nine-word sentence is mostly empty space. */
.management-blocked-list{list-style:none;margin:16px 0 0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.management-blocked-list li{display:grid;gap:6px;align-content:start;padding:16px 18px;border-radius:13px;
 background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent);
 box-shadow:0 2px 5px #162d5010}
.management-blocked-list li:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.management-blocked-list strong{font-size:14.5px;line-height:1.35}
.management-blocked-list span{font-size:12.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.management-blocked-list a{justify-self:start;margin-top:4px;font-size:12.5px;font-weight:650;text-decoration:none}
.management-blocked-list a:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:no-preference){.management-blocked-list li{transition:border-color .15s}}
.management-context-title{margin:26px 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Invite codes as things you manage, not as a log line: state, how much of it is
   spent, who made it, and the one action it has. */
.request-codes{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px}
.request-codes li{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.request-codes li[data-state=expired],.request-codes li[data-state=revoked],.request-codes li[data-state=full]{opacity:.72}
.request-code-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.request-code-head strong{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.request-code-value{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.request-code-value code{font-size:15px;letter-spacing:.06em;padding:4px 10px;border-radius:10px;background:var(--soft);color:var(--ink)}
.request-code-value span{font-size:12px;color:var(--muted)}
.request-code-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.request-code-facts dt{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.request-code-facts dd{margin:2px 0 0;font-size:13px;font-weight:650}
.request-code-meter{height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.request-code-meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.request-codes button{justify-self:start;min-height:38px;font-size:13px}
.management-muted{color:var(--muted)}

/* Adults with accounts, as people rather than rows: who they are, what they can
   do, and whether anything we send can reach them. */
.support-parent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.support-parent-head>div{flex:1 1 300px}
.support-parents{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.support-parents li{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.support-parents li[data-paused]{opacity:.74}
.support-parent-face{display:grid;place-items:center;flex:none;width:42px;height:46px;border-radius:15px;background:var(--soft);color:var(--accent);font-weight:800;font-size:18px}
.support-parents li>div{display:grid;gap:3px;min-width:0;flex:1 1 auto}
.support-parents li>div>span{font-size:12px;color:var(--muted)}
.support-parent-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.support-parents button{margin-left:auto;min-height:38px;font-size:13px}

/* The header, in three zones: where you are, what you are looking for, and what
   is waiting. It used to be a row of things beside a card wide enough to be a
   page of its own. The outer zones are equal, so the search is centred whatever
   the page is called and whatever sits on the right: an auto right zone here
   quietly undid that, and the search slid whenever the bell or a name changed
   width (23 September 2026). Only when the bar is too narrow for both does the
   right zone keep what its controls need. */
.management-portal #management-topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,420px) minmax(max-content,1fr);align-items:center;gap:20px}
.management-topbar-left{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;justify-self:start}
/* The left zone may shrink below its text, so the crumb has to give way rather
   than run under the search box beside it. */
.management-breadcrumb{min-width:0;overflow:hidden;flex-wrap:nowrap}
.management-breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.management-breadcrumb>.management-icon{flex:none}
.management-topbar-right{display:flex;align-items:center;gap:10px;justify-self:end;min-width:0}
.management-search{position:relative;display:flex;align-items:center;gap:8px;width:100%}
.management-search input{width:100%}
.management-search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:inherit;font-size:11px;line-height:1;
 padding:3px 7px;border-radius:7px;border:1px solid var(--line);background:var(--soft);color:var(--muted);pointer-events:none}
/* The person, as a face and a first name rather than a link that says my account. */
.management-account{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line);
 background:var(--paper);color:var(--ink);text-decoration:none;font-size:13px;font-weight:650}
.management-account:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.management-account-face{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--accent);font-weight:800;font-size:13px}
/* What is waiting: a count you notice, a list you open, and nothing across the top. */
.attention-belt{position:relative}
/* One fixed spot in the bar, whether or not anything is waiting: the belt's old
   full-width grid (accounts.css) made this 260px wide once signals arrived. */
.management-bell-host{flex:none;width:40px;height:40px}
.management-bell-host .attention-belt{display:block;width:40px;height:40px}
.attention-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:999px;
 border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}
.attention-bell:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--ink);background:color-mix(in srgb,var(--soft) 60%,var(--paper))}
.attention-bell[aria-expanded=true]{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,var(--paper))}
.attention-bell[data-waiting=yes]{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.attention-bell:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.attention-bell svg{width:20px;height:20px}
.attention-count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
 display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;background:var(--accent);color:var(--on-accent);
 border:2px solid var(--paper);box-shadow:0 1px 3px #162d5033}
.attention-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(94vw,368px);display:grid;gap:3px;padding:10px;
 border-radius:14px;border:1px solid var(--line);background:var(--paper);box-shadow:0 18px 44px #162d5024}
.attention-panel[hidden]{display:none}
.attention-panel-head{margin:0 0 4px;padding:6px 10px 8px;border-bottom:1px solid var(--line);font-size:12px;font-weight:650;
 color:var(--muted);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.attention-panel-head span{font-weight:400;font-size:11.5px}
.attention-panel .attention-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
 padding:11px 12px;border-radius:11px;text-decoration:none;color:var(--ink)}
.attention-panel a.attention-item:hover{background:color-mix(in srgb,var(--soft) 70%,transparent)}
.attention-panel a.attention-item:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
.attention-item-count{min-width:30px;height:30px;padding:0 7px;border-radius:9px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:15px;font-weight:700;line-height:1}
.attention-item-body{display:grid;gap:2px;min-width:0}
.attention-item-body strong{font-size:14px;font-weight:650}
.attention-item-body em{font-style:normal;font-size:12px;line-height:1.45;color:var(--muted)}
.attention-item-go{color:var(--muted);font-size:15px}
.attention-panel a.attention-item:hover .attention-item-go{color:var(--accent)}
.attention-panel-foot{display:block;margin-top:4px;padding:10px 12px;border-top:1px solid var(--line);
 font-size:12.5px;font-weight:650;text-decoration:none;color:var(--accent)}
.attention-empty{margin:0;padding:10px 12px 14px;font-size:13px;line-height:1.55;color:var(--muted)}
/* Narrow: the breadcrumb is already hidden, so the menu button and the account
   cluster take only what they need and the search has the rest. Still one row,
   still the same three zones in the same order. */
@media(max-width:900px){
 .management-portal #management-topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
}

/* ---- A board: one toolbar, one table, one pager, wherever a list is managed. */
.management-board{display:grid;gap:14px}
.board-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px 12px}
.board-toolbar label{display:grid;gap:5px;font-size:12px;font-weight:650;color:var(--muted)}
.board-toolbar select{min-height:40px}
.board-search{position:relative;display:flex;align-items:center;flex:1 1 240px;max-width:360px}
.board-search .management-icon{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.board-search input{width:100%;padding-left:38px;min-height:40px}
.board-toolbar-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.board-selected{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0;padding:10px 14px;border-radius:12px;background:var(--soft);color:var(--ink);font-size:13px;font-weight:650}
.board-selected p{margin:0}
.board-selected-actions{display:flex;flex-wrap:wrap;gap:8px}
.board-selected-actions button{min-height:34px;padding:6px 14px;font-size:13px}
.board-scroll{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.board-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.board-table thead th{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--soft) 70%,var(--paper));
 text-align:left;font-size:12px;letter-spacing:.03em;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.board-table tbody th,.board-table td{padding:13px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);text-align:left;vertical-align:middle}
.board-table tbody tr:last-child th,.board-table tbody tr:last-child td{border-bottom:0}
.board-table tbody tr:hover{background:color-mix(in srgb,var(--soft) 45%,transparent)}
.board-table tbody tr[data-state=paused]{opacity:.7}
.board-table tbody th{font-weight:700}
.board-sort{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:12px;letter-spacing:.03em;color:var(--muted);cursor:pointer}
.board-sort:hover{color:var(--ink)}
.board-sort span{opacity:.6;font-size:11px}
/* Dark mode paints every button (accounts.css); a sort heading and a row's name are words, not buttons. */
:root[data-mode=dark] :is(.board-sort,.feature-name){background:none}
.board-pick{width:44px}
.board-actions{width:1%;white-space:nowrap;text-align:right}
.board-actions button,.board-actions a{min-height:34px;font-size:13px;padding:6px 12px}
.board-actions>*+*{margin-left:6px}
.board-pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.board-count{margin:0;font-size:13px;color:var(--muted)}
.board-pages{display:flex;align-items:center;gap:4px;margin-left:auto}
.board-pages button{min-width:36px;min-height:36px;padding:4px 10px;font-size:13px;border-radius:10px}
.board-pages button[aria-current=page]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.board-pages button[disabled]{opacity:.45}
.board-gap{padding:0 2px;color:var(--muted)}
.board-size{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:var(--muted)}
.board-size select{min-height:36px}
.board-empty{display:grid;justify-items:center;gap:8px;padding:38px 24px;text-align:center;border:1px dashed var(--line);border-radius:18px;background:var(--paper)}
.board-empty .management-icon{width:30px;height:30px;color:var(--accent)}
.board-empty strong{font-size:16px}
.board-empty p{margin:0;max-width:46ch;color:var(--muted);font-size:14px}
@media(max-width:700px){.board-toolbar-actions{margin-left:0;width:100%}.board-pages{margin-left:0}}
.board-table .board-sub,.board-table small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.board-person{display:flex;align-items:center;gap:10px}
.board-person .face{font-size:20px;line-height:1}
.board-person strong{display:block}

/* Features: what is on, what is ready, what is blocked, and the table filtered by
   whichever of those you press. */
.feature-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.feature-tile{display:grid;gap:2px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--paper);
 color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.feature-tile strong{font-size:24px;line-height:1.1}
.feature-tile span{font-size:12px;color:var(--muted)}
.feature-tile:hover{transform:translateY(-2px)}
.feature-tile[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.feature-tile.is-ready strong{color:var(--success-ink)}
.feature-tile.is-attention strong{color:var(--caution-ink)}
.feature-tile.is-paused strong{color:var(--muted)}

/* Inside the portal, the public footer is somebody else's navigation: policies,
   plans and password recovery are a visitor's concerns, and an operator has the
   account menu for their own. */
body.management-portal>.policy-links{display:none}

/* The day and night switch belongs beside the bell and the account, where every
   other header in this product keeps it. */
.management-topbar-right .ws-mode{width:40px;height:40px;min-height:40px;padding:0;border-radius:999px;
 border:1px solid var(--line);background:var(--paper);color:var(--muted);display:grid;place-items:center;box-shadow:none}
.management-topbar-right .ws-mode:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
 color:var(--ink);background:color-mix(in srgb,var(--soft) 60%,var(--paper))}
.management-topbar-right .ws-mode svg{width:19px;height:19px}
.management-topbar-right .ws-mode:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* A phone: the three zones stay on one row, so the menu and the account show as
   their icon and their initial (each keeps its name for a screen reader), and the
   search takes the rest. The / hint is for a keyboard, so it goes. At 390px the
   names had pushed the search into a sliver under the menu (24 September 2026). */
.management-menu .management-icon{display:none}
@media(max-width:600px){
 .management-portal #management-topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:10px 12px}
 .management-portal .management-menu{display:grid!important;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border-radius:12px}
 .management-menu .management-icon{display:block;width:20px;height:20px}
 .management-menu-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .management-search kbd{display:none}
 .management-topbar-right{gap:6px}
 .management-topbar-right .account-chip{gap:0;padding:4px}
 .management-topbar-right .account-chip-name,.management-topbar-right .account-chip>svg{display:none}
}
/* Database updates on Features (loadDatabaseUpdates) */
.database-update-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.database-update-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.database-update-list li>div{display:grid;gap:3px;min-width:0}.database-update-list span{font-size:13px}
.database-update-list small{color:var(--muted);font-size:12px}
.database-update-step{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--caution-bg);color:var(--caution-ink);font-size:13px}
.database-update-confirm{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--soft)}
.database-update-confirm p{margin:0 0 10px}
@media(max-width:600px){.database-update-list li{flex-direction:column;align-items:flex-start}}

/* ---- AI usage & limits (admin-portal.js, scripts/ai_spend.py) ------------------------------ */
/* The month at a glance: what is spent against the budget, where the month ends, requests, answer time. */
.ai-strip{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:14px}
.ai-stat{min-width:0;display:grid;gap:6px;align-content:start;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.ai-stat>span{font-size:13px;font-weight:700;color:var(--muted)}
.ai-stat>strong{font-size:clamp(26px,2.3vw,36px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ai-stat>small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;color:var(--muted)}
.ai-alert{margin:0;padding:12px 16px;border-radius:14px;font-weight:700;background:var(--caution-bg);color:var(--caution-ink)}
.ai-alert.is-paused{background:color-mix(in srgb,#c2413b 16%,var(--paper));color:var(--ink)}
.ai-meter{position:relative;height:10px;margin:6px 0 2px;border-radius:999px;background:var(--soft);overflow:visible}
.ai-meter span{display:block;height:100%;width:var(--fill);min-width:6px;border-radius:999px;background:var(--accent)}
.ai-meter span.is-attention{background:#b7791f}
.ai-meter span.is-paused{background:#c2413b}
.ai-meter i{position:absolute;top:-4px;bottom:-4px;left:var(--at);width:2px;border-radius:2px;background:var(--ink);opacity:.5}
/* The days, to their own scale, beside where the money goes. */
.ai-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,1fr);gap:20px;align-items:stretch}
.ai-grid>.management-panel{margin:0}
.ai-chart{margin:0;display:grid;gap:12px}
.ai-chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:700;color:var(--muted)}
.ai-chart figcaption strong{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ai-chart-plot{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:clamp(150px,22vh,230px) auto;column-gap:12px;row-gap:8px}
.ai-chart-y{position:relative;min-width:42px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ai-chart-y span{position:absolute;right:0;transform:translateY(-50%);line-height:1;white-space:nowrap}
.ai-chart-y span:nth-child(1){top:0}.ai-chart-y span:nth-child(2){top:50%}.ai-chart-y span:nth-child(3){top:100%}
.ai-chart-area{position:relative;border-bottom:1px solid var(--line);
 background:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent),color-mix(in srgb,var(--line) 70%,transparent)) 0 0/100% 1px no-repeat,
  linear-gradient(color-mix(in srgb,var(--line) 70%,transparent),color-mix(in srgb,var(--line) 70%,transparent)) 0 50%/100% 1px no-repeat}
.ai-chart-bars{list-style:none;margin:0;padding:0 2px;height:100%;display:flex;align-items:flex-end;gap:clamp(2px,.45vw,7px)}
.ai-chart-bars li{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end}
.ai-chart-bars span{display:block;width:100%;height:var(--h);border-radius:5px 5px 1px 1px;background:color-mix(in srgb,var(--accent) 62%,transparent);transition:background-color .15s}
.ai-chart-bars li:hover span{background:var(--accent)}
.ai-chart-bars li.is-today span{background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.ai-chart-bars li.is-none span,.ai-chart-bars li.is-ahead span{height:3px;border-radius:2px;background:var(--line)}
.ai-chart-bars li.is-ahead span{opacity:.5}
.ai-chart-pace{position:absolute;left:0;right:0;bottom:var(--at);border-top:2px dashed color-mix(in srgb,#b7791f 75%,transparent);pointer-events:none;z-index:1}
.ai-chart-pace span{position:absolute;right:0;bottom:5px;padding:1px 7px;border-radius:7px;font-size:12px;font-weight:700;color:var(--muted);background:var(--paper)}
.ai-chart-x{grid-column:2;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.ai-chart+.small,.ai-days>.small{margin:10px 0 0}
.ai-where h2{margin:0 0 14px}
.ai-split{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:16px}
.ai-split li{display:grid;gap:6px}
.ai-split-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.ai-split-head span{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ai-split-head small{font-weight:600;color:var(--muted)}
.ai-split i,.ai-use-bar{position:relative;display:block;height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.ai-split i::before,.ai-use-bar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--accent)}
.ai-split small{font-size:12.5px;color:var(--muted)}
/* The budget, a setting: set once, changed rarely. */
.ai-budget h2{margin:0 0 14px}
.ai-budget-form{display:grid;gap:20px}
.ai-budget-form fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.ai-budget-form legend{font-weight:700;font-size:14px;margin-bottom:8px}
.ai-budget-rules{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 44px}
.ai-budget-rules>label{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-weight:700;font-size:14px}
.ai-budget-form label>select{width:auto;max-width:100%}
.ai-budget-form .school-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.ai-budget-form [data-ai-result]{margin:0}
.ai-chips,.ai-reach{display:flex;flex-wrap:wrap;gap:8px}
.ai-chip,.ai-reach label{display:inline-flex;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:650;font-size:14px;cursor:pointer}
.ai-chip:has(input:checked),.ai-reach label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.ai-chip input,.ai-reach input{width:auto;min-height:0}
.ai-other{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:14px}
.ai-other span{display:inline-flex;align-items:center;gap:4px}
.ai-other input{width:120px}
/* Each assistant: its month against its cap; the pace guard at its foot. */
.ai-assistants select,.ai-limits .board-table select{min-height:36px;padding:4px 10px;width:auto}
.ai-assistants .is-num{text-align:right;font-variant-numeric:tabular-nums}
.ai-use{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.ai-use-of{font-weight:400;font-size:12.5px;color:var(--muted)}
.ai-top-title{margin:18px 0 8px;font-size:14px!important;color:var(--muted)}
.ai-top{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ai-top li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.ai-top li:first-child{border-top:0}
.ai-top small{color:var(--muted)}
.ai-top strong{font-variant-numeric:tabular-nums}
.ai-use-bar{height:5px;margin-top:6px;max-width:170px}
.ai-pace{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ai-pace label{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:700;font-size:14px}
.ai-pace select{width:auto}
.ai-foot{margin:0}
@media (max-width:1180px){.ai-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-grid{grid-template-columns:1fr}}
@media (max-width:560px){.ai-strip{grid-template-columns:1fr}.ai-chart-bars{gap:2px}}
@media (prefers-reduced-motion:reduce){.ai-chart-bars span{transition:none}}
/* Fair practice, in the Sparks from practice games panel: the limits, then the numbers, then the flags. */
.fair-block{display:grid;gap:14px;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}
.fair-block h3{margin:0;font-size:16px}
.fair-block .small{margin:0}
.fair-limits{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fair-limits label{display:grid;gap:6px;font-size:14px}
.fair-limits select{min-height:42px;padding:8px 12px;border-radius:12px;background:var(--paper);color:var(--ink)}
.fair-watch-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.fair-days{display:flex;gap:6px}
.fair-days button{min-height:36px;padding:6px 12px;font-size:13px}
.fair-days button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.fair-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.fair-numbers>div{background:var(--paper);border-radius:12px;padding:10px 12px}
.fair-numbers dt{font-size:12px;color:var(--muted)}
.fair-numbers dd{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.fair-flags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fair-flags li{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--paper);border-left:4px solid var(--line)}
.fair-flags li.is-needs{border-left-color:var(--danger,#c0392b)}
.fair-flags li.is-watch{border-left-color:var(--warning,#d4a017)}
.fair-flags span{font-size:14px}
.fair-flags a{font-size:13px}
.fair-clear{margin:0;font-weight:600}
/* The logo and "Administration Portal" stay at the top of the menu, and only the list scrolls beneath them
   (The Architect, 26 September 2026). */
.management-portal #management-nav{overflow:hidden}
.management-portal #management-nav>.management-brand{flex:none}
.management-portal #management-nav>nav{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-bottom:-24px;padding-bottom:24px}
/* Keyboard shortcuts (admin-portal.js managementKeys), 26 September 2026: one quiet list, keys on the left. */
.management-keys{border:1px solid var(--line);border-radius:22px;padding:22px 24px;width:min(460px,calc(100vw - 32px));background:var(--paper);color:var(--ink)}
.management-keys::backdrop{background:rgb(10 20 40 / .45)}
.management-keys-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.management-keys-head h2{margin:0;font-size:1.25rem}.management-keys-head button{min-height:40px;min-width:40px;padding:0;border-radius:50%}
.management-keys>p{margin:8px 0 16px}
.management-keys dl{display:grid;gap:8px;margin:0;max-height:60vh;overflow:auto}
.management-keys dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center}
.management-keys dt{margin:0}.management-keys dd{margin:0}
.management-keys kbd{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-bottom-width:2px;border-radius:8px;font-size:.85rem;font-family:inherit;background:var(--soft)}

/* ---- The School Portal (app/school-portal.js) ----------------------------------------
   The Administration frame, wearing the school's own colour. The school's colour is kept
   only if it reads at 4.5:1 on white (school_portal.legible_accent); at night the portal
   lifts it toward white so links and buttons still read on the standard's navy. */
:root[data-school-accent] body.school-portal{--accent:var(--school-accent);--accent-hover:color-mix(in srgb,var(--school-accent) 84%,#000);--on-accent:#fff;
 --soft:color-mix(in srgb,var(--school-accent) 9%,var(--paper))}
:root[data-mode=dark][data-school-accent] body.school-portal{--accent:color-mix(in srgb,var(--school-accent) 40%,#fff);--accent-hover:color-mix(in srgb,var(--school-accent) 30%,#fff);
 --on-accent:#152c56;--soft:color-mix(in srgb,var(--school-accent) 18%,var(--paper))}
.management-status.is-muted{background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--muted)}

/* The rail: the school's crest and name, then the pages its role opens. */
.school-crest{display:inline-grid;place-items:center;flex:none;width:var(--crest,40px);height:var(--crest,40px);border-radius:calc(var(--crest,40px)*.28);
 background:var(--paper);border:1px solid var(--line);overflow:hidden}
.school-crest img{width:100%;height:100%;object-fit:contain;padding:12%}
.school-crest-mono{background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));color:var(--on-accent);border:0;
 font-weight:800;font-size:calc(var(--crest,40px)*.38);letter-spacing:.02em}
.management-portal .school-brand{display:flex;align-items:center;gap:12px;min-height:64px}
.school-brand strong{display:block;font-size:15px;line-height:1.2;color:var(--ink)}
.school-brand small{display:block;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.school-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;border-radius:999px;
 background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800}
.school-rail-foot{display:grid;gap:10px;margin-top:18px;padding:14px 12px 4px;border-top:1px solid var(--line)}
.school-role{font-size:12px;font-weight:700;color:var(--muted)}
.school-switch{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.school-rail-link{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);text-decoration:none}
.management-breadcrumb .school-crest{margin-right:8px;vertical-align:middle}

/* The period, the same three choices wherever figures are shown. */
.school-period{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.school-period button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:13px;font-weight:650}
.school-period button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}

.school-page{display:grid;gap:22px}
.school-eyebrow{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.school-note{margin:0;padding:12px 16px;border-radius:14px;background:var(--soft);color:var(--ink);font-size:14px}
.school-privacy{margin:0;color:var(--muted)}
.school-hidden{font-size:15px;font-weight:700;color:var(--muted)}
.school-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.school-stack{display:grid;gap:22px}
.school-empty{text-align:center;padding:36px 24px}

/* Home: the hero, the launch checklist, the week. */
.school-hero{position:relative;display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:22px;overflow:hidden;
 background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--paper)),var(--paper) 70%);border:1px solid var(--line)}
.school-hero h1{margin:0;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em}
.school-hero p{margin:6px 0 0;color:var(--muted);max-width:62ch}
.school-verified{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
 background:var(--success-bg);color:var(--success-ink);font-size:12px;font-weight:800}
.school-verified::before{content:'✓'}
.school-checklist-head{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.school-checklist-head h2{margin:0}
.school-ring{--done:0;display:grid;place-items:center;flex:none;width:78px;height:78px;border-radius:50%;
 background:radial-gradient(closest-side,var(--paper) 78%,transparent 80%),conic-gradient(var(--accent) calc(var(--done)*1%),var(--line) 0)}
.school-ring span{font-size:22px;font-weight:800}
.school-ring small{font-size:13px;color:var(--muted)}
.school-steps{list-style:none;margin:0;padding:0;display:grid}
.school-steps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 4px;border-top:1px solid var(--line)}
.school-steps li div{display:grid;gap:2px}
.school-steps li div span{font-size:13px;color:var(--muted)}
.school-steps li em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.school-step-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--control-line);font-weight:800;font-size:13px}
.school-steps li[data-done=true] .school-step-mark{background:var(--success-solid,var(--accent));border-color:transparent;color:var(--on-success-solid,#fff)}
.school-steps li[data-next=true]{background:var(--soft);border-radius:14px}
.school-step-state{font-size:13px;font-weight:650;color:var(--muted)}
.school-launch-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.school-launched{display:flex;align-items:center;gap:16px}
.school-launched h2{margin:0}
.school-seal{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--success-bg);color:var(--success-ink);font-size:22px;font-weight:800}
.school-home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.school-attention{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.school-attention a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
 border:1px solid var(--line);color:var(--ink);text-decoration:none}
.school-attention a:hover{border-color:var(--accent)}
.school-attention strong{font-size:20px;color:var(--accent)}
.school-calm{padding:12px 0}
.school-subhead{margin-top:22px}
.school-notice-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.school-notice-list li{display:grid;gap:2px}
.school-notice-list span{font-size:12px;color:var(--muted)}

/* Learners: the practice a family shares, in a side panel. */
.school-drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(460px,100vw);overflow:auto;padding:24px;background:var(--paper);
 border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px color-mix(in srgb,var(--ink) 45%,transparent);display:grid;gap:16px;align-content:start}
.school-drawer header{display:flex;justify-content:space-between;gap:12px}
.school-drawer header h2{margin:0}
.school-drawer header button{min-height:40px;min-width:40px;border-radius:50%;font-size:20px;line-height:1}
.school-activities,.school-next{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.school-activities li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.school-activities span{font-size:13px;color:var(--muted)}
.school-signal{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.school-signal[data-signal=revisit]{color:var(--caution-ink)}
.school-signal[data-signal=steady]{color:var(--success-ink)}

/* Classes: side by side, never ranked. */
.school-class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.school-class{display:grid;gap:10px;padding:18px;border-radius:18px;background:var(--paper);border:1px solid var(--line);
 box-shadow:0 10px 26px -24px color-mix(in srgb,var(--ink) 60%,transparent)}
.school-class.is-archived{opacity:.72}
.school-class header{display:flex;justify-content:space-between;gap:10px}
.school-class h3{margin:0;font-size:17px}
.school-class header p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.school-class-teacher{display:flex;align-items:center;gap:6px;margin:0;font-size:14px}
.school-class-teacher .management-icon{width:16px;height:16px}
.school-class-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.school-class-stats strong{color:var(--ink)}
.school-class footer{display:flex;justify-content:flex-end}
.school-support{margin:0;font-size:13px;font-weight:650;color:var(--caution-ink)}
.school-manage-head{display:flex;justify-content:space-between;align-items:center}
.school-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:16px}
.school-roster ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.school-roster li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--soft)}
.school-pick{display:grid;gap:6px;max-height:280px;overflow:auto;margin-bottom:12px}
.school-pick label{display:flex;align-items:center;gap:8px;font-size:14px}
.school-pick input{width:auto;min-height:0}

/* Forms. */
.school-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.school-form label{display:grid;gap:6px;font-size:13px;font-weight:650;color:var(--ink)}
.school-form .school-span,.school-form-actions,.school-form [data-school-result]{grid-column:1/-1}
.school-form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.school-form textarea{width:100%;border:1px solid var(--control-line);border-radius:12px;padding:12px;background:var(--paper);color:var(--ink);font:inherit}
[data-school-result].is-refused{margin:0;color:var(--error-ink);font-weight:650}
.school-colour{display:flex;align-items:center;gap:10px}
.school-colour input[type=color]{width:56px;min-height:44px;padding:4px}

/* Staff & roles. */
.school-invites,.school-requests{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-items)}
.school-invites li,.school-requests li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line)}
.school-invites li div,.school-requests li div{display:grid;gap:2px;margin-right:auto}
.school-invites li span,.school-requests li div span{font-size:13px;color:var(--muted)}
.school-roles dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0}
.school-roles dl div{padding:14px;border-radius:14px;background:var(--soft)}
.school-roles dt{font-weight:800}
.school-roles dd{margin:4px 0 0;font-size:13px;color:var(--muted)}

/* Find & connect. */
.school-found-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.school-found-head h2{margin:0}
.school-bignum{display:grid;justify-items:end;line-height:1}
.school-bignum strong{font-size:44px;color:var(--accent)}
.school-bignum span{font-size:13px;color:var(--muted)}
.school-found-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:16px 0}
.school-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.school-bars li,.school-funnel li{display:grid;grid-template-columns:130px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13px}
.school-bars i,.school-funnel i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--fill),var(--soft) var(--fill))}
.school-bars strong,.school-funnel strong{text-align:right}
.school-funnel{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.school-funnel li{grid-template-columns:170px minmax(0,1fr) 44px}
.school-chips{display:flex;flex-wrap:wrap;gap:8px}
.school-chips .plans-chip b{margin-left:4px}
.school-alias-add{cursor:pointer;border:1px dashed var(--control-line);background:var(--paper)}
.school-alias-add span{margin-left:6px;color:var(--accent);font-weight:700}
.school-invite-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px}
.school-invite-row label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}
.school-nearby{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.school-people{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.school-people label{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--line);cursor:pointer}
.school-people input{width:auto;min-height:0}
.school-people strong{display:block}
.school-people small{color:var(--muted)}
.school-face{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);font-weight:800}
.school-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.school-code{display:grid;gap:6px;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,var(--soft),var(--paper))}
.school-code span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.school-code strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.08em;color:var(--ink)}
.school-code-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}
.school-teachers{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.school-teachers li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
.school-teachers .school-face{grid-row:1/3}
.school-teachers li span:last-child{font-size:12px;color:var(--muted)}

/* The noticeboard. */
.school-audience{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;border:0;padding:0;margin:0}
.school-audience legend{font-size:13px;font-weight:650;margin-bottom:6px}
.school-audience label{display:flex;align-items:center;gap:6px;font-weight:600}
.school-audience input{width:auto;min-height:0}
.school-board{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.school-board article{padding:18px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.school-board header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.school-board h3{margin:0}
.school-board p{margin:10px 0}
.school-board footer{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}

/* Sparki for the school. */
.school-modes{display:grid;gap:10px;border:0;padding:0;margin:0}
.school-modes legend,.school-form fieldset legend{font-size:13px;font-weight:650;margin-bottom:6px}
.school-toggle{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);cursor:pointer}
.school-toggle input{width:auto;min-height:0;margin-top:3px}
.school-toggle strong{display:block;font-size:14px}
.school-toggle small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.school-chip-pick{display:inline-flex!important;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-weight:600}
.school-chip-pick input{width:auto;min-height:0}
.school-form fieldset{border:0;padding:0;margin:0}
.school-bubble{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:22px;background:linear-gradient(150deg,var(--soft),var(--paper));border:1px solid var(--line)}
.school-bubble-face{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px}
.school-bubble p{margin:4px 0 0;font-size:16px}

/* The profile, the logo and the domain. */
.school-logo-drop{display:flex;align-items:center;gap:18px}
.school-logo-drop .button{display:inline-flex;align-items:center;cursor:pointer}
.school-dns{margin:10px 0;padding-left:20px;display:grid;gap:8px;font-size:14px}
.school-dns code{padding:2px 6px;border-radius:6px;background:var(--soft);word-break:break-all}
.school-verified-row{display:flex;align-items:center;gap:10px}
.school-closed{display:grid;justify-items:center;text-align:center;gap:10px;max-width:560px;margin:40px auto}

/* The Architect's desk. */
.school-application{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.school-application header{display:flex;justify-content:space-between;gap:12px}
.school-application h3{margin:0}
.school-application header p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.school-application blockquote{margin:0;padding:10px 14px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 12px 12px 0}
.school-app-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.school-app-actions label{display:grid;gap:4px;font-size:12px;font-weight:650}
.school-decided{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}

/* A family's and a teacher's side. */
.school-family{display:grid;gap:14px}
.school-family-child{display:grid;gap:12px;padding:16px;border-radius:18px;border:1px solid var(--line)}
.school-family-child header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.school-family-child h3{margin:0}
.school-family-invite{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--soft)}
.school-family-invite>div{display:flex;gap:12px;align-items:center}
.school-family-logo{width:44px;height:44px;object-fit:contain;border-radius:10px;background:var(--paper)}
.school-code-form{display:grid;gap:10px;max-width:520px}
.school-code-form label{display:grid;gap:6px;font-size:13px;font-weight:650}
.school-teacher-panel{display:grid;gap:12px;margin-bottom:16px}
.school-teacher-invite{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--soft)}
.school-teacher-schools{display:flex;flex-wrap:wrap;gap:8px;margin:0}

/* The journeys' own fields. */
.school-journey{max-width:1080px;margin:0 auto}
.school-journey .jy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.school-journey .jy-field{display:grid;gap:6px;align-content:start;font-size:14px;font-weight:650}
.school-journey .jy-wide{grid-column:1/-1}
.school-journey fieldset.jy-field{border:0;padding:0;margin:0}
.school-journey .jy-options{display:flex;flex-wrap:wrap;gap:10px}
.school-journey .jy-options label{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);font-weight:600;cursor:pointer}
.school-journey .jy-options input,.school-journey .jy-check input{width:auto;min-height:0}
.school-journey .jy-check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.school-journey .jy-choice-card{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--soft)}
.jy-honey{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

@media(max-width:900px){
 .school-two,.school-home-grid,.school-found-grid,.school-roster,.school-code-grid{grid-template-columns:1fr}
 .school-form,.school-journey .jy-grid{grid-template-columns:1fr}
 .school-hero{flex-wrap:wrap}
 .school-verified{margin-left:0}
 .school-bars li,.school-funnel li{grid-template-columns:110px minmax(0,1fr) 40px}
}

/* Five figures in one row where they fit; the period sits in the middle of the bar at its own width;
   a chart inside a panel draws no second box. */
.school-page .school-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.management-topbar .school-period,#management-topbar .school-period{justify-self:center;width:max-content}
.school-page .management-panel>.chart,.school-page .management-panel>.chart-empty{border:0;padding:0;margin:0;box-shadow:none;background:none}
/* The account pages stack a label's contents (accounts.css: label{flex-direction:column}); a choice
   here sits beside its words, as it reads. */
.school-audience label,.school-chip-pick,.school-pick label,.school-invite-row label,.school-journey .jy-options label,
.school-journey .jy-check,.school-app-actions label,.school-code-form label{flex-direction:row}
.school-code-form label,.school-app-actions label{display:grid}
/* A staff row's actions wrap within the row instead of running out of it. */
.school-staff .board-actions{min-width:260px}
.school-staff .board-actions select{width:auto;min-height:36px;padding:4px 10px;margin:0 0 6px}
/* A class's families approving its teacher: the figure a school watches while it launches. */
.school-approvals{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.school-approvals strong{color:var(--ink)}
.school-approvals-bar{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--success-solid,var(--accent)) var(--fill),var(--soft) var(--fill))}
.school-ask{justify-self:start}
/* A family's choices, on the Schools & family page, which has none of the journey's own styles. */
.school-family .jy-check,.school-code-form .jy-check{display:flex;flex-direction:row;gap:10px;align-items:flex-start;font-size:14px;font-weight:650}
.school-family .jy-check input,.school-code-form .jy-check input{width:auto;min-height:0;margin-top:2px}
.school-family .school-toggle input{width:auto;min-height:0}
[data-admin-school-owner]+[data-admin-school]{margin-left:8px}
.school-requests select{width:auto;min-height:36px;padding:4px 10px}

/* ---- Schools, in Administration (school-admin.js) ------------------------------------------- */
.sa-heading{align-items:flex-start}
.sa-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;padding:4px;border-radius:16px;border:1px solid var(--line);background:var(--paper);width:max-content;max-width:100%}
.sa-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;border-radius:12px;color:var(--muted);font-weight:700;font-size:14px;text-decoration:none}
.sa-tabs a:hover{color:var(--ink);background:var(--soft)}
.sa-tabs a[aria-current=page]{background:var(--accent);color:var(--on-accent)}
.sa-tabs a[aria-current=page] .school-badge,.sa-tabs a[aria-current=page] .sa-count{background:var(--on-accent);color:var(--accent)}
.sa-tabs .school-badge{margin-left:2px}
.sa-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:12px;font-weight:800}
.sa-callout{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px;padding:14px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--soft);color:var(--ink)}
.sa-callout .button,.sa-callout button{margin-left:auto}
.sa-states{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sa-state-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.sa-state-chip:hover{border-color:var(--accent)}
.sa-glance{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.sa-glance a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.sa-glance a:hover{border-color:var(--accent)}
.sa-glance a>span{display:grid;gap:2px;min-width:0}
.sa-glance small{color:var(--muted);font-size:12px}
.sa-glance-figure{text-align:right}
.sa-glance-figure strong{font-size:18px;color:var(--accent)}
.sa-school-cell{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.sa-school-cell>span{display:grid;gap:2px}
.sa-school-cell:hover strong{text-decoration:underline}
.sa-back{margin:0 0 10px}
.sa-back a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;text-decoration:none}
.sa-back a svg{transform:scaleX(-1)}
.sa-school-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 18px}
.sa-school-head>div:not(.sa-school-actions){flex:1 1 320px;min-width:0}
.sa-school-head h1{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:2px 0 4px}
.sa-school-head h1 .management-status{font-size:13px}
.sa-school-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sa-school-actions .button{display:inline-flex;align-items:center;gap:6px}
.sa-panel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.sa-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sa-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-size:14px}
.sa-steps li span{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font-size:12px;font-weight:800}
.sa-steps li[data-done=true] span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sa-steps em{margin-left:auto;font-size:12px;color:var(--muted)}
.sa-waiting{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.sa-waiting li{padding:10px 12px;border-radius:12px;background:var(--soft)}
.sa-waiting strong{color:var(--accent);font-size:17px;margin-right:4px}
.sa-enquiries{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.sa-enquiries li{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid var(--line)}
.sa-enquiries li div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sa-enquiries li p{margin:0;color:var(--muted);font-size:14px}
.sa-enquiries .board-sub{flex-basis:100%}
.sa-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sa-timeline li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.sa-timeline li:last-child{border-bottom:0}
.sa-timeline time{font-size:12px;font-weight:700;color:var(--muted);padding-top:2px}
.sa-timeline div{display:grid;gap:2px}
.sa-timeline div span{color:var(--ink);font-size:14px}
.sa-timeline small{color:var(--muted);font-size:12px}
.sa-timeline li.is-platform strong::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:middle}
.sa-activity{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.sa-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sa-facts li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sa-facts li:last-child{border-bottom:0}
.sa-facts span{color:var(--muted)}
.sa-danger{border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.sa-notices{margin-top:10px}
.sa-dialog{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(8,18,40,.28)}
.sa-dialog::backdrop{background:rgba(8,16,32,.55)}
.sa-dialog form{display:grid;gap:14px;padding:24px}
.sa-dialog h2{margin:0;font-size:21px}
.sa-dialog p{margin:0;color:var(--muted)}
.sa-dialog fieldset{margin:0;padding:0;border:0;display:grid;gap:8px}
.sa-dialog legend{font-weight:800;font-size:14px;margin-bottom:6px}
.sa-reasons{display:grid;gap:6px}
.sa-reasons label{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-weight:600;cursor:pointer}
.sa-reasons label:has(input:checked){border-color:var(--accent);background:var(--soft)}
.sa-reasons input{width:auto;min-height:0}
.sa-dialog label{display:grid;gap:6px;font-weight:650;font-size:14px}
.sa-dialog-actions{display:flex;justify-content:flex-end;gap:10px}

/* The Architect's read-only view of a school's portal, and the school's Help & ideas. */
.school-oversight-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 18px;padding:12px 16px;border-radius:14px;
 background:color-mix(in srgb,var(--accent) 14%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--ink);font-size:14px}
.school-oversight-bar .button{margin-left:auto}
.school-oversight-bar{max-width:none;width:100%;box-sizing:border-box}
/* One row where the tiles fit: .kpi-grid (analytics.css) loads later and would hold them to four. */
.kpi-grid.sa-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.sa-nowrap{white-space:nowrap}
.sa-log-filter{margin-left:auto}
.school-help-kinds{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.school-help-kinds legend{flex-basis:100%;margin-bottom:6px;font-weight:650;font-size:14px}
.school-help-list li .text-action{margin-left:4px}
.school-help-kinds .school-chip-pick{flex-direction:row}

/* ---- Schools overview (school-admin.js, 24 September 2026): what needs you leads, then the
        measures, the way from application to live and the schools; before the first school, the
        four steps to it. ---- */
.sa-home,.sa-first{--crit:#8a2432;--crit-bg:#fbe9ec}
:root[data-mode=dark] .sa-home,:root[data-mode=dark] .sa-first{--crit:#ffb3bf;--crit-bg:#3d1d27}
.sa-home{display:grid;gap:18px}
.sa-home>.management-panel,.sa-home .school-home-grid,.sa-home .school-privacy{margin:0}
.sa-home .sa-panel-head{align-items:center;margin:0 0 12px}.sa-home .sa-panel-head h2{margin:0}
/* The chart draws its own card; inside a panel it is the panel. */
.sa-home .management-panel>.chart{border:0;padding:0;box-shadow:none;background:none}
.sa-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sa-stat{display:grid;gap:2px;align-content:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);min-width:0}
.sa-stat>span{font-size:12.5px;font-weight:700;color:var(--muted)}
.sa-stat>strong{font-size:26px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
.sa-stat>small{font-size:12.5px;color:var(--muted)}
.sa-stat .kpi-move{font-size:12.5px;font-weight:700}
.sa-stat.is-good>strong{color:var(--success-ink)}
.sa-stat.is-crit>strong{color:var(--crit)}
.sa-needs-panel{display:grid;gap:12px}
.sa-needs-panel .sa-panel-head{margin:0}
.sa-needs-panel h2{margin:0}
.sa-needs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sa-need{display:grid;grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"tag title go" "tag detail go";gap:4px 14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.sa-need .sa-tag{grid-area:tag;justify-self:start;margin-top:2px}
.sa-need h3{grid-area:title;margin:0;font-size:15px!important;line-height:1.35}
.sa-need p{grid-area:detail;margin:0;color:var(--muted);font-size:13.5px}
.sa-need .button{grid-area:go;align-self:center;min-height:36px;padding:7px 13px;font-size:13px;border-radius:10px;white-space:nowrap}
.sa-tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.sa-tag.is-crit{background:var(--crit-bg);color:var(--crit)}
.sa-tag.is-warn{background:var(--caution-bg);color:var(--caution-ink)}
.sa-tag.is-info{background:var(--soft);color:var(--accent)}
.sa-tag.is-muted{background:var(--soft);color:var(--muted)}
.sa-calm{display:grid;gap:4px;padding:16px;border:1px dashed var(--line);border-radius:14px}
.sa-calm p{margin:0}
.sa-chart-foot{margin:10px 0 0}
.sa-all{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;text-decoration:none}
.sa-all svg{width:14px;height:14px}
.sa-preview-scroll{overflow-x:auto}
.sa-preview{width:100%;border-collapse:collapse;font-size:14px}
.sa-preview th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.sa-preview td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.sa-preview tr:last-child td{border-bottom:0}
.sa-preview .is-num{text-align:right;font-variant-numeric:tabular-nums}
.sa-preview td.is-num .board-sub{display:block}
.sa-phone-state{display:none}
.sa-first{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px;align-items:start}
.sa-first .management-panel{margin:0}
.sa-first-side{display:grid;gap:18px}
.sa-journey h2{margin:4px 0 6px}
.sa-journey>.small{margin:0 0 18px}
.sa-journey-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sa-journey-steps>li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:0 0 22px}
.sa-journey-steps>li:last-child{padding-bottom:0}
.sa-journey-steps>li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:2px;border-radius:2px;background:var(--line)}
.sa-journey-steps>li[data-state=done]:not(:last-child)::before{background:var(--accent)}
.sa-journey-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--paper);font-weight:800;font-size:14px;color:var(--muted)}
.sa-journey-steps>li[data-state=done] .sa-journey-mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sa-journey-steps>li[data-state=now] .sa-journey-mark{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.sa-journey-steps h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 4px;font-size:16px!important}
.sa-journey-steps>li[data-state=later] h3{color:var(--muted)}
.sa-journey-steps p{margin:0 0 8px;color:var(--muted);font-size:14px}
.sa-journey-steps>li[data-state=now] p:first-child{color:var(--ink)}
.sa-now{padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;letter-spacing:0}
.sa-journey-actions{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-3) 0 4px!important}
.sa-journey-schools{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.sa-journey-schools a{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.sa-journey-schools a:hover{border-color:var(--accent)}
.sa-journey-schools .sa-journey-name{flex:1;min-width:0}
.sa-journey-schools svg{width:14px;height:14px;color:var(--muted)}
.sa-example{display:grid;gap:12px}
.sa-example .sa-panel-head{margin:0}.sa-example h2{margin:0}
.sa-example-page{display:grid;gap:12px;padding:14px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,#2f7d4f 12%,var(--paper)),var(--paper))}
.sa-example-url{margin:0;padding:5px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12px;color:var(--muted);justify-self:start}
.sa-example-hero{display:flex;align-items:center;gap:12px}
.sa-example-hero>div{display:grid;gap:1px;min-width:0}
.sa-example-hero strong{font-size:17px;color:var(--ink)}
.sa-example-hero>div>span{font-size:13px;color:var(--ink)}
.sa-example-hero small{font-size:12px;color:var(--muted)}
.sa-example-crest{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:#2f7d4f;color:#fff;font-weight:800;font-size:20px}
.sa-example-ways{display:flex;flex-wrap:wrap;gap:6px}
.sa-example-ways span{padding:5px 10px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
.sa-example-ways span:first-child{background:#2f7d4f;border-color:#2f7d4f;color:#fff}
.sa-example>.small{margin:0}
.sa-first-funnel .school-funnel{opacity:.75}
/* Invite a school: the link, the ways to send it, and the invitation already written (24 September 2026). */
.sa-share{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 0 6px;padding:16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.sa-share>*{min-width:0}
.sa-share-link{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.sa-share-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:15px;color:var(--ink)}
.sa-share-link button,.sa-share-ways>*{display:inline-flex;align-items:center;gap:8px}
.sa-share-link .management-icon,.sa-share-ways .management-icon{width:16px;height:16px;flex:none}
.sa-share-ways{display:flex;flex-wrap:wrap;gap:8px}
.sa-share-letter{border-top:1px solid var(--line);padding-top:10px}
.sa-share-letter summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink)}
.sa-share-letter[open] summary{margin-bottom:10px}
.sa-share-subject{margin:0 0 8px!important;font-weight:800;color:var(--ink)!important}
.sa-share-body{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.sa-share-body p{margin:0!important;color:var(--ink)!important;font-size:14px}
.sa-elsewhere{margin:0;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);color:var(--muted)}
.sa-elsewhere a{font-weight:700}
.sa-first-funnel>.small{margin:10px 0 0}
@media(max-width:1100px){.sa-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.sa-first{grid-template-columns:1fr}}
@media(max-width:600px){
 .sa-need{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "title" "detail" "go"}
 .sa-need .button{justify-self:start;margin-top:6px}
 .sa-preview th:nth-child(2),.sa-preview td:nth-child(2),.sa-preview th:nth-child(3),.sa-preview td:nth-child(3),.sa-preview td.is-num .board-sub{display:none}
 .sa-phone-state{display:block;margin-top:4px}
}

@media(max-width:900px){
 .sa-activity{grid-template-columns:1fr}
 .sa-timeline li{grid-template-columns:1fr;gap:4px}
 .sa-tabs{width:100%}
 .sa-steps{grid-template-columns:1fr}
 .sa-callout .button,.sa-callout button,.school-oversight-bar .button{margin-left:0}
}

/* ---- A school's own page: its front door (school-journeys.js) ------------------------------ */
.sf-page{--school-accent:var(--accent);max-width:1080px;margin:0 auto;display:grid;gap:22px;padding:8px 0 40px}
.sf-hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:34px 36px;border-radius:28px;color:var(--ink);
 background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--school-accent) 22%,transparent),transparent 60%),
  linear-gradient(160deg,color-mix(in srgb,var(--school-accent) 10%,var(--paper)),var(--paper));border:1px solid color-mix(in srgb,var(--school-accent) 30%,var(--line))}
.sf-hero>div{flex:1 1 360px;min-width:0}
.sf-hero h1{margin:2px 0 8px;font-size:clamp(30px,4.4vw,46px);line-height:1.05}
.sf-hero .school-eyebrow{color:var(--school-accent)}
.sf-welcome{margin:0 0 12px;font-size:18px;color:var(--ink)}
.sf-marks{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;font-size:14px}
.sf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.sf-card{padding:26px;border-radius:22px;border:1px solid var(--line);background:var(--paper);display:grid;gap:14px}
.sf-card h2{margin:0;font-size:22px}
.sf-card form{display:grid;gap:12px}
.sf-signin .primary{width:100%}
.sf-ways article{display:grid;gap:8px;padding:16px;border-radius:16px;background:var(--soft)}
.sf-ways article h3{margin:0;font-size:16px}
.sf-ways article p{margin:0;font-size:14px}
.sf-ways article .button{justify-self:start}
.sf-note{margin:0;padding:12px 16px;border-radius:14px;background:var(--soft);color:var(--ink)}
.sf-foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;color:var(--muted);font-size:13px}
.sf-missing .sf-card{max-width:560px;margin:40px auto;text-align:center}
@media(max-width:900px){.sf-grid{grid-template-columns:1fr}.sf-hero{padding:24px}}
.school-address{display:grid;gap:10px}
.school-address-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--soft);font-weight:700;word-break:break-all}
.school-address-link a{color:var(--ink)}
.school-address form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.school-address form label{flex:1 1 220px}
/* A school's colour reads at 4.5:1 on white (school_portal.legible_accent); at night it is lifted
   toward white, as in the portal, so its name still reads on the standard navy. */
:root[data-mode=dark] .sf-hero .school-eyebrow{color:color-mix(in srgb,var(--school-accent) 40%,#fff)}
@media(prefers-color-scheme:dark){:root:not([data-mode=light]) .sf-hero .school-eyebrow{color:color-mix(in srgb,var(--school-accent) 40%,#fff)}}
.sf-marks .school-verified,.school-verified-row .school-verified{margin-left:0}
.school-address p{margin:0}

/* Analytics: tiles that carry a direction, and two charts drawn by hand. */
.analytics-page{display:grid;gap:22px;max-width:1500px;margin:auto}
.analytics-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.analytics-head h1{margin:2px 0 6px!important}
.management-portal .admin-section-head h1{font-size:34px!important;font-weight:700;letter-spacing:-.035em}
.analytics-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--paper)}
.segmented button{border:0;border-radius:0;background:transparent;color:var(--muted);font-weight:650;font-size:13px;padding:9px 15px;min-height:40px;cursor:pointer}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
/* One tab bar for the whole platform. Analytics, Onboarding, Team & workflows,
   Permission groups, Family connections and the support desk all had their own,
   so moving between two areas of one product meant reading two idioms. */
.analytics-tabs,.management-portal .ops-tabs,.management-portal .admin-sections{
 display:flex;gap:6px;flex-wrap:wrap;border:0;border-bottom:1px solid var(--line);
 border-radius:0;padding:0;background:transparent;margin:0 0 4px}
.analytics-tabs button,.management-portal .ops-tabs button,.management-portal .admin-sections button,
.management-portal .admin-sections>a.button{
 border:0;background:transparent;color:var(--muted);font-weight:650;font-size:14px;padding:11px 14px;
 border-radius:9px 9px 0 0;border-bottom:2px solid transparent;cursor:pointer;min-height:44px;flex:0 0 auto;
 box-shadow:none}
.analytics-tabs button:hover,.management-portal .ops-tabs button:hover,.management-portal .admin-sections button:hover{
 color:var(--ink);background:color-mix(in srgb,var(--soft) 45%,transparent)}
.analytics-tabs button[aria-selected=true],
.management-portal .ops-tabs button[aria-current=page],
.management-portal .admin-sections button[aria-current=page]{
 color:var(--ink);background:transparent;border-bottom-color:var(--accent)}
.analytics-context{margin:-8px 0 0;color:var(--muted);font-size:13px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi-tile{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:18px 20px;display:grid;gap:7px;align-content:start;box-shadow:0 2px 5px #162d5010}
.kpi-label{margin:0;font-size:12px;font-weight:650;color:var(--muted)}
.kpi-value{font-size:34px;line-height:1.05;letter-spacing:-.035em}
.kpi-note{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.kpi-move{justify-self:start;font-size:11.5px;font-weight:650;border-radius:6px;padding:4px 8px;background:var(--soft);color:var(--muted)}
.kpi-up{background:var(--success-bg);color:var(--success-ink)}
.kpi-down{background:var(--caution-bg);color:var(--caution-ink)}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chart{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:18px 20px 12px;box-shadow:0 2px 5px #162d5010}
.chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:var(--space-3);font-size:12px;font-weight:650;color:var(--muted)}
.chart figcaption strong{font-size:18px;color:var(--ink);letter-spacing:-.02em}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .small{margin:var(--space-3) 0 0;color:var(--muted)}
.chart-grid line.chart-grid,.chart svg .chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart svg .chart-tick{fill:var(--muted);font-size:10px;font-weight:650}
.chart svg .chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart svg .chart-fill{fill:var(--accent);opacity:.16;stroke:none}
.chart svg .chart-dot{fill:var(--accent)}
.chart svg .chart-bar{fill:var(--accent);opacity:.82}
.chart svg .chart-bar:hover{opacity:1}
.chart-empty{border:1px dashed var(--line);border-radius:12px;background:var(--paper);padding:26px 20px;display:grid;gap:6px;align-content:center;text-align:center;color:var(--muted)}
.chart-empty strong{color:var(--ink)}
.chart-empty p{margin:0;font-size:12.5px;line-height:1.6}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid{grid-template-columns:1fr}}
@media(max-width:620px){.kpi-grid{grid-template-columns:1fr}.analytics-tabs{overflow-x:auto;flex-wrap:nowrap}.analytics-head{flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.analytics-tabs button,.segmented button,.chart svg .chart-bar{transition:background-color .15s,color .15s,opacity .15s}}
/* Sparki (app/analytics-ui.js analyticsSparki). */
.sparki-health dl{display:grid;gap:14px;margin:12px 0}
.sparki-health dt{font-size:12px;color:var(--muted);font-weight:650}
.sparki-health dd{margin:2px 0 0;display:grid;gap:4px}
.sparki-health dd strong{font-size:20px;letter-spacing:-.02em}
.sparki-health dd small{font-size:12px;color:var(--muted)}
.sparki-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:20px 0}
.sparki-grid h3,.sparki-health h3{margin:0 0 10px}
.sparki-grid h4{margin:14px 0 8px;font-size:13px}
.sparki-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sparki-bars li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto auto;gap:10px;align-items:center;font-size:13px}
.sparki-bars li span{overflow-wrap:anywhere}
.sparki-bars li i{display:block;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--accent,#8a5cf6) var(--fill),var(--line) var(--fill))}
.sparki-bars li small{color:var(--muted);min-width:34px;text-align:right}
.sparki-bars li[data-safety] span{font-weight:700;color:var(--caution-ink)}
.sparki-safety{padding:10px 12px;border-radius:10px;background:var(--caution-bg);color:var(--caution-ink)}
.sparki-big{margin:0 0 12px}
.sparki-big strong{font-size:30px;letter-spacing:-.03em;margin-right:6px}
/* Growth this week (analyticsGrowth): three figures and a table of learners by subject, counts only. */
.analytics-growth-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--gap-cards);margin:0 0 var(--space-4)}
.analytics-growth-numbers>div{display:grid;gap:var(--space-1);padding:var(--pad-box);border:1px solid var(--line);border-radius:14px}
.analytics-growth-numbers dt{font-size:13px;color:var(--muted)}.analytics-growth-numbers dd{margin:0;display:grid;gap:var(--space-1);font-size:28px;font-weight:700}
.analytics-growth-numbers dd small{font-size:13px;font-weight:400;color:var(--muted);line-height:1.45}

/* Care: three queues, shown wherever you are in them. Two rows of boxes with
   nothing between them read as one muddled block, so each row says what it is. */
.care-strip-caption{margin:18px 0 6px;font-size:11px;font-weight:650;letter-spacing:.04em;
 text-transform:uppercase;color:var(--muted)}
.care-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.care-strip-item{display:grid;gap:4px;padding:15px 18px;border:1px solid var(--line);border-left:4px solid var(--line);
 border-radius:11px;background:var(--paper);text-decoration:none;color:var(--ink);box-shadow:0 2px 5px #162d5010}
.care-strip-item[data-state=waiting]{border-left-color:var(--accent)}
.care-strip-item[data-state=pressing]{border-left-color:var(--caution-ink);background:var(--caution-bg);color:var(--caution-ink)}
.care-strip-item[aria-current=page]{outline:2px solid var(--accent);outline-offset:-1px}
.care-strip-item:hover{background:color-mix(in srgb,var(--soft) 55%,var(--paper))}
.care-strip-item[data-state=pressing]:hover{background:var(--caution-bg)}
.care-strip-label{font-size:12px;font-weight:650;color:var(--muted);display:flex;gap:7px;align-items:baseline}
.care-strip-item[data-state=pressing] .care-strip-label{color:inherit;opacity:.85}
.care-strip-label em{font-style:normal;font-weight:400;font-size:11px;opacity:.75}
.care-strip-item strong{font-size:27px;line-height:1.05;letter-spacing:-.03em}
.care-strip-note{font-size:11.5px;color:var(--muted)}
.care-strip-item[data-state=pressing] .care-strip-note{color:inherit;opacity:.85}

/* An enquiry, opened above the queue it came from. */
.enquiry-detail{border:1px solid var(--accent);border-radius:12px;background:var(--paper);padding:22px 24px;display:grid;gap:14px;box-shadow:0 4px 14px #162d5014}
.enquiry-detail>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.enquiry-detail h3{margin:0}
.enquiry-detail h4{margin:0 0 4px}
.enquiry-detail .small{margin:4px 0 0}

.enquiry-detail .enquiry-message{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;padding:16px 18px;border-radius:9px;background:var(--bg);border:1px solid var(--line);line-height:1.65}
.enquiry-detail .enquiry-actions form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.enquiry-actions label{display:grid;gap:5px;font-size:12px;font-weight:650;color:var(--muted)}
.enquiry-detail form.enquiry-reply{display:grid;grid-template-columns:1fr;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.enquiry-reply textarea{width:100%;font:inherit;line-height:1.6;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
.enquiry-reply-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.enquiry-reply-foot .small{margin:0}
.board-table tbody tr[data-state=pressing] th[scope=row]{box-shadow:inset 3px 0 0 var(--caution-ink)}
.board-table tbody tr[data-state=closed]{opacity:.62}
@media(max-width:760px){.care-strip{grid-template-columns:1fr}.enquiry-detail{padding:18px}}

/* An enquiry is where a stranger becomes somebody the platform knows. */
.enquiry-contact{display:grid;gap:13px;margin:16px 0;padding:17px 18px;border:1px solid var(--line);
 border-radius:11px;background:var(--bg)}
.enquiry-contact h4{margin:0;font-size:14px}
.enquiry-contact .small{margin:0}
.enquiry-contact label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted);min-width:0}
.enquiry-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.enquiry-contact textarea{font:inherit;line-height:1.55;padding:11px 13px;border-radius:9px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;resize:vertical}
.enquiry-contact [data-enquiry-contact-result]:empty{display:none}

.enquiry-convert{margin:0 0 16px;padding:0 18px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.enquiry-convert>summary{padding:14px 0;cursor:pointer;font-weight:650;font-size:13.5px;min-height:44px;
 display:flex;align-items:center}
.enquiry-convert form{display:grid;gap:13px;padding:0 0 17px}
.enquiry-convert label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted);min-width:0}
.enquiry-convert .small{margin:0;font-weight:400}
.enquiry-convert [data-enquiry-convert-result]:not(:empty){margin:0;border-left:3px solid var(--accent);
 padding:11px 13px;background:var(--paper);font-size:13px;border-radius:0 9px 9px 0}
.enquiry-convert [data-enquiry-convert-result]:empty{display:none}
.enquiry-converted{margin:0 0 16px;padding:13px 16px;border-radius:11px;background:var(--bg);
 border:1px solid var(--line);font-size:13px;line-height:1.6}
.enquiry-converted a{font-weight:650}

/* Sparki on a person's page (app/ai-access-ui.js): who has it, and what it waits on. */
.ai-columns{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.ai-card{display:grid;gap:14px}
.ai-card-head{display:flex;align-items:center;gap:16px}
.ai-card-head h2{margin:2px 0 0;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.ai-card-head .eyebrow{margin:0}
.ai-card-head .management-status{margin-left:auto;flex:none}
.ai-card-face{flex:0 0 64px;width:64px;display:block}
.ai-card-face .sparki-character{width:100%}
.ai-card>p{margin:0;color:var(--muted);max-width:62ch}
.ai-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-items);counter-reset:ai}
.ai-steps li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.ai-steps li[data-done=true]{background:var(--success-bg);border-color:transparent}
.ai-step-mark{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;border:2px solid var(--line);color:var(--success-ink)}
.ai-steps li[data-done=true] .ai-step-mark{border-color:var(--success-ink)}
.ai-steps li div{display:grid;gap:4px;min-width:0}
.ai-steps strong{font-size:14px}
.ai-steps small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ai-note{margin:0;padding:10px 14px;border-radius:10px;background:var(--caution-bg);color:var(--caution-ink);font-size:13px}
.ai-limits{margin:0}
.ai-card-action{display:flex;flex-wrap:wrap;gap:10px}
button.ai-chip{margin-top:var(--space-3)}
.ai-chip{border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.ai-chip[data-state=ready]{background:var(--success-bg);color:var(--success-ink);border-color:transparent}
.ai-chip[data-state=waiting]{background:var(--caution-bg);color:var(--caution-ink);border-color:transparent}
.ai-explainer{display:grid;gap:10px}
.ai-explainer h2{margin:0;font-size:20px;line-height:1.3}
.ai-explainer h3{margin:8px 0 0;font-size:14px}
.ai-explainer p{margin:0}
.ai-compare{display:grid;gap:var(--gap-items);margin:4px 0 0}
.ai-compare div{padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.ai-compare div[data-ai-on]{background:var(--soft)}
.ai-compare dt{font-weight:750;font-size:13px}
.ai-compare dd{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ai-helps,.ai-topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--gap-chips)}
.ai-helps li,.ai-topics li{padding:5px 10px;border-radius:20px;background:var(--soft);font-size:12px;font-weight:650}
.ai-never{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px;color:var(--muted)}
@media(max-width:900px){.ai-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.ai-card-head{flex-wrap:wrap}.ai-card-head .management-status{margin-left:0}.ai-card-face{flex-basis:52px;width:52px}.ai-card-action button{width:100%}}
/* A person's plans (app/ai-access-ui.js) and the Plans page (app/plans-admin-ui.js). */
.ai-stack{display:grid;gap:20px;align-content:start;min-width:0}
.ai-plans{display:grid;gap:12px}
.ai-plans h2{margin:0}
.ai-plan-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ai-plan{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.ai-plan>div{display:grid;gap:4px;min-width:0}
.ai-plan small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.ai-plan[data-state=active]{border-color:transparent;background:var(--success-bg)}
.ai-plan[data-state=waiting],.ai-plan[data-state=scheduled]{background:var(--caution-bg);border-color:transparent}
.ai-plan[data-state=expired]{opacity:.7}
.ai-plan .ai-ask{flex:1 1 260px}
.ai-give,.ai-ask{display:grid;gap:10px}
.ai-give{padding:14px;border-radius:12px;border:1px dashed var(--line)}
.ai-give h3{margin:0;font-size:15px}
.ai-history summary{cursor:pointer;font-size:13px;font-weight:650}
.ai-history ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:13px}
.plans-chip{display:inline-block;white-space:nowrap;padding:3px 9px;border-radius:20px;background:var(--soft);font-size:11px;font-weight:700;margin:2px 4px 2px 0}
.plans-page .management-panel+.management-panel{margin-top:20px}
.plans-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:4px 0 20px}
.plans-sources article{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.plans-sources h3,.plans-sources p{margin:0}
.plans-sources p{font-size:13px;color:var(--muted)}
.plans-sources .management-status{justify-self:start}
.plans-source-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:800}
.plans-editor,.plans-ask{display:grid;gap:12px;padding:16px;margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.plans-editor h3,.plans-ask h3{margin:0}
.plans-editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.plans-editor-grid small,.plans-editor small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.plans-capabilities{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.plans-capabilities legend{font-weight:700;font-size:13px;padding:0 6px}
.plans-capabilities p{flex-basis:100%;margin:0}
.plans-check{display:flex;align-items:center;gap:8px;font-weight:650}
.plans-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.plans-note{margin:0;color:var(--muted);font-size:13px}
.plans-page tr[data-ended] td{opacity:.65}
.plans-page td button+button{margin-left:6px}
.plans-budget{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plans-budget-card{display:grid;gap:var(--gap-items);padding:16px;border:1px solid var(--line);border-radius:14px}
.plans-budget-card h3{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.plans-budget-card p{margin:0}
/* Models: one card per assistant, side by side like the budget, and the table
   of deployments under them (app/plans-admin-ui.js plansModels). */
.plans-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px;margin-bottom:16px}
.plans-model-card{display:grid;gap:var(--gap-items);align-content:start;padding:16px;border:1px solid var(--line);border-radius:14px}
.plans-model-card h3{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.plans-model-card p{margin:0}
.plans-model-card select{width:100%}
.plans-model-card .plans-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.plans-model-card.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}
@media(prefers-reduced-motion:no-preference){.plans-model-card{transition:border-color .3s,box-shadow .3s}}
/* Add a model: a pick from the platform's list, never a name typed by hand. */
.plans-model-add{display:grid;gap:var(--gap-items);padding:16px;margin-bottom:16px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px}
.plans-model-add h3,.plans-model-add p{margin:0}
.plans-model-add select{width:100%}
.plans-model-add .plans-actions{display:flex;justify-content:flex-end}
.plans-model-all{margin:0 0 16px}
/* What Use it or Check just did, where it cannot be missed. */
.plans-model-said{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#1f9d57 14%,transparent);font-weight:600}
.plans-model-said.is-refused{background:color-mix(in srgb,#c2410c 16%,transparent)}
.management-status.is-legacy{background:color-mix(in srgb,#d98a00 18%,transparent);color:color-mix(in srgb,#a35f00 85%,var(--ink))}
.plans-meter{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;font-size:13px}
.plans-meter strong{justify-self:end}
.plans-meter i,.sparki-meter{grid-column:1/-1;display:block;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--accent,#8a5cf6) var(--fill),var(--line) var(--fill))}
.plans-price-row{display:grid;grid-template-columns:minmax(180px,1.6fr) 110px 110px auto minmax(0,1fr);gap:8px;align-items:center}
.plans-price-name{display:grid;gap:2px}.plans-price-name small{color:var(--muted);font-size:12px}
.plans-price-row [data-plan-result]{font-size:12px;color:var(--caution-ink)}
@media(max-width:900px){.plans-sources{grid-template-columns:1fr}.plans-price-row{grid-template-columns:1fr 1fr}.plans-price-name,.plans-price-row button{grid-column:1/-1}}
/* The website card editor (app/plans-admin-ui.js plansCardEditor). */
.plans-card-lines{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:grid;gap:10px}
.plans-card-lines legend{font-weight:700;font-size:13px;padding:0 6px}
.plans-card-lines ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plans-card-line{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,.8fr) auto;gap:8px;align-items:center}
.plans-card-line input[hidden]{display:none}
.plans-card-line:has(input[name=detail][hidden]){grid-template-columns:180px minmax(0,1fr) auto}
.plans-card-lines p{margin:0}
.plans-card-editor .plans-actions a{margin-right:auto;align-self:center;font-size:13px}
@media(max-width:700px){.plans-card-line,.plans-card-line:has(input[name=detail][hidden]){grid-template-columns:1fr auto}.plans-card-line select{grid-column:1/-1}}
.plans-page td small{display:block;margin-top:3px}
/* A checkbox beside its words, not a full-width field above them. */
.plans-page label.plans-check{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;align-self:center}
.plans-page label.plans-check input[type=checkbox]{width:22px;height:22px;min-height:0;flex:none;margin:0;padding:0}
/* Assistants (app/assistants-ui.js): one card per assistant, facts in a list, instructions word for word */
.assistants-how ol{margin:8px 0 0;padding-left:20px;display:grid;gap:8px;max-width:78ch}
.assistants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px}
.assistant-card{display:grid;gap:12px;align-content:start}
.assistant-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.assistant-card h2{margin:0!important}.assistant-for{margin:0 0 4px;font-size:12px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.assistant-job{margin:0;font-size:16px}
.assistant-facts{display:grid;gap:10px;margin:0}.assistant-facts>div{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:12px}
.assistant-facts dt{font-weight:650;color:var(--muted);font-size:13px}.assistant-facts dd{margin:0;overflow-wrap:anywhere}
.assistant-duties h3{margin:4px 0 8px;font-size:15px}
.assistant-duties ul,.assistant-lookups,.assistant-agents{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.assistant-duties li,.assistant-agents li{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.assistant-duties li span,.assistant-agents li span{grid-column:1;color:var(--muted);font-size:13px}
.assistant-duties li em,.assistant-agents li em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:12px;font-weight:650}
.assistant-lookups li{font-size:13px}
.assistant-directive{white-space:pre-wrap;font-size:13px;line-height:1.55;max-height:360px;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,transparent)}
@media(max-width:620px){.assistant-facts>div{grid-template-columns:1fr;gap:2px}.assistant-duties li,.assistant-agents li{grid-template-columns:1fr}.assistant-duties li em,.assistant-agents li em{grid-column:1;grid-row:auto}}

/* Onboarding: a template, a verdict, and cards that exist once. */
.management-table .board-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-weight:400}
.onboarding-intake{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:start;margin:16px 0}
.onboarding-intake label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted)}
.onboarding-intake textarea{width:100%;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px 14px;
 border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
.onboarding-file input{font:inherit;padding:10px 0}
.onboarding-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.onboarding-actions .small{margin:0}
.management-panel form[data-onboarding-commit]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;margin:14px 0}
.management-panel form[data-onboarding-commit] label{display:grid;gap:6px;font-size:12px;font-weight:650;color:var(--muted)}
.onboarding-warning{margin:14px 0;padding:14px 16px;border-radius:9px;background:var(--caution-bg);color:var(--caution-ink);font-size:13px;line-height:1.6}
.onboarding-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:8px 0 18px}
.onboarding-card{border:1px solid var(--line);border-radius:11px;padding:16px 18px;background:var(--paper);display:grid;gap:9px;break-inside:avoid}
.onboarding-card h3{margin:0;font-size:16px}
.onboarding-card dl{margin:0;display:grid;gap:7px}
.onboarding-card dl>div{display:grid;gap:2px}
.onboarding-card dt{font-size:11px;font-weight:650;color:var(--muted)}
.onboarding-card dd{margin:0;font-size:15px}
.onboarding-card code{font-size:14px;letter-spacing:.01em}
.onboarding-card .small{margin:0;padding-top:7px;border-top:1px solid var(--line)}
.management-status[data-warn=true]{background:var(--caution-bg);color:var(--caution-ink)}
@media(max-width:860px){.onboarding-intake{grid-template-columns:1fr}.management-panel form[data-onboarding-commit]{grid-template-columns:1fr}}
@media print{
 /* Printing this page means printing the cards, which is what a school came for. */
 #management-nav,#management-topbar,.management-heading,.onboarding-actions,.management-panel-head button{display:none!important}
 .onboarding-cards{grid-template-columns:repeat(2,1fr)}
 .onboarding-card{border-color:#999}
}

/* The one page where anybody joins: three tabs, one form each, and beside each
   form the thing it is making. A page this wide with one narrow column of
   inputs down the left is half a screen of nothing. */
.join-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:26px;align-items:start;margin-top:14px}
.join-form{display:grid;gap:16px;min-width:0}
.join-grid,.join-columns{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.join-col{display:grid;gap:16px;align-content:start;min-width:0}
.join-col-label{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.join-guardian .join-col-label{margin-bottom:2px}
.join-form label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted);min-width:0}
.join-form .small{margin:0;font-weight:400}
.join-form>.small,.join-span,.join-form>fieldset,.join-form>datalist{grid-column:1/-1}
.join-form>.join-span{display:grid;gap:9px}
.join-submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.join-submit .small{max-width:46ch}
.join-form button[type=submit],.join-form button.primary{justify-self:start;min-height:46px}

/* The explorer picker arrives as a bare fieldset of radio buttons. In the
   portal that renders as a hairline box of big empty circles with the animal
   shrunk underneath it, which is exactly backwards: the face is the choice. */
.join-form fieldset{border:0;padding:0;margin:0;min-width:0}
.join-form legend{padding:0;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;color:var(--muted)}
.join-explorer{padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.join-explorer .avatar-choices{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.join-form .avatar-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.join-form .avatar-choices label{position:relative;display:grid;place-items:center;min-height:54px;padding:8px 4px;
 font-size:26px;line-height:1;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer}
.join-form .avatar-choices input{position:absolute;opacity:0;width:1px;height:1px;min-height:1px;margin:0}
.join-form .avatar-choices label:has(:checked){border-color:var(--accent);background:var(--soft);
 box-shadow:inset 0 0 0 1px var(--accent)}
.join-form .avatar-choices label:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.join-form .username-choice{display:grid;gap:9px;min-width:0}
.join-form .username-choice>button{justify-self:start;min-height:40px;padding:8px 14px;font-size:13px}
.join-form .username-options{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.join-guardian{padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}

.join-rail{display:grid;gap:16px;position:sticky;top:18px;min-width:0}
.join-rail-label{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.join-preview,.join-note{border:1px solid var(--line);border-radius:13px;padding:17px 18px;background:var(--paper)}
.join-preview-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center}
.join-preview-face{font-size:40px;line-height:1;width:62px;height:62px;display:grid;place-items:center;
 border-radius:16px;background:var(--soft)}
.join-preview-who{display:grid;gap:3px;min-width:0}
.join-preview-who strong{font-size:16px;overflow-wrap:anywhere}
.join-preview-who span{font-size:12px;color:var(--muted)}
.join-preview-who code{font-size:12.5px;overflow-wrap:anywhere}
.join-preview-blank{color:var(--muted);font-weight:400;font-style:italic}
.join-preview-told{grid-column:1/-1;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line);
 font-size:12px;line-height:1.6;color:var(--muted)}
.join-preview-told strong{color:var(--ink);overflow-wrap:anywhere}
.join-note ol{margin:0;padding-left:19px;display:grid;gap:10px}
.join-note li{font-size:12.5px;line-height:1.6;color:var(--muted)}
.join-note li strong{color:var(--ink);display:block}
.join-rail-link{margin:0}
.join-rail-link a{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:13px;text-decoration:none}
.join-rail-link a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.join-layout{grid-template-columns:1fr}.join-rail{position:static}}
@media(max-width:700px){.join-grid,.join-columns{grid-template-columns:1fr}}
.management-panel>.small a.management-workflow{display:inline-flex;align-items:center;gap:6px;font-weight:650;text-decoration:none}
.management-panel>.small a.management-workflow:hover{text-decoration:underline;text-underline-offset:3px}
.join-count{margin:2px 0 4px}
/* A parent or guardian, with a welcome letter (26 September 2026): the result stands above the form, and a first
   password shown once is large, selectable and set apart from the words around it. */
.join-welcome{margin:0 0 18px}.join-welcome p{margin:0}.join-welcome p+p{margin-top:12px}
.join-first-password{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.join-first-password span{font-weight:700}
.join-first-password code{font-size:1.15rem;letter-spacing:.06em;padding:8px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);user-select:all}
.join-grid .check{align-self:center;margin:0}

/* The archive: a list of what was put away, and the decisions that put it there. */
.archive-ask{border:1px solid var(--accent);border-radius:14px;padding:20px 22px;margin:0 0 18px;
 background:color-mix(in srgb,var(--soft) 55%,transparent)}
.archive-ask h3{margin:0 0 4px;font-size:17px}
.archive-ask>p{font-size:13.5px;line-height:1.6;max-width:70ch;margin:0 0 14px}
.archive-ask .small{margin:0 0 12px;font-weight:650;color:var(--ink)}
.archive-ask form{display:grid;gap:14px;max-width:560px}
.archive-ask label{display:grid;gap:7px;font-size:12px;font-weight:650;color:var(--muted)}
.archive-ask-actions{display:flex;gap:12px;flex-wrap:wrap}
.archive-ask [data-danger=true]{background:var(--caution-ink);border-color:var(--caution-ink);color:var(--paper)}
.archive-ask [data-archive-result]:not(:empty){margin:0;border-left:3px solid var(--accent);padding:11px 13px;
 background:var(--paper);font-size:13px;border-radius:0 9px 9px 0}
.archive-ask [data-archive-result]:empty{display:none}
.archive-ask[data-action=remove]{border-color:var(--caution-ink)}

.archive-log{list-style:none;margin:0;padding:0;display:grid;gap:0}
.archive-log li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:15px 0;
 border-bottom:1px solid var(--line)}
.archive-log li:last-child{border-bottom:0;padding-bottom:0}
.archive-log li>div:last-of-type{display:grid;gap:4px;justify-items:end;text-align:right}
.archive-log strong{font-size:14px;overflow-wrap:anywhere}
.archive-log p{grid-column:1/-1;margin:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:80ch}
@media(max-width:700px){
 .archive-log li{grid-template-columns:1fr}
 .archive-log li>div:last-of-type{justify-items:start;text-align:left}
}

/* Care letters: tiles that filter, the letters on the shared board, the watches beside
   them, and a side panel where one letter is read as the family will read it. */
.cc{display:grid;gap:20px;min-width:0}
.cc-lede{margin:0;max-width:none;line-height:1.6;color:var(--muted)}
.cc-lede strong{color:var(--ink);font-weight:700}
.cc-tiles{margin:0}
.cc-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}
.cc-queue{min-width:0}
.cc-side{display:grid;gap:12px;position:sticky;top:calc(var(--management-top,72px) + 16px)}
.cc-side-head h2{margin:0;font-size:17px!important;letter-spacing:-.02em}
.cc-side-head p{margin:4px 0 0}

/* ---- The watches ---------------------------------------------------------------- */
.cc-watches{display:grid;gap:var(--gap-items)}
.cc-watch{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
 box-shadow:0 2px 5px #162d5010;transition:border-color .16s ease}
.cc-watch:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cc-watch[data-state=off]{opacity:.72}
.cc-watch-open{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:0;min-height:0;
 border:0;border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cc-watch-open:hover strong{color:var(--accent)}
.cc-watch-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--accent);flex:none}
.cc-watch-icon .management-icon{width:20px;height:20px}
.cc-watch-text{display:grid;gap:3px;min-width:0}
.cc-watch-text strong{font-size:14px;line-height:1.35}
.cc-watch-text span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.cc-watch-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.cc-watch-foot .cc-switch{margin-left:auto}
.cc-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
 background:var(--soft);color:var(--ink);white-space:nowrap}
.cc-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.cc-pill[data-state=held]{background:var(--success-bg);color:var(--success-ink)}
.cc-pill[data-state=drafts]{background:var(--caution-bg);color:var(--caution-ink)}
.cc-pill[data-state=off]{background:transparent;border:1px solid var(--line);color:var(--muted)}
.cc-count{font-size:12px;font-weight:700;color:var(--accent)}

/* A switch says what it is and whether it is on; a checkbox and a label made the reader assemble that. */
.cc-switch{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 2px;border:0;border-radius:999px;background:none;
 color:var(--ink);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;box-shadow:none}
.cc-switch-track{position:relative;width:36px;height:20px;flex:none;border-radius:999px;background:var(--control-line,var(--line));transition:background .16s ease}
.cc-switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004;transition:transform .16s ease}
.cc-switch[aria-checked=true] .cc-switch-track{background:var(--accent)}
.cc-switch[aria-checked=true] .cc-switch-knob{transform:translateX(16px)}
.cc-switch:disabled{opacity:.5;cursor:not-allowed}
.cc-switch:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- The letters, on the board --------------------------------------------------- */
.cc-who{display:inline-flex;align-items:center;gap:10px}
.cc-who>span:last-child{display:grid;gap:1px}
.cc-who strong{white-space:nowrap}
.cc-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
 background:color-mix(in srgb,var(--accent) 16%,var(--paper));color:var(--accent);font-weight:750;font-size:13px}
.cc-noticed{display:inline-flex;gap:8px;align-items:flex-start}
.cc-noticed .management-icon{width:16px;height:16px;flex:none;margin-top:2px;color:var(--muted)}
.cc-noticed>span{display:grid;gap:1px;max-width:190px}
#board-concierge .management-table :is(th,td){padding-inline:10px}
.cc-to{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--soft);color:var(--ink);white-space:nowrap}
.cc-chip[data-tone=ready]{background:var(--success-bg);color:var(--success-ink)}
.cc-chip[data-tone=wait]{background:color-mix(in srgb,var(--accent) 14%,var(--paper));color:var(--accent)}
.cc-chip[data-tone=warn]{background:var(--caution-bg);color:var(--caution-ink)}
.cc-chip[data-tone=quiet]{background:transparent;border:1px solid var(--line);color:var(--muted)}
.cc-chip[data-tone=plain]{color:var(--muted)}
.cc-chip+.board-sub{display:block;margin-top:4px}
.cc-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-bulk select,.cc-bulk input{min-height:40px;width:auto}
.cc-bulk input{min-width:200px}

/* How it works, folded away beside the watches: read once, not in the way every day. */
.cc-how{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:2px 14px}
.cc-how summary{min-height:44px;display:flex;align-items:center;font-size:13.5px;font-weight:700}
.cc-steps{list-style:none;margin:2px 0 14px;padding:0;display:grid;gap:12px;counter-reset:step}
.cc-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;counter-increment:step}
.cc-steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
 background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:750}
.cc-steps strong{font-size:13px}
.cc-steps span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.cc-how-note{margin:0 0 14px}

/* ---- The side panel ---------------------------------------------------------------- */
.cc-panel{display:flex;flex-direction:column;gap:16px}
.feature-panel.is-steady,.feature-panel-backdrop.is-steady{animation:none!important}
.cc-panel.is-wide{width:min(760px,100vw)}
.cc-panel header h2{font-size:24px;letter-spacing:-.02em;overflow-wrap:anywhere}
.cc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:13px;color:var(--muted)}
.cc-panel>p{margin:0;line-height:1.6}
.cc-why{display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:var(--soft)}
.cc-why p{margin:0;line-height:1.55;font-size:13.5px;max-width:none}
.cc-why-lead{display:flex;align-items:center;gap:10px;font-size:16px!important;font-weight:700}
.cc-why-lead .management-icon{width:20px;height:20px;color:var(--accent);flex:none}
.cc-envelope{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:14px}
.cc-envelope div{display:contents}
.cc-envelope dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);align-self:center}
.cc-envelope dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.cc-callout{margin:0;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;background:var(--soft);max-width:none}
.cc-callout[data-tone=warn]{background:var(--caution-bg);color:var(--caution-ink)}
.cc-callout a{font-weight:700;white-space:nowrap}
.cc-callout .management-icon,.cc-switch-row .management-icon{width:14px;height:14px;vertical-align:-2px}
.cc-preview-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
 font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cc-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.cc-seg button{min-height:32px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);
 font-size:12.5px;font-weight:700;text-transform:none;letter-spacing:0;box-shadow:none}
.cc-seg button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #0002}
/* The email itself lives in a shadow root inside this frame (conciergePaint). */
.cc-letter{display:block;flex:none;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg);min-height:320px}
.cc-plain{flex:none;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--bg);white-space:pre-wrap;overflow-wrap:anywhere;
 font-size:14px;line-height:1.7}
.cc-plain[data-loading=true]{opacity:.7}
.cc-actions{position:sticky;bottom:-26px;z-index:2;margin:auto -26px -26px;padding:16px 26px 22px;display:grid;gap:10px;
 background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 22px -18px #0005}
.cc-actions.is-confirm{background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.cc-actions p{margin:0}
.cc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-row .management-icon{width:18px;height:18px}
.cc-actions button{display:inline-flex;align-items:center;gap:8px}
.cc-confirm{font-size:14.5px;line-height:1.5}
.cc-aside{display:grid;gap:12px;margin:0}
.cc-aside fieldset{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.cc-aside legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:700}
.cc-reason{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
 border-radius:999px;font-size:13px!important;font-weight:600!important;cursor:pointer}
.cc-reason input{width:16px;min-height:16px;margin:0}
.cc-reason:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper))}
.cc-note{font-size:13px!important}
.cc-switch-rows{display:grid;gap:var(--gap-items)}
.cc-switch-row{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.cc-switch-row p{margin:0;max-width:none}
.cc-switch-row.is-note{background:var(--soft)}
.cc-switch-row a{font-weight:700;text-decoration:none}

@media(max-width:1360px){
 .cc-layout{grid-template-columns:1fr}
 .cc-side{position:static}
 .cc-watches{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(max-width:760px){
 .cc-panel.is-wide{width:100vw}
 .cc-actions{bottom:-20px;margin:auto -16px -20px;padding:14px 16px 18px}
 .cc-bulk,.cc-bulk input,.cc-bulk select{width:100%;min-width:0}
 .cc-panel header h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.cc-switch-track,.cc-switch-knob,.cc-watch{transition:none}}
/* Whose address a letter uses (concierge.letter_to): the guardian email, or a connected parent's own. */
.cc-envelope .cc-to-who{display:block;margin-top:2px;font-size:.8rem;color:var(--muted);font-weight:400}

/* Welcome & enrollment: the doors, and the journeys behind them. */
.enroll-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:6px}
.enroll-door{border:1px solid var(--line);border-top:3px solid var(--line);border-radius:12px;background:var(--paper);
 padding:16px 18px;display:grid;gap:8px;align-content:start;box-shadow:0 2px 5px #162d5010}
.enroll-door[data-state=open]{border-top-color:var(--success-ink)}
.enroll-door[data-state=shut]{border-top-color:var(--caution-ink)}
.enroll-door header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.enroll-door h3{margin:0;font-size:15.5px}
.enroll-door .small{margin:0}
.enroll-where{margin:0;font-size:11.5px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line)}
.enroll-where a{font-weight:650;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.enroll-codes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.enroll-codes>div{display:flex;align-items:baseline;gap:8px}
.enroll-codes strong{font-size:24px;line-height:1;letter-spacing:-.02em}
.enroll-codes span{font-size:12.5px;color:var(--muted)}
.enroll-codes .button{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.analytics-tabs button em{font-style:normal;font-size:10.5px;font-weight:650;opacity:.7}
#enrollment-host{display:grid;gap:var(--gap-panels)}
.enroll-steps{counter-reset:enroll;list-style:none;margin:16px 0 0;padding:0;display:grid;gap:var(--gap-items)}
.enroll-steps li{position:relative;padding:12px 16px 12px 48px;border-radius:11px;background:var(--bg);
 border:1px solid var(--line);font-size:13.5px;line-height:1.55}
.enroll-steps li::before{counter-increment:enroll;content:counter(enroll);position:absolute;left:14px;top:12px;
 width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);
 font-size:11.5px;font-weight:700;display:grid;place-items:center}
.enroll-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}
.enroll-rules article{border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:15px 17px}
.enroll-rules h3{margin:0 0 6px;font-size:13px;font-weight:650;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.enroll-rules ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13px;line-height:1.5;color:var(--muted)}
.enroll-rules .small{margin:0}
@media(max-width:620px){.enroll-codes .button{margin-left:0;width:100%;justify-content:center}}

/* ---- A teacher's space. The same cards, type and colours as every account page,
        so a teacher is not sent somewhere that feels like another product. ---- */
.teacher-space{display:grid;gap:18px;max-width:980px;margin:0 auto}
.teacher-kicker{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.teacher-lede{margin:0;color:var(--muted);max-width:62ch}
/* An action under a lede stands clear of it (design/layout-spacing-standard.md). */
.teacher-lede+:is(a.button,button,.account-actions){margin-top:var(--gap-action)}
.teacher-said{margin:0;padding:12px 16px;border-radius:14px;background:var(--soft);color:var(--ink);font-weight:600}
.teacher-disclaimer ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--ink)}
.teacher-space fieldset{border:0;margin:14px 0 0;padding:0}
.teacher-space legend{font-weight:700;margin-bottom:8px}
.teacher-chips{display:flex;flex-wrap:wrap;gap:8px}
.teacher-chip{position:relative;display:inline-flex}
.teacher-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.teacher-chip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;font-weight:600}
.teacher-chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.teacher-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.teacher-space form>.primary,.teacher-actions .primary{margin-top:16px}
.teacher-grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.teacher-grade h2{margin:0}
.teacher-sub{margin:4px 0 10px;font-size:13px;font-weight:700;color:var(--muted)}
.teacher-facts{margin:0 0 14px;padding-left:20px;display:grid;gap:6px}
.teacher-write{min-height:44px}
.teacher-note-form{display:grid;gap:12px}
.teacher-note-form label{display:grid;gap:6px;font-weight:600}
.teacher-note-form textarea{width:100%;resize:vertical;font:inherit}
.teacher-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.teacher-confirm{display:flex!important;align-items:flex-start;gap:10px;font-weight:500!important}
.teacher-confirm input{margin-top:4px}
.teacher-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.teacher-actions .primary{margin-top:0}
.teacher-error{margin:0;color:var(--error-ink);font-weight:600}
.teacher-notes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.teacher-notes li{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.teacher-note-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.teacher-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.teacher-notes li[data-status=approved] .teacher-status{background:var(--success-bg);color:var(--success-ink)}
.teacher-notes li[data-status=changes_requested] .teacher-status{background:var(--caution-bg);color:var(--caution-ink)}
.teacher-notes li[data-status=rejected] .teacher-status{background:var(--soft);color:var(--muted)}
.teacher-notes p{margin:8px 0 0}
.teacher-when{font-size:12px;color:var(--muted)}
.teacher-reply{padding:10px 12px;border-radius:10px;background:var(--soft)}
.teacher-reply span{font-weight:700}
.teacher-tier{display:inline-block;vertical-align:middle;margin-left:8px;font-size:12px;font-weight:700;
 padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
@media(max-width:640px){.teacher-row{grid-template-columns:1fr}}

/* Connected students: a name and a grade, nothing else, because that is all a parent agreed to. */
.teacher-roster,.teacher-requests{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.teacher-roster li,.teacher-requests li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;
 border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.teacher-requests button{margin-left:auto;min-height:40px}
.teacher-requests li[data-status=Connected] .teacher-status{background:var(--success-bg);color:var(--success-ink)}
.teacher-requests li[data-status=Ended] .teacher-status{background:var(--soft);color:var(--muted)}
.teacher-students h3{margin:14px 0 0}
/* Students first once connecting is open, with the journey a button away. */
.teacher-students-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 18px;flex-wrap:wrap}
.teacher-students-head>div{flex:1 1 320px}
.teacher-students-head>button{flex:none}
.teacher-roster li{align-items:flex-start}
.teacher-roster li>div{display:grid;gap:2px;min-width:0}
.teacher-roster li>div span{font-size:13px;color:var(--muted)}
.teacher-initial{display:grid;place-items:center;flex:none;width:40px;height:44px;border-radius:14px;background:var(--paper);border:1px solid var(--line);color:var(--accent);font-weight:800;font-size:18px;box-shadow:0 3px 0 var(--line)}
.teacher-empty{color:var(--muted)}
.teacher-journey{width:100%}
/* The week a teacher opens on, then their classes. Signals carry the same words
   the family reads, and the same restraint: nothing is claimed without evidence. */
.teacher-week{background:linear-gradient(180deg,color-mix(in srgb,var(--soft) 60%,var(--paper)),var(--paper))}
.teacher-week-head h2{margin:6px 0 8px;font-size:clamp(22px,2.6vw,30px);line-height:1.2;max-width:24ch}
.teacher-kicker{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:var(--accent)}
.teacher-chips-row{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.teacher-chips-row li{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.teacher-chips-row strong{font-size:24px;line-height:1.1}
.teacher-chips-row span{font-size:12px;color:var(--muted)}
.teacher-focus,.teacher-class ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.teacher-focus li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.teacher-focus li>div:not(.teacher-summary),.teacher-roster li>div:not(.teacher-summary){display:grid;gap:3px;min-width:0;flex:1 1 200px}
.teacher-focus li>.teacher-summary,.teacher-roster li>.teacher-summary{flex:0 0 100%}
.teacher-focus span.teacher-initial{flex:none}
.teacher-focus button,.teacher-roster button{margin-left:auto;min-height:40px}
.teacher-class{margin-top:18px}
.teacher-class h3{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
.teacher-class h3 span{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px 9px}
.teacher-shared{font-size:12px;font-weight:650;color:var(--accent)}
.teacher-shared[data-quiet]{color:var(--muted);font-weight:500}
.teacher-signal{justify-self:start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.teacher-signal[data-signal=steady]{background:var(--success-bg);color:var(--success-ink)}
.teacher-signal[data-signal=revisit]{background:var(--caution-bg);color:var(--caution-ink)}
.teacher-signal[data-signal=more-evidence],.teacher-signal[data-signal=quiet]{background:var(--soft);color:var(--muted)}
.teacher-summary{flex-basis:100%;margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.teacher-summary-totals{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.teacher-summary-totals li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--paper)}
.teacher-summary-totals strong{font-size:19px}
.teacher-summary-totals span{font-size:11px;color:var(--muted)}
.teacher-summary-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.teacher-summary-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border-radius:12px;background:var(--paper)}
.teacher-summary-list li>div{display:grid;gap:2px;min-width:0;flex:1 1 180px}
.teacher-summary-list li>div span{font-size:12px;color:var(--muted)}
.teacher-disclaimer summary{font-weight:700;cursor:pointer}
.teacher-disclaimer ul{margin-top:12px}

/* ---- The teaching portal: rooms down the side, one room at a time in the middle. */
.teacher-space.teach-portal{max-width:1180px;display:grid;grid-template-columns:252px minmax(0,1fr);gap:22px;align-items:start}
.teach-side{position:sticky;top:18px;display:grid;gap:14px;padding:18px 14px;border:1px solid var(--line);border-radius:24px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--soft) 65%,var(--paper)),var(--paper));box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 6%,transparent)}
.teach-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 12px;border-bottom:1px solid var(--line)}
.teach-brand>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;background:var(--paper);border:1px solid var(--line);color:var(--accent);font-size:17px;font-weight:800}
.teach-brand div{display:grid;gap:1px;min-width:0}
.teach-brand strong{font-size:14px;letter-spacing:-.01em}
.teach-brand span span,.teach-brand div span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teach-side nav{display:grid;gap:3px}
.teach-side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.teach-side nav a:hover{background:color-mix(in srgb,var(--soft) 70%,transparent)}
.teach-side nav a[aria-current=page]{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
.teach-side nav a b{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--paper);color:var(--accent)}
.teach-side nav a[aria-current=page] b{background:color-mix(in srgb,var(--on-accent) 24%,transparent);color:var(--on-accent)}
.teach-side .management-icon{width:18px;height:18px;flex:none}
.teach-side-foot{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.teach-side-foot button{width:100%}
.teach-main{display:grid;gap:18px;min-width:0}
.teach-top{display:grid;gap:8px}
.teach-crumbs{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--muted);font-weight:650}
.teach-crumbs strong{color:var(--ink)}
.teach-crumbs .management-icon{width:15px;height:15px}
.teach-hero{position:relative;display:block;padding:24px 26px;overflow:hidden;
 border:1px solid var(--line);border-radius:28px;
 background:radial-gradient(130% 150% at 6% 0%,color-mix(in srgb,var(--accent) 14%,var(--paper)),var(--paper) 62%);
 box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 9%,transparent)}
.teach-hero::before{content:"";position:absolute;inset:0 0 auto;height:4px;
 background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent))}
.teach-hero-say{display:flex;align-items:center;gap:14px;margin:14px 0 12px}
.teach-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.teach-hero h1{margin:4px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.03em}
.teach-quick-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:14px}
.teach-quick-card{display:grid;gap:5px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none;color:var(--ink);
 transition:transform .16s ease,box-shadow .16s ease}
.teach-quick-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 8%,transparent)}
.teach-quick-card .management-icon{width:20px;height:20px;color:var(--accent)}
.teach-quick-card span{font-size:13px;color:var(--muted)}
.teach-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0 10px}
.teach-open{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;color:var(--accent);white-space:nowrap}
.teach-back{display:inline-block;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
.teach-student-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.teach-student-head h2{margin:0}
.teach-initial-large{width:56px;height:60px;border-radius:19px;font-size:24px}
.teach-student-week{margin-top:18px}
.teach-student-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.teach-activity-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.teach-activity-list li{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.teach-activity-list li>div{display:grid;gap:2px}
.teach-activity-list li>div span{font-size:12px;color:var(--muted)}
.teach-activity-list p{margin:0}
@media(max-width:900px){
 .teacher-space.teach-portal{grid-template-columns:1fr}
 .teach-side{position:static;padding:14px}
 .teach-side nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px;padding-bottom:4px}
 .teach-side nav a{white-space:nowrap}
 .teach-hero{padding:20px 18px;gap:14px}
}
.teach-trend{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.teach-trend ul{list-style:none;margin:8px 0 6px;padding:0;display:flex;align-items:flex-end;gap:10px}
.teach-trend li{display:grid;justify-items:center;gap:3px;flex:1 1 0;min-width:0}
.teach-trend strong{font-size:13px}
.teach-trend span{font-size:11px;color:var(--muted);white-space:nowrap}
.teach-bar{width:100%;max-width:46px;border-radius:8px 8px 4px 4px;background:var(--accent);opacity:.85}
.teach-trend li:last-child .teach-bar{opacity:1;box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
.teach-class-focus{margin:6px 0 0;font-size:13px}
.teach-class-focus b{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--accent);margin-left:4px}
.teach-next{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.teach-next ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.teach-next li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border-radius:12px;background:var(--paper)}
.teach-next li>div{display:grid;gap:2px;min-width:0;flex:1 1 220px}
.teach-next li>div span{font-size:12px;color:var(--muted)}
.teach-next button{margin-left:auto;min-height:40px}

/* Quizzes a teacher writes: a list, a composer, and the checks that ran. */
.teach-quiz-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.teach-quiz-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.teach-quiz-list li>div{display:grid;gap:3px;min-width:0;flex:1 1 260px}
.teach-quiz-list li>div span{font-size:12px;color:var(--muted)}
.teach-quiz-note{font-size:12px;color:var(--ink);background:var(--soft);padding:6px 10px;border-radius:10px}
.teach-quiz-preview{flex-basis:100%;font-size:14px}
.teach-quiz-preview summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--accent)}
.teach-quiz-preview ol{margin:10px 0 0;padding-left:20px;display:grid;gap:12px}
.teach-quiz-preview ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.teach-quiz-preview li[data-answer]{font-weight:700;color:var(--accent)}
.teach-checks{list-style:none;margin:20px 0;padding:0;display:grid;gap:8px}
.teach-checks li{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--soft);border-left:3px solid var(--accent)}
.teach-checks li[data-ok=note]{border-left-color:var(--caution-ink)}
.teach-checks li[data-ok=none]{border-left-color:var(--line)}
.teach-checks span{font-size:13px;color:var(--muted)}
.teach-composer .teacher-row{grid-template-columns:2fr 1fr 1fr}
.teach-questions{margin:18px 0 0;padding-left:20px;display:grid;gap:14px}
.teach-questions>li{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.teach-question-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.teach-question-head button{min-height:36px;font-size:12px}
.teach-choices{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.teach-choices li{display:flex;align-items:center;gap:8px}
.teach-choice{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1 1 auto}
.teach-choice input[type=radio]{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.teach-choice input[name=choice]{flex:1 1 auto}
.teach-choices button{min-height:36px;font-size:12px}
@media(max-width:700px){.teach-composer .teacher-row{grid-template-columns:1fr}}

/* ---- Sparki, in the staff room. He floats, he looks about and he blinks like
   every other Sparki; here he also answers to what the portal just did, and his
   line is read from the same numbers the cards below show. Motion off and
   reduced motion leave him still, as everywhere else. */
.teach-sparki-stage{position:relative;flex:0 0 auto;width:88px}
.teach-sparki-stage::after{content:"";position:absolute;left:20%;right:20%;bottom:-4px;height:9px;border-radius:50%;
 background:color-mix(in srgb,var(--ink) 22%,transparent);filter:blur(4px);animation:teach-hover-shadow 5s ease-in-out infinite}
.teach-sparki-stage .sparki-float{transform-origin:50% 88%;animation:teach-hover 5s ease-in-out infinite}
.teach-sparki-stage[data-mood=joy] .sparki-float{animation:teach-joy .82s cubic-bezier(.3,.8,.4,1) 2}
.teach-sparki-stage[data-mood=curious] .sparki-float{animation:teach-curious 1.9s ease-in-out}
@keyframes teach-hover{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-6px) rotate(1.4deg)}}
@keyframes teach-hover-shadow{0%,100%{transform:scaleX(1);opacity:.55}50%{transform:scaleX(.82);opacity:.3}}
@keyframes teach-joy{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(4px) scale(1.1,.9)}
 45%{transform:translateY(-16px) scale(.95,1.07) rotate(-7deg)}70%{transform:translateY(-7px) rotate(4deg)}}
@keyframes teach-curious{25%,70%{transform:rotate(8deg) translateY(-3px)}45%{transform:rotate(5deg) translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.teach-sparki-stage .sparki-float,.teach-sparki-stage::after{animation:none}}
:root[data-motion=off] .teach-sparki-stage .sparki-float,:root[data-motion=off] .teach-sparki-stage::after{animation:none}
/* What he says. The tail points at him, so the words read as his. */
.teach-say{position:relative;width:fit-content;max-width:48ch;margin:0;padding:11px 16px;border-radius:16px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:650;
 box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 7%,transparent)}
.teach-say::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;width:13px;height:13px;transform:rotate(45deg);
 background:var(--paper);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.teach-say b{color:var(--accent)}
/* The class at a glance: one tile a learner, coloured by the signal their family shares. */
.teach-pulse{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.teach-pulse li{margin:0}
.teach-pulse a{display:grid;gap:6px;padding:12px 13px;border:1px solid var(--line);border-radius:16px;
 background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.teach-pulse a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
 box-shadow:0 10px 22px color-mix(in srgb,var(--ink) 9%,transparent)}
.teach-pulse-head{display:flex;align-items:center;gap:9px;min-width:0}
.teach-pulse-head strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teach-pulse-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.teach-pulse li[data-signal=steady] .teach-pulse-dot{background:var(--success-ink)}
.teach-pulse li[data-signal=revisit] .teach-pulse-dot{background:var(--caution-ink)}
.teach-pulse-meter{height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.teach-pulse-meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.teach-pulse li[data-signal=revisit] .teach-pulse-meter i{background:var(--caution-ink)}
.teach-pulse small{font-size:11px;color:var(--muted)}
/* Depth, so a room reads as a place rather than a list. */
.teach-quick-card:focus-visible,.teach-pulse a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.teacher-roster li,.teacher-focus li{transition:border-color .16s ease,box-shadow .16s ease}
.teacher-roster li:hover,.teacher-focus li:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
 box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 7%,transparent)}
.teacher-roster li[data-signal=revisit] .teacher-initial{border-color:var(--caution-ink);box-shadow:0 3px 0 var(--caution-bg)}
.teacher-roster li[data-signal=steady] .teacher-initial{border-color:var(--success-ink);box-shadow:0 3px 0 var(--success-bg)}
@media(max-width:640px){.teach-sparki-stage{width:66px}.teach-hero{padding:18px 16px;gap:12px}}

/* ---- The footer every page wears but the website's own home (scripts/site_footer.py) ---------
   The Architect, 24 September 2026: "make sure on the run the footer is standard everywhere that is
   identify, the only one different is the website; for the other ones i will like to see standard and
   some premium icons". The same seven links everywhere, each with its line icon lit in Sparki's gold,
   on a pill of glass like the site's bar, so it reads over the world's picture, a plain page or a card
   alike (the audit measured 1.3 to 1 behind the old bare links on the waterfall). */
footer.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;
 width:fit-content;max-width:calc(100% - 24px);margin:28px auto 18px;padding:5px 6px;border:0;border-radius:999px;
 font:600 13px/1.2 'Avenir Next','Trebuchet MS',system-ui,sans-serif;letter-spacing:normal;
 color:#182b48;background:color-mix(in srgb,#f7faff 72%,transparent);
 -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
 box-shadow:0 1px 0 #ffffffcc inset,0 0 0 1px #1d356417,0 18px 40px -30px #1d356440}
:root[data-mode=dark] footer.site-footer,:root[data-welcome-night=true] footer.site-footer{color:#edf4ff;
 background:color-mix(in srgb,#0b1428 54%,transparent);box-shadow:0 1px 0 #ffffff1f inset,0 0 0 1px #ffffff12,0 18px 40px -28px #00000099}
footer.site-footer a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:999px;
 color:inherit;text-decoration:none;white-space:nowrap;transition:background-color .18s ease}
footer.site-footer a:hover{background:color-mix(in srgb,currentColor 10%,transparent);text-decoration:none}
footer.site-footer a:focus-visible{outline:2px solid currentColor;outline-offset:1px}
footer.site-footer a[aria-current=page]{background:color-mix(in srgb,currentColor 13%,transparent)}
.site-footer-icon{flex:none;color:#c67a12}
:root[data-mode=dark] .site-footer-icon,:root[data-welcome-night=true] .site-footer-icon{color:#ffd475}
/* The sign-in pages stretch their header, main and footer to the page's width; the footer keeps its own. */
:root[data-entry] body>footer.site-footer{width:fit-content}
/* A phone holds the links in rows, on a rounded card of the same glass. */
@media (max-width:760px){footer.site-footer{border-radius:20px;padding:6px;gap:0}footer.site-footer a{padding:0 10px}}
@media (prefers-reduced-motion:reduce){footer.site-footer a{transition:none}}
@media print{footer.site-footer{display:none}}
@media (forced-colors:active){footer.site-footer{border:1px solid CanvasText}.site-footer-icon{color:CanvasText}}