/* Shared non-color tokens: loaded after the existing theme and component layers.
   Background artwork and schedule composition intentionally remain untouched. */
:root {
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-floating: 24px;
  --radius-sheet: 28px;
  --edge-floating: color-mix(in srgb, var(--text) 12%, transparent);
  --surface-floating: color-mix(in srgb, var(--surface) 91%, transparent);
  --elevation-card: 0 2px 8px rgb(0 0 0 / .04);
  --elevation-floating: 0 8px 24px rgb(0 0 0 / .12);
  --elevation-sheet: 0 20px 60px rgb(0 0 0 / .22);
  --blur-floating: 10px;
  --blur-sheet: 14px;
  --duration-state: 90ms;
  --duration-control: 180ms;
  --duration-card: 220ms;
  --duration-screen: 240ms;
  --duration-day: 240ms;
  --duration-sheet: 280ms;
  --duration-sheet-exit: 260ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
.app-brand { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.app-brand .app-kicker { margin:0; letter-spacing:.08em; }
.brand-badge { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; overflow:hidden; border:0; border-radius:9px; background:transparent; box-shadow:none; }
.brand-badge img { display:block; width:32px; height:32px; max-width:100%; object-fit:contain; }
.app-header-title { min-width:0; }
/* Reuse existing color surfaces; normalize only geometry and material depth. */
:root .app-shell .view .card,
:root:not([data-theme^="dark-"]) .app-shell .view .card { border-radius:var(--radius-card); box-shadow:var(--elevation-card); }
.app-shell .view .lesson-card { transition:transform var(--duration-state) var(--ease-out), border-color var(--duration-control) ease; }
.app-shell .view .lesson-card:hover { transform:none; box-shadow:var(--elevation-card); }
.app-shell .view .lesson-card:active { transform:scale(.99); }
.app-shell .view .lesson-top-open:active, .app-shell .view .lesson-entry-open:active { transform:none; }
.app-shell .option-button, .app-shell .wide-button, .app-shell .game-primary,
.app-shell .game-secondary, .app-shell .select-button, .app-shell .group-chooser,
.app-shell .picker-disclosure, .app-shell input, .app-shell textarea,
.app-shell select { border-radius:var(--radius-control); }
.app-shell button, .login-screen button, .login-screen a, .install-actions button {
  transition:transform var(--duration-state) var(--ease-out), opacity var(--duration-state) ease,
    border-color var(--duration-control) ease, background-color var(--duration-control) ease, color var(--duration-control) ease;
}
.app-shell .option-button:not(:disabled):active, .app-shell .game-primary:not(:disabled):active,
.app-shell .game-secondary:not(:disabled):active, .app-shell .round-button:not(:disabled):active,
.app-shell .info-button:not(:disabled):active, .app-shell .sheet-close:not(:disabled):active,
.login-screen .login-primary:active, .install-actions button:not(:disabled):active { transform:scale(.97); }
.app-shell .bottom-nav { border-radius:var(--radius-floating); box-shadow:var(--elevation-floating); backdrop-filter:blur(var(--blur-floating)); -webkit-backdrop-filter:blur(var(--blur-floating)); }
.app-shell dialog.sheet { background:var(--surface-floating); backdrop-filter:blur(var(--blur-sheet)); -webkit-backdrop-filter:blur(var(--blur-sheet)); }
.app-shell .sheet-heading { gap:12px; margin-bottom:20px; }
.app-shell .sheet-close { flex-basis:44px; }
.app-shell #group-dialog, .app-shell #calendar-dialog { border-radius:var(--radius-floating); box-shadow:var(--elevation-sheet); }
.app-shell .picker-disclosure > summary span:last-child { transition:transform var(--duration-state) var(--ease-out); }
.app-shell .picker-disclosure > :not(summary) { transform-origin:top left; }
.app-shell .rhythm-fill { transition:none; }
.app-shell .rhythm-day:hover, .app-shell .rhythm-day.active { transform:none; }
.app-shell .rhythm-day:active { transform:scale(.97); }
.app-shell .mode-switch::after { transition:transform var(--duration-control) var(--ease-out); }
.schedule-slot .lesson-top-open { justify-content:flex-start; gap:0; min-height:44px; }
.schedule-slot .lesson-end { margin-left:3px; }
button { transition:transform var(--duration-state) var(--ease-out), opacity var(--duration-state) ease, border-color var(--duration-control) ease, background-color var(--duration-control) ease, color var(--duration-control) ease; }
button:disabled, [aria-disabled="true"] { cursor:not-allowed; opacity:.5; }
button[aria-busy="true"] { cursor:progress; }
button[data-result="success"] { outline:2px solid var(--positive); outline-offset:2px; }
button[data-result="error"] { outline:2px solid #d95b68; outline-offset:2px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input:focus, textarea:focus { border-color:var(--accent); }
input[aria-invalid="true"], textarea[aria-invalid="true"], input:user-invalid { border-color:#d95b68; }
input[data-valid="true"] { border-color:var(--positive); }
input:disabled, textarea:disabled { opacity:.55; cursor:not-allowed; }
.calendar-button, .today-button, .round-button, .sheet-close, .subgroup-filter-button, .lesson-edit-button { min-width:44px; min-height:44px; }
.bottom-nav .nav-button { min-height:44px; }
.bottom-nav { padding-bottom:max(8px, env(safe-area-inset-bottom)); }
dialog.sheet { max-height:calc(100dvh - max(12px, env(safe-area-inset-top))); overscroll-behavior:contain; border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow:var(--elevation-sheet); }
/* Notifications are a centered panel, not an edge-attached bottom sheet. */
.app-shell dialog.sheet.notifications-sheet {
  inset:0; width:min(calc(100% - 32px), 520px); margin:auto;
  max-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  border-radius:var(--radius-floating); overflow:hidden;
}
.app-shell dialog.notifications-sheet[open] { display:flex; flex-direction:column; }
.notifications-sheet .sheet-heading { flex:0 0 auto; min-width:0; }
.notifications-sheet .sheet-heading > div { min-width:0; overflow-wrap:anywhere; }
.notifications-sheet .sheet-close { flex-shrink:0; }
.notifications-sheet .notification-list { min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px; }
dialog.sheet::backdrop { background:rgb(8 10 18 / .54); backdrop-filter:blur(2px); animation:none; opacity:1; transition:opacity var(--duration-sheet) var(--ease-out); }
dialog.sheet[data-closing="true"]::backdrop { opacity:0; transition-duration:var(--duration-sheet-exit); }
@starting-style { dialog.sheet[open]::backdrop { opacity:0; } }
dialog.sheet[open] { animation:none; }
.view, .view.active { animation:none; }
main, .view { position:relative; }

.lesson-list { overflow-anchor:none; }
.lesson-list.motion-resizing { overflow:hidden; }
.motion-exit-copy { contain:layout paint; }
.notification-badge { animation:badge-appear var(--duration-state) var(--ease-out); }
@keyframes badge-appear { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.lesson-card.current::after, .live-card .live-state::before { animation:none; }
.lesson-list[aria-busy="true"] { cursor:progress; }
.schedule-skeleton { min-height:150px; padding:24px; color:var(--muted); }
.schedule-skeleton::after { content:""; display:block; width:72%; height:14px; margin-top:22px; border-radius:var(--radius-control); background:var(--surface-soft); animation:skeleton-fade 1.2s ease-in-out infinite alternate; }
@keyframes skeleton-fade { from { opacity:.35; } to { opacity:.8; } }
.nav-button { transition:background-color var(--duration-control) ease, color var(--duration-control) ease, border-color var(--duration-control) ease; }
.bottom-nav .nav-button { position:relative; isolation:isolate; background:transparent; border-color:transparent; box-shadow:none; }
.bottom-nav .nav-button::before { content:none; }
.bottom-nav .nav-button.active { background:transparent; border-color:transparent; box-shadow:none; }
.bottom-nav .nav-button.active::before { opacity:1; transform:scale(1); }
.toast { transition:opacity var(--duration-control) ease, transform var(--duration-control) var(--ease-out); }
@media (prefers-reduced-motion:reduce) {
  .view.active { animation:none; }
  .app-shell button, dialog.sheet, .toast, .notification-badge, .view, .lesson-list, .schedule-skeleton::after { animation:none; transition:none; }
  .app-shell button:active:not(:disabled) { transform:none; }
  .app-shell button, .login-screen button, .login-screen a, .install-actions button { transition:opacity 100ms ease, background-color 100ms ease, color 100ms ease; }
  .app-shell .view .lesson-card, .app-shell .view .lesson-card:active,
  .app-shell .rhythm-day:active, .app-shell .option-button:not(:disabled):active,
  .app-shell .game-primary:not(:disabled):active, .app-shell .game-secondary:not(:disabled):active,
  .app-shell .round-button:not(:disabled):active, .app-shell .info-button:not(:disabled):active,
  .app-shell .sheet-close:not(:disabled):active, .login-screen .login-primary:active,
  .install-actions button:not(:disabled):active { transform:none; }
  .app-shell .mode-switch::after, .app-shell .picker-disclosure > summary span:last-child { transition:none; }
  dialog.sheet::backdrop { transition:opacity 100ms ease; }
  .bottom-nav .nav-button::before { transition:none; transform:none; }
}
dialog.sheet button[data-close-dialog] { min-width:44px; min-height:44px; }
.lesson-source { color:var(--muted); border-top:1px solid var(--line); margin-top:12px; }
.lesson-source summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; }
.lesson-source p { font-weight:400; line-height:1.5; overflow-wrap:anywhere; margin:0 0 12px; }
@media (hover:hover) and (pointer:fine) {
  button:not(:disabled):hover { border-color:var(--accent-line); }
  .lesson-entry-open:hover { background:transparent; }
  .app-shell .view .lesson-card:hover { border-color:var(--accent-line); }
}
@media (max-width:600px) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select, .admin-card input, .admin-card textarea, .admin-card select { font-size:16px; }
  .app-brand { gap:6px; }
  .app-header { column-gap:10px; }
}
@media (min-width:301px) and (max-width:359px) {
  .app-header { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(72px,90px); gap:6px; }
  .app-header-title { margin:0; }
  .notification-shortcut { width:44px; height:44px; }
  .context-line { width:100%; margin-left:0; padding:6px; }
  .context-icon { display:none; }
}
@media (max-width:359px) {
  .app-brand .app-kicker { font-size:9px; }
  .brand-badge { width:32px; }
}

/* The persistent shell uses a stable material, independent of outgoing content. */
:root .bottom-nav {
  background:var(--nav-bg); backdrop-filter:none; -webkit-backdrop-filter:none;
  transform:translate3d(-50%,0,0); isolation:isolate;
  /* This floating bar already clears the home indicator via its bottom
     offset. Adding that inset inside it too stretches the button row. */
  box-sizing:border-box; height:68px; min-height:68px; max-height:68px;
  padding:5px; grid-template-rows:minmax(0,1fr); align-items:stretch;
}
.bottom-nav .nav-button { z-index:1; }
.nav-indicator {
  position:absolute; left:0; top:0; width:1px; height:1px; pointer-events:none;
  transform-origin:0 0; border:1px solid var(--accent-line); border-radius:15px;
  background:color-mix(in srgb,var(--accent-soft) 90%,var(--surface));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16);
}
:root .bottom-nav .nav-button:active { transform:none; }

/* The viewport stays still; only application content scrolls. Account for
   the accessibility scale in CSS pixels, and Telegram's settled viewport. */
html:not([data-login="required"]), html:not([data-login="required"]) body {
  overflow:hidden; min-height:0;
}
:root .app-shell {
  height:calc(100dvh / var(--ui-scale, 1));
  min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior-y:contain; overflow-anchor:none;
  scrollbar-width:none;
}
.app-shell::-webkit-scrollbar { display:none; }
:root[data-environment="telegram"] .app-shell {
  height:calc(var(--tg-viewport-stable-height, 100dvh) / var(--ui-scale, 1));
}
html[data-login="required"] .bottom-nav { display:none; }

/* Preserve the original date shape while its shared marker moves. */
.day-tabs { isolation:isolate; }
.day-indicator {
  position:absolute; left:0; top:0; pointer-events:none; z-index:0;
  transform-origin:0 0; border-radius:11px;
  background:var(--day-active-bg); box-shadow:inset 0 1px 0 rgb(255 255 255 / .18);
}
.app-shell .day-tabs .day-tab.active { background:transparent; box-shadow:none; }
.app-shell .day-tabs .day-tab:active { transform:none; }
.picker-disclosure { overflow:hidden; overflow-anchor:none; }
#schedule-view { overflow-anchor:none; }
.picker-body { display:flow-root; }
.picker-body > .faculty-list, .picker-body > .group-list { padding:5px 8px 9px; border-top:1px solid var(--line); }
.picker-body > .group-search { width:calc(100% - 16px); margin:9px 8px 4px; }
.app-shell .picker-disclosure[data-expanded="false"] > summary span:last-child { transform:none; }
.app-shell .picker-disclosure[data-expanded="true"] > summary span:last-child { transform:rotate(180deg); }

/* Keep the lesson number readable over every violet background effect. */
:root:is([data-theme="violet"],[data-theme="dark-violet"]) .app-shell .schedule-slot .lesson-number { background:var(--accent); color:var(--button-text); font-weight:800; }