/* Round 10: the German grammar games (lane 010; src/features/practice-grammar/). The round frame is the practice
   round's (practice.css .pr-round); this file adds the tiles, the answer line, the choices, the games page and the
   done screen's rule list. Colour: ink, ok, bad and accent only (no role colours: these are not the grammar-role
   tiles); the time bar is never accent. Targets 44 px (choices 56 px); tiles wrap at 320 px. */

/* ---------- the round ---------- */
.gg-tbar { margin-top: var(--s-2); }
.gg-slow { color: var(--ink-2); }
.gg-timeroff { margin-inline-start: auto; margin-inline-end: 0; }
.gg-done .switch-row { margin-top: var(--s-4); }
.gg-tile[aria-disabled="true"] { cursor: default; }
.gg-card .pr-task { margin-top: var(--s-2); }
.gg-fb { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.gg-fb .pr-res { display: inline-flex; align-items: center; gap: 6px; }
.gg-fb .icon { width: 18px; height: 18px; }
.gg-why { font-size: var(--fs-body); color: var(--ink); }
.gg-en { color: var(--ink-3); }

/* Clause Magnet: the base line of tiles and the answer line under it */
.gg-pool, .gg-line, .gg-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gg-actions { flex-direction: column; align-items: stretch; }
.gg-bank { padding: var(--s-3) 0 var(--s-2); border-top: 1px solid var(--hairline); }
.gg-bank-label { margin-bottom: var(--s-2); }
.gg-pool { min-height: 44px; }
.gg-tile { min-height: 44px; max-width: 100%; }
.gg-tile > .ui-tile-face { min-height: 44px; padding: 6px 12px; white-space: normal; text-align: center; font: 400 20px/1.2 var(--font-display); }
.gg-tile.is-placed > .ui-tile-face { border-color: var(--field-border); }
/* an empty slot is the tile's home spot: a quiet well of its width, so the bank keeps its shape */
.gg-slot { display: inline-block; height: 44px; max-width: 100%; border: 1px dashed var(--hairline-strong); border-radius: var(--r-tile); background: var(--surface-2); }
.gg-struck { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink-3); font: 400 20px/1.2 var(--font-display);
  text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gg-note { margin-top: var(--s-2); }
.gg-line { align-items: center; margin-top: var(--s-5); min-height: 60px; padding: 8px 0; border-bottom: 2px solid var(--hairline-strong); font: 400 20px/1.2 var(--font-display); }
.gg-line.is-ok { border-bottom-color: var(--ok); }
.gg-line.is-bad { border-bottom-color: var(--bad); }
.gg-main { color: var(--ink-2); }
.gg-conn { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ink); border-radius: var(--r-tile); background: var(--ink); color: var(--on-ink);
  font: 400 20px/1.2 var(--font-display); }
.gg-conn.is-quiet { min-height: 36px; padding: 4px 10px; background: none; color: var(--ink); border: 1px solid var(--ink); font: 400 18px/1.2 var(--font-display); }
/* the full stop: its own item right after the last tile, never over it */
.gg-end { flex: none; color: var(--ink-2); margin-inline-start: -4px; line-height: 44px; }
/* a separable verb's particle placed right before its verb reads as one tile: the joint is a dashed edge */
.gg-line .gg-tile.is-join-a { margin-inline-end: -8px; }
.gg-tile.is-join-a > .ui-tile-face { border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end-style: dashed; }
.gg-tile.is-join-b > .ui-tile-face { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start-color: transparent; }
/* the right order after a miss: quiet tiles, the verb and the subject outlined in accent */
.gg-right { font: 400 18px/1.2 var(--font-display); }
.gg-rt { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-tile); background: var(--surface); }
.gg-rt.is-key { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Kasus-Laser: the frame with its gap and the article buttons */
.gg-motion { margin-top: var(--s-3); }
.gg-frame { margin-top: var(--s-2); }
.gg-gap { display: inline-block; min-width: 2.4em; margin: 0 0.1em; border-bottom: 2px solid var(--accent); vertical-align: baseline; text-align: center; }
.gg-gap.is-filled { border-bottom-color: var(--ink); }
.gg-choices { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.gg-choice { position: relative; justify-content: center; gap: 6px; min-height: 56px; font: 500 20px/1 var(--font-ui); }
.gg-choice kbd { position: absolute; inset-inline-end: 8px; bottom: 6px; }
.gg-choice .icon { width: 18px; height: 18px; }
.gg-choice[aria-disabled="true"] { cursor: default; }
.gg-choice.is-ok { color: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.gg-choice.is-bad { color: var(--bad); border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.gg-case { font-size: var(--fs-caption); }
.gg-gender { color: var(--ink-2); }

/* ---------- the games page ---------- */
.gg-games { display: grid; gap: var(--s-4); }
.gg-game { display: grid; gap: var(--s-2); padding: var(--s-5); }
.gg-about { color: var(--ink-2); }
.gg-play { justify-self: start; min-height: var(--tap); margin-top: var(--s-2); }
.gg-hub .form-field { margin-top: var(--s-2); }
.gg-hub .chip { min-height: var(--tap); }
@media (min-width: 720px) {
  .gg-games { grid-template-columns: 1fr 1fr; }
}

/* ---------- the done screen ---------- */
.gg-rules ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.gg-rules li { padding: 10px 0; border-top: 1px solid var(--hairline); font-size: var(--fs-body); }

@media (forced-colors: active) {
  .gg-conn { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  .gg-rt.is-key, .gg-choice.is-ok, .gg-choice.is-bad { border-width: 3px; }
}

/* one box for every tile of a line (polish): the answer tiles, the connector and the right order's tiles share the
   line-height, padding, border width and box, so a line's tiles are the same height whatever they hold */
.gg-line > .gg-tile, .gg-line > .gg-conn, .gg-pool > .gg-tile { align-self: center; }
.gg-tile > .ui-tile-face, .gg-conn:not(.is-quiet) { box-sizing: border-box; min-height: 44px; padding: 6px 12px; border-width: 1px; line-height: 1.2; }
.gg-rt, .gg-conn.is-quiet { box-sizing: border-box; min-height: 36px; padding: 4px 10px; border-width: 1px; line-height: 1.2; }