/* Introduction to Cuneiform (Hittite lesson 0). The .intro-glyph font stack lives in
   word_sentence_exercises/cuneiform_font.css; .option comes from exercises/grid.css. */
.intro-glyph { font-size: 1.5em; line-height: 1.2; }
.intro-word { font-size: 1.3em; font-weight: bold; }
.intro-cuneiform { margin-bottom: 0.2em; }
.intro-cuneiform .intro-glyph + .intro-glyph { margin-left: 0.2em; }  /* one unit per sign */
/* The page focuses these for screen readers (the instruction line after an in-page
   transition, the completion heading at the end); they are not tab stops, so neither that
   focus nor a click on them draws a box. */
.intro-question:focus, #complete-heading:focus { outline: none; box-shadow: none; }
.intro-error { color: var(--error); }

.intro-table { border-collapse: collapse; margin: 1em 0; max-width: 100%; }
.intro-table th, .intro-table td { border: 1px solid var(--control-line); padding: 0.3em 0.6em; text-align: center; }
/* Enclitics part B: each sign of a word is an inline control in the running text, no button
   chrome; hover and focus draw a 1px box just around it. */
.intro-enclitic-word { text-align: left; font-size: 1.1em; }
.intro-sign { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0 0.08em;
              cursor: pointer; }
#intro .intro-sign:hover, #intro .intro-sign:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; box-shadow: none; }
/* The first phase gives the enclitics: a thin underline (no layout shift). The student's
   selection is a dashed box plus a tint, so it never relies on the underline or on colour. */
.intro-sign.intro-given { text-decoration: underline 1px; text-underline-offset: 0.2em; }
.intro-sign[aria-pressed="true"] { outline: 1px dashed var(--ink); outline-offset: 1px; background: var(--surface-raised); }
.intro-sign .verdict-icon { position: static; font-size: 0.7em; vertical-align: super; margin-left: 0.1em; }
/* A right answer, picked or missed, gets a dashed box (the selection box is a state of
   aria-pressed, which a missed answer never has), so it is never shown by colour alone. */
.intro-sign.correct { font-weight: bold; background: var(--success-bg); text-decoration: underline 2px var(--success);
                      outline: 2px dashed var(--success); outline-offset: -1px; }  /* inside: separators stay clear */
.intro-sign.incorrect { background: var(--error-bg); }
.intro-sign.correct .verdict-icon { color: var(--success); }
/* Practice Sign Types: a sign left in the word. */
.sign-chip.missed { background: var(--surface-raised); }
.sign-chip.missed .verdict-icon { color: var(--success); }
.intro-sign.incorrect .verdict-icon { color: var(--error); }

/* Focus: a thin dark outline just outside the control (2px, 2px off it), clear of the
   question text beside the count input. A pressed .option (grid.css) or .sign-chip keeps its
   3px blue selection outline, so its focus shows as a 2px ring just inside it instead. */
#intro button:focus-visible, #intro input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
#intro button[aria-pressed="true"]:not(.correct):not(.incorrect):not(.intro-sign):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--ink);
}
#n { margin: 0.4em 0 0 0.4em; }  /* clear of the question beside or above it */
/* Selected = outline plus a check mark, never color alone (until graded: then the verdict
   icon takes the corner). */
.option[aria-pressed="true"]:not(.correct):not(.incorrect)::after, .sign-chip[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: 0.1em; right: 0.3em; font-size: 0.8em;
}
.sign-chip { position: relative; font-size: 1em; padding: 0.3em 1.4em 0.3em 0.6em; margin: 0.2em;
             cursor: grab; }
.sign-chip[aria-pressed="true"] { outline: 3px solid var(--focus); }
/* Graded signs, marked as the grid marks options; a misplaced one names its right box. */
.sign-chip.correct { font-weight: bold; background: var(--success-bg); outline: 3px solid var(--success); }
.sign-chip.incorrect { background: var(--error-bg); }
.sign-chip .verdict-icon { position: absolute; top: 0.1em; right: 0.3em; font-size: 0.8em; }
.sign-chip.correct .verdict-icon { color: var(--success); }
.sign-chip.incorrect .verdict-icon { color: var(--error); }
.chip-answer { font-size: 0.75em; margin-left: 0.4em; color: var(--ink); }

.intro-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; margin: 1em 0; }
.intro-box { border: 2px dashed var(--control-line); border-radius: 4px; padding: 0.5em; min-height: 4em;
             background: var(--surface-raised); min-width: 0; cursor: pointer; }
.intro-box[data-dest="word"] { grid-column: 1 / -1; }
.box-chips { display: flex; flex-wrap: wrap; min-height: 2.5em; }

/* Variant Forms: word and gloss, then the sign buttons, on one line; the two lines are set
   apart by space and a rule. Each sign's transliteration sits below its button. */
.intro-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1em; padding: 1em 0; }
.intro-line + .intro-line { border-top: 1px solid var(--control-line); margin-top: 0.5em; }
.intro-line-word { margin: 0; font-size: 1.15em; }
.intro-signs { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; padding: 0; margin: 0; }
.intro-signs li { display: flex; flex-direction: column; align-items: center; gap: 0.2em; }

#feedback { border-left: 4px solid var(--ink); padding: 0.4em 0.8em; margin: 1em 0; }
#feedback p { margin: 0.3em 0; }
#toggle-explanation { margin: 0 0 1em 0.8em; }
/* Explanation faces: Variant Forms shows one letter in a sans-serif and a serif face. */
.intro-sans { font-family: sans-serif; }
.intro-serif { font-family: serif; }
#prompt button, .intro-actions button { margin: 0.3em 0.5em 0.3em 0; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; }
#try-again { font-size: 1em; padding: 0.4em 1.2em; }  /* sized like #submit (grid.css) */

/* Forced colors drop box-shadow: focus becomes a system-color outline set off from the
   element, and selection moves to a border so both cues show at once. */
@media (forced-colors: active) {
  #intro button:focus-visible, #intro input:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  .option[aria-pressed="true"], .sign-chip[aria-pressed="true"] { border: 3px solid ButtonText; }
}

@media (max-width: 600px) {
  .intro-boxes { grid-template-columns: 1fr; }
}