@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-text); }
button{ font-family: inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Wordmark — "wineislit", lowercase, single weight. The dot on the i in "lit"
   (only that i) is a small solid square in the accent color, built from CSS
   shapes rather than a real glyph so the dot shape is exact in any font. */
.wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.wordmark .i-box{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 1em;
  width: 0.16em;
  margin: 0 0.04em;
}
.wordmark .i-dot{
  width: 0.16em;
  height: 0.16em;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 0.12em;
  flex-shrink: 0;
}
.wordmark .i-stem{
  width: 0.1em;
  height: 0.6em;
  background: currentColor;
  border-radius: 1px;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, opacity .15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover{ opacity: 0.92; }
.btn-secondary{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover{ background: var(--surface-2); }
.btn-ghost{
  background: transparent;
  color: var(--text-soft);
  border: none;
}
.btn-danger{
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover{ background: var(--error-bg); }
.btn-full{ width: 100%; }

/* Home screen's action list: everything after Daily Goal Quiz pairs up into 2 columns;
   Daily Goal Quiz itself (always the first action) stays a full-width pink bar above them. */
.actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.actions > a:first-child{ grid-column: 1 / -1; }
.actions > a.full-span{ grid-column: 1 / -1; }

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* App shell — pages under /app/* */
.app-page{
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 100px;
  min-height: 100vh;
}
.app-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.app-header h1{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.bottom-nav{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}
.nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.nav-item .nav-icon{ width: 22px; height: 22px; }
.nav-item.active{ color: var(--accent); }

/* Stat tiles */
.tile-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.tile{
  text-align: center;
  padding: 14px 8px;
}
.tile .tile-value{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.tile .tile-label{
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Progress bars */
.progress-track{
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .3s ease;
}

/* Readiness score */
.readiness{
  text-align: center;
  padding: 24px 16px;
  margin-bottom: 16px;
}
.readiness .score{
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.readiness .score-label{
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 6px;
}

/* Form fields (Profile) */
.field{ margin-bottom: 16px; }
.field label{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"]{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  font-family: var(--font-body);
}
.field input[disabled]{ color: var(--text-soft); background: var(--surface-2); }
.field input[type="range"]{ width: 100%; accent-color: var(--accent); }

/* Quiz screen */
.quiz-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.quiz-header .chapter-name{ font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.quiz-header .counter{ font-size: 12.5px; color: var(--text-soft); }
.quiz-header .exit-btn{
  background: none; border: none; color: var(--text-soft);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.quiz-progress{ margin-bottom: 20px; }

.pill{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}
.pill-foundational{ background: var(--success-bg); color: var(--success); }
.pill-intermediate{ background: var(--partial-bg); color: var(--partial); }
.pill-exam-level{ background: var(--error-bg); color: var(--error); }

.q-card{ padding: 20px; margin-bottom: 16px; }
.q-card-top{ display: flex; justify-content: flex-end; margin-bottom: 10px; }
.q-text{ font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 18px; }

.q-option{
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.q-option:hover{ border-color: var(--accent); }
.q-option:disabled{ cursor: default; }
.q-option .mark{ font-weight: 700; flex-shrink: 0; }
.q-option.correct{ border-color: var(--success); background: var(--success-bg); }
.q-option.correct .mark{ color: var(--success); }
.q-option.incorrect{ border-color: var(--error); background: var(--error-bg); }
.q-option.incorrect .mark{ color: var(--error); }

.q-textarea{
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  margin-bottom: 12px;
}

.explain-panel{
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  border-left: 4px solid var(--border);
}
.explain-panel .verdict{ font-weight: 700; margin-bottom: 4px; }
.explain-panel.correct{ background: var(--success-bg); border-left-color: var(--success); }
.explain-panel.correct .verdict{ color: var(--success); }
.explain-panel.partial{ background: var(--partial-bg); border-left-color: var(--partial); }
.explain-panel.partial .verdict{ color: var(--partial); }
.explain-panel.incorrect{ background: var(--error-bg); border-left-color: var(--error); }
.explain-panel.incorrect .verdict{ color: var(--error); }
.explain-panel .citation{ font-size: 11.5px; color: var(--text-soft); margin-top: 8px; }

/* Modal */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-box{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}
.modal-box h3{ font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; }
.modal-box p{ font-size: 13.5px; color: var(--text-soft); margin: 0 0 18px; }
.modal-actions{ display: flex; flex-direction: column; gap: 10px; }

/* Stats screen */
.stats-section{ margin-bottom: 24px; }
.stats-section h2{ font-family: var(--font-display); font-size: 15px; margin: 0 0 12px; }

.heatmap{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.heat-cell{
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
}
.heat-cell .heat-pct{ font-size: 10px; font-weight: 500; color: var(--text-soft); margin-top: 2px; }
/* Mastery buckets — increasing opacity of the accent color over the surface */
.heat-0{ background: var(--surface-2); }
.heat-1{ background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
.heat-2{ background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.heat-3{ background: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
.heat-4{ background: var(--accent); color: var(--accent-contrast); }
.heat-4 .heat-pct{ color: var(--accent-contrast); opacity: 0.85; }

/* Every Stats category (heatmap cell, tile, bar row) is a link to a filtered quiz over
   questions already answered in that category — this makes that clickable. */
.stat-clickable{
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s ease;
}
.stat-clickable:hover, .stat-clickable:focus-visible{
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.heat-cell.stat-clickable{ display: flex; }

.bar-row{ margin-bottom: 14px; }
.bar-row:last-child{ margin-bottom: 0; }
.bar-row .bar-label{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.bar-row .bar-label .name{ color: var(--text); font-weight: 500; }
.bar-row .bar-label .count{ color: var(--text-soft); }
.bar-list-scroll{ max-height: 280px; overflow-y: auto; padding-right: 4px; }

.chapter-picker{
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
}

/* Tappable full-width link list — Flashcards' chapter splash, Browse's index */
.link-list{ display: flex; flex-direction: column; gap: 10px; }
.link-list-item{
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
}

/* Back-button + truncating title header for a drilled-into detail view
   (Flashcards' chapter view, Browse's question-list view) */
.detail-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.detail-header a.btn{ flex-shrink: 0; }
.detail-header .detail-header-title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 14px;
  color: var(--text-soft);
}

/* Small muted per-question chapter label, shown only when a list spans multiple
   chapters (e.g. Browse's "By difficulty" cross-section) */
.q-card-top.with-chapter-tag{ justify-content: space-between; }
.chapter-tag{ font-size: 11px; font-weight: 600; color: var(--text-soft); }

/* Flashcards */
.fc-wrap{ display: flex; flex-direction: column; align-items: center; }
.fc-count{ font-size: 12.5px; color: var(--text-soft); }
.fc{
  width: 100%;
  max-width: 480px;
  height: 240px;
  perspective: 1000px;
  margin-bottom: 18px;
}
.fc.fc-map{ height: 490px; max-width: 560px; }
.fc.fc-map .fc-front{ padding: 16px 10px; }
.fc-inner{
  width: 100%; height: 100%;
  position: relative;
  transition: transform .5s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.fc-inner.flipped{ transform: rotateY(180deg); }
.fc-face{
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.fc-front{
  background: var(--surface);
  border: 1px solid var(--border);
}
.fc-front .fc-cat{
  position: absolute; top: 16px; left: 18px;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-text); font-weight: 600;
}
.fc-front .fc-term{
  font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text);
}

/* Map flashcards — the front shows a shared map image with one appellation blanked out
   and marked, rather than the term (the term IS the answer, shown on the back instead). */
.fc-map-wrap{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.fc-map-prompt{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
}
.fc-map-imgwrap{ position: relative; width: 100%; }
.fc-map-img{ width: 100%; display: block; border-radius: var(--radius-sm); }
.fc-map-marker{
  position: absolute;
  /* Matches the map's own parchment/terrain tone rather than a stark white "redacted" patch */
  background: #e7ebdb;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-sm);
  box-sizing: border-box;
}

.fc-back{
  background: var(--accent);
  color: var(--accent-contrast);
  transform: rotateY(180deg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  gap: 10px;
}
.fc-back .fc-term-back{
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.fc-back .fc-citation{
  font-size: 11px;
  opacity: 0.85;
  font-style: italic;
}
.fc-nav{ display: flex; gap: 14px; align-items: center; }
.fc-flip-hint{ font-size: 12px; color: var(--text-soft); margin-top: 8px; }

/* Listen mode */
.listen-controls{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 18px; padding: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.listen-controls label{ font-size: 12.5px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.listen-controls select{
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 12.5px;
}
.listen-script h3{
  font-family: var(--font-display); font-size: 16px; margin: 22px 0 10px;
}
.listen-script p{
  font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 12px;
}
.listen-section{
  padding: 6px 10px; border-radius: var(--radius-sm); transition: background .2s;
}
/* Highlighted at section granularity, not per paragraph — one audio clip narrates a whole
   section (see KNOWN_ISSUES.md), so that's the smallest unit playback position can reflect. */
.listen-section.reading{ background: var(--accent-bg, var(--surface-2)); box-shadow: inset 3px 0 0 var(--accent); }
.listen-citation{ font-size: 12px; color: var(--text-soft); font-style: italic; margin: -4px 0 16px; }