/* Find the Pivot -- the deck UI.
 *
 * Loaded by every deck page (play.html, angina.html and any future batch).
 * Tokens come from brand.css; nothing here declares a colour of its own.
 * A batch page is a shell, so anything that would otherwise be copied into
 * a second deck page belongs in this file.
 */

/* The deck sits in a reading-width column under the shared brand bar. */
.deck-wrap {
  padding: 1.25rem 1rem 2rem;
  display: flex;
  justify-content: center;
}

.game {
  background: var(--card);
  padding: 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: var(--maxw-read);
  width: 100%;
}

.game header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
}
.game h1 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.meta { font-size: 0.85rem; color: var(--ink-faint); }

/* A contained horizontal scroll strip -- this never adds to the page's
   own scrollWidth, so it doesn't fight the no-horizontal-scroll rule the
   stem itself has to honour at 360px. */
.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.15rem 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.nav-item {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nav-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
/* Reuses the pivot palette -- the same green a correctly-found pivot
   already turns, so "solved" doesn't invent a fourth colour. */
.nav-item.solved {
  background: var(--pivot-bg);
  color: var(--pivot-ink);
  border-color: var(--pivot-line);
}
/* box-shadow rather than a border-width change: it doesn't reflow the
   button, so the strip doesn't jiggle as the current case moves. */
.nav-item[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.prompt {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-inline-start: 3px solid var(--accent);
  padding: 0.8rem 1rem;
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* The stem reads as continuous prose -- a clinical stem, not a list of
   options. The generous line-height is doing real work: it gives each
   wrapped line enough vertical room to be a comfortable thumb target
   without breaking the sentences apart. */
.stem {
  font-size: 1.1rem;
  line-height: 2.4;
  margin: 0;
}

/* Inline spans rather than <button>: an inline-level button does not wrap
   reliably across engines, and these sentences always wrap on a phone.
   role="button" + tabindex keeps the semantics and keyboard behaviour. */
.clause {
  /* Vertical padding, not line-height, is what makes an inline span
     tappable: the hit area is the font box plus padding. Sized to just
     under the line box so bands are near-contiguous without overlapping. */
  padding: 0.6rem 0.3rem;
  border-radius: 5px;
  cursor: pointer;
  /* Without this the background, padding and radius apply only to the
     first and last line fragment, and the highlight tears mid-sentence. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Quiet but present at rest: there is no hover on a touchscreen, so the
     affordance cannot depend on one -- while an underline under every
     sentence at full strength turns the stem into noise. The breaks
     between runs also show where one tappable finding ends. */
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-faint) 50%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.clause:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-bottom-color: var(--ink);
}
.clause:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Marks persist: the trail of what you tried is the point. */
.clause.pivot {
  background: var(--pivot-bg); color: var(--pivot-ink);
  border-bottom-color: var(--pivot-line);
  font-weight: 600;
}
.clause.contributory {
  background: var(--contrib-bg); color: var(--contrib-ink);
  border-bottom-color: var(--contrib-line);
}
.clause.noise {
  background: var(--noise-bg); color: var(--noise-ink);
  border-bottom-color: var(--noise-line);
}
.clause[aria-disabled="true"] { cursor: default; }

/* An answer, not a finding -- so it sits outside the stem and is dashed
   rather than underlined. A learner must be able to say the plan is right,
   otherwise every case silently promises that something is wrong with it. */
.none-option {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  font: inherit;
  text-align: start;
  color: var(--ink);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.none-option:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: var(--ink);
}
.none-option:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.none-option.pivot {
  background: var(--pivot-bg); color: var(--pivot-ink);
  border: 1px solid var(--pivot-line); font-weight: 600;
}
.none-option.contributory {
  background: var(--contrib-bg); color: var(--contrib-ink);
  border: 1px solid var(--contrib-line);
}
.none-option.noise {
  background: var(--noise-bg); color: var(--noise-ink);
  border: 1px solid var(--noise-line);
}
.none-option[aria-disabled="true"] { cursor: default; }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.75;
  margin-inline-end: 0.45rem;
}

.feedback {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.feedback:empty { display: none; }
.feedback.pivot { background: var(--pivot-bg); color: var(--pivot-ink); border-color: var(--pivot-line); }
.feedback.contributory { background: var(--contrib-bg); color: var(--contrib-ink); border-color: var(--contrib-line); }
.feedback.noise { background: var(--noise-bg); color: var(--noise-ink); border-color: var(--noise-line); }

.resolution {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 8px;
  font-size: 0.96rem;
}
.resolution:empty { display: none; }
.resolution h2 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Solving a case moves focus onto this heading so a screen reader lands at the
   top of the explanation rather than being left in silence below the feedback
   (see focusResolutionHeading in game.js). That focus is programmatic and, for
   a tap or a mouse click, must paint nothing -- a ring appearing on a heading
   nobody focused would read as a rendering fault. :focus-visible still matches
   when the pivot was activated from the keyboard, so that reader keeps a ring
   and can see where the caret went. Same accent and offset as every other
   focus ring in the site, so it works in both schemes and in RTL unchanged. */
.resolution h2:focus { outline: none; }
.resolution h2:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The structured resolution reads as three beats -- the rule, the criteria it
   turns on, then the trap -- because the complaint about the old single
   paragraph was that none of it could be scanned. The spacing between them is
   what does that work, so it is deliberately larger than ordinary paragraph
   spacing. */
.res-lead {
  margin: 0;
  font-weight: 600;
}

.res-points {
  margin: 0.75rem 0 0;
  /* Room for the marker only -- an indent big enough to notice eats the line
     length a 360px screen has left. */
  padding-inline-start: 1.15rem;
}
.res-points li {
  margin-top: 0.5rem;
  /* An unbroken lab value or drug name would otherwise push the panel wider
     than the viewport. */
  overflow-wrap: break-word;
}
.res-points li:first-child { margin-top: 0; }

/* Same chip family as .tag, but this one is filled: it has to be readable as a
   verdict at a glance, next to sibling points that carry no chip at all. The
   word inside carries the meaning, so the colour is reinforcement rather than
   the signal. */
.res-state {
  display: inline-block;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0 0.4rem;
  border-radius: 999px;
  margin-inline-end: 0.45rem;
  white-space: nowrap;
}
.res-state.met {
  background: var(--pivot-bg);
  color: var(--pivot-ink);
  border: 1px solid var(--pivot-line);
}
.res-state.failed {
  background: var(--noise-bg);
  color: var(--noise-ink);
  border: 1px solid var(--noise-line);
}

/* The trap is a different kind of statement from the points above it -- what
   pulled you the wrong way -- so it is ruled off rather than left to read as
   one more bullet's continuation. */
.res-trap {
  margin: 0.9rem 0 0;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--line);
}

.next {
  margin-top: 1.2rem;
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  min-height: 48px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.next:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.next[hidden] { display: none; }

.score {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}

.error {
  padding: 1rem;
  border: 1px solid var(--noise-line);
  background: var(--noise-bg);
  color: var(--noise-ink);
  border-radius: 8px;
}
.error code {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}


@media (max-width: 420px) {
  .deck-wrap { padding: 0.75rem 0.5rem 1.5rem; }
  .game { padding: 1rem 0.85rem; border-radius: 10px; }
  /* Tap targets stay 44px -- only the gap between them shrinks. */
  .nav { gap: 0.3rem; }
}