/* Teacher-only presentation. Content stays opaque; navigation carries the depth. */
body.teacher-mobile-ui {
  --brand:#0667d8; --accent:#0667d8; --ink:#253047; --muted:#627087;
  --line:#e1e9f3; --bg:#f2f6fc; --radius:18px;
  --teacher-blue-soft:#eaf3ff; --teacher-ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
body.teacher-mobile-ui #app.teacher-workspace { --bg:#f2f6fc; min-width:0; }
body.teacher-mobile-ui #app>header {
  background:rgba(255,255,255,.88); border-color:#e2eaf4;
  padding-top:16px; padding-bottom:16px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
body.teacher-mobile-ui #app>header .brand { min-width:0; font-weight:650; }
body.teacher-mobile-ui #schoolName { overflow-wrap:anywhere; }
body.teacher-mobile-ui #app>header .logo { flex-shrink:0; background:#e3efff; color:var(--brand); }
body.teacher-mobile-ui #app>header .header-actions { min-width:0; }
body.teacher-mobile-ui #app>header .quiet { color:#516681; border-radius:10px; }
body.teacher-mobile-ui #app>nav {
  position:sticky; top:0; z-index:12; gap:6px; padding-top:8px; padding-bottom:8px;
  background:rgba(248,251,255,.94); border-color:#e1e9f3;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  scrollbar-width:thin;
}
body.teacher-mobile-ui #app>nav button { border-radius:11px; color:#536780; }
body.teacher-mobile-ui #app>nav .active { background:#e1edff; color:#075dbf; }
body.teacher-mobile-ui #app>nav .teacher-back-home {
  position:sticky; left:0; z-index:1; flex-shrink:0;
  min-height:44px; background:var(--brand); color:#fff; font-weight:650;
  box-shadow:3px 0 0 #f8fbff;
}
body.teacher-mobile-ui #content { min-width:0; padding-bottom:max(40px,env(safe-area-inset-bottom)); }
body.teacher-mobile-ui :is(button,.button) {
  min-height:44px; touch-action:manipulation;
  transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .18s var(--teacher-ease);
}
body.teacher-mobile-ui :is(button,.button):active:not(:disabled) { transform:scale(.975); transition-duration:.08s; }
body.teacher-mobile-ui :is(button,.button,input,select,textarea,summary):focus-visible { outline:3px solid #7eb4f4; outline-offset:3px; }
/* Shared actions include dialogs mounted outside #app and module-specific buttons. */
body.teacher-mobile-ui :is(button,.button):is(.primary,.se-primary,.ttp-confirm) {
  min-height:44px; padding:10px 16px; border-radius:12px;
  background:var(--brand); border-color:var(--brand); color:#fff!important;
  box-shadow:0 3px 8px #0866cf1a,inset 0 1px 0 #ffffff26;
  font-size:14px; font-weight:600; line-height:1.4; white-space:normal;
}
body.teacher-mobile-ui :is(button,.button):is(.primary,.se-primary,.ttp-confirm):disabled {
  background:#e3ecf8; border-color:#e3ecf8; color:#5c7391!important;
  box-shadow:none; opacity:1; cursor:not-allowed;
}
body.teacher-mobile-ui :is(#dialog .actions,.se-dialog .se-actions,.ob-save-bar,.fill-footer) > button,
body.teacher-mobile-ui .se-savebar .se-button {
  min-height:44px; min-width:0; border-radius:12px; padding:10px 16px;
  font-size:14px; line-height:1.4; white-space:normal; overflow-wrap:anywhere;
}
body.teacher-mobile-ui #dialogContent > .actions,
body.teacher-mobile-ui #dialogContent > form > .actions { justify-content:flex-end; align-items:stretch; gap:8px; }
body.teacher-mobile-ui #dialogContent > h3 { padding-right:44px; }
body.teacher-mobile-ui .se-dialog { border-color:var(--line); border-radius:22px; background:#fff; }
body.teacher-mobile-ui .se-dialog::backdrop { background:#314f783d; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
body.teacher-mobile-ui input:focus,body.teacher-mobile-ui select:focus,body.teacher-mobile-ui textarea:focus { outline-color:#0667d833; }
body.teacher-mobile-ui input:not([type=checkbox]):not([type=radio]),body.teacher-mobile-ui select,body.teacher-mobile-ui textarea { border-color:#cbd7e7; border-radius:11px; }
body.teacher-mobile-ui .card,body.teacher-mobile-ui .form-item,body.teacher-mobile-ui .table-wrap { border-color:var(--line); box-shadow:0 2px 8px #2f537704; }
body.teacher-mobile-ui .page-head h2 { font-weight:650; letter-spacing:-.4px; }
body.teacher-mobile-ui .badge:not(.draft):not(.archived):not(.disabled) { background:var(--teacher-blue-soft); }
body.teacher-mobile-ui .targets-cards .target-choice-row:has(input:checked):not(.target-completed),
body.teacher-mobile-ui .option:has(input:checked):not(.target-completed) { background:#edf5ff; border-color:#4092ee; }
body.teacher-mobile-ui .targets-cards .target-choice-row:has(input:checked):not(.target-completed) { box-shadow:inset 0 0 0 .5px #4092ee; }
body.teacher-mobile-ui .target-choice-row { transition:background-color .15s,border-color .15s; }
body.teacher-mobile-ui .tc-tabs button[aria-pressed=true],body.teacher-mobile-ui .tc-periods button[aria-pressed=true] { background:#eaf3ff; border-color:#a6c8f5; color:#075dbf; }
body.teacher-mobile-ui .tc-student-avatar { background:#eaf3ff; color:#0861bf; }
body.teacher-mobile-ui .tc-choice { border-radius:16px; }
body.teacher-mobile-ui .teacher-student-center { --ink-2:#586c83; --ink-3:#627087; }
body.teacher-mobile-ui .fill-footer {
  background:rgba(255,255,255,.94); border-color:#dce7f5; border-radius:16px;
  box-shadow:0 5px 18px #345a7810; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
body.teacher-mobile-ui .fill-fields { position:static; }
body.teacher-mobile-ui #dialog {
  border-color:#e0e8f3; border-radius:22px; background:#fff;
  box-shadow:0 20px 70px #193e7433,0 2px 12px #1e508014;
}
body.teacher-mobile-ui #dialog::backdrop { background:#314f783d; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
body.teacher-mobile-ui #dialog>.dialog-close { border-radius:50%; width:44px; height:44px; color:#5b6e86; }
body.teacher-mobile-ui .photo > button { width:44px; height:44px; min-width:44px; padding:0; }
body.teacher-mobile-ui .teacher-student-center .sc-section-head > .teacher-select-trigger { width:auto; min-width:min(160px,100%); max-width:100%; margin:0; }
body.teacher-mobile-ui #notice { background:#fff; color:#284762; border:1px solid #d7e4f2; box-shadow:0 6px 24px #264b7521; border-radius:14px; }

@media(hover:hover) {
  body.teacher-mobile-ui :is(button,.button):is(.primary,.se-primary,.ttp-confirm):hover:not(:disabled) { background:#0873e8; border-color:#0873e8; }
  body.teacher-mobile-ui #app>nav button:hover { background:#edf4ff; color:#075dbf; }
  body.teacher-mobile-ui #app>nav .teacher-back-home:hover { background:#075bbf; color:#fff; }
}
@media(max-width:640px) {
  body.teacher-mobile-ui #app>header { padding:12px 16px 8px; gap:8px; }
  body.teacher-mobile-ui #app>header .brand { flex:1 1 100%; font-size:15px; line-height:1.5; }
  body.teacher-mobile-ui #app>header .header-actions { width:100%; gap:8px; margin:0; }
  body.teacher-mobile-ui #userName { margin-right:auto; overflow-wrap:anywhere; color:var(--muted); }
  body.teacher-mobile-ui #app>header .header-actions button { padding:8px 10px; font-size:13px; flex-shrink:0; }
  body.teacher-mobile-ui #app>nav { padding:6px 12px; flex-wrap:nowrap; gap:4px; }
  body.teacher-mobile-ui #app>nav button { padding:8px 11px; font-size:13px; flex-shrink:0; }
  body.teacher-mobile-ui #app>nav .teacher-back-home { margin-right:4px; }
  body.teacher-mobile-ui #content { padding:20px 16px max(32px,env(safe-area-inset-bottom)); }
  body.teacher-mobile-ui .page-head h2 { font-size:23px; }
  body.teacher-mobile-ui .card { padding:18px 16px; }
  body.teacher-mobile-ui .fill-footer { bottom:8px; padding:10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  body.teacher-mobile-ui #dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:24px 18px; }
  body.teacher-mobile-ui #dialog.teacher-archive-dialog { padding:0; }
  body.teacher-mobile-ui #dialogContent > .actions > button,
  body.teacher-mobile-ui #dialogContent > form > .actions > button,
  body.teacher-mobile-ui .se-dialog .se-actions > button { flex:1 1 0; }
  body.teacher-mobile-ui #dialogContent > form > button.primary { width:100%; }
  body.teacher-mobile-ui .se-dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:24px 18px; }
  body.teacher-mobile-ui .teacher-archive-heading { background:#f7faff; }
  body.teacher-mobile-ui .teacher-archive-body { font-size:16px; }
}
@media(max-width:360px) {
  body.teacher-mobile-ui #app>header { padding-inline:12px; }
  body.teacher-mobile-ui #content { padding-inline:12px; }
  body.teacher-mobile-ui #app>nav { padding-inline:8px; }
}
@media(prefers-reduced-transparency:reduce) {
  body.teacher-mobile-ui #app>header,body.teacher-mobile-ui #app>nav,body.teacher-mobile-ui .fill-footer { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  body.teacher-mobile-ui :is(#dialog,.se-dialog)::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  body.teacher-mobile-ui *,body.teacher-mobile-ui *::before,body.teacher-mobile-ui *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  body.teacher-mobile-ui :is(button,.button):active:not(:disabled) { transform:none; }
}

/* Keep one inset arrow across native single-select controls in the teacher workspace. */
body.teacher-mobile-ui select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
  -webkit-appearance:none;
  appearance:none;
  padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2363768c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
@media(forced-colors:active) {
  body.teacher-mobile-ui select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
    -webkit-appearance:auto;
    appearance:auto;
    background-image:none;
    padding-inline-end:12px;
  }
}