/* Components. Compact by design: everything a page needs fits in one window. */

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  block-size: var(--size-control);
  min-inline-size: var(--size-control);
  padding-inline: var(--space-4);
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:focus-visible {
  border-radius: var(--radius-pill);
}

.btn:active:not([aria-disabled="true"]):not(:disabled) {
  transform: scale(0.97);
}

.btn--lg {
  block-size: var(--size-control-lg);
  padding-inline: var(--space-5);
  font-size: var(--text-base);
}

.btn--sm {
  block-size: 2rem;
  min-inline-size: 2rem;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}

.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-on-action);
}

@media (hover: hover) {
  .btn--primary:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--color-action-primary-hover);
  }
}

.btn--primary:active:not([aria-disabled="true"]):not(:disabled) {
  background: var(--color-action-primary-active);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

@media (hover: hover) {
  .btn--secondary:hover:not([aria-disabled="true"]):not(:disabled) {
    background: var(--color-selected-bg);
    border-color: var(--color-text-primary);
  }
}

.btn--secondary:active:not([aria-disabled="true"]):not(:disabled) {
  background: var(--color-border-subtle);
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-control);
  block-size: var(--size-control);
  border-radius: var(--radius-pill);
  border: var(--border-strong) solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .icon-btn:hover {
    background: var(--color-selected-bg);
  }
}

.icon-btn:active {
  background: var(--color-border-subtle);
}

.icon-btn:focus-visible {
  border-radius: var(--radius-pill);
}

.icon-btn .icon--sun {
  display: none;
}

:root[data-theme="dark"] .icon-btn .icon--sun {
  display: block;
}

:root[data-theme="dark"] .icon-btn .icon--moon {
  display: none;
}

/* ---------- stage: the visual area ---------- */

.stagebox {
  position: relative;
  flex: 1;
  min-block-size: 0;
  container-type: size;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.stagebox--dark {
  background: radial-gradient(120% 90% at 50% 0%, var(--color-stage-edge) 0%, var(--color-stage) 70%);
}

.stagebox__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  overflow: auto;
}

.stage__frame {
  position: relative;
  inline-size: 100%;
  /* минус отступы .stagebox__inner, иначе рамка шире сцены и появляется прокрутка */
  inline-size: min(100cqw - 2 * var(--space-3), (100cqh - 2 * var(--space-3)) * 16 / 9);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-stage);
}

.stage__frame iframe,
.stage__frame video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Свой видеофайл: светлая рамка без тёмной сцены и обложка с кнопкой до запуска */
.stagebox--plain {
  background: none;
}

.stage__frame--file {
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
  box-shadow: var(--shadow-raised);
}

.stage__cover {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 0;
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.stage__cover-play {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  display: grid;
  place-items: center;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  box-shadow: var(--shadow-raised);
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.stage__cover-play .icon {
  fill: currentColor;
}

.stage__cover-title {
  font-size: var(--text-xl);
  font-weight: 700;
  text-wrap: balance;
}

.stage__cover-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  .stage__cover:hover .stage__cover-play {
    background: var(--color-action-primary-hover);
    transform: scale(1.06);
  }
}

.stage__cover:focus-visible {
  box-shadow: none;
}

.stage__cover:focus-visible .stage__cover-play {
  box-shadow: var(--shadow-focus-ring);
}

.stage__cover:active .stage__cover-play {
  background: var(--color-action-primary-active);
  transform: scale(0.97);
}

/* ---------- video player (js/player.js) ---------- */

.player {
  color: var(--player-fg);
  isolation: isolate;
}

.player:focus {
  outline: none;
}

.player:focus-visible {
  box-shadow: var(--shadow-focus-ring);
}

.player video {
  background: var(--color-stage);
  object-fit: contain;
}

.player[data-full="true"] {
  border-radius: 0;
  border: 0;
}

/* cover: poster frame, shade, play button, module, title, length */
.player__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: var(--color-stage);
  color: var(--player-fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

.player__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* a frame of our own lecture: its bottom band holds burned-in subtitles, so it is pushed out of the cover */
.player__poster--frame {
  block-size: 113%;
  object-position: top;
  transform-origin: top;
}

.player__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--player-shade) 0%, var(--player-shade) 14%, var(--player-shade-mid) 42%, var(--player-shade-none) 72%);
}

.player__cover-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: var(--player-big);
  block-size: var(--player-big);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  box-shadow: var(--shadow-overlay);
  transform: translate(-50%, -50%);
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.player__cover-play .icon,
.player__big .icon {
  fill: currentColor;
}

.player__cover-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-4);
}

.player__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--player-fill);
}

.player__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.player__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--player-fg-soft);
}

.player__meta .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (hover: hover) {
  .player__cover:hover .player__poster {
    transform: scale(1.03);
  }

  .player__cover:hover .player__cover-play {
    background: var(--color-action-primary-hover);
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.player__cover:focus-visible {
  outline: none;
}

.player__cover:focus-visible .player__cover-play {
  box-shadow: var(--shadow-focus-ring);
}

.player__cover:active .player__cover-play {
  background: var(--color-action-primary-active);
  transform: translate(-50%, -50%) scale(0.97);
}

/* controls */
.player__ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.player__ui > * {
  pointer-events: auto;
}

.player__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-3) var(--space-2);
  background: linear-gradient(to top, var(--player-shade) 0%, var(--player-shade-mid) 55%, var(--player-shade-none) 100%);
  transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-out);
}

.player[data-idle="true"] .player__bar,
.player[data-idle="true"] .player__big {
  opacity: 0;
  transform: translateY(var(--space-2));
  pointer-events: none;
}

.player[data-idle="true"] {
  cursor: none;
}

.player__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
}

.player__spacer {
  flex: 1;
}

.player__btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--player-btn);
  block-size: var(--player-btn);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--player-fg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .player__btn:hover {
    background: var(--player-hover);
  }
}

.player__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.player__btn:active {
  transform: scale(0.92);
}

.player__btn[aria-expanded="true"] {
  background: var(--player-hover);
}

.player__btn[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}

.player__btn .icon {
  transition: transform var(--duration-moderate) var(--ease-out);
}

/* speed or quality, shown on the settings button when it is not the default */
.player__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--player-chip-on);
  color: var(--player-on-chip);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
}

.player__badge:empty {
  display: none;
}

.player__time {
  flex: none;
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player__volume {
  display: flex;
  align-items: center;
}

.player__range--vol {
  inline-size: 0;
  opacity: 0;
  transition: inline-size var(--duration-moderate) var(--ease-out), opacity var(--duration-moderate) var(--ease-out);
}

.player__volume:hover .player__range--vol,
.player__volume:focus-within .player__range--vol {
  inline-size: 5rem;
  opacity: 1;
  margin-inline: var(--space-1) var(--space-2);
}

/* sliders: seek and volume */
.player__seek {
  position: relative;
  display: grid;
  align-items: center;
  block-size: var(--space-5);
}

.player__buffer {
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--b, 0%);
  block-size: var(--player-bar-h);
  border-radius: var(--radius-pill);
  background: var(--player-buffer);
  pointer-events: none;
  transition: block-size var(--duration-fast) var(--ease-out);
}

.player__range {
  --p: 0%;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  inline-size: 100%;
  block-size: var(--player-bar-h);
  margin: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--player-fill) var(--p), transparent var(--p)), var(--player-track);
  cursor: pointer;
  transition: block-size var(--duration-fast) var(--ease-out);
}

.player__seek .player__range {
  background: linear-gradient(to right, var(--player-fill) var(--p), transparent var(--p));
}

.player__seek::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--player-bar-h);
  border-radius: var(--radius-pill);
  background: var(--player-track);
  pointer-events: none;
  transition: block-size var(--duration-fast) var(--ease-out);
}

.player__seek:hover .player__range,
.player__seek:hover::before,
.player__seek:hover .player__buffer {
  block-size: var(--player-bar-h-hover);
}

.player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: var(--player-thumb);
  block-size: var(--player-thumb);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--player-fill);
  box-shadow: 0 0 0 var(--border-strong) var(--player-shade-mid);
}

.player__range::-moz-range-thumb {
  inline-size: var(--player-thumb);
  block-size: var(--player-thumb);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--player-fill);
}

.player__range:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.player__tip {
  position: absolute;
  inset-block-end: calc(100% + var(--space-1));
  inset-inline-start: var(--x, 0%);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--player-panel);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  pointer-events: none;
}

/* big play / pause in the middle while paused, spinner while loading */
.player__big {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: var(--player-big);
  block-size: var(--player-big);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--player-panel);
  color: var(--player-fg);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.player[data-paused="false"] .player__big,
.player[data-loading="true"] .player__big {
  opacity: 0;
  pointer-events: none;
}

.player__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3rem;
  block-size: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 0.25rem solid var(--player-track);
  border-block-start-color: var(--player-fill);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
  animation: player-spin var(--player-spin) linear infinite;
}

.player[data-loading="true"] .player__spinner {
  opacity: 1;
}

@keyframes player-spin {
  to {
    transform: rotate(1turn);
  }
}

/* settings: speed and quality */
.player__menu {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-end: calc(var(--player-btn) + var(--space-7));
  inline-size: min(19rem, calc(100% - 2 * var(--space-3)));
  max-block-size: calc(100% - var(--player-btn) - var(--space-8));
  overflow: auto;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--player-panel-line);
  border-radius: var(--radius-md);
  background: var(--player-panel);
  box-shadow: var(--shadow-overlay);
}

.player__menu-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--player-fg-soft);
}

.player__menu-title .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.player__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.player__chip {
  min-block-size: 2rem;
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline) solid var(--player-panel-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--player-fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .player__chip:hover:not([aria-pressed="true"]) {
    background: var(--player-hover);
  }
}

.player__chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.player__chip[aria-pressed="true"] {
  border-color: var(--player-chip-on);
  background: var(--player-chip-on);
  color: var(--player-on-chip);
}

/* narrow frames: fewer buttons */
@container (max-width: 30rem) {
  .player [data-act="back"],
  .player [data-act="fwd"],
  .player__volume .player__range--vol {
    display: none;
  }

  .player__title {
    font-size: var(--text-lg);
  }

  .player__cover-play,
  .player__big {
    --player-big: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player__spinner {
    animation-duration: var(--player-spin-slow);
  }

  .player__poster,
  .player__bar {
    transition: none;
  }
}

/* ---------- speech: mascot and speaker ---------- */

.voices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-3);
  align-items: start;
  min-block-size: 4.5rem;
}

.voices > [data-slot]:empty {
  display: none;
}

.voices:has(> [data-slot]:empty:first-child) {
  grid-template-columns: minmax(0, 1fr);
}

.say {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  animation: say-in var(--duration-moderate) var(--ease-out) both;
}

.say--right {
  flex-direction: row-reverse;
}

.say__who {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  inline-size: 3.5rem;
}

.say__avatar {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.say__avatar svg {
  inline-size: 100%;
  block-size: 100%;
}

.say__name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.15;
}

.say__bubble {
  position: relative;
  margin-block-start: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
  font-size: var(--text-sm);
  line-height: 1.45;
  max-block-size: 8.75rem;
  overflow: hidden;
  text-wrap: pretty;
}

.say[data-expanded="true"] .say__bubble {
  max-block-size: 45vh;
  overflow: auto;
}

.say__more {
  margin-block-start: var(--space-1);
  padding: 0.125rem var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-link);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: underline;
  border-radius: var(--radius-sm);
}

.say__stack {
  flex: 1;
  display: grid;
  justify-items: start;
  min-inline-size: 0;
}

.say__bubble::before {
  content: "";
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-start: -0.36rem;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background: inherit;
  border-inline-start: var(--border-hairline) solid var(--color-border-subtle);
  border-block-end: var(--border-hairline) solid var(--color-border-subtle);
  transform: rotate(45deg);
}

.say--right .say__bubble::before {
  inset-inline-start: auto;
  inset-inline-end: -0.36rem;
  border-inline-start: 0;
  border-block-end: 0;
  border-inline-end: var(--border-hairline) solid var(--color-border-subtle);
  border-block-start: var(--border-hairline) solid var(--color-border-subtle);
}

.say--speaker .say__bubble {
  background: var(--color-surface-sunken);
}

.say__bubble--warn {
  border-color: var(--color-wrong-bg);
  border-width: var(--border-strong);
}

.say__play {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block-start: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .say__play:hover {
    background: var(--color-action-primary-hover);
  }
}

.say__play:active {
  background: var(--color-action-primary-active);
  transform: scale(0.95);
}

.say__play:focus-visible {
  border-radius: var(--radius-pill);
}

.say__play .icon--pause,
.say__play[data-playing="true"] .icon--play {
  display: none;
}

.say__play[data-playing="true"] .icon--pause {
  display: block;
}

.wave {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--bar-width);
  block-size: 0.8rem;
  margin-inline-start: var(--space-2);
  vertical-align: middle;
}

.wave i {
  inline-size: var(--bar-width);
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  transform-origin: bottom;
  animation: wave 1s var(--ease-in-out) infinite;
}

.wave i:nth-child(2) { animation-delay: 0.15s; }
.wave i:nth-child(3) { animation-delay: 0.3s; }
.wave i:nth-child(4) { animation-delay: 0.45s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@keyframes say-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- task panel ---------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-block-size: 0;
  block-size: 100%;
  overflow: auto;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
  scroll-behavior: smooth;
}

.panel__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.panel__title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 700;
  text-wrap: pretty;
}

.task {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.task__head {
  display: grid;
  gap: var(--space-1);
}

.task fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.task__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.task__status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ---------- choices ---------- */

.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-strong) solid var(--color-border-subtle);
  background: var(--color-surface-page);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--color-action-primary);
  }
}

.choice:active {
  transform: scale(0.99);
}

.choice input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.choice:has(input:focus-visible) {
  box-shadow: var(--shadow-focus-ring);
}

.choice__key {
  inline-size: 1.625rem;
  block-size: 1.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--text-xs);
  font-weight: 700;
}

.choice__text {
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.choice__result {
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
}

.choice:has(input:checked) {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-border);
}

.choice[data-state] {
  cursor: default;
}

@media (hover: hover) {
  .choice[data-state]:hover {
    transform: none;
  }
}

.task .choice[data-state="correct"],
.task .item[data-state="correct"] {
  background: var(--color-correct-bg);
  border-color: var(--color-correct-bg);
  color: var(--color-on-correct);
}

.task .choice[data-state="wrong"],
.task .item[data-state="wrong"] {
  background: var(--color-wrong-bg);
  border-color: var(--color-wrong-bg);
  color: var(--color-on-wrong);
}

.task .choice[data-state="correct"] .choice__key,
.task .choice[data-state="wrong"] .choice__key {
  background: var(--color-veil-dark);
  color: inherit;
}

.choice[data-state] .choice__result {
  display: inline-flex;
}

.choice[data-locked="true"]:not([data-state]) {
  cursor: default;
}

@media (hover: hover) {
  .choice[data-locked="true"]:not([data-state]):hover {
    border-color: var(--color-border-subtle);
  }
}

.choice[data-locked="true"]:not([data-state]):active {
  transform: none;
}

.choice--check .choice__key {
  border-radius: var(--radius-sm);
}

.choice--check:has(input:checked) .choice__key {
  background: var(--color-action-primary);
  color: var(--color-on-action);
}

/* ---------- generic selectable item (hunt, pick, chips) ---------- */

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--space-2);
}

.items > li {
  display: grid;
}

.item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  block-size: 100%;
  min-block-size: var(--size-control);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-strong) solid var(--color-border-subtle);
  background: var(--color-surface-page);
  text-align: start;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .item:hover:not([data-state]):not([aria-disabled="true"]) {
    border-color: var(--color-action-primary);
  }
}

.item:active:not([data-state]):not([aria-disabled="true"]) {
  transform: scale(0.98);
}

.item[aria-pressed="true"]:not([data-state]) {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-border);
}

.item[aria-disabled="true"]:not([data-state]):not([data-locked]) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.item[data-locked="true"]:not([data-state]) {
  cursor: default;
}

.item[data-state] {
  cursor: default;
}

.item__icon {
  color: var(--color-text-secondary);
}

.item[data-state] .item__icon {
  color: inherit;
}

.item__tick {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  display: grid;
  place-items: center;
}

/* ---------- audio / explanation block ---------- */

.feedback {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-moderate) var(--ease-out);
}

.feedback[data-open="true"] {
  grid-template-rows: 1fr;
}

.feedback__clip {
  overflow: hidden;
  min-block-size: 0;
}

.audio {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border: var(--border-hairline) solid var(--color-border-subtle);
}

.audio__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.audio__play {
  inline-size: var(--size-control);
  block-size: var(--size-control);
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .audio__play:hover {
    background: var(--color-action-primary-hover);
  }
}

.audio__play:active {
  background: var(--color-action-primary-active);
  transform: scale(0.95);
}

.audio__play:focus-visible {
  border-radius: var(--radius-pill);
}

.audio__play .icon--pause,
.audio[data-playing="true"] .audio__play .icon--play {
  display: none;
}

.audio[data-playing="true"] .audio__play .icon--pause {
  display: block;
}

.audio__track {
  flex: 1;
  min-inline-size: 0;
  display: grid;
}

.audio__range {
  inline-size: 100%;
  block-size: 1.5rem;
  margin: 0;
  background: transparent;
  accent-color: var(--color-action-primary);
  cursor: pointer;
}

.audio__range:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.audio__time {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.audio__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.audio__outcome {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
}

.audio__transcript {
  font-size: var(--text-sm);
  line-height: 1.5;
  text-wrap: pretty;
}

.audio__status {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ---------- case card ---------- */

.case {
  border-radius: var(--radius-md);
  background: var(--color-surface-page);
  border: var(--border-hairline) solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.case > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  min-block-size: var(--size-control);
  border-radius: var(--radius-md);
}

.case > summary::-webkit-details-marker {
  display: none;
}

.case > summary .icon:last-child {
  margin-inline-start: auto;
  transition: transform var(--duration-base) var(--ease-out);
}

.case[open] > summary .icon:last-child {
  transform: rotate(180deg);
}

.case__body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  color: var(--color-text-primary);
}

.case__body ul {
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-4);
  list-style: disc;
}

.case__note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ---------- reward banner ---------- */

.reward-slot {
  position: fixed;
  inset-block-start: calc(var(--size-header) + var(--space-2));
  inset-inline-end: var(--gutter);
  z-index: var(--z-overlay);
  inline-size: min(26rem, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-out);
}

.reward-slot[data-open="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reward-slot__clip {
  min-block-size: 0;
}

.reward {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-raised);
}

.reward__badge {
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-on-accent);
  color: var(--color-accent);
}

.reward__body {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  line-height: 1.25;
}

.reward__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.reward__title {
  font-size: var(--text-base);
  font-weight: 700;
}

.reward .icon-btn {
  color: var(--color-on-accent);
}

@media (hover: hover) {
  .reward .icon-btn:hover {
    background: var(--color-veil-accent);
  }
}

/* ---------- hero HUD ---------- */

.hud {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15rem var(--space-3) 0.15rem 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.hud__avatar {
  inline-size: var(--size-avatar-sm);
  block-size: var(--size-avatar-sm);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-page);
}

.hud__avatar svg {
  inline-size: 100%;
  block-size: 100%;
}

.hud__meta {
  display: grid;
  line-height: 1.15;
  font-size: var(--text-xs);
}

.hud__level {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.hud__stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hud__stars .icon {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--color-accent);
  fill: var(--color-accent);
  stroke: var(--color-on-accent);
}

.hud[data-pulse="true"] {
  animation: hud-pulse var(--duration-slow) var(--ease-out);
}

@keyframes hud-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- dialogs ---------- */

.scene-dialog {
  inline-size: min(32rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-overlay);
  overflow: auto;
}

.scene-dialog--wide {
  inline-size: min(44rem, calc(100vw - 2rem));
}

.scene-dialog::backdrop {
  background: var(--color-scrim);
}

.scene-dialog[open] {
  animation: dialog-in var(--duration-slow) var(--ease-out) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

.scene-dialog__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}

.scene-dialog__inner--left {
  justify-items: stretch;
  text-align: start;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.levelup__hero {
  position: relative;
  inline-size: 8rem;
  block-size: 8rem;
  display: grid;
  place-items: center;
}

.levelup__glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(closest-side, var(--color-accent-soft), transparent 72%);
  opacity: 0.8;
}

.levelup__avatar {
  position: relative;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-sunken);
  transform: scale(0.65);
  animation: grow var(--duration-slow) var(--ease-out) 0.35s forwards;
}

.levelup__avatar svg {
  inline-size: 100%;
  block-size: 100%;
}

@keyframes grow {
  from { transform: scale(0.65); }
  to { transform: scale(1); }
}

.levelup__level {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: var(--text-sm);
}

.levelup__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  text-wrap: balance;
}

.levelup__ability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-wrap: balance;
}

/* a long ability ("СЛЫШУ ТЕХ, КОГО МОГУТ НЕ ЗАМЕТИТЬ") fits one line as a compact badge, wraps only on a phone */
.levelup__ability[data-long] {
  max-width: 100%;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.levelup__line {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-inline-size: 36ch;
  text-wrap: pretty;
}

/* Знакомство с героем после выбора маскота */
.welcome__hello {
  max-inline-size: 36ch;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-weight: 600;
  text-wrap: pretty;
}

.welcome__skills {
  justify-content: center;
}

.levelup__territory {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-strong) solid var(--color-correct-bg);
  text-align: start;
}

.levelup__territory .icon {
  color: var(--color-correct-bg);
}

:root[data-theme="dark"] .levelup__territory .icon {
  color: var(--p-green-300);
}

.territory__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
}

/* ---------- entrance reveal ---------- */

.reveal {
  animation: say-in var(--duration-moderate) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

@media (prefers-reduced-motion: reduce) {
  .say,
  .reveal,
  .scene-dialog[open] {
    animation: none;
  }

  .levelup__avatar {
    animation: none;
    transform: none;
  }

  .wave i {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* ---------- compact once answered, so the explanation fits next to the options ---------- */

.task[data-answered="true"] .panel__title {
  font-size: var(--text-base);
}

.task[data-answered="true"] .choice {
  min-block-size: 2.125rem;
  padding-block: 0.25rem;
}

.task[data-answered="true"] fieldset {
  gap: var(--space-1);
}

.audio {
  padding: var(--space-2) var(--space-3);
}

.audio__transcript {
  font-size: var(--text-sm);
  line-height: 1.45;
}

.panel {
  padding: var(--space-3) var(--space-4);
}

.panel > * {
  flex: none;
}

/* ---------- form fields (sign-in, sign-up) ---------- */

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__control {
  position: relative;
  display: flex;
}

.field__input {
  inline-size: 100%;
  block-size: var(--size-control-lg);
  padding-inline: var(--space-4);
  border: var(--border-strong) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.field__input--pw {
  padding-inline-end: calc(var(--size-control) + var(--space-3));
}

@media (hover: hover) {
  .field__input:hover:not(:disabled) {
    border-color: var(--color-text-primary);
  }
}

.field__input:focus-visible {
  border-color: var(--color-focus-ring);
  border-radius: var(--radius-md);
}

.field__input:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.field__input[aria-invalid="true"] {
  border-color: var(--color-wrong-bg);
}

.field__toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-1);
  margin-block: auto;
}

.field__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.field__hint:empty {
  display: none;
}

.field__error,
.auth__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.field__error .icon,
.auth__error .icon {
  flex: none;
  margin-block-start: 0.125rem;
  color: var(--color-wrong-bg);
}

:root[data-theme="dark"] .field__error .icon,
:root[data-theme="dark"] .auth__error .icon {
  color: var(--p-red-300);
}

.choice__icon {
  display: inline-block;
  vertical-align: -0.2em;
  margin-inline-end: var(--space-2);
  color: var(--color-action-primary);
}

.choice[data-state="correct"] .choice__icon,
.choice[data-state="wrong"] .choice__icon {
  color: inherit;
}

/* Finger-sized hit areas on touch screens. */
@media (pointer: coarse) {
  .btn--sm {
    block-size: var(--size-control);
    min-inline-size: var(--size-control);
  }

  .say__more,
  .choice,
  .item {
    min-block-size: var(--size-control);
  }

  .say__more {
    display: inline-flex;
    align-items: center;
  }

  .audio__range {
    block-size: var(--size-control);
  }
}

/* Ролика ещё нет: табличка вместо плеера */
.stage__cover--soon {
  cursor: default;
}

.stage__cover--soon .stage__cover-play {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  box-shadow: none;
}

.stage__cover--soon .stage__cover-play .icon {
  fill: none;
}

/* Реплики печатаются по словам (ui.typeSpeech) */
.tw {
  opacity: 0;
}

.tw[data-on="true"] {
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* у раскрытой реплики прокрутка только по вертикали */
.say[data-expanded="true"] .say__bubble {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Реплика, место под которую уже занято, но которая ещё не прозвучала (engine.js, reserve) */
.voices > [data-pending="true"] {
  visibility: hidden;
}

@media (min-width: 64rem) and (min-height: 38rem) {
  /* В режиме «в одно окно» раскрытая реплика не растёт, а прокручивается внутри: сцена над ней не сжимается */
  .say[data-expanded="true"] .say__bubble {
    max-block-size: 8.75rem;
  }
}

/* Невысокое окно (ноутбук 1366×768: в браузере около 640 px): реплика не выше четырёх строк, остальное в «Читать полностью»,
   чтобы сцене хватило места и схема не уходила под прокрутку */
@media (min-width: 64rem) and (min-height: 38rem) and (max-height: 47.5rem) {
  .say__bubble,
  .say[data-expanded="true"] .say__bubble {
    max-block-size: 5.75rem;
  }
}

/* Длинная реплика: обрезана с плавным затуханием, полный текст открывается в окне (ui.clampSpeech) */
.say__bubble[data-clamped="true"] {
  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent);
  mask-image: linear-gradient(to bottom, black 72%, transparent);
}

.say-full__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.say-full__who .say__avatar {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.say-full__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  max-inline-size: 60ch;
  text-wrap: pretty;
}

/* ---------- рост героя в окне «Модуль пройден»: прежний этап уходит, новый появляется со вспышкой ---------- */

.grow {
  position: relative;
  inline-size: min(100%, 16rem);
  block-size: 11rem;
  margin-inline: auto;
}

.grow > img {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin-inline: auto;
  block-size: calc(var(--h, 1) * 100%);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  transform-origin: center bottom;
  filter: var(--art-photo-filter);
  transition: opacity calc(var(--duration-slow) * 1.4) var(--ease-out), transform calc(var(--duration-slow) * 1.4) var(--ease-out);
}

.grow__new {
  opacity: 0;
  transform: scale(0.6);
}

.grow[data-grow="true"] .grow__old {
  opacity: 0;
  transform: scale(0.85) translateY(4%);
}

.grow[data-grow="true"] .grow__new {
  opacity: 1;
  transform: none;
  transition-delay: var(--duration-moderate);
}

.grow__burst {
  position: absolute;
  inset: 4% 8% 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(closest-side, var(--color-accent-soft), transparent 72%);
  opacity: 0;
  transform: scale(0.4);
}

.grow[data-grow="true"] .grow__burst {
  animation: grow-burst calc(var(--duration-slow) * 2.4) var(--ease-out) forwards;
}

@keyframes grow-burst {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0.55; transform: scale(1.1); }
}

.grow__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: 700;
}

.grow__pips {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grow__pips li {
  inline-size: 1.75rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
}

.grow__pips li[data-on="true"] {
  background: var(--color-accent);
}

.grow__pips li[data-new="true"] {
  animation: grow-pip var(--duration-slow) var(--ease-in-out) 3 alternate;
}

@keyframes grow-pip {
  to { transform: scaleY(1.8); }
}

/* ---------- кнопка и окно профиля ---------- */

.profile-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-control);
  block-size: var(--size-control);
  padding: 0;
  border-radius: var(--radius-pill);
  border: var(--border-strong) solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.profile-btn__face,
.profile__face {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-on-action);
  font-weight: 700;
  line-height: 1;
}

.profile-btn__face {
  inline-size: calc(var(--size-control) - 0.5rem);
  block-size: calc(var(--size-control) - 0.5rem);
  font-size: var(--text-xs);
}

.profile-btn__face .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (hover: hover) {
  .profile-btn:hover {
    background: var(--color-selected-bg);
  }
}

.profile-btn:active {
  background: var(--color-border-subtle);
}

.profile-btn:focus-visible {
  border-radius: var(--radius-pill);
}

.profile-btn[aria-expanded="true"],
.profile-btn[data-open="true"] {
  border-color: var(--color-selected-border);
}

.profile-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* one text size for every line of the profile, one size for the round pictures, even gaps */
.profile {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.profile .dialog-head {
  margin-block-end: 0;
}

.profile__who,
.profile__hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile__face,
.profile__avatar {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.profile__face {
  font-size: var(--text-base);
}

.profile__face .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.profile__who div,
.profile__hero div {
  display: grid;
  gap: 0.125rem;
  min-inline-size: 0;
}

.profile__who strong,
.profile__hero strong {
  font-size: var(--text-base);
}

.profile__who span,
.profile__hero span:not(.profile__avatar) {
  color: var(--color-text-secondary);
}

.profile__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hairline) solid var(--color-border-subtle);
}

.profile__row > span:last-child {
  font-weight: 600;
  text-align: end;
}

.profile__label {
  color: var(--color-text-secondary);
}

.profile__hero {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.profile__avatar svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.profile__sub {
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hairline) solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 400;
}

.profile__modules {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile__modules li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
}

.profile .task__actions {
  margin: 0;
}

.profile__count {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.profile__count .icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-correct-bg);
}

.profile__bar {
  grid-column: 1 / -1;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  overflow: hidden;
}

.profile__bar i {
  display: block;
  block-size: 100%;
  inline-size: var(--v);
  background: var(--color-action-primary);
}

.profile__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.profile__note .icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}

/* ---------- окно сертификата и страница проверки по номеру ---------- */

.cert-dlg {
  display: grid;
  gap: var(--space-3);
}

.cert-dlg__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--color-border-subtle);
  box-shadow: var(--shadow-raised);
}

.cert-dlg__meta {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.cert-check {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  inline-size: min(100%, 40rem);
  margin: var(--space-6) auto;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
}

.cert-check__title {
  margin: 0;
  font-size: var(--text-2xl);
}

.cert-check__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: 700;
}

.cert-check__state[data-ok="true"] .icon {
  color: var(--color-correct-bg);
}

.cert-check__state[data-ok="false"] .icon {
  color: var(--color-wrong-bg);
}

.cert-check__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.cert-check__list dt {
  color: var(--color-text-secondary);
}

.cert-check__list dd {
  margin: 0;
  font-weight: 600;
}