/* LERNEN Mobile-First Styles & Refinements */
:root {
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Smooth Touch Scrolling */
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Active & Touch States */
button, select, a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:active {
  transform: scale(0.98);
}

button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile Viewport Optimization */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  /* Matrix Mobile Compact Grid */
  .mobile-matrix-grid {
    grid-template-columns: 28px repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .mobile-matrix-cell {
    min-height: 84px !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
  }
}
/* Drawer always overlays the workspace and opens from left to right. */
body.drawer-open {
  overflow: hidden;
}

.drawer-panel,
#app-viewport {
  touch-action: pan-y;
}

.drawer-panel {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel,
  #drawer-backdrop {
    transition-duration: 0ms !important;
  }
}

.account-card { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid #dbeafe; border-radius:16px; background:linear-gradient(135deg,#eff6ff,#f8fafc 70%); }
.account-card__mark { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; color:#0369a1; background:#e0f2fe; }
.account-card__copy { min-width:0; display:flex; flex-direction:column; }
.account-card__copy strong { font-size:11px; color:#0f172a; }
.account-card__copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#64748b; }
.account-card button { padding:7px 9px; border-radius:10px; background:#0f172a; color:white; font-size:10px; font-weight:800; }
.account-card button.is-online { background:#047857; }
.invite-action { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:-10px; padding:9px; border:1px dashed #7dd3fc; border-radius:13px; color:#0369a1; background:#f0f9ff; font-size:10px; font-weight:800; }
.invite-action.hidden { display:none; }
.auth-dialog { position:fixed; inset:0; z-index:80; pointer-events:none; visibility:hidden; }
.auth-dialog.is-open { pointer-events:auto; visibility:visible; }
.auth-dialog__backdrop { position:absolute; inset:0; width:100%; background:rgba(15,23,42,.56); opacity:0; backdrop-filter:blur(4px); transition:opacity .2s ease; }
.auth-dialog.is-open .auth-dialog__backdrop { opacity:1; }
.auth-sheet { position:absolute; left:50%; bottom:0; width:min(100%,430px); padding:8px 20px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fff; box-shadow:0 -24px 70px rgba(15,23,42,.24); transform:translate(-50%,105%); transition:transform .28s cubic-bezier(.16,1,.3,1); }
.auth-dialog.is-open .auth-sheet { transform:translate(-50%,0); }
.auth-sheet__handle { width:42px; height:4px; margin:0 auto 14px; border-radius:99px; background:#cbd5e1; }
.auth-sheet__head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.auth-sheet__eyebrow { color:#0284c7; font:700 9px 'DM Mono',monospace; letter-spacing:.15em; }
.auth-sheet h2 { margin:2px 0 0; color:#0f172a; font:700 24px/1.1 'Playfair Display',serif; }
.auth-sheet__close { padding:8px; border-radius:12px; color:#64748b; background:#f1f5f9; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:18px 0 14px; padding:3px; border-radius:13px; background:#e2e8f0; }
.auth-tabs button { padding:9px; border-radius:10px; color:#64748b; font-size:11px; font-weight:800; }
.auth-tabs button.is-active { color:#0f172a; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.auth-form { display:flex; flex-direction:column; gap:11px; }
.auth-form label span { display:block; margin:0 0 5px 2px; color:#475569; font-size:10px; font-weight:800; }
.auth-form input { width:100%; padding:12px 13px; border:1px solid #cbd5e1; border-radius:13px; background:#f8fafc; color:#0f172a; font-size:14px; }
.auth-submit { width:100%; padding:13px; border-radius:14px; background:#0f172a; color:white; font-size:12px; font-weight:800; }
.auth-submit:disabled { opacity:.55; }
.auth-message { min-height:16px; margin:0; color:#0369a1; font-size:10px; font-weight:700; }
.auth-message.is-error { color:#be123c; }
.auth-sheet__note { margin:12px 0 0; text-align:center; color:#94a3b8; font-size:9px; }
@media (min-width:640px) { .auth-sheet { bottom:50%; border-radius:26px; transform:translate(-50%,calc(50% + 24px)) scale(.97); opacity:0; } .auth-dialog.is-open .auth-sheet { transform:translate(-50%,50%) scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .auth-sheet,.auth-dialog__backdrop { transition:none; } }

.theme-toggle { width:42px; height:24px; padding:3px; border-radius:99px; background:#cbd5e1; transition:background .2s ease; }
.theme-toggle span { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#475569; background:#fff; box-shadow:0 1px 5px rgba(15,23,42,.2); transition:transform .2s ease; }
.theme-toggle[aria-checked="true"] { background:#0284c7; }
.theme-toggle[aria-checked="true"] span { color:#bae6fd; background:#0f172a; transform:translateX(18px); }

.dark-theme { color-scheme:dark; background:#08111f !important; }
.dark-theme body { color:#dbe7f4; background:#08111f; }
.dark-theme header,.dark-theme footer,.dark-theme #drawer-menu,.dark-theme .auth-sheet { background:#0f1b2d !important; border-color:#243449 !important; }
.dark-theme #app-viewport .bg-white,.dark-theme #drawer-menu .bg-white { background:#111f32 !important; }
.dark-theme #app-viewport .bg-slate-50,.dark-theme #drawer-menu .bg-slate-50 { background:#0b1728 !important; }
.dark-theme header .bg-slate-100,.dark-theme #app-viewport .bg-slate-100,.dark-theme #drawer-menu .bg-slate-100 { background:#17263a !important; }
.dark-theme .text-slate-900,.dark-theme .text-slate-800,.dark-theme .text-slate-700 { color:#edf6ff !important; }
.dark-theme .text-slate-600,.dark-theme .text-slate-500 { color:#a9bbcf !important; }
.dark-theme .text-slate-400 { color:#7f96af !important; }
.dark-theme .border-slate-100,.dark-theme .border-slate-200 { border-color:#26384e !important; }
.dark-theme .bg-slate-200\/70 { background:rgba(51,65,85,.7) !important; }
.dark-theme .account-card { border-color:#164e63; background:linear-gradient(135deg,#0c3141,#101d30 70%); }
.dark-theme .account-card__copy strong { color:#edf6ff; }
.dark-theme .account-card__copy span { color:#91a7bf; }
.dark-theme .invite-action { border-color:#155e75; color:#7dd3fc; background:#0c2735; }
.dark-theme .auth-tabs { background:#17263a; }
.dark-theme .auth-tabs button.is-active { color:#e0f2fe; background:#243449; }
.dark-theme .auth-form input { border-color:#334155; color:#edf6ff; background:#0b1728; }
.dark-theme .auth-sheet h2 { color:#f8fafc; }
.dark-theme .auth-submit { color:#08111f; background:#7dd3fc; }

/* Semantic surfaces: keep revealed cards and feedback readable in dark mode. */
.dark-theme [class~="bg-white/95"] { background:rgba(17,31,50,.96) !important; }
.dark-theme [class~="bg-sky-50"],.dark-theme [class~="bg-sky-100"] { background:#0c2b3d !important; }
.dark-theme [class~="bg-emerald-50"],.dark-theme [class~="bg-emerald-100"] { background:#0d3029 !important; }
.dark-theme [class~="bg-rose-50"],.dark-theme [class~="bg-rose-100"] { background:#3a1723 !important; }
.dark-theme [class~="bg-amber-50"],.dark-theme [class~="bg-amber-100"] { background:#382913 !important; }
.dark-theme [class~="bg-indigo-50"],.dark-theme [class~="bg-indigo-100"] { background:#202348 !important; }
.dark-theme [class~="text-sky-700"],.dark-theme [class~="text-sky-800"] { color:#7dd3fc !important; }
.dark-theme [class~="text-emerald-600"],.dark-theme [class~="text-emerald-700"],.dark-theme [class~="text-emerald-800"] { color:#6ee7b7 !important; }
.dark-theme [class~="text-rose-600"],.dark-theme [class~="text-rose-700"],.dark-theme [class~="text-rose-800"] { color:#fda4af !important; }
.dark-theme [class~="text-amber-600"],.dark-theme [class~="text-amber-700"],.dark-theme [class~="text-amber-800"] { color:#fcd34d !important; }
.dark-theme [class~="border-sky-100"],.dark-theme [class~="border-sky-200"],.dark-theme [class~="border-sky-300"] { border-color:#155e75 !important; }
.dark-theme [class~="border-emerald-200"],.dark-theme [class~="border-emerald-300"] { border-color:#166534 !important; }
.dark-theme [class~="border-rose-200"] { border-color:#881337 !important; }
.dark-theme [class~="border-amber-200"] { border-color:#854d0e !important; }
.dark-theme input::placeholder { color:#64748b; }
@media (prefers-reduced-motion:reduce) { .theme-toggle,.theme-toggle span { transition:none; } }