/* Element Symbols: the control bar with the selected symbol enlarged beside the input, the grid of 118 text tiles
   (5 columns on mobile, up to 12 on desktop) and the page text. Tiles: /css/image-tile.css, text tiles here.
   Scoped under .q-symbols. Functional layout before the design pass (listed for design review); existing tokens only,
   following US Presidents by Picture. */

.q-symbols { padding-block: var(--s5) var(--s7); }
.q-symbols__intro { display: grid; gap: var(--s2); margin-bottom: var(--s5); max-width: 60ch; }
.q-symbols__intro h1 { font-size: 28px; }

.q-symbols__game { max-width: none; display: grid; gap: var(--s3); padding: var(--s3); }
.q-symbols__game:focus { outline: none; }

/* ---------- control bar: sticky, so the preview and the input stay in view with the keyboard open ---------- */
.q-symbols__bar {
  position: sticky; top: 0; z-index: 4;
  display: grid; gap: var(--s2);
  margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 0; padding: var(--s3);
  background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom: 1px solid var(--line);
}
.q-symbols__row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.q-symbols__actions { display: flex; gap: var(--s2); margin-left: auto; }
.q-symbols__ask { display: flex; gap: var(--s3); align-items: flex-start; }
.q-symbols__ask:has(> [data-preview][hidden]):has(> [data-entry][hidden]) { display: none; }
.q-symbols__preview { flex: none; margin: 0; display: grid; gap: var(--s1); justify-items: start; }
.q-symbols__preview-face {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 8px;
  background: var(--surface-2); font-size: 44px; font-weight: 700; line-height: 1;
}
.q-symbols__preview-name { font-size: 16px; font-weight: 700; max-width: 22ch; }
.q-symbols__preview-name:empty { display: none; }
.q-symbols__entry { flex: 1 1 auto; min-width: 0; }
.q-symbols__input {
  width: 100%; min-height: 48px; padding: 0 var(--s4);
  font-size: 18px; /* 16 px or more keeps iOS from zooming on focus */
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.q-symbols__input:disabled { opacity: .5; }
.q-symbols__keys { display: none; margin-top: var(--s1); padding-inline: var(--s4); font-size: 13px; }
@media (pointer: fine) { .q-symbols__keys { display: block; } }
.q-symbols__feedback { margin-top: var(--s1); padding-inline: var(--s4); font-size: 15px; }

.q-symbols__result { display: grid; gap: var(--s3); padding-block: var(--s2); }
.q-symbols__result .fig dd { font-size: 24px; }
.q-symbols__after { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.q-symbols__after:not(:has(> :not([hidden]))) { display: none; }
.q-symbols__hint, .q-symbols__practice { font-size: 15px; }
.q-symbols__practice { flex-basis: 100%; }

/* ---------- grid ---------- */
.q-symbols__gridwrap { position: relative; min-width: 0; }
.q-symbols__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2) var(--s1);
}
.q-symbols .image-tile__frame { --tile-ratio: 3 / 2; font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); }
/* Long names (Rutherfordium, Praseodymium): the narrow width axis first, then a break */
.q-symbols .image-tile__label { font-size: 11px; font-stretch: 75%; overflow-wrap: anywhere; hyphens: manual; }
.q-symbols:not(.is-playing) .image-tile.is-named button.image-tile__btn { cursor: pointer; } /* after the game: review */
.q-symbols:not(.is-playing) .image-tile.is-named .image-tile__frame { opacity: 1; }

/* ---------- pause: cover the grid and hide the preview ---------- */
.q-symbols__pause { inset: 0; padding: var(--s4); align-content: start; }
.q-symbols__pause p { font-size: 18px; }
.q-symbols.is-paused .q-symbols__grid,
.q-symbols.is-paused .q-symbols__preview { visibility: hidden; }

/* ---------- your stats and the page text ---------- */
.q-symbols__stats { max-width: none; display: grid; gap: var(--s4); margin-top: var(--s5); padding: var(--s4); }
.q-symbols__stats .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-symbols__stats .fig dd { font-size: 24px; }
.q-symbols__recent { overflow-x: auto; }
.q-symbols__recent caption { text-align: left; padding-bottom: var(--s2); }
.q-symbols__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.q-symbols__table thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: var(--s2); }
.q-symbols__table td, .q-symbols__table tbody th { padding: 6px var(--s2); border-bottom: 1px solid var(--line); height: 36px; text-align: left; }
.q-symbols__about { display: grid; gap: var(--s3); max-width: 72ch; margin-top: var(--s7); }
.q-symbols__about h2 { margin-top: var(--s4); }
.q-symbols__about h3 { margin-top: var(--s2); }
.q-symbols__about ol, .q-symbols__about ul { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s1); }
.q-symbols__more { display: grid; gap: var(--s3); }
.q-symbols__more summary { cursor: pointer; font-weight: 600; padding-block: 10px; } /* about 44 px tall */

@media (min-width: 600px) {
  .q-symbols__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .q-symbols__game { padding: var(--s5); gap: var(--s4); }
  .q-symbols__bar { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; padding: var(--s4) var(--s5); }
  .q-symbols__preview-face { width: 160px; height: 160px; font-size: 80px; }
  .q-symbols__entry { max-width: 480px; align-self: center; }
  .q-symbols__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
}
/* Desktop: the bar becomes a sticky column on the left (preview above the input), so the grid has the full height */
@media (min-width: 1024px) {
  .q-symbols__game { grid-template-columns: 280px minmax(0, 1fr); align-items: start; column-gap: var(--s5); }
  .q-symbols__bar {
    grid-column: 1; grid-row: 1 / span 3; position: sticky; top: var(--s4);
    margin: 0; padding: 0; border: 0; border-radius: 0;
  }
  .q-symbols__ask { flex-direction: column; }
  .q-symbols__entry { max-width: none; align-self: stretch; }
  .q-symbols__result, .q-symbols__after, .q-symbols__gridwrap { grid-column: 2; }
  .q-symbols__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s2) var(--s1); }
  .q-symbols .image-tile__label { min-height: 2.4em; font-size: 12px; }
}
@media (min-width: 1200px) {
  .q-symbols__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- the Latin-origin table (Phase 2 copy) ---------- */
.q-symbols__more[open] summary { margin-bottom: var(--s2); }
.q-symbols__origins { width: 100%; border-collapse: collapse; font-size: 15px; }
.q-symbols__origins thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: var(--s2); }
.q-symbols__origins td { padding: 6px var(--s2); border-bottom: 1px solid var(--line); height: 36px; }
.q-symbols__origins td:first-child { width: 4em; font-weight: 700; }