/* ==========================================================================
   theme.css — Liquid Glass layer for the Flashcard Portal
   --------------------------------------------------------------------------
   Loads AFTER each page's inline <style>. Appearance only — no markup,
   no IDs, no classes, no JS behavior is touched.
   Delete the one <link> line from a page to revert that page instantly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Glass needs something behind it to bend. The ambient field in §2 supplies
   that; everything else here is the material itself.
   -------------------------------------------------------------------------- */
:root{
  --void:#070B12;
  --paper:#F2F5FA;
  --dim:rgba(235,242,252,.58);
  --faint:rgba(235,242,252,.34);

  /* The material: three weights of the same glass. */
  --glass-1:rgba(255,255,255,.055);   /* recessed  */
  --glass-2:rgba(255,255,255,.085);   /* standard  */
  --glass-3:rgba(255,255,255,.14);    /* raised    */

  --rim:rgba(255,255,255,.16);
  --rim-bright:rgba(255,255,255,.30);
  --specular:inset 0 1px 0 rgba(255,255,255,.28);
  --drop:0 8px 32px rgba(0,0,0,.38);
  --drop-deep:0 20px 60px rgba(0,0,0,.5);

  --blur-sm:blur(14px) saturate(170%);
  --blur-md:blur(24px) saturate(180%);
  --blur-lg:blur(40px) saturate(190%);

  --tint:#5AC8FA;        /* iOS-family blue-cyan */
  --tint-deep:#0A84FF;
  --sand:#FFD48A;
  --good:#5BE49B;
  --warn:#FFB340;
  --bad:#FF6B5E;

  /* SF Pro on Apple devices, graceful elsewhere. */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
         'Segoe UI',system-ui,sans-serif;
  --font-num:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;

  /* Apple corners are generous. Radius still encodes hierarchy. */
  --r-xl:26px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:11px;

  /* Remap every legacy variable the pages already consume. */
  --bg:var(--void);
  --panel:var(--glass-2);
  --panel2:var(--glass-1);
  --line:var(--rim);
  --text:var(--paper);
  --muted:var(--dim);
  --accent:var(--tint);
  --blue:var(--tint);
  --green:var(--good);
  --red:var(--bad);
  --yellow:var(--warn);
  --gray:rgba(235,242,252,.3);
  --radius:var(--r-lg);

  color-scheme:dark;
}

/* --------------------------------------------------------------------------
   2. The ambient field
   Glass over flat black is just a grey box. These fixed color washes are
   what the panels actually refract. Fixed, not scrolled — the light stays
   put while content moves across it, which is what sells the material.
   -------------------------------------------------------------------------- */
body{
  background:var(--void);
  font-family:var(--font);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.011em;
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(46% 38% at 16% 8%,  rgba(10,132,255,.42) 0%, transparent 62%),
    radial-gradient(40% 34% at 88% 14%, rgba(90,200,250,.30) 0%, transparent 60%),
    radial-gradient(52% 44% at 72% 88%, rgba(124,92,255,.32) 0%, transparent 64%),
    radial-gradient(36% 30% at 24% 78%, rgba(0,199,190,.24) 0%, transparent 60%);
  filter:saturate(125%);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:650;
  letter-spacing:-.026em;
  line-height:1.14;
}
h1{font-size:clamp(28px,6.5vw,40px)}
h2{font-size:1.5rem}
h3{font-size:1.12rem}
h4{font-size:.97rem}

p,li{max-width:66ch;line-height:1.55}
.small{font-size:12.5px;line-height:1.5}
.muted{color:var(--dim)}

.stat strong,.summary-box strong,.score strong{
  font-family:var(--font-num);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.stat span{
  text-transform:none;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0;
  color:var(--faint);
}

/* --------------------------------------------------------------------------
   4. Glass surfaces
   -------------------------------------------------------------------------- */
.panel,
.card,
.question-card,
.access-lock{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur-md);
  backdrop-filter:var(--blur-md);
  border:1px solid var(--rim);
  border-radius:var(--r-lg);
  box-shadow:var(--specular),var(--drop);
}

.question-card{
  border-radius:var(--r-xl);
  box-shadow:var(--specular),var(--drop-deep);
}

.access-lock{
  border-radius:var(--r-xl);
  box-shadow:var(--specular),var(--drop-deep);
}

.sidebar{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-lg);
  backdrop-filter:var(--blur-lg);
  border-right:1px solid var(--rim);
}

.stat,
.summary-box,
.check-item,
.match-row,
.priority{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  box-shadow:var(--specular);
}

.badge{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  padding:4px 11px;
  font-size:11.5px;
  color:var(--dim);
}

.empty{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
}

/* --------------------------------------------------------------------------
   5. Controls — pill glass
   -------------------------------------------------------------------------- */
button,.btn,.back{
  font-family:var(--font);
  font-weight:590;
  letter-spacing:-.01em;
  border-radius:999px;
  padding:11px 18px;
  background:var(--glass-3);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid var(--rim);
  color:var(--paper);
  box-shadow:var(--specular);
  transition:background .18s ease,transform .12s ease,border-color .18s ease;
}
button:hover,.btn:hover,.back:hover{
  background:rgba(255,255,255,.20);
  border-color:var(--rim-bright);
}
button:active,.btn:active{transform:scale(.97)}

.btn.primary,.primary,.access-lock button{
  background:linear-gradient(175deg,#38B6FF 0%,var(--tint-deep) 100%);
  border:1px solid rgba(255,255,255,.34);
  color:#FFFFFF;
  font-weight:640;
  box-shadow:var(--specular),0 6px 20px rgba(10,132,255,.34);
}
.btn.primary:hover,.primary:hover,.access-lock button:hover{
  background:linear-gradient(175deg,#4FC0FF 0%,#1E90FF 100%);
}

.btn.good,.good{
  background:linear-gradient(175deg,rgba(91,228,155,.34),rgba(48,180,110,.26));
  border-color:rgba(91,228,155,.44);color:#DFFBEC;
}
.btn.warn,.warn{
  background:linear-gradient(175deg,rgba(255,179,64,.32),rgba(200,130,30,.24));
  border-color:rgba(255,179,64,.42);color:#FFF0D8;
}
.btn.bad,.bad{
  background:linear-gradient(175deg,rgba(255,107,94,.32),rgba(190,60,50,.24));
  border-color:rgba(255,107,94,.42);color:#FFE2DE;
}

.btn:disabled,button:disabled{opacity:.32;cursor:not-allowed}
.btn.full{border-radius:var(--r-md)}

input,select,textarea,
input[type=text],input[type=password],
.access-lock input{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  color:var(--paper);
  font-family:var(--font);
  padding:13px 15px;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(90,200,250,.7);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(90,200,250,.18);
}

.field label{
  text-transform:none;
  font-size:12px;
  font-weight:560;
  letter-spacing:0;
  color:var(--faint);
}

:focus-visible{
  outline:2px solid var(--tint);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   6. Signature element — the mastery bar as a light meter
   Segments run cool to warm: sand is reserved for "confident" and appears
   nowhere else in the UI, so the bar reads as a spectrum toward mastery.
   -------------------------------------------------------------------------- */
.bar{
  height:26px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  overflow:hidden;
  display:flex;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.seg{height:100%;transition:width .4s cubic-bezier(.32,.72,0,1)}
.seg.confident{background:linear-gradient(180deg,#FFE0AC,var(--sand))}
.seg.correct{background:linear-gradient(180deg,#7FD9FF,var(--tint))}
.seg.guessed{background:linear-gradient(180deg,#FFC969,var(--warn))}
.seg.wrong{background:linear-gradient(180deg,#FF8A7E,var(--bad))}
.seg.unanswered{background:rgba(255,255,255,.24)}
.seg.untested{background:rgba(255,255,255,.06)}

.progress-row{border-top:1px solid rgba(255,255,255,.09);padding:16px 0}
.rank{font-family:var(--font-num);font-weight:500;color:var(--faint)}
.score strong{font-size:22px;color:var(--paper)}
.score span{color:var(--faint);font-size:10.5px}

/* --------------------------------------------------------------------------
   7. Study interactions
   -------------------------------------------------------------------------- */
.question-text{
  font-weight:640;
  font-size:27px;
  line-height:1.26;
  letter-spacing:-.028em;
}
.answer-box{
  border-top:1px solid rgba(255,255,255,.12);
  font-size:18px;
  line-height:1.55;
  color:rgba(242,245,250,.9);
}

.choice-option{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-md);
  box-shadow:var(--specular);
  transition:background .18s ease,border-color .18s ease;
}
.choice-option:hover{background:rgba(255,255,255,.10)}
.choice-option.correct-reveal{
  border-color:rgba(90,200,250,.65);
  background:rgba(90,200,250,.13);
}
.choice-option.wrong-selected{
  border-color:rgba(255,107,94,.6);
  background:rgba(255,107,94,.12);
}
.choice-option input{accent-color:var(--tint)}

.feedback{
  border-radius:var(--r-md);
  border-left-width:3px;
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  font-size:14.5px;
}
.feedback.good{background:rgba(91,228,155,.13);border-color:var(--good)}
.feedback.bad{background:rgba(255,107,94,.13);border-color:var(--bad)}

.group-btn{
  background:var(--glass-1);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  box-shadow:var(--specular);
  transition:background .18s ease,border-color .18s ease;
}
.group-btn:hover{background:rgba(255,255,255,.11)}
.group-btn.active{
  border-color:rgba(90,200,250,.6);
  background:rgba(90,200,250,.14);
}
.group-name{font-weight:600;letter-spacing:-.012em}
.group-meta{color:var(--faint);font-size:11.5px}

.match-source{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-md);
  box-shadow:var(--specular);
}
.match-source.selected{
  border-color:rgba(90,200,250,.7);
  background:rgba(90,200,250,.16);
}
.drop-zone{
  border:1px dashed rgba(255,255,255,.24);
  border-radius:var(--r-md);
  color:var(--faint);
}
.drop-zone.filled{background:rgba(255,255,255,.06)}
.drop-zone.correct-reveal{border-color:rgba(90,200,250,.7)}
.drop-zone.wrong-reveal{border-color:rgba(255,107,94,.7)}

.question-image,.answer-image,.choice-image,.match-image{
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.13);
}

.report-btn{margin-left:auto}

/* --------------------------------------------------------------------------
   8. Portal landing (index.html)
   Two slabs of glass. The tinted one is the door you usually want.
   -------------------------------------------------------------------------- */
main h1{margin-bottom:32px;font-weight:650}

.choice{
  min-height:216px;
  border-radius:var(--r-xl);
  -webkit-backdrop-filter:var(--blur-md);
  backdrop-filter:var(--blur-md);
  font-size:17px;
  font-weight:620;
  letter-spacing:.16em;
  box-shadow:var(--specular),var(--drop-deep);
  transition:transform .22s cubic-bezier(.32,.72,0,1),border-color .22s ease;
}
.choice span{font-size:30px;margin-bottom:16px;opacity:.55}
.choice.tester{
  background:linear-gradient(165deg,rgba(90,200,250,.30),rgba(10,132,255,.16));
  border:1px solid rgba(140,215,255,.4);
  color:#EAF7FF;
}
.choice.developer{
  background:var(--glass-2);
  border:1px solid var(--rim);
  color:var(--paper);
}
.choice:hover{filter:none;transform:translateY(-4px)}
.choice.tester:hover{border-color:rgba(160,225,255,.75)}
.choice.developer:hover{border-color:var(--rim-bright)}

/* --------------------------------------------------------------------------
   9. Module picker (tester.html)
   -------------------------------------------------------------------------- */
.mod{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur-md);
  backdrop-filter:var(--blur-md);
  border:1px solid var(--rim);
  border-radius:var(--r-lg);
  font-size:21px;
  font-weight:620;
  letter-spacing:-.02em;
  box-shadow:var(--specular),var(--drop);
  transition:transform .2s cubic-bezier(.32,.72,0,1),border-color .2s ease;
}
.mod:hover{
  border-color:rgba(140,215,255,.6);
  background:rgba(255,255,255,.12);
  transform:translateY(-3px);
}
.mod small{color:var(--faint);font-weight:500;font-size:12px}
.mod-user{color:var(--faint)}
.access-lock p{color:var(--dim)}
.access-lock-error{color:var(--bad);font-size:12.5px}

/* --------------------------------------------------------------------------
   10. Fallback + accessibility floor
   If backdrop-filter is unsupported, glass would render as near-invisible
   washes over the ambient field. Fall back to solid panels instead.
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body::before{opacity:.35}
  .panel,.card,.question-card,.access-lock,.sidebar,.mod,
  .stat,.summary-box,.check-item,.match-row,.priority,
  .group-btn,.choice-option,.empty,.badge,button,.btn,.back{
    background:#151C28;
  }
  .choice.tester{background:#12496B}
  .choice.developer{background:#151C28}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .choice:hover,.mod:hover{transform:none}
}

@media (max-width:850px){
  .question-text{font-size:22px}
  .bar{height:20px}
  /* Fewer stacked blur layers on phones — each one costs a compositor pass. */
  .stat,.summary-box,.check-item,.badge,.priority{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}