/* Schoology Board: layout and structure (web app + backup file).
   No colors, fonts, radii, shadows or motion values live here: they are CSS custom properties
   from the active theme (public/board/theme/*.css). See THEMING.md. */
*{box-sizing:border-box}
html,body{margin:0;background-color:var(--bg);background-image:var(--bg-image);background-size:var(--bg-image-size);background-attachment:var(--bg-image-attachment);color:var(--text-1);font:var(--font-size)/var(--line-height) var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
b{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{flex:none}
.muted{color:var(--text-2)}.dim{color:var(--text-3)}.small{font-size:12px}

/* buttons */
.btn{height:var(--h);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;background:var(--surface-2);color:var(--text-1);border:var(--bw) solid var(--border-2);border-radius:var(--radius-btn);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:500;text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.btn:hover{background:var(--surface-3);border-color:var(--border-3)}
.btn:active{background:var(--btn-active-bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text-1)}
.btn.icon{width:var(--h);padding:0}
.btn.small{height:28px;padding:0 10px;font-size:12px;gap:6px}
.btn.danger:hover{border-color:var(--accent);color:var(--accent-hover)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
kbd{font:11px/16px var(--font-mono);background:var(--surface-1);border:var(--bw) solid var(--border-2);border-radius:var(--r-xs);padding:0 5px;color:var(--text-2)}

/* inputs */
input[type=text],input[type=url],input[type=date],input[type=time],input[type=search],select,textarea{height:var(--h);background:var(--surface-2);border:var(--bw) solid var(--border-2);border-radius:var(--radius-input);padding:0 12px;color:var(--text-1);min-width:0;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
textarea{height:auto;padding:8px 12px}
input::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;margin:0;flex:none}
input[type=search]::-webkit-search-cancel-button{filter:grayscale(1)}

/* Board header: title, freshness pill, progress */
.bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 24px 0}
.bh-t{margin:0;font:var(--fwh) 30px/1.1 var(--fh);letter-spacing:var(--lsh);text-transform:var(--tth)}
#sb-label{color:var(--mut);font-size:.6em;margin-left:4px}
.bhead .hr{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
#sb-banner{padding:0 24px}
#sb-banner .banner{margin:12px 0 0}
.prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.prog b{color:var(--ink)}
.progbar{width:96px;height:8px;background:var(--soft);border-radius:9px;overflow:hidden;display:block;border:var(--pbb)}
.progbar i{display:block;height:100%;background:var(--acc2);border-radius:inherit;transition:width var(--dur-mid)}

/* toolbar */
.sb-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px 0;flex-wrap:wrap}
.tl,.tr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg{display:inline-flex;align-items:stretch;background:var(--surface-1);border:var(--bw) solid var(--border-2);border-radius:var(--r-md);padding:2px;gap:2px;height:var(--h)}
.seg button{border:0;background:transparent;color:var(--text-2);padding:0 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap}
.seg button:hover{color:var(--text-1)}
.seg button[aria-pressed=true]{background:var(--seg-active-bg);color:var(--seg-active-ink)}
.weeknav{display:inline-flex;align-items:center;gap:4px}
.weeknav b{min-width:88px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.search{display:flex}
.sfield{position:relative;display:flex;align-items:center}
.sfield svg{position:absolute;left:10px;color:var(--text-3);pointer-events:none}
.sfield kbd{position:absolute;right:8px;pointer-events:none}
#sb-search{width:220px;padding-left:32px;padding-right:32px}
#sb-search:focus+kbd,#sb-search:not(:placeholder-shown)+kbd{display:none}
.search-btn{display:none!important}
#sb-filter{position:relative}
#sb-filter .dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--text-1)}
#sb-filter.on{border-color:var(--text-3)}
#sb-filter.on .dot{display:block}
.chips-wrap{position:relative;padding:12px 24px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:28px;display:inline-flex;gap:6px;align-items:center;padding:0 12px;border-radius:var(--radius-chip);border:var(--bw) solid var(--border-2);background:transparent;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;flex:none;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.chip b{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--text-1);border-color:var(--border-3)}
.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--text-1)}
.chip[aria-pressed=true] b{color:var(--text-2)}
@media (pointer:coarse){.chip{height:32px}}

/* board */
.colnav{display:none}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px 24px 96px;align-items:start}
.board.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.col{background-color:var(--col-bg);background-image:var(--col-bg-image);border:var(--bw) solid var(--col-border);border-radius:var(--radius-col);box-shadow:var(--col-shadow);min-height:70vh;padding:12px;transition:border-color var(--dur-fast),background var(--dur-fast)}
.col h2{font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin:4px 4px 12px;display:flex;justify-content:space-between;align-items:center}
.col h2 span{color:var(--text-3);font-variant-numeric:tabular-nums}
.col.over{border-color:var(--accent);background:var(--col-over-bg)}
.cls{font-size:13px;font-weight:600;color:var(--text-1);margin:16px 4px 4px;padding-bottom:4px;border-bottom:var(--bw) solid var(--border-1);display:flex;justify-content:space-between}
.cls span{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.col h2+.cls{margin-top:4px}
.day{font-size:11px;font-weight:500;color:var(--text-3);margin:12px 4px 8px;text-transform:uppercase;letter-spacing:.06em}
.day.today{color:var(--text-1)}
.card{position:relative;background:var(--card-bg);border:var(--bw) solid var(--card-border);border-left:var(--card-edge-w) solid var(--card-edge);border-radius:var(--radius-card);box-shadow:var(--card-shadow);padding:10px 12px;margin-bottom:8px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:border-color var(--dur-fast),opacity var(--dur-fast),background var(--dur-fast)}
.card:hover{border-color:var(--border-2);border-left-color:var(--border-3);background:var(--card-hover-bg)}
.card:focus-visible{box-shadow:var(--ring)}
.card.dragging{opacity:.3}
.card .t{display:block;font-family:var(--font-card-title);font-size:14px;line-height:1.35;font-weight:600;color:var(--text-1);text-decoration:none;padding-right:24px;word-break:break-word}
a.t:hover{text-decoration:underline;text-decoration-color:var(--text-3);text-underline-offset:2px}
.card .note{font-size:12px;color:var(--text-3);margin-top:4px}
.card .m{font-size:12px;color:var(--text-2);margin-top:8px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.card .m .l{display:flex;gap:4px;align-items:center;min-width:0}
.card .tm{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-2);text-align:right}
.card.overdue,.card.overdue:hover{border-left:4px solid var(--overdue)}
.card.overdue .tm{color:var(--late);font-weight:700}
.card .more{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;padding:0;opacity:0;transition:opacity var(--dur-fast),background var(--dur-fast)}
.card:hover .more,.card:focus-within .more,.card .more[aria-expanded=true]{opacity:1}
.card .more:hover,.card .more[aria-expanded=true]{background:var(--border-1);color:var(--text-1)}
@media (hover:none){.card .more{opacity:1}}
@media (pointer:coarse){.card .more{width:32px;height:32px;top:4px;right:4px}.card .t{padding-right:32px}}
.done .card{opacity:.5}
.done .card .t{text-decoration:line-through;text-decoration-color:var(--text-3)}
.done .card:hover{opacity:.75}
.tag{font-size:11px;line-height:18px;padding:0 8px;border-radius:var(--radius-tag);background:var(--c,var(--swatch-0));color:var(--ci,var(--swatch-0-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.src{font-size:10px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);border:var(--bw) solid var(--border-2);border-radius:var(--r-xs);padding:0 4px}
.empty-col{margin-top:36px;padding:20px 8px;text-align:center;font-size:13px;color:var(--text-3);border:var(--bw) dashed var(--border-1);border-radius:var(--r-md);transition:border-color var(--dur-fast),color var(--dur-fast)}
.col.over .empty-col{border-color:var(--accent);color:var(--text-2)}
.empty-state{margin-top:36px;padding:16px 8px;text-align:center}
.es-t{margin:0;font-size:15px;font-weight:600;color:var(--text-1);word-break:break-word}
.es-s{margin:8px 0 0;font-size:13px;color:var(--text-2)}
.es-s a{color:var(--text-1);text-underline-offset:2px;text-decoration-color:var(--text-3)}
.empty-state .btn{margin-top:12px}
.drag-ghost{position:fixed;z-index:1000;pointer-events:none;margin:0;transform:rotate(1.5deg) scale(1.02);box-shadow:var(--shadow-drag);opacity:.96;cursor:grabbing}
.board.dragging-on{scroll-snap-type:none!important}

/* menus: popover on desktop, bottom sheet on phones */
.menu{position:fixed;z-index:1500;min-width:232px;max-width:320px;background:var(--surface-2);border:var(--bw) solid var(--border-2);border-radius:var(--radius-menu);padding:4px;box-shadow:var(--shadow-menu);animation:var(--anim-menu)}
.menu-i{display:flex;align-items:center;gap:12px;width:100%;min-height:32px;padding:6px 10px;border:0;background:transparent;color:var(--text-1);border-radius:var(--r-md);text-align:left;cursor:pointer;font-size:13px;user-select:none}
.menu-i span{flex:1}
.menu-i svg{color:var(--text-2)}
.menu-i kbd{margin-left:auto}
.menu-i:hover{background:var(--surface-3)}
.menu-i:focus-visible{background:var(--surface-3);box-shadow:var(--ring-inset)}
.menu-h{padding:8px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.menu-sep{height:1px;background:var(--border-1);margin:4px 0}
.menu-title{padding:4px 12px 8px;font-size:13px;color:var(--text-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .m-only{display:none}
.menu.sheet{left:0;right:0;bottom:0;top:auto;min-width:0;max-width:none;width:100%;max-height:80vh;overflow:auto;border-radius:var(--r-2xl) var(--r-2xl) 0 0;border-width:1px 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom));animation:var(--anim-sheet)}
.menu.sheet:before{content:"";display:block;width:36px;height:4px;border-radius:var(--r-2xs);background:var(--border-3);margin:2px auto 10px}
.menu.sheet .menu-i{min-height:48px;font-size:15px;padding:0 12px}
.menu.sheet .m-only{display:flex}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:1400;animation:var(--anim-scrim)}
@media (pointer:coarse){.kbd-only,.menu kbd{display:none!important}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
@keyframes sheet{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

/* first run */
.hero{max-width:1160px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
.hero-l{max-width:480px;width:100%;margin:0 auto}
.hero h2{font-family:var(--font-display);font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.lead{color:var(--text-2);font-size:15px;line-height:1.5;margin:0 0 16px}
.lead b{color:var(--text-1);font-weight:500}
#imp-sample{margin-bottom:32px}
.imp-l{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.row{display:flex;gap:8px;align-items:center}
.row input{flex:1}
.remember{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:12px;color:var(--text-2);cursor:pointer;user-select:none}
.err{color:var(--accent-hover);font-size:13px;margin-top:8px;min-height:0}
.err:empty{display:none}
.hint{color:var(--text-3);font-size:12px;margin:8px 0 0}
.hint a{color:var(--text-2)}
details.how{margin-top:16px;font-size:13px;color:var(--text-2)}
details.how summary{cursor:pointer;color:var(--text-1);font-weight:500;width:max-content;max-width:100%;border-radius:var(--r-xs)}
.how-steps{margin:12px 0 8px;padding-left:20px;display:grid;gap:6px}
.how-steps li::marker{color:var(--text-3)}
.how-steps b{color:var(--text-1);font-weight:500}
.or{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:12px;margin:24px 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--border-1)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;padding:28px;border:var(--bw-drop) dashed var(--border-2);border-radius:var(--r-xl);text-align:center;cursor:pointer;position:relative;transition:border-color var(--dur-fast),background var(--dur-fast)}
.drop:hover{border-color:var(--border-3)}
.drop.over{border-color:var(--accent);background:var(--accent-softer)}
.drop-ic{display:flex;color:var(--text-2);margin-bottom:8px}
.drop-t{font-size:14px;font-weight:600;color:var(--text-1)}
.drop-s{font-size:12px;color:var(--text-3)}
.hero-r{display:none}
.hero-r img{display:block;width:100%;height:auto;border:var(--bw) solid var(--border-1);border-radius:var(--r-xl);transform:var(--hero-tilt);box-shadow:var(--shadow-hero)}
@media (min-width:1024px){.hero.two{grid-template-columns:480px minmax(0,1fr);padding-top:80px}.hero.two .hero-l{margin:0}.hero.two .hero-r{display:block;padding-top:16px}}
.loadmsg{display:inline-flex;gap:8px;align-items:center;color:var(--text-2)}
.spinner{width:14px;height:14px;border:2px solid var(--border-3);border-top-color:var(--text-1);border-radius:50%;animation:var(--anim-spin);display:inline-block;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* dialogs */
dialog{background:var(--surface-1);color:var(--text-1);border:var(--bw) solid var(--border-2);border-radius:var(--radius-dialog);padding:0;max-width:min(640px,94vw);width:100%;box-shadow:var(--shadow-dialog);max-height:90vh;display:none;flex-direction:column}
dialog[open]{display:flex}
dialog:focus,dialog:focus-visible{box-shadow:var(--shadow-dialog)}
dialog.wide{max-width:min(1000px,96vw)}
dialog::backdrop{background:var(--backdrop)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px 12px 20px;border-bottom:var(--bw) solid var(--border-1)}
.dlg-h h3{font-family:var(--font-display);margin:0;font-size:16px;font-weight:600}
.dlg-b{padding:16px 20px;overflow:auto;flex:1;min-height:0}
.dlg-f{display:flex;justify-content:space-between;gap:8px;padding:12px 20px;border-top:var(--bw) solid var(--border-1);flex-wrap:wrap;background:var(--surface-1);border-radius:0 0 var(--r-xl) var(--r-xl)}
.dlg-f .r{display:flex;gap:8px;margin-left:auto}
.form{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.form label{color:var(--text-2);font-size:13px}
.form .two{display:flex;gap:8px}
.form .two input{flex:1}
.cas-file{border:var(--bw) solid var(--border-1);border-radius:var(--r-xl);margin-bottom:16px;overflow:hidden}
.cas-file header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--surface-2);border-bottom:var(--bw) solid var(--border-1)}
.cas-file header input[type=text]{font-weight:600}
.cas-file header label{display:inline-flex;gap:8px;align-items:center}
.cas-table{width:100%;border-collapse:collapse}
.cas-table td{padding:4px 6px;border-bottom:var(--bw) solid var(--border-1);vertical-align:middle}
.cas-table tr:last-child td{border-bottom:0}
.cas-table tr.off td:not(:first-child){opacity:.45}
.cas-table td:first-child{padding-left:12px}
.cas-table input[type=text]{width:100%;height:30px;padding:0 8px}
.cas-table input[type=date]{height:30px;padding:0 6px;width:136px}
.cas-table input[type=time]{height:30px;padding:0 6px;width:108px}
.cas-table .k,.cas-table .dup{white-space:nowrap}
.cas-table .dup{padding-right:12px}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);border:var(--bw) solid var(--border-2);font-size:11px;color:var(--text-3);white-space:nowrap}
.pill.kind{color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:10px}
.cats li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:var(--bw) solid var(--border-1)}
.cats ul{list-style:none;margin:0;padding:0}
.cats input{flex:1}
.cats .n{color:var(--text-3);width:56px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center;font-size:13px}

/* toast: bottom-right on desktop, bottom-centre on phones */
#sb-toast{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:2000;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--surface-2);border:var(--bw) solid var(--border-2);border-radius:var(--radius-toast);padding:10px 12px 10px 16px;display:flex;gap:12px;align-items:center;font-size:13px;box-shadow:var(--shadow-toast);animation:var(--anim-toast);max-width:min(420px,calc(100vw - 32px))}
.toast.err{border-color:var(--accent)}
.toast button{background:none;border:0;color:var(--text-1);font-weight:600;cursor:pointer;padding:4px 6px;border-radius:var(--r-sm);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--text-3)}
@keyframes up{from{transform:translateY(8px);opacity:0}}
.foot{color:var(--text-3);font-size:12px;text-align:center;padding:0 24px 32px}
.foot a{color:var(--text-2)}
.foot.fr{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:16px}
.foot.fr .btn{color:var(--text-1)}
.loading{display:flex;gap:12px;align-items:center;justify-content:center;color:var(--text-2);padding:64px}

/* phones and small tablets */
@media (max-width:900px){
 .hide-m{display:none!important}
 .bhead{padding:8px 16px 0}
 .bh-t{font-size:24px}
 #sb-banner{padding:0 16px}
 .sb-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px 0}
 .tl{display:contents}
 .seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);height:40px}
 .seg button{padding:0 4px}
 .weeknav b{min-width:0;flex:1}
 .tr{grid-column:2;gap:8px;flex-wrap:nowrap}
 .sfield{display:none}
 .search-btn{display:inline-flex!important}
 .sb-tools.searching .tr{grid-column:1/-1}
 .sb-tools.searching .search{flex:1}
 .sb-tools.searching .sfield{display:flex;flex:1}
 .sb-tools.searching .search-btn{display:none!important}
 .sb-tools.searching #sb-search{width:100%}
 #sb-filter{width:40px;padding:0}
 #sb-filter .lbl{display:none}
 #sb-filter .dot{position:absolute;top:7px;right:7px}
 .chips-wrap{padding:12px 0 0}
 .chips{flex-wrap:nowrap;overflow-x:auto;padding:0 40px 0 16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - 24px),transparent);mask-image:linear-gradient(to right,currentColor calc(100% - 24px),transparent)}
 .chips::-webkit-scrollbar{display:none}
 .colnav{display:flex;position:sticky;top:0;z-index:25;margin-top:16px;padding:0 8px;background:var(--colnav-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:var(--bw) solid var(--border-1)}
 .colnav button{flex:1;min-width:0;height:44px;padding:0 4px;background:none;border:0;border-bottom:2px solid transparent;color:var(--text-2);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
 .colnav button b{color:var(--text-3);font-weight:500;margin-left:6px;font-variant-numeric:tabular-nums}
 .colnav button[aria-current=true]{color:var(--text-1);border-bottom-color:var(--accent)}
 .colnav button:focus-visible{box-shadow:inset var(--ring)}
 .board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:12px 20px 112px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .board::-webkit-scrollbar{display:none}
 .col{flex:0 0 calc(100vw - 40px);scroll-snap-align:center;min-height:60vh}
 .hero{padding:32px 20px 32px}
 .hero h2{font-size:30px}
 .row{flex-wrap:wrap}
 .row input{flex:1 1 100%}
 .row .btn{flex:1 1 100%;height:40px}
 .form{grid-template-columns:1fr;gap:6px}
 .form label{margin-top:6px}
 dialog{max-width:100vw;width:100vw;max-height:92vh;margin:auto 0 0;border-radius:var(--r-2xl) var(--r-2xl) 0 0;border-width:1px 0 0}
 dialog.wide{max-width:100vw}
 .dlg-f{border-radius:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 #sb-toast{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));align-items:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* sync status + quiet notes */
.nm-in::-webkit-calendar-picker-indicator{opacity:.35}
.sb-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-2)}
.sb-note a:hover{color:var(--text-1);text-decoration-color:var(--text-2)}
.spinner.sm{width:10px;height:10px;border-width:1.5px}
.sb-note{margin:0;padding:0 24px 0;font-size:13px;line-height:20px;color:var(--note-color)}
.sb-note[hidden]{display:none}
/* name your classes */
dialog.naming{max-width:620px}
.nm-intro{margin:0 0 14px;color:var(--text-2);font-size:14px;line-height:1.5}
.nm-sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px}
.nm-sugg .dim{font-size:12px;color:var(--text-3);margin-right:4px}
.nm-sugg .chip{height:28px;font-size:12px}
.nm-h{margin:16px 0 6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.nm-h .dim{color:var(--text-3);font-weight:500;margin-left:4px}
.nm-list{display:flex;flex-direction:column;border:var(--bw) solid var(--border-1);border-radius:var(--r-lg);overflow:hidden}
.nm-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:var(--bw) solid var(--border-1);background:var(--surface-1)}
.nm-row:first-child{border-top:0}
.nm-l{flex:1;min-width:0;font-size:14px;color:var(--text-1)}
.nm-l .dim{color:var(--text-3)}
.nm-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-s{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.nm-in{flex:0 0 200px;width:200px;height:36px}
.nm-empty{color:var(--text-2);margin:0}
@media (max-width:900px){
 .sb-note{padding:0 20px}
 .nm-row{flex-wrap:wrap}
 .nm-in{flex:1 1 100%;width:100%}
}
.hero .btn,.hero input[type=url]{height:40px}
.hero details.how summary{padding:10px 0}
/* move to phone */
dialog.move{max-width:480px}
.mv-intro{margin:0 0 16px;color:var(--text-2);font-size:14px;line-height:1.5}
.mv-qr{display:flex;justify-content:center;margin:0 0 16px}
.mv-qr canvas{display:block;background:var(--qr-light);border-radius:var(--r-md);image-rendering:pixelated}
.mv-link{display:flex;gap:8px}
.mv-link input{flex:1;min-width:0;font-size:12px;color:var(--text-2);font-family:var(--font-mono)}
.mv-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--text-2)}
.mv-note svg{flex:none;margin-top:2px;color:var(--text-2)}
@media (max-width:900px){.mv-link{flex-wrap:wrap}.mv-link input{flex:1 1 100%}.mv-link .btn{flex:1}}

/* Theme slots: empty by default (content:none draws nothing). A theme fills them with an emoji,
   text or url() illustration, and can animate cards that just moved (.sb-landed). */
.brand::after{content:var(--slot-logo)}
.empty-state::before{content:var(--slot-empty);display:block;margin:0 auto 8px}
.empty-col::before{content:var(--slot-col-empty);display:block;margin:0 auto 6px}
.col[data-col=done] h2::after{content:var(--slot-done)}
.card.sb-landed{animation:var(--anim-card-landed)}
.card.sb-done-now{animation:var(--anim-card-done)}

/* ---------- shared bits for Tonight / Board / Sunday plan ---------- */
.empty-line{color:var(--text-2);margin:8px 0}
.btn svg{flex:none}
.btn>svg:not([width]){width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lnk{background:none;border:0;padding:0;font:inherit;font-weight:750;color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;cursor:pointer}
.nw{white-space:nowrap}
.ex{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-left:3px}
.ib svg{color:var(--ink)}
.fpill.none .fdot,.fpill.off .fdot{background:var(--mut)}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:18px;padding:0 7px;border-radius:var(--radius-tag);white-space:nowrap}
.flag svg{width:11px;height:11px}
.flag.test{background:var(--flag-test-bg);color:var(--flag-test-color)}
.flag.early{background:var(--flag-early-bg);color:var(--flag-early-color)}
.flag.run{color:var(--flag-run-color);padding:0;font-variant-numeric:tabular-nums}

/* Tonight: pieces the designer reference left to the app */
.tnm .when{font-variant-numeric:tabular-nums}
.tnm .when.late{color:var(--late);font-weight:800}
.tnm .tn-when{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-2px 2px 10px;font-size:13px;color:var(--mut)}
.tnm .tn-when label{display:inline-flex;align-items:center;gap:6px}
.tnm .tn-when input{height:32px;padding:0 8px;border-radius:var(--rs)}
.tnm .tn-when b{color:var(--ink)}
.tnm .run{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tnm .run .fdot{width:8px;height:8px;border-radius:50%;background:var(--late)}
.tnm .trow.running{border-color:var(--acc2)}
.tnm .spill{margin-top:12px;padding:12px 14px;border:var(--bw) dashed var(--lateB);background:var(--lateBg);border-radius:var(--r)}
.tnm .spill p{margin:0}
.free .stk{width:110px;height:110px}
.stk .a1{fill:var(--art-1);stroke:var(--art-ink);stroke-width:5}
.stk .a2{fill:var(--art-2);stroke:var(--art-ink);stroke-width:5;stroke-linejoin:round}
.stk .tick{fill:none;stroke:var(--art-ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.free svg.cafe{width:160px;height:110px}
.cafe .c-wall{fill:var(--card);stroke:var(--line);stroke-width:3}
.cafe .c-awn{fill:var(--art-2)}
.cafe .pane{fill:var(--well)}
.cafe .pane.lit{fill:var(--art-1)}
#fx .tpt svg{stroke:var(--confetti-stroke);stroke-width:1.5}
#fx .tpt.c1 svg{fill:var(--confetti-1)}#fx .tpt.c2 svg{fill:var(--confetti-2)}#fx .tpt.c3 svg{fill:var(--confetti-3)}#fx .tpt.c4 svg{fill:var(--confetti-4)}#fx .tpt.c5 svg{fill:var(--confetti-5)}
.tnm .stub .soon{display:inline-block}

/* Board cards: check box, class color, double-check tag */
.card{padding-left:44px}
.card .chk{position:absolute;left:10px;top:10px;width:24px;height:24px;padding:0;display:grid;place-items:center;border-radius:var(--chr);border:var(--chb) solid var(--chc);background:var(--chbg);cursor:pointer;transition:background var(--dur-fast)}
.card .chk .ck{width:16px;height:16px;fill:none;stroke:var(--ckInk);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--dur-fast)}
.card .chk:hover .ck{opacity:.3}
.card .chk[aria-pressed=true]{background:var(--ckBg);border-color:var(--ckB)}
.card .chk[aria-pressed=true] .ck{opacity:1}
.card.flagged{border-color:var(--flagB)}
.flagtag{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:1px 7px;font-size:11px;font-weight:800;color:var(--flagInk);background:var(--flagBg);border:1px dashed var(--flagB);border-radius:var(--r-xs)}
.flagtag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.chip .cdot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.menu .msw{width:16px;height:16px;border-radius:50%;border:var(--bw) solid var(--bc);flex:none}
.menu-i.radio>svg:last-child{margin-left:auto}
@media (pointer:coarse){.card{padding-left:50px}.card .chk{width:32px;height:32px;left:8px;top:8px}}

/* Theme picker: each preview carries its own theme's tokens (.thp[data-theme]) */
dialog.themes{max-width:860px}
.thgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.thgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.thp{display:flex;flex-direction:column;gap:6px;text-align:left;padding:10px;border-radius:var(--r);border:var(--bw) solid var(--bc);background-color:var(--bgc);background-image:var(--bgi);background-size:var(--bgs);color:var(--ink);font-family:var(--fb);cursor:pointer}
.thp[aria-checked=true]{outline:3px solid var(--ink);outline-offset:2px}
.thp-s{display:flex;flex-direction:column;gap:8px}
.thp-card{display:flex;align-items:center;gap:8px;padding:8px;background:var(--card);border:var(--bw) solid var(--bc);border-radius:var(--rs);box-shadow:var(--shs)}
.thp-ck{width:18px;height:18px;flex:none;border-radius:var(--chr);border:var(--chb) solid var(--chc);background:var(--chbg)}
.thp-l{flex:1;height:8px;border-radius:4px;background:var(--ink);opacity:.75}
.thp-tag{width:34px;height:12px;border-radius:6px;background:var(--acc)}
.thp-sw{display:flex;gap:4px}
.thp-sw i{width:14px;height:14px;border-radius:50%;border:1px solid var(--bc)}
.thp-n{font:var(--fwh) 15px/1.15 var(--fh);letter-spacing:var(--lsh);text-transform:var(--tth)}
.thp-d{font-size:12px;color:var(--mut);line-height:1.35}
.thmode{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.thmode[hidden]{display:none}

/* Week ahead */
/* Sunday plan */
.wkm .thero .nudge b{font-weight:700}
.wk-acts{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.wkb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wkb li{display:grid;grid-template-columns:64px minmax(0,1fr) 190px;gap:12px;align-items:center;min-height:28px}
.wkb-d{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.wkb-d b{font-weight:600;color:var(--text-1)}
.wkb-bar{height:12px;background:var(--bar-track);border-radius:var(--r-pill);overflow:hidden}
.wkb-bar i{display:block;height:100%;background:var(--bar-fill);border-radius:var(--r-pill);transition:width var(--dur-mid) ease-out}
.wkb li.heavy .wkb-bar i{background:var(--bar-heavy)}
.wkb li.heavy .wkb-n{color:var(--text-1);font-weight:700}
.wkb li.past{opacity:.5}
.wkb-n{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wkb-tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:var(--r-pill);background:var(--warn);color:var(--warnInk);font-size:11px;font-weight:700;line-height:18px;vertical-align:1px}
.wk-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;align-items:start}
.wkl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tnm .wkl .cu{align-items:flex-start}
.tnm .wkl .cdot{margin-top:5px}
.wkl-s{color:var(--text-1)}
.wkl-a{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.wkl-ok{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.wkl-ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wkl-a .btn{height:32px;font-size:12.5px;white-space:nowrap}

/* estimate editor */
dialog.est .est-for{margin:0 0 14px}
dialog.est .est-l{margin:14px 0 8px;font-weight:600}
.est-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.est-chips .chip[aria-pressed=true]{border-color:var(--accent);color:var(--text-1);background:var(--accent-soft)}
.est-custom{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:12px}
.est-custom input{width:72px;height:28px;background:var(--surface-2);border:var(--bw) solid var(--border-2);border-radius:var(--radius-input);padding:0 8px;color:var(--text-1)}

/* app update */
.update-bar{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:2100;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:var(--surface-2);border:var(--bw) solid var(--border-2);border-radius:var(--radius-toast);box-shadow:var(--shadow-toast)}

@media (max-width:900px){
 #app{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 main.tnm{padding-bottom:40px}
 #sb-toast{bottom:calc(80px + env(safe-area-inset-bottom))}
 .wk-cols{grid-template-columns:1fr}
 .wkb li{grid-template-columns:52px minmax(0,1fr) auto;gap:8px}
 .wkb-n{font-size:12px}
 .tnm .wkl .cu{flex-wrap:wrap}
 .wkl-a{flex-basis:100%;flex-direction:row;align-items:center;justify-content:flex-end}
 .update-bar{top:auto;bottom:calc(80px + env(safe-area-inset-bottom))}
 #sb-add .lbl{display:inline}
}
.tnm .cuw .cu-more{grid-column:1/-1;margin:2px 0 0}
@media (pointer:coarse){.fresh .btn.small{min-height:36px;padding-inline:12px}}

/* ---------- QA pass (v1.6.2) ---------- */
/* overdue is the only "late" look: a red stripe and red due text on a normal card; no tint anywhere */
.tnm .trow.tlate{background:var(--card);border-left:4px solid var(--overdue)}
.banner.ferr{background:var(--card)}
.tnm .spill{background:transparent}
/* date headers on the board: Overdue, Today, Tomorrow, then days */
.day.dgrp{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:800;color:var(--ink2,var(--text-2))}
.day.dgrp .dd{color:var(--mut);font-weight:600}
.day.dgrp .dn{margin-left:auto;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.day.dgrp.over{color:var(--late)}
.col h2+.day.dgrp{margin-top:4px}
.todayl{display:inline-block;background:var(--warn);color:var(--warnInk);border-radius:6px;padding:0 7px;line-height:18px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* Completed: the grey look, with the class stripe at 40% */
.done .card{opacity:1;background:var(--soft);box-shadow:none;border-left:4px solid color-mix(in srgb,var(--c) 40%,transparent)}
.done .card .t{color:var(--mut)}
.done .card .m{filter:grayscale(1);opacity:.65}
.done .card:hover{opacity:1}
/* the selected class chip uses the active tab's fill */
.chip[aria-pressed=true],.chip[aria-pressed=true]:hover{background:var(--navon);border-color:var(--navon);color:var(--navonInk)}
.chip[aria-pressed=true] b{color:inherit;opacity:.8}
.chip[aria-pressed=true] .cdot{outline:1.5px solid var(--navonInk)}
/* "Link Schoology →": one button until linked, then the freshness pill */
.fpill.linkb{cursor:pointer;font:inherit;font-weight:800;color:var(--ink);background:var(--card);border:var(--bw) solid var(--bc);gap:8px}
.fpill.linkb:hover{border-color:var(--ink)}
.fpill.linkb .fdot{background:var(--mut)}
@media (pointer:coarse){.fpill.linkb{min-height:36px}}
/* Tonight's start time: a theme chip that opens the native time picker */
.tnm .tn-when .tlab{color:var(--mut)}
.tchip{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--chr);border:var(--chb) solid var(--chc);background:var(--chbg);color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer}
.tchip b{color:var(--ink)}
.tchip svg{width:14px;height:14px;color:var(--mut)}
.tnm .tn-when .tchip input{position:absolute;inset:calc(var(--chb,0px) * -1);width:calc(100% + 2 * var(--chb,0px));height:calc(100% + 2 * var(--chb,0px));opacity:0;cursor:pointer;padding:0;margin:0;border:0}
.tchip:focus-within{box-shadow:var(--ring)}
.tchip input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
@media (pointer:coarse){.tchip{height:36px}}
.rs-list{margin:8px 0 12px;padding-left:20px;line-height:1.6}
dialog.reset .dlg-f .btn.danger{background:var(--late);border-color:var(--late);color:var(--on-late)}
.weeknav .wl{color:var(--mut);font-weight:600}
.sb-tools>.chips-wrap{flex:1 0 100%;padding:0}
@media (max-width:900px){
 #app{padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom) + 12px)}
 .botnav{box-sizing:border-box;height:calc(var(--botnav-h) + env(safe-area-inset-bottom));align-items:flex-start}
 .botnav a{position:relative}
 .botnav a .soon{position:absolute;top:0;left:calc(50% + 8px);margin:0;line-height:1.3}
 main.tnm{padding-bottom:16px}
 .board{padding-bottom:16px}
 /* board header on a phone: pill + progress, then view + week, then search/filter + class chips, then the column tabs */
 .bhead{padding:4px 16px 0;flex-wrap:nowrap;align-items:center;min-height:36px}
 .bhead .hl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .bhead .hr{flex:1;min-width:0;flex-wrap:nowrap;justify-content:space-between;gap:10px}
 #sb-fresh{min-width:0;flex:0 1 auto;display:flex}
 #sb-fresh .fresh{min-width:0}
 #sb-fresh .fpill{min-width:0;height:32px}
 #sb-fresh .ft{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bhead .prog{gap:6px;font-size:12px;white-space:nowrap}
 .bhead .progbar{width:40px}
 .sb-tools{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"seg nav" "tools chips";gap:6px 8px;padding:6px 16px 0}
 .sb-tools.searching{grid-template-areas:"seg nav" "tools tools" "chips chips"}
 .seg{grid-area:seg;grid-column:auto;display:inline-flex;height:32px}
 .seg button{padding:0 10px}
 .weeknav{grid-area:nav;justify-self:end;min-width:0;flex-wrap:nowrap;justify-content:flex-end}
 .weeknav .btn.icon{width:30px;height:32px}
 .weeknav b{min-width:0;flex:none;white-space:nowrap}
 .weeknav .wl{display:none}
 .tr{grid-area:tools;grid-column:auto;gap:6px}
 .tr .btn.icon,#sb-filter{width:32px;height:32px;min-height:32px}
 .sb-tools>.chips-wrap{grid-area:chips;min-width:0;padding:0;margin-right:-16px}
 .sb-tools>.chips-wrap .chips{padding:0 32px 0 0}
 .sb-tools>.chips-wrap .chip{height:32px}
 .colnav{margin-top:6px}
 .colnav button{height:36px}
 .col h2{display:none}
 .board{padding-top:6px}
 .col{padding:4px 12px 8px}
 .col .day:first-child{margin-top:0}
}
.thp-pv{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--border-1);border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);vertical-align:2px}
/* Tonight header on a phone: the freshness pill on the left, progress on the right (never run together) */
@media (max-width:900px){
 :root .tnm .thero .hr{column-gap:16px;align-self:stretch}
 :root:not([data-theme="nocturne"]) .tnm .thero .hr>.tprog{margin-left:auto}
}
/* ---------- phone board header (600px and narrower) ----------
   Row 1: logo + "Board", "‹ Oct 19–25 › · Synced 4m ago" under it, search / filter / ⋯ on the right.
   Row 2: the view chip ("Week ▾") and the class chips in one scrolling row. Row 3: the column tabs (sticky).
   Add task is a round button above the tab bar. A compact title bar fades in once row 1 scrolls away. */
.mh,.mbar,.fab,.vchip{display:none}
@media (max-width:600px){
 body[data-tab=board] .topbar,body[data-tab=board] .bhead{display:none}
 .mh{display:block;padding:8px 16px 0}
 .mh1{position:relative;display:flex;align-items:center;justify-content:space-between;gap:4px;height:44px}
 .mh-id{display:grid;grid-template-columns:24px minmax(0,auto);column-gap:10px;align-items:center;min-width:0}
 .mh-logo{display:block;grid-row:1}
 .mh-tt{display:contents}
 .mh-t{grid-row:1;grid-column:2}
 .mh-sub{grid-row:2;grid-column:1/-1}
 span.mh-fr{display:block;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}
 .mh-t{margin:0;font:700 20px/22px var(--fh);letter-spacing:var(--lsh);text-transform:var(--tth);color:var(--ink)}
 .mh-sub{display:flex;align-items:center;gap:3px;height:18px;margin-top:1px;font-size:12px;line-height:16px;color:var(--mut);white-space:nowrap;min-width:0}
 .mh-ar{position:relative;flex:none;width:12px;height:16px;padding:0;border:0;border-radius:4px;background:none;color:var(--ink2);font:inherit;font-size:16px;line-height:14px;cursor:pointer;display:inline-grid;place-items:center}
 .mh-ar::before{content:"";position:absolute;inset:-6px -8px}
 .mh-ar svg{width:13px;height:13px;stroke-width:2.4;flex:none}
 .mh-wk{margin:0 2px;color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
 .mh-sep{margin:0 2px}
 .mh-fr{display:inline-flex;align-items:center;min-width:0;overflow:hidden;padding:6px 0;margin:-6px 0;border:0;background:none;color:var(--mut);font:inherit;cursor:pointer}
 .mh-sub>.mh-fr{flex:0 1 auto}
 .mh-frt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:18px;line-height:18px;border-radius:4px}
 .mh-fr .fdot{display:inline-block;vertical-align:1px;margin-right:4px;width:6px;height:6px;border-radius:50%;background:currentColor}
 .mh-fr.stale .mh-frt{padding:0 4px;background:var(--warn);color:var(--warnInk);font-weight:700}
 .mh-fr.ferr{color:var(--late);font-weight:700}
 .mh-link{display:inline-block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 4px;margin:-6px -4px;border:0;background:none;font:inherit;font-weight:700;line-height:16px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
 .mh-ar:focus-visible,.mh-link:focus-visible{outline:0;box-shadow:var(--ring)}
 .mh-fr:focus-visible{outline:0}
 .mh-fr:focus-visible .mh-frt{box-shadow:var(--ring)}
 .mh-ic{display:flex;gap:0;flex:none;margin-right:-6px}
 .mh-id{flex:0 1 auto}
 .mh-sub>*{flex:none}
 .mh-sub>.mh-link{flex:0 1 auto}
 .mib{position:relative;width:36px;height:36px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--ink);cursor:pointer}
 .mib svg{width:20px;height:20px}
 .mib:focus-visible{outline:0;box-shadow:var(--ring)}
 .mib .dot{display:none;position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
 .mib.on .dot{display:block}
 .mh1.searching>.mh-id,.mh1.searching>.mh-ic{visibility:hidden}
 .mh-s{position:absolute;left:0;right:0;top:4px;height:36px;z-index:2;display:flex;align-items:center;gap:8px;padding:0 0 0 12px;background:var(--card);border:var(--bw) solid var(--border-2);border-radius:var(--radius-input)}
 .mh-s[hidden]{display:none}
 .mh-s>svg{width:18px;height:18px;color:var(--mut);flex:none}
 .mh-s input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:16px;outline:0}
 .mh-s input::-webkit-search-cancel-button{display:none}
 :root .mh-s input:focus,:root .mh-s input:focus-visible{outline:0;box-shadow:none;border:0}
 .mh-s:focus-within{box-shadow:var(--ring)}
 .mh-s .mib{width:34px;height:34px}
 /* row 2 */
 .sb-tools{display:block;padding:8px 0 0}
 .sb-tools .tl,.sb-tools .tr,.sb-tools .seg,.sb-tools .weeknav{display:none!important}
 .sb-tools>.chips-wrap{display:flex;gap:8px;margin:0;padding:0 40px 0 16px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - 24px),transparent);mask-image:linear-gradient(to right,currentColor calc(100% - 24px),transparent)}
 .sb-tools>.chips-wrap::-webkit-scrollbar{display:none}
 .sb-tools>.chips-wrap .chips{flex:none;flex-wrap:nowrap;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
 :root .sb-tools>.chips-wrap .chip{height:32px;flex:none}
 :root .sb-tools>.chips-wrap>.vchip.chip,:root .sb-tools>.chips-wrap>.vchip.chip:hover{display:inline-flex;gap:4px;background:var(--ink);border-color:var(--ink);color:var(--bgc);font-weight:700;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 /* the column starts right under the tabs: its date heading is the first thing below them */
 body[data-tab=board] .board{padding-top:4px}
 body[data-tab=board] .col{padding-top:0}
 :root body[data-tab=board] .col h2+.day.dgrp{margin-top:0}
 .vchip .vc{font-size:10px;opacity:.85}
 /* row 3: column tabs stick to the top (under the compact bar once it shows) */
 .colnav{top:var(--mstick,0px);margin-top:8px;border-bottom:1px solid var(--border-1)}
 .colnav button{height:40px}
 body[data-tab=board].mcompact{--mstick:44px}
 body[data-tab=board] .mbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:26;height:44px;box-sizing:border-box;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 0 16px;background:var(--colnav-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-fast) ease-out,visibility var(--dur-fast) step-end}
 body[data-tab=board].mcompact .mbar{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-fast) ease-out,visibility var(--dur-fast) step-start}
 .mbar-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 16px/1.2 var(--fh);letter-spacing:var(--lsh);text-transform:var(--tth);color:var(--ink)}
 /* Add task: a round button above the tab bar; the board gets room so it never covers the last card */
 body[data-tab=board] .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom) + 16px);z-index:40;width:56px;height:56px;padding:0;border-radius:var(--rb);background:var(--acc);color:var(--accInk);border:var(--bw) solid var(--bc);box-shadow:var(--sh);cursor:pointer}
 .fab svg{width:26px;height:26px;stroke-width:2.4}
 .fab:focus-visible{outline:0;box-shadow:var(--ring)}
 body[data-tab=board] .board{padding-bottom:16px}
 body[data-tab=board] #app{padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom) + 88px)}
 body[data-tab=board] #sb-toast{bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom) + 88px)}
}
/* narrow phones (under 375px): tighter icon row, and the link drops its arrow before anything would touch the icons */
@media (max-width:374px){
 .mh-ic{gap:0}
 .mh-sep{margin:0}
 .mh-sub{gap:2px}
 .mh-fr.stale .fdot{display:none}
 .mh-fr.stale .mh-frt{padding:0 3px}
 .mh-link .la{display:none}
}
/* CAS preview on phones (600px and narrower): each task becomes a two-line card instead of a wide table row.
   Line 1: checkbox + the title (full width, easy to read and edit). Line 2: date, time, kind and "already on calendar". */
@media (max-width:600px){
  .cas-file header{gap:8px}
  .cas-file header .cas-course{flex:1 1 100%;min-width:0;height:36px}
  .cas-file header>span{flex:1 1 100%}
  .cas-file header label{margin-left:0!important;flex:1 1 100%}
  .cas-file header .cas-time{width:112px;height:36px}
  .cas-file header .btn.small{padding:0 8px}
  .cas-table,.cas-table tbody{display:block;width:100%}
  .cas-table tr{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c t t" ". d m" ". k u";gap:6px 8px;align-items:center;padding:10px 12px;border-bottom:var(--bw) solid var(--border-1)}
  .cas-table tr:last-child{border-bottom:0}
  .cas-table td{display:block;padding:0!important;border:0;min-width:0;width:auto!important}
  .cas-table td:nth-child(1){grid-area:c}
  .cas-table td:nth-child(2){grid-area:d}
  .cas-table td:nth-child(3){grid-area:m}
  .cas-table td:nth-child(4){grid-area:t}
  .cas-table td.k{grid-area:k}
  .cas-table td.dup{grid-area:u;justify-self:end}
  .cas-table td.dup:empty{display:none}
  .cas-table input[type=checkbox]{width:22px;height:22px;margin:0}
  .cas-table input[type=text]{height:40px;font-size:16px}
  .cas-table input[type=date],.cas-table input[type=time]{width:100%;min-width:0;height:36px;font-size:15px}
  .cas-table tr.off td:not(:first-child){opacity:.5}
}
.coln{background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0}
.lb{display:inline-flex;align-items:center;max-width:100%;padding:0 6px;border:0;border-radius:var(--r-sm);font-size:11px;font-weight:600;line-height:1.7;margin:0 4px 0 0}
.lbs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ckn{color:var(--text-3);font-variant-numeric:tabular-nums;margin-left:6px}
.sws{display:inline-flex;gap:4px;align-items:center}
.sw{width:16px;height:16px;padding:0;border-radius:var(--r-sm);border:var(--bw) solid var(--border-2);cursor:pointer}
.sw.on{box-shadow:var(--ring)}
.cd-t{font-weight:600;margin:0 0 8px}
.cd-ll,.cd-cks ul{list-style:none;padding:0;margin:6px 0}
.cd-ll li,.cd-cks li{display:flex;align-items:center;gap:8px;margin:4px 0}
.cd label{display:block;margin:10px 0 4px;font-size:13px;color:var(--text-2)}
.todo-imp{margin-top:16px}
@media (min-width:901px){
 .board.many{display:flex;overflow-x:auto;align-items:flex-start}
 .board.many .col{flex:0 0 280px}
}