/* Max Exam Lab · final experience polish
   Shared presentation layer for the Student Dashboard and English Practice.
   No data, authentication, entitlement or exam logic lives here. */

html[data-max-experience="dashboard"]{
  --xp-surface:#ffffff;
  --xp-surface-soft:#f6faf9;
  --xp-surface-muted:#edf3f2;
  --xp-border:#dbe7e5;
  --xp-border-strong:#bfd4d1;
  --xp-text:#172735;
  --xp-muted:#697d83;
  --xp-accent:#087f89;
  --xp-accent-soft:rgba(8,127,137,.09);
  --xp-success:#25735f;
  --xp-danger:#ad4b55;
  --xp-shadow:0 16px 42px rgba(19,49,55,.09);
}
html[data-theme="dark"][data-max-experience="dashboard"],
html[data-max-experience="english-practice"]{
  --xp-surface:#0f1b29;
  --xp-surface-soft:#132437;
  --xp-surface-muted:#0a1722;
  --xp-border:#294253;
  --xp-border-strong:#3f6972;
  --xp-text:#eefaff;
  --xp-muted:#9eb5c0;
  --xp-accent:#4feef1;
  --xp-accent-soft:rgba(79,238,241,.09);
  --xp-success:#62d8a7;
  --xp-danger:#ff8d98;
  --xp-shadow:0 18px 48px rgba(0,0,0,.28);
}

/* Subtle motion only on controls that benefit from feedback. */
html[data-max-experience="dashboard"] :is(.learning-card,.metric,.weekly-challenge-item,.achievement-item,.assignment-card,.support-card,.profile-info-card),
html[data-max-experience="english-practice"] :is(.practice-card,.topic-section,.performance-modal,.navigator){
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
html[data-max-experience="dashboard"] :is(.learning-card,.metric,.assignment-card,.profile-info-card):hover{
  transform:translateY(-2px);
}
html[data-max-experience="english-practice"] .practice-card:hover,
html[data-max-experience="english-practice"] .practice-card:focus-visible{
  transform:translateY(-2px)!important;
}

/* Loading skeletons: deliberately quiet, no neon shimmer. */
.max-skeleton{display:grid;gap:10px;width:100%;min-width:0;pointer-events:none;user-select:none}
.max-skeleton>i,.max-skeleton>span{display:block;position:relative;overflow:hidden;border:1px solid var(--xp-border);border-radius:10px;background:var(--xp-surface-muted)}
.max-skeleton>i::after,.max-skeleton>span::after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--xp-text) 7%,transparent) 48%,transparent 76%);animation:maxSkeletonSweep 1.65s ease-in-out infinite}
.max-skeleton--list>i:nth-child(1){height:42px}.max-skeleton--list>i:nth-child(2){height:42px}.max-skeleton--list>i:nth-child(3){height:42px}
.max-skeleton--copy>i:nth-child(1){width:46%;height:15px}.max-skeleton--copy>i:nth-child(2){width:88%;height:11px}.max-skeleton--copy>i:nth-child(3){width:68%;height:11px}.max-skeleton--copy>i:nth-child(4){width:128px;height:36px;margin-top:6px}
.max-skeleton--cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.max-skeleton-card{min-height:220px!important;border-radius:18px!important}
@keyframes maxSkeletonSweep{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}

/* Purposeful empty states. Existing copy is preserved; only hierarchy changes. */
html[data-max-experience="dashboard"] .max-empty-state,
html[data-max-experience="dashboard"] .empty,
html[data-max-experience="english-practice"] .max-empty-state,
html[data-max-experience="english-practice"] .empty,
html[data-max-experience="dashboard"] .mel-notify-empty{
  min-height:104px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:7px!important;
  padding:22px 20px!important;
  border:1px dashed var(--xp-border-strong)!important;
  border-radius:15px!important;
  background:var(--xp-surface-soft)!important;
  color:var(--xp-muted)!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.55!important;
  box-shadow:none!important;
}
html[data-max-experience="dashboard"] :is(.max-empty-state,.empty,.mel-notify-empty)::before,
html[data-max-experience="english-practice"] :is(.max-empty-state,.empty)::before{
  content:"◇";
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--xp-border);border-radius:10px;
  background:var(--xp-accent-soft);color:var(--xp-accent);
  font:800 13px/1 Inter,sans-serif;
}
html[data-max-experience="dashboard"] .empty.compact,
html[data-max-experience="english-practice"] .empty.compact{min-height:82px!important;padding:17px!important}

/* Toasts are presentation-only and can be triggered by existing status messages. */
.max-experience-toast-region{position:fixed;right:22px;bottom:22px;z-index:18000;display:grid;gap:9px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.max-experience-toast{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:12px 13px;border:1px solid var(--xp-border-strong);border-radius:14px;background:var(--xp-surface);color:var(--xp-text);box-shadow:var(--xp-shadow);opacity:0;transform:translateY(7px);animation:maxToastIn .18s ease forwards;pointer-events:auto}
.max-experience-toast>i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--xp-accent-soft);color:var(--xp-accent);font-style:normal;font-weight:850}
.max-experience-toast>span{font-size:11px;line-height:1.45;font-weight:650}
.max-experience-toast[data-tone="success"]>i{color:var(--xp-success)}
.max-experience-toast[data-tone="error"]>i{color:var(--xp-danger)}
.max-experience-toast.is-leaving{animation:maxToastOut .16s ease forwards}
@keyframes maxToastIn{to{opacity:1;transform:none}}@keyframes maxToastOut{to{opacity:0;transform:translateY(6px)}}

/* Drawers and sheets share the same edge, radius and shadow language. */
html[data-max-experience="dashboard"] .dashboard-sidebar,
html[data-max-experience="dashboard"] .mel-notify-panel,
html[data-max-experience="dashboard"] .modal-card,
html[data-max-experience="english-practice"] .performance-modal,
html[data-max-experience="english-practice"] .navigator{
  border-color:var(--xp-border)!important;
  background:var(--xp-surface)!important;
  color:var(--xp-text)!important;
  box-shadow:var(--xp-shadow)!important;
}
html[data-max-experience="dashboard"] .mel-notify-panel,
html[data-max-experience="english-practice"] .performance-modal{border-radius:18px!important}
html[data-max-experience="dashboard"] .mel-notify-head{border-color:var(--xp-border)!important;background:var(--xp-surface-soft)!important}
html[data-max-experience="dashboard"] .mel-notify-head strong,
html[data-max-experience="dashboard"] .mel-notify-copy strong{color:var(--xp-text)!important}
html[data-max-experience="dashboard"] .mel-notify-copy span,
html[data-max-experience="dashboard"] .mel-notify-copy small{color:var(--xp-muted)!important}
html[data-max-experience="dashboard"] .mel-notify-item:hover,
html[data-max-experience="dashboard"] .mel-notify-item.unread{background:var(--xp-accent-soft)!important}

/* Student Dashboard: stronger academic hierarchy without changing layout logic. */
html[data-max-experience="dashboard"] .dashboard-main{scroll-behavior:smooth}
html[data-max-experience="dashboard"] .welcome,
html[data-max-experience="dashboard"] .learning-card,
html[data-max-experience="dashboard"] .profile-card,
html[data-max-experience="dashboard"] .billing-card{
  border-color:var(--xp-border)!important;
}
html[data-max-experience="dashboard"] .metric{border-color:var(--xp-border)!important;box-shadow:0 9px 26px rgba(18,55,61,.06)!important}
html[data-theme="dark"][data-max-experience="dashboard"] .metric{box-shadow:0 10px 28px rgba(0,0,0,.2)!important}
html[data-max-experience="dashboard"] .skill-track,
html[data-max-experience="dashboard"] .engagement-track,
html[data-max-experience="dashboard"] .weekly-track{overflow:hidden;border:1px solid var(--xp-border)!important;background:var(--xp-surface-muted)!important}
html[data-max-experience="dashboard"] :is(.skill-track,.engagement-track,.weekly-track)>i{box-shadow:none!important}
html[data-max-experience="dashboard"] :is(.mistake-toolbar,.support-toolbar){border-color:var(--xp-border)!important;background:var(--xp-surface-soft)!important}

/* English Practice hub + runner: restrained depth, clean filter hierarchy, readable sheets. */
html[data-max-experience="english-practice"] .filter-bar{padding:4px;border:1px solid var(--xp-border);border-radius:14px;background:var(--xp-surface-muted);gap:4px}
html[data-max-experience="english-practice"] .filter-btn{min-height:36px;padding:8px 13px!important;border-color:transparent!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--xp-muted)!important}
html[data-max-experience="english-practice"] .filter-btn.active{border-color:var(--xp-border)!important;background:var(--xp-surface)!important;color:var(--xp-accent)!important;box-shadow:0 3px 10px rgba(0,0,0,.16)!important}
html[data-max-experience="english-practice"] .topic-section{border-color:var(--xp-border)!important;box-shadow:0 10px 30px rgba(0,0,0,.2)!important}
html[data-max-experience="english-practice"] .practice-card{border-color:var(--xp-border)!important;box-shadow:0 5px 18px rgba(0,0,0,.2)!important}
html[data-max-experience="english-practice"] .practice-card:hover,
html[data-max-experience="english-practice"] .practice-card:focus-visible{border-color:var(--xp-border-strong)!important;box-shadow:0 12px 30px rgba(0,0,0,.28)!important}
html[data-max-experience="english-practice"] .practice-progress-track{border-color:var(--xp-border)!important;box-shadow:none!important}
html[data-max-experience="english-practice"] .practice-progress-track>span{box-shadow:none!important}
html[data-max-experience="english-practice"] .performance-modal-backdrop,
html[data-max-experience="english-practice"] .nav-backdrop{backdrop-filter:blur(5px)}
html[data-max-experience="english-practice"] .performance-modal-header,
html[data-max-experience="english-practice"] .performance-modal-footer{border-color:var(--xp-border)!important;background:var(--xp-surface-soft)!important}

@media(max-width:760px){
  .max-skeleton--cards{grid-template-columns:1fr}
  .max-skeleton-card:nth-child(n+2){display:none!important}
  .max-experience-toast-region{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto}
  html[data-max-experience="dashboard"] .dashboard-sidebar{border-radius:0 18px 18px 0!important}
  html[data-max-experience="english-practice"] .navigator{border-radius:18px 0 0 18px!important}
  html[data-max-experience="english-practice"] .performance-modal{border-radius:18px 18px 0 0!important}
}
@media(hover:none),(pointer:coarse){
  html[data-max-experience="dashboard"] :is(.learning-card,.metric,.assignment-card,.profile-info-card):hover,
  html[data-max-experience="english-practice"] .practice-card:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .max-skeleton>i::after,.max-skeleton>span::after{animation:none!important;display:none!important}
  .max-experience-toast,.max-experience-toast.is-leaving{animation:none!important;opacity:1!important;transform:none!important}
  html[data-max-experience="dashboard"] *,html[data-max-experience="english-practice"] *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}