/* Shared classroom controls, deliberately quiet beside the existing games. */
:root{--line:#dce3e0;--surface:#fffefa;--soft:#edf2ef;--danger:#a43e35}
[hidden]{display:none!important}
body{overflow-wrap:break-word}
button,textarea,select,input{font:inherit}
button:disabled{opacity:.55;cursor:default}
textarea:focus-visible,select:focus-visible{outline:3px solid #ca721b;outline-offset:3px}
textarea{resize:vertical}
h3{font-size:18px;line-height:1.4;margin:0 0 10px;letter-spacing:-.3px}
.button{text-decoration:none}
.button.text-button{padding:8px 10px;box-shadow:none;border:0;background:transparent;font-weight:500;min-height:44px}
.button.danger,.danger{color:var(--danger)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:25px;min-width:0}
.ai-settings{max-width:720px;margin-inline:auto}
.ai-settings [hidden]{display:none!important}
.ai-settings input{min-width:0;width:100%}
.ai-settings .actions>.button{white-space:normal}
.stack{display:grid;gap:20px}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:9px 0 28px}
.page-heading h1{font-size:clamp(29px,3.6vw,42px);line-height:1.17}
.page-heading p:not(.eyebrow){max-width:650px;color:var(--muted);margin:10px 0 0}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-heading>.actions{flex-shrink:0;max-width:420px}
.row,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}
.row{flex-wrap:wrap}
.row h2,.row h3,.section-heading h2{margin:0}
.section-heading{margin-bottom:19px}
.section-heading>a{font-size:14px;text-underline-offset:4px}
.equal-columns,.content-columns{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px}
.content-columns{grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr)}
.content-columns>*,.equal-columns>*{min-width:0}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:32px}
.summary-card{background:#e6eeea;padding:22px;border-radius:14px;text-decoration:none;display:grid;gap:8px;border:1px solid #d4dfd9}
.summary-card>span{font-size:14px;font-weight:600}
.summary-card>strong{font-size:43px;font-variant-numeric:tabular-nums;line-height:1.15}
.summary-card>small{font-size:12px;line-height:1.5;color:var(--muted)}
.summary-card.dark{background:var(--navy);color:#fff}
.summary-card.dark>small{color:#cfddd8}
.summary-card:hover,.task-card:hover{border-color:#528781}
.empty-state{padding:28px 18px;text-align:center;border:1px dashed #cedad3;border-radius:12px;background:#f6f8f3;grid-column:1/-1}
.empty-state strong{display:block;font-size:17px;font-weight:600}
.empty-state p{color:var(--muted);font-size:14px;max-width:480px;margin:8px auto 0}
.badge{display:inline-flex;align-items:center;gap:4px;background:#edf1ed;color:#526767;padding:6px 10px;border-radius:7px;font-size:12px;font-weight:650;line-height:1.4;white-space:normal}
.badge.success{background:#e2eee6;color:#286546}
.badge.warning{background:#f9ece0;color:#974719}
.badge.gold{background:#f2e1b2;color:#75531d}
.user-text{white-space:pre-wrap;overflow-wrap:anywhere}
.post-card>.row{align-items:flex-start;margin-bottom:16px}
.post-card h2{font-size:22px}
.post-card h2 a{text-decoration:none}
.post-meta{display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-size:12px;line-height:1.5;margin-bottom:13px;flex-wrap:wrap}
.post-meta>span{font-weight:700;color:#456662}
.post-card.important-post{border-top:4px solid #d6ae53}
.post-tools{display:flex;gap:3px;flex-wrap:wrap;margin-top:10px}
.moderation-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-top:15px}
.moderation-strip p{font-size:14px}
.attached-photo{display:block;max-width:100%;max-height:450px;width:auto;object-fit:contain;border-radius:10px;margin:14px 0}
.photo-link{display:block;width:fit-content;max-width:100%}
.comment-section{border-top:1px solid var(--line);margin-top:14px}
.comment{padding:16px 0;border-bottom:1px solid var(--line)}
.comment p{font-size:14px}
.comment:last-child{border:0}
.comment-section>.button{margin-top:10px}
.deadline-link{display:flex;gap:15px;align-items:center;padding:17px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.deadline-link:last-child{border:0;padding-bottom:0}
.deadline-link>time{flex-shrink:0;font-size:13px;font-weight:700;max-width:60px}
.deadline-link strong{display:block;font-size:14px;line-height:1.5}
.deadline-link small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.overdue{color:#a64c29}
.poll-card h3{margin-top:16px}
.poll-options{display:grid;gap:9px;margin:16px 0}
.poll-option{background:#f4f6f2;border:1px solid #d9e2da;color:var(--navy);border-radius:9px;padding:12px;text-align:left;position:relative}
.poll-option:disabled{opacity:1}
.poll-option.selected{border-color:#28796a;background:#e7f1e9}
.poll-option-label{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.poll-meter{display:block;height:4px;background:#dfe7df;border-radius:5px;overflow:hidden;margin-top:10px}
.poll-meter>span{height:100%;background:#5d9183;display:block}
.poll-card .eyebrow{margin:0}
.task-grid,.reward-grid,.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:28px}
.task-card{display:grid;gap:16px;text-decoration:none}
.task-card h2{font-size:22px;margin:0}
.task-card .eyebrow{margin:0;font-size:10px;letter-spacing:1px}
.task-card time{font-size:13px}
.task-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);font-size:14px}
.assignment>.badge{margin-bottom:20px}
.overview-panel{margin:30px 0}
.table-scroll{overflow:auto;max-width:100%;padding-bottom:6px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:14px 15px;border-bottom:1px solid var(--line);text-align:center}
th:first-child{text-align:left;min-width:150px}
thead th{background:#f0f4ee;font-size:12px;min-width:140px}
thead a{display:block;max-width:200px}
tbody th{position:sticky;left:0;background:var(--surface);font-weight:500}
.submission-mark{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:7px}
.submission-mark.accepted{color:#267445;background:#e3eee3}
.submission-mark.submitted{color:#1e6779;background:#e6eef2}
.submission-mark.returned{color:#a54f24;background:#f7ecda}
.submission-mark.missing{color:#879394}
.submission-list{margin-top:32px}
.submission-card{margin-bottom:16px}
.submission-card>.actions{margin-top:20px}
.submission-card>.field-help{margin-top:10px}
.feedback{padding:14px;background:#ecf2eb;border-left:3px solid #7fa18b;border-radius:0 8px 8px 0;margin:16px 0;font-size:14px}
.feedback p{font-size:14px;margin:8px 0 0}
.archive{margin:28px 0}
.field{display:grid;gap:8px;font-size:14px;font-weight:650;min-width:0}
.field>input,.field>select,.field>textarea,.header-controls>select{width:100%;padding:12px;border:1px solid #c8d5cb;border-radius:9px;background:#fffefa;color:var(--navy);min-height:47px;font-size:16px;line-height:1.4}
.field>input[readonly]{background:#f0f3ed;color:#5b706d}
.field>input[type=file]{font-size:13px;padding:11px 8px}
.compact-field{font-size:12px;max-width:250px}
.compact-field>select{font-size:14px}
.stack-form{display:grid;gap:19px}
.stack-form .field-help{margin:0}
.stack-form details{margin:0}
.stack-form .check-option{font-weight:500}
.stack-form .check-option input{flex-shrink:0}
.form-actions{display:flex;gap:10px;margin-top:4px}
.form-actions .button{min-width:160px}
.form-error{color:var(--danger);font-size:14px;margin:0}
.form-error:empty{display:none}
.notice-box{padding:14px;background:#f4eddc;border-radius:10px;font-size:14px}
.wallet-hero{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:#eee2bf;border:1px solid #e0d3af;border-radius:16px;padding:30px;margin-bottom:28px;align-items:center}
.wallet-hero strong{display:block;font-size:64px;line-height:1.2}
.wallet-hero strong>span{font-size:20px;font-weight:500}
.wallet-hero .eyebrow{color:#705922;font-size:11px}
.wallet-hero p{font-size:14px;margin-top:9px}
.balance-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.balance-person{background:#f2f5ef;border:1px solid var(--line);padding:14px;border-radius:10px;text-align:left;color:var(--navy);display:grid;gap:8px}
.balance-person>span{font-size:13px}
.balance-person>strong{font-size:25px}
.balance-person small{font-size:12px;font-weight:400}
.request-panel{margin:25px 0}
.request-row{border-bottom:1px solid var(--line);padding:18px 0;display:grid;gap:12px}
.request-row:last-child{border:0}
.request-row p{font-size:14px;margin:10px 0 3px}
.request-row small{font-size:12px;color:var(--muted)}
.request-row h3{font-size:16px;margin:0}
.catalog-section{margin:35px 0}
.reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.reward-card{display:flex;flex-direction:column}
.reward-card h3{margin-top:17px}
.reward-card>p{font-size:14px;color:var(--muted);flex-grow:1}
.reward-price{font-size:34px;font-weight:750;color:#8a6824}
.reward-price small{font-size:13px;font-weight:500}
.reward-card>.actions{margin-top:17px}
.ledger-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.ledger-row strong{font-size:14px;display:block}
.ledger-row small{font-size:12px;color:var(--muted);display:block;margin-top:6px}
.ledger-row>b{font-size:23px;flex-shrink:0}
.positive{color:#367755}.negative{color:#976124}
.class-hero{background:#173e4c;color:#f7f5e9;border-radius:16px;padding:32px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center;margin-bottom:30px}
.class-hero .eyebrow{color:#b5d2c9}
.class-hero strong{font-size:69px;line-height:1.2}
.class-hero p{font-size:14px}
.class-hero .field-help{color:#bbcfc6}
.class-progress{height:8px;background:#42626b;border-radius:10px;overflow:hidden;margin:20px 0 14px}
.class-progress>span{display:block;height:100%;background:#e4c779}
.team-score{font-size:32px}
.team-score small{font-size:12px;font-weight:500}
.team-card .field-help{margin:18px 0}
.milestone-section{margin:32px 0}
.milestone-list{display:grid;gap:12px}
.milestone-card{display:flex;gap:24px;align-items:center}
.milestone-card>.actions{margin-left:auto}
.milestone-target{font-size:28px;font-weight:750;min-width:70px}
.milestone-target small{font-size:12px;display:block;font-weight:500}
.milestone-card h3{margin:0 0 7px}
.roster-panel,.teachers-panel,.points-history{margin:25px 0}
.roster-person{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.roster-person:last-child{border:0}
.person-initial{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;background:#e2ebe3;border-radius:50%;font-weight:700}
.roster-person strong{font-size:15px}
.roster-person small,.teacher-row small{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.roster-person>.actions{margin-left:auto;justify-content:flex-end}
.inactive{opacity:.65}
.teacher-row{padding:16px 0;border-bottom:1px solid var(--line)}
.teacher-row strong{font-size:14px}
.mono{font-family:ui-monospace,monospace;letter-spacing:1px}
.header-controls{display:flex;align-items:center;gap:14px}
.header-controls>select{max-width:135px;min-height:40px;font-size:14px;padding:8px}
.role-label{font-size:12px;color:var(--muted);white-space:nowrap}
.notification-link{position:relative;text-decoration:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd6cf;border-radius:50%;font-size:25px;flex-shrink:0}
.notification-link>span{position:absolute;right:-7px;top:-5px;background:#b15337;color:#fff;border-radius:20px;min-width:21px;height:21px;padding:3px;font-size:11px;text-align:center;line-height:15px}
.bottom-nav a{padding:12px 21px;gap:9px}
.bottom-nav a b{font-size:13px}
.notification-settings{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-bottom:24px}
.notification-settings>.actions{flex-direction:column;align-items:stretch}
.notification-settings p{font-size:14px}
.notification-item{width:100%;display:flex;gap:15px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--navy);padding:20px 5px}
.notification-item>span:nth-child(2){flex:1}
.notification-item strong{font-size:16px;display:block}
.notification-body{display:block;font-size:14px;line-height:1.6;margin:6px 0}
.notification-item small{color:var(--muted);font-size:12px}
.notification-dot{width:9px;height:9px;background:#ccd8cc;border-radius:50%;flex-shrink:0}
.notification-item.unread .notification-dot{background:#267b78}
.notification-item.unread{background:#f0f5ee}
.login-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:80px;align-items:center;margin:40px 0}
.login-intro h1{font-size:55px;margin:20px 0}
.login-intro>p{font-size:19px}
.login-intro>.field-help{font-size:13px;max-width:420px}
.login-wave{font:180px Georgia,serif;line-height:1.1;letter-spacing:-10px;color:#99b9ad;padding:8px 0}
.login-card{padding:32px}
.login-card>h2{font-size:27px}
.login-card>form{margin-top:24px}
.teacher-signin{border-top:1px solid var(--line);padding-top:21px;margin-top:20px}
.teacher-signin p{font-size:14px}
.teacher-signin .button{width:100%}
.teacher-signin small{display:block;font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.first-password{max-width:600px;margin:30px auto}
.first-password h1{font-size:34px}
.first-password form{margin-top:23px}
.onboarding{max-width:700px;margin:36px 0}
.onboarding ol{padding-left:24px;line-height:2; margin-bottom:25px}
.game-save-status{font-size:12px;color:#4b7162;text-align:right;margin:0 0 16px}
.sync-error{border:1px solid #d7a688;background:#fff1e2;padding:14px;display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:20px;border-radius:10px;font-size:14px}
.refresh-row,.class-footer{text-align:right;margin-top:24px}
.profile-preview{border-radius:24px}
.profile-preview .avatar{max-width:300px}
.photo-portrait{overflow:hidden;aspect-ratio:1;border-radius:24px;background:var(--surface)}
.photo-portrait>img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.roster-avatar .photo-portrait{width:100%;height:100%;border-radius:50%}
.profile-preview [hidden]{display:none!important}
.profile-preview .preview-caption{padding-top:18px}
.profile-preview .preview-caption h2{font-size:25px}
.profile-preview .shuffle{font-size:14px;padding:12px}
.editor-controls.stack-form .identity{padding-top:20px}
.profile-preview+#profile-form .identity input{margin-top:0}
dialog{width:min(650px,calc(100vw - 26px));max-height:88svh;overflow:auto;color:var(--navy);background:var(--surface);border:1px solid #c6d4c8;border-radius:18px;padding:28px;box-shadow:0 20px 80px #102e3b3f}
dialog::backdrop{background:#0e2b3a80;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.dialog-heading h2{margin:0;font-size:25px}
.icon-button{border:1px solid var(--line);background:#f5f7f0;width:40px;height:40px;flex-shrink:0;border-radius:50%;font-size:25px;color:var(--navy)}
.credential-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.credential-card{border:1px dashed #6f8d85;border-radius:9px;padding:20px;break-inside:avoid}
.credential-card h3{font-size:20px}
.credential-url{font-size:10px;overflow-wrap:anywhere}
.credential-card dl{display:grid;gap:5px;margin:16px 0}
.credential-card dt{font-size:11px;margin-top:7px;color:var(--muted)}
.credential-card dd{font:15px ui-monospace,monospace;margin:0;overflow-wrap:anywhere;color:#173e4c}
.credential-card>small{font-size:11px}
@media(min-width:1200px){.topbar{max-width:1200px}.bottom-nav{bottom:18px}main{padding-top:34px}}
@media(max-width:900px){
  .page-heading{flex-direction:column;gap:17px}.page-heading>.actions{max-width:100%}
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-columns{grid-template-columns:minmax(0,1.2fr) minmax(270px,1fr);gap:18px}
  .login-layout{gap:40px}.login-intro h1{font-size:45px}
  .role-label{display:none}.bottom-nav a{padding:12px 15px}
}
@media(max-width:700px){
  main{padding:24px 16px 112px}
  .topbar{padding:16px}.brand small{font-size:9px;letter-spacing:.3px}.brand{font-size:18px;gap:8px}
  .brand-mark{width:36px;height:36px}
  .header-controls{gap:9px}.header-controls #logout{padding:6px;font-size:12px}.header-controls>select{max-width:76px;font-size:12px}
  .notification-link{width:36px;height:36px;font-size:22px}
  .bottom-nav{padding:7px 6px calc(7px + env(safe-area-inset-bottom));gap:1px}
  .bottom-nav a{flex:1;min-width:0;flex-direction:column;gap:6px;padding:8px 3px;min-height:57px}
  .bottom-nav a span{font-size:20px}.bottom-nav a b{font-size:10px;line-height:1.2}
  .page-heading h1{font-size:32px}.page-heading p:not(.eyebrow){font-size:14px}
  .page-heading .button{font-size:13px;min-height:44px;padding:11px 14px}
  .panel{padding:20px;border-radius:13px}
  .equal-columns,.content-columns{grid-template-columns:1fr;gap:22px}
  .summary-grid{gap:8px;margin-bottom:28px}.summary-card{padding:14px 11px;gap:7px;border-radius:11px}.summary-card>span{font-size:11px;min-height:31px;line-height:1.45}.summary-card>strong{font-size:33px}.summary-card>small{font-size:10px}
  .task-grid,.team-grid{grid-template-columns:1fr;gap:14px}
  .task-card h2{font-size:21px}
  .section-heading{align-items:center;flex-wrap:wrap;gap:12px}.section-heading h2{font-size:21px}
  .balance-list{grid-template-columns:1fr 1fr}.balance-person{padding:12px}
  .wallet-hero{padding:24px;gap:17px;grid-template-columns:1fr}.wallet-hero strong{font-size:55px}
  .wallet-hero p{margin-bottom:0}.wallet-hero .eyebrow{margin:0}
  .reward-grid{gap:12px}.reward-card{padding:17px}.reward-card .button{font-size:12px;width:100%;padding:10px;gap:4px}.reward-price{font-size:29px}.reward-card h3{font-size:17px}
  .reward-card p{font-size:13px}
  .class-hero{padding:25px;gap:22px;grid-template-columns:1fr}.class-hero strong{font-size:53px}.class-hero h2{font-size:22px}.class-hero p{margin-bottom:0}
  .milestone-card{gap:16px;flex-wrap:wrap;padding:18px}.milestone-card>.actions{width:100%;justify-content:flex-end}.milestone-target{font-size:25px;min-width:60px}
  .roster-person{flex-wrap:wrap;gap:11px}.roster-person>.actions{width:100%;margin-left:53px;justify-content:flex-start;gap:6px}.roster-person .button{font-size:12px;padding:8px 12px}
  .notification-settings{grid-template-columns:1fr;gap:12px}
  .notification-settings>.actions{align-items:flex-start}
  .notification-item{gap:10px;padding:18px 0}.notification-item strong{font-size:15px}.notification-body{font-size:13px}
  .login-layout{grid-template-columns:1fr;gap:20px;margin:15px 0}.login-intro h1{font-size:40px;margin:15px 0}.login-intro>p{font-size:16px}.login-intro>.field-help{display:none}.login-wave{display:none}.login-card{padding:24px}
  .profile-preview{grid-template-columns:1.1fr 1fr;border-radius:20px}
  .profile-preview .avatar{max-width:250px}.profile-preview .preview-caption{padding-top:0}.profile-preview .preview-caption h2{font-size:22px}
  .editor-controls.stack-form{gap:16px}
  dialog{padding:22px 18px}.dialog-heading h2{font-size:23px}
  .credential-grid{grid-template-columns:1fr}.sync-error{flex-direction:column;align-items:flex-start}
  #toast{bottom:92px;z-index:100;font-size:13px}
}
@media(max-width:380px){.brand{font-size:16px}.brand small{max-width:145px;line-height:1.4}.header-controls{gap:5px}.summary-card{padding:12px 9px}.reward-grid{grid-template-columns:1fr}}
@media print{
  body>*{display:none!important}
  body:has(dialog[open])>*:has(dialog[open]){display:block!important}
  header,nav,main,#toast,.no-print,.dialog-heading{display:none!important}
  dialog[open]{position:static;display:block!important;max-height:none;overflow:visible;width:100%;margin:0;padding:0;border:0;box-shadow:none;background:#fff}
  dialog::backdrop{display:none}
  .credential-grid{display:grid;grid-template-columns:1fr 1fr;gap:12mm;margin:0}
  .credential-card{break-inside:avoid}
}

.roster-avatar{display:block;width:46px;height:46px;flex-shrink:0;overflow:hidden;border-radius:50%}.roster-avatar .avatar{width:46px;height:46px;max-width:none;border-radius:50%}.roster-avatar>img{width:100%;height:100%;object-fit:cover}

/* Class-specific palettes are selected from validated presets. */
:root{--class-accent:#185763;--class-dark:#163e49;--class-light:#e0eeec;--class-paper:#f7f2e7;--class-gold:#f0cd79;--navy:var(--class-dark);--teal:var(--class-accent);--gold:var(--class-gold);background:var(--class-paper);color:var(--class-dark)}
.primary:hover{background:var(--class-accent)}
.bottom-nav{background:var(--class-dark)}
.bottom-nav a.active{background:var(--class-gold);color:var(--class-dark)}
.summary-card,.empty-state,.poll-option,.notice-box{background:var(--class-light)}
.summary-card.dark,.class-hero{background:var(--class-dark);color:#fffefa}
.wallet-hero,.reward-price,.milestone-target{background:var(--class-gold);color:var(--class-dark)}
.class-progress>span,.poll-meter>span{background:var(--class-accent)}
.class-hero .class-progress>span{background:var(--class-gold)}
.login-intro{background:var(--class-light)}
html[data-class-style=paper] .panel{border-radius:12px 18px 14px 9px;box-shadow:3px 4px 0 #153b4b08}
html[data-class-style=clean] body:before{display:none}
html[data-class-style=clean] .panel,html[data-class-style=clean] .summary-card{box-shadow:none;border-radius:10px}
html[data-class-style=clean] .brand-mark{transform:none;border-radius:10px}
html[data-class-style=clean] .paper-label{transform:none;clip-path:none;border-radius:8px}
.settings-group{display:grid;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--line);margin:0}
.settings-group legend{padding-top:12px;font-size:18px}
.settings-two,.settings-three{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-three{grid-template-columns:repeat(3,minmax(0,1fr))}
#settings-sample{padding:24px;background:var(--sample-light);color:var(--sample-accent);border-radius:12px;border:1px solid #0001}
#settings-sample>.eyebrow{color:var(--sample-accent);font-size:10px}
#settings-sample>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
#settings-sample>div>span{padding:16px;background:#fffefa;border-radius:9px;font-size:13px}
#settings-sample strong{font-size:21px;display:block;margin-top:8px}
#settings-sample>p:last-child{font-size:13px;margin:0}
#settings-sample[data-style=paper]{border-radius:18px 8px 22px 10px;box-shadow:3px 4px 0 #0001}
.credential-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.credential-actions .button{font-size:13px;padding:10px 12px}
.credential-card dd{overflow-wrap:anywhere;user-select:all}
.password-toggle{justify-self:start;padding:0 4px;margin-top:-12px}
@media(max-width:600px){.settings-two{grid-template-columns:1fr}.settings-three{gap:8px}.settings-three input{padding:10px 7px}.brand>span:last-child{overflow-wrap:anywhere}.roster-person .actions{width:100%}}

/* Racek: saved teacher conversations and explicitly selected class materials. */
.racek-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px;align-items:start}
.racek-conversation #racek-status{font-size:14px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.racek-messages{max-height:60svh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.racek-message{padding:18px;margin:0 0 16px;border:1px solid var(--line);border-radius:14px}
.racek-question{background:var(--soft);margin-left:24px}
.racek-message-heading{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.racek-message-heading small{color:var(--muted);font-size:11px}
.racek-message .user-text{font-size:15px;line-height:1.8}
.racek-answer-tools{margin-top:10px}.racek-message details{font-size:12px;color:var(--muted)}
.racek-examples{display:grid;gap:10px;margin:24px 0}.racek-examples[hidden]{display:none}
.racek-examples p{color:var(--muted);font-size:14px;margin:0 0 8px}.racek-examples .button{text-align:left;justify-content:flex-start;white-space:normal}
.racek-history{margin-top:28px}.racek-history[hidden]{display:none}
.racek-history-note{margin-bottom:0;padding-top:16px;border-top:1px solid var(--line)}
.racek-source-list{max-height:420px;overflow:auto;margin:14px 0 20px}
.racek-source{padding:14px 0;border-bottom:1px solid var(--line)}
.racek-source label{display:flex;align-items:start;gap:10px;cursor:pointer}
.racek-source input{margin-top:3px;flex-shrink:0;accent-color:var(--navy)}
.racek-source strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.racek-source small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.racek-source .actions{gap:12px;padding-left:24px;margin-top:8px}.racek-source .text-button{font-size:12px;padding:4px 0}
.racek-sources>a{font-size:13px}.racek-conversation form{margin-top:24px}
@media(max-width:800px){.racek-layout{grid-template-columns:1fr}.racek-source-list{max-height:240px}.racek-messages{max-height:65svh}.racek-question{margin-left:12px}}

.racek-welcome{display:flex;align-items:center;gap:16px;margin:-12px -8px 12px;padding:8px 12px;background:#e7f3f5;border-radius:18px;overflow:hidden}
.racek-character{width:154px;height:154px;flex:0 0 154px;transform-origin:50% 95%}
.racek-sprite{width:100%;height:100%;background:url('/assets/racek-sprites-v1.png') 0 0/400% 200% no-repeat;animation:racek-blink 5.2s step-end infinite}
.racek-character[data-state=thinking]{transform:translateY(4.5%)}
.racek-character[data-state=thinking] .racek-sprite{background-position:0 100%;animation:racek-think 3s step-end infinite}
.racek-character[data-state=success]{transform:translateY(4.5%)}
.racek-character[data-state=success] .racek-sprite{background-position:66.666667% 100%;animation:racek-celebrate 3.8s step-end infinite}
.racek-character[data-state=error] .racek-sprite,.racek-character[data-state=credit] .racek-sprite{background-position:100% 0;animation:racek-puzzled 5s step-end infinite}
.racek-character[data-motion=off] .racek-sprite{animation:none}
.racek-character[data-state=idle][data-motion=on]{animation:racek-sway 8s ease-in-out infinite}
@keyframes racek-sway{0%,83%,100%{transform:rotate(0)}87%{transform:rotate(-3deg) translateY(-2px)}92%{transform:rotate(3deg)}96%{transform:rotate(-1deg)}}
.racek-greeting{min-width:0}.racek-greeting .eyebrow{font-size:12px;letter-spacing:1px;margin:0 0 6px}
.racek-greeting #racek-speech{font-size:17px;line-height:1.45;font-weight:700;margin:0 0 6px}
.racek-greeting .field-help{font-size:12px;margin:0}.racek-motion{font-size:12px;padding:7px 0;margin-top:2px}
.racek-error:not(:empty){background:#fff1e3;border:1px solid #dfb78c;border-radius:12px;padding:16px}
.racek-error p{font-size:15px;line-height:1.65}.racek-error .field-help{font-size:13px;margin:12px 0 0}
#racek-project-note:not([hidden]){border-left:3px solid var(--teal);padding:8px 12px;background:var(--soft)}
@keyframes racek-blink{0%,75%,90%,100%{background-position:0 0}77%,83%{background-position:33.333333% 0}80%{background-position:66.666667% 0}94%{background-position:100% 0}}
@keyframes racek-think{0%,100%{background-position:0 100%}50%{background-position:33.333333% 100%}}
@keyframes racek-celebrate{0%,60%,100%{background-position:66.666667% 100%}70%{background-position:100% 100%}}
@keyframes racek-puzzled{0%,85%,100%{background-position:100% 0}92%{background-position:66.666667% 0}}
@media(max-width:420px){.racek-character{width:112px;height:112px;flex-basis:112px}.racek-welcome{gap:6px;padding:6px}.racek-greeting #racek-speech{font-size:16px}.racek-greeting .eyebrow{font-size:12px;letter-spacing:0}}

/* Keep teacher controls and the native sign-in handoff usable in a narrow webview. */
.topbar{flex-wrap:wrap}.brand{min-width:0}.brand-mark{flex-shrink:0}.brand>span:last-child{min-width:0;overflow-wrap:anywhere}.header-controls{max-width:100%;flex-wrap:wrap}.login-card{min-width:0}.teacher-browser-link{display:block;font-size:14px;line-height:1.5;margin-top:12px;padding:10px 0;overflow-wrap:anywhere}
@media(max-width:700px){.header-controls{margin-left:auto}.login-card .button{white-space:normal;text-align:center}.teacher-signin small{font-size:14px}}

/* Daily classroom calendar and challenges. */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;margin:0 0 24px;align-items:start}
.today-card{border-top:4px solid var(--teal)}
.today-timetable{padding:18px 0;margin:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.today-timetable .section-heading{margin-bottom:10px}.today-timetable h3{font-size:20px;margin:0}.today-timetable a{font-size:14px}.lesson-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.lesson-list li{display:flex;gap:12px;align-items:flex-start;min-width:0}.lesson-number{display:flex;align-items:center;justify-content:center;flex:0 0 32px;min-height:32px;border-radius:9px;background:#d9eeea;color:var(--teal);font-weight:700}.lesson-list li>div{min-width:0}.lesson-list strong{display:block;font-size:16px;overflow-wrap:anywhere}.lesson-list small{display:block;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}.timetable-notice{font-size:14px;margin:12px 0 0}.timetable-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:20px}.timetable-day{min-width:0;padding:16px;background:#f1f8f6;border-radius:14px}.timetable-day h3{margin:0 0 16px;font-size:20px}.timetable-modes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.timetable-modes [aria-pressed=true]{background:var(--teal);color:#fff}.timetable-editor-day{border:1px solid var(--line);border-radius:14px;padding:16px}.timetable-editor-day>summary{cursor:pointer;font-size:20px;font-weight:700;min-height:32px}.timetable-editor-day>summary>span{font-size:14px;font-weight:400;margin-left:10px;color:var(--muted)}.timetable-editor-day>.button{margin-top:16px}.lesson-editor{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.lesson-editor-main{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:14px;align-items:end}.lesson-extra{margin-top:12px}.lesson-extra summary{font-size:14px;cursor:pointer;min-height:30px}.lesson-extra-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:12px}.lesson-editor .field{min-width:0;margin:0}.lesson-editor input,.lesson-editor select{width:100%;min-width:0}.timetable-import-preview{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.timetable-import-preview>.button{white-space:normal}
@media(max-width:600px){.lesson-editor-main{grid-template-columns:72px minmax(0,1fr);gap:10px}.lesson-editor-main>.button{grid-column:1/-1;justify-self:end}.timetable-modes>.button{flex:1 1 130px}.timetable-editor-day{padding:12px}.today-timetable .section-heading{gap:8px}}
.daily-duty-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(160px,.65fr) minmax(0,2fr);gap:14px 24px;border:1px solid var(--line);background:#f1f8f6;padding:18px 22px;align-items:center}
.duty-heading{min-width:0}.duty-heading .eyebrow{font-size:11px;margin:0 0 8px}.duty-heading h2{margin:0 0 4px;font-size:21px}.duty-heading .field-help{margin:4px 0 0;font-size:14px}.duty-heading time{color:var(--muted);font-size:14px}
.duty-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}.duty-person{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper,#fffdf7);min-width:0}.duty-person>span{font-size:14px;font-weight:700;color:var(--teal)}.duty-person strong{font-size:20px;line-height:1.3;overflow-wrap:anywhere}.duty-person small{color:var(--muted);line-height:1.4;font-size:14px}.duty-person small:empty{display:none}.duty-mine{border:2px solid var(--teal)}.daily-duty-card .duty-note{grid-column:1/-1;margin:0}
@media(max-width:760px){.daily-duty-card{grid-template-columns:minmax(0,1fr);padding:16px}.duty-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}.duty-heading .field-help{width:100%}.duty-people{gap:10px}.duty-person{padding:12px}.duty-person strong{font-size:19px}}
@media(max-width:380px){.duty-people{grid-template-columns:minmax(0,1fr)}}
.today-card .section-heading{margin-bottom:12px;flex-wrap:wrap}
.today-date{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.6px;margin:0 0 8px;text-transform:capitalize}
.day-nameday{margin:6px 0;color:var(--muted)}
.day-observance{font-size:14px;margin:12px 0;color:#71521c;background:#f5e9c9;padding:10px 12px;border-radius:8px}
.day-observance a{text-underline-offset:3px}
.day-agenda{display:grid;gap:12px;margin:22px 0}
.day-free{margin:0;line-height:1.6}
.calendar-event{border-left:3px solid #87b6aa;padding:0 0 2px 14px;min-width:0}
.calendar-kind{font-size:12px;letter-spacing:.04em;color:var(--muted);font-weight:700}
.calendar-event h3{margin:7px 0 5px}
.calendar-event p{font-size:15px;line-height:1.55;margin:6px 0}
.bring-note{display:grid;gap:3px;padding:10px 12px;background:var(--soft);border-radius:8px}
.calendar-task,.calendar-challenge-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;text-decoration:none;background:#edf4f5;font-size:15px;min-width:0}
.calendar-task>span:nth-child(2),.calendar-challenge-link>span:nth-child(2){flex:1;min-width:0}
.calendar-task small,.calendar-challenge-link small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.calendar-task:hover,.calendar-challenge-link:hover{background:#e0edef}
.daily-challenge-card{background:#fcf7e9;border-color:#e6d9b6;display:flex;flex-direction:column;align-items:flex-start}
.daily-challenge-card>.button{margin-top:auto}
.challenge-card-heading{display:flex;align-items:center;gap:8px;justify-content:space-between;width:100%}
.challenge-card-heading h2{font-size:23px;line-height:1.25;margin:0}
.challenge-card-heading .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:7px}
.mini-racek{display:block;width:92px;height:92px;margin:auto;transform-origin:50% 95%;animation:racek-sway 8s ease-in-out infinite}
.mini-racek .racek-sprite{display:block;animation:racek-blink 6.2s step-end infinite}
.mini-racek-chat{position:relative;flex:0 0 112px;text-align:center}
.racek-invitation>summary{display:block;list-style:none;cursor:pointer;border-radius:12px}
.racek-invitation>summary::-webkit-details-marker{display:none}
.mini-racek-label{display:block;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mini-racek-pause{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;line-height:1.4;min-height:32px;cursor:pointer}
.mini-racek-pause input{width:14px;height:14px;margin:0;accent-color:var(--teal)}
.mini-racek-chat:has(input:checked) .mini-racek,.mini-racek-chat:has(input:checked) .racek-sprite{animation:none}
.mini-racek-bubble{position:absolute;right:0;top:113px;width:min(280px,calc(100vw - 64px));z-index:5;padding:18px;background:#fffdf6;border:2px solid var(--teal);border-radius:18px 4px 18px 18px;box-shadow:0 8px 24px #153b4b24;text-align:left}
.mini-racek-bubble p{font-size:16px;font-weight:700}.mini-racek-bubble .button{white-space:normal;width:100%;text-align:center}
.racek-child-conversation{max-width:780px;margin:0 auto;min-width:0}.racek-child-conversation textarea{width:100%;min-width:0;font-size:16px}.racek-child-conversation textarea:read-only{background:var(--soft);color:var(--muted)}
.racek-study-status{padding:12px 14px;border-radius:10px;background:#edf4f5;font-size:14px}.racek-study-actions{margin-top:12px}
@media(prefers-reduced-motion:reduce){.racek-character,.mini-racek,.racek-sprite,.mini-racek .racek-sprite{animation:none!important}.mini-racek-pause{display:none}}
.challenge-empty{line-height:1.7;color:var(--muted);margin:8px 0 22px}
.challenge-question{font-size:17px;line-height:1.7}
.challenge-hint,.challenge-solution{width:100%;padding:12px 0;border-top:1px solid #ddcfad;font-size:15px}
.challenge-hint summary,.challenge-solution summary{min-height:26px;cursor:pointer;font-weight:700}
.challenge-solution{border-color:#abc5b5}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px}
.calendar-toolbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin-bottom:24px}
.calendar-toolbar h2{text-align:center;font-size:23px;text-transform:capitalize;margin:0}
.calendar-toolbar a{text-decoration:none;display:grid;place-items:center;font-size:30px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.weekday{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:0 0 12px}
.calendar-day{border:1px solid transparent;border-radius:10px;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:5px 1px;background:#f1f3ee;color:var(--navy)}
.calendar-day strong{font-size:17px;font-weight:600}
.calendar-day.is-today{border:2px solid var(--teal)}
.calendar-day.is-selected{background:var(--navy);color:#fff}
.day-dots{display:flex;align-items:center;justify-content:center;gap:3px;min-height:9px}
.day-dots i,.calendar-legend i{width:6px;height:6px;display:inline-block;border-radius:50%;flex:none}
.event-dot{background:#388475}.task-dot{background:#c78b23}.challenge-dot{background:#7970a0}
.is-selected .event-dot{background:#8ad7c3}.is-selected .task-dot{background:#f4cc74}.is-selected .challenge-dot{background:#c7bfff}
.day-dots b{font-size:9px;line-height:1}
.calendar-legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;color:var(--muted);margin:22px 0 14px}
.calendar-legend span{display:flex;align-items:center;gap:6px}
.calendar-today-link{display:inline-block;min-height:44px;padding:12px 0}
.calendar-detail h2{font-size:25px;line-height:1.3;text-transform:capitalize;margin:0 0 14px}
.calendar-challenge-link{margin-top:22px;background:#f3eddc}
.calendar-sources{margin:24px 0;font-size:13px;color:var(--muted);max-width:800px;line-height:1.6}
.calendar-sources summary{cursor:pointer;min-height:44px;padding:10px 0}
.challenge-workspace{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:24px;align-items:start}
.challenge-generator .racek-welcome{display:block;margin:0 0 24px;padding:12px;text-align:center}
.challenge-generator .racek-character{margin:auto}
.challenge-generator .field{margin-bottom:18px}
.challenge-generator .stack-form .field{margin:0}
.challenge-editor fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.challenge-editor textarea,.challenge-editor input,.challenge-generator input,.challenge-generator select{min-width:0;width:100%;font-size:16px}
.challenge-published-note{background:#e9f2ec;border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.6}
.challenge-publish-controls{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:20px 0 8px;margin-top:20px}
.challenge-reader{max-width:760px;margin:auto;background:#fcf7e9}
.published-preview{margin-top:22px;font-size:14px}
.published-preview summary{cursor:pointer;min-height:44px;padding:10px 0}
#challenge-error:empty{display:none}
#challenge-error{border-left:3px solid var(--danger);padding:0 0 0 14px;margin:18px 0;font-size:14px}
@media(max-width:760px){.today-grid,.calendar-layout,.challenge-workspace{grid-template-columns:minmax(0,1fr)}.today-grid,.calendar-layout,.challenge-workspace{gap:18px}.calendar-month{padding:18px}.calendar-day{min-height:49px}.calendar-toolbar{margin-bottom:18px}.challenge-generator .racek-welcome{display:flex;text-align:left}.challenge-generator .racek-character{width:100px;height:100px;flex-basis:100px}.challenge-editor .actions>.button{flex:1 1 170px;white-space:normal}.challenge-card-heading h2{font-size:22px}.mini-racek{width:78px;height:78px;flex-basis:78px}.today-card .section-heading a{min-height:44px;display:flex;align-items:center}}

.automatic-challenge-setting{padding:14px;background:#e9f2ec;border-radius:10px;margin:0 0 24px;font-size:14px}
.automatic-challenge-setting .button{white-space:normal}
.challenge-editor input[type=checkbox]{width:18px;min-width:18px}

.credential-status{color:var(--muted);font-size:14px;min-height:1.4em}

.subscription-status,.subscription-form,.subscription-admin{margin-bottom:24px}.subscription-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.subscription-fields .field{min-width:0}.subscription-fields input,.subscription-fields select{width:100%;min-width:0}.subscription-form fieldset{border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}.subscription-form fieldset[hidden]{display:none}.subscription-form legend{font-weight:700;padding:0 8px}.subscription-price{font-size:18px;font-weight:600;margin:0}.subscription-admin summary{font-size:18px;font-weight:600;cursor:pointer}.subscription-admin form{margin-top:20px}.subscription-seller{overflow-wrap:anywhere}.paused-task{padding:16px 0;border-bottom:1px solid var(--line)}.paused-task p{white-space:pre-wrap}@media(max-width:640px){.subscription-fields{grid-template-columns:1fr}.subscription-form fieldset{padding:14px}}

/* Keep the home overview compact: daily helpers, three clear topics, then posts. */
.daily-timetable-card{grid-column:1/-1}.daily-timetable-card .today-timetable{margin:0;padding:0;border:0}.daily-timetable-card .today-timetable h3{font-size:22px}.daily-timetable-card .section-heading{flex-wrap:wrap}.daily-timetable-card .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}.daily-timetable-card .lesson-list li{padding-bottom:10px;border-bottom:1px solid var(--line)}
@media(min-width:1100px){.today-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1fr);gap:20px}.today-grid>.panel:not(.daily-duty-card){padding:22px}.daily-timetable-card{grid-column:auto}.daily-timetable-card .lesson-list{grid-template-columns:minmax(0,1fr)}.today-card .section-heading h2{font-size:22px}.today-card .today-date{font-size:24px}}
@media(max-width:760px){.daily-timetable-card .lesson-list{grid-template-columns:minmax(0,1fr)}.today-grid>.panel:not(.daily-duty-card){padding:20px}.daily-duty-card{gap:12px}.duty-heading h2{font-size:20px}}
.class-deletion{margin-top:24px}.class-deletion>summary{min-height:44px;cursor:pointer;font-weight:700}.class-deletion[open]>summary{margin-bottom:12px}.class-deletion .button{white-space:normal}#deletion-status{width:calc(100% - 40px);max-width:1074px;margin:20px auto 0}#deletion-status[hidden]{display:none}

.credential-password{white-space:pre-wrap}.credential-missing{background:#fff3d9;border:1px solid #d4af69;border-radius:12px;padding:16px;margin:16px 0}.credential-card .credential-password{font-weight:700;font-size:18px}@media screen{.credential-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}}

.racek-coach{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px;background:var(--class-light)}.racek-coach>img{flex:none;border-radius:22px}.racek-coach p{margin:0 0 12px}.racek-coach .actions{flex-wrap:wrap}.racek-nameday{display:flex;gap:12px;align-items:center;padding:12px 0}.racek-nameday img{flex:none;border-radius:14px}@media(max-width:480px){.racek-coach{gap:10px}.racek-coach>img{width:44px;height:44px}.racek-coach .actions{align-items:flex-start;flex-direction:column}}

/* Login must fit its actual panel, including embedded desktop-width webviews. */
.login-layout{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(20px,5vw,60px)}.login-layout>*{min-width:0}.login-card input,.login-card select{min-width:0;max-width:100%}.login-roles{flex-wrap:wrap}.login-card .button{white-space:normal;overflow-wrap:anywhere}
.login-layout:has(.login-roles a[href="#login?role=teacher"].selected){max-width:480px;grid-template-columns:minmax(0,1fr);margin-inline:auto}.login-layout:has(.login-roles a[href="#login?role=teacher"].selected)>.login-intro{display:none}

/* Account controls share the same calm, responsive classroom panels. */
.login-memory,.teacher-credentials{margin-top:24px;max-width:760px}.login-memory .check-option,.login-card .check-option{min-height:44px;align-items:center}.setup-mode-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#e2eeeb;border:1px solid #a7c8c1;border-radius:14px;margin:12px clamp(16px,4vw,60px);padding:16px 20px}.setup-mode-bar span{display:block;font-size:14px;margin-top:4px}.setup-mode-bar .button{white-space:normal}.login-card .teacher-signin{margin-top:24px}.login-card .check-option{font-size:16px}

/* Homework attachments: compact, readable controls on phones and desktops. */
.submission-picker{min-width:0;margin:0;padding:16px;border:1px solid var(--line,#cbd8d4);border-radius:12px}.submission-picker legend{font-weight:700;padding:0 5px}.submission-pickers{display:grid;gap:14px}.submission-pickers input{max-width:100%;min-width:0;font-size:1rem}.submission-files{display:grid;gap:12px;list-style:none;padding:0;margin:12px 0}.submission-files li{display:grid;gap:6px;min-width:0;padding:12px;border:1px solid var(--line,#cbd8d4);border-radius:10px}.submission-files small{font-size:.875rem;color:var(--muted,#526b73)}.submission-file-name{overflow-wrap:anywhere;font-weight:650}.submission-preview{display:block;width:100%;max-height:180px;object-fit:contain;border-radius:8px}.submission-files .photo-link{display:block}.submission-files .attached-photo{max-height:240px;object-fit:contain}.submission-files button{justify-self:start;min-height:40px}.submission-picker [data-upload-status]:empty{display:none}

.submission-files audio{width:100%;max-width:100%}

/* Mobile photos remain inside the app, with a visible safe-area close control. */
dialog.photo-viewer{position:fixed;inset:0;margin:auto;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:0;background:#112c37;color:white;overflow:hidden}
dialog.photo-viewer[open]{display:flex;flex-direction:column}dialog.photo-viewer::backdrop{background:#112c37}
.photo-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:#153b4b;z-index:1}
.photo-viewer-bar .button{min-height:48px;min-width:112px;background:white;color:#153b4b}.photo-viewer-body{flex:1;min-height:0;overflow:auto;display:flex;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.photo-viewer-body img{display:block;max-width:100%;max-height:100%;object-fit:contain;margin:auto;touch-action:pan-x pan-y pinch-zoom}.photo-viewer-error{padding:16px}
.activity-notice{font-size:.875rem;color:#526773;margin:12px auto 90px;max-width:1100px;padding:0 20px}.activity-filters{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px}.activity-filters .field{flex:1;min-width:200px}.activity-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.activity-summary .panel{display:grid;gap:8px}.activity-summary strong{font-size:1.75rem}.activity-summary span{font-size:.875rem}.activity-sections{display:grid;gap:16px}.activity-sections>div{display:grid;grid-template-columns:150px minmax(80px,1fr) 130px 100px;gap:12px;align-items:center}.activity-sections meter{width:100%;height:22px;accent-color:#16778b}.activity-table-wrap{overflow-x:auto}.activity-table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem}.activity-table th,.activity-table td{padding:14px 12px;border-bottom:1px solid #d6e1e5;vertical-align:top}.activity-table thead{background:#edf6f8}.activity-table tbody th{min-width:110px}.activity-table td:nth-child(3){min-width:170px}.activity-table td:last-child{min-width:150px}
@media(max-width:640px){.activity-summary{grid-template-columns:1fr}.activity-summary .panel{grid-template-columns:110px 1fr;align-items:center}.activity-sections>div{grid-template-columns:1fr auto}.activity-sections meter{grid-row:2}.activity-sections small{grid-row:2}.activity-sections strong{text-align:right}}

button.photo-link,button.photo-name{appearance:none;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit}button.photo-name{text-decoration:underline;font-weight:650}button.photo-link:focus-visible,button.photo-name:focus-visible{outline:3px solid #16778b;outline-offset:4px}

/* Bulletin board: news first, with a compact daily header. */
.board-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.board-tabs a{min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;border:1px solid #b8cdc7;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;background:var(--paper)}
.board-tabs a[aria-current]{background:var(--class-dark);color:white;border-color:var(--class-dark)}
.board-day-header{padding:12px 16px;background:#e5eee7;border:1px solid #c5d6ca;border-radius:12px;margin-bottom:16px;font-size:14px}
.board-day-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;line-height:1.5}
.board-day-line time{font-weight:800}.board-day-line .text-button{padding:3px 6px;min-height:36px}
.board-lesson-status{display:block;font-size:14px;margin-top:5px;line-height:1.5;text-underline-offset:3px}
.board-lesson-status small{display:block;color:var(--muted);font-size:12px}
.board-poll-notice{width:100%;text-align:left;color:inherit;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid #d4ad51;background:#fcf0ce;border-radius:12px;margin-bottom:16px;font-size:14px;font-weight:700;text-decoration:none;min-height:44px}
.board-latest{margin-bottom:22px}.board-challenge,.board-older,.board-closed{margin-bottom:24px}
#board-reminders:not(:empty){margin-bottom:18px}.board-event-reminder{border-left:5px solid var(--class-gold)}
.board-extras{border-top:1px solid #cad6cb;padding-top:24px;margin-top:28px}.board-summary{margin-top:22px}
.poll-previous{padding:16px;border:1px solid #d4ad51;border-radius:12px;background:#fcf4df}.poll-previous p{font-size:14px}
.board-news .poll-card .row,.board-older .poll-card .row{flex-wrap:wrap;gap:8px}.board-news h2,.board-news h3,.board-older h2{overflow-wrap:anywhere}
@media(min-width:900px){.board-latest:has(>:nth-child(2)){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:20px}.board-latest>*{min-width:0}.board-challenge .daily-challenge-card{max-width:none}}
@media(max-width:700px){.board-day-header{padding:10px 12px}.board-day-line{gap:4px 12px}.board-day-line>span{flex-basis:100%}.board-tabs{gap:6px}.board-tabs a{padding:10px 11px}.board-extras{margin-top:20px}}

@media(max-width:700px){.page-heading:has(+.board-tabs){flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}.page-heading:has(+.board-tabs)>.actions{max-width:100%;gap:8px}.page-heading:has(+.board-tabs) h1{font-size:27px}.page-heading:has(+.board-tabs) .eyebrow{margin-bottom:6px}.page-heading:has(+.board-tabs) .button{font-size:14px;padding:10px 12px}}

/* Clear header and directly accessible learning destinations. */
.header-racek-button{display:inline-flex;align-items:center;gap:7px;text-decoration:none!important;font-weight:700!important}.header-racek-button img{object-fit:contain;flex-shrink:0}
.class-switch-label{font-size:14px;font-weight:800}.header-controls>select{max-width:180px!important;font-size:14px!important}.help-nav-link{font-size:14px}.header-controls .role-label{display:none}
.header-day{flex-basis:100%;margin:0;padding:14px 18px;background:#fff9e9;border:1px solid #d8bd7c;border-left:5px solid var(--class-gold);box-shadow:0 3px 12px #153b4b08}
.header-day .board-day-line{gap:10px 24px}.header-date{text-decoration:none;display:flex;align-items:baseline;gap:10px}.header-date>span{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:800}.header-date time{font-size:18px;color:var(--navy)}
.header-duty{font-size:16px;font-weight:700}.header-duty>strong{color:var(--teal)}.header-duty small{display:block;font-size:13px;font-weight:400;margin-top:3px}.header-day .board-lesson-status{font-size:14px;margin-top:7px}
.board-intro-row{display:flex;align-items:center;gap:18px;margin:0 0 20px}.board-racek-entry{display:flex;gap:16px;align-items:center;flex:1;padding:12px 18px;background:#e1f0f1;border:1px solid #aecfd1;border-radius:18px;text-decoration:none}.board-racek-entry img{object-fit:contain;flex-shrink:0}.board-racek-entry>span{display:grid;gap:3px}.board-racek-entry strong{font-size:19px}.board-racek-entry span span{font-size:14px}.board-racek-entry b{font-size:14px;color:#136069}.board-calendar-link{font-size:14px;font-weight:700;padding:12px 0;white-space:nowrap}
.bottom-nav{max-width:calc(100vw - 24px)}.bottom-nav a{padding:10px 13px;gap:6px}.bottom-nav a b{font-size:12px}
@media(max-width:700px){
 .topbar{padding:12px 16px;gap:10px}.header-controls{gap:6px}.header-controls #logout{font-size:14px;min-height:44px}.header-racek-button{padding:4px 6px!important;font-size:14px!important}.header-racek-button img{width:36px;height:36px}.header-day{padding:10px 12px}.header-date time{font-size:17px}.header-day .board-day-line{gap:5px 12px}.header-duty{flex-basis:100%;font-size:15px}
 .bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;max-width:none;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}.bottom-nav a{min-height:49px;padding:5px 2px;gap:4px}.bottom-nav a b{font-size:12px}.bottom-nav a span{font-size:19px}.is-parent .bottom-nav{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding-bottom:165px}#toast{bottom:145px}
 .board-intro-row{flex-wrap:wrap;gap:4px;margin-bottom:14px}.board-racek-entry{flex-basis:100%;padding:8px 12px;gap:10px}.board-racek-entry img{width:64px;height:64px}.board-racek-entry strong{font-size:17px}.board-calendar-link{margin-left:auto}.page-heading:has(+.board-intro-row){margin:0 0 14px;gap:12px}.page-heading:has(+.board-intro-row) h1{font-size:28px}
}

.class-switch-control{display:flex;align-items:center;gap:7px;max-width:100%}.class-switch-control select{min-height:40px;max-width:180px;padding:8px;border:1px solid #c8d5cb;border-radius:9px;background:var(--surface);color:var(--navy);font-size:14px}.board-racek-entry img{border-radius:14px}
@media(max-width:700px){.page-heading:has(+.board-intro-row){flex-direction:row;flex-wrap:wrap;align-items:center}.page-heading:has(+.board-intro-row)>div:first-child{flex:1;min-width:140px}.page-heading:has(+.board-intro-row)>.actions{max-width:100%}.page-heading:has(+.board-intro-row) .button{font-size:14px;padding:10px 12px}.class-switch-control select{max-width:165px}}

/* A small freestanding mascot opposite the brand, not a repeated app icon. */
.topbar:has(>.header-racek-button){display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 18px;align-items:center}
.topbar>.header-racek-button{grid-column:3;grid-row:1;justify-self:end;padding:0!important;gap:3px;white-space:nowrap;min-height:54px;color:var(--navy)}
.topbar:has(>.header-racek-button)>.brand{grid-column:1;grid-row:1}
.topbar:has(>.header-racek-button)>.header-controls{grid-column:2;grid-row:1;justify-content:flex-end}
.topbar:has(>.header-racek-button)>.header-day{grid-column:1/-1}
.header-racek-art{position:relative;display:block;overflow:hidden;width:54px;height:54px;flex:0 0 54px}
.header-racek-button .header-racek-art>img{position:absolute;inset:0 auto auto 0;width:400%;height:200%;max-width:none;object-fit:fill;border-radius:0}
@media(max-width:1000px){.topbar:has(>.header-racek-button){grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}.topbar>.header-racek-button{grid-column:2}.topbar:has(>.header-racek-button)>.header-controls{grid-column:1/-1;grid-row:2;justify-self:end}.topbar:has(>.header-racek-button)>.header-day{grid-row:3}}
@media(max-width:400px){.topbar>.header-racek-button{font-size:14px!important;gap:0}.header-racek-art{width:46px;height:50px;flex-basis:46px}.topbar:has(>.header-racek-button) .brand small{font-size:9px;max-width:125px}}

/* Three clear header levels: identity, daily context and a readable inbox. */
.topbar.app-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px 20px;align-items:center}
.topbar.app-header>.brand{grid-column:1;grid-row:1;min-width:0;justify-self:start}
.topbar.app-header>.class-pill{grid-column:2;grid-row:1;justify-self:center}
.class-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:68px;max-width:110px;padding:8px 13px;border-radius:999px;background:#e1ece8;border:1px solid #adc9c0;color:var(--navy);font-size:17px;font-weight:800;white-space:nowrap}
.class-pill>span{overflow:hidden;text-overflow:ellipsis}.class-pill-chevron{margin-left:6px;font-size:15px}.class-pill select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}.class-pill:focus-within{outline:3px solid #ca721b;outline-offset:3px}
.topbar.app-header>.header-racek-button{grid-column:3;grid-row:1;justify-self:end;min-width:0;gap:5px;text-decoration:none}
.topbar.app-header>.header-controls{grid-column:1/-1;grid-row:2;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0}
.app-header .help-nav-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:5px 0;border:0;background:transparent;text-decoration:none;font-size:14px;font-weight:700}
.app-header .help-nav-link.has-requests{color:#934026}.help-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:50%;background:#ad432e;color:white;font-size:13px;font-weight:800}
.topbar.app-header>.header-day{grid-column:1/-1;grid-row:3;margin:0;width:100%;padding:10px 14px}
.topbar.app-header>.header-notifications{grid-column:1/-1;grid-row:4}
.header-notifications{display:flex;align-items:stretch;min-width:0;border:1px solid #c4d2cc;border-radius:14px;background:var(--surface);overflow:hidden}
.header-notifications:has(.has-unread){background:#fff3cf;border-color:#d6b75c}
.header-notification-main{display:flex;align-items:center;gap:14px;flex:1;min-width:0;padding:13px 16px;border:0;background:transparent;text-align:left;color:var(--navy);cursor:pointer}
.notification-emblem{position:relative;display:grid;place-items:center;flex:0 0 38px;width:38px;height:42px}.notification-emblem svg{width:26px;height:26px}.notification-emblem #notification-count{position:absolute;top:-2px;right:-4px;min-width:21px;min-height:21px;padding:2px 4px;border-radius:12px;background:#a63d2e;color:white;font-size:11px;font-weight:800;text-align:center}
.header-notification-copy{display:grid;gap:2px;min-width:0}.header-notification-copy small{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:#63736e}.header-notification-copy strong{font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-notification-copy>span{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#51645d}
.header-notification-all{display:flex;align-items:center;gap:5px;padding:12px 16px;font-size:13px;font-weight:700;text-decoration:none;color:var(--navy);border-left:1px solid #d6dfd8;white-space:nowrap}
.header-notification-main:focus-visible,.header-notification-all:focus-visible{outline:3px solid #ca721b;outline-offset:-4px}
@media(max-width:700px){.topbar.app-header{gap:8px 9px;padding:14px 16px}.app-header .brand{gap:6px}.app-header .brand-mark{width:34px;height:34px}.app-header .brand>span{font-size:19px}.app-header .brand small{display:none}.class-pill{min-width:58px;min-height:42px;max-width:86px;padding:7px 10px;font-size:16px}.topbar.app-header>.header-racek-button{font-size:12px!important;line-height:1.3;gap:1px;white-space:normal;text-align:left}.app-header .header-racek-button>span:first-child{max-width:62px}.app-header .header-racek-art{width:42px;height:48px;flex-basis:42px}.app-header .header-controls #logout{font-size:13px;padding:4px 0}.header-notification-main{padding:11px 12px;gap:9px}.header-notification-all{padding:10px;font-size:12px}.header-notification-all>span{display:none}.header-notification-copy strong{font-size:14px}.header-notification-copy>span{font-size:12px}}
@media(max-width:360px){.topbar.app-header{gap:8px 5px;padding-inline:12px}.app-header .brand>span{font-size:17px}.app-header .brand-mark{width:28px;height:28px}.class-pill{min-width:50px;padding:6px 8px}.app-header .header-racek-art{width:36px;height:43px;flex-basis:36px}}

.pupil-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.pupil-picker-grid .check-option{padding:10px;min-height:44px;align-items:center}.pupil-picker-grid input{flex-shrink:0;width:20px;height:20px}[data-pupil-picker]{min-width:0}[data-picked-count]{font-weight:700}

.points-team-picker{display:flex;flex-wrap:wrap;gap:.65rem 1.2rem;margin:.6rem 0 1rem}.points-batch-row{display:grid;gap:.6rem;min-width:0}.points-batch-row legend{font-weight:700}.points-batch-row .row{flex-wrap:wrap}.roster-nickname{display:block;color:var(--ink,#153b4b);margin:.2rem 0;font-weight:600}

/* Optional update notice; never overlays a lesson or forces a restart. */
.app-update-notice{max-width:1160px;margin:16px auto 0;padding:16px 22px;border:1px solid #b5ccc3;border-left:5px solid #28776f;border-radius:14px;background:#edf5ee;color:#173c3a;display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-update-notice p{margin:5px 0 0;font-size:14px}.app-update-notice [data-update-error]{color:#a43e35}.app-update-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.app-update-actions .button{min-height:44px}
@media(max-width:700px){.app-update-notice{margin:12px 16px 0;padding:14px;align-items:flex-start;flex-direction:column;gap:10px}.app-update-actions{flex-wrap:wrap;width:100%}}