/* -------------
   Modern Flat Theme — complete stylesheet (CSV import + mobile tweaks)
---------------------------------------------------------------- */

:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --surface:#f8fafc;
  --surface-2:#f1f5f9;

  --ink:#0f172a;
  --muted:#64748b;

  --accent:#6366f1;
  --accent-2:#06b6d4;
  --accent-3:#f59e0b;

  --ok:#22c55e;   /* GREEN  */
  --bad:#ef4444;  /* RED    */
  --fixed:#8b5cf6;/* PURPLE */

  --radius:16px;
  --radius-sm:14px;

  --ring-size:3px;
  --dot-ring:3px;

  --shadow-card: 0 1px 0 rgba(2,6,23,.04), 0 1px 3px rgba(2,6,23,.06);
  --shadow-overlay: 0 12px 32px rgba(2,6,23,.20);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* App shell (use dynamic viewport height for mobile keyboards) */
.app{
  max-width:520px;
  margin:0 auto;
  min-height:var(--app-vh, 100dvh);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;flex-direction:column;position:relative;
}

/* Topbar */
.topbar{position:sticky;top:0;z-index:5;background:#fff}
.topbar .row{
  display:grid;
  /* brand | center toggle | learn | dataBtn */
  grid-template-columns: auto 1fr auto auto;
  align-items:center;
  gap:.55rem;
  padding:.85rem .95rem;
}
.brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:.55rem}
.brand .mark{width:10px;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Centered toggle */
.seg{justify-self:center;display:inline-flex;background:var(--surface-2);border-radius:999px;padding:.25rem}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);padding:.45rem .8rem;border-radius:999px;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* Right-side utilities */
#dataBtn{justify-self:end}

/* Buttons */
.btn.small{padding:.5rem}
.accent-bar{height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3))}

/* Progress — single row, responsive dots */
.progress{display:grid;grid-template-columns:repeat(10, 1fr);gap:.6rem;padding:.6rem .95rem .2rem}
.dot{width:100%;aspect-ratio:1/1;border-radius:50%;background:#e7e8ef;cursor:pointer;touch-action:manipulation;border:0}
.dot.ok{background:color-mix(in oklab, var(--ok) 48%, white)}
.dot.bad{background:color-mix(in oklab, var(--bad) 48%, white)}
.dot.fixed{background:color-mix(in oklab, var(--fixed) 48%, white)}
.dot.active{box-shadow:0 0 0 var(--dot-ring) var(--accent)}
.dot:focus-visible{outline:3px solid color-mix(in oklab, var(--accent) 55%, white);outline-offset:2px}

/* Card */
.card{margin:.45rem .95rem 1rem;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-card);display:flex;flex-direction:column;padding:.9rem;min-height:0;flex:1}

/* Card body with ring-safe padding */
.card-body{position:relative;display:flex;flex-direction:column;gap:1rem;min-height:260px;overflow:hidden;flex:1;padding:0 max(calc(var(--ring-size) + 10px), 12px) 1rem}

/* Prompt */
.prompt{font-size:1.6rem;line-height:1.25;font-weight:800;text-align:center;padding:1rem .9rem;border-radius:var(--radius-sm);background:var(--surface)}

/* Choices (MCQ) */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;align-items:center;justify-items:stretch;margin-block:auto;padding-inline:calc(var(--ring-size) + 2px)}
.choice{
  border:0;background:var(--surface);border-radius:18px;padding:0 1rem;
  font-weight:800;letter-spacing:.1px;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:76px;aspect-ratio:1/1;transition:transform .06s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
  overflow:hidden; /* prevent overlap onto neighbors */
  position:relative; /* caption anchors inside */
}
.choice:hover{background:var(--surface-2)}
.choice:active{transform:scale(.985)}
.choice.chosen:not(.correct):not(.wrong){box-shadow:0 0 0 var(--ring-size) color-mix(in oklab, var(--accent) 65%, white)}
.choice.correct{box-shadow:0 0 0 var(--ring-size) color-mix(in oklab, var(--ok) 70%, white);background:color-mix(in oklab, var(--ok) 10%, white)}
.choice.wrong{box-shadow:0 0 0 var(--ring-size) color-mix(in oklab, var(--bad) 70%, white);background:color-mix(in oklab, var(--bad) 10%, white)}
.choice.eliminated{opacity:.45;filter:saturate(.3);pointer-events:none}

/* Learn mode caption inside choices */
.choice .caption{
  position:absolute; left:10px; right:10px; bottom:8px;
  font-size:.78rem; line-height:1.1; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
  font-style: italic; /* NEW */
}
/* No extra bottom padding in learn mode so labels stay centered */
.learn-on .choice{ padding-bottom:0; }
.keyboard-open.learn-on .choice{ padding-bottom:0; }

/* Type mode */
.typewrap{display:flex;gap:.6rem;max-width:440px;margin:0 auto;margin-block:auto;padding-inline:calc(var(--ring-size) + 2px)}
.typewrap[hidden]{display:none !important;}
.typewrap input{
  flex:1;border-radius:14px;border:0;background:#fff;color:var(--ink);
  padding:1rem 1rem;font-size:1.05rem;font-weight:600;outline:none;box-shadow:inset 0 0 0 1px rgba(2,6,23,.06)
}
.typewrap input:focus{box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent)}
#check{border-radius:14px}

/* Actions */
.actions{display:flex;gap:.6rem;justify-content:space-between;margin-top:auto;padding-top:1.05rem}
.btn-label{display:inline-block}
.btn{appearance:none;border:0;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;letter-spacing:.2px;padding:.9rem 1.1rem;display:inline-flex;align-items:center;gap:.45rem;justify-content:center}
.btn:hover{filter:saturate(1.02) brightness(1.01)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ghost{background:var(--surface-2);color:var(--ink);border:0}
.outline{background:var(--surface-2);color:var(--ink);border:0}
.icon-btn .material-symbols-outlined{font-size:20px;line-height:1}
#hintBtn .material-symbols-outlined{color:var(--accent-2)}
#swapToggle .material-symbols-outlined{color:var(--accent-3)}
#clearDay .material-symbols-outlined{color:var(--bad)}

/* Learn toggle icon colouring */
#learnToggle .material-symbols-outlined{ color: var(--muted); transition: color .15s ease; }
#learnToggle[aria-pressed="true"] .material-symbols-outlined{ color: var(--accent); }

/* Transitions */
@media (prefers-reduced-motion:no-preference){
  .slide{transition:transform .28s ease,opacity .28s ease;will-change:transform,opacity}
  .out-left{transform:translateX(-12%);opacity:0}.out-right{transform:translateX(12%);opacity:0}
  .in-left{transform:translateX(-12%);opacity:0}.in-right{transform:translateX(12%);opacity:0}
  .in-active{transform:translateX(0);opacity:1}
}

/* Overlays (results + data) */
.result-overlay[hidden]{display:none}
.result-overlay{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top)+12px) 12px calc(env(safe-area-inset-bottom)+12px)}
.result-panel{position:relative;width:min(560px,92vw);max-height:84vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:var(--shadow-overlay);padding:1rem 1rem 1.2rem;text-align:center}
.icon-close{position:absolute;top:.5rem;right:.5rem;background:#fff;color:var(--ink);width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.icon-close .material-symbols-outlined{font-size:20px}
.score{font-size:2rem;font-weight:800}
#summary{color:var(--muted);margin:.25rem 0 .25rem}

/* Results table */
.results-table{margin:.7rem auto .8rem;border-radius:14px;overflow:hidden;width:100%}
.rt-head,.rt-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center}
.rt-head{background:var(--surface);font-weight:800}
.rt-head>div{padding:.6rem .75rem}
.rt-body .rt-row{box-shadow:inset 0 -1px var(--surface-2)}
.rt-body .rt-row:last-child{box-shadow:none}
.rt-row>div{padding:.6rem .75rem;word-break:break-word;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-head>div{white-space:nowrap}

/* Chips */
.chip{display:inline-block;padding:.34rem .7rem;border-radius:999px;font-weight:800;font-size:.95rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.ok{background:color-mix(in oklab, var(--ok) 28%, white);color:color-mix(in oklab, var(--ok) 66%, black)}
.chip.bad{background:color-mix(in oklab, var(--bad) 28%, white);color:color-mix(in oklab, var(--bad) 66%, black)}
.chip.fixed{background:color-mix(in oklab, var(--fixed) 28%, white);color:color-mix(in oklab, var(--fixed) 66%, black)}

/* Data overlay fields */
.field{margin:.6rem auto .4rem;max-width:520px;text-align:left}
.field label{display:block;font-weight:700;margin:.1rem 0 .25rem;color:var(--muted)}
.field input{
  width:100%;border:0;background:#fff;border-radius:12px;
  padding:.85rem .9rem;font:inherit;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(2,6,23,.08);
}
.field input:focus{outline:none;box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent)}
.data-status{min-height:1.2rem;color:var(--muted);margin:.25rem 0 .25rem}
.subtle{color:var(--muted);margin:.25rem 0 .25rem}

/* Results */
.result-actions { gap: .6rem; flex-wrap: wrap; justify-content: center; }
#submitStatus { min-height: 1.2rem; }

/* Material Symbols */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

/* Focus */
button:focus-visible,
input:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 55%, white);
  outline-offset: 2px;
}

/* --- Cursors for interactive controls --- */
.btn,
.icon-btn,
.choice { cursor: pointer; }

/* Disabled elements shouldn't show a special cursor; JS blocks clicks */
.btn:disabled,
.icon-btn:disabled,
.choice:disabled { cursor: inherit; }

/* --- Choice label: autosize-friendly & safe overflow --- */
.choice .label {
  display:block;
  max-width:100%;
  max-height:100%;
  line-height:1.2;
  padding:.25rem 0;
  white-space:normal;  /* allow multi-line if really needed */
  color:var(--ink-strong, #000);
  transition: filter .18s ease, color .18s ease, font-size .08s ease;
}

/* During measurement, temporarily un-blur labels to get accurate metrics */
.choices.measuring .choice .label { filter:none !important; }

/* If we still can’t fit after shrink, allow breaking long words */
.choice.tight .label {
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Absolute fallback: clamp to 3 lines with ellipsis (WebKit/Chromium) */
@supports (-webkit-line-clamp: 3) {
  .choice.clamped .label {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
}

/* --- Blur/lock behavior in Type mode: blur ONLY the text, not the button --- */
.choice .label { color: var(--ink-strong, #000); }
.choices.blurred .choice { pointer-events: none; }
.choices.blurred .choice .label { filter: blur(3px); }
.choices:not(.blurred) .choice .label { filter: none; }
.choices.blurred .choice.chosen.correct .label { filter: none; color: var(--ink-strong, #000); }

/* --- Shake animation for wrong attempts (MCQ & Type) --- */
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shake { animation: shake 0.32s ease; }

/* ---------- Compact layout for Type mode on mobile (keyboard & no-keyboard) ---------- */
.keyboard-open .card          { padding: .6rem .6rem .7rem; }
.keyboard-open .card-body     { min-height: 0; }
.keyboard-open .prompt        { font-size: 1.25rem; padding: .5rem .6rem; }
.keyboard-open .typewrap      { max-width: none; margin: .25rem auto 0; }

.keyboard-open .choices {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: .5rem; padding-inline: 6px;
}
.keyboard-open .choice {
  min-height: 44px; aspect-ratio: auto; padding: 0 .6rem;
}
.keyboard-open .chip { font-size: .85rem; padding: .25rem .5rem; }

/* ---------- Kill sticky hover/active/focus on touch ---------- */
button, .btn, .icon-btn, .choice { -webkit-tap-highlight-color: transparent; }

/* Suppress visual focus on tiles only (keyboard focus OK elsewhere) */
.choice:focus, .choice:focus-visible { outline: none; box-shadow: none; }

/* When JS detects first touch, we add .no-hover to <html> */
.no-hover .choice:hover { background: var(--surface); }
.no-hover .choice:active { transform: none; }

/* Hide legacy date pill if still present in DOM */
.date{ display:none !important; }

/* Mobile optimizations */
@media (max-width:480px){
  .results-table{font-size:.9rem}
  .rt-head>div{padding:.5rem .5rem}
  .rt-row>div{padding:.5rem .5rem}
  .chip{font-size:.85rem;padding:.28rem .55rem}
}
@media (max-width:360px){
  .results-table{font-size:.85rem}
  .chip{font-size:.8rem}
  .choices{grid-template-columns:1fr}
  .choice{aspect-ratio:auto;min-height:64px}
}