/* WeSchool — brutalist / editorial system
   ENDLESS font: place Endless-Regular.ttf from the supplied Behance project in public/fonts/.
   The interface intentionally avoids gradients, card stacks, decorative shadows and left-side status bars.
*/
@font-face {
  font-family: 'ENDLESS';
  src: local('ENDLESS Regular'), local('ENDLESS'), url('/fonts/Endless-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --bg: #f5f3ee;
  --surface: #fbfaf6;
  --surface-2: #ece9e1;
  --ink: #151515;
  --muted: #68655f;
  --line: #1b1b1b;
  --soft-line: #c9c5bc;
  --accent: #2563eb;
  --accent-ink: #fff;
  --danger: #a3212d;
  --success: #0c6b43;
  --radius: 0px;
  --content-max: 1480px;
  --tap: 44px;
}
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #11110f;
  --surface: #171714;
  --surface-2: #22221e;
  --ink: #f3f1eb;
  --muted: #aaa69d;
  --line: #eeeae0;
  --soft-line: #5d5a53;
  --accent: #2563eb;
  --accent-ink: #fff;
  --danger: #ff858f;
  --success: #5be0a8;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 500 14px/1.45 'ENDLESS','Avenir Next','Century Gothic',system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- landing ---------- */
.login {
  min-height: 100dvh;
  padding: max(26px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,560px);
  align-items: center;
  gap: clamp(40px,8vw,120px);
}
.login-brand {
  position: absolute; top: 26px; left: max(28px,env(safe-area-inset-left));
  font-size: 28px; font-weight: 900; letter-spacing: -.06em;
}
.login-theme {
  position: absolute; top: 24px; right: max(28px,env(safe-area-inset-right));
}
.login-card {
  display: contents;
  grid-column: 1 / -1;
}
.login-copy { max-width: 820px; padding-left: clamp(0px,4vw,70px); }
.login-kicker,.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.login-kicker { margin-bottom: 20px; }
.login-copy h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(52px,7vw,104px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 900;
}
.login-copy .sub {
  margin: 30px 0 0;
  max-width: 560px;
  font-size: clamp(18px,2vw,25px);
  line-height: 1.16;
  color: var(--ink);
}
.login-panel {
  border-left: 1px solid var(--line);
  padding: 28px 0 28px clamp(28px,4vw,58px);
  max-width: 560px;
}
.login-panel .field { margin-bottom: 20px; }
.login-submit { width: 100%; justify-content: center; min-height: 52px; }
.login-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  margin: 24px 0;
  color: var(--muted); font-size: 12px;
}
.login-divider::before,.login-divider::after { content:''; border-top:1px solid var(--soft-line); }
.passkey-login { width:100%; justify-content:center; min-height:52px; }
.login-note { margin: 14px 0 0; }
.login-wordmark {
  position:absolute; left:0; right:0; bottom:-.18em;
  font-size: clamp(120px,22vw,340px); line-height:.75;
  font-weight:900; letter-spacing:-.1em; color:color-mix(in srgb,var(--ink) 10%,transparent);
  pointer-events:none; user-select:none; white-space:nowrap; overflow:hidden;
}

/* ---------- application shell ---------- */
.app {
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 216px minmax(0,1fr);
}
.side {
  position: sticky; top:0; height:100dvh;
  border-right:1px solid var(--line);
  padding: 28px 18px max(22px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  background:var(--bg);
  z-index:10;
}
.brand {
  display:flex; align-items:center; gap:10px;
  padding:0 6px 38px;
  font-size:22px; font-weight:900; letter-spacing:-.06em;
}
.mark { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; background:var(--ink); color:var(--bg); border:1px solid var(--line); }
.mark img { width:100%;height:100%;display:block;object-fit:cover; }
.nav { display:grid; gap:1px; }
.nav button {
  width:100%; min-height:46px; border:0; border-bottom:1px solid var(--soft-line);
  background:transparent; padding:10px 7px; cursor:pointer;
  display:flex; align-items:center; gap:11px; text-align:left;
  color:var(--muted); font-size:13px; font-weight:800; letter-spacing:-.01em;
}
.nav button:first-child { border-top:1px solid var(--soft-line); }
.nav button:hover,.nav button.active { background:var(--ink); color:var(--bg); }
.nav-icon { display:flex; flex:0 0 auto; }
.nav-icon svg { width:17px;height:17px;display:block; }
.nav-label { white-space:nowrap; }
.side-foot { margin-top:auto; padding:20px 6px 0; color:var(--muted); font-size:10px; line-height:1.3; }

.content { min-width:0; padding:0 42px 70px; }
.top {
  min-height:112px; margin:0 -42px 36px; padding:26px 42px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.eyebrow { color:var(--muted); margin-bottom:6px; }
.top h1 { margin:0; font-size:clamp(32px,4vw,58px); line-height:.9; letter-spacing:-.07em; font-weight:900; }
.actions { display:flex; align-items:center; gap:8px; }
.avatar {
  width:44px;height:44px; border:1px solid var(--line); background:var(--accent); color:var(--accent-ink);
  display:grid;place-items:center; font-weight:900; cursor:pointer;
}

/* ---------- controls ---------- */
.icon-btn,.button,.tab {
  min-height:var(--tap); border:1px solid var(--line); border-radius:0; background:transparent;
  color:var(--ink); cursor:pointer; font-weight:800;
}
.icon-btn { width:44px; display:grid; place-items:center; flex:0 0 auto; }
.icon-btn svg { width:17px;height:17px; }
.icon-btn:hover,.button:hover,.tab:hover { background:var(--surface-2); }
.button { padding:10px 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.button svg { width:14px;height:14px; }
.button.primary { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.button.primary:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--ink); }
.button.danger { color:var(--danger); border-color:var(--danger); }
.button.small { min-height:36px; padding:7px 10px; font-size:11px; }

/* ---------- content blocks ---------- */
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.card {
  min-width:0; padding:22px; background:var(--surface); border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; box-shadow:none;
}
.card-title { margin:0 0 18px; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.card-head .card-title { margin:0; }
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.metric { font-size:clamp(44px,5vw,74px); font-weight:900; line-height:.85; letter-spacing:-.08em; }
.muted { color:var(--muted); }.tiny{font-size:11px}.empty{color:var(--muted);padding:22px 0}.push{margin-left:auto}.done{text-decoration:line-through;opacity:.5}
.list { display:grid; }
.row { min-width:0; display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 0; border-bottom:1px solid var(--soft-line); cursor:pointer; }
.row:last-child { border-bottom:0; }
.row:hover { background:var(--surface-2); }
.badge { padding:4px 7px; border:1px solid var(--line); border-radius:0; font-size:10px; font-weight:900; white-space:nowrap; background:transparent; color:var(--ink); }
.badge.gold { background:var(--accent); color:var(--accent-ink); border-color:var(--line); }.badge.red{color:var(--danger);border-color:var(--danger)}
.dot { width:8px;height:8px;border-radius:50%;background:var(--ink);flex:0 0 auto; }

/* ---------- pages / toolbars ---------- */
.page-intro { margin:-14px 0 24px; color:var(--muted); }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.toolbar-left,.toolbar-actions { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.toolbar-actions { justify-content:flex-end; }
.tabs { display:flex; overflow:auto; border-bottom:1px solid var(--line); }
.tab { min-height:var(--tap); padding:8px 12px; border-bottom:0; border-right:0; white-space:nowrap; }
.tab:last-child { border-right:1px solid var(--line); }.tab.active{background:var(--ink);color:var(--bg)}

/* ---------- forms ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:7px; min-width:0; }.field.full{grid-column:1/-1}.field.hidden{display:none}
.field label,.section-label { font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.field input,.field select,.field textarea {
  width:100%; min-height:46px; border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--ink); padding:10px 12px;
}
.field textarea { min-height:110px; resize:vertical; }.field input[type=color]{padding:4px;height:46px}.field input[type=file]{padding:8px}
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--soft-line); }
.action-spacer{flex:1}.notice{border:1px solid var(--line);background:var(--surface-2);padding:12px}.section-label{margin-bottom:2px}
.group-options { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); }.group-options label{display:flex;gap:7px;align-items:center;padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;font-weight:700}.group-options input{accent-color:var(--ink)}

/* ---------- schedule ---------- */
.schedule { overflow-x:auto; border:1px solid var(--line); border-right:0; }
.schedule-grid { min-width:680px; display:grid; grid-template-columns:58px repeat(5,minmax(115px,1fr)); gap:0; }
.schedule-grid > .cell { min-height:66px; padding:9px; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; font-size:11px; }
.schedule-grid > .head { min-height:42px; background:var(--ink); color:var(--bg); text-align:center; font-weight:900; }
.cell.lesson { position:relative; border-left:0 !important; background:var(--surface) !important; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.cell.lesson:hover { background:var(--surface-2) !important; }
.cell.lesson.cancelled { opacity:.5; text-decoration:line-through; border-left:0 !important; }
.cell.lesson small { color:var(--muted); margin-top:2px; }
.lesson-manage{align-items:stretch;justify-content:flex-start;gap:5px}.lesson-variant{display:grid;gap:1px;padding:5px 6px;border:1px solid var(--line);border-radius:0;background:var(--surface-2);cursor:context-menu}.lesson-variant small{color:var(--muted);font-size:10px}.hw-star{position:absolute;top:7px;right:7px;width:12px;height:12px;color:var(--ink)}.hw-star svg{width:100%;height:100%}

/* ---------- grades / files ---------- */
.grade-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line); }
.grade-layout { display:grid;gap:24px }.grade-card{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:16px;background:var(--surface)}.grade-card b{font-size:34px;letter-spacing:-.06em}
.class-files-grid { gap:0 !important; }
.file-row,.attachment-card,.passkey-row { display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--soft-line);min-width:0; }
.file-row:last-child,.passkey-row:last-child{border-bottom:0}.file-main{min-width:0}.file-main b{overflow-wrap:anywhere}.file-note{margin-top:4px;color:var(--muted)}.file-actions{display:flex;gap:6px;align-items:center;margin-left:auto}.attachment-card{border:1px solid var(--line);padding:12px}.attachment-card .icon{display:flex}.attachment-card .icon svg{width:18px;height:18px}
.member-chip,.group-chip{display:inline-flex;align-items:center;gap:5px;margin:0 7px 7px 0;padding:7px 9px;border:1px solid var(--line);border-radius:0;background:transparent}.member-chip .button{min-height:32px;padding:5px 7px}

/* ---------- modal ---------- */
.modal-wrap { position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--ink) 58%,transparent); }
.modal { position:relative;width:min(760px,100%);max-height:min(88dvh,900px);overflow:auto;background:var(--bg);border:1px solid var(--line);padding:28px;box-shadow:none;overscroll-behavior:contain; }
.modal h2{margin:0 42px 26px 0;font-size:30px;line-height:.95;letter-spacing:-.06em}.modal-close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:1px solid var(--line);background:transparent;font-size:25px;line-height:1;cursor:pointer}.modal-close:hover{background:var(--ink);color:var(--bg)}
.detail h3{font-size:28px;line-height:1;letter-spacing:-.05em;margin:12px 0}.detail-text{font-size:18px;line-height:1.3}

/* ---------- misc ---------- */
.date-popover{position:fixed;width:250px;background:var(--bg);border:1px solid var(--line);z-index:200;padding:10px}.date-pop-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.date-pop-head button,.date-pop-foot button{border:0;background:transparent;min-width:34px;min-height:34px;cursor:pointer}.date-pop-week,.date-pop-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.date-pop-week{font-size:10px;color:var(--muted);padding:8px 0}.date-pop-grid button{border:0;background:transparent;min-height:32px;cursor:pointer}.date-pop-grid button.sel{background:var(--ink);color:var(--bg)}.date-pop-foot{border-top:1px solid var(--soft-line);margin-top:8px;text-align:center}.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:11px 14px;font-weight:800;max-width:calc(100% - 28px)}
.welcome-overlay{position:fixed;inset:0;z-index:250;background:var(--bg);display:grid;place-items:center;text-align:center;cursor:pointer}.welcome-name{font-size:clamp(48px,9vw,110px);font-weight:900;letter-spacing:-.08em;line-height:.85}.welcome-continue{margin-top:18px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.theme-animating *{transition:background-color .22s ease,color .22s ease,border-color .22s ease}

@media (max-width: 900px){
  .login{grid-template-columns:1fr;align-content:center;gap:40px;padding-top:100px}.login-copy{padding-left:0}.login-copy h1{font-size:clamp(52px,14vw,90px)}.login-panel{border-left:0;border-top:1px solid var(--line);padding:28px 0 0;max-width:none}.login-wordmark{font-size:27vw}
  .app{display:block;width:100%;}.side{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:78px;min-height:78px;padding:0 max(8px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:40;}.brand,.side-foot{display:none}.nav{height:100%;display:flex;gap:0}.nav button{height:100%;min-height:0;border:0!important;border-right:1px solid var(--soft-line)!important;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:6px 2px;font-size:10px;line-height:1.05}.nav button:last-child{border-right:0!important}.nav button:hover,.nav button.active{background:var(--ink);color:var(--bg)}.nav-icon svg{width:19px;height:19px}.nav-label{white-space:normal}.content{padding:0 18px calc(96px + env(safe-area-inset-bottom));}.top{margin:0 -18px 26px;padding:20px 18px;min-height:92px}.top h1{font-size:36px}.actions{align-self:center}.grid{grid-template-columns:1fr}.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:1}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%;justify-content:flex-start}.toolbar-actions .button{flex:1}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.two-col{grid-template-columns:1fr}.modal-wrap{place-items:end center;padding:0}.modal{width:100%;max-height:92dvh;padding:22px 18px calc(22px + env(safe-area-inset-bottom));border-left:0;border-right:0;border-bottom:0}.modal h2{font-size:28px}.login{min-height:100dvh}.login-theme{top:18px;right:18px}.login-brand{top:20px;left:18px}.login-panel{padding-top:24px}.login-copy .sub{font-size:18px}.card{padding:18px}.schedule-grid{min-width:650px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ---------- v2 usability polish ---------- */
.avatar { overflow:hidden; }
.avatar .avatar-svg { width:34px; height:34px; }
.avatar-svg { width:48px; height:48px; display:block; }
.avatar-picker { display:flex; flex-wrap:wrap; gap:8px; }
.avatar-choice { width:58px; height:58px; min-height:58px; padding:5px; border:1px solid var(--soft-line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.avatar-choice:hover,.avatar-choice.selected { border-color:var(--ink); background:var(--accent); color:var(--accent-ink); }
.avatar-choice.selected { outline:2px solid var(--ink); outline-offset:2px; }
.task-subject { display:inline-block; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-right:7px; }
.task-title { font-weight:650; }
.schedule-summary-row { min-height:58px; }
.schedule-grid .head.today { background:var(--accent); color:var(--accent-ink); }
.schedule-grid .day-today:not(.lesson) { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
.schedule-grid .lesson.day-today { background:color-mix(in srgb,var(--accent) 18%,var(--surface)) !important; }
.today-mark { display:block; margin-top:3px; font-size:8px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.period-head { display:flex; flex-direction:column; justify-content:center; gap:2px; }
.period-head small { font-size:8px; font-weight:600; opacity:.8; }
.lesson-time { font-weight:800 !important; color:var(--ink) !important; }

/* Admin rows stay readable instead of becoming a single horizontal strip. */
.admin-user { align-items:flex-start; flex-wrap:wrap; }
.admin-user > div:first-child { min-width:160px; flex:1 1 180px; }
.reset-form { display:flex; gap:7px; flex:1 1 250px; min-width:220px; }
.reset-form input { min-width:0; flex:1; }
.class-admin-item .row { flex-wrap:wrap; }
.class-admin-item .row > b { margin-right:auto; }
.class-members { padding:10px 0 4px; overflow-wrap:anywhere; }
.inline-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.inline-form > input,.inline-form > select,.inline-form > textarea { min-width:0; flex:1 1 160px; }

/* Mobile: compact, deliberate spacing; modals and admin content never overflow the viewport. */
@media (max-width: 900px) {
  .content { padding-left:14px; padding-right:14px; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .top { margin-left:-14px; margin-right:-14px; padding:16px 14px; min-height:78px; margin-bottom:18px; align-items:center; }
  .top h1 { font-size:clamp(31px,9vw,44px); }
  .eyebrow { font-size:11px; }
  .actions { gap:6px; }
  .avatar,.icon-btn { width:42px; height:42px; min-height:42px; }
  .avatar .avatar-svg { width:32px; height:32px; }
  .grid { border-left:0; border-top:1px solid var(--line); }
  .card { padding:16px; }
  .card-title { margin-bottom:13px; }
  .row { gap:9px; min-height:50px; padding:9px 0; }
  .toolbar { margin-bottom:16px; gap:10px; }
  .toolbar-left,.toolbar-actions { width:100%; }
  .toolbar-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar-actions .button { width:100%; min-width:0; }
  .tabs { max-width:100%; }
  .tab { flex:1 1 auto; min-width:0; }
  .form-grid { gap:12px; }
  .field { gap:5px; }
  .field input,.field select,.field textarea { min-height:48px; padding:11px 12px; border-radius:6px; }
  .field textarea { min-height:120px; }
  .form-actions { gap:8px; }
  .form-actions .button { flex:1 1 auto; }
  .schedule { margin:0 -2px; }
  .schedule-grid { min-width:700px; grid-template-columns:66px repeat(5,minmax(126px,1fr)); }
  .schedule-grid > .cell { min-height:62px; padding:8px; }
  .schedule-grid > .head { min-height:46px; }
  .period-head small { font-size:8px; }
  .lesson b { font-size:12px; }
  .lesson small { font-size:9px; }
  .avatar-picker { gap:7px; }
  .avatar-choice { width:54px; height:54px; min-height:54px; }
  .admin-user { padding:12px 0; }
  .reset-form { flex-basis:100%; min-width:0; }
  .class-admin-item .row > .button { flex:1 1 calc(50% - 8px); }
  .member-chip { max-width:100%; flex-wrap:wrap; }
  .modal-wrap { padding:0; }
  .modal { max-height:94dvh; padding:18px 14px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
  .modal h2 { font-size:26px; margin-bottom:20px; }
  .modal-close { top:8px; right:8px; width:42px; height:42px; }
}

/* Cleaner controls: still brutalist, but less boxy on touch devices. */
.field input,.field select,.field textarea { border-radius:5px; background:var(--surface); transition:background-color .15s ease,border-color .15s ease; }
.field input:hover,.field select:hover,.field textarea:hover { border-color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--ink); background:var(--bg); outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent); outline-offset:1px; }
.button,.icon-btn,.tab { transition:background-color .15s ease,color .15s ease,border-color .15s ease; }

/* ---------- v3 Apple-oriented interaction + cleaner brutalism ---------- */
:root {
  --accent: #2563eb;
  --accent-ink: #fff;
  --control-h: 44px;
  --content-gutter: 22px;
}
[data-theme='dark'] {
  --accent: #60a5fa;
  --accent-ink: #07111f;
}

/* Keep brutalism, remove accidental visual noise. */
.grid { border: 0; gap: 1px; background: var(--line); }
.card { border: 0; }
.button, .icon-btn, .tab, .avatar-choice, input, select, textarea { border-radius: 0; }
.button, .icon-btn, .tab { min-height: var(--tap); }
.button { min-width: 120px; }
.form-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; align-items: stretch; }
.form-actions .button { width: 100%; min-width: 0; }
.form-actions .action-spacer { display: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 10px 12px; outline: none; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-width: 2px; padding: 9px 11px; }
.field label { display:block; margin-bottom: 7px; font-size: 12px; font-weight: 900; letter-spacing: .03em; }

/* More deliberate task hierarchy. */
.task-row { min-height: 70px; }
.task-main { min-width: 0; display: grid; gap: 3px; }
.task-subject { width: fit-content; margin: 0; padding: 4px 7px; background: var(--subject-color, var(--accent)); color: var(--subject-ink, var(--accent-ink)); border: 1px solid color-mix(in srgb, var(--subject-color, var(--accent)) 72%, var(--ink)); font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.task-title { font-weight: 800; font-size: 15px; }

/* Attachments: three calm, equal inputs instead of one ugly file control. */
.attachment-inputs { display: grid; gap: 8px; }
.attachment-inputs .file-input { min-height: 44px; padding: 7px; }
.attachment-list { display:grid; gap:8px; }
.attachment-card { min-width:0; display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:10px; }
.attachment-main { min-width:0; flex:1; overflow:hidden; }
.attachment-main b { display:block; overflow-wrap:anywhere; }

/* Admin: replace chip soup with calm sections. */
.class-admin-item { border-top: 1px solid var(--line); padding: 22px 0; }
.class-admin-item:first-child { border-top: 0; }
.class-admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--soft-line); }
.class-admin-head h3 { margin:2px 0 0; font-size:30px; letter-spacing:-.06em; }
.class-code { border:1px solid var(--line); padding:7px 10px; font-size:11px; font-weight:900; }
.class-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:18px; }
.class-admin-grid > div { padding:0 18px 18px 0; }
.class-admin-grid > div + div { border-left:1px solid var(--soft-line); padding:0 0 18px 18px; }
.group-list-clean { border-top:1px solid var(--soft-line); margin-bottom:10px; }
.group-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.group-add-form input { width:100%; min-width:0; min-height:var(--tap); border:1px solid var(--line); padding:10px 12px; background:var(--surface); color:var(--ink); }
.group-row { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--soft-line); }
.group-row .icon-btn { width:36px; min-height:36px; }
.schedule-config-summary { display:grid; gap:3px; min-height:88px; padding:12px 0; color:var(--muted); }
.schedule-config-summary b { color:var(--ink); }
.class-admin-actions { display:flex; flex-wrap:wrap; gap:8px; padding:14px 0; border-top:1px solid var(--soft-line); border-bottom:1px solid var(--soft-line); }
.member-list-clean { display:grid; gap:0; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--soft-line); }
.member-actions { display:flex; gap:6px; flex-wrap:wrap; }
.members-label { margin:18px 0 4px; }

/* Avatars: blue, centered, geometric, intentionally less mascot-like. */
.avatar { background:var(--accent); color:var(--accent-ink); }
.avatar-picker { display:grid; grid-template-columns:repeat(4, 64px); gap:10px; }
.avatar-choice { width:64px; height:64px; min-height:64px; padding:10px; display:grid; place-items:center; background:var(--surface); color:var(--ink); }
.avatar-choice:hover, .avatar-choice.selected { background:var(--accent); color:var(--accent-ink); }
.avatar-choice.selected { outline:2px solid var(--ink); outline-offset:2px; }
.avatar-svg { width:42px; height:42px; margin:auto; display:block; }

/* Schedule: today gets a quiet tint, not a loud stripe. */
.cell.head.today { background: color-mix(in srgb, var(--accent) 18%, var(--ink)); color: var(--bg); }
.cell.day-today { background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; }

/* Stop the half-open grid/card borders. */
@media (min-width: 901px) {
  .grid > .card { margin:0; }
}

@media (max-width: 900px) {
  :root { --content-gutter: 16px; }
  .app, .content { width:100%; max-width:none; }
  .content { padding-left:var(--content-gutter); padding-right:var(--content-gutter); overflow-x:hidden; }
  .top { width:calc(100% + (2 * var(--content-gutter))); margin-left:calc(-1 * var(--content-gutter)); margin-right:calc(-1 * var(--content-gutter)); padding-left:var(--content-gutter); padding-right:var(--content-gutter); }
  .grid { display:block; background:transparent; }
  .card { border:1px solid var(--line); margin-bottom:10px; }
  .card:last-child { margin-bottom:0; }
  .button { width:100%; min-width:0; }
  .toolbar-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; }
  .toolbar-actions .button { width:100%; }
  .nav { align-items:stretch; }
  .nav button { flex:1 1 0; min-width:44px; padding:0; display:grid; place-items:center; }
  .nav-label { display:none; }
  .nav-icon svg { width:21px; height:21px; }
  .nav button.active { background:var(--accent); color:var(--accent-ink); }
  .form-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-actions .button.primary:last-child { grid-column:1 / -1; }
  .profile-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-actions .button.primary { grid-column:1 / -1; }
  .class-admin-grid { grid-template-columns:1fr; }
  .class-admin-grid > div, .class-admin-grid > div + div { padding:0 0 18px; border-left:0; }
  .class-admin-grid > div + div { border-top:1px solid var(--soft-line); padding-top:18px; }
  .class-admin-head { align-items:flex-start; flex-direction:column; }
  .class-admin-head h3 { font-size:27px; }
  .member-row { align-items:flex-start; flex-direction:column; }
  .member-actions { width:100%; }
  .member-actions .button { flex:1; }
  .avatar-picker { grid-template-columns:repeat(4, minmax(56px,64px)); }
  .modal { padding-left:16px; padding-right:16px; }
}

@media (max-width: 520px) {
  .content { padding-left:14px; padding-right:14px; }
  .top { width:calc(100% + 28px); margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; min-height:88px; }
  .top h1 { font-size:34px; }
  .actions { gap:6px; }
  .avatar, .icon-btn { width:44px; min-width:44px; }
  .toolbar-actions { grid-template-columns:1fr; }
  .form-actions, .profile-actions { grid-template-columns:1fr; }
  .form-actions .button.primary:last-child, .profile-actions .button.primary { grid-column:auto; }
  .avatar-picker { grid-template-columns:repeat(4, 58px); gap:8px; }
  .avatar-choice { width:58px; height:58px; min-height:58px; }
  .schedule { margin-left:-2px; margin-right:-2px; overflow-x:auto; }
}

/* ---------- v4 interaction polish ---------- */
.subject-color-swatch {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--line);
  background: var(--swatch);
  cursor: pointer;
  position: relative;
}
.subject-color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #000;
}
.subject-color-palette { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.subject-color-editor { display:grid; gap:8px; }
.subject-color-native { width:64px !important; height:44px !important; min-height:44px !important; padding:4px !important; cursor:pointer; }
.lesson-subject,
.lesson-subject-inline {
  display:inline-block;
  width:fit-content;
  max-width:100%;
  padding:4px 7px;
  background:var(--subject-color);
  color:var(--subject-ink, #fff);
  border:1px solid color-mix(in srgb, var(--subject-color) 72%, var(--ink));
  line-height:1.05;
}
.lesson-subject-inline { margin-bottom:3px; }
.edit-attachments { display:grid; gap:7px; }
.edit-attachment { display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:10px; cursor:pointer; }
.edit-attachment > input { flex:0 0 auto; width:20px; height:20px; min-height:20px; }
.edit-attachment > span:nth-of-type(2) { min-width:0; display:grid; gap:2px; }
.edit-attachment small { color:var(--muted); }

/* A real app-level loading state: always visible long enough to communicate the reload. */
.skeleton { display:block; background:var(--surface-2); animation:skeleton-pulse .82s ease-in-out infinite alternate; }
@keyframes skeleton-pulse { from { opacity:.48; } to { opacity:.92; } }
.skeleton-app { min-height:100dvh; }
.skeleton-brand { width:122px; height:30px; margin:0 6px 38px; }
.skeleton-nav { display:grid; gap:10px; }
.skeleton-nav-item { height:46px; width:100%; }
.skeleton-top { pointer-events:none; }
.skeleton-eyebrow { width:42px; height:11px; margin-bottom:10px; }
.skeleton-title { width:min(330px,48vw); height:51px; }
.skeleton-action { width:44px; height:44px; border:1px solid var(--line); }
.skeleton-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px; background:var(--line); }
.skeleton-card { grid-column:span 4; min-height:170px; padding:20px; background:var(--surface); display:grid; align-content:start; gap:12px; }
.skeleton-card:first-child { grid-column:span 12; min-height:220px; }
.skeleton-card-title { width:38%; height:14px; }
.skeleton-line { width:72%; height:13px; }
.skeleton-line.wide { width:92%; height:28px; }
.skeleton-line.short { width:44%; }

/* Completion transition: the item visibly leaves the open side before the list reorders it. */
.task-row.is-completing,
.task-row.is-reopening { pointer-events:none; animation-duration:.52s; animation-timing-function:cubic-bezier(.22,.8,.24,1); animation-fill-mode:both; }
.task-row.is-completing { animation-name:task-complete-out; }
.task-row.is-reopening { animation-name:task-reopen-out; }
.task-row.is-completing .task-main,
.task-row.is-reopening .task-main { text-decoration:line-through; opacity:.48; }
@keyframes task-complete-out { 0% { transform:translateX(0); opacity:1; } 70% { transform:translateX(54px); opacity:.62; } 100% { transform:translateX(96px); opacity:0; } }
@keyframes task-reopen-out { 0% { transform:translateX(0); opacity:1; } 70% { transform:translateX(-44px); opacity:.62; } 100% { transform:translateX(-80px); opacity:0; } }

/* Desktop: the navigation is a fixed selection column; the content scrolls independently. */
@media (min-width:901px) {
  .app { height:100dvh; }
  .side { height:100dvh; overflow:auto; }
  .content { height:100dvh; overflow:auto; overscroll-behavior:contain; }
  .top { align-items:flex-end; }
  .actions { align-self:stretch; align-items:flex-end; }
  .actions > * { margin-bottom:0; }
}

@media (max-width:900px) {
  .subject-color-palette { gap:6px; }
  .subject-color-swatch { width:42px; height:42px; min-width:42px; min-height:42px; }
  .skeleton-grid { display:block; background:transparent; }
  .skeleton-card, .skeleton-card:first-child { min-height:150px; margin-bottom:10px; border:1px solid var(--line); }
  .skeleton-side { display:none; }
}


/* ---------- responsive landing / iPhone + iPad ---------- */
.login {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: clip;
}
.login-copy, .login-panel, .login-card { min-width: 0; }
.login-copy h1, .login-copy .sub, .login-panel { overflow-wrap: anywhere; }
.login-footer {
  position: absolute;
  left: max(28px, env(safe-area-inset-left));
  right: max(28px, env(safe-area-inset-right));
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px));
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}
.login-footer a { color: inherit; text-decoration: none; }
.login-footer a:first-child { text-decoration: underline; text-underline-offset: 2px; }
.login-footer a:hover { color: var(--ink); }

@media (min-width: 701px) and (max-width: 1100px) {
  .login {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: stretch;
    gap: clamp(28px, 6vw, 52px);
    padding: max(96px, calc(env(safe-area-inset-top) + 72px)) clamp(28px, 7vw, 72px) max(116px, calc(env(safe-area-inset-bottom) + 92px));
    overflow-y: auto;
  }
  .login-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: clamp(28px, 6vw, 72px);
    align-items: center;
  }
  .login-copy { padding-left: 0; max-width: 760px; }
  .login-copy h1 { font-size: clamp(54px, 8vw, 88px); }
  .login-panel { max-width: none; border-left: 1px solid var(--line); border-top: 0; padding: 12px 0 12px clamp(24px, 4vw, 44px); }
  .login-wordmark { font-size: clamp(150px, 24vw, 270px); bottom: -.12em; }
}

@media (max-width: 700px) {
  .login {
    min-height: 100dvh;
    height: auto;
    display: block;
    padding: max(76px, calc(env(safe-area-inset-top) + 58px)) max(18px, env(safe-area-inset-right)) max(104px, calc(env(safe-area-inset-bottom) + 88px)) max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    overflow-x: clip;
  }
  .login-brand {
    top: max(16px, env(safe-area-inset-top));
    left: max(18px, env(safe-area-inset-left));
    font-size: 23px;
  }
  .login-theme {
    top: max(12px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
  }
  .login-card {
    display: block;
    width: 100%;
  }
  .login-copy {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .login-kicker { margin-bottom: 14px; font-size: 10px; }
  .login-copy h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(46px, 14vw, 72px);
    line-height: .9;
    letter-spacing: -.07em;
  }
  .login-copy .sub {
    width: 100%;
    max-width: 34rem;
    margin-top: 20px;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.2;
  }
  .login-panel {
    width: 100%;
    max-width: none;
    margin-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 24px 0 0;
  }
  .login-panel .field { margin-bottom: 16px; }
  .login-submit, .passkey-login { min-height: 50px; }
  .login-divider { margin: 20px 0; }
  .login-note { margin-bottom: 8px; }
  .login-footer {
    left: 18px;
    right: 18px;
    bottom: max(52px, calc(env(safe-area-inset-bottom) + 52px));
    gap: 6px;
    flex-wrap: wrap;
    font-size: 10px;
    text-align: center;
  }
  .login-wordmark {
    left: 0;
    right: 0;
    bottom: -.08em;
    width: 100%;
    font-size: 25vw;
    text-align: center;
    letter-spacing: -.09em;
  }
}

@media (max-width: 380px) {
  .login { padding-left: 16px; padding-right: 16px; }
  .login-brand { left: 16px; }
  .login-theme { right: 16px; }
  .login-copy h1 { font-size: clamp(42px, 13.5vw, 58px); }
  .login-footer { left: 12px; right: 12px; }
}


/* ---------- imprint ---------- */
.imprint-page {
  width: min(820px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.imprint-back { display:inline-block; margin-bottom: clamp(70px, 12vh, 130px); font-size:13px; }
.imprint-page h1 { margin:0 0 48px; font-size:clamp(58px, 10vw, 120px); line-height:.82; letter-spacing:-.08em; }
.imprint-block { border-top:1px solid var(--line); padding:20px 0 28px; }
.imprint-block h2 { margin:0 0 8px; font-size:18px; }
.imprint-block p { margin:0; max-width:620px; font-size:16px; color:var(--muted); }

/* ---------- FINAL landing layout: desktop + iPad + iPhone ---------- */
.login { position:relative; width:100%; max-width:100vw; min-width:0; min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; padding:max(92px,calc(env(safe-area-inset-top) + 54px)) max(24px,env(safe-area-inset-right)) max(92px,calc(env(safe-area-inset-bottom) + 64px)) max(24px,env(safe-area-inset-left)); }
.login-card { width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); align-items:center; gap:clamp(44px,7vw,110px); max-width:1440px; margin:0 auto; }
.login-copy { min-width:0; max-width:760px; padding:0; }
.login-kicker { margin-bottom:18px; }
.login-copy h1 { max-width:760px; font-size:clamp(58px,6.5vw,104px); line-height:.86; overflow-wrap:normal; word-break:normal; }
.login-copy .sub { max-width:560px; margin-top:28px; font-size:clamp(18px,1.7vw,24px); }
.login-panel { min-width:0; width:100%; max-width:560px; border-left:1px solid var(--line); border-top:0; padding:18px 0 18px clamp(28px,4vw,56px); }
.login-panel input { width:100%; }
.login-footer { position:absolute; left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); bottom:max(24px,calc(env(safe-area-inset-bottom) + 20px)); display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; font-size:10px; line-height:1.2; color:var(--muted); z-index:3; }
.login-wordmark { left:0; right:0; bottom:-.16em; width:100%; max-width:100%; overflow:hidden; text-align:center; pointer-events:none; }
@media (max-width:1100px) {
  .login { padding-top:max(86px,calc(env(safe-area-inset-top) + 48px)); padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 56px)); }
  .login-card { display:grid; grid-template-columns:minmax(0,760px); justify-content:center; gap:34px; max-width:760px; }
  .login-copy { max-width:760px; }
  .login-copy h1 { font-size:clamp(54px,8.2vw,82px); }
  .login-panel { max-width:620px; border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
  .login-wordmark { display:none; }
}
@media (max-width:700px) {
  .login { display:block; padding:max(72px,calc(env(safe-area-inset-top) + 52px)) max(16px,env(safe-area-inset-right)) max(86px,calc(env(safe-area-inset-bottom) + 56px)) max(16px,env(safe-area-inset-left)); }
  .login-brand { top:max(14px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); font-size:22px; }
  .login-theme { top:max(12px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); }
  .login-card { display:block; width:100%; max-width:none; }
  .login-copy { width:100%; max-width:none; }
  .login-kicker { margin-bottom:13px; font-size:10px; }
  .login-copy h1 { width:100%; max-width:100%; font-size:clamp(44px,13vw,66px); line-height:.88; letter-spacing:-.075em; }
  .login-copy .sub { width:100%; max-width:34rem; margin-top:19px; font-size:18px; line-height:1.18; }
  .login-panel { width:100%; max-width:none; margin-top:30px; padding:23px 0 0; }
  .login-panel .field { margin-bottom:16px; }
  .login-submit,.passkey-login { min-height:50px; }
  .login-footer { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px)); gap:5px; font-size:9px; }
}
@media (max-width:380px) { .login { padding-left:14px; padding-right:14px; } .login-brand { left:14px; } .login-theme { right:14px; } .login-copy h1 { font-size:clamp(40px,12.5vw,56px); } }

/* ---------- v5 iOS/mobile viewport correction ---------- */
@media (max-width: 900px) {
  html, body, #app { width:100%; max-width:none; overflow-x:hidden; }
  .app { width:100%; max-width:none; min-height:100dvh; }
  .content { width:100%; max-width:none; padding-bottom:calc(104px + env(safe-area-inset-bottom)); }

  /* The header rule belongs to the viewport, not to the padded content column. */
  .top {
    width:100vw;
    max-width:none;
    margin-left:calc(-1 * var(--content-gutter));
    margin-right:0;
    padding-left:var(--content-gutter);
    padding-right:max(var(--content-gutter), env(safe-area-inset-right));
    min-height:96px;
    position:relative;
    align-items:flex-end;
    padding-bottom:0;
  }
  .top > div:first-child { min-width:0; }
  .top h1 { white-space:nowrap; }

  /* Keep the two header controls on the same baseline as the rule. */
  .actions {
    align-self:flex-end;
    align-items:flex-end;
    flex:0 0 auto;
    padding-bottom:0;
  }
  .actions > * { margin-bottom:0; }

  /* iOS sometimes paints fixed bottom bars against the layout viewport.
     Anchor it to the visual viewport and reserve the full safe-area height. */
  .side {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100vw;
    max-width:none;
    height:calc(68px + env(safe-area-inset-bottom));
    min-height:calc(68px + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);
    margin:0;
    border-top:1px solid var(--line);
    border-left:0;
    overflow:hidden;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .nav {
    width:100%;
    height:68px;
    min-height:68px;
    display:flex;
    align-items:stretch;
    gap:0;
    padding:0;
  }
  .nav button {
    flex:1 1 0;
    width:0;
    min-width:0;
    height:68px;
    min-height:68px;
    padding:0;
    margin:0;
    border:0 !important;
    border-right:1px solid var(--soft-line) !important;
    display:grid;
    place-items:center;
  }
  .nav button:last-child { border-right:0 !important; }
  .nav-icon { width:24px; height:24px; display:grid; place-items:center; }
  .nav-icon svg { width:22px; height:22px; }
  .nav-label { display:none !important; }

  /* Don't let the page content disappear underneath the fixed bar. */
  .content { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
}

@media (max-width:520px) {
  .content { padding-left:14px; padding-right:14px; }
  .top {
    width:100vw;
    margin-left:-14px;
    padding-left:14px;
    padding-right:max(14px, env(safe-area-inset-right));
    min-height:96px;
  }
  .top h1 { font-size:34px; }
  .actions { gap:8px; }
  .avatar, .icon-btn { width:44px; height:44px; min-width:44px; min-height:44px; }
}

@media (pointer:coarse) {
  :root { --tap:48px; }
  .icon-btn { width:48px; }
  .avatar { width:48px; height:48px; }
}

/* Avoid iOS compositing/softening of the small header eyebrow. */
.eyebrow { transform:none; filter:none; -webkit-filter:none; -webkit-font-smoothing:antialiased; }

/* ---------- v6 mobile header breathing room ---------- */
@media (max-width: 900px) {
  .top {
    min-height:124px;
  }
}
@media (max-width: 520px) {
  .top {
    min-height:124px;
  }
}

/* ---------- v7 mobile header: full-bleed rule + deliberate breathing room ---------- */
@media (max-width: 900px) {
  .top {
    /* Escape the padded content column completely: the rule is viewport-wide. */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: var(--content-gutter);
    padding-right: max(var(--content-gutter), env(safe-area-inset-right));
    box-sizing: border-box;
    min-height: 124px;
    padding-bottom: 18px;
    overflow: visible;
  }

  /* Keep the controls' bottom edge exactly on the header rule while
     the title/eyebrow sit a little higher above it. */
  .top .actions {
    align-self: flex-end;
    margin-bottom: -18px;
    padding-bottom: 0;
  }
  .top .actions > * {
    margin-bottom: 0;
  }
}

@media (max-width: 520px) {
  .top {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    min-height: 124px;
    padding-bottom: 18px;
  }
  .top .actions {
    margin-bottom: -18px;
  }
}

/* ---------- v9 mobile header: controls align with the bottom of the title ---------- */
@media (max-width: 900px) {
  .top .actions {
    margin-bottom: 0;
    align-self: flex-end;
    /* The rule stays at the bottom of the header; controls sit on the same
       visual bottom as the h1 instead of touching the rule. */
    transform: none;
  }
}
@media (max-width: 520px) {
  .top .actions {
    margin-bottom: 0;
    transform: none;
  }
}


/* ---------- FINAL iPad landscape login layout ---------- */
@media (min-width: 768px) and (max-width: 1450px) and (orientation: landscape) {
  .login {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    padding: max(72px, calc(env(safe-area-inset-top) + 36px)) max(32px, env(safe-area-inset-right)) max(64px, calc(env(safe-area-inset-bottom) + 34px)) max(32px, env(safe-area-inset-left));
  }
  .login-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
    max-width: 1180px;
    height: min(720px, calc(100dvh - 120px));
    margin: 0 auto;
  }
  .login-copy { max-width: 650px; }
  .login-kicker { margin-bottom: 14px; font-size: 11px; }
  .login-copy h1 {
    max-width: 650px;
    font-size: clamp(62px, 7vw, 90px);
    line-height: .88;
    letter-spacing: -.075em;
  }
  .login-copy .sub {
    max-width: 500px;
    margin-top: 22px;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.16;
  }
  .login-panel {
    max-width: 500px;
    border-left: 1px solid var(--line);
    border-top: 0;
    padding: 12px 0 12px clamp(24px, 3vw, 42px);
  }
  .login-panel .field { margin-bottom: 16px; }
  .login-submit, .passkey-login { min-height: 50px; }
  .login-divider { margin: 18px 0; }
  .login-note { margin-top: 10px; }
  .login-wordmark { display: block; font-size: clamp(150px, 17vw, 250px); bottom: -.18em; opacity: .10; }
  .login-footer { bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
}

/* One-time client update prompt for older installed web-app shells. */

@media (min-width: 768px) and (max-width: 1450px) and (orientation: landscape) and (max-height: 850px) {
  .login-wordmark { display:none; }
}

/* ---------- v10: full-width iPad landscape login + schedule interactions ---------- */
.schedule .lesson { cursor: pointer; }
.schedule .lesson-vertretung { border-left: 4px solid #dc2626; }
.schedule .lesson-status-vertretung { color: #dc2626; font-weight: 900; }
.schedule .lesson-vertretung .lesson-subject { color: #dc2626; }
.schedule .lesson-absent { outline:2px solid var(--danger); outline-offset:-3px; }
.schedule .lesson-status-absent { color:var(--danger); font-weight:900; }
.schedule-import-result { display:grid; gap:8px; margin-top:14px; padding:12px; border:1px solid var(--line); }
.schedule-import-result.is-valid { border-left:5px solid var(--success); }
.schedule-import-result.has-errors { border-left:5px solid var(--danger); }
.schedule-import-result ul { margin:0; padding-left:20px; color:var(--danger); }
.schedule-import-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.teacher-account-fields { display:grid; grid-column:1/-1; gap:8px; }
.teacher-account-fields.hidden { display:none; }

@media (min-width: 768px) and (max-width: 1450px) and (orientation: landscape) {
  .login {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    box-sizing: border-box;
    padding: clamp(54px, 8vh, 86px) max(32px, env(safe-area-inset-right)) max(72px, calc(env(safe-area-inset-bottom) + 28px)) max(32px, env(safe-area-inset-left)) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .login-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr) !important;
    gap: clamp(34px, 6vw, 92px) !important;
    align-items: center !important;
  }
  .login-copy { width: 100%; max-width: 760px !important; }
  .login-copy h1 { max-width: 760px; font-size: clamp(56px, 7vw, 96px); }
  .login-copy .sub { max-width: 600px; }
  .login-panel {
    width: 100%;
    max-width: none !important;
    padding-left: clamp(26px, 3vw, 48px);
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .login-wordmark { display: none !important; }
  .login-footer { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}

@media (min-width: 768px) and (max-width: 1450px) and (orientation: landscape) and (max-height: 760px) {
  .login { padding-top: max(34px, calc(env(safe-area-inset-top) + 24px)) !important; }
  .login-copy h1 { font-size: clamp(50px, 6.2vw, 82px); }
  .login-copy .sub { margin-top: 18px; font-size: 17px; }
  .login-panel .field { margin-bottom: 12px; }
  .login-divider { margin: 14px 0; }
  .login-submit, .passkey-login { min-height: 46px; }
}

@media (min-width:1101px) {
  .login-copy h1 { font-size:clamp(54px,5.1vw,78px); }
}

.task-subject { background:var(--subject-color) !important; color:var(--subject-ink, #fff) !important; }