/* ELA — one stylesheet, no framework.
   Same family as SpellingApp (dark, high contrast, big type) in violet, so the
   two are easy to tell apart on the home screen. Sizes scale with the screen
   (clamp) so one stylesheet serves a desktop monitor, an iPad and a phone.
   The flashcard is the thing that matters: large, nothing else competing with
   it during a round. */

:root {
  --bg: #16122e;
  --card: #211b42;
  --card-2: #2a2352;
  --line: #3a3170;
  --text: #f1edff;
  --muted: #aaa1d3;
  --accent: #8b5cf6;
  --accent-2: #6d28d9;
  --good: #22c55e;
  --bad: #f87171;
  --warn: #fbbf24;
  --unseen: #514888;
  --radius: 14px;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; }
.center { text-align: center; }

/* ---- login ---- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card .logo {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  border-radius: 18px; font-size: 30px; font-weight: 800; color: #fff; font-family: var(--serif);
}
.login-card h1 { margin: 0 0 4px; font-size: 26px; }
.login-card form { margin-top: 20px; display: grid; gap: 10px; }
.error { color: var(--bad); font-size: 14px; min-height: 20px; }

/* ---- inputs ---- */

input, textarea, select {
  width: 100%; padding: 13px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button {
  padding: 13px 16px;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: #fff; border: 0; border-radius: 11px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
button:disabled { opacity: .55; }
button.secondary { background: var(--card); border: 1px solid var(--line); color: var(--text); }
button.small { padding: 9px 13px; font-size: 14px; }
button.wide { display: block; width: calc(100% - 32px); margin: 12px 16px 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- the frame: top bar, a feature's tabs, the screen ---- */

#app { min-height: 100vh; }
#screen { max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }

.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 10px;
  border-bottom: 1px solid var(--line);
}
/* Explicit columns: a hidden Back button mustn't pull the title to the left. */
#back { grid-column: 1; justify-self: start; }
.topbar-title { grid-column: 2; font-size: 19px; font-weight: 700; text-align: center; }
#gear { grid-column: 3; justify-self: end; }
.topbar-btn {
  background: none; border: 0; color: var(--accent); padding: 8px 6px;
  font-size: 16px; font-weight: 600; border-radius: 8px;
}

.tabs {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.tab {
  padding: 9px 16px; border-radius: 99px; font-size: 15px; font-weight: 600;
  color: var(--muted); text-decoration: none; background: var(--card);
  border: 1px solid var(--line);
}
.tab.active { color: var(--text); background: rgba(139, 92, 246, .22); border-color: var(--accent); }

/* A flashcard round: nothing but the card. */
body.focus .topbar, body.focus .tabs { display: none; }

/* ---- shared pieces ---- */

.section-label {
  padding: 20px 16px 8px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.card {
  margin: 12px 16px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.pad { padding: 0 16px; }
.empty { color: var(--muted); text-align: center; padding: 26px 16px; font-size: 15px; }
.msg { min-height: 20px; font-size: 14px; padding: 6px 16px 0; }
.card .msg, .sec-body .msg { padding: 0; }
.msg.ok { color: var(--good); }
.msg.bad { color: var(--bad); }
.item-meta { font-size: 13px; color: var(--muted); }

.sec { margin: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sec-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: 0; padding: 15px 16px; color: var(--text); font-size: 17px; font-weight: 700;
  text-align: left; border-radius: 0;
}
.sec-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec-meta { font-size: 14px; font-weight: 500; color: var(--muted); }
.sec-chevron { transition: transform .2s; color: var(--muted); font-size: 20px; }
/* Child combinators, not descendant: an open section must not open every
   section inside it (SpellingApp learned this the hard way). */
.sec.open > .sec-head .sec-chevron { transform: rotate(90deg); }
.sec-body { display: none; padding: 0 16px 16px; gap: 10px; grid-template-columns: 1fr; }
.sec.open > .sec-body { display: grid; }

.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 14px; font-size: 15px; font-weight: 600;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 99px;
}
.chip.on { background: rgba(139, 92, 246, .22); border-color: var(--accent); color: var(--text); }
.chip-meta { margin-left: 8px; font-weight: 500; font-size: 13px; opacity: .8; }

.bar { height: 8px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .25s; }
.bar-fill.full { background: var(--good); }

.stack { display: flex; height: 12px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.stack-part { height: 100%; }
.stack-part.known, .swatch.known { background: var(--good); }
.stack-part.learning, .swatch.learning { background: var(--warn); }
.stack-part.new, .swatch.new { background: var(--unseen); }

.tag {
  display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted);
}

/* ---- home ---- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 18px 16px; }
.tile {
  display: grid; gap: 8px; align-content: start; padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  color: var(--text); text-decoration: none;
}
.tile-emoji { font-size: 38px; line-height: 1; }
.tile-name { font-size: 23px; font-weight: 800; }
.tile-blurb { font-size: 15px; color: var(--muted); line-height: 1.4; }
.tile-line { font-size: 14px; margin-top: 4px; }
.tile-line.bad { color: var(--bad); }

/* ---- idioms: choosing ---- */

.intro p { margin: 0; line-height: 1.5; }
.intro p + p { margin-top: 6px; font-size: 15px; }
.counts-line { margin-top: 12px; font-size: 15px; color: var(--muted); }
.begin {
  display: block; width: calc(100% - 32px); margin: 22px 16px 0;
  padding: 20px; font-size: 22px; font-weight: 800; border-radius: 16px; overflow-wrap: anywhere;
}
.start-bar {
  position: sticky; bottom: 0; margin-top: 10px;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(to bottom, rgba(22, 18, 46, 0), var(--bg) 40%);
}
.start-bar .begin { width: 100%; margin: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* ---- idioms: sets ---- */

.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 16px 0; }
.set-card {
  display: grid; gap: 9px; align-content: start; text-align: left;
  padding: 14px 15px; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px; font-weight: 400;
}
.set-card.done { border-color: rgba(34, 197, 94, .6); }
.set-card.last { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.set-name { font-size: 20px; font-weight: 800; }
.set-card .stack { height: 8px; }
.set-line { font-size: 13px; color: var(--muted); }
.set-card.done .set-line { color: var(--good); font-weight: 600; }
.set-when { font-size: 12px; color: var(--muted); }

/* ---- idioms: a round ---- */

.run { display: grid; gap: 16px; padding: calc(env(safe-area-inset-top) + 16px) 16px 16px; }
.run-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.run-count { font-size: 17px; font-weight: 700; color: var(--muted); }

/* The flashcard. Both faces sit in the same grid cell, so the card is as tall
   as whichever face needs more room, and the inner box turns over in 3D. */
.flash { perspective: 1600px; cursor: pointer; outline: none; border-radius: 24px; }
.flash:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.flash.enter { animation: card-in .28s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.flash-inner {
  display: grid; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.flash-inner.flipped { transform: rotateY(180deg); }
.flash-inner.no-anim { transition: none; }
.face {
  grid-area: 1 / 1; position: relative;
  min-height: clamp(280px, 48vh, 400px);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;
  padding: 58px 24px 52px; text-align: center; border-radius: 24px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.front {
  background: radial-gradient(120% 90% at 50% 0%, #34297a 0%, #221c4a 60%, #1c173f 100%);
  border: 2px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.back {
  transform: rotateY(180deg);
  background: radial-gradient(120% 90% at 50% 0%, #2d2366 0%, #1f1944 70%);
  border: 2px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.face-tags {
  position: absolute; top: 16px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.face-theme { font-size: 13px; color: var(--muted); font-weight: 600; }
.tag.why-new { color: #c4b5fd; border-color: rgba(196, 181, 253, .5); }
.tag.why-learning { color: var(--warn); border-color: rgba(251, 191, 36, .5); }
.tag.why-review { color: var(--good); border-color: rgba(34, 197, 94, .5); }
.idiom {
  font-family: var(--serif); font-size: clamp(30px, 7vw, 48px); font-weight: 700;
  line-height: 1.2; overflow-wrap: anywhere; max-width: 18ch; text-wrap: balance;
}
.hint { position: absolute; bottom: 18px; left: 0; right: 0; font-size: 14px; color: var(--muted); }
.back-idiom { font-family: var(--serif); font-size: clamp(18px, 4vw, 22px); color: var(--muted); font-weight: 700; }

.meaning-block { display: grid; gap: 12px; }
.meaning-block p { margin: 0; }
.meaning { font-size: clamp(19px, 4.4vw, 24px); font-weight: 700; line-height: 1.35; }
.example { font-size: clamp(16px, 3.8vw, 19px); line-height: 1.5; color: #d8d1f5; font-style: italic; }
mark.hl {
  background: rgba(139, 92, 246, .32); color: #fff; font-style: normal; font-weight: 700;
  padding: 1px 5px; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.face .meaning { font-size: clamp(22px, 5vw, 30px); text-wrap: balance; }
.face .example { font-size: clamp(17px, 4.2vw, 21px); }

/* The answer buttons hold their space before the flip, so nothing jumps. */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answers.waiting { visibility: hidden; }
.answers button { padding: 19px 12px; font-size: clamp(17px, 4.2vw, 20px); font-weight: 800; border-radius: 16px; }
.answer-learning { background: rgba(251, 191, 36, .12); border: 2px solid var(--warn); color: var(--warn); }
.answer-knew { background: linear-gradient(160deg, #22c55e, #15803d); }
.run-note { min-height: 24px; text-align: center; font-size: 16px; font-weight: 600; color: var(--muted); }
.run-note.good { color: var(--good); }
.run-note.bad { color: var(--bad); }
.run-keys { text-align: center; font-size: 13px; color: var(--muted); }

/* ---- idioms: how the round went ---- */

.summary-title { font-size: clamp(22px, 5vw, 28px); font-weight: 800; }
.facts { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; }
.fact-value { font-size: 34px; font-weight: 800; }
.fact-label { font-size: 14px; color: var(--muted); }
.fact.good .fact-value { color: var(--good); }
.fact.warn .fact-value { color: var(--warn); }
.review-card { display: grid; gap: 10px; }
.review-idiom { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.review-card .meaning { font-size: 17px; }
.review-card .example { font-size: 16px; }
.plain-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.4; }

/* ---- idioms: all idioms ---- */

.browse-top { display: grid; gap: 12px; padding-top: 16px; }
.search { font-size: 17px; }
.idiom-list { gap: 0 !important; padding-bottom: 6px !important; }
.idiom-item { border-top: 1px solid var(--line); }
.idiom-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; background: none; border: 0; border-radius: 0;
  color: var(--text); font-size: 17px; font-weight: 600; text-align: left;
}
.idiom-row-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.idiom-row-chev { color: var(--muted); font-size: 20px; transition: transform .2s; }
.idiom-item.open .idiom-row-chev { transform: rotate(90deg); }
.idiom-details { display: grid; gap: 10px; padding: 0 2px 16px 26px; }
.idiom-details .meaning { font-size: 17px; }
.idiom-details .example { font-size: 16px; }
.status-dot { width: 12px; height: 12px; border-radius: 99px; flex: 0 0 auto; }
.status-dot.new { border: 2px solid var(--unseen); }
.status-dot.learning { background: var(--warn); }
.status-dot.known { background: var(--good); }

/* ---- idioms: progress ---- */

.progress-head { display: grid; gap: 14px; }
.progress-big { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 17px; }
.big-number { font-size: 48px; font-weight: 800; line-height: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.explain { margin: 0; line-height: 1.5; }
.theme-progress { display: grid; gap: 14px; }
.theme-row { display: grid; gap: 7px; }
.theme-row-label { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; }
.theme-row .stack { height: 9px; }
.day-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.day-row:first-child { border-top: 0; padding-top: 0; }
.day-row:last-child { padding-bottom: 0; }
.day-date { font-weight: 700; flex: 0 0 auto; }
.day-detail { color: var(--muted); font-size: 15px; text-align: right; }
.known-idiom { font-family: var(--serif); font-weight: 700; font-size: 17px; }

/* ---- pointer devices ---- */

@media (hover: hover) {
  button:not(:disabled):hover { filter: brightness(1.12); }
  .tile:hover, .set-card:hover { border-color: var(--accent); }
  .tab:hover { color: var(--text); }
  .flash:hover .front { border-color: var(--accent); }
  .idiom-row:hover .idiom-row-text { color: #c4b5fd; }
  .topbar-btn:hover { filter: none; background: var(--card); }
}

@media (min-width: 900px) {
  .run { padding-top: 36px; gap: 20px; }
}

/* Four tabs on one line on a phone. */
@media (max-width: 420px) {
  .tabs { gap: 6px; padding: 9px 8px; }
  .tab { padding: 8px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .flash-inner, .bar-fill, .sec-chevron, .idiom-row-chev { transition: none; }
  .flash.enter { animation: none; }
}