:root{
--sysarr:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
--sky:#b8d8de; --cream:#f7f1e8; --peach:#f5c79e; --sunset:#eda36c;
--card:#ffffff; --ink:#2c2118; --muted:#9a8d80;
--orange:#f07c1e; --orange-soft:#fbe0c4; --dark:#33281e;
--line:#efe7db; --danger:#d95252; --wknd:rgba(120,90,50,.07);
--shadow:0 6px 24px rgba(80,52,20,.08);
/* selected-state convention — every FILLED selected control uses this pair (never hardcode it) */
--sel-bg:var(--orange); --sel-fg:#fff;
/* segmented single-select (iOS-style track: sliding thumb on a grey track) */
--seg-track:rgba(0,0,0,.07); --seg-thumb:#fff; --seg-thumb-shadow:0 1px 4px rgba(0,0,0,.14);
/* class colours */
--c-0bg:#cfeef2; --c-0:#1d6c7a;
--c-1bg:#e2d9f7; --c-1:#6a4fae;
--c-2bg:#fbf3bd; --c-2:#8a7a10;
--c-3bg:#d9ecc0; --c-3:#557a1e;
--c-4bg:#f6d4e8; --c-4:#a04077;
/* admin tag colours — deliberately distinct */
--a0bg:#fbd2cc; --a0:#b03325; /* e.g. Flag — red */
--a1bg:#c5ebe4; --a1:#0a6e60; /* e.g. JA — teal */
--a2bg:#ddd2fb; --a2:#5936b8; /* e.g. F/T — violet */
--a3bg:#fae3b3; --a3:#96660a; /* generic Admin — amber */
--xbg:#ece6dd; --x:#7a6f63;
--chswap-bg:#dde9f8; --chswap:#2a64ad; --choff-bg:#f9e1df; --choff:#b53b36; /* lesson changes: Swap blue · Off red */
--duty-bg:#d9efe8; --duty:#1d6b5c; /* duties: its own calm teal (solid, never striped) */
--null-bg:#e7e7ea; --null-fg:#79797f; /* untagged "Null" items — light grey */
--note-bg:#fdeeae; --note-fg:#7a5e0c; /* default (untagged) sticky note — warm yellow */
--schoolbg:#d7e3ee; --school:#33597e; /* school-calendar events */
/* 12 pastel palette — used by class/tag colours (picker shows these) */
--p0bg:#cfeef2; --p0:#1d6c7a; --p1bg:#e2d9f7; --p1:#6a4fae;
--p2bg:#fbf3bd; --p2:#8a7a10; --p3bg:#d9ecc0; --p3:#557a1e;
--p4bg:#f6d4e8; --p4:#a04077; --p5bg:#fbd2cc; --p5:#b03325;
--p6bg:#c5ebe4; --p6:#0a6e60; --p7bg:#ddd2fb; --p7:#5936b8;
--p8bg:#fae3b3; --p8:#96660a; --p9bg:#d2e4fb; --p9:#2f5fa0;
--p10bg:#fcdcc4; --p10:#b5611f; --p11bg:#e6dccd; --p11:#6f5f4a;
}
[data-theme="dark"]{
--sky:#1c2733; --cream:#241c16; --peach:#3a2a1c; --sunset:#46301f;
--card:#322920; --ink:#f3ece2; --muted:#a4968a;
--orange:#f08a36; --orange-soft:#4a3520; --dark:#f3ece2;
--line:#42372c; --wknd:rgba(255,255,255,.05); --shadow:0 6px 24px rgba(0,0,0,.4);
/* dark selected text = dark --cream (#241c16); thumb sits brighter than --card for contrast */
--sel-fg:var(--cream);
--seg-track:rgba(255,255,255,.08); --seg-thumb:#4e4235; --seg-thumb-shadow:0 1px 4px rgba(0,0,0,.45);
--c-0bg:#1e4248; --c-0:#9fdce6;
--c-1bg:#3b3158; --c-1:#cdb9f2;
--c-2bg:#46401a; --c-2:#e8da7a;
--c-3bg:#33421e; --c-3:#bcdc8a;
--c-4bg:#4e2a40; --c-4:#eeaad2;
--a0bg:#56221b; --a0:#f7a094;
--a1bg:#123f38; --a1:#86dccc;
--a2bg:#322252; --a2:#c5b1f7;
--a3bg:#4a370f; --a3:#eecb7c;
--xbg:#3c352c; --x:#b5a896;
--chswap-bg:#22354d; --chswap:#9cc2f2; --choff-bg:#4a2724; --choff:#f0a19b;
--duty-bg:#1d3832; --duty:#8fd8c5;
--null-bg:#3b3b40; --null-fg:#adadb4;
--note-bg:#4a3f17; --note-fg:#ecd98a;
--schoolbg:#26384a; --school:#a8c6e2;
--p0bg:#1e4248; --p0:#9fdce6; --p1bg:#3b3158; --p1:#cdb9f2;
--p2bg:#46401a; --p2:#e8da7a; --p3bg:#33421e; --p3:#bcdc8a;
--p4bg:#4e2a40; --p4:#eeaad2; --p5bg:#56221b; --p5:#f7a094;
--p6bg:#123f38; --p6:#86dccc; --p7bg:#322252; --p7:#c5b1f7;
--p8bg:#4a370f; --p8:#eecb7c; --p9bg:#20364f; --p9:#a8c6e2;
--p10bg:#4d2f18; --p10:#f0b27e; --p11bg:#3c352c; --p11:#cdbfa8;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Keep taps immediate throughout nested scrollers; deliberate pinch zoom and scrolling remain available.
Zero specificity lets the drag/resize handles keep their explicit touch-action:none. */
:where(html,body,body *){touch-action:manipulation}
/* Tabler line icons (self-hosted) — align with adjacent text */
.ti{display:inline-block;line-height:1;vertical-align:-.125em}
/* responsive root size — every rem-based label scales with the screen */
html{background:var(--sky);font-size:clamp(16px,0.55vw+13.6px,20px)}
@media(min-width:1024px){html{font-size:clamp(18px,0.5vw+14px,21px)}}
body{
font-family:'Nunito',-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
color:var(--ink); min-height:100vh;
isolation:isolate;
padding-top:env(safe-area-inset-top);
}
/* iOS 27 Home Screen apps blur beyond the status-bar inset. Keep the first heading below that band.
No extra gap when the top inset is zero (landscape). The OS effect itself is outside page control. */
html.ios-home-top-gap body{padding-top:calc(env(safe-area-inset-top,0px) + min(20px,env(safe-area-inset-top,0px)))}
/* --pin-top: where every page-level sticky bar pins. The status bar is see-through (black-translucent),
and iOS draws its gradient/blur band past the inset — so always leave 11px below it, on every page. */
:root{--pin-top:calc(env(safe-area-inset-top,0px) + 11px)}
/* Compact feature/inline styles must not shrink editable text enough to trigger iPhone focus zoom. */
@media(any-pointer:coarse){
input,select,textarea,[contenteditable="true"],[contenteditable="plaintext-only"],.tinp{
font-size:max(16px,1rem)!important;
}
}
body::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:var(--app-background,linear-gradient(180deg,var(--sky) 0%,var(--cream) 42%,var(--peach) 86%,var(--sunset) 100%));
background-position:center;background-size:cover;background-repeat:no-repeat;
}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 110px}
body[data-view="week"] .wrap,body[data-view="month"] .wrap{max-width:1400px}
/* ---------- header (enlarged) ---------- */
header{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
/* the DATE is the headline (largest type on the page); the greeting sits under it, unbolded */
header .hl h1{font-size:2rem;font-weight:900;letter-spacing:-.5px}
header .hl h1 span{color:var(--orange)}
header .hl p{font-weight:400;font-size:1.05rem;margin-top:2px;color:var(--muted)}
.spacer{flex:1}
.iconbtn{
width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;flex:none;
background:var(--card);color:var(--ink);box-shadow:var(--shadow);
font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;
transition:transform .12s;
}
.iconbtn:active{transform:scale(.9)}
/* ---------- generic ---------- */
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.muted{color:var(--muted);font-weight:700;font-size:.85rem}
.btn{cursor:pointer;border:none;border-radius:14px;padding:10px 16px;font-family:inherit;
background:var(--card);color:var(--ink);font-size:.88rem;font-weight:900;box-shadow:var(--shadow);
display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;
transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(240,124,30,.35)}
.btn.sm{padding:8px 13px;font-size:.8rem;border-radius:12px}
.btn.ghostb{background:transparent;box-shadow:none;color:var(--muted)}
.btn.dangertx{background:transparent;box-shadow:none;color:var(--danger)}
.btn.wide{width:100%;padding:14px;border-radius:999px;font-size:1rem}
/* browsers give form controls their own system font — make every one follow the chosen app font
(Appearance → Font sets it on body). Class rules that pick a specific font still win. */
button,input,select,textarea,optgroup,option{font-family:inherit}
input,select,textarea{
width:100%;padding:11px 13px;border-radius:14px;border:1.5px solid var(--line);
background:var(--card);color:var(--ink);font-family:inherit;font-size:max(16px,.92rem);font-weight:700;
}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
input[readonly]{background:var(--line);color:var(--muted);cursor:default} /* derived fields, e.g. auto end time */
/* custom segmented time field (HH|MM, typed, auto-advances) — replaces native type=time (Safari has no auto-advance) */
.tinp{display:inline-flex;align-items:center;justify-content:flex-start;gap:1px;width:auto;
padding:12px 18px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);
color:var(--ink);font-family:inherit;font-weight:700;font-size:max(16px,.92rem);cursor:text}
.tinp:focus-within{border-color:var(--orange)}
.tinp.ro{background:var(--line);cursor:default}
.tinp .tseg{width:2.1ch;min-width:2.1ch;padding:0;margin:0;border:none;background:transparent;text-align:center;
font:inherit;color:inherit;font-weight:800;border-radius:0}
.tinp .tseg:focus{outline:none}
.tinp .tseg::placeholder{color:var(--muted);opacity:.55}
.tinp.ro .tseg{color:var(--muted)}
.tinp .tcolon{opacity:.55;font-weight:800;padding:0 1px}
/* ± steppers: rounded squares (the 14px text-box radius), matching the memo ⋯/✕ buttons */
.tinp .tstep{width:34px;height:34px;margin-left:4px;padding:0;border:none;border-radius:14px;flex:none;
background:var(--line);color:var(--ink);font:inherit;font-weight:800;line-height:1;cursor:pointer}
.tinp .tstep:first-of-type{margin-left:10px}
.tinp .tstep:active{background:var(--orange);color:#fff}
/* Tap / hold targets never start a text selection or the iOS callout: long-press is an app gesture
(memo morph, edit), and a held button shouldn't highlight its label. Text fields stay selectable. */
button,.btn,.vbtn,[role="button"],[onclick],.note,.lrow,.pill,.tile,nav,#memoMorph,#memoMorphDim{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],[contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* memo inline editor (edit text / time / duration in the card or row) */
.note.inline{cursor:default}
.note.inline .medit-tx{margin-top:26px} /* clear the absolutely-positioned drag grip */
.lrow.inline{align-items:flex-start;gap:8px}
/* edit mode: divider goes transparent (keeps the 1.5px rhythm) and rows tighten — the inputs add their own height */
.lrow.editing{border-bottom-color:transparent;padding-top:8px;padding-bottom:8px}
/* list view: name box + controls share one line; controls wrap below when the row gets cramped */
.lrow .medit-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lrow .medit-wrap .medit-tx{flex:1 1 200px;width:auto;min-width:0}
.lrow .medit-wrap .medit-row{margin-top:0;flex:none}
.medit-tx{width:100%;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);
font-family:inherit;font-weight:800;font-size:.95rem;padding:9px 11px;
/* textarea flavour: grows with content (memoTxGrow) up to 4 lines, then scrolls;
the handle stays live for hand-resizing (21px = vertical padding + borders) */
resize:vertical;overflow-y:auto;min-height:0;max-height:calc(5.4em + 21px);line-height:1.35;display:block}
.medit-tx:focus{outline:none;border-color:var(--orange)}
.medit-row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.medit-row .tinp{width:auto;padding:7px 11px;font-size:.85rem}
.medit-dur{width:62px;padding:7px 8px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
font-family:inherit;font-weight:800;font-size:.85rem;text-align:center}
/* ⋯ / ✕ — rounded squares (the 14px text-box radius), on their own right-aligned row */
.medit-btnrow{width:100%;justify-content:flex-end}
.medit-more,.medit-del{border:none;background:rgba(0,0,0,.08);border-radius:14px;width:36px;height:36px;cursor:pointer;
font-weight:900;font-size:1rem;color:inherit;flex:none;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .medit-more,[data-theme="dark"] .medit-del{background:rgba(255,255,255,.12)}
.medit-del{color:var(--danger)}
/* current-time marker: a red arrow (left) + faint dashed line across, positioned proportionally */
.nowmark{position:absolute;left:-6px;right:0;height:0;display:flex;align-items:center;pointer-events:none;z-index:5}
.nowmark .nowarrow{width:0;height:0;flex:none;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--danger)}
/* "now" line: solid, fading to transparent (cleaner than the old dashed line; the arrow stays) */
.nowmark .nowdash{flex:1;height:2px;margin-left:3px;border-radius:2px;background:linear-gradient(90deg,var(--danger),rgba(217,82,82,0));opacity:.7}
/* free-day (no-lessons) "Option 2" event timeline */
.freeday{display:flex;flex-direction:column;margin-top:6px}
.fitem{display:flex;gap:10px;align-items:stretch}
.ftimes{display:flex;flex-direction:column;justify-content:space-between;width:46px;flex:none;text-align:right;
font-size:.72rem;font-weight:900;color:var(--muted);padding:3px 0}
.ftimes .fts{color:var(--ink)}
.fevent{flex:1;min-height:52px;border-radius:14px;padding:12px 14px;font-weight:800;font-size:.95rem;
display:flex;align-items:center;cursor:pointer;box-shadow:var(--shadow)}
.fevent.done{opacity:.55;text-decoration:line-through}
.fgap{margin:8px 0 8px 56px;border:2px dashed var(--line);border-radius:12px;padding:8px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--muted)}
.fgap:hover{border-color:var(--orange);color:var(--orange)}
.fgaparrow{font-size:1.15rem;line-height:1;font-weight:900}
.fgaptx{font-size:.72rem;font-weight:900}
.fempty{width:100%;min-height:160px;border:2.5px dashed var(--line);border-radius:18px;background:transparent;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-family:inherit}
.fempty:hover{border-color:var(--orange);color:var(--orange)}
.fempty .fplus{font-size:2.4rem;font-weight:300;line-height:1}
.femptytx{font-weight:800;font-size:.9rem}
.ffree{text-align:center;color:var(--muted);font-weight:800;font-size:.82rem;padding:12px 0 4px;margin-top:6px;border-top:1.5px dashed var(--line)}
/* start + end time sit next to each other on the left, titles left-aligned above each box */
.timepair{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.timepair > div{flex:0 0 auto}
.timepair label{text-align:left}
#imText{min-height:50px;line-height:1.35} /* item field: resizable textarea (notes can be multi-line) */
label{font-size:.78rem;font-weight:800;color:var(--muted);display:block;margin:12px 2px 5px}
/* modal date field → opens a local cycle-day calendar (replaces the native date input) */
.datefield{width:100%;text-align:left;padding:11px 14px;border-radius:14px;border:1.5px solid var(--line);
background:var(--card);color:var(--muted);font-family:inherit;font-size:.92rem;font-weight:800;cursor:pointer}
.datefield.set{color:var(--ink)}
.datefield:after{content:'▾';float:right;opacity:.6}
.cdpop{position:fixed;z-index:1200;margin-top:0}
.cdpop .cdclr{width:100%;justify-content:center;margin-top:8px}
.su-in.cdbtn,.datefield.cdsm{padding:6px 10px;font-size:.85rem;border-radius:10px;min-width:150px;white-space:nowrap}
.imdppop{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-top:8px;box-shadow:var(--shadow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* upload-type radio selector (exam/invig importer) — opt out of the global full-width input styling */
.exmoded{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;margin-top:10px}
.exmoded .muted{font-size:.8rem;font-weight:800}
.exmoded label{display:inline-flex;gap:6px;align-items:center;margin:0;font-size:.85rem;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap}
.exmoded input[type=radio]{width:17px;height:17px;min-width:0;padding:0;border:none;border-radius:50%;flex:0 0 auto;margin:0;accent-color:var(--orange)}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.check{
width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);flex:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;color:transparent;font-size:.8rem;font-weight:900;
transition:all .15s;background:var(--card);
}
.check.on{background:var(--orange);border-color:var(--orange);color:#fff}
.qzrow{display:flex;align-items:center;gap:10px;cursor:pointer;margin:12px 2px 0;font-weight:800;color:var(--ink);user-select:none}
.qzrow .check{width:24px;height:24px}
.qzhint{font-size:.78rem;color:var(--muted);margin:4px 2px 0 36px;line-height:1.4}
/* ---------- dashboard ---------- */
.dashgrid{display:grid;grid-template-columns:1fr;gap:16px}
/* the day panel keeps its solid .card chrome (white card) at every width */
@media(min-width:920px){.dashgrid{grid-template-columns:1fr 380px;align-items:start}}
/* Home rethink: the memo column scrolls with the page while the day panel is a sticky FIXED
white card — pinned near the top, bottom edge kept clear of the floating nav bar. The card
(and its header/date line) never scrolls; only #rpBody scrolls inside it.
No visible scrollbar; scrolling snaps pill-by-pill so the top pill always sits fully in view. */
@media(min-width:920px){
.dashgrid>.rpanel{position:sticky;top:12px;display:flex;flex-direction:column;
max-height:calc(100dvh - 12px - 92px - env(safe-area-inset-bottom))}
#rpBody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none;scroll-snap-type:y mandatory;scroll-padding-top:20px} /* rest 20px down: a 10px sliver of the previous pill stays in view */
#rpBody::-webkit-scrollbar{display:none}
/* snap units: period/task pills, break lines, event banners, the HW-due strip, the exam strip */
#rpBody>.slot,#rpBody>.brkline,#rpBody>.evbanner,#rpBody>.duestrip,#rpBody>.exsec{scroll-snap-align:start}
}
/* uniform vertical rhythm in the day panel: every unit (pill / banner / strip) is a flex child with
ONE shared 10px gap and no per-element margins — identical spacing everywhere, and every snap unit
rests at the same offset below the panel's top edge (scroll-padding-top matches the gap) */
#rpBody{display:flex;flex-direction:column;gap:10px}
/* rows must never flex-SHRINK to fit the capped scroller — they keep natural height and the
body scrolls (a column-flex scroller squishes its children by default) */
#rpBody>*{flex:none}
#rpBody>.slot{padding:0}
/* collapse-all → hide the idle rows (free periods, empty RC/CT/AS duty ghosts, recess/lunch dividers) */
#rpBody.allcoll>.slot.free,#rpBody.allcoll>.brkline{display:none}
/* …but recess/lunch ITEMS then get a rail label (their divider is gone); hidden while expanded —
the brkline right above already names the break there */
#rpBody .slot .sl.brklab{visibility:hidden}
#rpBody.allcoll .slot .sl.brklab{visibility:visible}
#rpBody>.evbanner,#rpBody>.schoolbanner,#rpBody>.duestrip,#rpBody>.exsec{margin:0}
/* Home-tab inline lesson (desktop): tapping a period slides the memo column out left, the day view
over to the LEFTMOST column (FLIP transform in slideRPanel), and the lesson card in on the right.
Phones keep the full-page lesson view. */
#dashLes{display:none}
.lesclose{display:none}
#dashLes .lesclose,#cycLes .lesclose{display:block;align-self:flex-start}
@media(min-width:920px){
.dashgrid>.memocol{grid-column:1;grid-row:1;transition:transform .28s ease,opacity .28s ease,visibility 0s,max-height 0s}
.dashgrid>.rpanel{grid-column:2;grid-row:1}
#dashLes{display:block;grid-column:2;grid-row:1;visibility:hidden;opacity:0;transform:translateX(30px);
transition:transform .28s ease,opacity .28s ease,visibility 0s .28s;
/* mirrors the day panel: sticky at the same offset, same height cap, own invisible scroller */
position:sticky;top:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
max-height:calc(100dvh - 12px - 92px - env(safe-area-inset-bottom))}
#dashLes::-webkit-scrollbar{display:none}
.dashgrid.lesopen{grid-template-columns:380px minmax(0,1fr)}
.dashgrid.lesopen>.rpanel{grid-column:1}
/* after the slide-out, the hidden memo column also collapses its HEIGHT — otherwise it keeps the
grid row tall, the page stays scrollable, and background scrolling stretches the pinned panels */
.dashgrid.lesopen>.memocol{transform:translateX(-110%);opacity:0;visibility:hidden;pointer-events:none;
max-height:0;overflow:hidden;
transition:transform .28s ease,opacity .28s ease,visibility 0s .28s,max-height 0s .28s}
.dashgrid.lesopen>#dashLes{grid-column:2;visibility:visible;opacity:1;transform:none;
transition:transform .28s ease,opacity .28s ease,visibility 0s}
}
.toolrow{display:flex;gap:8px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
#taskArea{margin-top:16px}
.vtog{display:flex;gap:3px;background:var(--seg-track);border-radius:999px;padding:4px}
.vtog button{
border:none;background:transparent;color:var(--muted);font-family:inherit;font-weight:900;
font-size:1.05rem;padding:7px 14px;border-radius:999px;cursor:pointer;line-height:1;
}
.vtog button.on{background:var(--seg-thumb);color:var(--ink);box-shadow:var(--seg-thumb-shadow)}
/* single toolbar buttons share the view-toggle's track look: a card-coloured base ring with an
inset face; active (temporary mode/state — edit, filter) fills the face orange inside the ring */
.toolrow .vbtn{
border:5px solid var(--card);background:var(--card);background-clip:padding-box;
padding:7px 13px;align-self:stretch;display:inline-flex;align-items:center;
}
/* filter chips */
.fchips{display:flex;gap:6px;overflow-x:auto;padding:2px;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{
flex:none;padding:8px 14px;border-radius:999px;font-weight:900;font-size:.78rem;cursor:pointer;
background:var(--card);color:var(--muted);border:1.5px solid transparent;
}
.fchip.on{color:var(--ink);border-color:var(--orange)}
.fchip.clearf{color:var(--danger);font-weight:900}
/* square memos — card metrics in REM so the box scales with its own type
(a px-fixed height under the responsive root font made 3 lines + tag collide on desktop) */
.memogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:12px}
@media(min-width:920px){.memogrid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}}
/* every memo card is the SAME height (the old min-height, i.e. the shortest card) —
longer text clips behind the line clamp instead of growing the card */
.note{
height:9rem;border-radius:18px;padding:14px;cursor:pointer;
box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;
transition:transform .12s,opacity .2s;font-weight:800;overflow:hidden;
}
.note:active{transform:scale(.97)}
.note.hw{border:1.5px solid var(--line)}
/* long-press opens the editor → suppress the iOS text/callout on a held memo */
.note,.lrow{-webkit-touch-callout:none}
/* Title clamp. It must NOT flex-grow: a grown -webkit-box is taller than the clamped line count,
which lets the lines past the ellipsis show through (and the time row overlap). So the title takes
its natural (clamped) height, and the meta block is pushed to the card bottom with margin-top:auto. */
.note .ntx{font-size:1.08rem;font-weight:900;line-height:1.32;flex:0 1 auto;min-height:0;word-break:break-word;margin-top:6px;
white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* a time row eats vertical space → give the title two lines so it never crashes into the time/tag */
.note:has(.ntime) .ntx{-webkit-line-clamp:2}
/* pin time + footer to the bottom (specificity beats the base .note .ntime / .note .nfoot rules) */
.note:has(.ntime) .ntime{margin-top:auto}
.note:not(:has(.ntime)) .nfoot{margin-top:auto}
.note .ndate{font-size:1.12rem;font-weight:900}
/* memo card = title (max 2 lines) on top, ONE meta line at the bottom: time · tag · length */
.note .ntx{-webkit-line-clamp:2}
.note .npend{margin-top:6px}
.note .nmeta{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.note .nmeta .ntime{margin:0;flex:none;font-size:.86rem}
.note .nmeta .ntag{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:2px 8px;border-radius:7px;font-size:.78rem}
.note .nmeta .ndur{flex:none;margin-left:auto;font-size:.86rem;gap:4px}
.note .nmeta .ndur .durico{width:14px;height:14px}
.note .nfoot{display:flex;align-items:center;gap:6px;margin-top:7px}
/* memo duration: clock + length, right-aligned; never shrinks so it always shows in full */
.note .ndur{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font-size:1rem;font-weight:900;opacity:.92}
.note .ndur .durico{flex:none}
.note .ntag{
display:inline-block;padding:4px 12px;border-radius:9px;font-size:.92rem;
font-weight:900;background:rgba(255,255,255,.6);
}
[data-theme="dark"] .note .ntag{background:rgba(0,0,0,.28)}
.note .npencil{
position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:50%;border:none;
background:rgba(255,255,255,.65);cursor:pointer;font-size:.85rem;color:inherit;font-weight:900;
}
[data-theme="dark"] .note .npencil{background:rgba(0,0,0,.3)}
.note.done{opacity:.38}
.note.done .ntx{text-decoration:line-through}
/* edit mode: the card grows with its editor (textarea auto-size) — the fixed height comes off */
.note.editing,.note.inline{height:auto;min-height:9rem}
/* edit mode: keep the ✕ / ✎ buttons clear of the text */
.note.editing .ntx{margin-top:34px}
.note .hwmark{
position:absolute;bottom:9px;right:9px;font-size:.82rem;font-weight:900;letter-spacing:.5px;
background:rgba(255,255,255,.65);padding:3px 9px;border-radius:8px;
}
[data-theme="dark"] .note .hwmark{background:rgba(0,0,0,.3)}
/* overflow pile — the extra memos fan out to the cell edges, rotated; tap to deal out */
.memopile{position:relative;min-height:9rem;cursor:pointer;transition:transform .15s}
.memopile:hover{transform:translateY(-2px)}
.memopile:active{transform:scale(.97)}
.memopile .pilecard{position:absolute;inset:10px}
/* piled cards cast no shadow — only the bottom card grounds the whole stack */
.memopile .note{position:absolute;inset:0;height:auto;min-height:0;pointer-events:none;box-shadow:none}
.memopile .pilecard:last-of-type .note{box-shadow:0 12px 26px rgba(0,0,0,.22)}
.memopile .pilecnt{
position:absolute;top:-7px;right:-6px;z-index:9;min-width:27px;height:27px;padding:0 8px;
border-radius:999px;background:var(--orange);color:#fff;font-weight:900;font-size:.85rem;
display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(0,0,0,.28);
}
/* header pill that stacks an expanded day back up */
.stackbtn{
margin-left:auto;border:1.5px dashed var(--line);background:transparent;color:var(--muted);
border-radius:999px;padding:4px 13px;font-family:inherit;font-weight:900;font-size:.76rem;cursor:pointer;flex:none;
}
.stackbtn:hover{border-color:var(--orange);color:var(--orange)}
/* collapsed + card */
.plusnote{
min-height:9rem;border-radius:18px;border:2.5px dashed var(--line);display:flex;
align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
font-size:2.8rem;font-weight:700;transition:all .15s;background:transparent;
}
.plusnote:hover{border-color:var(--orange);color:var(--orange)}
/* expanded add card */
.addnote{
grid-column:1/-1;border-radius:18px;border:2.5px dashed var(--orange);padding:14px;
background:var(--card);display:flex;flex-direction:column;gap:9px;
}
@media(min-width:680px){.addnote{grid-column:span 2}}
.addnote .arow{display:flex;gap:7px;align-items:center}
.addnote input[type=text]{border:none;border-bottom:1.5px solid var(--line);border-radius:0;padding:7px 2px;font-weight:900;font-size:1rem;background:transparent}
.addnote input[type=date]{padding:8px 10px;font-size:.8rem;border-radius:14px;width:auto;flex:1}
.savebtn{width:38px;height:38px;border-radius:50%;border:none;background:var(--orange);color:#fff;
font-weight:900;font-size:1rem;cursor:pointer;flex:none;box-shadow:0 4px 12px rgba(240,124,30,.4)}
/* length picker (add-item modal) */
.lenrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lenchip{padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:900;cursor:pointer;border:2px solid var(--line);color:var(--muted);text-align:center}
.lenchip.on{border-color:var(--orange);color:var(--orange)}
.lencustom{width:72px;padding:7px 9px;border-radius:14px}
/* duration: faded colour watermark in the bottom-right corner (same treatment as the HW 📝, but keeps its colour) */
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.tsel{padding:6px 13px;border-radius:999px;font-size:.82rem;font-weight:900;cursor:pointer;
border:2px solid transparent;opacity:.6}
.tsel.on{opacity:1;border-color:currentColor}
.hwtog{margin-left:auto}
/* timeline — one row per date, memo cards inside (no surrounding card bg) */
.tlgroup{margin-bottom:20px}
.tlhead{font-weight:900;font-size:1.18rem;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.tlhead .cy{color:var(--muted);font-size:.92rem;font-weight:800}
.tladd{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1.5px dashed var(--line);
background:transparent;color:var(--muted);font-size:1.2rem;font-weight:700;cursor:pointer;line-height:1;flex:none}
.tladd:hover{border-color:var(--orange);color:var(--orange)}
.tlsquares{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.tlsq{
aspect-ratio:1/1;border-radius:15px;padding:10px;cursor:pointer;box-shadow:var(--shadow);
display:flex;flex-direction:column;font-weight:900;font-size:.82rem;position:relative;overflow:hidden;
}
.tlsq .check{position:absolute;top:7px;right:7px;width:22px;height:22px}
.tlsq.done{opacity:.38}
.tlsq.done .ttx{text-decoration:line-through}
.tlsq .ttx{flex:1;line-height:1.25;margin-top:2px;word-break:break-word;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tlsq .ttag{font-size:.68rem;opacity:.85}
.rangerow{display:flex;justify-content:flex-start;margin-top:12px}
/* single segmented pill bar */
.rangepill{display:inline-flex;background:var(--seg-track);border-radius:999px;padding:4px;gap:3px}
.rangepill button{border:none;background:transparent;border-radius:999px;
padding:7px 15px;font-family:inherit;font-weight:900;font-size:.76rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.rangepill button.on{background:var(--seg-thumb);color:var(--ink);box-shadow:var(--seg-thumb-shadow)}
/* list view */
.lrow{display:flex;gap:11px;align-items:center;padding:12px 4px;border-bottom:1.5px solid var(--line);cursor:pointer}
.lrow:last-child{border:none}
.lrow .tx{flex:1;font-weight:800;font-size:.95rem;min-width:0}
.lrow.done .tx{text-decoration:line-through;color:var(--muted)}
.lrow .dt{font-size:.85rem;font-weight:900;color:var(--muted);white-space:nowrap}
.pill{padding:4px 12px;border-radius:9px;font-size:.8rem;font-weight:900;white-space:nowrap;text-align:center}
/* ---------- today panel ---------- */
/* title always truly centred; the collapse toggle floats at the right so it never shifts the title */
.rpanel{position:relative}
/* phone: swipe sideways to change day — the card stays, its schedule slides with the next day's beside it (rpSwipeInit) */
@media (max-width:919px){ .dashgrid>.rpanel{touch-action:pan-y pinch-zoom} }
.rpanel.rpswiping{overflow-x:clip;user-select:none;-webkit-user-select:none} /* clip, not hidden: the date bar stays sticky */
.rpanel.rpswiping #rpBody{will-change:transform}
.rpghost{position:absolute;margin:0;overflow:hidden;pointer-events:none;box-sizing:border-box;will-change:transform} /* anchors the date-picker popover; the desktop sticky rule overrides to sticky */
/* ‹ date › — the arrows sit at FIXED spots (left edge / just left of the collapse button) so you can
click through days without moving the pointer; the date is centred between them and ellipsizes */
.rpanel .rphead{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 38px 38px;align-items:center;
gap:2px;margin-bottom:10px;min-height:38px}
.rpanel .rphead h2{font-size:1.3rem;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rpanel .rphead h2 .rpcyc{color:var(--orange)}
.rpanel .rphead .warr{width:38px;height:38px;padding:0}
.rpanel .rphead #collapseAllBtn{grid-column:4}
.rpanel .rphead #collapseAllBtn.open{transform:rotate(-90deg)} /* ‹ turned to point down */
.rpanel #rpDay:empty{display:none}
/* stacked layout (page scroll): the header pins as a liquid-glass pill while the day's pills
scroll under it (glass recipe: chrome.html). Desktop (≥920px) panel scrolls internally in
#rpBody, so the header never has content passing under it there — no pin needed. */
@media(max-width:919px){
/* at rest: flat in the card. Pinned (.stuck, set by rpStuckFx): the floating glass pill */
.rpanel .rphead{position:sticky;top:var(--pin-top);z-index:31;
border-radius:999px;padding:4px 8px;background:transparent;box-shadow:none;
transition:background-color .25s ease, box-shadow .25s ease, margin .25s ease}
.rpanel .rphead.stuck{background:var(--card);box-shadow:var(--shadow);margin-left:-4px;margin-right:-4px}
}
.warr{border:none;background:none;color:var(--muted);font-size:1.4rem;font-weight:900;cursor:pointer;padding:2px 6px;flex:none;font-family:var(--sysarr)}
/* render chevron arrows ‹ › in the system font (cleaner than Nunito's glyphs) */
.collarr,.backbtn{font-family:var(--sysarr)}
#collapseAllBtn{font-family:var(--sysarr);font-size:1.35rem !important;transition:transform .15s}
#collapseAllBtn.open{transform:rotate(-90deg)}
/* date-picker popover */
.dppop{position:absolute;z-index:30;left:50%;transform:translateX(-50%);top:54px;width:min(330px,92%);
background:var(--card);border-radius:18px;box-shadow:0 14px 40px rgba(60,40,15,.28);padding:14px}
.dphd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:1.02rem}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dpwd{text-align:center;font-size:.72rem;font-weight:900;color:var(--muted);padding:2px 0}
.dpc{border:none;background:transparent;border-radius:10px;padding:6px 0;font-family:inherit;font-weight:900;
font-size:.92rem;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.dpc em{font-style:normal;font-size:.6rem;color:var(--orange);font-weight:900}
.dpc:hover{background:var(--line)}
/* non-school days (weekends + holidays) shown red; school days stay default black (lessons or not) */
/* one colour per meaning: holiday = red text · today = soft orange wash · picked = solid orange */
.dpc.hol{color:var(--danger)}
.dpc.hol.sel{color:var(--sel-fg)}
.dpc.today{background:var(--orange-soft);color:var(--orange)}
.dpc.today em{color:inherit}
.dpc.sel{background:var(--sel-bg);color:var(--sel-fg)}
.dpc.sel em{color:inherit}
.dayline{text-align:center;font-weight:900;font-size:1.15rem;margin-bottom:4px}
.dayline span{color:var(--orange)}
.schoolbanner{
background:var(--schoolbg);color:var(--school);border-radius:14px;padding:11px 14px;
font-weight:900;font-size:1rem;text-align:center;margin:8px 0;
}
.evbanner{
background:var(--orange-soft);color:var(--orange);border-radius:14px;padding:10px 14px;
font-weight:900;font-size:.95rem;margin:6px 0;cursor:pointer;word-break:break-word;text-align:center;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.schoolbanner{word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evtag{display:inline-block;font-size:.78rem;font-weight:900;padding:2px 9px;border-radius:8px;
background:rgba(255,255,255,.55);margin-left:4px;vertical-align:middle}
[data-theme="dark"] .evtag{background:rgba(0,0,0,.28)}
.evmeta{font-size:.8rem;font-weight:700;opacity:.85;margin-top:3px;line-height:1.3;word-break:break-word}
.msg{word-break:break-word}
.cl-item .tx,.lrow .tx,.hwrow .tx{word-break:break-word}
/* loading dots for AI replies */
.loaddots span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);
margin-right:4px;animation:bnc 1s infinite}
.loaddots span:nth-child(2){animation-delay:.15s}
.loaddots span:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
@keyframes rot{to{transform:rotate(360deg)}}
.slot{display:flex;gap:9px;align-items:stretch;padding:5px 0}
/* the marker is a fixed band the height of a one-line tile, content centred — it lines up with the
tile's header line and stays put when the tile grows (expanded activities, stacked boxes) */
.slot .sl{width:42px;height:38px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-weight:900;font-size:.78rem;color:var(--muted)}
.slot .sl em{font-style:normal;font-size:.6rem;font-weight:800}
/* double lesson: both period labels stack at the TOP of the rail beside one combined tile —
each label the height of a one-line pill row, 10px apart (the same rhythm as two separate pills) */
.slcol{flex:none;display:flex;flex-direction:column;gap:10px}
.slcol .sl{flex:none;height:38px}
.slot.dbl .tile{min-height:86px} /* 38 + 10 + 38 — the pill spans both label rows */
/* ---- memo peek (features/dashboard: memoPeekShow) — full text of a memo cut off at 2 lines ---- */
#memoPeek{position:fixed;z-index:250;display:none;padding:12px 14px;border-radius:14px;background:var(--card);color:var(--ink);
border:1px solid var(--line);box-shadow:var(--shadow);font-size:.98rem;font-weight:800;line-height:1.4;white-space:pre-line;
word-break:break-word;pointer-events:none;max-height:60vh;overflow:auto}
#memoPeek.open{display:block;animation:memoPeekIn .12s ease-out}
@keyframes memoPeekIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* a cut-off title keeps its normal "…" ending; press and hold it to morph it open */
/* memo morph (features/dashboard: memoMorphOpen) */
#memoMorphDim{position:fixed;inset:0;z-index:260;background:rgba(30,20,10,.28);touch-action:none}
@media(max-width:639px){ #memoMorphDim{background:transparent} #memoMorph{box-shadow:0 12px 48px rgba(40,28,14,.3),0 2px 8px rgba(40,28,14,.12)} } /* phones: no dim (see .modal-bg) — a deeper shadow lifts the sheet instead */
#memoMorph{position:fixed;z-index:261;overflow:hidden;box-shadow:var(--shadow)}
.note.mmsrc{opacity:.45;transform:scale(.96);transition:opacity .25s,transform .25s} /* the memo the sheet came from: stays put, set back */
#memoMorph .mmin{box-sizing:border-box;padding:18px 18px 14px;max-height:80vh;overflow:auto}
#memoMorph .mmtx{font-size:1.15rem;font-weight:900;line-height:1.4;white-space:pre-line;word-break:break-word}
#memoMorph .npend{margin-top:8px}
#memoMorph .nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;white-space:normal}
#memoMorph .nmeta .ntag{padding:3px 10px;border-radius:8px;font-size:.82rem;font-weight:900;background:rgba(255,255,255,.6)}
[data-theme="dark"] #memoMorph .nmeta .ntag{background:rgba(0,0,0,.28)}
#memoMorph .nmeta .ntime,#memoMorph .nmeta .ndur{font-size:.9rem;font-weight:900;display:inline-flex;align-items:center;gap:4px}
#memoMorph .nmeta .durico{width:14px;height:14px}
#memoMorph .mmacts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media (prefers-reduced-motion: reduce){ #memoPeek.open{animation:none} }
/* ---------- homework page: a board of class cards ---------- */
/* ---------- homework page: soft class panels, white item rows, due-date chips ---------- */
.hwpagehd{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.hwpagehd h2{font-size:1.1rem;font-weight:900}
#hwSum{font-size:.85rem;font-weight:800;color:var(--muted)}
.hwboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;align-items:start}
.hwcard{border-radius:16px;padding:12px;background:#f7f2ea;background:color-mix(in srgb, var(--ink) 4%, var(--card));min-width:0;display:flex;flex-direction:column;gap:10px}
.hwchd{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 2px}
.hwchd .pill{flex:none}
.hwsubj{font-weight:900;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwsp{flex:1}
.hwbadge{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--orange);color:#fff;font-size:.75rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.hwadd{flex:none;width:30px;height:30px;border-radius:10px;border:none;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.hwadd:hover{background:var(--card);color:var(--orange)}
.hwlist{display:flex;flex-direction:column;gap:6px}
.hwcard .hwrow{gap:10px;padding:10px 10px 10px 12px;margin:0;border:none;border-radius:12px;background:var(--card);box-shadow:0 1px 2px rgba(60,40,20,.06)}
.hwcard .hwrow.duetoday,.hwcard .hwrow.overdue,.hwcard .hwrow.pending{background:var(--card)}
.hwcard .hwrow .check{width:20px;height:20px;flex:none}
.hwcard .hwrow .tx{font-size:.9rem;min-width:0}
.hwcard .hwrow .tx .hwtt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hwcard .hwrow .hwmissnames{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hwcard .hwdue{flex:none;margin-left:auto;font-size:.72rem;font-weight:900;padding:3px 9px;border-radius:999px;background:var(--line);color:var(--muted)}
.hwcard .hwdue.today,.hwcard .hwdue.pending{background:var(--orange-soft);color:var(--orange)}
.hwcard .hwdue.over{background:rgba(217,82,82,.14);color:var(--danger)}
.hwcard .hwdonebody .hwrow{background:none;box-shadow:none;padding-top:7px;padding-bottom:7px}
.hwfoot{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 2px}
.hwstatus{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:800;color:var(--muted)}
.hwstatus i{font-size:1rem}
.hwcard .hwdonehdr{display:inline-flex;align-items:center;gap:4px;width:auto;margin:0 0 0 auto;padding:4px 8px;border:none;border-radius:8px;font-size:.8rem}
.hwcard .hwdonehdr:hover{background:var(--card);color:var(--ink)}
.hwcard .hwdonehdr i{transition:transform .15s}
.hwcard .hwdonehdr.open i{transform:rotate(180deg)}
/* touch: no hover, so keep just the ✎ (the edit sheet has delete + who hasn't submitted) — three icons squeezed the title */
@media (hover:none){ .hwcard .hwact .hwmiss:not(:first-child){display:none} }
@media (max-width:520px){ .hwcard{padding:10px} .hwcard .hwrow{padding:9px 8px 9px 10px} }
/* row actions take no room until hovered — the due date keeps the right edge */
.hwact{display:none;gap:0;flex:none}
.hwrow:hover .hwact,.hwrow:focus-within .hwact{display:flex}
@media (hover:none){ .hwact{display:flex;opacity:.75} }
.hwrow{display:flex;gap:11px;align-items:center;padding:12px 4px;border-bottom:1.5px solid var(--line);cursor:pointer}
.hwrow:last-child{border:none}
.hwrow .tx{flex:1;font-weight:800;font-size:.95rem}
.hwrow.done .tx{text-decoration:line-through;color:var(--muted)}
.hwdue{font-size:.85rem;font-weight:900;color:var(--muted);white-space:nowrap}
.hwrow.duetoday{background:var(--orange-soft);border-radius:12px}
.hwdue.today{color:var(--orange)}
.hwrow.overdue{background:rgba(217,82,82,.12);border-radius:12px}
.hwdue.over{color:var(--danger)}
.hwrow.pending{background:rgba(232,137,63,.10);border-radius:12px}
.hwdue.pending{color:var(--orange)}
.hwmiss{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:2px 4px;flex:none;line-height:1}
.hwmiss:hover{color:var(--orange)}
.hwmissnames{font-size:.76rem;font-weight:700;color:var(--muted);margin-top:2px;word-break:break-word}
.duerow.pending .hwmissnames{color:var(--orange)}
#hwMissModal{z-index:120} /* sits above the item-edit modal when opened from inside it */
/* memo: homework-pending indicator */
.npend{margin-top:5px;font-size:.72rem;font-weight:900;color:var(--orange);display:flex;align-items:center;gap:4px}
.mpend{color:var(--orange);font-weight:900;font-size:.82rem}
.hwdonehdr{display:block;width:100%;text-align:left;margin-top:14px;padding:8px 4px;
background:none;border:none;border-top:1.5px solid var(--line);
color:var(--muted);font-weight:900;font-size:.85rem;cursor:pointer}
/* Completed section stays fully legible (no strike-through / fade) */
.hwdonebody .hwrow.done .tx{text-decoration:none;color:var(--ink)}
/* timetable PDF export box: options + a scaled live preview of the real page */
.ttxopt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ttxopt>span{font-weight:800;font-size:.85rem;color:var(--muted);width:78px}
.ttxseg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:999px;padding:2px;gap:2px}
.ttxseg button{border:none;background:none;padding:6px 12px;border-radius:999px;font-weight:800;font-size:.85rem;color:var(--ink);cursor:pointer}
.ttxseg button:not([style]){font-family:inherit}
.ttxseg button.on{background:var(--orange);color:#fff}
.ttxchecks{display:flex;gap:14px;flex-wrap:wrap}
.ttxchecks label{display:flex;gap:6px;align-items:center;font-weight:700;font-size:.9rem;cursor:pointer}
.ttxchecks input{width:18px;height:18px;margin:0}
#ttxPrev{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1.5px var(--line);background:#fff;margin:12px 0 4px}
.ttxprevhost{width:1123px;transform-origin:top left}
.ttxoff{position:fixed;left:-20000px;top:0}
/* the printed page itself — fixed A4 pixels and light colours, whatever the app theme */
.ttxpage{width:1123px;height:794px;box-sizing:border-box;padding:30px 30px 40px;background:#fff;color:#2b2118;position:relative;overflow:hidden;
font-size:var(--ttxf,12px);line-height:1.25;text-align:left;-webkit-font-smoothing:antialiased}
.ttxhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:12px}
.ttxtitle{font-size:22px;font-weight:900}
.ttxmeta{font-size:11px;color:#7a6f63;font-weight:500}
.ttxt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:1em}
.ttxt td,.ttxt th{border-bottom:none;text-transform:none;letter-spacing:normal;color:#2b2118;line-height:1.35} /* undo the app's own table styles */
.ttxpage.rnd .ttxt{border-collapse:separate;border-spacing:3px}
.ttxt td,.ttxt th{text-align:center;vertical-align:middle;padding:.4em .3em;font-weight:700;overflow-wrap:anywhere}
.ttxpage:not(.rnd) .ttxt td:not(.ttxsep),.ttxpage:not(.rnd) .ttxt th{border:1px solid #c9c0b3}
.ttxpage.rnd .ttxt td,.ttxpage.rnd .ttxt th{border-radius:var(--ttxr)}
.ttxt th{background:#efe8de;font-size:1.15em;font-weight:900;color:#2b2118}
.ttxt th.ttxname{font-size:1em}
.ttxcl{width:6.2%}.ttxct{width:8%}.ttxcsep{width:8px}
.ttxlb{text-align:left!important;padding-left:.6em!important;background:#f6f2ec;font-weight:800!important;white-space:pre-line}
.ttxtm{background:#f6f2ec;color:#5f554b;font-weight:600!important;white-space:nowrap}
.ttxbrk .ttxlb,.ttxbrk .ttxtm,.ttxsb{background:#e6e0d7!important}
.ttxles td{height:3.5em}
.ttxbrk td{height:2.3em}
.ttxtxt td{height:2.4em}
.ttxe{background:#fbfaf8}
.ttxbrk .ttxe{background:#f6f3ee}
.ttxl{font-weight:800!important}
/* no overflow clipping here: html2canvas draws text a little lower than the browser, so a clipped box
cuts the bottom off letters — long names are shortened in features/tt-export (ttxShort) instead */
.ttxroom{font-weight:600;opacity:.85;margin-top:.1em}
.ttxsep{background:transparent!important;border:none!important;padding:0!important}
.ttxweekly{margin-top:10px;font-size:11px;color:#5f554b}
.ttxweekly b{margin-right:8px}
.ttxfoot{position:absolute;left:30px;bottom:14px;font-size:9.5px;color:#9a8f83}
/* ---------- lesson page ---------- */
.lesshead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.lesschip{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.55rem;flex:none;overflow:hidden;text-align:center;line-height:1.05;padding:0 4px;box-sizing:border-box;overflow-wrap:anywhere}
.lesshead h2{font-size:1.35rem;font-weight:900}
.lesshead .sub{color:var(--muted);font-weight:800;font-size:.88rem}
/* quick-add row at the bottom of the lesson list; duration + HW extras appear while the row has focus */
.lessadd{display:flex;gap:8px;align-items:center;padding:4px 0}
.lessadd #lessQuick{flex:1;min-width:0;border:none;background:transparent;border-radius:0;padding:10px 2px;
font-family:inherit;font-weight:700;font-size:.92rem;color:var(--ink)}
.lessadd #lessQuick:focus{outline:none;border:none}
.lessadd input::placeholder{color:var(--muted);opacity:.7}
.lessaddx{display:flex;gap:8px;align-items:center;flex:none}
/* the type chip always shows (it matches the homework due chip); the minutes box appears while the row
is focused OR holds typed text (so a button press can't hide its own target) */
.lessaddx .qmin{display:none}
.lessadd:focus-within .lessaddx .qmin,
.lessadd:has(#lessQuick:not(:placeholder-shown)) .lessaddx .qmin{display:inline-flex}
.lessadd{position:relative}
.qchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border:1.5px solid var(--line);border-radius:999px;background:transparent;
color:var(--muted);font-family:inherit;font-weight:800;font-size:.78rem;cursor:pointer;white-space:nowrap;line-height:1}
.qchip:hover{background:var(--line);color:var(--ink)}
.qchip.qquiz{background:var(--bg-warning,#fdecc8);color:var(--text-warning,#7a4b00);border-color:transparent}
.qchip.qhw{background:var(--bg-accent,#dce9fb);color:var(--text-accent,#1f4f99);border-color:transparent}
.qchip .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qmin{cursor:text;padding:0 6px}
.qmin:hover{background:transparent;color:var(--muted)}
.qmin:focus-within{border-color:var(--orange)}
#lessQuickDur{width:36px;border:none;background:transparent;text-align:center;padding:0;font-family:inherit;font-weight:800;font-size:.78rem;color:var(--ink);-moz-appearance:textfield}
#lessQuickDur::-webkit-outer-spin-button,#lessQuickDur::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#lessQuickDur:focus{outline:none}
.qmenu{display:none;position:absolute;right:0;bottom:44px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:6px;z-index:5;min-width:170px}
.qmenu.open{display:block}
.qmenu button{display:flex;gap:8px;align-items:center;width:100%;border:none;background:none;text-align:left;padding:9px 10px;border-radius:10px;
color:var(--ink);font-family:inherit;font-weight:800;font-size:.85rem;cursor:pointer}
.qmenu button:hover{background:var(--line)}
.cl-item{display:flex;gap:12px;align-items:center;padding:13px 4px;border-bottom:1.5px solid var(--line)}
.cl-item:not(.editing){cursor:pointer}
.cl-item.editing{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.cl-item.editing:active{cursor:grabbing}
.cl-item:last-child{border:none}
.cl-item .tx{flex:1;font-weight:900;font-size:1rem}
.cl-item.done .tx{text-decoration:line-through;color:var(--muted)}
.cl-item .clact{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.cl-item:hover .clact,.cl-item:focus-within .clact{opacity:1}
@media (hover:none){ .cl-item .clact{opacity:.7} }
.cl-item .clinwrap .grip{cursor:grab;touch-action:none;font-size:1.1rem;padding:4px 6px}
.cl-item .clact button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1.05rem;padding:4px 5px;border-radius:8px;line-height:1}
.cl-item .clact button:hover{background:var(--line);color:var(--ink)}
.cl-item .clact button.qz.on{color:var(--ink)}
.cl-item.inlined{cursor:default}
.uptag{flex:none;white-space:nowrap;display:inline-block;font-size:.72rem;font-weight:900;padding:2px 8px;border-radius:8px;background:var(--bg-warning,#fdecc8);color:var(--text-warning,#7a4b00)}
/* lesson card sections: To teach / Homework in matching soft panels (same as the Homework page's
class panels) — identical heading, row and add-line heights; homework add line has date pills */
.lesspanel{border-radius:16px;padding:4px 12px;margin-top:10px;background:#f7f2ea;background:color-mix(in srgb, var(--ink) 4%, var(--card))}
.lesssec{display:flex;gap:6px;align-items:center;height:34px;font-size:.78rem;font-weight:900;color:var(--muted)}
.lessn{margin-left:auto;font-weight:800;font-size:.72rem}
.lesspanel .cl-item{padding:10px 2px;min-height:46px;box-sizing:border-box}
.lesspanel .cl-item:last-child{border-bottom:1.5px solid var(--line)}
.lessempty{display:flex;align-items:center;min-height:46px;color:var(--muted);font-weight:700;font-size:.9rem;border-bottom:1.5px solid var(--line)}
.lesspanel .lessadd{padding:0;min-height:46px}
.lesspanel .lessadd input#lessQuick,.lesshwadd #lessHwQuick{padding:0 2px;height:46px}
.lesshwadd #lessHwQuick{flex:1;min-width:0;border:none;background:transparent;border-radius:0;
font-family:inherit;font-weight:700;font-size:.92rem;color:var(--ink)}
.lesshwadd #lessHwQuick:focus{outline:none;border:none}
.hwpicks{display:none;flex-wrap:wrap;gap:6px;padding:2px 0 8px}
.hwpicks.open{display:flex}
.hwpick{height:32px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);
font-family:inherit;font-weight:800;font-size:.8rem;cursor:pointer;white-space:nowrap}
.hwpick:hover{background:var(--line)}
.hwpick em{font-style:normal;color:var(--muted);font-weight:700}
.hwpick.on{background:var(--bg-accent,#dce9fb);color:var(--text-accent,#1f4f99);border-color:transparent}
.hwpick.on em{color:inherit;opacity:.8}
.cl-item.justadded{animation:hwjust 1.6s ease-out}
@keyframes hwjust{from{background:var(--bg-accent,#dce9fb)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){ .cl-item.justadded{animation:none} }
.uptag.hw{background:var(--bg-accent,#dce9fb);color:var(--text-accent,#1f4f99)}
.upnext .dt{font-size:.85rem;font-weight:900;color:var(--muted);white-space:nowrap}
.upnext summary{display:flex;gap:11px;align-items:center;padding:8px 2px;cursor:pointer;list-style:none;color:var(--muted)}
.upnext summary::-webkit-details-marker{display:none}
.upnext .upitem{padding:4px 2px 4px 100px;font-size:.82rem;font-weight:700;color:var(--muted)}
.cl-item .clinwrap{display:flex;gap:6px;align-items:center}
.cl-item .clinwrap .clin{flex:1;min-width:0}
.cl-item .clinx,.cl-item .clindate{flex:none;border:none;background:none;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:4px 6px;border-radius:8px;line-height:1}
.cl-item .clinx:hover,.cl-item .clindate:hover{background:var(--line);color:var(--ink)}
.cl-item .clin{padding:7px 10px;font-weight:900;font-size:max(16px,1rem)}
.cl-item .del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;font-weight:900}
/* ---------- drag handle (reorder) ---------- */
.grip{border:none;background:transparent;color:var(--muted);cursor:grab;font-size:1.05rem;line-height:1;
padding:2px 4px;border-radius:8px;touch-action:none;flex:none;opacity:.7}
.grip:active{cursor:grabbing}
.dragging{opacity:.55}
/* drag handle on a memo card (edit mode) — top-left, clear of the ✎/✕ buttons */
.note .nmgrip{position:absolute;top:9px;left:11px;z-index:3;font-size:1.05rem;opacity:.6;cursor:grab;touch-action:none}
/* memo lift-drag: the card floats under the cursor, tilted with a lift shadow */
.lifted{position:fixed!important;z-index:300;margin:0!important;pointer-events:none;
box-shadow:0 18px 44px rgba(40,25,10,.36);transform:rotate(2.5deg) scale(1.03)}
.lrow.lifted{background:var(--card);border-radius:12px;padding:12px;border:none}
/* dotted placeholder marking where the lifted card will land */
.memph{border:2.5px dashed var(--line);border-radius:18px;background:transparent;box-sizing:border-box}
.memph-list{width:100%;border-radius:12px}
/* ---------- notes board: free x/y placement (desktop) · single-column list (mobile) ---------- */
/* Cards are large; the text size is unchanged. */
.noteboard{position:relative;min-height:40px}
.noteboard.list{display:flex;flex-direction:column;gap:14px}
.snote{position:relative;border-radius:18px;padding:18px;min-height:170px;box-shadow:var(--shadow);
display:flex;flex-direction:column;background:var(--note-bg);color:var(--note-fg);overflow:hidden}
.noteboard.free .snote{position:absolute;width:240px}
.noteboard.free .snote.dragging,.noteboard.free .snote.resizing{z-index:20;box-shadow:0 16px 40px rgba(60,40,15,.34)}
.noteboard.list .snote{width:100%}
.noteboard.free .snote .sntx{margin-top:20px}
.snote .sntx{font-size:1.02rem;font-weight:900;line-height:1.34;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;flex:1;min-height:0;overflow-y:auto;
user-select:text;-webkit-user-select:text;cursor:text}
/* list (mobile) cards grow to fit their text — never clip */
.noteboard.list .snote{height:auto!important}
.noteboard.list .snote .sntx{overflow-y:visible}
.snote .snlink{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
/* pull handle (drag) — keeps the card body selectable for copy/paste */
.snote .sngrip{position:absolute;top:9px;left:12px;width:28px;height:24px;border-radius:8px;display:flex;
align-items:center;justify-content:center;cursor:grab;touch-action:none;background:rgba(255,255,255,.5);
font-size:.95rem;color:inherit;opacity:.65;user-select:none;-webkit-user-select:none}
.snote .sngrip:hover{opacity:1}
.snote.dragging .sngrip{cursor:grabbing}
[data-theme="dark"] .snote .sngrip{background:rgba(0,0,0,.3)}
/* resize handle (edit mode, bottom-right corner) */
.snote .snrz{position:absolute;right:7px;bottom:7px;width:16px;height:16px;cursor:nwse-resize;touch-action:none;
border-right:3px solid currentColor;border-bottom:3px solid currentColor;border-bottom-right-radius:7px;opacity:.4}
.snote .snrz:hover{opacity:.85}
.noteboard.list .sngrip,.noteboard.list .snrz{display:none}
.snote .snedit,.snote .sndel{position:absolute;top:10px;width:26px;height:26px;border-radius:999px;border:none;
background:rgba(255,255,255,.55);cursor:pointer;font-weight:900;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.snote .sndel{right:12px;color:var(--danger)}
.snote .snedit{right:44px;color:inherit}
[data-theme="dark"] .snote .snedit,[data-theme="dark"] .snote .sndel{background:rgba(0,0,0,.32)}
/* note colour-picker swatches (add/edit modal) */
#imTags .noteSw{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#imTags .noteSw.on{outline:2.5px solid var(--ink);outline-offset:2px}
.backbtn{margin-bottom:14px}
/* ---------- events / chat ---------- */
.evrow{display:flex;gap:12px;padding:12px 2px;border-bottom:1.5px solid var(--line);align-items:center;cursor:pointer}
.evrow:last-child{border:none}
.evdate{min-width:86px;font-weight:900;font-size:.85rem}
.evpasthd{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.6px;margin:16px 0 2px}
.evpast{opacity:.55}
.chkrow{display:flex;align-items:center;gap:8px;font-weight:700;margin:10px 0 2px;cursor:pointer}
.chkrow input{width:18px;height:18px;accent-color:var(--orange)}
.msg{max-width:86%;padding:11px 15px;border-radius:18px;font-weight:700;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--dark);color:var(--cream);border-bottom-right-radius:6px}
[data-theme="dark"] .msg.user{background:var(--sel-bg);color:var(--sel-fg)}
.msg.bot{align-self:flex-start;background:var(--card);box-shadow:var(--shadow);border-bottom-left-radius:6px}
.chat-image-preview{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:6px 8px;border:1px solid var(--line);border-radius:14px}
.chat-image-preview[hidden]{display:none}
.chat-image-preview img{width:48px;height:48px;object-fit:cover;border-radius:8px}
/* ---- chat revamp: animated orb empty state, input card with + and send, app dropdowns in the review card ---- */
.chatstage{display:flex;flex-direction:column}
.chatbox{display:flex;flex-direction:column;gap:10px;min-height:0}
.chat-started .chatbox{min-height:40vh}
.chatcard{position:relative}
.chat-empty{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;align-content:center;gap:22px 20px;min-height:min(44vh,360px);padding:10px 4px;text-align:center;overflow:hidden;
transition:opacity .35s ease,transform .35s ease,min-height .35s ease,max-height .35s ease,padding .35s ease}
.chat-started .chat-empty{opacity:0;transform:scale(.94);min-height:0;max-height:0;padding:0;pointer-events:none}
.chat-center{display:flex;flex-direction:column;align-items:center;gap:24px;min-width:0}
.chat-acts{display:flex;flex-direction:column;gap:30px;min-width:0;padding-top:2px} /* two 44px bubbles + gap ≈ the 132px orb, so they sit level with it */
.chat-acts.left{align-items:flex-end}
.chat-acts.right{align-items:flex-start}
.chat-act{display:flex;align-items:center;gap:9px;width:auto;max-width:100%;min-height:44px;padding:8px 16px 8px 13px;white-space:nowrap;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
font-family:inherit;border-radius:18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,border-color .15s}
.chat-acts.left .chat-act{border-bottom-right-radius:6px} /* chat-bubble tail points toward the orb */
.chat-acts.right .chat-act{border-bottom-left-radius:6px}
.chat-act>i{flex:none;font-size:1.3rem;color:var(--orange)}
.chat-act b{display:block;font-size:.88rem;font-weight:900;line-height:1.25}
.chat-newbtn{margin-left:0;margin-right:8px;display:grid;place-items:center;font-size:1.15rem}
.chat-newbtn[hidden]{display:none}
.chat-started .chatin-card{margin-top:18px}
.chat-act:hover{border-color:var(--orange);animation-play-state:paused}
/* demo A: each bubble bobs in place on its own rhythm (staggered so they never move in step) */
.chat-act{animation:actBob 3.4s ease-in-out infinite}
.chat-acts.left .chat-act:nth-child(2){animation-duration:4.1s;animation-delay:-1.2s;margin-right:12px}
.chat-acts.right .chat-act:nth-child(1){animation-duration:3.8s;animation-delay:-.6s;margin-left:12px}
.chat-acts.right .chat-act:nth-child(2){animation-duration:4.4s;animation-delay:-2s}
@keyframes actBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.chat-act:focus-visible{outline:2px solid var(--orange);outline-offset:2px;animation-play-state:paused}
.chat-drop{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:inherit;border:2.5px dashed var(--orange);
background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;pointer-events:none}
.chat-drop[hidden]{display:none}
.chat-drop i{font-size:2.4rem;color:var(--orange)}
.chat-drop b{font-size:1.05rem;font-weight:900}
.chat-drop small{font-size:.8rem;font-weight:700;color:var(--muted)}
.chat-greet{grid-column:1 / -1;justify-self:center;white-space:nowrap;margin:0;font-weight:700;font-size:1rem;line-height:1.55;color:var(--ink)}
.chat-orb{position:relative;flex:none;width:132px;height:132px;border-radius:50%;overflow:hidden;isolation:isolate;
background:radial-gradient(circle at 50% 50%,#fff3e3 0%,#ffd8b4 45%,#ffbd96 72%,#fbd3cd 100%);
box-shadow:0 18px 44px rgba(240,124,30,.28),0 0 64px rgba(240,124,30,.2);animation:orbBreath 6s ease-in-out infinite}
.chat-orb i{position:absolute;display:block;border-radius:50%;filter:blur(14px)}
.chat-orb i:nth-child(1){width:84px;height:84px;left:-16px;top:4px;background:#f2506b;opacity:.8;animation:orbA 8s ease-in-out infinite}
.chat-orb i:nth-child(2){width:92px;height:92px;right:-20px;bottom:-14px;background:#f07c1e;opacity:.9;animation:orbB 10s ease-in-out infinite}
.chat-orb i:nth-child(3){width:66px;height:66px;left:32px;top:-20px;background:#ffd45a;opacity:.95;animation:orbC 6.5s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(52px,20px) scale(1.18)}70%{transform:translate(22px,62px) scale(.9)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-56px,-26px) scale(1.12)}75%{transform:translate(-18px,-58px) scale(.92)}}
@keyframes orbC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,66px) scale(1.2)}}
@keyframes orbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.msg.loaddots{display:flex;align-items:center}
.ai-load{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px;text-align:center;color:var(--muted);font-size:.84rem;font-weight:700;line-height:1.4}
.ai-orb{position:relative;flex:none;width:46px;height:46px;overflow:hidden;isolation:isolate;background:#f9b36b;border-radius:61% 39% 45% 55%/54% 42% 58% 46%;animation:aiOrbMorph 3.6s ease-in-out infinite,aiOrbTurn 11s linear infinite}
.ai-orb i{position:absolute;display:block;border-radius:50%;filter:blur(6px)}
.ai-orb i:nth-child(1){width:31px;height:31px;left:-7px;top:2px;background:#f2506b;opacity:.85;animation:aiOrbA 4s ease-in-out infinite}
.ai-orb i:nth-child(2){width:33px;height:33px;right:-8px;bottom:-6px;background:#f07c1e;opacity:.9;animation:aiOrbB 5s ease-in-out infinite}
.ai-orb i:nth-child(3){width:23px;height:23px;left:12px;top:-8px;background:#ffd45a;opacity:.95;animation:aiOrbA 3.2s ease-in-out infinite reverse}
@keyframes aiOrbMorph{0%,100%{border-radius:61% 39% 45% 55%/54% 42% 58% 46%;scale:1 .96}33%{border-radius:39% 61% 62% 38%/42% 61% 39% 58%;scale:.95 1.04}66%{border-radius:57% 43% 38% 62%/62% 38% 60% 40%;scale:1.05 .94}}
@keyframes aiOrbTurn{to{transform:rotate(360deg)}}
@keyframes aiOrbA{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,10px)}}
@keyframes aiOrbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-10px)}}
@media (prefers-reduced-motion:reduce){.ai-orb,.ai-orb i{animation:none}}
.mini-orb{flex:none;width:20px;height:20px;margin-right:10px;border-radius:50%;background:conic-gradient(from 0deg,#f2506b,#ffd45a,#f07c1e,#f2506b);box-shadow:0 0 12px rgba(240,124,30,.45);animation:orbSpin 1.4s linear infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
/* messages pop in from their own side (user: bottom-right, assistant: bottom-left) */
.chatbox .msg{animation:msgPop .34s cubic-bezier(.2,.9,.3,1.25) both;transform-origin:0 100%}
.chatbox .msg.user{transform-origin:100% 100%}
.chatbox .msg.chat-review{transform-origin:50% 0}
@keyframes msgPop{from{opacity:0;transform:translateY(12px) scale(.86)}to{opacity:1;transform:none}}
.chatin-card{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:10px 12px 8px;box-shadow:var(--shadow);transition:border-color .15s}
.chatin-card:focus-within{border-color:var(--orange)}
.chatin-card textarea{display:block;width:100%;min-height:44px;max-height:180px;box-sizing:border-box;padding:8px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;
resize:none;overflow-y:auto;font-size:max(16px,1rem);line-height:1.45;color:var(--ink)}
.chatin-card textarea:focus{border:0;box-shadow:none;outline:none}
.chatin-bar{display:flex;align-items:center;gap:10px;margin-top:2px}
.chat-plus,.chat-sendbtn{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;font-family:inherit;cursor:pointer;transition:transform .12s,opacity .15s}
.chat-plus{background:var(--orange-soft);color:var(--ink);font-size:1.35rem}
.chat-sendbtn{position:relative;display:block;padding:0;background:var(--dark);color:var(--cream);font-size:0} /* the word "Send" stays for screen readers; the arrow is drawn here */
.chat-sendbtn::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="dark"] .chat-sendbtn{background:var(--sel-bg);color:var(--sel-fg)}
.chat-plus:hover:not(:disabled),.chat-sendbtn:hover:not(:disabled){transform:scale(1.06)}
.chat-plus:disabled,.chat-sendbtn:disabled{opacity:.45;cursor:default}
.chat-plus:focus-visible,.chat-sendbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.chat-sendbtn.signin{width:auto;padding:0 18px;border-radius:999px;display:inline-block;font-size:.88rem;font-weight:800;line-height:44px}
.chat-sendbtn.signin::before{display:none}
.chat-bar-note{flex:1;min-width:0;font-size:.74rem;font-weight:700;color:var(--muted);line-height:1.3}
.chat-review .rvdd{flex:1 1 130px;min-width:0;display:block}
.chat-review .rvdd .su-ddbtn{position:relative;width:100%;box-sizing:border-box;min-height:40px;padding:8px 30px 8px 12px;text-align:left}
.chat-review .rvdd .su-ddbtn:after{position:absolute;right:12px;top:50%;float:none;transform:translateY(-50%)}
@media (max-width:640px){
.chat-empty{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;min-height:0;padding:14px 2px 18px}
.chat-center{grid-column:1 / -1;grid-row:1}
.chatin-card{margin-top:6px}
.chat-note-lim{display:none}
.calmode small{display:none}
.calmode{padding:10px 11px;min-height:48px;justify-content:center}
.chat-acts.left{grid-column:1;grid-row:3}
.chat-acts.right{grid-column:2;grid-row:3}
.chat-act{min-height:44px;padding:8px 12px 8px 10px;gap:7px}
.chat-act b{overflow:hidden;text-overflow:ellipsis}
.chat-acts{gap:20px;padding-top:0}
.chat-acts.left .chat-act:nth-child(n),.chat-acts.right .chat-act:nth-child(n){margin-left:0;margin-right:0}
.chat-act b{font-size:.78rem}
.chat-act>i{font-size:1.15rem}
.chat-orb{width:96px;height:96px}
.chat-orb i{filter:blur(11px)}
.chat-greet{grid-row:2;margin-bottom:10px;font-size:.95rem;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){.chat-orb,.chat-orb i,.mini-orb,.chatbox .msg{animation:none}.chat-empty,.chat-plus,.chat-sendbtn,.chat-act{transition:none;animation:none}}
.calmodes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:12px}
.calmode{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:var(--card);transition:border-color .15s,background .15s}
.calmode input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.calmode b{font-size:.88rem;font-weight:900;color:var(--ink);line-height:1.25}
.calmode small{font-size:.74rem;font-weight:700;color:var(--muted);line-height:1.3}
.calmode:hover{border-color:var(--orange)}
.calmode:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
.calmode:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.calmode.rec b::after{content:"Recommended";display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--orange);color:#fff;font-size:.62rem;font-weight:900;vertical-align:2px}
.cmp-warn{position:relative;margin:8px 0;padding:8px 30px 8px 10px;border:1.5px solid var(--orange);border-radius:10px;background:var(--card);font-size:.8rem}
.cmp-warn ul{margin:4px 0 0;padding-left:18px}.cmp-warn .cmp-x{position:absolute;top:4px;right:6px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:.9rem}
.modal.rv-modal{max-width:780px;width:100%}
.rv-body{max-height:62vh;overflow:auto;padding-right:2px}
.rv-sum{padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:.88rem;display:grid;gap:2px}
.rv-attn{color:var(--orange)}
.rv-sec{margin-top:12px}.rv-sh{font-size:.95rem;margin-bottom:4px}.rv-empty{padding:6px 2px}
.rv-kind{margin-top:10px}.rv-kh{font-weight:900;font-size:.82rem;margin-bottom:2px}
.rv-row{display:flex;gap:8px 12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 2px;border-bottom:1.5px solid var(--line)}
.rv-tx{flex:1 1 220px;min-width:0;font-size:.85rem;overflow-wrap:anywhere}.rv-tx small{display:block;color:var(--muted);font-weight:700}
.rv-note{color:var(--orange)!important}.rv-d{font-weight:800;color:var(--muted);margin-right:4px}
.rv-grp{border-bottom:1.5px solid var(--line)}.rv-grp>.rv-row{border-bottom:none}
.rv-more{margin:0 0 6px 10px}.rv-more>summary{cursor:pointer;font-size:.78rem;color:var(--orange);font-weight:800}
.rv-seg{display:flex;flex-wrap:wrap;gap:4px}
.rv-sb{padding:5px 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}
.rv-sb.on{background:var(--orange);border-color:var(--orange);color:#fff}
.rv-chk{display:flex;gap:6px;align-items:center;font-size:.8rem;font-weight:800;white-space:nowrap}.rv-chk input{width:18px;height:18px;accent-color:var(--orange)}
.rv-in{display:block;width:100%;margin-top:4px;padding:6px 9px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:max(16px,.85rem)}
.rv-ed{display:inline-block;margin-left:8px;vertical-align:middle;width:104px}.rv-ed .su-ddbtn{width:100%;padding:3px 9px;font-size:.78rem}
.rv-cov-h{margin:14px 0 6px;font-size:.85rem}.rv-cov-h a{margin-left:8px;color:var(--orange);font-weight:800}
.rv-cov{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.rv-m{display:flex;flex-direction:column;gap:1px;text-align:left;padding:7px 9px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.rv-m b{font-size:.82rem}.rv-m span{font-size:.72rem;font-weight:800}.rv-m small{font-size:.68rem;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.rv-m.rv-read span{color:#2e8b57}.rv-m.rv-check{border-color:var(--orange)}.rv-m.rv-check span{color:var(--orange)}.rv-m.rv-none span{color:var(--muted)}.rv-m.sel{outline:2px solid var(--orange);outline-offset:1px}
.rv-det{margin-top:12px;border-top:1.5px solid var(--line);padding-top:8px}.rv-det>summary{cursor:pointer;font-size:.88rem}
.rv-ov{padding:6px 2px;font-size:.82rem;display:grid;gap:2px}.rv-ovp{margin-top:6px;display:grid;gap:2px}
.rv-foot{margin-top:12px;gap:8px;flex-wrap:wrap}
.rv-acts{display:flex;gap:8px;margin-left:auto;flex-wrap:nowrap}.rv-acts .btn{white-space:nowrap}
.rv-dd{max-width:160px}
.rv-grid{display:block}.rv-src{display:none}
.rv-split .rv-src{display:flex;flex-direction:column;min-width:0;margin-top:14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;max-height:42vh}
@media(min-width:1000px){.rv-split .modal.rv-modal{max-width:1320px}.rv-split .rv-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}.rv-split .rv-src{margin-top:0;max-height:78vh;position:sticky;top:0}.rv-split .rv-body{max-height:56vh}}
.rv-srch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-bottom:1.5px solid var(--line);font-size:.8rem}
.rv-srcnote{padding:6px 10px;font-size:.76rem;color:var(--orange);font-weight:700;border-bottom:1.5px solid var(--line)}
.rv-srcbody{overflow:auto;flex:1;padding:8px;min-height:120px}.rv-srccv{display:block;margin:0 auto;max-width:none}.rv-srcimg{display:block;height:auto}
.rv-srcmsg{padding:8px;font-size:.84rem;display:grid;gap:6px}.rv-pre{margin:0;padding:8px;border-radius:8px;background:var(--cream);white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.8rem;border:1px solid var(--line)}
.rv-pre mark{background:var(--orange-soft);color:var(--ink);padding:0 2px;border-radius:3px}
.rv-link{color:var(--orange);font-weight:800;font-size:.74rem}
.rv-parts{margin-top:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:.85rem}
.rv-check{margin:8px 0;padding:8px 12px;border:1.5px solid var(--orange);border-radius:12px;background:var(--card);font-size:.85rem}
.rv-bar{flex-wrap:wrap}
.cmp-grp{margin-top:12px}.cmp-gh{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:2px}.cmp-gh a{font-weight:800;color:var(--orange)}
.chat-image-preview .chat-pdf-badge{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);font-weight:700;font-size:.8rem;letter-spacing:.04em}
.chat-sent-file{font-size:.82rem;opacity:.85;margin-bottom:4px;overflow-wrap:anywhere}
.chat-image-preview .chat-image-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.82rem}
.msg .chat-sent-image{display:block;max-width:180px;max-height:180px;object-fit:contain;border-radius:9px;margin-bottom:6px}
/* ---------- settings (shared bits used by the Setup Hub prefs pages) ---------- */
.seth{font-size:1.18rem;font-weight:900;margin-bottom:2px}
.setsub{color:var(--muted);font-size:.84rem;font-weight:700;margin:0 0 16px;line-height:1.45}
.setrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.setrow>div:first-child{flex:1}
.setrow>div:first-child b{font-weight:900}
/* item-types guide (welcome dialog + Setup help) */
.helptypes{display:flex;flex-direction:column;gap:12px}
.htrow{display:flex;gap:13px;align-items:flex-start}
.htico{flex:none;width:42px;height:42px;border-radius:13px;background:var(--bg);
display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.httx{min-width:0}
.htname{font-weight:900;font-size:1.02rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.htwhere{font-weight:800;font-size:.68rem;color:var(--orange);background:var(--orange-soft);
padding:2px 8px;border-radius:999px;white-space:nowrap}
.htdesc{color:var(--muted);font-weight:700;font-size:.9rem;line-height:1.42;margin-top:3px}
.setrow .muted{font-size:.82rem;font-weight:700;margin-top:2px}
.fspan{grid-column:1/-1}
.addrow{margin-top:12px}
/* on/off toggle */
.toggle{flex:none;width:50px;height:28px;border-radius:999px;border:none;background:var(--line);cursor:pointer;position:relative;transition:background .15s}
.toggle .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle.on{background:var(--orange)}
.toggle.on .knob{left:25px}
/* palette-swatch strip (palStrip — Setup Hub tag/class editors) */
.palrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.palsw{width:26px;height:26px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.palsw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}
/* appearance: done-animation picker + background swatches */
.animrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.animopt{border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-weight:800;
font-size:.9rem;line-height:1.2;padding:9px 16px;border-radius:12px;cursor:pointer}
.animopt.on{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-soft)}
.bgsws{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* glass nav-bar controls (Appearance): labelled sliders with a live value read-out */
.glassctl{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.glassrow{display:flex;align-items:center;gap:12px}
.glasslbl{flex:none;width:96px;font-weight:800;font-size:.9rem;color:var(--ink)}
.glassrow input[type=range]{flex:1;min-width:0;accent-color:var(--orange);cursor:pointer;height:22px}
.glassval{flex:none;width:52px;text-align:right;font-weight:900;font-size:.85rem;color:var(--muted);
font-variant-numeric:tabular-nums}
/* rectangular accent add-button (HW + lesson rows) */
.addbtn{flex:none;border:none;cursor:pointer;background:var(--orange);color:#fff;font-family:inherit;font-weight:900;
border-radius:14px;padding:0 16px;height:44px;min-width:48px;font-size:1.5rem;line-height:1;
box-shadow:0 6px 18px rgba(240,124,30,.35)}
.addbtn:active{transform:scale(.96)}
.rowdel{flex:none;border:none;background:none;color:var(--danger);font-weight:900;font-size:1rem;cursor:pointer;padding:4px 6px}
/* API key row + test status */
.keyrow{display:flex;gap:8px;align-items:center}
.keyrow input{flex:1;min-width:0}
.keystat{font-size:.84rem;font-weight:800}
.keystat.ok{color:#2f9e54}
.keystat.bad{color:var(--danger)}
[data-theme="dark"] .keystat.ok{color:#5ad08a}
/* data tools grid */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.setgrid .btn{justify-content:flex-start}
.setupck{display:flex;flex-direction:column;gap:5px}
.ckrow{font-size:.95rem;font-weight:700;color:var(--ink)}
.setgrid.imp{grid-template-columns:repeat(5,1fr);gap:7px}
@media(max-width:560px){.setgrid.imp{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
.impbtn{justify-content:center;white-space:nowrap;font-size:.88rem;font-weight:800;color:var(--ink);
background:rgba(0,0,0,.05);box-shadow:none;padding:10px 8px}
[data-theme="dark"] .impbtn{background:rgba(255,255,255,.08)}
.imreplace{align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:var(--ink);margin-top:12px;cursor:pointer}
.imreplace input{width:18px;height:18px;flex:0 0 auto}
.impreview{background:rgba(0,0,0,.04);border-radius:12px;padding:10px 12px;color:var(--ink)}
.impreview:empty{display:none}
[data-theme="dark"] .impreview{background:rgba(255,255,255,.06)}
/* danger zone */
.dangerzone{margin-top:28px;border:1.5px solid rgba(217,82,82,.4);border-radius:16px;padding:6px 16px 8px;
background:rgba(217,82,82,.05)}
.dangerzone h3{color:var(--danger);font-size:.95rem;font-weight:900;margin:12px 0 2px}
.dangerzone .setrow{border-bottom-color:rgba(217,82,82,.2)}
.btn.dangerbtn{background:var(--danger);color:#fff;box-shadow:none;flex:none}
/* ===== Setup Hub (Stage A) ===== */
.su-hub{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start;margin-top:8px}
@media(max-width:760px){.su-hub{grid-template-columns:1fr}}
.su-side{display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:18px;padding:8px;box-shadow:var(--shadow);position:sticky;top:var(--pin-top)}
/* collapsed sidebar → icon-only rail (toggle button; labels become tooltips) */
.su-hub.side-collapsed{grid-template-columns:56px 1fr}
.su-side.collapsed{padding:8px 5px}
.su-side.collapsed .su-navlbl,.su-side.collapsed .su-navgroup{display:none}
.su-side.collapsed .su-navbtn{justify-content:center;padding:10px 0;gap:0}
/* the toggle is a bare glyph riding the first group-header row ("Setup").
Kept in normal flex flow (align-self + negative margin) — NOT absolute:
Safari mis-hit-tests absolutely positioned children of a stuck sticky
element, which made the button unclickable after scrolling. */
.su-sidecol{align-self:flex-end;margin:0 2px -28px 0;position:relative;z-index:5;
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;font-size:1.02rem;padding:0}
.su-sidecol:hover{background:var(--line);color:var(--ink)}
.su-side.collapsed .su-sidecol{align-self:center;margin:2px 0 4px}
@media(max-width:760px){.su-side:empty{display:none} #view-setup>.backbtn{display:none}}
/* mobile Setup: vertical menu instead of the desktop sidebar */
.su-moblist{display:flex;flex-direction:column;gap:6px}
/* one card per group, rows divided by hairlines (iOS Settings style) */
.su-mobcard{background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.su-mobgrp{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px 6px 2px;opacity:.75}
.su-mobgrp:first-child{padding-top:0}
.su-mobgrp.admingrp{color:var(--danger)}
.su-mobrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
border:none;border-top:1px solid var(--line);padding:12px 14px;min-height:52px;cursor:pointer;font-family:inherit;
font-weight:800;font-size:.95rem;color:var(--ink)}
.su-mobrow:first-child{border-top:none}
.su-mobrow:active{background:var(--line)}
.su-mobgo{color:var(--muted);font-size:1.1rem}
.su-mobrow .su-navlbl{flex:1}
.su-mobnote{margin-top:16px;background:var(--orange-soft);color:var(--dark);border-radius:14px;
padding:13px 15px;font-size:.85rem;font-weight:700;line-height:1.5}
.su-mobback{margin-bottom:12px}
.su-navbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;
color:var(--muted);font-family:inherit;font-weight:800;font-size:.86rem;padding:10px 11px;border-radius:12px;cursor:pointer;min-width:0}
.su-navbtn:hover{background:var(--line)}
.su-navbtn.on{background:var(--sel-bg);color:var(--sel-fg)}
.su-navi{font-size:1.05rem;flex:none;display:flex;align-items:center}
.suico{width:1.4em;height:1.4em;vertical-align:middle;flex:none}
.su-navgroup{font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px 11px 4px;opacity:.7}
.su-navgroup:first-of-type{padding-top:4px;padding-right:40px}
@media(max-width:760px){.su-navgroup{display:none}}
.su-navlbl{flex:1;min-width:0;line-height:1.2;white-space:normal;overflow-wrap:break-word}
@media(max-width:760px){.su-navlbl{white-space:nowrap}}
/* icon tile colour = the section's group: Teaching setup orange · School dates blue · Duties & lesson changes teal ·
Preferences purple · Help & tools neutral · Admin red. (Overrides the fill baked into each SU_ICO svg.) */
.su-navi .suico rect{fill:#9a958f}
.su-navi[data-g="p"] .suico rect{fill:#9b85c9}
.su-navi[data-g="t"] .suico rect{fill:#e8893f}
.su-navi[data-g="d"] .suico rect{fill:#6f9fd0}
.su-navi[data-g="u"] .suico rect{fill:#3fa08c}
.su-navi[data-g="a"] .suico rect{fill:#c8584b}
.su-main{min-width:0}
.su-head{margin:2px 2px 16px}
.su-head h2{font-size:1.3rem;font-weight:900;margin-bottom:4px}
.su-head p{font-size:.85rem;line-height:1.5}
.su-head code{background:var(--line);padding:1px 6px;border-radius:6px;font-size:.85em;font-weight:800}
/* multi-user: share + admin */
.mu-tablewrap{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:auto}
.mu-table{width:100%;border-collapse:collapse;font-size:.88rem}
.mu-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:900;padding:12px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.mu-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.mu-table tr:last-child td{border-bottom:none}
.mu-pill{font-size:.66rem;font-weight:900;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.mu-pill.on{background:rgba(40,160,80,.16);color:#1f8a4c}
.mu-pill.off{background:rgba(210,60,60,.16);color:var(--danger)}
.mu-pill.admin{background:rgba(45,140,160,.16);color:#1d6c7a}
.mu-pill.sched{background:rgba(237,161,0,.18);color:#96660a}
[data-theme="dark"] .mu-pill.sched{color:#eecb7c}
/* checklist */
.su-checklist{display:flex;flex-direction:column;gap:8px}
.su-ckrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:var(--shadow)}
.su-ckrow:hover{border-color:var(--orange)}
.su-ckrow.done{opacity:.72}
.su-ckmark{font-size:1.15rem;flex:none}
.ckico{width:1.25em;height:1.25em;vertical-align:-.24em;display:inline-block;flex:none}
.su-cktxt{flex:1;font-size:.92rem;font-weight:800}
.su-ckgo{color:var(--muted);font-size:1.2rem;font-weight:900}
/* table editor */
.su-tablewrap{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:auto}
.su-table{width:100%;border-collapse:collapse;font-size:.88rem}
.su-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
font-weight:900;padding:12px 12px 8px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.su-table td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.su-table tr:last-child td{border-bottom:none}
.su-in{width:100%;padding:9px 11px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);
color:var(--ink);font-family:inherit;font-size:max(16px,.88rem);font-weight:700}
.su-in:focus{outline:none;border-color:var(--orange)}
.su-in-sm{max-width:96px;font-weight:900}
.su-in-md{max-width:150px}
.su-lvl{display:inline-block;background:var(--line);color:var(--muted);font-weight:900;font-size:.78rem;padding:4px 9px;border-radius:999px}
.su-pal{flex-wrap:wrap;gap:5px}
.su-rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.su-saverow{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.su-saverow .warn{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(240,124,30,.35)}
/* advanced / rollback */
.su-rollgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.su-rollpick{font-family:inherit;font-weight:900;font-size:.84rem;color:var(--ink);cursor:pointer;
background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;
box-shadow:var(--shadow);transition:all .12s}
.su-rollpick:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.su-rollpick:active{transform:translateY(0)}
.su-rolllist{margin-top:14px}
.su-rollhd{font-weight:900;font-size:.85rem;margin-bottom:8px}
.su-rollrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.85rem;font-weight:700}
.su-rollrow:last-child{border-bottom:none}
.su-rollbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;
font-family:inherit;font-weight:800;font-size:.85rem;color:var(--ink);cursor:pointer}
.su-rollbtn:hover{border-color:var(--orange)}
.su-rollwhen{flex:1;min-width:0}
.su-rollgo{flex:none;color:var(--orange);font-weight:900}
.su-rolltag{font-size:.62rem;font-weight:900;text-transform:uppercase;background:var(--orange-soft);color:var(--orange);padding:2px 6px;border-radius:999px;margin-left:4px}
.su-rollgrid + #suRollList:empty{display:none}
.card + .card{margin-top:14px}
/* stubs + mobile */
.su-stub{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:34px 20px;text-align:center}
.su-stubic{font-size:2.4rem;margin-bottom:10px}
.su-stub p{margin:4px 0;font-size:.9rem;font-weight:700}
.su-mobwarn{background:var(--orange-soft);color:var(--dark);border-radius:14px;padding:12px 14px;font-size:.84rem;font-weight:700;line-height:1.5;margin-bottom:12px}
.su-rocards{display:flex;flex-direction:column;gap:6px}
.su-rocard{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 13px;font-size:.9rem}
/* tabs (bell schedules) */
.su-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.su-tab{border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;font-weight:900;
font-size:.85rem;padding:8px 16px;border-radius:999px;cursor:pointer}
.su-tab.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-bg)}
.su-empty{opacity:.5}
/* order up/down buttons */
.su-ord{display:flex;gap:3px}
.su-ordb{width:26px;height:26px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);
border-radius:8px;cursor:pointer;font-size:.7rem;font-weight:900;line-height:1}
.su-ordb:disabled{opacity:.3;cursor:default}
.su-ordb:not(:disabled):hover{border-color:var(--orange);color:var(--orange)}
.su-table select.su-in{cursor:pointer}
/* timetable grid */
.su-gridtools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;font-size:.8rem;font-weight:800}
.su-mini{padding:6px 8px;border-radius:9px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-weight:800;font-size:.85rem;cursor:pointer}
.su-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.su-grid th.su-daycol{text-align:center;width:64px}
.su-grid th.su-rowh{text-align:left;color:var(--ink);font-weight:900;font-size:.82rem;white-space:nowrap;background:var(--card);position:sticky;left:0}
.su-grid td{padding:4px 5px}
.su-gin{width:100%;min-width:48px;padding:7px 6px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);
color:var(--ink);font-family:inherit;font-size:max(16px,.85rem);font-weight:800;text-align:center}
.su-gin:focus{outline:none;border-color:var(--orange)}
.su-gin::placeholder{color:var(--muted);opacity:.5}
.su-grip{cursor:grab;color:var(--muted);font-size:1.15rem;text-align:center;user-select:none;touch-action:none}
.su-grip:active{cursor:grabbing}
tr.dragging{background:var(--orange-soft);box-shadow:0 6px 16px rgba(0,0,0,.18)}
tr.dragging td{border-bottom-color:transparent}
tr.dragging .su-in{background:transparent;border-color:transparent}
.su-colsw{display:inline-block;width:40px;height:20px;border-radius:7px;border:1.5px solid rgba(0,0,0,.08);vertical-align:middle}
.su-hint{font-size:.78rem;color:var(--muted);font-weight:700;margin:0 2px 10px;line-height:1.5}
/* spreadsheet grid */
#suGridWrap{position:relative;outline:none}
#suGridWrap:focus{box-shadow:0 0 0 2px var(--orange) inset;border-radius:16px}
.su-grid{user-select:none}
.su-grid th.su-corner{width:90px;background:var(--card);position:sticky;left:0;z-index:2}
.su-grid td.su-xc{padding:0;border:1px solid var(--line);height:38px;min-width:54px;cursor:cell;position:relative}
.su-xv{display:block;padding:8px 6px;text-align:center;font-weight:800;font-size:.88rem;min-height:21px;white-space:nowrap;overflow:hidden}
.su-grid td.su-seld{background:rgba(240,124,30,.10)}
.su-grid td.su-active{box-shadow:0 0 0 2px var(--orange) inset}
.su-grid td.su-fillpv{background:rgba(240,124,30,.22)}
.su-xin{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;border:none;margin:0;padding:8px 6px;
text-align:center;font-family:inherit;font-weight:800;font-size:max(16px,.88rem);background:var(--card);color:var(--ink);z-index:4}
.su-xin:focus{outline:2px solid var(--orange);outline-offset:-2px}
.su-fill{position:absolute;width:10px;height:10px;background:var(--orange);border:1.5px solid var(--card);border-radius:2px;cursor:crosshair;z-index:5}
.su-grid td.su-vc{cursor:default}
.su-draftbar{background:var(--orange-soft);color:var(--dark);border-radius:14px;padding:11px 14px;margin-bottom:12px;
font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.su-draftbar .btn{margin-left:2px}
/* calendar editor */
/* Cycles card sits in the side pane above the day editor */
.su-fillcard{margin-bottom:12px}
.su-fillrow{display:flex;gap:10px;align-items:flex-end;margin-bottom:10px}
/* flight-booking style From/To chips — tap to arm, then tap days on the grid */
.su-datechip{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:11px;
border:2px solid var(--line);background:transparent;font:inherit;font-size:.86rem;color:var(--muted);cursor:pointer}
.su-datechip.set{color:var(--ink);font-weight:700}
.su-datechip.armed{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);color:var(--ink)}
/* temporary range highlight on the month grid while the Cycles panel is open */
.calcell.rangesel{background:var(--orange-soft)!important}
.calcell.rangesel.rangeend{outline:2.5px solid var(--orange);outline-offset:-2.5px}
.su-fillfld{flex:1;min-width:0}
.su-fillfld label{display:block;margin-bottom:3px;font-size:.74rem;color:var(--muted);font-weight:700}
.su-fillfld textarea{width:100%}
.su-dow{font-size:.68rem;color:var(--muted);font-weight:800;margin-top:2px;padding-left:2px}
.su-tyhint{font-size:.66rem;color:var(--danger);font-weight:800;margin-top:2px}
/* editor toolbars + prominent add button */
.su-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.su-add{background:var(--orange-soft);color:var(--orange);box-shadow:none;border:1.5px solid var(--orange);font-weight:900}
.su-add:hover{background:var(--orange);color:#fff}
.su-clash{font-size:1rem}
/* ---- month-grid school calendar (Phase 1) ---- */
/* month nav: sticky glass pill riding just above the grid while the page scrolls */
.calgrid-tools{align-items:center;gap:6px;position:sticky;top:var(--pin-top);z-index:40;
padding:6px 10px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);
width:max-content;max-width:100%;margin-bottom:8px}
/* shares the app-wide Liquid Glass recipe (chrome.html) via the user-tunable --glass-* vars */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.calgrid-tools{background:color-mix(in srgb,var(--card) var(--glass-opacity,52%),transparent);
-webkit-backdrop-filter:blur(var(--glass-blur,20px)) saturate(var(--glass-sat,1.7));
backdrop-filter:blur(var(--glass-blur,20px)) saturate(var(--glass-sat,1.7))}
}
.calgrid-mlabel{font-weight:900;font-size:1.05rem;min-width:150px;text-align:center}
.calgrid{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.calgrid-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--line);gap:1px}
.calgrid-head>div{background:var(--card);text-align:center;font-weight:800;font-size:.72rem;color:var(--muted);padding:6px 0}
.calgrid-body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line)}
.calcell{background:var(--card);min-height:124px;min-width:0;padding:7px 8px 9px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative;overflow:hidden;transition:background .12s}
.calcell:hover{background:var(--orange-soft)}
.calcell.oth{background:color-mix(in srgb,var(--card) 60%,var(--muted) 10%);opacity:.55}
.calcell.wknd{background:color-mix(in srgb,var(--card) 86%,var(--muted) 14%)}
.calcell.hol{background:color-mix(in srgb,var(--card) 70%,var(--muted) 22%)}
.calcell.today{box-shadow:inset 0 0 0 2px var(--orange)}
.calcell-top{display:flex;align-items:center;justify-content:space-between}
.calnum{font-weight:800;font-size:.95rem;color:var(--ink)}
.calcell.oth .calnum{color:var(--muted)}
.calcyc{font-weight:900;font-size:.74rem;background:var(--ink);color:var(--card);border-radius:6px;padding:0 6px;line-height:1.35}
.calcyc .cyn{font-size:1em;font-style:normal;opacity:.72;margin-left:2px}
.calhol{font-size:.64rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.calchip{font-size:.64rem;font-weight:800;border-radius:5px;padding:1px 5px;align-self:flex-start;line-height:1.4}
.caltype{background:var(--a0bg,#fde2e0);color:var(--a0,#c0392b)}
.calbell{background:var(--schoolbg,#e6effa);color:var(--school,#2d6cb5)}
.calev{font-size:.66rem;font-weight:700;background:var(--orange-soft);color:var(--orange);border-radius:5px;padding:1px 5px;line-height:1.3;cursor:grab;max-width:100%;overflow:hidden;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;touch-action:none;user-select:none}
.calev:active{cursor:grabbing}
.calev.dragging{opacity:.35}
.calcell.drop-hot{background:var(--orange-soft);box-shadow:inset 0 0 0 2px var(--orange)}
.caldrag{position:fixed;z-index:99999;transform:translate(-50%,-130%);pointer-events:none;font-size:.7rem;font-weight:800;
background:var(--orange);color:#fff;border-radius:6px;padding:3px 8px;box-shadow:0 6px 16px rgba(0,0,0,.25);white-space:nowrap}
.su-daychk{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;color:var(--ink);margin:0;cursor:pointer}
.su-daychk input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--orange)}
.su-dayevs{margin-top:12px;border-top:1.5px solid var(--line);padding-top:10px}
.su-pendbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:9px 12px;border-radius:12px;background:var(--orange-soft);color:var(--orange);font-size:.85rem;border:1px dashed var(--orange)}
.su-pendbar span{flex:1;min-width:180px}
.su-pendtag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:.68rem;font-weight:700;border:1px dashed var(--orange);color:var(--orange);background:var(--orange-soft)}
.calev.pending{border:1px dashed var(--orange);background:transparent;opacity:.9}
.su-evrow.pending{opacity:.92}
.su-evrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;font-size:.86rem}
.su-evadd{display:flex;gap:8px;align-items:center;margin-top:6px}
.su-evadd .su-in{flex:1}
@media(max-width:560px){
.calcell{min-height:84px;padding:4px 4px 5px}
.calnum{font-size:.74rem}.calcyc{font-size:.66rem;padding:0 4px}
.calchip,.calev,.caltlabel{font-size:.58rem}
.calgrid-head>div{font-size:.6rem}
}
/* ===== redesigned calendar editor (2026 Figma pass) ===== */
/* today = orange ring on the number, not the whole cell */
.calcell.today{box-shadow:none}
.calnum.tdy{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;
border-radius:999px;background:var(--orange);color:#fff;font-size:.8rem}
/* type / bell colour tints + left stripe */
.calcell.cal-t-exam{background:color-mix(in srgb,var(--danger) 9%,var(--card));border-left:3px solid var(--danger)}
.calcell.cal-t-post{background:color-mix(in srgb,var(--orange) 9%,var(--card));border-left:3px solid var(--orange)}
.calcell.cal-t-other{background:color-mix(in srgb,var(--muted) 10%,var(--card));border-left:3px solid color-mix(in srgb,var(--muted) 60%,var(--card))}
.calcell.cal-t-bell{border-left:3px solid var(--school)}
.calcell.cal-t-half{border-left:3px solid var(--a2)}
.calcell.hol{border-left:0}
.calcell.sel{box-shadow:inset 0 0 0 2px var(--orange);z-index:1} /* selected day ring (edit mode) */
/* small uppercase type label */
.caltlabel{font-size:.56rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;line-height:1;align-self:flex-start}
.caltlabel.exam{color:var(--a0)} .caltlabel.post{color:var(--orange)}
.caltlabel.other,.caltlabel.bell{color:var(--muted)}
/* legend */
.callegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;padding:0 2px}
.lgi{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted);font-weight:700}
.lgd{width:9px;height:9px;border-radius:999px;flex:none}
.lg-cyc{background:var(--ink)} .lg-exam{background:var(--danger)} .lg-post{background:var(--orange)}
.lg-bell{background:var(--school)} .lg-ev{background:color-mix(in srgb,var(--orange) 65%,transparent)}
.lgstripe{width:13px;height:13px;border-radius:3px;border-left:3px solid var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--card));flex:none}
/* calendar EDIT mode uses the full width — the side panel needs the room.
.calside only exists while editing the calendar, so this is exclusive to it. */
@media(min-width:768px){ .wrap:has(.calside){max-width:1500px} }
/* calendar + side panel layout */
.calwrap{display:flex;gap:16px;align-items:flex-start}
.calmain{flex:1;min-width:0}
.calside{width:300px;flex:0 0 300px;position:sticky;top:calc(var(--pin-top) + 3px)}
.calside-card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px 16px 18px;box-shadow:var(--shadow)}
.calside-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 22px;color:var(--muted);box-shadow:none}
.calside-emoji{font-size:1.7rem;opacity:.4}
@media(max-width:767px){ .calwrap{display:block} .calside{display:none}
/* the view-mode overview list is read-only → safe on phones: stack it under the grid */
.calside.list{display:block;width:auto;flex:none;position:static;margin-top:14px} }
/* save/actions row moved to the TOP of each editor (under the heading/tabs) */
.su-saverow.top{margin:2px 0 14px}
#view-setup .su-saverow.top{margin-top:2px}
/* consolidated action bar (top of the page) — labelled groups, wraps to multiple rows */
.su-btnbar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;margin:2px 0 14px}
.su-btngrp{display:flex;flex-direction:column;gap:5px}
.su-btngrp-lab{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.su-btngrp-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.su-btnbar #suCalMsg{align-self:center;font-size:.82rem}
.su-toolsopt .ti{margin-right:6px;font-size:1.05em;vertical-align:-2px}
.callegend-fold{margin-top:8px}
.callegend-fold>summary{cursor:pointer;font-size:.8rem;font-weight:800;color:var(--muted);padding:4px 2px;list-style:none}
.callegend-fold>summary::-webkit-details-marker{display:none}
.callegend-fold>summary::before{content:"▸ "}
.callegend-fold[open]>summary::before{content:"▾ "}
.su-btnbar .ghostb.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-bg)}
/* view-mode overview list (events / special ttb / holidays) */
.su-listtog{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin:0 0 4px;cursor:pointer;user-select:none}
.su-listtog input{width:17px;height:17px;min-width:0;flex:0 0 auto;margin:0;padding:0;accent-color:var(--orange)}
.su-callist{max-height:68vh;overflow:auto;display:flex;flex-direction:column;gap:1px;margin-top:6px}
.su-callist-row{display:flex;gap:8px;align-items:baseline;padding:7px 8px;border-radius:10px;cursor:pointer}
.su-callist-row:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
/* day flash on the grid while scrolling the overview (2s, then fades) */
.calcell{transition:background .35s}
.calcell.hlday{background:var(--orange-soft)!important;outline:2px solid var(--orange);outline-offset:-2px}
.su-callist-date{flex:0 0 62px;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.su-callist-title{flex:1;font-size:.85rem;min-width:0;overflow-wrap:anywhere}
/* drag handle between the grid and the side pane */
.calsplit{flex:0 0 6px;align-self:stretch;cursor:col-resize;touch-action:none;position:relative;margin:0 -5px}
.calsplit::after{content:'';position:absolute;left:2px;right:2px;top:0;bottom:0;border-radius:2px;background:var(--line);opacity:0;transition:opacity .15s}
.calsplit:hover::after{opacity:1}
@media(max-width:767px){.calsplit{display:none}}
.su-callist-row .caltlabel{font-size:.62rem;align-self:center}
/* day editor (shared by side panel + modal) */
.ced-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.ced-dow{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ced-date{font-size:1.15rem;font-weight:900;color:var(--ink);margin-top:1px}
/* fields */
.su-fld{margin-top:14px}
.su-flab{display:block;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:7px}
.su-flab em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:700;opacity:.8}
.su-fld.dim{opacity:.4;pointer-events:none}
.su-btnrow{display:flex;gap:6px;flex-wrap:wrap}
/* cycle-day A–G: always one row of 7 equal buttons */
.su-cycrow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.su-cycrow .su-pill{min-width:0;flex:none;padding-left:0;padding-right:0}
.su-pill{flex:1;min-width:34px;padding:8px 4px;border-radius:11px;border:2px solid var(--line);background:transparent;
color:var(--muted);font-weight:800;font-size:.85rem;cursor:pointer;transition:.12s}
.su-pill.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.su-pill:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line));color:var(--ink)}
.su-pill.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-bg)}
.su-pill.b-special.on{background:var(--schoolbg);color:var(--school);border-color:transparent}
.su-pill.b-halfday.on{background:var(--a2bg);color:var(--a2);border-color:transparent}
.su-pill:disabled{cursor:default}
/* day-type grid */
.su-typegrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.su-typebtn{padding:9px 10px;border-radius:11px;border:2px solid var(--line);background:transparent;
color:var(--muted);font-weight:800;font-size:.82rem;cursor:pointer;text-align:left;transition:.12s}
.su-typebtn:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line));color:var(--ink)}
.su-typebtn.t-test.on{background:var(--a0bg);color:var(--a0);border-color:transparent}
.su-typebtn.t-exam.on{background:var(--danger);color:#fff;border-color:transparent}
.su-typebtn.t-postexam.on{background:var(--orange-soft);color:var(--orange);border-color:transparent}
.su-typebtn.t-others.on{background:color-mix(in srgb,var(--muted) 18%,var(--card));color:var(--ink);border-color:transparent}
/* holiday toggle card */
.su-holcard{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:2px solid var(--line);
background:transparent;cursor:pointer;transition:.12s}
.su-holcard:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
.su-holcard.on{background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 45%,transparent)}
.su-holemo{font-size:1.2rem;opacity:.4;transition:.12s}
.su-holcard.on .su-holemo{opacity:1}
.su-holtxt{flex:1;min-width:0;line-height:1.25}
.su-holtxt b{display:block;font-size:.86rem;color:var(--ink)}
.su-holtxt span{font-size:.74rem;color:var(--muted)}
.su-switch{width:42px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,var(--card));flex:none;position:relative;transition:.18s}
.su-switch.on{background:var(--orange)}
.su-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.18s}
.su-switch.on i{left:21px}
/* collapsible study-leave card */
.su-slcard{padding:0!important;overflow:hidden}
.su-slhead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;
background:transparent;border:0;cursor:pointer;font:inherit;text-align:left}
.su-sltitle{font-size:1.05rem;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.su-slbadge{font-size:.78rem;font-weight:800;color:var(--orange);background:var(--orange-soft);padding:2px 9px;border-radius:999px}
/* no date yet → the WHOLE card goes hollow + dashed: an optional to-do, not a live rule */
.su-slbadge.empty{background:transparent;color:var(--muted);border:1.5px dashed var(--muted);font-weight:700;opacity:.85}
.su-slcard.empty{background:transparent;border:1.5px dashed var(--muted);box-shadow:none!important;opacity:.92}
.su-slcard.empty .su-sltitle{color:var(--muted)}
.su-slchev{color:var(--muted);transition:transform .18s}
.su-slbody{padding:2px 18px 18px;border-top:1.5px solid var(--line)}
/* unified day "Events" list (all-day note + timed events) */
.calev.allday{background:color-mix(in srgb,var(--orange-soft) 58%,var(--card));color:var(--orange)}
.su-evtime{flex:none;min-width:44px;font-weight:800;color:var(--orange);font-size:.82rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* editing badge + month nav group */
.seditbadge{font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);
background:var(--orange-soft);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:8px}
.calnavgrp{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:3px 4px}
.calnavb{width:28px;height:28px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-size:1.1rem;font-weight:900;cursor:pointer;line-height:1}
.calnavb:hover{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--ink)}
.calnavgrp .calgrid-mlabel{min-width:140px}
/* ============================================================================
Settings redesign — consistency pass (scoped to the Setup hub view).
One vertical rhythm, slightly larger text, one button system, no shadows,
pill corners matching the bottom navigation bar.
========================================================================== */
#view-setup{line-height:1.55}
/* Larger, uniform type across every settings page */
#view-setup .su-head h2{font-size:1.4rem;line-height:1.3;margin-bottom:6px}
#view-setup .su-head p{font-size:.92rem;line-height:1.55;margin-top:0}
#view-setup .seth{font-size:1.12rem;margin-bottom:6px;line-height:1.3}
#view-setup .setsub{font-size:.92rem;line-height:1.55;margin:0 0 14px}
#view-setup label{font-size:.92rem}
#view-setup .setrow{padding:14px 0;gap:14px}
#view-setup .setrow>div:first-child b{font-size:1rem}
#view-setup .setrow .muted,#view-setup .muted{font-size:.88rem}
#view-setup .card{padding:20px}
#view-setup .card + .card{margin-top:14px}
/* No shadows anywhere in settings (cards, buttons, rows, tables, sidebar) */
#view-setup .card,#view-setup .su-side,#view-setup .su-mobrow,#view-setup .su-ckrow,
#view-setup .su-tablewrap,#view-setup .mu-tablewrap,#view-setup .su-stub,
#view-setup .su-rollpick,#view-setup .su-rocard,
#view-setup .btn,#view-setup .iconbtn{box-shadow:none!important}
/* One button system — pill corners (same radius as the bottom bar), every
button is a real box. Important = orange, secondary = outlined, danger = red. */
#view-setup .btn{border-radius:999px;border:1.5px solid transparent}
#view-setup .btn.primary{background:var(--orange);color:#fff;border-color:var(--orange)}
#view-setup .btn.ghostb{background:var(--card);border-color:var(--line);color:var(--ink)}
#view-setup .btn.ghostb:hover{border-color:var(--orange);color:var(--orange)}
#view-setup .btn.dangerbtn{background:var(--danger);color:#fff;border-color:var(--danger)}
#view-setup .btn.su-add{background:var(--orange-soft);color:var(--orange);border-color:var(--orange)}
#view-setup .btn.su-add:hover{background:var(--orange);color:#fff}
/* a clearly destructive outlined variant (e.g. Stop sharing) */
#view-setup .btn.dangerghost{background:var(--card);border-color:var(--danger);color:var(--danger)}
#view-setup .btn.dangerghost:hover{background:var(--danger);color:#fff}
/* Action rows: buttons always sit together at the foot of their card */
#view-setup .su-saverow,#view-setup .su-toolbar{margin-top:16px;gap:10px}
/* Prominent "signed in" account card */
.su-acct{display:flex;align-items:center;gap:14px}
.su-acct .su-avatar{flex:none;width:48px;height:48px;border-radius:50%;background:var(--orange);
color:#fff;font-weight:900;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.su-acct .su-acctinfo{flex:1;min-width:0}
.su-acct .su-acctinfo .su-acctlbl{font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.su-acct .su-acctinfo .su-acctmail{font-weight:900;font-size:1.02rem;word-break:break-word;line-height:1.3}
/* Admin area — visually set apart from the normal user interface */
.su-adminwrap{border:1.5px solid var(--line);border-radius:18px;padding:16px;background:color-mix(in srgb,var(--muted) 8%,transparent)}
.su-adminbanner{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:900;
text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.su-adminbanner::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.su-navgroup.admingrp{color:var(--danger);opacity:.85}
/* Admin ▸ Issue reports — the inbox rows (setup/feedback.html) */
.fb-row{border:1.5px solid var(--line);border-radius:16px;margin-top:8px;background:var(--card);overflow:hidden}
.fb-row.open{border-color:var(--orange)}
.fb-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;border:none;background:transparent;
font-family:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;text-align:left}
.fb-head:hover{background:var(--orange-soft)}
.fb-when{flex:none;color:var(--muted);font-weight:800;font-size:.78rem;min-width:96px}
.fb-topic{flex:1;min-width:0;font-weight:800;line-height:1.35}
.fb-body{padding:2px 13px 14px;border-top:1px solid var(--line)}
.fb-msg{white-space:pre-wrap;font-weight:700;line-height:1.5;margin:10px 0 12px}
.fb-meta{display:grid;gap:3px;font-size:.8rem;color:var(--muted);font-weight:700;word-break:break-word}
.fb-meta .fb-k{display:inline-block;min-width:112px;font-weight:900;color:var(--ink);opacity:.7}
.fb-errs{margin-top:8px;padding:9px 11px;border-radius:12px;background:var(--a3bg);color:var(--a3);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;line-height:1.5;word-break:break-word}
/* the editable "common problems" list */
.fb-toplist{display:grid;gap:7px}
.fb-toprow{display:flex;align-items:center;gap:6px}
.fb-toprow input{flex:1}
.fb-toprow .btn{flex:none;padding:8px 10px}
/* inline "+ Add row" living as the last row of a setup table */
.su-table tr.su-addrow td{padding:0;border-bottom:none}
.su-addline{width:100%;border:none;background:transparent;color:var(--muted);font-family:inherit;
font-weight:900;font-size:.92rem;padding:12px;cursor:pointer;border-radius:0 0 16px 16px;line-height:1}
.su-addline:hover{color:var(--orange);background:var(--orange-soft)}
/* setup table dropdowns — one clean custom chevron (no doubled native arrow) */
.su-table select.su-in,.su-table select.su-sel{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;background-size:11px;padding-right:30px}
/* keep bell-row controls the same height as Classes rows */
.su-table .tinp{padding:8px 11px;font-size:max(16px,.88rem)}
/* ---- Timetable grid: tap-to-pick cells (replaces the Excel sheet) ---- */
/* match the Classes & Subjects row height: same vertical td padding + cell metrics */
.su-grid td.su-gtd{padding:8px 5px}
.su-gcell{width:100%;border:1.5px solid var(--line);border-radius:10px;background:var(--card);
color:var(--ink);font-family:inherit;font-weight:800;font-size:max(16px,.85rem);cursor:pointer;padding:9px 8px;
text-align:center;line-height:1.2;transition:border-color .12s,transform .08s}
.su-gcell:hover{border-color:var(--orange)}
.su-gcell:active{transform:scale(.97)}
.su-gcell.empty{border-style:dashed;color:var(--muted)}
.su-gadd{font-size:1rem;opacity:.6;font-weight:900}
/* the room under the class in each slot: faint = the class's usual room, bold with a dot = this slot's own */
.su-gcroom{display:block;font-size:.72rem;font-weight:700;opacity:.65;margin-top:2px}
.su-gmrow .su-gcroom{display:inline;margin:0 0 0 8px}
.su-gcroom.own{opacity:1;font-weight:900}
.su-gcroom.own::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:middle}
/* "Usual rooms" strip above the grid */
.su-roomstrip{background:var(--card);border-radius:14px;padding:10px 12px;margin:0 0 12px;box-shadow:0 0 0 1.5px var(--line)}
.su-rsh{font-weight:900;font-size:.85rem;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.su-rsh .muted{font-weight:700}
.su-rsunits{display:flex;flex-wrap:wrap;gap:8px}
.su-rsunit{display:flex;align-items:center;gap:7px;border-radius:12px;padding:4px 5px 4px 11px;font-weight:900;font-size:.85rem}
.su-rsunit input{width:84px;padding:6px 9px;border-radius:9px;border:none;background:rgba(255,255,255,.75);color:#2b2118;font-weight:800;font-size:max(16px,.85rem)}
.su-rstidy{margin-top:10px}
.su-gpuse{display:block;width:calc(100% - 22px);margin:4px 11px 8px;padding:7px;border:1.5px solid var(--line);border-radius:10px;background:none;color:var(--ink);font-family:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
/* mobile day-list */
.su-gmlist{display:flex;flex-direction:column;gap:7px}
.su-gmrow{display:flex;align-items:center;gap:12px}
.su-gmslot{flex:none;width:104px;font-weight:900;font-size:.92rem}
.su-gmrow .su-gcell{flex:1;text-align:left}
/* class picker popover */
.su-gpick{position:fixed;z-index:240;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
box-shadow:0 12px 34px rgba(40,25,10,.22);padding:6px;max-height:62vh;overflow:auto;min-width:170px;
display:flex;flex-direction:column;gap:2px}
.su-gproom{display:flex;flex-direction:column;gap:4px;padding:9px 11px 6px;margin-top:4px;border-top:1.5px solid var(--line);font-size:.78rem;font-weight:800;color:var(--muted)}
.su-gproom input{font-size:max(16px,.9rem);padding:7px 10px;border-radius:10px}
.su-gpopt{display:flex;align-items:center;gap:10px;border:none;background:transparent;font-family:inherit;
font-weight:800;font-size:.92rem;color:var(--ink);padding:10px 11px;border-radius:10px;cursor:pointer;
text-align:left;white-space:nowrap}
.su-gpopt:hover{background:var(--line)}
.su-gpopt.on{background:var(--orange-soft);color:var(--orange)}
.su-gpdot{width:18px;height:18px;border-radius:7px;flex:none}
.su-gpdot.empty{box-shadow:inset 0 0 0 1.5px var(--line)}
.su-stepnum{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;font-size:.9rem;font-weight:800}
.lg-half{background:var(--a2)}.lg-hol{background:var(--muted)}.lg-other{background:color-mix(in srgb,var(--muted) 60%,var(--card))}
.su-callist-row>.lgd{flex:none;align-self:center}
/* Lesson changes list: month headings · ▌stripe (Swap blue / Off red, faded = draft) · plain
date box ("Fri B" over the day) · L2 3C Eng / ⇄ new lesson · teacher · remark */
#suSwapList .chmonth{font-size:1rem;font-weight:900;color:var(--ink);padding:20px 2px 6px}
#suSwapList .chmonth:first-child{padding-top:4px}
#suSwapList .chearlier{font-size:.9rem;font-weight:900;color:var(--muted);padding:24px 2px 0}
#suSwapList .chnone{padding:16px 2px 4px;margin:0}
#suSwapList .chrow{display:flex;align-items:center;gap:10px;padding:10px 2px 10px 0;border-bottom:1.5px solid var(--line);cursor:pointer}
#suSwapList .chbar{flex:none;align-self:stretch;width:4px;border-radius:0}
#suSwapList .chdb{flex:none;width:46px;height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
#suSwapList .chdb i{font-style:normal;font-size:.68rem;font-weight:800;color:var(--muted);white-space:nowrap}
#suSwapList .chdb b{font-size:1.1rem;font-weight:900;color:var(--ink)}
#suSwapList .cht{flex:1;min-width:0}
#suSwapList .chmain{font-size:.98rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#suSwapList .chmain b{font-weight:900}
#suSwapList .chsub{margin-top:2px;font-size:.84rem;font-weight:700;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#suSwapList .chsub b{font-weight:900}
#suSwapList .chsym{font-weight:900}
#suSwapList .chrow.swap .chbar{background:var(--chswap)}
#suSwapList .chrow.swap .chsym{color:var(--chswap)}
#suSwapList .chrow.off .chbar{background:var(--choff)}
#suSwapList .chrow.off .chsym{color:var(--choff)}
#suSwapList .chrow.draft .chbar{opacity:.35}
#suSwapList .chrow.draft .chmain{color:var(--muted)}
#suSwapList .chwarn{color:var(--danger);font-weight:800}
#suSwapList .chwarnbar{margin:2px 2px 8px;padding:8px 12px;border-radius:12px;background:var(--choff-bg);color:var(--choff);font-weight:800;font-size:.85rem}
/* Duties reuse Setup cards, fields, tabs and day chips. */
#suDutyBody{min-width:0}
#suDutyBody .dutyhd .rowdel{margin-left:auto}
#suDutyBody label{display:block;min-width:0}
#suDutyBody input,#suDutyBody select{max-width:100%;box-sizing:border-box}
#suDutyMsg{margin-left:12px;white-space:normal}
.su-dutyfields{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:12px 0}
.su-dutyfields>label{flex:1 1 160px}
.su-dutyfields>b{align-self:center;min-width:70px}
/* Repeats is now a chip row (suDutyChipToggle), not a