/* Dojo app — one design system. Tokens first; every component reads from them. */
:root{
  --paper:#f4efe7; --paper-2:#ece5da; --card:#fffdf9; --card-2:#f8f3eb;
  --ink:#1d1814; --ink-2:#4a4039; --muted:#7d7067; --faint:#b3a79c;
  --line:#e4dacd; --line-2:#efe8dd;
  --accent:#c8522f; --accent-dk:#a4421f; --accent-soft:#f8e4db; --accent-ink:#8a3416;
  --ok:#5f7d52; --ok-soft:#e5eedf; --ok-ink:#355226;
  --warn:#c99a1b; --warn-soft:#fbefc7; --warn-ink:#7a5a05;
  --info-soft:#e4ebf6; --info-ink:#2c4d82;
  --danger:#b42d1f;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --shadow:0 1px 2px rgba(29,24,20,.05),0 6px 20px rgba(29,24,20,.05);
  --tab-h:62px; --top-h:56px; --side-w:232px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs:16px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#17140f; --paper-2:#1f1a14; --card:#231e18; --card-2:#2a241d;
  --ink:#efe8de; --ink-2:#cdc3b7; --muted:#9b8f84; --faint:#6b6159;
  --line:#3a3229; --line-2:#2f2922;
  --accent:#e0714c; --accent-dk:#f08a66; --accent-soft:#3d2219; --accent-ink:#f3b59c;
  --ok:#86a877; --ok-soft:#24301f; --ok-ink:#bfd6b2;
  --warn:#d9b24a; --warn-soft:#3a3014; --warn-ink:#f0d68a;
  --info-soft:#1f2a3b; --info-ink:#aac2e6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs)/1.5 var(--font);min-height:100dvh;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
body.anon{padding-bottom:0}
a{color:var(--accent-dk);text-decoration:none}
h1{font-size:1.55rem;letter-spacing:-.02em;margin:0;font-weight:800;line-height:1.15}
h2{font-size:1.05rem;margin:0 0 .6em;font-weight:750;letter-spacing:-.01em}
h3{font-size:.95rem;margin:0 0 .4em;font-weight:700}
p{margin:0 0 .75rem}
small{font-size:.85em}
.muted{color:var(--muted)}.small{font-size:.88rem}.big{font-size:1.5rem;font-weight:800}
.grow{flex:1}
[hidden]{display:none!important}
code{font-size:.85em;background:var(--paper-2);padding:1px 5px;border-radius:5px}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand img{border-radius:9px;width:30px;height:30px}
.topnav{display:none}
.who{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.9rem}
.who-name{font-weight:700}.who-role{color:var(--muted);display:none}
.who a.signout,.qr-btn,.icon-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--ink-2);background:transparent;border:0;cursor:pointer;font-size:1.1rem}
.who a.signout:hover,.qr-btn:hover,.icon-link:hover{background:var(--paper-2)}
.page{max-width:920px;margin:0 auto;padding:14px 16px 28px}

/* sidebar (desktop) */
.sidebar{display:none}
@media(min-width:900px){
  body{padding-bottom:0}
  .topbar{display:none}
  .tabbar{display:none}
  .sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--side-w);background:var(--card);border-right:1px solid var(--line);padding:18px 12px 14px;overflow:auto;z-index:30}
  .sidebar .brand{padding:4px 8px 14px}
  .side-group{margin:6px 0 10px}
  .side-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:6px 10px 4px;font-weight:700}
  .side-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:.93rem}
  .side-nav a svg{width:18px;height:18px;fill:currentColor;opacity:.8}
  .side-nav a:hover{background:var(--paper-2)}
  .side-nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
  .side-nav a .pill{margin-left:auto}
  .side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:8px}
  .side-foot .who-name{display:block;font-size:.9rem}
  .side-foot .who-role{display:block;font-size:.75rem;color:var(--muted)}
  .side-foot .grow{min-width:0}
  .page{margin-left:var(--side-w);max-width:none;padding:28px 36px 48px}
  .page-inner{max-width:980px}
  h1{font-size:1.9rem}
}

/* tab bar (phones) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--muted);position:relative}
.tabbar svg{width:24px;height:24px;fill:currentColor}
.tabbar a.on{color:var(--accent-ink)}
.tabbar a.on::before{content:"";position:absolute;top:6px;width:34px;height:34px;border-radius:12px;background:var(--accent-soft);z-index:-1}
.tabbar a.has-new::after{content:"";position:absolute;top:8px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.pill{display:inline-block;background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:0 7px;font-size:.7rem;font-weight:800;line-height:1.5;vertical-align:middle}

/* ---------- page header ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin:4px 0 16px}
.page-head p{margin:2px 0 0}
.page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--paper-2);border-radius:var(--r-pill);padding:3px}
.seg a,.seg button{padding:6px 12px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;color:var(--ink-2);border:0;background:transparent;font-family:inherit;cursor:pointer}
.seg a.on,.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.seg b{background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:0 6px;font-size:.72rem;margin-left:4px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tabs a{padding:6px 12px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font-weight:600;font-size:.86rem}
.tabs a.on{background:var(--ink);color:var(--paper)}
.tabs.chips a b{font-weight:800;margin-left:4px;opacity:.7}
.status{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;vertical-align:middle;background:var(--paper-2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.status.published{background:var(--ok-soft);color:var(--ok-ink)}
.status.taught{background:var(--accent-soft);color:var(--accent-ink)}
.status.draft{background:var(--warn-soft);color:var(--warn-ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--paper-2);color:var(--ink);font-weight:700;padding:10px 16px;border-radius:var(--r-pill);border:0;cursor:pointer;font-family:inherit;font-size:.95rem;line-height:1.1;white-space:nowrap;transition:background .12s,transform .08s}
.btn:hover{background:var(--line)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dk)}
.btn-danger{background:var(--danger);color:#fff}
.btn-block{width:100%;padding:13px}
.btn-sm{padding:7px 12px;font-size:.85rem}
.icon-btn{border:0;background:transparent;color:var(--muted);font-size:1rem;width:34px;height:34px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--paper-2)}.icon-btn.danger:hover{background:var(--accent-soft);color:var(--accent-ink)}
.link-btn{border:0;background:none;color:var(--accent-dk);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:0}
.mv{border:0;background:var(--paper-2);color:var(--ink-2);width:30px;height:22px;border-radius:6px;cursor:pointer;font-size:.7rem}
.mv:active{background:var(--accent);color:#fff}
.handle{display:flex;flex-direction:column;gap:2px;flex:none}
.handle-h{display:flex;gap:4px;align-items:center}

/* ---------- forms ---------- */
input[type=search],input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=url],select,textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{resize:vertical;min-height:44px}
.form label,.sheet-body label,.compose label{display:block;font-weight:600;font-size:.88rem;margin-bottom:12px}
.form label input,.form label select,.form label textarea,.sheet-body label input,.sheet-body label select,.sheet-body label textarea,.compose label input,.compose label select,.compose label textarea{margin-top:5px;font-weight:400}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.grid-2{grid-template-columns:1fr}}
.inline-fields{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-fields input[type=text],.inline-fields input[type=number],.inline-fields input[type=date],.inline-fields input[type=email],.inline-fields input[type=url],.inline-fields select{flex:1 1 140px;min-width:0;padding:9px 11px}
.inline-fields .num{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);font-weight:600}
.inline-fields .num input{width:76px;padding:9px 10px}
.inline-select{font:inherit;font-weight:700;border:0;border-bottom:2px solid var(--accent);background:transparent;padding:2px 24px 2px 0;border-radius:0;color:var(--ink);width:auto}
select.mini{width:auto;padding:5px 28px 5px 9px;font-size:.82rem;max-width:170px}
.search-wrap{margin:0 0 12px}
.switch{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);font-weight:600}
.switch:last-child{border-bottom:0}
.switch input{appearance:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--line);position:relative;cursor:pointer;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch input:checked{background:var(--ok)}.switch input:checked::after{left:21px}
.switch small{display:block;font-weight:400;color:var(--muted)}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:6px 0 16px}
label.check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.chk{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-pill);font-weight:600;font-size:.85rem;cursor:pointer;background:var(--card)}
.chk input{accent-color:var(--accent);margin:0}
.chk:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.chk-col{display:flex;flex-direction:column;gap:8px;justify-content:center}
.dow-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dow{cursor:pointer}.dow input{position:absolute;opacity:0;width:0;height:0}
.dow input+span{display:inline-block;padding:6px 10px;border-radius:var(--r-pill);background:var(--paper-2);font-weight:600;font-size:.85rem}
.dow input:checked+span{background:var(--accent);color:#fff}
.seg.small{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;padding:0;background:var(--card)}
.seg.small label{position:relative;cursor:pointer}
.seg.small input{position:absolute;opacity:0;inset:0;width:0;height:0}
.seg.small input+span{display:inline-block;padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--muted)}
.seg.small input:checked+span{background:var(--accent);color:#fff}
.seg.small input:disabled+span{opacity:.4;cursor:default}
.seg.small input[value=work]:checked+span{background:var(--accent)}

/* ---------- cards & lists ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.card>h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2 .btn,.card>h2 .link-btn{margin-left:auto}
.card>h2 small{font-weight:500;color:var(--muted);font-size:.8rem}
.card.table-card{padding:0;overflow:auto}
.list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.list.plain{box-shadow:none;border:0;border-radius:0;background:transparent}
.row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.list.plain .row{padding:10px 0}
.row:last-child{border-bottom:0}
.row.hide{display:none}
.row-main{flex:1;min-width:0;color:var(--ink)}
.row-title{font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.row-sub{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin-top:2px;flex-wrap:wrap}
.row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.8rem;color:var(--muted)}
.row.edit-row{flex-wrap:wrap}
.plainlist{list-style:none;margin:0;padding:0}
.plainlist li{padding:8px 0;border-bottom:1px solid var(--line-2)}.plainlist li:last-child{border-bottom:0}
.empty{padding:22px;text-align:center;color:var(--muted)}
.empty.small{padding:10px;font-size:.9rem}
.contact{display:flex;gap:4px}.contact a{padding:4px;font-size:1rem}
.contact.nudge{flex-direction:row;gap:6px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--paper-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.rule{border:0;border-top:1px solid var(--line-2);margin:14px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cat-title{margin:0;font-size:.95rem}
.cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 6px;font-weight:700}
.stat{text-align:center;padding:12px 8px}
.stat b{display:block;font-size:1.7rem;letter-spacing:-.02em;line-height:1}
.stat span{font-size:.78rem;color:var(--muted)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;padding:8px}
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th,.table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--card-2);position:sticky;top:0}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table.compact{font-size:.85rem}.table.compact th,.table.compact td{padding:7px 10px}
.table tr.slip td:first-child{border-left:3px solid var(--accent)}
.days-cell{display:flex;flex-wrap:wrap;gap:6px}
.days-cell span{background:var(--paper-2);border-radius:8px;padding:2px 8px;font-size:.82rem;white-space:nowrap}
.days-cell b{margin-left:4px}

/* ---------- badges, chips, progress ---------- */
.badge{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);background:var(--info-soft);color:var(--info-ink);white-space:nowrap}
.badge.warn{background:var(--accent-soft);color:var(--accent-ink)}
.badge.dim{background:var(--paper-2);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.party{background:var(--warn-soft);color:var(--warn-ink)}
.chip{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);background:var(--ok-soft);color:var(--ok-ink);font-size:.76rem;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.rank-picker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rank-picker .chip{background:var(--paper-2);color:var(--ink);font-weight:600;font-size:.85rem;padding:5px 11px}
.rank-picker .chip.on{background:var(--ink);color:var(--paper)}
.eligible{color:var(--ok);font-weight:700}
.prog{display:inline-block;width:70px;height:6px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden;vertical-align:middle}
.prog i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.prog.big{width:100%;height:10px;margin-top:8px}
.prog-n{font-variant-numeric:tabular-nums}
.ready{font-weight:700;font-size:.78rem;padding:2px 8px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--muted)}
.ready.ready{background:var(--ok-soft);color:var(--ok-ink)}.ready.close{background:var(--warn-soft);color:var(--warn-ink)}
.ready-bar{width:90px}
.lv{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--line);vertical-align:middle;flex:none}
.lv1{background:#e2b894}.lv2{background:var(--warn)}.lv3{background:var(--ok)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.85rem;color:var(--muted);margin:0 0 10px}
.legend .lv{margin-right:4px}
.mbadge{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--muted)}
.mbadge.got{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ---------- notices ---------- */
.flash,.notice{padding:12px 14px;border-radius:var(--r-sm);margin-bottom:12px;font-size:.95rem}
.flash.ok,.notice.ok{background:var(--ok-soft);color:var(--ok-ink)}
.flash.error,.notice.error{background:var(--accent-soft);color:var(--accent-ink)}
.notice-card.unread,.teach-note,.waiver-card,.checkin-card,.brief-card{border-left:4px solid var(--accent)}
.test-note,.nudge-card{border-left:4px solid var(--warn)}
.digest-card{border-left:4px solid var(--ok)}
.pending-note{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-ink)}
.brief{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:8px;color:var(--ink)}
.keypoints{display:block;font-size:.85rem;color:var(--ink-2);background:var(--card-2);border-left:3px solid var(--warn);padding:6px 10px;border-radius:0 8px 8px 0;margin-top:4px;white-space:pre-line}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-pill);font-size:.92rem;opacity:0;pointer-events:none;transition:.2s;z-index:60;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%)}
@media(min-width:900px){.toast{bottom:28px;left:calc(50% + var(--side-w)/2)}}
.install{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r);background:var(--ok-soft);border:1px solid var(--ok)}
.install-text{flex:1;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.install-text span{color:var(--muted)}
.ios-share{display:inline-block;transform:translateY(1px)}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;background:rgba(20,15,10,.5);z-index:70;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.sheet.show{opacity:1}
.sheet-body{background:var(--card);width:100%;max-width:540px;border-radius:22px 22px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(20px);transition:transform .18s;max-height:92dvh;overflow:auto}
.sheet.show .sheet-body{transform:none}
.sheet-body.tall{max-height:92dvh}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:8px}
@media(min-width:760px){.sheet{align-items:center}.sheet-body{border-radius:22px;max-height:86vh}}

/* ---------- login / public ---------- */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:30px 26px;text-align:center}
.enroll-card{max-width:560px}
.login-logo{border-radius:16px;margin-bottom:8px}
.login-card h1{margin-bottom:16px}
.login-card .form{text-align:left}
.login-card .btn-block{margin-top:4px}
.hp{position:absolute;left:-9999px}

/* ---------- attendance ---------- */
.present{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--card);flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .15s,border-color .15s}
.present svg{width:24px;height:24px;fill:var(--faint);transition:fill .15s}
.present.on{background:var(--ok);border-color:var(--ok)}
.present.on svg{fill:#fff}
.present:active{transform:scale(.92)}
.present.busy{opacity:.6;pointer-events:none}
.present.sm{width:38px;height:38px}.present.sm svg{width:20px;height:20px}
.pick{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pick input{appearance:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);background:var(--card);position:relative;margin:0;cursor:pointer}
.pick input:checked{background:var(--accent);border-color:var(--accent)}
.pick input:checked::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bulkbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));z-index:50;background:var(--ink);color:var(--paper);padding:10px 12px;border-radius:var(--r-pill);display:flex;gap:8px;align-items:center;box-shadow:var(--shadow);white-space:nowrap}
.bulkbar .btn{background:var(--paper);color:var(--ink)}.bulkbar .btn-primary{background:var(--accent);color:#fff}
@media(min-width:900px){.bulkbar{bottom:24px;left:calc(50% + var(--side-w)/2)}}
.lapsed-ctl{margin:-4px 0 10px}
.lapsed-ctl select{width:auto;display:inline-block;padding:6px 28px 6px 10px;margin-left:6px}
.attend-add{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.attend-add input[type=date]{width:auto;flex:1;min-width:150px}
.dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.dates span{background:var(--paper-2);border-radius:10px;padding:8px 4px;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.dates span.self{outline:2px solid var(--ok)}
.here-card{padding:8px}
.here{width:100%;border:0;background:var(--card);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:inherit;color:var(--ink);transition:background .15s}
.here svg{width:54px;height:54px;fill:var(--faint);border:3px solid var(--line);border-radius:50%;padding:10px;transition:.15s}
.here.on{background:var(--ok-soft)}
.here.on svg{fill:#fff;background:var(--ok);border-color:var(--ok)}
.here-label{font-weight:800;font-size:1.2rem}
.here-sub{color:var(--muted);font-size:.9rem}
.here.busy{opacity:.6;pointer-events:none}
.here.static{cursor:default;flex-direction:column;align-items:flex-start;gap:4px}
.here.sm{padding:10px 12px;flex-direction:row;gap:10px}.here.sm svg{width:36px;height:36px;padding:6px}.here.sm .here-label{font-size:1rem}
.rsvp{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font:inherit;cursor:pointer;text-align:left;color:var(--ink)}
.rsvp .rsvp-label{font-weight:700}
.rsvp.on{background:var(--ok-soft);border-color:var(--ok)}
.rsvp-card{padding:10px}

/* ---------- requirements / mastery ---------- */
.reqs{list-style:none;margin:0;padding:0}
.reqs li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.reqs li:last-child{border-bottom:0}
.reqs .tick{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.reqs li.done .tick{background:var(--ok);border-color:var(--ok)}
.reqs li.done .tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.reqs li.done>span:not(.tick):not(.lv){color:var(--muted)}
.reqs small{margin-left:auto;color:var(--muted);white-space:nowrap}
.reqs.tappable li{cursor:pointer;user-select:none}
.reqs.tappable li:active{background:var(--card-2)}
.has-kp>span:not(.tick):not(.lv){display:flex;flex-direction:column;flex:1;min-width:0}
.lvrow .lv{margin-right:2px}
.selfseg{display:inline-flex;gap:4px;margin-top:6px}
.selfseg button,.scoreseg button{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:4px 10px;font:inherit;font-size:.74rem;font-weight:700;color:var(--muted);cursor:pointer}
.selfseg button.on.s1,.scoreseg button.on.k1{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.selfseg button.on.s2,.scoreseg button.on.k2{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-ink)}
.selfseg button.on.s3,.scoreseg button.on.k3{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
.reqs li.done .selfseg{display:none}
.prep li{display:flex;align-items:center;gap:8px}
.grid-card{overflow:auto;max-height:75vh;padding:0}
.mgrid{border-collapse:collapse;font-size:.85rem;min-width:100%}
.mgrid th,.mgrid td{padding:6px 8px;border-bottom:1px solid var(--line-2);text-align:center;white-space:nowrap}
.mgrid thead th{position:sticky;top:0;background:var(--card);z-index:2;vertical-align:bottom;height:120px}
.mgrid th.req span{writing-mode:vertical-rl;transform:rotate(180deg);display:inline-block;max-height:110px;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:.78rem}
.mgrid th.who{position:sticky;left:0;background:var(--card);z-index:3;text-align:left;min-width:140px}
.mgrid tbody th.who{font-weight:700;z-index:1}
.mgrid th.who small,.mgrid td.sum small{display:block;font-weight:400;color:var(--muted)}
.mgrid td .lv{width:18px;height:18px;cursor:help}
.mgrid td.struggle{background:var(--warn-soft)}
.struggle-sw{display:inline-block;width:16px;height:16px;border-radius:4px;background:var(--warn-soft);border:1px solid var(--warn);vertical-align:middle;margin-right:4px}
.score-row{padding:10px 0;border-top:1px solid var(--line-2)}
.score-row:first-of-type{border-top:0}
.score-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score-head strong{flex:1;min-width:140px}
.scoreseg{display:inline-flex;gap:4px}
.score-comment{margin-top:8px}
.eval-list li{padding:8px 0;border-top:1px solid var(--line-2)}.eval-list li:first-child{border-top:0}
.grade-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.grade-label{flex:1;min-width:0}

/* ---------- syllabus / catalog / picker ---------- */
.ladder{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:10px;scrollbar-width:thin}
.rung{flex:none;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);min-width:110px}
.rung.on{border-color:var(--accent);background:var(--accent-soft)}
.rung-name{font-weight:800}.rung-meta{font-size:.72rem;color:var(--muted);white-space:nowrap}
.rung.add{justify-content:center;align-items:center;border-style:dashed;color:var(--accent-dk);font-weight:700}
.rank-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.add-row{position:relative;margin-top:10px}
.add-input{padding:11px 14px}
.add-suggest,.suggest{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.add-suggest{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;margin-top:4px}
.suggest button,.add-suggest button{text-align:left;border:1px solid var(--line);background:var(--card);padding:9px 12px;border-radius:10px;font:inherit;cursor:pointer;color:var(--ink)}
.suggest button:hover,.add-suggest button:hover{border-color:var(--accent)}
.suggest small{color:var(--muted);margin-left:6px}
.add-suggest button.create{color:var(--accent-dk);font-weight:700}
.pick-bar{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.picker #pick-search{width:100%;margin:4px 0 10px}
.pick-list{max-height:48vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:4px 10px}
.pick-group h4{margin:10px 0 4px;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px}
.pick-group h4 .link-btn{margin-left:auto;text-transform:none;letter-spacing:0}
.pick-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-2);font-weight:500;cursor:pointer}
.pick-row:first-of-type{border-top:0}
.pick-row.on{color:var(--muted)}
.pick-row input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.pick-new{margin:12px 0 4px}
.pick-new summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent-dk)}
.pick-new .inline-fields{margin-top:8px}
.tech-row{cursor:pointer}
.tech-row:hover{background:var(--card-2)}
.t-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:1rem}
.t-attack{color:var(--muted)}
.t-tech{font-weight:800}
.t-var{color:var(--accent-dk);font-style:normal;font-size:.9rem}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.t-notes{margin-top:4px;font-size:.85rem;color:var(--muted);border-left:2px solid var(--line);padding-left:8px}
.chev{font-size:1.5rem;color:var(--faint);line-height:1}
.notes-inline{flex-basis:100%;margin-top:6px;font-size:.9rem;padding:8px 10px}

/* ---------- plan ---------- */
h1.date-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
h1.date-nav a{color:var(--faint);font-weight:400}
.meta-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 0}
.plan-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1100px){.plan-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.plan-list li.taught .row-title{color:var(--muted);text-decoration:line-through}
.add-line{display:flex;gap:8px;margin-top:12px}
.add-line input{flex:1;min-width:0}
.new-tech-fields{margin-top:6px}
.new-tech-fields summary{font-size:.8rem;color:var(--muted);cursor:pointer}
.new-tech-fields .inline-fields{margin-top:6px}
.build-card .focus-ranks{margin-bottom:10px}
.focus-ranks{display:flex;flex-wrap:wrap;gap:8px}
details.rotation summary{cursor:pointer;padding:6px 0}
details.rotation{margin-top:6px}
.sug-list li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.by-rank li{padding:6px 0}
.upcoming li,.evlist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line-2)}
.upcoming li:first-child,.evlist li:first-child{border-top:0}
.read-plan li{padding:10px 0;border-top:1px solid var(--line-2)}.read-plan li:first-child{border-top:0}
.read-plan li.taught strong{color:var(--muted);text-decoration:line-through}
.publish-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-head h2{margin:0;text-align:center;flex:1}
.cal-nav{font-size:1.3rem;line-height:1;padding:4px 12px;border-radius:var(--r-pill);color:var(--ink);background:var(--paper-2)}
.cal-nav.sm{font-size:1rem;padding:0 8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 0}
.cal-day{position:relative;aspect-ratio:1;border-radius:10px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--ink-2)}
.cal-day.out{opacity:.35}
.cal-day.att{background:var(--ok-soft);color:var(--ok-ink);font-weight:700}
.cal-day.self{box-shadow:inset 0 0 0 2px var(--ok)}
.cal-day.today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-day .mark{position:absolute;font-size:.6rem;font-weight:800;line-height:1}
.cal-day .mark.promo{top:3px;right:4px;color:var(--warn)}
.cal-day .mark.test{bottom:3px;right:4px;color:var(--accent-ink)}
.cal-day .mark.plan{bottom:3px;left:4px;color:var(--ink-2)}
.cal-day .mark.ready{top:3px;left:4px;color:var(--ok-ink);background:var(--ok-soft);border-radius:var(--r-pill);padding:1px 4px}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:10px 0 0}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--paper-2);vertical-align:middle;margin-right:4px}
.sw.att{background:var(--ok-soft)}.sw.self{background:var(--ok-soft);box-shadow:inset 0 0 0 2px var(--ok)}
.cal.big .cal-day{aspect-ratio:auto;min-height:64px;align-items:flex-start;justify-content:flex-start;padding:6px;font-weight:600}
.cal.big .cal-day .n{font-size:.8rem}
.cal.big .cal-day .count{position:absolute;right:6px;top:6px;background:var(--ok);color:#fff;border-radius:var(--r-pill);min-width:22px;padding:1px 6px;font-size:.72rem;text-align:center}
.cal.big .cal-day.att{background:var(--ok-soft)}
.cal.big .cal-day.future{background:var(--card-2)}
.cal.big .cal-day:hover{filter:brightness(.97)}
.cal.big .cal-day .mark.ready{top:auto;bottom:24px;left:6px;font-size:.7rem}
.cal.big .cal-day .classday{position:absolute;left:6px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--faint)}
@media(max-width:480px){.cal.big .cal-day{min-height:52px;padding:4px}.cal.big .cal-day .count{min-width:18px;font-size:.65rem}}
.mark.ev{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;padding:0 4px;font-size:.68rem;font-weight:800;background:var(--paper-2);color:var(--ink-2);position:static}
.cal-day .mark.ev{position:absolute;right:4px;bottom:4px}
.mark.ev.cancelled,.mark.ev.holiday{background:var(--accent-soft);color:var(--accent-ink)}
.mark.ev.seminar{background:var(--ok-soft);color:var(--ok-ink)}
.milestones li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.milestones .btn{margin-left:auto}

/* ---------- reports ---------- */
.range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:14px}
.range label{font-size:.8rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.range input[type=date],.range select{width:auto;padding:8px 10px}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:.7rem;color:var(--muted)}
.bar i{display:block;width:100%;max-width:38px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px}
.bar b{color:var(--ink);font-size:.78rem}
.linklist li{padding:8px 0;border-top:1px solid var(--line-2)}.linklist li:first-child{border-top:0}
.perms td,.perms th{text-align:center}.perms td:first-child,.perms th:first-child{text-align:left}
.perms input[type=radio]{width:18px;height:18px;accent-color:var(--accent);margin:0}
.print-head{display:none}

/* ---------- chat / messages / hub / handbook ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.hub-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-weight:700;color:var(--ink);box-shadow:var(--shadow)}
.hub-item:hover{border-color:var(--accent)}
.hub-item:active{background:var(--accent-soft)}
.hub-h{margin:6px 0 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.compose textarea{min-height:120px}
.notice-card h2{margin-bottom:2px}
.push-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.chat-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.chat-log{height:min(64dvh,680px);overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chat-day{align-self:center;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:6px 0 2px}
.chat-msg{max-width:88%;background:var(--paper-2);border-radius:14px 14px 14px 4px;padding:8px 12px}
.chat-msg.mine{align-self:flex-end;background:var(--accent-soft);border-radius:14px 14px 4px 14px}
.chat-meta{font-size:.78rem;margin-bottom:2px}
.chat-body{white-space:pre-wrap;word-break:break-word}
.chat-compose{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.chat-compose textarea{flex:1;resize:none;min-height:42px}
.chat-reports .plainlist li{display:block;padding:10px 0}
.chat-reports .chat-body{margin:2px 0}
.chat-report-actions{margin:8px 0 0;display:flex;gap:8px}
.gloss{margin:0}
.gloss-row{padding:8px 0;border-top:1px solid var(--line-2)}.gloss-row:first-child{border-top:0}
.gloss dt{font-weight:700}
.gloss dd{margin:2px 0 0;color:var(--ink-2)}
.gloss-new{flex-wrap:wrap}
.g-term{font-weight:800}
.g-kanji{font-size:1.15rem;margin-left:8px;font-weight:500}
.g-kana{color:var(--muted);margin-left:6px;font-size:.9rem}
.page-title-input{font-size:1.3rem;font-weight:800;width:100%;margin-bottom:10px}
.page-body h3{margin:16px 0 6px}
.page-body ul{padding-left:20px}
.journal-entry{padding:10px 0;border-top:1px solid var(--line-2)}.journal-entry:first-of-type{border-top:0}
.journal-entry p{margin:2px 0}
#j-suggest{position:relative;margin-top:4px}
#j-suggest button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font:inherit;cursor:pointer;border-radius:8px;color:var(--ink)}
#j-suggest button:hover{background:var(--ok-soft)}
.dir .row-sub a{color:inherit}
.waiver-text{white-space:normal;line-height:1.65;color:var(--ink-2);max-height:48vh;overflow:auto;padding:4px 2px}
.contact-log li{padding:8px 0;border-bottom:1px solid var(--line-2)}

/* ---------- QR / check-in / family / dues ---------- */
.sheet-body.qr{text-align:center}
.sheet-body.qr .seg{justify-content:center;margin-bottom:12px}
.qr-box{background:#fff;border-radius:16px;padding:12px;display:inline-block;max-width:100%}
.qr-box svg{width:min(70vw,320px);height:auto;display:block}
.qr-url{font-weight:700;margin:12px 0 2px;word-break:break-all}
.checkin-grid{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
#checkin-qr svg{width:min(44vw,220px);height:auto;display:block}
.checkin-card .big{margin:4px 0}
@media(max-width:520px){.checkin-grid{grid-template-columns:1fr;justify-items:center;text-align:center}}
.kid-card .grid-2 .rsvp{height:100%}
.dues-card .inline-fields{flex-wrap:wrap}
.jump{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.jump a{padding:5px 11px;border-radius:var(--r-pill);background:var(--paper-2);font-size:.82rem;font-weight:600;color:var(--ink-2)}

/* ---------- print ---------- */
@media print{
  body{background:#fff;padding:0;font-size:12px;color:#000}
  .topbar,.tabbar,.sidebar,.no-print,.noprint,.toast,.search-wrap,.page-actions,.seg,.install,.sheet,.jump{display:none!important}
  .page{max-width:none;padding:0;margin:0}
  .print-head{display:block;margin-bottom:10px}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid}
  .table th{background:#f3f3f3}
  a{color:inherit}
}
/* ---------- avatars / hero ---------- */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.xs{width:28px;height:28px;font-size:.7rem}
.avatar.sm{width:34px;height:34px;font-size:.8rem}
.avatar.lg{width:72px;height:72px;font-size:1.4rem}
.avatar.xl{width:96px;height:96px;font-size:1.8rem}
.row-title .avatar.xs{display:none}
.list.plain .row-title .avatar.xs,.row:not(:has(> .avatar)) .row-title .avatar.xs{display:inline-flex}
.hero{align-items:center}
.hero-main{display:flex;align-items:center;gap:14px;min-width:0}
.hero-main h1{margin:0}
.photo-wrap{position:relative;flex:none}
.photo-edit{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;border:2px solid var(--card)}
.photo-row{display:flex;align-items:center;gap:16px}
.stats-card .stats-row{padding:0}
.edit-card summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.edit-card summary::-webkit-details-marker{display:none}
.edit-card summary::after{content:"›";margin-left:auto;font-size:1.4rem;color:var(--faint);transform:rotate(90deg)}
.edit-card[open] summary::after{transform:rotate(-90deg)}
section{scroll-margin-top:70px}
.icon-link .avatar.xs{width:30px;height:30px}
/* fixes from the first screenshot review */
@media(min-width:900px){.tabbar{display:none!important}body{padding-bottom:0}}
.cal:not(.big){max-width:560px}
.cal:not(.big) .cal-day{aspect-ratio:auto;height:44px}
@media(max-width:480px){.hero .page-actions{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;scrollbar-width:none}.hero .page-actions::-webkit-scrollbar{display:none}}
.page-head.hero .hero-main h1{font-size:1.45rem}
@media(min-width:900px){.page-head.hero .hero-main h1{font-size:1.8rem}}

/* ---------- settings ---------- */
.settings .card>h2{margin-bottom:10px}
.k-link-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.k-link-row .qr-box svg{width:140px}
.k-url{display:inline-block;word-break:break-all;font-size:.8rem}
/* ---------- kiosk ---------- */
body.kiosk{padding:0;background:var(--paper);-webkit-user-select:none;user-select:none}
.k-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--card)}
.k-head .brand{font-size:1.3rem}.k-head .brand img{width:40px;height:40px}
.k-clock{font-size:1.1rem;font-weight:600;color:var(--ink-2)}
.k-main{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:16px 22px 30px;max-width:1400px;margin:0 auto}
@media(max-width:820px){.k-main{grid-template-columns:1fr}}
.k-line{font-size:1.2rem;font-weight:700;margin:0 0 12px}
.k-notice{font-size:1.2rem;font-weight:700}
.k-tap h2,.k-qr h2{font-size:1.3rem}
.k-tap input{font-size:1.15rem;padding:14px 16px;margin-bottom:12px}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.k-member{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;background:var(--card-2);border:1px solid var(--line);border-radius:14px;font:inherit;font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer;text-align:center;min-height:132px}
.k-member:active{background:var(--accent-soft)}
.k-member.here{background:var(--ok-soft);border-color:var(--ok)}
.k-member b{position:absolute;top:8px;right:10px;color:var(--ok-ink);font-size:1.1rem}
.k-member span{line-height:1.2}
.k-qr{text-align:center}.k-qr .qr-box svg{width:min(60vw,420px)}
.k-faces{display:flex;flex-wrap:wrap;gap:12px}
.k-face{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;font-size:.8rem;font-weight:600;text-align:center}
.k-visit-row{display:flex;align-items:center;gap:14px}.k-visit .qr-box svg{width:120px}
.k-confirm-body{text-align:center}.k-big-face{display:flex;justify-content:center;margin:6px 0 10px}.k-confirm-body .sheet-actions{flex-direction:column;gap:8px}
.k-confirm-body .btn{font-size:1.1rem;padding:14px}

.status.open{background:var(--warn-soft);color:var(--warn-ink)}.status.planned{background:var(--info-soft);color:var(--info-ink)}.status.done{background:var(--ok-soft);color:var(--ok-ink)}.status.closed{background:var(--paper-2);color:var(--muted)}

/* calendar legend + class-day marker + glossary rows */
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:12px 0 0;font-size:.8rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.lg-mark{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;background:var(--paper-2);color:var(--ink-2);font-style:normal;font-weight:800;font-size:.68rem;padding:0 4px}
.lg-mark.ok{background:var(--ok-soft);color:var(--ok-ink)}.lg-mark.warn{background:var(--accent-soft);color:var(--accent-ink)}
.cal.big .cal-day .classday{top:auto;left:50%;bottom:5px;transform:translateX(-50%);width:14px;height:3px;border-radius:2px}
.g-dt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.g-dt .link-btn{margin-left:auto}
.g-kanji,.g-kana{margin-left:0}

.attn{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.attn .chip{background:var(--paper-2);color:var(--ink-2);padding:5px 11px}.attn .chip b{margin-left:4px;color:var(--accent-ink)}.attn .chip.on{background:var(--ink);color:var(--paper)}
.attn select.mini{margin-left:auto}

/* ---------- roster ---------- */
.roster-head{margin:2px 0 12px}
.rh-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rh-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rh-day{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:10px;box-shadow:var(--shadow)}
.day-nav{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--ink-2);background:var(--paper-2)}
.day-nav.off{opacity:.3}
.day-mid{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.day-mid strong{font-size:1.05rem}
.day-mid span{font-size:.8rem}
.here-stat{margin-left:auto;display:flex;align-items:baseline;gap:5px;padding:0 6px}
.here-stat b{font-size:1.7rem;letter-spacing:-.02em;color:var(--ok-ink)}
.here-stat span{font-size:.8rem;color:var(--muted)}
.rtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:0 16px}
.rtabs::-webkit-scrollbar{display:none}
.rtabs a{flex:none;padding:7px 13px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font-weight:600;font-size:.88rem;white-space:nowrap}
.rtabs a.on{background:var(--ink);color:var(--paper)}
.rtabs a b{margin-left:4px;background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:0 6px;font-size:.72rem}
.rtabs a.on b{background:var(--accent)}
.rtools{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rtools input{flex:1;min-width:0;padding:10px 13px}
.rtools select.mini{max-width:46%;padding:9px 28px 9px 10px;font-size:.85rem}
.roster-list .rrow{padding:8px 10px 8px 12px;gap:10px;transition:background .15s}
.roster-list .rrow.here{background:var(--ok-soft)}
.rmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:var(--ink)}
.avatar.md{width:46px;height:46px;font-size:.95rem}
.rtext{min-width:0;flex:1}
.rname{font-weight:700;font-size:1rem;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.tag{display:inline-block;font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:var(--paper-2);color:var(--muted);vertical-align:middle}
.tag.warn{background:var(--accent-soft);color:var(--accent-ink)}.tag.info{background:var(--info-soft);color:var(--info-ink)}.tag.ok{background:var(--ok-soft);color:var(--ok-ink)}.tag.party{background:var(--warn-soft);color:var(--warn-ink)}
.rsub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-top:2px}
.rsub .rk{color:var(--ink-2);font-weight:600}
.rsub .prog{width:56px;height:5px}
.rsub .prog-n{font-size:.78rem}
.roster-list .present{width:44px;height:44px;margin-left:2px}
.rcontact{display:flex;gap:6px;flex:none}
.roster-list .chev{padding-right:4px}
.roster-list .empty{padding:28px}
@media(min-width:900px){
  .rtabs{margin:0 0 10px;padding:0}
  .roster-list .rrow{padding:10px 14px}
  .rsub .prog{width:110px}
  .rh-day{max-width:560px}
}

/* ---------- roster: mat view ---------- */
.mat-day{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:10px;box-shadow:var(--shadow)}
.mat{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
@media(min-width:900px){.mat{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 6px 10px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;font:inherit;color:var(--ink);text-align:center;transition:transform .1s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.tile:has(.tile-link:active){transform:scale(.96)}
.tile-link{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;color:inherit;text-decoration:none}
.tile-link::after{content:"";position:absolute;inset:0;border-radius:16px}
.tile-mark{position:absolute;top:4px;right:4px;z-index:2;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:.95rem;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.tile-mark:active{transform:scale(.9)}
.tile-mark.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.tile-mark.busy{opacity:.6}
.tile.hide{display:none}
.tile.busy{opacity:.6}
.tile-photo{position:relative;width:72px;height:72px;border-radius:50%;overflow:visible;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.tile-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;filter:saturate(.7) opacity(.85);transition:filter .15s}
.tile-initials{font-weight:800;font-size:1.3rem;color:var(--muted)}
.tile-name{font-weight:700;font-size:.9rem;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-name span{color:var(--muted);font-weight:500}
.tile-tags{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.tile.on{border-color:var(--ok);background:var(--ok-soft)}
.tile.on .tile-photo img{filter:none}
.tile.on .tile-initials{color:var(--ok-ink)}
.mat-foot{margin:14px 0 0;text-align:center}
.rgroup{margin:14px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.rgroup small{font-weight:600;margin-left:4px}
.rtabs a.dim{opacity:.55}
.ract{display:flex;gap:6px;flex:none;align-items:center}
.rsub .warnt{color:var(--accent-ink);font-weight:600}
.roster-head .seg a{padding:7px 16px}

.tile-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;max-height:2.3em}

/* photo cropper */
.crop-body{text-align:center}
.crop-stage{width:min(300px,80vw);aspect-ratio:1;margin:0 auto 12px;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 4px var(--line)}
.crop-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#crop-zoom{width:min(300px,80vw);accent-color:var(--accent)}
.photo-edit{font:inherit}

/* permissions list */
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);flex-wrap:wrap}
.perm-row:first-child{border-top:0}
.perm-text{flex:1;min-width:180px}
.perm-row .seg.small{flex:none}
.perm-row .seg.small input+span{padding:7px 11px}

.prospect-card{border-left:4px solid var(--warn)}.prospect-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tile.nowaiver{border-style:dashed;color:var(--ink)}

.g-lit{display:block;font-style:italic;color:var(--muted);font-size:.9em}.g-lit::before{content:'lit. '}

.page-head+.seg,.seg[role=tablist]{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seg[role=tablist]::-webkit-scrollbar{display:none}.seg[role=tablist] a{white-space:nowrap;flex:none}

.sig-preview{max-height:80px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px}

#sig-pad{width:100%;aspect-ratio:3/1;background:#fff;border:1.5px dashed var(--line);border-radius:12px;touch-action:none;cursor:crosshair;display:block}
.sig-row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;display:inline-block}.sig-preview{max-height:80px;max-width:100%;background:none;border:0;padding:0}

/* journals */
.j-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.j-who{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.j-body{margin:0 0 8px;white-space:pre-wrap}
.j-reply{border-left:3px solid var(--accent);background:var(--paper-2);border-radius:0 10px 10px 0;padding:8px 12px;margin:8px 0}
.j-reply p{margin:2px 0}
.j-reply-form textarea{width:100%;margin-bottom:6px}
.stats-row a.stat{color:inherit;text-decoration:none;border-radius:10px}.stats-row .stat.on{outline:2px solid var(--accent)}

.setup-card{border-left:4px solid var(--accent)}

.tonight-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.gaps{margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px}.gaps-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#gaps-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-2)}#gaps-list li:first-child{border-top:0}#gaps-list li span{flex:1}
.btn-danger{background:var(--danger,#b3261e);color:#fff}

/* ---- progress page ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat b small{font-size:.9rem;color:var(--muted);font-weight:600;letter-spacing:0}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link .btn{margin-top:10px}
.progress-card h2 .badge{vertical-align:middle;margin-left:6px}
.pr-list{list-style:none;margin:0;padding:0}
.pr-row{padding:12px 0;border-bottom:1px solid var(--line-2)}
.pr-row:last-child{border-bottom:0;padding-bottom:4px}
.pr-head{display:flex;align-items:flex-start;gap:10px}
.pr-head .lv{margin-top:3px}
.pr-label{flex:1;min-width:0;font-weight:600;display:flex;flex-direction:column}
.pr-head small{color:var(--muted);white-space:nowrap;font-size:.78rem;margin-top:3px}
.pr-row.done .pr-label{color:var(--muted)}
.pr-act{display:flex;gap:8px;margin:10px 0 0 26px}
.pr-act .selfseg{flex:1;display:flex;gap:6px;margin:0}
.pr-act .selfseg button{flex:1;min-height:44px;padding:0 6px;font-size:.85rem}
.pr-note{min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);font:inherit;font-size:.85rem;font-weight:700;color:var(--ink-2);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pr-note:active{transform:scale(.96)}
.pr-note.has{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.pr-ro{margin:6px 0 0 26px}

.where-rank{margin-top:6px}
.where-rank .cat small{font-weight:600;letter-spacing:0;text-transform:none;margin-left:4px}
.where-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.where-list li a{color:inherit;text-decoration:none}
.where-list .prog{margin-left:auto}

.rank-now{font-weight:700;color:var(--ink)}
.where-rank .cat .arrow{color:var(--ink-2);font-weight:600;letter-spacing:0;text-transform:none}
.tile-kanji{position:absolute;top:6px;left:9px;z-index:2;pointer-events:none;font-size:1rem;font-weight:700;line-height:1;color:var(--ink-2);letter-spacing:.02em}
.tile.on .tile-kanji{color:var(--ok-ink)}
.where-rank .cat .kanji{font-size:.95rem;letter-spacing:0;color:var(--ink);vertical-align:-1px}
.kanji{font-weight:700;color:var(--ink);letter-spacing:0}
.rank-now .kanji{margin-right:1px}