/* Hittite cuneiform has no reliable glyph coverage in default browser/OS fonts -- mobile
   fallbacks render visibly wrong glyphs (wrong wedge counts), not just an ugly substitute.
   Same three-face Ullikummi setup as flashcards/session.css and interlinear_reading's
   reading.html. .tile (drag_fill.html's tray buttons) isn't wrapped in .cuneiform like every
   other glyph on these pages, so it needs its own selector. */
@font-face {
  font-family: "UllikummiA";
  src: url("/static/custom_interlinear/fonts/UllikummiA.d0baacffa803.ttf") format("truetype");
  font-display: block;
  unicode-range: U+12000-1247F;
}
@font-face {
  font-family: "UllikummiB";
  src: url("/static/custom_interlinear/fonts/UllikummiB.fc248627e709.ttf") format("truetype");
  font-display: block;
  unicode-range: U+12000-1247F;
}
@font-face {
  font-family: "UllikummiC";
  src: url("/static/custom_interlinear/fonts/UllikummiC.a7fc04c5cb6b.ttf") format("truetype");
  font-display: block;
  unicode-range: U+12000-1247F;
}
.tile { font-family: UllikummiA, UllikummiB, UllikummiC, sans-serif; }

#word-list { list-style: none; padding: 0; }
.word { margin-bottom: 1em; }
/* More than 4 words: switch from a single column to a grid so a large (uncapped, spec D6)
   review pool doesn't turn into one long scroll. */
#word-list:has(> .word:nth-child(5)) {
  display: grid;
  /* max-content (not 1fr, its pre-2026-09-14 value) sizes each column to its OWN row's content,
     not stretched to match the widest column in the grid -- a page mixing short and long words
     no longer wastes a full 15em-plus on every short row just because one rare row needs more
     (real report: uniform 1fr columns made the grid look unfinished, all that white space next
     to a scrollbar on the one row that didn't fit). 15em is still the FLOOR (unchanged
     calibration: widest .cuneiform row measured in practice, ~152px for 4 blanks, ~228px for 6,
     with headroom) -- auto-fill still uses it to decide how many columns fit before dropping to
     fewer (down to 1) on a narrow viewport, max-content only governs how much wider than that
     floor a column bothers growing -- growth is still capped by whatever space auto-fill's
     other columns leave available, so a column doesn't reach its own max-content at the expense
     of pushing the grid past the viewport. Confirmed live (2026-09-14) that max-content columns
     don't push the whole grid past the viewport at any tested desktop width (641-1280px). What
     genuinely keeps this safe in the general case is min-width: 0 on .word (below) -- a grid
     item's automatic minimum size otherwise defaults to its content's min-content, which for a
     nowrap row equals its full unwrapped width, and THAT floor really can't shrink to fit
     available space; min-width: 0 removes it, so a column can always shrink as far as it needs
     to. The scrollport below exists for what that shrinking costs a too-narrow column locally
     (its own content no longer fits and must scroll to stay reachable), not to guard against
     the whole grid overflowing the viewport -- min-width: 0 already rules that out. */
  grid-template-columns: repeat(auto-fill, minmax(15em, max-content));
  gap: 0.5em 1.5em;
}
/* Without this, adjacent inline-block buttons/spans in .cuneiform get an implicit line-break
   opportunity between them and wrap onto a second line inside the grid column above, which is
   what looked like blanks not lining up with their own transliteration. nowrap only works
   because that column is now sized to fit the row's content (see the 15em comment above) --
   otherwise this would overflow the column instead of wrapping. */
.cuneiform { font-size: 1.8em; font-family: UllikummiA, UllikummiB, UllikummiC, sans-serif; white-space: nowrap; }
/* A column can still end up narrower than its own row's content in two cases: (a) at desktop
   widths, before 2026-09-14's max-content fix (grid-template-columns comment above) forced
   every column to the width of the WIDEST column in the grid via 1fr -- fixed by that change,
   this scrollport is now a fallback for the corpus's current longest word, not its active fix;
   (b) any row whose content a max-content column still can't grow enough to fit, because
   min-width: 0 (below) lets auto-fill shrink that column to make room for others instead --
   see the grid-template-columns comment above for why that's the right tradeoff (a locally
   scrollable column, not the whole grid overflowing the viewport). Needs a scrollport at EVERY
   viewport width, not just the mobile one below, for either case. Real report that first exposed the missing desktop
   protection: with no overflow-x here, an over-width row's excess painted straight over the
   next grid column's word (2026-09-13, lesson 4 page 39). Mechanism only, unscoped from
   viewport width -- the viewport-tuned column-width/font-size values themselves stay in the
   media query below, same division of responsibility the mobile block below already
   established. min-width: 0 gives the column a real box to scroll within; display: block is
   needed since overflow has no effect on .cuneiform's inline default (see the mobile block's
   own comment for the full reasoning on both). Unlike the mobile block, this one does NOT
   hide the scrollbar: mobile hides it because swipe-to-scroll is a self-evident touch gesture
   (the scroll capability stays, only its visible chrome goes -- see the mobile block's own
   comment), but a desktop mouse/trackpad user has no equivalent implicit affordance for "this
   row scrolls" -- hiding the scrollbar there would leave a truncated-looking row with no visual
   cue that more content, and more click targets on click_identify pages, exist past the edge
   (accessibility review finding, 2026-09-14). The browser's native horizontal scrollbar is the
   visible affordance at every non-mobile width. */
#word-list:has(> .word:nth-child(5)) > .word { min-width: 0; }
#word-list:has(> .word:nth-child(5)) .cuneiform {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  padding: 8px;
}
/* Graded rows need more room on the bottom edge specifically: the checkmark sits further past
   .gap's box than either ring does. This padding-bottom REPLACES the 8px above on this one edge
   (same specificity, later in source order -- it doesn't add to it), and only here; left/right/
   top keep the 8px ring padding on graded rows too. 0.75em is the checkmark's own font-size
   (0.55em) plus headroom (measured live: 0.6em left only a ~1px margin before the checkmark's
   line box hit the bottom edge; 0.75em gives ~4px), relative to .cuneiform's own font-size at
   whichever breakpoint is active -- already comfortably past the 8px ring minimum at either
   size, so no separate max() of the two is needed on this edge. Scoped to graded rows only so
   ungraded rows keep the smaller, ring-only padding. */
#word-list:has(> .word:nth-child(5)) .cuneiform:has(.gap[data-verdict]) { padding-bottom: 0.75em; }
/* Below 40rem (matches flashcards/session.css's own breakpoint), no phone in portrait reaches
   the ~500px of content width the desktop 15em floor needs for 2 columns -- base.html puts no
   max-width on <main>, so the full device viewport is the content width. Shrinking .cuneiform's
   font-size (and the grid floor/gap with it) is what actually gets 2 columns onto a real phone
   without re-allowing wrap. 1.25em is the smallest this can go: gaps.css's .gap (drag_fill's
   blanks) sizes itself at 1.2em off this same font-size, and 1.2 * 1.25em(20px) = 24px, the
   WCAG 2.5.8 floor -- any smaller and blanks fail that minimum. 10.5em (168px) is calibrated
   the same way the 15em floor above was: off the widest real row (333px at 1.8em, scaled to
   ~255px at 1.25em) with headroom for the normal case -- most rows are far under 255px, so the
   floor still buys 2 columns for the vast majority of pages. Raising the floor to fit the rare
   255px row outright isn't viable (it would need ~266px+ columns, 2x266+16=548px, wider than
   any real phone's content width, which would just kill 2 columns entirely), so that rare row
   instead gets its own tiny horizontal scroll below rather than forcing one column for everyone
   or wrapping (nowrap on .cuneiform is a hard constraint, see above). */
@media (max-width: 40rem) {
  .cuneiform { font-size: 1.25em; }
  #word-list:has(> .word:nth-child(5)) {
    grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr));
    gap: 0.5em 1em;
  }
  /* The scrollport mechanism itself (min-width: 0, overflow-x: auto, the graded-row
     padding-bottom) is unscoped now -- see its comment above this media query -- since the rare
     over-column row it protects against isn't a mobile-only problem. Only the viewport-tuned
     values and the scrollbar-hiding rules stay here: touch swipe is a self-evident scroll
     affordance on its own, so hiding the mobile scrollbar's chrome doesn't cost discoverability
     the way it would on desktop (see the base rule's own comment above). */
  #word-list:has(> .word:nth-child(5)) .cuneiform { scrollbar-width: none; }
  #word-list:has(> .word:nth-child(5)) .cuneiform::-webkit-scrollbar { display: none; }
}
/* drag_fill.html's not-yet-taught signs render inline among .gap blanks (exercises/gaps.css)
   as a bare glyph span -- unstyled, it had no box to match .gap's (height 1.5em, baseline
   align), and the Ullikummi font's tall glyph metrics pushed it above the row instead of
   sitting inline with the blanks around it. Same height/line-height/vertical-align as .gap
   so a word mixing blanks and shown signs reads as one row. */
.cuneiform .cuneiform-sign { display: inline-block; height: 1.5em; line-height: 1.4; vertical-align: baseline; }
/* .determinative (base.html) shifts its text up with position:relative/top:-0.5em, which
   crowds the line above when list items sit flush against each other -- extra top margin
   here, not on .determinative itself, so every OTHER use of .determinative (inline in a
   word, the Signs group's bracketed list) keeps its current spacing. */
#other-signs-list li { margin-top: 0.5em; }
.sign-glyph { font: inherit; padding: 0 0.1em; border: none; background: transparent; cursor: pointer; min-width: 24px; min-height: 24px; }
.sign-glyph[aria-pressed="true"] { outline: 3px solid #005a9c; }
.sign-glyph.hit { font-weight: bold; }
.sign-glyph.hit::after { content: " ✓"; color: #1a7f37; font-size: 0.6em; vertical-align: super; }
.missed, .wrong-click { font-size: 0.6em; margin-left: 0.2em; }
.missed { color: #a4262c; }
.transliteration { display: block; font-style: italic; }
.sign-name { font-style: italic; }
.gloss { display: block; color: #444; }

/* Matches features/flashcards/static/flashcards/session.css's #session-complete-modal. */
#group-complete-modal {
  position: relative;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  padding: 2rem;
  max-width: 24rem;
  text-align: center;
  background: #fdfbf6;
}
#group-complete-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
#group-complete-modal a { display: inline-block; margin: 0 0.75rem; }
#group-complete-modal h2 { margin-top: 0; }
#close-group-modal {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #5a4d38;
}
#close-group-modal:hover, #close-group-modal:focus-visible { color: #000; }