/* THE BOOKSHOP — the entrance page. Deliberately its own stylesheet rather than a slice of
   book.css: the shop must paint in one round trip on a cold phone, and book.css is ~230 KB of
   card renderers it will never use. What it does borrow is the palette and the one typeface, so
   the door and the book are visibly the same shop.

   Kept in sync by hand, which is fine for eleven declarations and worth the load-time. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdd;
  --card: #fffdf7;
  --line: #e6dcc8;
  --ink: #3d3428;
  --ink-soft: #8a7f6c;
  --ink-mid: #6a6153;
  --terra: #c96f4a;
  --terra-deep: #a8512f;
  --sage: #6f8f4d;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased; line-height: 1.45;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));
}
#shop { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ---- the top bar: who we are, and the language the shop speaks ---- */
.sh-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 0 14px; flex-wrap: wrap;
}
.sh-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sh-brand img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.sh-brand span { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
#sh-l1 { display: flex; align-items: center; gap: 8px; }
.sh-k { font-size: 12.5px; color: var(--ink-soft); }

/* the same picker shell as the course's account sheet — one control, two pages */
.l1-sel { position: relative; display: inline-block; }
.l1-sel select {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 30px 8px 13px; cursor: pointer; line-height: 1.2;
}
.l1-sel select:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.l1-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-52%);
  color: var(--ink-soft); pointer-events: none; font-size: 12px;
}

/* ---- the lede ---- */
.sh-lede { padding: 6px 0 22px; }
.sh-lede h1 { font-size: 25px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.sh-lede p { margin: 0; font-size: 15px; color: var(--ink-mid); }
.sh-shelf-k {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}

/* ---- one book per language ---- */
.book {
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 14px; margin-bottom: 10px;
}
/* the one that exists is the one that looks alive — everything else is visibly a plan */
.book.has-live { background: var(--card); border-color: #e2d2b4; box-shadow: 0 1px 0 rgba(61,52,40,.05); }
.bk-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.bk-flag { font-size: 20px; line-height: 1; }
.bk-name { font-size: 17px; font-weight: 700; }
.bk-note { font-size: 12px; color: var(--sage); font-weight: 600; }
.bk-note.soft { color: var(--ink-soft); font-weight: 500; }

/* the CEFR levels. A grid, not a wrapping row, so the four levels line up down the shelf and the
   eye can read a column ("what does A1 look like everywhere?") as well as a row. */
.lv-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; background: transparent;
  padding: 9px 4px 8px; font: inherit; color: var(--ink-soft); cursor: pointer;
  text-decoration: none; text-align: center; transition: border-color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.lv b { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.lv span { font-size: 10.5px; line-height: 1.2; }
.lv:not(.live):hover { border-color: #d9c9a8; background: rgba(255,253,247,.6); }
.lv.picked { border-color: var(--terra); }
.lv.live {
  background: var(--terra); border-color: var(--terra); color: #fff;
  box-shadow: 0 2px 0 rgba(61,52,40,.14);
}
.lv.live b { color: #fff; }
.lv.live:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.lv:active { transform: scale(.97); }

/* the answer to a tap on an unwritten level — one line, in place, no sheet and no email box */
.sh-say {
  margin-top: 14px; font-size: 13.5px; color: var(--ink-mid); background: var(--paper-deep);
  border: 1px dashed var(--line); border-radius: 12px; padding: 0 13px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}
.sh-say.on { max-height: 140px; opacity: 1; padding: 11px 13px; }

@media (prefers-reduced-motion: reduce) {
  .lv, .sh-say { transition: none; }
}