/* Page-level compositions that are specific to Kartuli's screens.
   The design system (app.css) stays generic; this file holds the few
   arrangements only one page needs. Loaded after app.css. */

/* --- set editor: term | translation | remove ------------------------------
   app.css's .form-row is a 2-up grid; a word row needs a third, auto-width
   column for the remove button, and must stay one row on a phone. */
.word-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}
.word-row > .btn-icon { grid-row: 1 / span 2; align-self: center; }
@media (min-width: 40rem) {
  .word-row { grid-template-columns: 1fr 1fr auto; gap: var(--sp-3); }
  .word-row > .btn-icon { grid-row: auto; }
}
/* A row whose translation we could not confidently detect. */
.word-row.is-review > .input { box-shadow: inset 0 0 0 2px var(--gold); }

/* --- landing: the three sample word pairs --------------------------------- */
.pair-preview {
  display: grid;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-8);
}
.pair-preview .pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.pair-preview .pair__term { text-align: end; font-size: var(--fs-lg); }
.pair-preview .pair__tr   { text-align: start; color: var(--ink-soft); }
.pair-preview .pair__arrow { color: var(--ink-faint); }

/* --- set title input: reads as a heading, not a form field ---------------- */
.input--title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  padding-inline: var(--sp-3);
}

/* --- import preview: keep long glosses from stretching the sheet ---------- */
[data-import-list] .pair { flex-wrap: wrap; }

/* --- checkable chips (student tags, colour swatches) ----------------------
   The input is visually hidden inside the <label class="chip">, so without
   this the teacher had NO way to see which students were selected -- the
   design system's .chip.is-selected is class-driven and nothing set it.
   :has() lets the checked state drive the look with no JavaScript. */
.chip:has(> input:checked) {
  border-color: currentColor;
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 1px currentColor;
}
.chip:has(> input:checked)::after {
  content: "✓";
  margin-inline-start: var(--sp-1);
  font-weight: var(--fw-bold);
}
/* Keyboard users must still see where they are. */
.chip:has(> input:focus-visible) {
  outline: var(--focus-ring, 2px solid var(--wine));
  outline-offset: 2px;
}
/* The colour swatches are radios: show the chosen one, no tick glyph. */
[data-student-colours] .chip:has(> input:checked)::after { content: none; }
[data-student-colours] .chip { min-width: var(--tap); min-height: var(--tap); justify-content: center; }

/* Word break inside a hangman expression: a gap, not a guessable cell. */
.g-hm-gap { border: none !important; background: none !important; box-shadow: none !important; }

/* --- import discoverability ----------------------------------------------
   The only way in used to be a small ghost button in the card header, which
   teachers did not find. An empty word list now leads with the three routes. */
.empty--inset { padding-block: var(--sp-8); }
.import-routes { flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.import-bold-note { max-width: 44ch; margin-inline: auto; margin-top: var(--sp-4); }
.import-bold-banner { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.import-bold-banner strong { font-weight: var(--fw-bold); }
.help--cloze { margin-top: var(--sp-2); font-family: var(--font-ka); }

/* --- Google Drive connection status --------------------------------------
   Shown before anything fails, so a teacher with a private document is not
   left guessing why the import will not work. */
.drive-status { margin-top: var(--sp-3); }
.drive-status__off {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.drive-status__text { display: grid; gap: var(--sp-1); min-width: 14rem; flex: 1 1 18rem; }
.drive-status__on {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--olive-tint, var(--surface-2));
  color: var(--olive-ink, var(--ink));
}

/* --- mobile fixes --------------------------------------------------------
   Found by looking at the app on a real phone-width viewport. */

/* 1. The dropdown anchors its right edge to the trigger, so a 12rem panel on a
      narrow screen hung 31px off the left edge (measured). Below 40rem it is
      pinned to the viewport instead of to the trigger; a max-width alone could
      not fix it, because the overflow came from the anchor point, not the width. */
.menu__panel {
  max-height: min(70svh, 32rem);
  overflow-y: auto;
}
@media (max-width: 40rem) {
  .menu__panel {
    position: fixed;
    top: calc(var(--topbar-h) + var(--sp-2));
    inset-inline: var(--sp-3);
    min-width: 0;
    max-width: none;
  }
}
/* The language code, so each row reads "EN  English" even when narrow. */
.menu__code {
  flex: 0 0 2.25rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* 2. Three tabs must fit a 360px screen without a hidden third one. */
@media (max-width: 26rem) {
  .tabs { gap: 0; }
  .tabs > .tab { padding-inline: var(--sp-2); font-size: var(--fs-sm); }
}

/* 3. A sticky modal footer can sit on top of the control you just scrolled to. */
.modal__panel { scroll-padding-bottom: 7rem; }
@media (max-width: 40rem) {
  .modal__body { padding: var(--sp-4); }
  .modal__foot { flex-wrap: wrap; }
  .modal__foot > .btn { flex: 1 1 8rem; }
  /* The Drive prompt stacks instead of squeezing its button off the edge. */
  .drive-status__off { flex-direction: column; align-items: stretch; }
  .drive-status__off .btn { width: 100%; }
  .import-routes .btn { flex: 1 1 100%; }
}

/* --- authored questions (multiple choice / fill in the blank) ------------- */
.q-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: end;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.q-row > [data-q-kind] { grid-column: 1 / -1; justify-self: start; }
.q-row .field { margin: 0; }
.q-row .q-remove { align-self: center; }
@media (min-width: 48rem) {
  .q-row { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .q-row > [data-q-kind] { grid-column: 1 / -1; }
}
.q-list { gap: var(--sp-3); }

/* --- editor panels: options, assignments, sharing ------------------------- */
.opts-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .opts-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.assign-link {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  word-break: break-all;
  color: var(--ink-faint);
}
.assign-welcome { max-width: 32rem; margin-inline: auto; text-align: center; }
.assign-card { margin-top: var(--sp-6); text-align: start; }
.set-card--community { display: grid; gap: var(--sp-2); }

/* --- contrast fixes in the default palette --------------------------------
   Measured, not eyeballed: a token audit across every style found 14 pairs in
   `classic` below WCAG AA. The five newer styles pass everywhere. These four
   were the ones a reader would actually notice. */

/* 3.31:1 — used for timestamps and helper text, which people do read. */
:root { --ink-faint: #6E645C; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* links were 3.30:1 on the dark ground */
    --wine: #D0616B;
    /* selected text was 1.78:1 - very nearly invisible */
    --select-bg: #4A2F33;
  }
}
:root[data-theme="dark"] {
  --wine: #D0616B;
  --select-bg: #4A2F33;
}
::selection { background: var(--select-bg, #F2D9DC); color: var(--ink); }