/* v0.6.22 — genuine phone UI. Desktop DOM stays separate and untouched. */
@media (max-width: 760px) {
  :root {
    --mobile-safe-top: max(10px, env(safe-area-inset-top));
    --mobile-safe-bottom: max(10px, env(safe-area-inset-bottom));
    --mobile-bar-h: 58px;
    --mobile-nav-h: 66px;
  }

  html, body { min-width: 0; }
  body {
    overflow-x: hidden;
    background: var(--bg-image) center center / cover fixed no-repeat !important;
  }

  /* Desktop application tree never participates in phone layout. */
  .desktop-content { display: none !important; }
  #appView .mobile-content.mobile-only {
    display: block !important;
    width: 100%;
    min-height: 100dvh;
    padding: calc(var(--mobile-bar-h) + var(--mobile-safe-top) + 12px) 12px
             calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 18px);
    margin: 0 !important;
  }
  .mobile-view { width: 100%; max-width: 100%; }
  .mobile-view.hidden { display: none !important; }

  /* Login is a phone screen, not a centred desktop window. */
  #loginView.login-wrap {
    min-height: 100dvh;
    align-items: flex-end;
    justify-content: stretch;
    padding: 0 !important;
  }
  #loginView::before { display: none !important; }
  #loginView .login-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    border: 1px solid var(--glass-border) !important;
    border-bottom: 0 !important;
    background: var(--window-bg) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,.16) !important;
    text-align: left !important;
  }
  #loginView .login-identity { margin-bottom: 30px !important; }
  #loginView .login-card h1 { font-size: 1.85rem !important; }
  #loginView .login-subtitle { margin-bottom: 24px !important; }

  /* Phone chrome */
  #appView .mobile-appbar.mobile-only {
    display: flex !important;
    position: fixed !important;
    z-index: 1600;
    top: var(--mobile-safe-top) !important;
    left: 10px !important;
    right: 10px !important;
    height: var(--mobile-bar-h) !important;
    padding: 7px 10px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--window-bg) 92%, transparent) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    box-shadow: 0 9px 30px rgba(0,0,0,.12) !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }
  .mobile-menu-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--card-soft) !important;
    color: var(--text-color) !important;
    display: grid !important;
    place-items: center !important;
  }
  .mobile-menu-button > span:last-child { display: none !important; }
  .mobile-menu-glyph { font-size: 1.25rem !important; line-height: 1; }
  .mobile-page-context {
    min-width: 0;
    flex: 1;
    display: grid !important;
    gap: 1px !important;
  }
  .mobile-page-context > span:first-child { display: none !important; }
  .mobile-page-context strong {
    font-size: .96rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-session-label {
    display: block !important;
    font-size: .68rem !important;
    color: var(--muted-color) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .global-theme {
    display: block !important;
    position: fixed !important;
    z-index: 1700 !important;
    top: calc(var(--mobile-safe-top) + 10px) !important;
    right: 20px !important;
  }
  .global-theme.theme-switch {
    width: 54px !important;
    min-width: 54px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: .68rem !important;
  }
  .mobile-page-context { padding-right: 64px; }

  /* Auto-hiding navigation chrome. */
  body.mobile-chrome-hidden:not(.mobile-nav-open) .mobile-appbar.mobile-only {
    transform: translateY(calc(-100% - var(--mobile-safe-top) - 14px)) !important;
    opacity: .15 !important;
  }
  body.mobile-chrome-hidden:not(.mobile-nav-open) .global-theme {
    transform: translateY(-90px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.mobile-chrome-hidden:not(.mobile-nav-open) .mobile-bottom-nav.mobile-only {
    transform: translateY(calc(100% + var(--mobile-safe-bottom) + 18px)) !important;
    opacity: .1 !important;
  }

  /* Native-app bottom nav. */
  #appView .mobile-bottom-nav.mobile-only {
    display: grid !important;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed !important;
    z-index: 1550;
    left: 10px !important;
    right: 10px !important;
    bottom: var(--mobile-safe-bottom) !important;
    height: var(--mobile-nav-h) !important;
    padding: 5px !important;
    margin: 0 !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--window-bg) 94%, transparent) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.16) !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }
  .mobile-tab {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted-color) !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
  }
  .mobile-tab-icon { width: 22px !important; height: 22px !important; }
  .mobile-tab.active {
    color: var(--text-color) !important;
    background: var(--card-soft) !important;
  }

  /* Menu is a phone sheet. It is not the desktop sidebar visually. */
  #sidebar.sidebar {
    display: flex !important;
    position: fixed !important;
    z-index: 1900 !important;
    inset: auto 8px calc(var(--mobile-safe-bottom) + 4px) 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: min(78dvh, 690px) !important;
    padding: 12px 12px 16px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--window-bg) 96%, transparent) !important;
    backdrop-filter: blur(28px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.28) !important;
    transform: translateY(calc(100% + 80px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .24s ease, opacity .2s ease !important;
    overflow: auto !important;
  }
  #sidebar.sidebar.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mobile-drawer-head.mobile-only {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 10px;
  }
  .mobile-menu-close {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--card-soft) !important;
    font-size: 1.35rem;
  }
  .sidebar-brand { padding: 10px 6px !important; }
  .user-chip { margin: 4px 0 10px !important; border-radius: 16px !important; }
  #nav.nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  #nav .nav-btn {
    min-height: 50px !important;
    border-radius: 14px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    text-align: left !important;
  }
  .sidebar-bottom { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-top: 10px !important; }
  .mobile-nav-backdrop.mobile-only {
    display: block !important;
    position: fixed !important;
    z-index: 1800 !important;
    inset: 0 !important;
    background: rgba(4,8,12,.46) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }
  .mobile-nav-backdrop.visible { opacity: 1 !important; pointer-events: auto !important; }

  /* Screen-level composition */
  .mobile-screen-head {
    display: grid;
    gap: 5px;
    margin: 4px 2px 16px;
  }
  .mobile-screen-head h1 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.12;
    letter-spacing: -.025em;
  }
  .mobile-screen-subtitle {
    margin: 0;
    color: var(--muted-color);
    font-size: .82rem;
    line-height: 1.45;
  }
  .mobile-screen-head > .actions-row,
  .mobile-screen-head > select,
  .mobile-screen-head > label { margin-top: 8px; }
  .mobile-session-select { min-height: 42px !important; border-radius: 13px !important; }

  .mobile-hero-card,
  .mobile-progress-card,
  .mobile-result-card,
  .mobile-action-card,
  .mobile-quick-section,
  .mobile-list-section,
  .mobile-view > .panel,
  .mobile-view > .table-card,
  .mobile-view > .callout,
  .mobile-view > .preference-wrap > .panel,
  .mobile-view > .preference-wrap > .callout,
  .mobile-view > .preference-wrap > .sticky-submit {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 15px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--card-bg) 94%, transparent) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  }
  .mobile-hero-top,
  .mobile-progress-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--muted-color);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
  }
  .mobile-hero-title { display: block; font-size: 1.18rem; }
  .mobile-hero-note { display: block; margin-top: 2px; color: var(--muted-color); font-size: .76rem; }
  .mobile-progress-head strong { font-size: 1.6rem; }
  .mobile-progress-card progress { width: 100%; height: 10px; margin-top: 13px; }
  .mobile-progress-card p { margin: 8px 0 0; color: var(--muted-color); font-size: .78rem; }
  .mobile-result-card { background: color-mix(in srgb, var(--success) 12%, var(--card-bg)) !important; }
  .mobile-result-card h2 { margin: 5px 0; font-size: 1.25rem; }
  .mobile-result-card p { margin: 0 0 8px; color: var(--muted-color); }
  .mobile-action-card h2 { margin: 4px 0 6px; font-size: 1.08rem; }
  .mobile-action-card p { margin: 0; color: var(--muted-color); font-size: .8rem; line-height: 1.45; }
  .mobile-wide-action { width: 100% !important; margin-top: 14px !important; }

  /* Metrics are a phone component, not desktop KPI cards. */
  .mobile-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
  }
  .mobile-metric {
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 91%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: grid;
    align-content: space-between;
  }
  .mobile-metric span { color: var(--muted-color); font-size: .7rem; }
  .mobile-metric strong { font-size: 1.28rem; line-height: 1; }
  .mobile-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1px;
    margin: 14px -15px -15px;
    border-top: 1px solid var(--glass-border);
  }
  .mobile-summary-item { padding: 12px 8px; text-align: center; }
  .mobile-summary-item + .mobile-summary-item { border-left: 1px solid var(--glass-border); }
  .mobile-summary-item span { display: block; font-size: .64rem; color: var(--muted-color); }
  .mobile-summary-item strong { display: block; margin-top: 3px; font-size: .92rem; }

  .mobile-section-title h2 { margin: 0; font-size: 1rem; }
  .mobile-section-title p { margin: 3px 0 0; line-height: 1.4; }
  .mobile-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .mobile-quick-button {
    min-height: 72px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-soft);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    font-weight: 750;
    text-align: left;
  }
  .mobile-quick-button svg { width: 23px; height: 23px; flex: 0 0 auto; }
  .mobile-ranked-list { margin-top: 10px; }
  .mobile-ranked-row {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 45px;
    border-top: 1px solid var(--border-color);
    font-size: .78rem;
  }
  .mobile-ranked-row:first-child { border-top: 0; }
  .mobile-rank-index {
    width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
    background: var(--card-soft); font-weight: 800;
  }

  /* Generic phone forms and controls. */
  .mobile-view .toolbar,
  .mobile-view .student-list-toolbar {
    display: block !important;
    padding: 12px !important;
    margin: 0 0 12px !important;
    border-radius: 18px !important;
  }
  .mobile-view .student-filter-grid,
  .mobile-view .form-grid,
  .mobile-view .inline-form,
  .mobile-view .editor-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mobile-view .actions-row:not(.compact) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }
  .mobile-view .actions-row.compact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mobile-view .actions-row .btn { min-width: 0 !important; width: 100%; }
  .mobile-view input,
  .mobile-view select,
  .mobile-view textarea { min-height: 46px !important; border-radius: 13px !important; }
  .mobile-view .btn { min-height: 44px !important; border-radius: 13px !important; }
  .mobile-view .panel-head { display: grid !important; gap: 12px !important; }
  .mobile-view .grid-2 { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }

  /* There are no tables in the phone DOM presentation. */
  .mobile-view .table-scroll { overflow: visible !important; }
  .mobile-record-list { display: grid; gap: 10px; }
  .mobile-record {
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg) 94%, transparent);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    overflow: hidden;
  }
  .mobile-record-field {
    display: grid;
    grid-template-columns: minmax(88px, .78fr) minmax(0, 1.22fr);
    gap: 10px;
    align-items: start;
    padding: 9px 12px;
    border-top: 1px solid var(--border-color);
  }
  .mobile-record-field:first-child { border-top: 0; }
  .mobile-record-label { color: var(--muted-color); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
  .mobile-record-value { min-width: 0; font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
  .mobile-record-actions { display: block; padding: 10px 12px 12px; background: color-mix(in srgb, var(--card-soft) 72%, transparent); }
  .mobile-record-actions .mobile-record-value > .actions-row { width: 100%; }
  .mobile-view .table-card { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* Preferences are a dedicated reorder screen. */
  .mobile-view .preference-wrap { max-width: none !important; margin: 0 !important; }
  .mobile-view .preference-list { gap: 8px !important; }
  .mobile-view .preference-item {
    min-height: 66px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--card-bg) 94%, transparent) !important;
    border: 1px solid var(--glass-border) !important;
  }
  .mobile-view .rank-pill { width: 34px !important; height: 34px !important; border-radius: 12px !important; }
  .mobile-view .move-actions { gap: 5px !important; }
  .mobile-view .move-actions button { width: 38px !important; height: 38px !important; }
  .mobile-view .sticky-submit {
    position: sticky !important;
    bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 8px) !important;
    z-index: 100 !important;
  }

  /* Pagination as a compact phone control. */
  .student-pagination { display: flex !important; gap: 6px !important; overflow-x: auto !important; padding: 5px 0 10px !important; }
  .student-pagination .btn { width: auto !important; flex: 0 0 auto !important; }
  .student-page-size { display: none !important; }
  .student-list-meta { margin-top: 10px !important; }

  /* Dialogs become proper sheets, independent of desktop sizing. */
  dialog.dialog-card[open] {
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    max-height: 88dvh !important;
    margin: auto 6px 6px !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 18px 18px !important;
    overflow: auto !important;
  }
  dialog::backdrop { background: rgba(4,8,12,.52) !important; backdrop-filter: blur(2px); }

  .toast-region { top: calc(var(--mobile-safe-top) + var(--mobile-bar-h) + 8px) !important; left: 10px !important; right: 10px !important; width: auto !important; }
}