:root {
  /* Colours, radii, key size come from tokens.css (generated from design/tokens.json). */
  --pad-x: 24px;
  --font: var(--font-ui);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
}

body.simplified {
  --key: 96px;
}


.app {
  position: relative;
  min-height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100dvh;
  padding: 54px var(--pad-x) 32px;
}

[hidden] {
  display: none !important;
}

/* Latin headings and the wordmark use the display face (Fraunces); Indic headings stay sans (UX-02). */
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

:root[lang='hi'] h1,
:root[lang='hi'] h2,
:root[lang='mr'] h1,
:root[lang='mr'] h2 {
  font-family: var(--font-ui);
  font-weight: 700;
}

.brand {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Compact chrome wordmark (DEC-20). Splash keeps .brand at 64px. */
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

/* Brand lockup stays Fraunces + Anek in every UI language (DEC-20). Mixed
   strings such as परिवार · Onward pick Anek per Devanagari glyph. */

.tagline {
  margin: 0;
  font-size: 18px;
}

.lockup {
  margin: 0;
  font-family: 'Anek Devanagari', var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-action);
}

.muted {
  margin: 0;
  color: var(--color-ink-muted);
  font-weight: 400;
}

.small {
  font-size: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.progress {
  margin: 0;
  color: var(--color-progress);
  font-weight: 500;
}

.splash-spacer {
  height: 160px;
  flex-shrink: 0;
}

.grow {
  flex: 1;
}

.chrome-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-primary,
.btn-secondary,
.key {
  font-family: inherit;
  cursor: pointer;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 72px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: 20px;
  font-weight: 700;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-quiet:disabled,
.key:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  min-width: 56px;
  padding: 0 24px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 500;
}

.btn-block {
  width: 100%;
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-ink-muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.btn-quiet.btn-block {
  width: 100%;
  justify-content: center;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
  fill: none;
}

.splash-roles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.role-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.role-link:hover,
.btn-icon:hover {
  color: var(--color-ink);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav-item[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
}

.player-pick.pick-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.pick-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.clinic-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.clinic-head .wordmark {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-align: right;
}

.session-title-start {
  text-align: left;
}

.present-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.digit {
  margin: 0;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  min-height: 1em;
}

.answer-bar {
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 16px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hint-line {
  margin: 0;
  color: var(--color-progress);
  font-size: 16px;
  font-weight: 500;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.key {
  width: var(--key);
  height: var(--key);
  border: 2px solid var(--color-action);
  border-radius: var(--radius-key);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 32px;
  font-weight: 700;
}

.last-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.complete-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(247, 241, 232, 0.8);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  z-index: 20;
}

.overlay[hidden] {
  display: none;
}

.overlay-card {
  width: min(100%, 592px);
  background: var(--color-surface);
  border: 2px solid var(--color-action);
  border-radius: var(--radius-btn);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overlay-card h2 {
  font-size: 28px;
}

button:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

@media (max-width: 400px) {
  :root {
    --key: 84px;
  }

  .digit {
    font-size: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.screen-caregiver {
  overflow-y: auto;
}

.player-grid {
  display: grid;
  gap: 12px;
}

.player-pick {
  text-align: left;
  min-height: 72px;
  padding: 16px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.player-pick[aria-pressed='true'] {
  border-color: var(--color-action);
}

.player-pick .pick-name {
  font-size: 20px;
  font-weight: 700;
}

.week-strip {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.week-day {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 2px solid var(--color-action);
  background: var(--color-ground);
  color: var(--color-ink-muted);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-day.done {
  background: var(--color-action);
  color: var(--color-action-text);
}

.cg-actions {
  display: flex;
  gap: 12px;
}

.cg-actions .btn-secondary,
.cg-actions .btn-primary,
.cg-actions .btn-quiet {
  flex: 1;
}

.caregiver-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caregiver-row {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 16px 20px;
}

.field-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.field {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 18px;
}

.field-area {
  min-height: 160px;
  resize: vertical;
  line-height: 1.45;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 8px 0 16px;
}

.mail-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mail-key-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mail-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 0 0 min(78%, 240px);
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--color-line, #d5cdc2);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mail-key-name {
  font-weight: 600;
}

.mail-key-about {
  font-size: 13px;
  color: var(--color-muted, #5c6b63);
}

.mail-key[aria-pressed='true'] {
  border-color: var(--color-action);
  box-shadow: inset 0 0 0 1px var(--color-action);
}

.mail-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.mail-toolbar-fields,
.mail-actions {
  min-width: 0;
}

.mail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 8px 0 4px;
  background: var(--color-ground);
}

.mail-actions .btn-primary,
.mail-actions .btn-icon {
  width: auto;
  flex: 1 1 140px;
  min-height: 44px;
  margin: 0;
}

.mail-actions .hint-line,
.mail-actions .muted {
  flex: 1 1 100%;
  margin: 0;
}

.mail-var-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.mail-var {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--color-line, #d5cdc2);
  border-radius: 999px;
  background: var(--color-ground);
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.mail-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}

.mail-editor-fields,
.mail-editor-preview {
  min-width: 0;
}

.mail-workspace[data-mail-pane='edit'] .mail-editor-preview,
.mail-workspace[data-mail-pane='preview'] .mail-editor-fields {
  display: none;
}

.mail-workspace[data-mail-body='text'] [data-mail-html],
.mail-workspace[data-mail-body='html'] [data-mail-text] {
  display: none;
}

.mail-preview {
  display: block;
  width: 100%;
  min-height: 280px;
  margin: 0;
  border: 1px solid var(--color-line, #d5cdc2);
  border-radius: 12px;
  background: #fff;
}

@media (min-width: 640px) {
  .mail-key-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .mail-key {
    flex: unset;
  }
}

@media (min-width: 960px) {
  .mail-pane-switch,
  .mail-pane-switch.chip-row {
    display: none;
  }

  .mail-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    align-items: start;
    gap: 24px;
  }

  .mail-actions {
    position: static;
    padding: 0;
  }

  .mail-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .mail-workspace[data-mail-pane='edit'] .mail-editor-preview,
  .mail-workspace[data-mail-pane='preview'] .mail-editor-fields {
    display: block;
  }

  .mail-editor-preview {
    position: sticky;
    top: 16px;
  }

  .mail-preview {
    min-height: min(70vh, 640px);
    height: 70vh;
  }
}

.field-compact {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 16px;
}

/* Module editor rows: label left, quiet action right */
.editor-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.editor-row-head .muted {
  margin: 0;
}

/* Planned games: picked mini-chips, then a collapsed finder */
.planned-picked:empty::before {
  content: 'None yet.';
  font-size: 14px;
  color: var(--color-ink-muted);
}

.planned-picked .pick-mini {
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 0;
  padding: 6px 10px 6px 12px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-align: left;
}

.planned-picked .pick-mini .pick-name {
  font-size: 14px;
  font-weight: 600;
}

.planned-picked .pick-mini .pick-x {
  color: var(--color-ink-muted);
  font-size: 16px;
  line-height: 1;
}

.planned-finder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-btn);
  background: var(--color-ground);
}

.planned-finder-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
  gap: 8px;
}

.planned-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

button.planned-row {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.planned-row[aria-pressed='true'] {
  border-color: var(--color-action);
}

.planned-row .planned-name {
  font-size: 15px;
  font-weight: 600;
}

.planned-row .planned-meta {
  grid-column: 1;
  font-size: 13px;
  color: var(--color-ink-muted);
}

.planned-row .fit-dots {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-action);
  white-space: nowrap;
}

/* Try the game: Player view in a dialog */
.try-dialog {
  width: min(100vw - 32px, 520px);
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-btn);
  background: var(--color-ground);
  color: var(--color-ink);
}

.try-dialog::backdrop {
  background: rgba(31, 41, 36, 0.45);
}

.try-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.try-head-copy {
  grid-column: 1;
}

.try-head-copy .muted {
  margin: 0;
}

.try-head h2 {
  margin: 0;
  font-size: 20px;
}

.try-select {
  grid-column: 1;
}

.try-head .btn-icon {
  grid-column: 2;
  grid-row: 1;
}

.try-frame-wrap {
  background: var(--color-surface);
  padding: 8px;
}

.try-frame {
  display: block;
  width: 100%;
  height: min(720px, calc(100vh - 190px));
  border: 0;
  border-radius: 12px;
  background: var(--color-ground);
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.role-switch-top {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px var(--pad-x);
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  background: var(--color-ground);
  border-bottom: 2px solid var(--color-surface);
}

.role-switch-top[hidden] {
  display: none;
}

.role-switch-top .nav-item {
  width: auto;
  flex: 0 1 auto;
}

.app.has-role-switch[data-shell] .screen {
  min-height: 0;
  padding-top: 20px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-row .player-pick {
  flex: 1 1 calc(33.33% - 8px);
  min-width: 96px;
  min-height: 56px;
  justify-content: center;
  text-align: center;
}

.help-body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 20px;
  line-height: 1.5;
}

.help-word {
  border-radius: 4px;
}

.help-word.is-spoken {
  background: var(--color-notice-ground);
  color: var(--color-notice-ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.clinic-speak-preview {
  gap: 8px;
}

.clinic-speak-preview .help-body {
  font-size: 16px;
}

/* Player Help (HELP-07): article first, quiet controls around it. */
.help-article {
  gap: 12px;
}

.help-article:empty,
.help-article .help-body:empty {
  display: none;
}

/* Language: one selectable bar. Scrolls sideways on a phone instead of wrapping. */
.help-lang-row {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.help-lang-row::-webkit-scrollbar {
  display: none;
}

.help-lang-row .player-pick {
  flex: 1 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  justify-content: center;
}

.help-lang-row .player-pick[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
}

.help-lang-row .player-pick .pick-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.help-lang-row .player-pick.is-missing,
.chip-row .player-pick.is-missing {
  opacity: 0.55;
  box-shadow: inset 0 0 0 1px dashed currentColor;
}

.help-stop {
  min-height: 72px;
}

/* Two panes (HELP-08): games by module on the left, help on the right. Stacked on a phone, article first. */
.help-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.help-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.help-nav {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.help-nav-title {
  margin: 0;
}

.help-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.help-search .icon {
  color: var(--color-ink-muted);
}

.help-search-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.help-search-input:focus {
  outline: none;
}

.help-search:focus-within {
  box-shadow: 0 0 0 2px var(--color-focus);
}

.help-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.help-nav-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-nav-empty {
  margin: 8px 4px 0;
}

.help-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-sm);
  list-style: none;
  cursor: pointer;
  color: var(--color-ink-muted);
}

.help-group-toggle::-webkit-details-marker {
  display: none;
}

.help-group-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.help-group[open] .help-group-toggle::after {
  margin-top: 2px;
  transform: rotate(225deg);
}

.help-group-name {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunk);
  font-size: 12px;
  font-weight: 600;
}

.help-nav .game-other {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  gap: 12px;
}

.help-nav .game-other:hover,
.help-nav .game-other:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface);
}

.help-nav .game-other[aria-current='true'] {
  color: var(--color-ink);
  font-weight: 700;
  background: var(--color-brand-tint);
}

.help-nav-compact .game-other {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 15px;
}

.help-nav-compact .help-group-name {
  font-size: 12px;
}

.help-nav-compact .help-nav-groups {
  gap: 4px;
}

.help-nav-compact .help-search {
  min-height: 40px;
  padding: 0 12px;
}

.help-nav-compact .help-search-input,
.help-nav-compact .help-group-toggle {
  min-height: 36px;
  font-size: 15px;
}

.help-nav.help-nav-compact {
  order: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.app[data-shell='caregiver'] .help-lang-row .player-pick {
  min-height: 36px;
  padding: 4px 12px;
}

@media (min-width: 768px) {
  /* Beats the per-shell 768px caps declared later in this file. */
  .app.layout-help,
  .app.layout-help[data-shell] {
    max-width: 1100px;
  }

  .screen-help.is-two-pane .help-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .screen-help.is-two-pane .help-nav {
    order: 0;
    margin-top: 0;
    padding: 12px;
    border-top: 0;
    background: var(--color-surface);
    border-radius: var(--radius-btn);
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }

  .screen-help.is-two-pane .help-search {
    background: var(--color-ground);
  }

  .screen-help.is-two-pane .help-nav .game-other:hover,
  .screen-help.is-two-pane .help-nav .game-other:focus-visible {
    background: var(--color-surface-sunk);
  }

  .screen-help.is-two-pane .help-lang-row .player-pick {
    flex: 1 1 0;
  }
}

.app[data-shell='caregiver'] .help-body {
  font-size: 18px;
}

.clinic-help,
.clinic-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.screen-clinic {
  overflow-y: auto;
}

.clinic-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.clinic-sidebar,
.clinic-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.drawer-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.drawer-tools .btn-icon {
  flex: 0 0 auto;
  width: auto;
}

.drawer-pin {
  margin-left: auto;
  min-width: 44px;
  padding: 0 8px;
}

.drawer-pin span {
  display: none;
}

.clinic-drawer-backdrop {
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(31, 41, 36, 0.36);
}

.drawer-collapse {
  display: none;
}

.drawer-pin .icon {
  width: 14px;
  height: 14px;
}

.drawer-pin[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
}

.app.nav-pinned {
  max-width: none;
  width: 100%;
}

.app.nav-pinned .drawer-open-btn,
.app.nav-pinned .drawer-close-btn,
.app.nav-pinned .clinic-drawer-backdrop {
  display: none !important;
}

.app.nav-pinned .drawer-collapse {
  display: inline-flex;
}

.app.nav-pinned .clinic-shell {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  flex: 1;
  min-width: 0;
}

.app.nav-pinned.nav-collapsed .clinic-shell {
  grid-template-columns: 64px minmax(0, 1fr);
}

.app.nav-pinned .clinic-sidebar {
  position: sticky;
  top: 16px;
  width: auto;
  max-width: none;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  box-shadow: none;
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 12px;
}

.app.has-role-switch.nav-pinned .clinic-sidebar {
  top: 64px;
}

.app.nav-collapsed .clinic-sidebar {
  align-items: center;
  padding: 10px 6px;
}

.app.nav-collapsed .clinic-sidebar .drawer-copy,
.app.nav-collapsed .clinic-sidebar .nav-item span,
.app.nav-collapsed .clinic-sidebar .btn-icon span,
.app.nav-collapsed .clinic-sidebar .pick-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.app.nav-collapsed .clinic-sidebar .nav-item,
.app.nav-collapsed .clinic-sidebar .btn-icon,
.app.nav-collapsed .clinic-sidebar .player-pick {
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}

.app.nav-collapsed .clinic-sidebar .drawer-tools {
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.app.nav-collapsed .clinic-sidebar .drawer-pin {
  margin-left: 0;
}

.app.nav-collapsed .clinic-nav-stack {
  align-items: center;
  width: 100%;
}

#clinicInvite {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#clinicInvite[hidden] {
  display: none;
}

.clinic-join-url {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.9rem;
}

#clinicResetShare,
#opsOwnerJoin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#clinicResetShare[hidden],
#opsOwnerJoin[hidden] {
  display: none;
}

#clinicCaseloadPane .progress-head .btn-primary {
  width: auto;
  min-height: 56px;
  padding: 0 18px;
}

.clinic-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.clinic-sheet.try-dialog {
  width: min(calc(100vw - 24px), 440px);
  max-width: 440px;
  max-height: min(calc(100dvh - 24px), 760px);
  margin: auto;
  overflow: hidden;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-md);
  background: var(--color-ground);
  box-shadow: 0 16px 40px rgba(31, 41, 36, 0.18);
}

.clinic-sheet[open] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clinic-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-line);
}

.clinic-sheet-copy {
  min-width: 0;
}

.clinic-sheet-copy h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(20px, 4.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-ligatures: none;
  overflow-wrap: anywhere;
}

.clinic-sheet-copy .muted {
  margin: 6px 0 0;
}

.clinic-sheet-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.clinic-progress-sheet.try-dialog,
.clinic-assign-sheet.try-dialog {
  width: min(calc(100vw - 16px), 720px);
  max-width: 720px;
  max-height: min(calc(100dvh - 16px), 860px);
}

.clinic-sheet.clinic-sheet-inline {
  display: flex;
  flex-direction: column;
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.clinic-sheet.clinic-sheet-inline .clinic-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 0 0 12px;
  border-bottom: 0;
}

.clinic-sheet.clinic-sheet-inline .clinic-sheet-copy {
  flex: 1 1 160px;
  min-width: 0;
}

.clinic-sheet.clinic-sheet-inline .clinic-sheet-copy h2 {
  font-size: clamp(22px, 4vw, 28px);
  overflow-wrap: anywhere;
}

.clinic-sheet.clinic-sheet-inline .clinic-sheet-head-actions {
  flex: 1 1 100%;
  justify-content: flex-start;
}

.clinic-sheet.clinic-sheet-inline .clinic-sheet-body {
  padding: 0;
}

.clinic-sheet.clinic-sheet-inline .btn-dialog-close {
  display: none;
}

.clinic-assign-sheet.try-dialog {
  font-size: 13.5px;
}

.clinic-assign-sheet:not(.clinic-sheet-inline) .clinic-sheet-copy h2 {
  font-size: clamp(15px, 3.3vw, 18px);
  overflow-wrap: anywhere;
}

.clinic-assign-sheet .small {
  font-size: 12px;
}

.clinic-assign-sheet .btn-dialog-close {
  font-size: 11px;
}

.clinic-assign-sheet .player-pick .pick-name {
  font-size: 15px;
}

.clinic-assign-sheet .clinic-assign-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.clinic-assign-sheet #clinicAssignPlayers,
.clinic-assign-sheet #clinicAssignPlayers .progress-player-field {
  min-width: min(100%, 220px);
  max-width: none;
  width: auto;
  flex: 1 1 220px;
}

.clinic-assign-sheet .clinic-assign-search {
  min-width: min(100%, 220px);
  width: auto;
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--color-action);
  background: var(--color-surface);
}

.clinic-assign-sheet .clinic-assign-search .help-search-input {
  min-height: 40px;
  font-size: 12px;
}

.clinic-assign-sheet .clinic-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clinic-assign-game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.clinic-assign-game-head .muted {
  margin: 0;
}

.clinic-assign-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.clinic-assign-bulk[hidden] {
  display: none;
}

.clinic-assign-bulk-btn {
  width: auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.clinic-assign-bulk-btn:hover:not(:disabled) {
  border-color: var(--color-action);
}

.clinic-assign-bulk-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.clinic-assign-sheet .clinic-assign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clinic-assign-sheet .clinic-assign-chips .player-pick {
  min-height: 44px;
  padding: 10px 14px;
}

.clinic-assign-sheet .player-grid {
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .clinic-assign-sheet .player-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.clinic-assign-sheet .player-pick.pick-row {
  min-height: 56px;
  padding: 12px 14px;
}

.clinic-assign-game {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.clinic-assign-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.clinic-assign-game .pick-copy,
.clinic-assign-game .pick-name {
  min-width: 0;
}

.clinic-assign-game .pick-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-assign-game-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.clinic-assign-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.clinic-assign-tool .icon {
  width: 14px;
  height: 14px;
}

.clinic-assign-tool:hover {
  background: var(--color-ground);
}

.clinic-assign-peek-body {
  min-width: 0;
}

.clinic-assign-peek-help-title {
  margin: 0 0 8px;
  font-weight: 700;
}

.clinic-assign-peek-help-body {
  margin: 0;
  white-space: pre-wrap;
}

.clinic-assign-fit {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

.clinic-assign-fit div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.clinic-assign-fit dt {
  font-size: 12px;
  font-weight: 600;
}

.clinic-assign-fit dd {
  margin: 0;
}

.clinic-progress-sheet .btn-primary {
  width: auto;
  min-height: 44px;
  padding: 0 14px;
}

@media (min-width: 960px) {
  .clinic-progress-sheet.try-dialog:not(.clinic-sheet-inline),
  .clinic-assign-sheet.try-dialog:not(.clinic-sheet-inline) {
    width: min(calc(100vw - 32px), 880px);
    max-width: 880px;
  }
}

.clinic-assign-sheet.try-dialog.clinic-sheet-inline,
.clinic-progress-sheet.try-dialog.clinic-sheet-inline {
  width: 100%;
  max-width: none;
  max-height: none;
}

@media (max-width: 639px) {
  .clinic-progress-sheet:not(.clinic-sheet-inline) .clinic-sheet-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .clinic-progress-sheet:not(.clinic-sheet-inline) .clinic-sheet-head-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .clinic-progress-sheet:not(.clinic-sheet-inline) .clinic-sheet-head-actions .btn-primary {
    flex: 1 1 auto;
  }

  .clinic-progress-sheet:not(.clinic-sheet-inline) .clinic-sheet-head .btn-dialog-close {
    grid-column: 2;
    grid-row: 1;
  }
}

.clinic-progress-sheet.clinic-sheet-inline .clinic-sheet-head {
  flex-direction: column;
  align-items: stretch;
}

.clinic-progress-sheet.clinic-sheet-inline .clinic-sheet-copy {
  flex: 1 1 auto;
}

.clinic-progress-sheet.clinic-sheet-inline .clinic-sheet-head-actions .btn-primary {
  width: auto;
  max-width: 100%;
}

.clinic-progress-sheet.clinic-sheet-inline .clinic-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
}

.clinic-progress-sheet.clinic-sheet-inline .progress-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.clinic-progress-sheet.clinic-sheet-inline .progress-player-field {
  min-width: min(100%, 220px);
  max-width: 360px;
  flex: 1 1 220px;
}

@media (max-width: 719px) {
  .clinic-progress-sheet.clinic-sheet-inline .clinic-sheet-head-actions .btn-primary {
    width: 100%;
  }

  .clinic-progress-sheet.clinic-sheet-inline .progress-player-field {
    max-width: none;
    flex: 1 1 100%;
  }
}

.btn-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-dialog-close:hover {
  color: var(--color-ink);
  background: var(--color-surface-sunk);
}

.clinic-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.clinic-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clinic-sheet-actions[hidden] {
  display: none;
}

.clinic-sheet-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  min-width: 0;
  padding: 8px 6px;
  border: 2px solid var(--color-control-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.clinic-sheet-action .icon {
  width: 20px;
  height: 20px;
}

.clinic-sheet-action-inline {
  flex-direction: row;
  min-height: 44px;
  padding: 0 12px;
}

.clinic-sheet-form,
.clinic-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.clinic-sheet-form {
  gap: 14px;
}

.clinic-sheet-section {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.clinic-sheet .field {
  min-height: 48px;
  font-size: 16px;
}

.clinic-assign-sheet .field,
.clinic-assign-sheet .field-compact {
  font-size: 12px;
}

.clinic-sheet .btn-primary {
  width: 100%;
}

.clinic-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clinic-sheet-foot .btn-primary {
  flex: 1 1 160px;
}

.clinic-sheet-url {
  word-break: break-all;
  font-size: 14px;
}

.sheet-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sheet-chip {
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--color-control-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.sheet-chip[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: var(--color-action);
}

.sheet-chip:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (min-width: 640px) {
  .clinic-sheet-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-ink);
}

.field-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-action);
}

/* Shared sign-in (Clinic + Operator): one card, one primary, secondary links below. */
.screen-signin {
  align-items: center;
}

.screen-signin .session-header {
  max-width: 420px;
}

.signin-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.signin-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
}

.signin-card #signInTenantStep {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
}

.signin-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.signin-glyph {
  width: 32px;
  height: 32px;
  color: var(--color-action);
}

.signin-card .field-label {
  margin-top: 6px;
}

.app .screen-signin .btn-primary {
  min-height: 56px;
  margin-top: 8px;
  font-size: 17px;
}

.signin-card .btn-primary .icon {
  color: var(--color-action-text);
}

.signin-card .hint-line {
  font-size: 15px;
}

.signin-card .player-pick {
  background: var(--color-ground);
}

.signin-card .player-pick:hover:not(:disabled) {
  border-color: var(--color-action);
}

.signin-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.signin-secondary .btn-icon,
.signin-reset .btn-icon {
  width: auto;
  align-self: flex-start;
}

.signin-reset {
  border: 2px solid var(--color-surface);
  background: transparent !important;
}

.signin-card [hidden] {
  display: none !important;
}

#opsTenantInvite {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Operator: first login for an empty tenant. Quiet block under the tenant editor. */
.ops-owner-seed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--color-ground);
}

.ops-owner-seed .btn-icon {
  align-self: flex-start;
  width: auto;
}

.clinic-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clinic-nav-stack .player-pick,
.clinic-nav-stack .nav-item {
  flex: none;
  width: 100%;
  min-width: 0;
}

.clinic-export-row {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clinic-export-row.is-helping,
.card.is-helping,
button.ops-module-row.is-helping,
button.ops-module-row.is-editing,
button.ops-tenant-row.is-helping,
button.ops-tenant-row.is-editing {
  border: 2px solid var(--color-action);
}

.ops-module-board,
.clinic-module-board,
.ops-tenant-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ops-module-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ops-module-list-head .muted {
  margin: 0;
}

.ops-module-list-col,
.ops-module-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ops-module-editor {
  background: var(--color-surface);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  border: 2px solid transparent;
}

#clinicModuleCatalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}

#clinicModuleCreate.is-readonly #clinicModuleName {
  opacity: 0.72;
}

button.ops-module-row,
button.ops-tenant-row {
  appearance: none;
  width: 100%;
  margin: 0 0 8px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 2px solid transparent;
}

button.ops-module-row:focus-visible,
button.ops-tenant-row:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

#opsVoicePicks {
  flex-direction: column;
  align-items: stretch;
}

#opsVoicePicks .player-pick {
  justify-content: flex-start;
}

#opsTenantEditorKicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#opsTenantEditor.is-editing {
  border-color: var(--color-action);
}

#opsTenantSupport {
  flex-wrap: wrap;
}

/* Operator Audit: readable log, one sentence per row, grouped by day */
.ops-audit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ops-audit-head > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ops-audit-head .btn-icon {
  flex: 0 0 auto;
  margin-top: 4px;
}

.ops-audit-head .btn-icon:disabled {
  opacity: 0.5;
  cursor: default;
}

.ops-audit-filters:empty {
  display: none;
}

#opsAuditQuery {
  max-width: 480px;
}

#opsAuditCount:empty {
  display: none;
}

.ops-audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-audit-day {
  margin: 12px 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.ops-audit-day:first-child {
  margin-top: 0;
}

.ops-audit-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: start;
  padding: 10px 14px;
  border-radius: 16px;
  border-left: 4px solid transparent;
  background: var(--color-surface);
}

.ops-audit-row.is-break-glass {
  border-left-color: var(--color-progress);
}

.ops-audit-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--color-action);
}

.ops-audit-row.is-break-glass .ops-audit-glyph {
  color: var(--color-progress);
}

.ops-audit-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ops-audit-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ops-audit-meta {
  font-size: 14px;
}

.ops-audit-time {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}

.ops-audit-empty {
  padding: 16px 0;
}

.clinic-export-row .btn-quiet,
.clinic-export-row .btn-secondary,
.clinic-export-row .btn-icon,
.ops-help-banner .btn-secondary,
.ops-help-banner .btn-icon {
  align-self: flex-start;
  width: auto;
  min-height: 40px;
  min-width: 0;
  padding: 0 10px;
}

.screen-clinic .btn-primary,
.app[data-shell='caregiver'] .btn-primary,
.app[data-shell='clinic'] .btn-primary,
.app[data-shell='ops'] .btn-primary {
  min-height: 44px;
  font-size: 16px;
}

.app[data-shell='caregiver'] .btn-secondary,
.app[data-shell='clinic'] .btn-secondary,
.app[data-shell='ops'] .btn-secondary,
.screen-clinic .session-header .btn-secondary {
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
  font-size: 14px;
}

.app[data-shell='caregiver'] .screen,
.app[data-shell='clinic'] .screen,
.app[data-shell='ops'] .screen {
  gap: 12px;
  padding-top: 40px;
}

.app[data-shell='caregiver'] h1,
.app[data-shell='clinic'] h1,
.app[data-shell='ops'] h1 {
  font-size: 24px;
}

.app[data-shell='caregiver'] h2,
.app[data-shell='clinic'] h2,
.app[data-shell='ops'] h2 {
  font-size: 18px;
}

.app[data-shell='caregiver'] .field,
.app[data-shell='clinic'] .field,
.app[data-shell='ops'] .field {
  min-height: 44px;
  font-size: 16px;
}

.app[data-shell='caregiver'] .player-pick,
.app[data-shell='clinic'] .player-pick,
.app[data-shell='ops'] .player-pick {
  min-height: 44px;
  padding: 8px 12px;
}

.app[data-shell='caregiver'] .player-pick .pick-name,
.app[data-shell='clinic'] .player-pick .pick-name,
.app[data-shell='ops'] .player-pick .pick-name {
  font-size: 16px;
}

.app[data-shell='caregiver'] .chip-row .player-pick,
.app[data-shell='clinic'] .chip-row .player-pick,
.app[data-shell='ops'] .chip-row .player-pick {
  min-height: 36px;
  min-width: 0;
  flex: 0 1 auto;
  padding: 4px 10px;
}

.module-game-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--color-ground);
  border-radius: var(--radius-btn);
}

.module-game-filters > .muted {
  margin: 4px 0 0;
}

.module-game-filters > .muted:first-child {
  margin-top: 0;
}

.filter-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-pill-row .player-pick {
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}

.app[data-shell='clinic'] .filter-pill-row .player-pick,
.app[data-shell='ops'] .filter-pill-row .player-pick {
  min-height: 32px;
  padding: 4px 10px;
}

.filter-pill-row .player-pick[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: transparent;
}

.chip-row-games .player-pick,
.app[data-shell='clinic'] .chip-row-games .player-pick,
.app[data-shell='ops'] .chip-row-games .player-pick {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.chip-row-games .player-pick .pick-name,
.app[data-shell='clinic'] .chip-row-games .player-pick .pick-name,
.app[data-shell='ops'] .chip-row-games .player-pick .pick-name {
  font-size: 13px;
  font-weight: 600;
}

.chip-row-games .player-pick.is-alias,
.app[data-shell='clinic'] .chip-row-games .player-pick.is-alias,
.app[data-shell='ops'] .chip-row-games .player-pick.is-alias {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.chip-row-games .player-pick .pick-also,
.app[data-shell='clinic'] .chip-row-games .player-pick .pick-also,
.app[data-shell='ops'] .chip-row-games .player-pick .pick-also {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
}

.chip-row-games .player-pick[aria-pressed='true'],
.app[data-shell='clinic'] .chip-row-games .player-pick[aria-pressed='true'],
.app[data-shell='ops'] .chip-row-games .player-pick[aria-pressed='true'] {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: var(--color-action);
}

.module-game-actions {
  flex-wrap: wrap;
}

.module-game-actions .cg-actions {
  gap: 4px;
}

.module-game-actions .btn-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

#opsModuleGameCount:empty,
#clinicModuleGameCount:empty {
  display: none;
}

.app[data-shell='caregiver'] .week-day {
  min-height: 32px;
  font-size: 12px;
}

.app[data-shell='caregiver'] .card,
.app[data-shell='clinic'] .card,
.app[data-shell='ops'] .card,
.app[data-shell='caregiver'] .caregiver-row,
.app[data-shell='clinic'] .clinic-export-row,
.app[data-shell='ops'] .clinic-export-row {
  padding: 12px 16px;
  border-radius: 16px;
}

.app[data-shell='caregiver'] .cg-actions .btn-quiet,
.app[data-shell='caregiver'] .cg-actions .btn-icon,
.app[data-shell='caregiver'] .cg-actions .btn-primary,
.app[data-shell='clinic'] .cg-actions .btn-secondary,
.app[data-shell='clinic'] .cg-actions .btn-icon,
.app[data-shell='ops'] .cg-actions .btn-secondary,
.app[data-shell='ops'] .cg-actions .btn-icon {
  flex: 0 0 auto;
  width: auto;
}

.app[data-shell='caregiver'] .btn-primary .icon,
.app[data-shell='clinic'] .btn-primary .icon,
.app[data-shell='ops'] .btn-primary .icon {
  color: var(--color-action-text);
}

.app[data-shell='caregiver'] .wa-card {
  padding: 12px 16px;
}

.app[data-shell='caregiver'] .wa-body {
  font-size: 18px;
}

.ops-help-banner {
  gap: 12px;
}

.wa-card {
  background: var(--color-surface);
  border: 2px solid var(--color-action);
  border-radius: 8px 20px 20px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-from {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-action);
}

.wa-body {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.wa-meta {
  margin: 0;
  color: var(--color-ink-muted);
}

.game-catalog {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-card .btn-primary {
  margin-top: 8px;
}

.home-find {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
}

.home-search .icon {
  flex-shrink: 0;
  color: var(--color-ink-muted);
}

.home-search-input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
}

.home-search-input:focus {
  outline: none;
}

.home-search:focus-within {
  box-shadow: 0 0 0 2px var(--color-focus);
}

.home-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.home-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-cat:hover,
.home-cat:focus-visible {
  border-color: var(--color-action);
}

.home-cat-name {
  font-size: 20px;
  font-weight: 700;
}

.home-cat-count {
  color: var(--color-ink-muted);
  font-size: 16px;
}

.home-browse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-browse-bar h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

:root[lang='hi'] .home-browse-bar h3 {
  font-family: var(--font-ui);
  font-weight: 700;
}

.home-back {
  flex-shrink: 0;
  min-height: 56px;
  padding: 0 16px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-action);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.home-game-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-game {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  padding: 16px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-game:hover,
.home-game:focus-visible {
  border-color: var(--color-action);
}

.home-game-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.home-game-heading:is(h2) {
  margin: 0;
}

.home-game-name {
  font-size: 20px;
  font-weight: 700;
}

.home-new-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-play-accent);
  color: var(--color-on-brand);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-cat-new {
  border-color: var(--color-play-accent);
  background: var(--color-play-ground);
}

.home-cat-new .home-cat-name {
  color: var(--color-play-accent);
}

.home-game-lead {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 16px;
}

.game-other-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-other {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.picture-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

.picture-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.picture-frame {
  width: min(220px, 70vw);
  height: min(220px, 70vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-btn);
}

.picture-frame svg {
  width: 160px;
  height: 160px;
}

.naming-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hold-talk {
  min-height: 72px;
}

.hold-talk.is-holding {
  background: var(--color-progress);
  color: var(--color-ink);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-btn {
  min-height: 72px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.choice-btn:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 3px;
}

.gng-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

.gng-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.gng-item {
  width: min(120px, 36vw);
  height: min(120px, 36vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gng-item svg {
  width: 100%;
  height: 100%;
}

.gng-item.is-fault {
  box-shadow: inset 0 0 0 4px var(--color-action);
  position: relative;
}

.gng-item.is-fault::after {
  content: '';
  position: absolute;
  inset: 18%;
  border: 4px solid var(--color-ink);
  transform: rotate(28deg);
  pointer-events: none;
}

.gng-cue {
  width: min(220px, 70vw);
  height: min(220px, 70vw);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gng-cue.is-ready {
  clip-path: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-ink-muted);
  font-size: 0;
}

.gng-cue.is-go {
  clip-path: none;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Lights: Ready is a triangle + word, not colour alone (DEC-08). */
.gng-cue.is-caution {
  clip-path: polygon(50% 8%, 92% 88%, 8% 88%);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 6px var(--color-ink);
}

/* Keep the beat: a steady disc that swells on every tick and flashes on a good tap. */
.beat-cue,
.beat-cue.is-ready,
.beat-cue.is-go {
  width: min(160px, 50vw);
  height: min(160px, 50vw);
  border-radius: 50%;
  font-size: 0;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}

.beat-cue.is-ready {
  background: var(--color-ink-muted);
}

.beat-cue.is-go {
  background: var(--color-action);
}

.beat-cue.is-rest {
  background: transparent;
  border: 8px solid var(--color-ink);
  color: var(--color-ink);
  font-size: var(--step-1, 1.25rem);
  font-weight: 600;
}

.beat-cue.is-pulse {
  transform: scale(1.18);
}

.beat-cue.is-hit {
  box-shadow: 0 0 0 10px var(--color-progress);
}

.gng-cue.is-listen {
  background: var(--color-action);
  box-shadow: inset 0 0 0 6px var(--color-action);
}

.app[data-shell="auditory-selective-attention"] .gng-cue.is-listen {
  animation: listen-pulse 900ms ease-in-out infinite;
}

@keyframes listen-pulse {
  50% { transform: scale(1.06); }
}

.gng-cue.is-wait {
  clip-path: none;
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 6px var(--color-progress);
}

/* Shopping list: list tiles while reading, two big numbers in between, then the board. */
.shopping-board[data-phase="show"] .fluency-tile {
  border-style: dashed;
  cursor: default;
}

.shopping-board[data-phase="distract"] {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.shopping-board[data-phase="distract"] .fluency-tile {
  min-height: 96px;
  font-size: 40px;
}

/* Steps in order: routine steps as tiles; done tiles show their step number. */
.routine-board {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.routine-board .fluency-tile {
  position: relative;
  font-size: 19px;
  text-align: left;
  padding-left: 48px;
}

.routine-board .fluency-tile .step-badge {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  background: var(--line, #cfd6dd);
  color: var(--color-ink);
}

.routine-board .fluency-tile.is-done {
  border-color: var(--color-action);
  color: var(--color-ink-muted);
}

.routine-board .fluency-tile.is-done .step-badge {
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Connect in order: labelled stops on the search field; done stops fill in. */
.trail-field .search-cell.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.trail-field .search-cell .search-shape {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
}

.trail-field .search-cell.is-done .search-shape {
  background: var(--color-action);
  color: var(--color-action-text);
  box-shadow: none;
}

/* Light-up keys: color + shape + name per key; one key lit at a time during show. */
.buttons-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 14px;
  width: min(420px, 100%);
  margin: 0 auto;
}

.buttons-board[data-keys="5"],
.buttons-board[data-keys="6"] {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.button-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 112px;
  padding: 12px;
  border: 2px solid var(--line, #cfd6dd);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.button-key:disabled {
  cursor: default;
}

.button-key .key-shape {
  width: 56px;
  height: 56px;
  background: var(--key-color);
  opacity: 0.45;
  transition: opacity 120ms ease, transform 120ms ease;
}

.button-key[data-phase="recall"] .key-shape,
.button-key.is-lit .key-shape {
  opacity: 1;
}

.button-key.is-lit {
  transform: scale(1.06);
  box-shadow: 0 0 0 5px var(--key-color);
}

.button-key .key-shape.is-circle { border-radius: 50%; }
.button-key .key-shape.is-square { border-radius: 8px; }
.button-key .key-shape.is-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.button-key .key-shape.is-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.button-key .key-shape.is-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.button-key .key-shape.is-hexagon { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }

.buttons-board[data-piano="true"] {
  display: flex;
  gap: 6px;
  grid-template-columns: none;
}

.buttons-board[data-piano="true"] .button-key {
  flex: 1;
  min-height: 148px;
  justify-content: flex-end;
  padding-bottom: 18px;
  border-color: var(--color-ink, #1e1c18);
  border-radius: 0 0 10px 10px;
  background: var(--color-surface, #fbf8f3);
  font-size: 22px;
}

.buttons-board[data-piano="true"] .button-key.is-lit {
  background: var(--color-action, #c9892b);
  box-shadow: none;
}

/* Stop-signal: the late Stop is an octagon, word and shape, not color alone. */
.gng-cue.is-stop {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: var(--color-ink);
  color: var(--color-surface);
}

.gng-dock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gng-tap {
  min-height: 96px;
  font-size: 24px;
}

.search-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

.screen-search .session-header[data-dock="right"] {
  flex-direction: row-reverse;
}

.search-field-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Plant the bed: the palette sits under the bed, not beside it. */
.search-field-wrap:has(.garden-palette:not([hidden])) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search-field {
  display: grid;
  gap: 12px;
  flex: 1;
  width: 100%;
  align-content: center;
  justify-content: center;
}

.search-cell {
  position: relative;
  min-width: 72px;
  min-height: 72px;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-cell:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 4px;
}

.search-cell.is-letter {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-cell.is-letter.is-found {
  box-shadow: inset 0 0 0 4px var(--color-progress);
}

.search-cell.is-letter.is-hint {
  outline: 3px solid var(--color-progress);
  outline-offset: 4px;
}

.search-shape {
  width: 72%;
  height: 72%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 4px var(--color-action);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-cell.is-circle .search-shape {
  border-radius: 50%;
}

.search-cell.is-square .search-shape {
  border-radius: 12px;
}

.search-cell.is-diamond .search-shape {
  width: 58%;
  height: 58%;
  border-radius: 8px;
  transform: rotate(45deg);
}

.search-mark {
  width: 18%;
  height: 18%;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: var(--color-ink);
}

.search-cell.is-diamond .search-mark {
  transform: rotate(-45deg);
}

.search-cell.is-hint .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-progress);
  background: #f4e6c8;
}

.search-field.is-scan .search-cell.is-found .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-progress);
  background: var(--color-ground);
}

.search-field.is-scan .search-cell.is-found .search-mark {
  background: var(--color-progress);
}

.search-field.is-precise .search-cell.is-foil .search-shape {
  background: transparent;
  box-shadow: none;
}

.search-field.is-precise .search-cell.is-foil .search-mark {
  display: none;
}

.search-field.is-precise .search-cell.is-target .search-shape {
  width: var(--precise-size, 32%);
  height: var(--precise-size, 32%);
}

.search-field.is-faint .search-shape {
  opacity: calc(var(--search-contrast, 55) / 100);
}

.search-field.is-faint .search-cell.is-hint .search-shape {
  opacity: 1;
}

/* Tap the pop-up: dark burrows; the lit one fills with the action colour. */
.search-field.is-pop .pop-cell .search-shape {
  border-radius: 14px;
  background: var(--color-surface-sunk, var(--color-surface));
  box-shadow: inset 0 0 0 3px var(--color-ink-muted);
}

.search-field.is-pop .pop-cell.is-up .search-shape {
  background: var(--color-action);
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-field.is-pop .pop-cell.is-up .search-mark {
  background: var(--color-action-text);
  width: 34%;
  height: 34%;
}

/* Count the birds: empty squares, one sighting at a time; then big number buttons. */
.search-field.is-birds .bird-cell {
  cursor: default;
}

.search-field.is-birds .bird-cell.is-empty .search-shape {
  box-shadow: inset 0 0 0 2px var(--color-control-line, var(--color-ink-muted));
  background: transparent;
  border-radius: 12px;
}

.search-field.is-birds .count-btn {
  min-height: 96px;
  font-size: 40px;
}

/* Follow the mark: blank squares; the mark fills one; the true square is shown after a tap. */
.search-field.is-track .track-cell .search-shape {
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--color-control-line, var(--color-ink-muted));
  background: transparent;
}

.search-field.is-track .track-cell.is-mark .search-shape {
  background: var(--color-action);
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-field.is-track .track-cell.is-mark .search-mark {
  background: var(--color-action-text);
  width: 34%;
  height: 34%;
}

.search-field.is-track .track-cell.is-reveal .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-field.is-track .track-cell.is-tapped .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-ink-muted);
}

.search-field.is-track .track-cell:disabled {
  cursor: default;
}

.search-field.is-hidden .search-cell.is-hidden {
  padding: 8px;
}

.search-field.is-hidden .search-cell.is-hidden svg {
  width: 72px;
  height: 72px;
}

.search-field.is-hidden .search-cell.is-hint,
.search-field.is-hidden .search-cell.is-reveal {
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-field.is-hidden .search-cell.is-tapped {
  box-shadow: inset 0 0 0 4px var(--color-ink-muted);
}

/* Keep them in view: several identical marks; a ring on the watched ones. */
.search-field.is-many .track-cell .search-shape {
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--color-control-line, var(--color-ink-muted));
  background: transparent;
}

.search-field.is-many .track-cell.is-token .search-mark,
.search-field.is-many .track-cell.is-reveal .search-mark {
  background: var(--color-ink);
  width: 34%;
  height: 34%;
}

.search-field.is-many .track-cell.is-yours .search-shape {
  box-shadow: inset 0 0 0 5px var(--color-action);
}

.search-field.is-many .track-cell.is-hint .search-shape,
.search-field.is-many .track-cell.is-reveal .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.search-field.is-many .track-cell.is-picked .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-ink-muted);
}

.search-field.is-many .track-cell:disabled {
  cursor: default;
}

/* Where on the line?: a row of tick buttons on a baseline; ends (and a hinted middle) carry numbers. */
.search-field.is-line {
  gap: 0;
  width: min(640px, 96vw);
}

/* Each tick carries a slice of the baseline, so the row reads as one continuous line. */
.line-tick::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18px + 12px);
  height: 4px;
  background: var(--color-ink-muted);
}

.line-tick:first-child::before {
  left: 50%;
  border-radius: 2px 0 0 2px;
}

.line-tick:last-child::before {
  right: 50%;
  border-radius: 0 2px 2px 0;
}

.line-tick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 84px;
  padding: 18px 0 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

.line-tick:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 2px;
  border-radius: 8px;
}

.line-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--color-ink);
}

.line-tick.is-labelled .line-mark {
  height: 34px;
  width: 5px;
}

.line-label {
  min-height: 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.line-tick.is-reveal .line-mark {
  background: var(--color-action);
  width: 8px;
  height: 40px;
}

.line-tick.is-reveal .line-label {
  color: var(--color-action);
}

.line-tick.is-tapped .line-mark {
  background: var(--color-progress);
  width: 6px;
}

.line-tick:disabled {
  cursor: default;
}

/* A good home for it: eight labelled spots as wide buttons; a hint dims four. */
.search-field.is-home {
  gap: 10px;
  width: min(480px, 94vw);
}

.home-spot {
  min-height: 72px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.home-spot:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 3px;
}

.home-spot.is-dimmed {
  opacity: 0.35;
  cursor: default;
}

.home-spot.is-found {
  outline: 3px solid var(--color-progress);
  outline-offset: 2px;
}

.home-spot.is-hint {
  box-shadow: inset 0 0 0 3px var(--color-action);
}

/* Spot the difference: the original above, the copy below, a rule between them. */
.search-field.is-spot {
  gap: 8px;
  align-content: center;
}

.spot-half {
  display: grid;
  gap: 8px;
  justify-content: center;
}

.spot-half .search-cell {
  min-width: 0;
  min-height: 0;
  width: var(--spot-cell, 64px);
  height: var(--spot-cell, 64px);
}

.spot-half.is-original .search-cell {
  cursor: default;
}

.spot-half.is-original .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-ink-muted);
}

.spot-divider {
  height: 2px;
  margin: 6px 12px;
  border-radius: 2px;
  background: var(--color-control-line, var(--color-ink-muted));
}

.search-dock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Spatial memory grid: squares that show a dot, then hide it; found squares fill. */
.grid-field .search-cell .search-shape {
  border-radius: 12px;
}

.grid-field .search-cell.is-dot .search-shape {
  background: #f4e6c8;
}

.grid-field .search-cell.is-found .search-shape {
  background: var(--color-action);
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.grid-field .search-cell.is-found .search-mark {
  background: var(--color-action-text);
}

/* Remember the route: the marks carry step numbers. */
.search-mark.is-step {
  width: 62%;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-surface);
}

.grid-field .search-cell.is-found .search-mark.is-step {
  color: var(--color-action);
}

.grid-field .search-cell.is-wrong .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-ink-muted);
  background: var(--color-ground);
}

.grid-field[data-phase="show"] .search-cell {
  cursor: default;
}

/* Fill the square: shapes in one ink on the garden soil; thick lines mark the 2x2 boxes. */
.grid-field.is-square-game {
  gap: 4px;
}

.grid-field.is-square-game .square-cell .search-shape {
  background: var(--color-surface);
  color: var(--color-ink);
}

.grid-field.is-square-game .square-cell.is-fixed .search-shape {
  background: #e3d6bf;
}

.grid-field.is-square-game .square-cell.is-box-right {
  margin-right: 8px;
}

.grid-field.is-square-game .square-cell.is-box-bottom {
  margin-bottom: 8px;
}

.grid-field.is-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(360px, 94vw);
}

.block-model,
.block-copy {
  display: grid;
  gap: 8px;
  justify-content: center;
}

.block-model .search-cell {
  pointer-events: none;
}

.grid-field.is-square-game .outline-shape g {
  stroke: var(--color-ink);
}

/* Stack the rings: three tall posts; rings stack up from a base; a lifted ring floats above. */
.grid-field.is-stack {
  gap: 12px;
  width: min(520px, 94vw);
  align-items: end;
}

.stack-post {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: min(300px, 44vh);
  padding: 0 6px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--color-surface);
  cursor: pointer;
}

.stack-post:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 3px;
}

.stack-post.is-goal {
  box-shadow: inset 0 0 0 2px var(--color-control-line, var(--color-ink-muted));
}

.stack-post.is-hint-from,
.stack-post.is-hint-to {
  box-shadow: inset 0 0 0 4px var(--color-progress);
}

.stack-post.is-holding {
  background: #f4e6c8;
}

.stack-pole {
  position: absolute;
  left: 50%;
  top: 22%;
  bottom: 10px;
  width: 8px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--color-ink-muted);
}

.stack-held {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 20%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.stack-pile {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
}

.stack-ring {
  display: block;
  height: 22px;
  border-radius: 11px;
  background: var(--color-action);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.stack-held .stack-ring {
  background: var(--color-progress);
}

/* Plant the bed: soil squares, given plants on darker soil, a palette of three below. */
.grid-field.is-garden {
  gap: 6px;
}

.grid-field.is-garden .garden-cell {
  min-width: 0;
  min-height: 0;
  width: var(--garden-cell, 72px);
  height: var(--garden-cell, 72px);
}

.grid-field.is-garden .garden-cell .search-shape {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: none;
  background: #efe6d6;
  padding: 8%;
  box-sizing: border-box;
}

.grid-field.is-garden .garden-cell.is-fixed .search-shape {
  background: #e3d6bf;
}

.grid-field.is-garden .garden-cell.is-empty .search-shape {
  box-shadow: inset 0 0 0 2px var(--color-control-line, var(--color-ink-muted));
  background: transparent;
}

.grid-field.is-garden .garden-cell .search-shape svg {
  width: 100%;
  height: 100%;
}

.grid-field.is-garden .garden-cell.is-dot .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-progress);
}

.garden-palette {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.grid-field.is-garden {
  flex: 0 0 auto;
}

.garden-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 84px;
  padding: 8px 10px;
  border: 3px solid transparent;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.garden-pick svg {
  width: 40px;
  height: 40px;
}

.garden-pick.is-selected {
  border-color: var(--color-action);
}

/* Find the way: no gaps, walls as thick edges, the walker filled, the exit marked. */
.grid-field.is-maze {
  gap: 0;
  padding: 3px;
  border-radius: 10px;
}

.grid-field.is-maze .maze-cell {
  min-width: 0;
  min-height: 0;
  width: var(--maze-cell, 72px);
  height: var(--maze-cell, 72px);
  border: 2px solid transparent;
  border-radius: 0;
  box-sizing: border-box;
}

.grid-field.is-maze .maze-cell .search-shape {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.grid-field.is-maze .maze-cell.is-wall-n { border-top: 5px solid var(--color-ink); }
.grid-field.is-maze .maze-cell.is-wall-e { border-right: 5px solid var(--color-ink); }
.grid-field.is-maze .maze-cell.is-wall-s { border-bottom: 5px solid var(--color-ink); }
.grid-field.is-maze .maze-cell.is-wall-w { border-left: 5px solid var(--color-ink); }

.grid-field.is-maze .maze-cell.is-visited .search-shape {
  background: #efe6d6;
}

.grid-field.is-maze .maze-cell.is-exit .search-shape {
  background: #f4e6c8;
}

.grid-field.is-maze .maze-cell.is-dot .search-shape {
  box-shadow: inset 0 0 0 4px var(--color-progress);
}

.grid-field.is-maze .maze-cell.is-player .search-shape::after {
  content: '';
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: var(--color-action);
}

/* N-back cue: same stage as Go/No-Go, shape carries the meaning. */
.nback-cue.is-shape {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 6px var(--color-action);
  font-size: 28px;
}

.nback-cue.is-shape[data-shape="circle"] {
  border-radius: 50%;
}

.nback-cue.is-shape[data-shape="square"] {
  border-radius: 16px;
}

.nback-cue.is-shape[data-shape="diamond"] {
  border-radius: 16px;
  transform: rotate(45deg);
}

.nback-cue.is-shape[data-shape="diamond"] > span {
  display: inline-block;
  transform: rotate(-45deg);
}

.nback-cue.is-shape[data-shape="triangle"] {
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
  box-shadow: none;
  background: var(--color-action);
  color: var(--color-action-text);
  align-items: flex-end;
  padding-bottom: 14%;
}

/* Choice shell: word stimulus or picture, then word buttons. */
.choice-stimulus.is-word {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.choice-stimulus.is-word.is-letter {
  font-size: 96px;
  text-transform: uppercase;
}

.choice-stimulus.is-word.is-pair {
  width: min(360px, 90vw);
  font-size: 32px;
}

.choice-stimulus.is-word.is-story {
  width: min(520px, 92vw);
  height: auto;
  min-height: 0;
  padding: 18px 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.choice-stimulus.is-word.is-question {
  width: min(360px, 90vw);
  height: auto;
  min-height: 160px;
  padding: 20px;
  font-size: 26px;
  line-height: 1.3;
  text-transform: none;
  text-align: center;
}

.choice-stimulus:has(.choice-picture-label) {
  flex-direction: column;
  gap: 4px;
}

.choice-stimulus:has(.choice-picture-label) svg {
  width: 120px;
  height: 120px;
}

.colour-swatch {
  width: 168px;
  height: 168px;
  display: block;
}

.choice-stimulus.is-fragment {
  box-shadow: inset 0 0 0 4px var(--color-progress);
}

.choice-picture-label {
  font-size: 24px;
  font-weight: 700;
}

/* The mark, not the word: label sits on the outline. Ink, not a colour cue. */
.choice-stimulus:has(.stroop-word) {
  position: relative;
  display: grid;
  place-items: center;
}

.stroop-word {
  position: absolute;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  pointer-events: none;
}

/* The middle one: a row of arrows; the centre sits on a short mark.
   Override .picture-frame's 220px square and 160px svg size. */
.app[data-shell="flanker-task"] .picture-frame.choice-stimulus {
  width: min(420px, 94vw);
  height: auto;
  min-height: 112px;
  padding: 16px 12px 12px;
  overflow: visible;
}

.app[data-shell="flanker-task"] .picture-frame.choice-stimulus svg {
  width: 36px;
  height: 42px;
}

.app[data-shell="flanker-task"] .picture-frame.choice-stimulus .flanker-arrow.is-center {
  width: 44px;
  height: 50px;
}

.flanker-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  color: var(--color-ink);
}

.flanker-cell {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 56px;
}

.flanker-cell.is-center {
  padding-bottom: 6px;
  border-bottom: 4px solid var(--color-ink);
}

.flanker-arrow {
  display: block;
}

/* Picture cue: the label is a whole sentence under the picture, so let it wrap. */
.app[data-shell="mnemonic-training"] .choice-stimulus:has(.choice-picture-label) {
  width: min(440px, 92vw);
  height: auto;
  min-height: 0;
  padding: 16px 20px 20px;
  gap: 10px;
}

.app[data-shell="mnemonic-training"] .choice-stimulus:has(.choice-picture-label) svg {
  width: 104px;
  height: 104px;
}

.app[data-shell="mnemonic-training"] .choice-picture-label {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  white-space: normal;
}

/* Hear it, find it: replay control in the stage, picture buttons below. */
.choice-replay {
  border: 0;
  background: transparent;
  color: var(--color-ink-muted);
  font: inherit;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 72px;
  padding: 12px;
}

.choice-replay .gng-cue.is-ready {
  width: 40px;
  height: 40px;
  background: var(--color-action);
}

.choice-list.is-pictures {
  flex-direction: row;
  flex-wrap: wrap;
}

.choice-list.is-pictures .choice-btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice-list.is-pictures .choice-btn svg {
  width: 88px;
  height: 88px;
}

.choice-btn.is-reveal {
  box-shadow: inset 0 0 0 4px var(--color-action);
}

/* Unscramble it: big letter tiles; placed letters dim; the slot row shows the word so far. */
.anagram-board {
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  width: min(480px, 100%);
}

.anagram-board .button-key {
  min-height: 72px;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px;
}

.anagram-board .button-key.is-used {
  opacity: 0.35;
}

.anagram-slots li {
  text-transform: uppercase;
  min-width: 40px;
  text-align: center;
}

/* Build the sentence: word tiles and word slots keep their case and wrap. */
.anagram-board.is-words {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  width: min(560px, 100%);
}

.anagram-board.is-words .button-key {
  font-size: 20px;
  text-transform: none;
  min-height: 60px;
}

.anagram-slots.is-words li {
  text-transform: none;
  min-width: 0;
  padding: 0 6px;
  font-size: 18px;
}

/* Do as it says: colour + shape tiles on the key board; done tiles dim, the next lights up. */
.follow-board {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  width: min(520px, 100%);
}

.follow-board[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(84px, 1fr));
}

.follow-board .button-key .key-shape {
  opacity: 1;
}

.follow-board .button-key.is-done {
  opacity: 0.45;
}

.follow-board .button-key.is-done .key-shape {
  opacity: 0.5;
}

/* What would you say?: replies are sentences, so let the buttons wrap and breathe. */
.app[data-shell="conversation-skills"] .choice-btn,
.app[data-shell="idiom-interpretation"] .choice-btn,
.app[data-shell="conflict-resolution"] .choice-btn,
/* What does she think?: the question sits on its own line under the story. */
.app[data-shell="perspective-taking-social"] .choice-stimulus.is-story,
.app[data-shell="social-faux-pas-recognition"] .choice-stimulus.is-story,
.app[data-shell="bill-payment"] .choice-stimulus.is-story {
  white-space: pre-line;
}

.app[data-shell="bill-payment"] .choice-stimulus.is-story {
  font-variant-numeric: tabular-nums;
}

.app[data-shell="story-recall"] .choice-btn,
.app[data-shell="story-completion"] .choice-btn,
.app[data-shell="troubleshooting-scenarios"] .choice-btn,
.app[data-shell="freezing-prevention"] .choice-btn,
.app[data-shell="perspective-taking-social"] .choice-btn,
.app[data-shell="social-faux-pas-recognition"] .choice-btn,
.app[data-shell="bill-payment"] .choice-btn,
.app[data-shell="error-detection"] .choice-btn {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  padding: 14px 18px;
  text-align: left;
  white-space: normal;
}

/* Which is more? / Quick sums: the numbers are the whole task, so make them big. */
.app[data-shell="skip-counting"] .choice-stimulus.is-word.is-pair {
  width: min(440px, 92vw);
  font-size: 36px;
  letter-spacing: 0.02em;
}

.app[data-shell="rapid-number-comparison"] .choice-btn,
.app[data-shell="quick-math"] .choice-btn,
.app[data-shell="skip-counting"] .choice-btn,
.app[data-shell="math-word-problems"] .choice-btn,
.app[data-shell="syllable-counting"] .choice-btn {
  min-height: 96px;
  font-size: 40px;
  letter-spacing: 0.02em;
}

/* Quick word: look-alike words read best in lowercase at a steady size; the dots stand in once the word hides. */
.app[data-shell="word-flash"] .choice-stimulus.is-word.is-letter {
  font-size: 56px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.app[data-shell="word-flash"] .choice-stimulus.is-flashed {
  color: var(--color-ink-muted);
  letter-spacing: 0.3em;
}

.app[data-shell="word-flash"] .choice-btn {
  min-height: 72px;
  font-size: 28px;
  text-transform: lowercase;
}

/* Which was longer?: two ink bars, then a mask. Length, not colour (DEC-08). */
.app[data-shell="inspection-time-tasks"] .choice-stimulus {
  width: min(280px, 80vw);
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.inspect-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 48px;
  min-height: 160px;
}

.inspect-bar {
  width: 28px;
  background: var(--color-ink);
  border-radius: 4px;
}

.inspect-mask {
  width: 48px;
  height: 160px;
  background: var(--color-ink);
  border-radius: 4px;
}

/* Same or different?: two shapes side by side, each on its own card. */
.app[data-shell="symbol-matching"] .choice-stimulus {
  width: min(400px, 92vw);
  gap: 20px;
}

.shape-pair-item {
  display: inline-flex;
  padding: 10px;
  border-radius: 14px;
  background: var(--color-surface-sunk, var(--color-surface));
  line-height: 0;
}

.app[data-shell="symbol-matching"] .choice-btn,
.app[data-shell="pitch-discrimination"] .choice-btn {
  min-height: 84px;
  font-size: 28px;
}

/* What comes next?: a row of small tiles ending in a blank. */
.app[data-shell="timed-pattern-recognition"] .choice-stimulus,
.app[data-shell="pattern-recognition-with-rule-changes"] .choice-stimulus {
  --pattern-tile: min(64px, calc((94vw - 32px - 6 * 8px) / 7 - 8px));
  width: min(600px, 94vw);
  height: auto;
  min-height: 120px;
  padding: 16px;
  gap: 8px;
  flex-wrap: nowrap;
}

.app[data-shell="timed-pattern-recognition"] .shape-pair-item,
.app[data-shell="pattern-recognition-with-rule-changes"] .shape-pair-item {
  padding: 4px;
  border-radius: 10px;
}

.app[data-shell="timed-pattern-recognition"] .choice-stimulus svg,
.app[data-shell="timed-pattern-recognition"] .shape-pair-item.is-blank,
.app[data-shell="pattern-recognition-with-rule-changes"] .choice-stimulus svg,
.app[data-shell="pattern-recognition-with-rule-changes"] .shape-pair-item.is-blank {
  width: var(--pattern-tile) !important;
  height: var(--pattern-tile) !important;
}

.app[data-shell="timed-pattern-recognition"] .choice-btn.is-picture svg,
.app[data-shell="pattern-recognition-with-rule-changes"] .choice-btn.is-picture svg {
  width: 72px;
  height: 72px;
}

.shape-pair-item.is-blank {
  box-sizing: content-box;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--color-ink-muted);
  background: transparent;
  color: var(--color-ink-muted);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

/* What is the body saying?: one stick figure in ink. */
.posture-figure g {
  stroke: var(--color-ink);
}

.app[data-shell="body-language-interpretation"] .choice-stimulus svg {
  width: 150px;
  height: 188px;
}

/* Find it in the pile: one ink for every line, in the stage and on the buttons. */
.figure-pile g,
.outline-shape g {
  stroke: var(--color-ink);
}

.app[data-shell="figure-ground-discrimination"] .choice-stimulus svg {
  width: 200px;
  height: 200px;
}

.app[data-shell="figure-ground-discrimination"] .choice-btn.is-picture svg {
  width: 64px;
  height: 64px;
}

/* Find the rule: cards in one ink; the four key cards sit in a row. */
.rule-card {
  color: var(--color-ink);
}

.app[data-shell="wisconsin-card-sorting"] .choice-stimulus svg {
  width: 150px;
  height: 150px;
}

.app[data-shell="wisconsin-card-sorting"] .choice-list.is-pictures {
  flex-wrap: nowrap;
  gap: 8px;
}

.app[data-shell="wisconsin-card-sorting"] .choice-btn.is-picture {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 6px;
}

.app[data-shell="wisconsin-card-sorting"] .choice-btn.is-picture svg {
  width: min(84px, 18vw);
  height: min(84px, 18vw);
}

/* Choices stay out of sight while the word is on screen. */
.choice-list.is-waiting {
  visibility: hidden;
}

/* About how many?: a scatter of ink dots. */
.dot-field circle {
  fill: var(--color-ink);
}

/* Count the money: notes as wide tiles, coins as discs, values printed large. */
.money-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  max-width: 320px;
}

.money-note,
.money-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-ink);
}

.money-note {
  width: 108px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid var(--color-ink);
  background: linear-gradient(135deg, #f3e6cf, #e6d4b0);
  font-size: 22px;
}

.money-note[data-value="500"] { background: linear-gradient(135deg, #e9dccf, #cfb9a3); }
.money-note[data-value="200"] { background: linear-gradient(135deg, #f6dfc7, #e8b98d); }
.money-note[data-value="100"] { background: linear-gradient(135deg, #dfe8f6, #b8cbe6); }
.money-note[data-value="50"] { background: linear-gradient(135deg, #e6f0f5, #bdd7e6); }
.money-note[data-value="20"] { background: linear-gradient(135deg, #e8f2df, #c6dfb2); }
.money-note[data-value="10"] { background: linear-gradient(135deg, #f4e7d6, #dcc39e); }

.money-coin {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #a8965d;
  background: radial-gradient(circle at 35% 35%, #f4e9b8, #cdb96a);
  font-size: 17px;
}

/* What time is it?: analogue clock face in ink; hour hand short and thick. */
.clock-face circle,
.clock-face line {
  stroke: var(--color-ink);
}

.clock-face circle:last-of-type {
  fill: var(--color-ink);
}

.clock-face text {
  fill: var(--color-ink);
}

.clock-face .clock-hour {
  stroke: var(--color-action);
}

/* How long between?: two labelled clocks side by side. */
.clock-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
}

.clock-slot {
  margin: 0;
  text-align: center;
}

.clock-slot figcaption {
  font-weight: 700;
  margin-bottom: 8px;
}

/* Same shape, turned: block shapes in the ink color; mirrors look identical on purpose. */
.rotation-shape rect {
  fill: var(--color-ink);
}

.choice-btn.is-correct {
  background: var(--color-action);
  color: var(--color-action-text);
}

.choice-btn.is-missed {
  opacity: 0.55;
}

/* Above, below, beside: the instruction is the whole task, so it reads large. */
.relations-prompt {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

/* Tap all that fit: word tiles that toggle; Done judges the set. */
.fluency-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
}

.fluency-scene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 4px 0 12px;
}

.fluency-scene[hidden] {
  display: none;
}

.fluency-scene-item svg {
  width: 96px;
  height: 96px;
}

.fluency-tile {
  min-height: 64px;
  padding: 12px 10px;
  border: 2px solid var(--line, #cfd6dd);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
}

.fluency-tile.is-picked {
  border-color: var(--accent, #1b7f5a);
  background: var(--accent-soft, #e3f5ec);
}

.fluency-tile.is-hint {
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.8);
}

.fluency-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Matching pairs: face-down cards on the search grid; face-up shows the picture. */
.cards-field .card {
  position: relative;
  min-width: 72px;
  min-height: 72px;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--color-action);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards-field .card::after {
  content: '';
  width: 28%;
  height: 28%;
  border-radius: 50%;
  border: 4px solid var(--color-action-text);
  opacity: 0.7;
}

.cards-field .card.is-up,
.cards-field .card.is-matched {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 4px var(--color-action);
}

.cards-field .card.is-up::after,
.cards-field .card.is-matched::after {
  display: none;
}

.cards-field .card.is-matched {
  opacity: 0.6;
  cursor: default;
}

.cards-field .card.is-hint {
  box-shadow: inset 0 0 0 4px var(--color-progress);
  background: #f4e6c8;
}

.cards-field .card svg {
  width: 70%;
  height: 70%;
}

.cards-field .card:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 4px;
}

/* Switch the rule: rule chip up top, shape with marks, two rule-labelled buttons. */
.switch-rule {
  align-self: center;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 3px var(--color-action);
  font-weight: 700;
}

.switch-rule.is-switched {
  background: #f4e6c8;
  box-shadow: inset 0 0 0 3px var(--color-progress);
}

.switch-stimulus svg {
  width: 160px;
  height: 160px;
}

.switch-options {
  flex-direction: row;
}

.switch-options .choice-btn {
  flex: 1 1 0;
  min-height: 96px;
}

/* Listen and repeat: spoken word shows in the stage, answer slots, picture keys. */
.audio-stage {
  flex-direction: column;
  gap: 8px;
  font-size: 28px;
  font-weight: 700;
}

.audio-stage svg {
  width: 120px;
  height: 120px;
}

.audio-stage.is-listening {
  box-shadow: inset 0 0 0 6px var(--color-progress);
}

.audio-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.audio-slots li {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.audio-slots li.is-filled {
  background: var(--color-action);
  color: var(--color-action-text);
}

.audio-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.audio-key {
  min-height: 96px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.audio-key svg {
  width: 48px;
  height: 48px;
}

.audio-key:disabled {
  opacity: 0.5;
  cursor: default;
}

.audio-key:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 3px;
}

.search-layout[data-dock="right"] .search-dock {
  align-items: flex-end;
}

.search-layout[data-dock="left"] .search-dock {
  align-items: flex-start;
}

.search-layout[data-dock="right"] .search-dock .btn-secondary,
.search-layout[data-dock="left"] .search-dock .btn-secondary {
  min-width: min(100%, 220px);
}

body.simplified .search-cell {
  min-width: 96px;
  min-height: 96px;
}

.dual-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

.dual-path-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 0;
}

.dual-mode {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-action);
  font-weight: 700;
  font-size: 16px;
}

.dual-mode.is-both,
.dual-mode.is-talk {
  background: var(--color-action);
  color: var(--color-action-text);
  box-shadow: none;
}

.dual-pips {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dual-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-action);
}

.dual-pip.is-current {
  background: var(--color-action);
  transform: scale(1.45);
}

.dual-pip.is-done {
  background: var(--color-progress);
  box-shadow: none;
}

.dual-step {
  width: min(200px, 58vw);
  height: min(200px, 58vw);
  border: 0;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-action-text);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 56px;
  font-weight: 700;
  box-shadow: 0 0 0 8px rgba(47, 111, 98, 0.22);
}

.dual-step.is-current {
  animation: dual-pulse 1.4s ease-in-out infinite;
}

.dual-step.is-rest {
  background: var(--color-surface);
  color: var(--color-ink-muted);
  box-shadow: inset 0 0 0 4px var(--color-action);
  animation: none;
  cursor: default;
}

.dual-step:disabled {
  cursor: default;
}

.dual-step:focus-visible {
  outline: 3px solid var(--color-progress);
  outline-offset: 6px;
}

@keyframes dual-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 8px rgba(47, 111, 98, 0.22);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(47, 111, 98, 0.08);
  }
}

.dual-dock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dual-question {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.dual-layout[data-task="walk"] .dual-question {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.dual-choices {
  display: flex;
  gap: 12px;
}

.dual-choice {
  flex: 1;
  min-height: 72px;
}

body.simplified .dual-step,
body.simplified .dual-choice {
  min-height: 96px;
  min-width: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .gng-cue,
  .dual-step {
    transition: none;
    animation: none;
  }
}

@media (min-width: 768px) {
  .player-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app:has(.screen-caregiver:not([hidden])),
  .app[data-shell="home"] {
    max-width: 768px;
  }

  .app:has(.screen-clinic:not([hidden])):not(.layout-wide) {
    max-width: 768px;
  }

  .app[data-shell="picture-naming"],
  .app[data-shell="go-no-go"],
  .app[data-shell="reverse-thinking-tasks"],
  .app[data-shell="simon-says"],
  .app[data-shell="traffic-light-response"],
  .app[data-shell="continuous-performance-test"],
  .app[data-shell="reaction-time-tests"],
  .app[data-shell="assembly-line-task"],
  .app[data-shell="stop-signal-tasks"],
  .app[data-shell="auditory-selective-attention"],
  .app[data-shell="musical-rhythm"],
  .app[data-shell="pacing-practice"],
  .app[data-shell="button-sequence-memory"],
  .app[data-shell="virtual-piano-music-games"],
  .app[data-shell="trail-making-test"],
  .app[data-shell="visual-search"],
  .app[data-shell="spot-the-difference"],
  .app[data-shell="whack-a-mole-style"],
  .app[data-shell="bird-watching"],
  .app[data-shell="environmental-modification"],
  .app[data-shell="bathing-safety"],
  .app[data-shell="map-navigation"],
  .app[data-shell="visual-scanning"],
  .app[data-shell="home-safety-inspector"],
  .app[data-shell="number-line-tasks"],
  .app[data-shell="target-tracking"],
  .app[data-shell="multi-object-tracking"],
  .app[data-shell="word-search-puzzles"],
  .app[data-shell="hidden-object-games"],
  .app[data-shell="precision-tapping"],
  .app[data-shell="contrast-sensitivity"],
  .app[data-shell="dual-task"],
  .app[data-shell="spatial-memory-grid"],
  .app[data-shell="route-memory"],
  .app[data-shell="maze-navigation"],
  .app[data-shell="garden-growing"],
  .app[data-shell="tower-of-hanoi"],
  .app[data-shell="sudoku"],
  .app[data-shell="block-design"],
  .app[data-shell="n-back-tasks"],
  .app[data-shell="word-association"],
  .app[data-shell="audio-sequence-recall"],
  .app[data-shell="familiar-object-recognition"],
  .app[data-shell="task-switching"],
  .app[data-shell="first-sound-identification"],
  .app[data-shell="card-matching"],
  .app[data-shell="audio-visual-matching"],
  .app[data-shell="background-noise-filtering"],
  .app[data-shell="inspection-time-tasks"],
  .app[data-shell="spatial-relations"],
  .app[data-shell="semantic-memory-quizzes"],
  .app[data-shell="word-generation"],
  .app[data-shell="event-based-memory"],
  .app[data-shell="fragmented-pictures"],
  .app[data-shell="simple-sorting"],
  .app[data-shell="synonym-antonym-matching"],
  .app[data-shell="season-recognition"],
  .app[data-shell="age-appropriate-activities"],
  .app[data-shell="time-estimation"],
  .app[data-shell="medication-reminder-tasks"],
  .app[data-shell="budget-management"],
  .app[data-shell="medication-management"],
  .app[data-shell="delayed-gratification-tasks"],
  .app[data-shell="mental-math-challenges"],
  .app[data-shell="number-sequencing"],
  .app[data-shell="rhyme-recognition"],
  .app[data-shell="sound-blending"],
  .app[data-shell="category-switching"],
  .app[data-shell="laundry-sorting"],
  .app[data-shell="stroop-test"],
  .app[data-shell="speed-sorting"],
  .app[data-shell="rapid-decision-making"],
  .app[data-shell="color-naming-speed"],
  .app[data-shell="multi-category-sorting"],
  .app[data-shell="flanker-task"],
  .app[data-shell="mental-rotation"],
  .app[data-shell="mirror-image-tasks"],
  .app[data-shell="spaced-retrieval"],
  .app[data-shell="clock-reading-and-setting"],
  .app[data-shell="time-calculation"],
  .app[data-shell="money-management"],
  .app[data-shell="estimation-tasks"],
  .app[data-shell="rapid-number-comparison"],
  .app[data-shell="quick-math"],
  .app[data-shell="emergency-response"],
  .app[data-shell="face-name-association"],
  .app[data-shell="mnemonic-training"],
  .app[data-shell="cross-modal-memory"],
  .app[data-shell="reminiscence-games"],
  .app[data-shell="face-recognition"],
  .app[data-shell="calendar-skills"],
  .app[data-shell="facial-expression-matching"],
  .app[data-shell="emotion-from-context"],
  .app[data-shell="conversation-skills"],
  .app[data-shell="idiom-interpretation"],
  .app[data-shell="conflict-resolution"],
  .app[data-shell="compound-word-building"],
  .app[data-shell="story-recall"],
  .app[data-shell="math-word-problems"],
  .app[data-shell="story-completion"],
  .app[data-shell="troubleshooting-scenarios"],
  .app[data-shell="freezing-prevention"],
  .app[data-shell="perspective-taking-social"],
  .app[data-shell="bill-payment"],
  .app[data-shell="social-faux-pas-recognition"],
  .app[data-shell="error-detection"],
  .app[data-shell="syllable-counting"],
  .app[data-shell="skip-counting"],
  .app[data-shell="word-flash"],
  .app[data-shell="symbol-matching"],
  .app[data-shell="pitch-discrimination"],
  .app[data-shell="body-language-interpretation"],
  .app[data-shell="figure-ground-discrimination"],
  .app[data-shell="wisconsin-card-sorting"],
  .app[data-shell="timed-pattern-recognition"],
  .app[data-shell="pattern-recognition-with-rule-changes"],
  .app[data-shell="category-fluency"],
  .app[data-shell="picture-description"],
  .app[data-shell="daily-routine-sequencing"],
  .app[data-shell="historical-event-sequencing"],
  .app[data-shell="shopping-list-memory"],
  .app[data-shell="following-complex-instructions"],
  .app[data-shell="anagrams"],
  .app[data-shell="sentence-building"] {
    max-width: 768px;
  }

  .screen-picture.screen-session .picture-layout,
  .screen-gng.screen-session .gng-layout,
  .screen-search.screen-session .search-layout,
  .screen-dual.screen-session .dual-layout {
    justify-content: space-between;
  }

  .naming-controls,
  .gng-dock,
  .search-dock,
  .dual-dock {
    position: sticky;
    bottom: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

.app:not(.nav-pinned) .screen-clinic.drawer-host {
  overflow: visible;
}

.app:not(.nav-pinned) .clinic-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: min(280px, 86%);
  max-width: 280px;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top, 0px));
  overflow-y: auto;
  background: var(--color-surface);
  box-shadow: 8px 0 28px rgba(31, 41, 36, 0.16);
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-105%);
  transition: transform 0.2s ease, visibility 0.2s ease;
}

.app.drawer-open:not(.nav-pinned) .screen-clinic:not([hidden]) .clinic-sidebar {
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.app.drawer-open:not(.nav-pinned) .screen-clinic:not([hidden]) .clinic-drawer-backdrop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 35;
}

@media (min-width: 1024px) {
  .app.layout-wide {
    max-width: 1440px;
  }

  .app.nav-pinned,
  .app.nav-pinned.layout-wide {
    max-width: none;
    width: 100%;
  }

  .app.nav-pinned .clinic-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app.nav-pinned .clinic-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }

  .ops-module-board,
  .clinic-module-board,
  .ops-tenant-board {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .ops-module-board .ops-module-editor,
  .clinic-module-board .ops-module-editor {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .try-dialog {
    width: min(100vw - 32px, 560px);
  }

  .app[data-shell="picture-naming"],
  .app[data-shell="go-no-go"],
  .app[data-shell="reverse-thinking-tasks"],
  .app[data-shell="simon-says"],
  .app[data-shell="traffic-light-response"],
  .app[data-shell="continuous-performance-test"],
  .app[data-shell="reaction-time-tests"],
  .app[data-shell="assembly-line-task"],
  .app[data-shell="stop-signal-tasks"],
  .app[data-shell="auditory-selective-attention"],
  .app[data-shell="musical-rhythm"],
  .app[data-shell="pacing-practice"],
  .app[data-shell="button-sequence-memory"],
  .app[data-shell="virtual-piano-music-games"],
  .app[data-shell="trail-making-test"],
  .app[data-shell="visual-search"],
  .app[data-shell="spot-the-difference"],
  .app[data-shell="whack-a-mole-style"],
  .app[data-shell="bird-watching"],
  .app[data-shell="environmental-modification"],
  .app[data-shell="bathing-safety"],
  .app[data-shell="map-navigation"],
  .app[data-shell="visual-scanning"],
  .app[data-shell="home-safety-inspector"],
  .app[data-shell="number-line-tasks"],
  .app[data-shell="target-tracking"],
  .app[data-shell="multi-object-tracking"],
  .app[data-shell="word-search-puzzles"],
  .app[data-shell="hidden-object-games"],
  .app[data-shell="precision-tapping"],
  .app[data-shell="contrast-sensitivity"],
  .app[data-shell="dual-task"],
  .app[data-shell="spatial-memory-grid"],
  .app[data-shell="route-memory"],
  .app[data-shell="maze-navigation"],
  .app[data-shell="garden-growing"],
  .app[data-shell="tower-of-hanoi"],
  .app[data-shell="sudoku"],
  .app[data-shell="block-design"],
  .app[data-shell="n-back-tasks"],
  .app[data-shell="word-association"],
  .app[data-shell="audio-sequence-recall"],
  .app[data-shell="familiar-object-recognition"],
  .app[data-shell="task-switching"],
  .app[data-shell="first-sound-identification"],
  .app[data-shell="card-matching"],
  .app[data-shell="audio-visual-matching"],
  .app[data-shell="background-noise-filtering"],
  .app[data-shell="inspection-time-tasks"],
  .app[data-shell="spatial-relations"],
  .app[data-shell="semantic-memory-quizzes"],
  .app[data-shell="word-generation"],
  .app[data-shell="event-based-memory"],
  .app[data-shell="fragmented-pictures"],
  .app[data-shell="simple-sorting"],
  .app[data-shell="synonym-antonym-matching"],
  .app[data-shell="season-recognition"],
  .app[data-shell="age-appropriate-activities"],
  .app[data-shell="time-estimation"],
  .app[data-shell="medication-reminder-tasks"],
  .app[data-shell="budget-management"],
  .app[data-shell="medication-management"],
  .app[data-shell="delayed-gratification-tasks"],
  .app[data-shell="mental-math-challenges"],
  .app[data-shell="number-sequencing"],
  .app[data-shell="rhyme-recognition"],
  .app[data-shell="sound-blending"],
  .app[data-shell="category-switching"],
  .app[data-shell="laundry-sorting"],
  .app[data-shell="stroop-test"],
  .app[data-shell="speed-sorting"],
  .app[data-shell="rapid-decision-making"],
  .app[data-shell="color-naming-speed"],
  .app[data-shell="multi-category-sorting"],
  .app[data-shell="flanker-task"],
  .app[data-shell="mental-rotation"],
  .app[data-shell="mirror-image-tasks"],
  .app[data-shell="spaced-retrieval"],
  .app[data-shell="clock-reading-and-setting"],
  .app[data-shell="time-calculation"],
  .app[data-shell="money-management"],
  .app[data-shell="estimation-tasks"],
  .app[data-shell="rapid-number-comparison"],
  .app[data-shell="quick-math"],
  .app[data-shell="emergency-response"],
  .app[data-shell="face-name-association"],
  .app[data-shell="mnemonic-training"],
  .app[data-shell="cross-modal-memory"],
  .app[data-shell="reminiscence-games"],
  .app[data-shell="face-recognition"],
  .app[data-shell="calendar-skills"],
  .app[data-shell="facial-expression-matching"],
  .app[data-shell="emotion-from-context"],
  .app[data-shell="conversation-skills"],
  .app[data-shell="idiom-interpretation"],
  .app[data-shell="conflict-resolution"],
  .app[data-shell="compound-word-building"],
  .app[data-shell="story-recall"],
  .app[data-shell="math-word-problems"],
  .app[data-shell="story-completion"],
  .app[data-shell="troubleshooting-scenarios"],
  .app[data-shell="freezing-prevention"],
  .app[data-shell="perspective-taking-social"],
  .app[data-shell="bill-payment"],
  .app[data-shell="social-faux-pas-recognition"],
  .app[data-shell="error-detection"],
  .app[data-shell="syllable-counting"],
  .app[data-shell="skip-counting"],
  .app[data-shell="word-flash"],
  .app[data-shell="symbol-matching"],
  .app[data-shell="pitch-discrimination"],
  .app[data-shell="body-language-interpretation"],
  .app[data-shell="figure-ground-discrimination"],
  .app[data-shell="wisconsin-card-sorting"],
  .app[data-shell="timed-pattern-recognition"],
  .app[data-shell="pattern-recognition-with-rule-changes"],
  .app[data-shell="category-fluency"],
  .app[data-shell="picture-description"],
  .app[data-shell="daily-routine-sequencing"],
  .app[data-shell="historical-event-sequencing"],
  .app[data-shell="shopping-list-memory"],
  .app[data-shell="following-complex-instructions"],
  .app[data-shell="anagrams"],
  .app[data-shell="sentence-building"] {
    max-width: 960px;
  }

  .screen-audio .audio-keys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .screen-picture.screen-session .picture-layout,
  .screen-gng.screen-session .gng-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    flex: 1;
  }

  .screen-search.screen-session .search-layout {
    display: grid;
    gap: 32px;
    align-items: stretch;
    flex: 1;
  }

  .screen-search.screen-session .search-layout[data-dock="right"] {
    grid-template-columns: 1fr minmax(220px, 280px);
    grid-template-areas: "field dock";
  }

  .screen-search.screen-session .search-layout[data-dock="left"] {
    grid-template-columns: minmax(220px, 280px) 1fr;
    grid-template-areas: "dock field";
  }

  .screen-search.screen-session .search-field-wrap {
    grid-area: field;
  }

  .screen-search.screen-session .search-dock {
    grid-area: dock;
  }

  .screen-dual.screen-session .dual-layout {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 320px);
    gap: 32px;
    align-items: stretch;
    flex: 1;
  }

  .picture-stage,
  .gng-stage,
  .search-field-wrap,
  .dual-path-wrap {
    justify-content: center;
  }

  .picture-frame,
  .gng-cue.is-go,
  .gng-cue.is-wait,
  .gng-cue.is-stop,
  .gng-cue.is-caution,
  .dual-step {
    width: 280px;
    height: 280px;
  }

  .naming-controls,
  .gng-dock,
  .search-dock,
  .dual-dock {
    position: static;
    justify-content: flex-end;
  }

  .clinic-help {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
    flex: 1;
  }
}

/* ---- Shared design-system kit (WEBK-*): same Digit Span + caregiver chrome as the Android Player ---- */

/* Indic scripts need a taller line box for matras above and below (UX-02 Indic text styles). */
:root[lang='hi'] body,
:root[lang='mr'] body {
  line-height: 1.7;
}

:root[lang='hi'] h1,
:root[lang='mr'] h1 {
  font-size: 30px;
  line-height: 48px;
}

.body-lg {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
}

:root[lang='hi'] .body-lg {
  line-height: var(--type-body-lg-indic-line);
}

.btn-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-compact);
  height: var(--target-compact);
  padding: 0;
  border: 2px solid var(--color-control-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.btn-pause .icon {
  width: 24px;
  height: 24px;
}

.stage-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(260px, 60vw);
  height: min(260px, 60vw);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}

.stage-tile .digit {
  font-size: min(var(--type-digit-stage-size), 40vw);
  line-height: 1;
  min-height: 0;
}

.recall-title {
  margin: 0;
  font-size: var(--type-heading-md-size);
  line-height: var(--type-heading-md-line);
}

.answer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  letter-spacing: 0;
  min-height: 80px;
}

.answer-bar .slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 56px;
  padding: 0 6px;
  border-bottom: 3px solid var(--color-control-line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--type-digit-slot-size);
  line-height: var(--type-digit-slot-line);
  font-weight: 700;
}

.answer-bar .slot.is-next {
  border-bottom-color: var(--color-progress);
}

.key.key-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-sunk);
  font-size: 20px;
}

.key.key-secondary .icon {
  width: 36px;
  height: 36px;
}

.key.key-hint:disabled {
  opacity: 0.45;
}

.feedback-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.feedback-card.is-retry {
  background: var(--color-notice-ground);
  color: var(--color-notice-ink);
}

.feedback-icon {
  width: 96px;
  height: 96px;
  color: var(--color-brand);
}

.feedback-card.is-retry .feedback-icon {
  color: var(--color-notice-ink);
}

.feedback-title {
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
}

:root[lang='hi'] .feedback-title {
  font-size: var(--type-heading-lg-indic-size);
  line-height: var(--type-heading-lg-indic-line);
}

.feedback-card p {
  margin: 0;
  color: var(--color-ink-muted);
}

.feedback-card.is-retry p {
  color: var(--color-notice-ink);
}

.pref-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.segmented {
  display: inline-flex;
  overflow: hidden;
  border: 2px solid var(--color-control-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.segment {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.segment[aria-checked='true'] {
  background: var(--color-ink);
  color: var(--color-surface);
}

.segment[lang='hi'] {
  font-family: var(--font-ui);
}

.metric-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.metric-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
}

.metric-check input {
  margin-top: 6px;
}

.clinic-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.progress-head-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 160px;
}

.progress-head-copy h1 {
  font-size: 28px;
}

.progress-head-actions {
  display: flex;
  flex-shrink: 0;
}

.clinic-progress .progress-head .btn-primary {
  width: auto;
  min-height: 56px;
  padding: 0 18px;
}

.progress-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.progress-player-field {
  display: flex;
  min-width: min(100%, 220px);
  flex: 1 1 220px;
  max-width: 360px;
}

.progress-player-select {
  width: 100%;
}

.progress-toolbar .segmented {
  flex: 0 0 auto;
}

.progress-toolbar .segment {
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
}

.progress-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-card, 16px);
  background: var(--color-surface);
}

.progress-empty .btn-icon {
  align-self: flex-start;
}

.progress-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-card, 16px);
  background: var(--color-surface);
  min-width: 0;
}

.progress-card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.progress-card-lead h2 {
  font-size: 20px;
}

.progress-meta {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 14px;
}

.progress-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.progress-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-ground);
  color: var(--color-ink-muted);
  font-size: 12px;
  font-weight: 700;
}

.progress-insight {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.progress-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.progress-stat strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

:root[lang='hi'] .progress-stat strong {
  font-family: var(--font-ui);
  font-weight: 700;
}

.progress-stat span {
  color: var(--color-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.progress-visual {
  max-width: 100%;
  overflow-x: auto;
}

.progress-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.progress-recent-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-recent-wrap h2 {
  font-size: 18px;
}

.progress-recent {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-card, 16px);
  background: var(--color-surface);
  overflow: hidden;
}

.progress-recent-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-control-line, #d8cfc2);
  font-size: 14px;
}

.progress-recent-row:last-child {
  border-bottom: 0;
}

.progress-recent-date,
.progress-recent-hints {
  color: var(--color-ink-muted);
}

.progress-recent-game {
  font-weight: 700;
}

.progress-recent-result {
  min-width: 0;
}

@media (max-width: 719px) {
  .progress-head {
    flex-direction: column;
    align-items: stretch;
  }

  .progress-head-actions {
    width: 100%;
  }

  .clinic-progress .progress-head .btn-primary,
  #clinicCaseloadPane .progress-head .btn-primary {
    width: 100%;
    min-height: 48px;
  }

  .progress-player-field {
    max-width: none;
    flex: 1 1 100%;
  }

  .progress-recent-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'game date'
      'result hints'
      'tag tag';
  }

  .progress-recent-date {
    grid-area: date;
    justify-self: end;
  }

  .progress-recent-game {
    grid-area: game;
  }

  .progress-recent-result {
    grid-area: result;
  }

  .progress-recent-hints {
    grid-area: hints;
    justify-self: end;
  }

  .progress-recent-row .progress-tag {
    grid-area: tag;
    justify-self: start;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .progress-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-card-lead {
    grid-column: 1 / -1;
  }

  .progress-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .progress-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .progress-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .progress-card-lead {
    grid-column: 1 / -1;
  }
}

.progress-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-card, 16px);
  background: var(--color-surface);
}

.progress-chart {
  display: block;
  max-width: 100%;
  overflow: visible;
}

.chart-bar {
  fill: var(--color-action);
}

.chart-bar.is-last {
  fill: var(--color-ink);
}

.chart-hatch {
  stroke: var(--color-surface);
  stroke-width: 2;
}

.chart-empty {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.chart-track {
  fill: var(--color-ground, #f7f1e8);
  stroke: var(--color-ink);
  stroke-width: 1;
}

.chart-label,
.chart-value {
  fill: var(--color-ink);
  font-size: 11px;
}

.chart-label.is-row,
.chart-value.is-row {
  font-size: 12px;
}

.week-strip-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.week-cell {
  min-width: 32px;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid var(--color-ink);
  font-size: 12px;
  font-weight: 700;
}

.week-cell.is-done {
  background: var(--color-ink);
  color: var(--color-surface);
}

.usage-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-control-line, #d8cfc2);
}

.practice-link-dialog {
  max-width: 520px;
  width: calc(100vw - 32px);
}

.practice-link-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#practiceLinkUrl {
  word-break: break-all;
}

.progress-print {
  font-family: Inter, "Noto Sans Devanagari", system-ui, sans-serif;
  color: #1e1c18;
}

.pp-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #2f6f62;
}

.pp-brand {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-ligatures: none;
}

.pp-kicker,
.pp-issued,
.pp-window,
.pp-foot {
  margin: 0;
  color: #5c574e;
  font-size: 12px;
}

.pp-player {
  margin: 16px 0 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-ligatures: none;
}

.pp-claim {
  margin: 12px 0 20px;
  padding: 10px 12px;
  background: #f3e6c8;
  color: #5c4a17;
  border-radius: 8px;
  font-size: 13px;
}

.pp-block {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e6dccb;
  border-radius: 10px;
}

.pp-block h2 {
  margin: 0 0 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2f6f62;
}

.pp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pp-stat {
  min-width: 0;
  padding: 8px;
  background: #f7f1e8;
  border-radius: 8px;
}

.pp-stat strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.pp-stat span {
  display: block;
  margin-top: 2px;
  color: #5c574e;
  font-size: 11px;
  line-height: 1.3;
}

.pp-meta-line,
.pp-strip-label,
.pp-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #5c574e;
}

.pp-strip {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.pp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #2f6f62;
  border-radius: 6px;
  color: transparent;
  font-size: 10px;
}

.pp-dot.is-done {
  background: #2f6f62;
  color: #2f6f62;
}

.pp-weeks,
.pp-recent {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 11px;
}

.pp-weeks caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 4px;
  color: #5c574e;
  font-weight: 600;
}

.pp-weeks th,
.pp-weeks td,
.pp-recent th,
.pp-recent td {
  padding: 5px 6px;
  border-bottom: 1px solid #e6dccb;
  text-align: left;
}

.pp-weeks th {
  color: #5c574e;
  font-weight: 600;
}

.pp-foot {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #e6dccb;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    background: #fff !important;
    color: #1e1c18;
    min-height: 0;
  }

  body > *:not(#clinicProgressReport) {
    display: none !important;
  }

  #clinicProgressReport,
  #clinicProgressReport[hidden] {
    display: block !important;
    position: static !important;
    inset: auto;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
    background: #fff;
    color: #1e1c18;
  }

  .pp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}