/*
 * Public pages of the redesign (docs/redesign/SCREENS.md §3, §5.2–5.3, §6, §9): the page shell
 * under the site header, the hero composition shared by the landing and the login page (one
 * panorama behind the illustration half and the glass card), the centred message card (404, a
 * missing recording), the reading pages (/help, /legal/*), /status and /rec/:id.
 * Layout only — components come from components.css (docs/UI_KIT.md). Load after components.css;
 * the landing adds landing.css, the login page auth.css.
 */

/* =========================================================================
   Page-level values that switch with the theme
   ========================================================================= */

:root {
  --pg-identity-bg: rgba(255, 255, 255, 0.55);
  --pg-player-bg: #101722;
}

:root[data-theme="dark"] {
  --pg-identity-bg: rgba(208, 226, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pg-identity-bg: rgba(208, 226, 255, 0.06);
  }
}

/* =========================================================================
   Shell: sky (or calm) background, the site header, main, the footer at the bottom
   ========================================================================= */

.site-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-body > .header-bar,
.site-body > .page-footer {
  flex: none;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 16px var(--gutter) 0;
}

@media (max-width: 760px) {
  .site-main {
    padding-top: 12px;
  }
}

/* The account chip («Войти» / «Профиль») waits for the session check, so a signed-in person
   never sees «Войти» flash. Without JavaScript it appears after 1.5 s anyway. */
.site-header[data-auth="pending"] [data-account] {
  visibility: hidden;
  animation: pg-reveal 0s linear 1.5s forwards;
}

@keyframes pg-reveal {
  to {
    visibility: visible;
  }
}

/* =========================================================================
   Hero composition (landing §5.2–5.3, login §6): one panorama behind both halves
   ========================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-radius: var(--r-28);
  background-color: var(--hero-bg);
  scroll-margin-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: sz-enter 500ms var(--ease) both;
  }
}

.hero__panorama {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero__panorama img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Illustration half: stays light in the dark theme (SCREENS §2.5). */
.hero__art {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, calc(100dvh - 142px), 760px);
  padding: 36px 38px 64px;
  border-radius: var(--r-28) 0 0 var(--r-28);
  color: var(--hero-ink);
}

.hero__art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--hero-overlay);
  pointer-events: none;
}

/* The square picture is the narrow-screen variant (≤ 760). */
.hero__art-image {
  display: none;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.hero__eyebrow .icon {
  width: 21px;
  height: 21px;
}

.hero__title {
  margin-top: 34px;
  color: var(--hero-ink);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-wrap: initial;
}

.hero__dot {
  color: var(--hero-dot);
}

.hero__lead {
  margin-top: 23px;
  color: var(--hero-ink-soft);
  font-size: var(--fs-15);
  line-height: 1.6;
}

/* «Вы, ваши люди и ничего лишнего.» — ♿ in the headline ink (DESIGN_SYSTEM §12.2-6). */
.hero__footline {
  position: absolute;
  right: 38px;
  bottom: 26px;
  left: 38px;
  color: var(--hero-ink);
  font-size: var(--fs-12);
  line-height: 1.5;
}

@media (min-width: 1440px) {
  .hero__art {
    min-height: clamp(600px, calc(100dvh - 142px), 780px);
    padding: 42px 44px 64px;
  }

  .hero__footline {
    right: 44px;
    left: 44px;
  }
}

@media (max-width: 1150px) {
  .hero__footline {
    font-size: var(--fs-11);
  }
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .hero__title {
    font-size: 64px;
  }
}

@media (max-width: 850px) {
  .hero__eyebrow {
    gap: 5px;
  }

  .hero__eyebrow .icon {
    width: 17px;
    height: 17px;
  }
}

/* Main stacking point: two cards, the square picture in the first one. */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 17px;
    border-radius: var(--r-25);
    background-color: transparent;
  }

  .hero__panorama {
    display: none;
  }

  .hero__art {
    min-height: 480px;
    padding: 29px 30px 60px;
    border-radius: var(--r-25);
    background-color: var(--hero-bg-narrow);
  }

  .hero__art-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 50% 60%;
  }

  .hero__title {
    margin-top: 27px;
    font-size: clamp(52.8px, 10vw, 72px);
  }

  .hero__lead {
    font-size: var(--fs-14);
  }

  .hero__footline {
    right: 30px;
    bottom: 24px;
    left: 30px;
    font-size: var(--fs-11);
  }
}

@media (max-width: 360px) {
  .hero__art {
    min-height: 460px;
  }

  .hero__title {
    font-size: 50.4px;
  }
}

/* =========================================================================
   Glass card: tabs → view stack → bottom slot (SCREENS §5.3)
   ========================================================================= */

/* min-height: the height landing.js measures for both tabs (--hero-card-h; the login card has
   none), so the card never jumps (§5.3); beside the picture the row's stretch can make it taller. */
.hero-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: var(--hero-card-h, auto);
  margin: 14px 14px 14px 0;
  padding: 24px 39px 29px;
  overflow: hidden;
}

@media (min-width: 1440px) {
  .hero-card {
    padding-inline: 46px;
  }
}

@media (max-width: 1050px) {
  .hero-card {
    padding-inline: 27px;
  }
}

/* Above 760, until landing.js has measured (the first frames are painted before it runs): the guest
   height it measures at every width from 761 up, 593.28 (571.28 on short windows, see «Short
   windows» below), so the landing card does not grow when the script runs (§5.3). Update both
   numbers with the card's content. A browser that guesses a signed-in session gets its taller
   height from the third view's form (data-session-guess below). */
@media (min-width: 761px) {
  .hero-card[data-hero-card] {
    min-height: var(--hero-card-h, 593.28125px);
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  .hero-card[data-hero-card] {
    min-height: var(--hero-card-h, 571.28125px);
  }
}

/* ≤ 760: at least 565, or the height landing.js measures for both tabs (--hero-card-h), so the card
   never jumps (§5.3, §5.9). */
@media (max-width: 760px) {
  .hero-card {
    min-height: max(565px, var(--hero-card-h, 0px));
    margin: 0;
    padding: 23px 28px 28px;
  }
}

@media (max-width: 360px) {
  .hero-card {
    padding-inline: 23px;
  }
}

.hero-card__tabs {
  flex: none;
}

@media (max-width: 760px) {
  .hero-card__tabs.tabs--center {
    width: min(100%, 265px);
  }
}

/* The tabs keep their place while the third view is open. */
.hero-card__tabs.is-concealed {
  visibility: hidden;
}

/* Every view sits in the same grid cell, so the card never jumps. */
.hero-card__stack {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

.hero-view {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  max-width: 390px;
  margin-inline: auto;
  padding-top: 48px;
}

.hero-view.is-inactive {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero-view {
    max-width: none;
    padding-top: 26px;
  }
}

/* Short windows above 760 (≤ 700 tall, such as 1366×657): the views start 26 below the tabs, as on
   phones, so the «Запланировать» pill stays on the first screen. landing.js measures the card
   again when a window crosses this step (the same query). */
@media (min-width: 761px) and (max-height: 700px) {
  .hero-view {
    padding-top: 26px;
  }
}

.hero-view__head {
  margin-bottom: 27px;
}

.hero-view__emblem {
  margin-bottom: 22px;
}

.hero-view__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}

.hero-view__title:focus {
  outline: none;
}

.hero-view__lead {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .hero-view__emblem {
    width: 38px;
    height: 38px;
    margin-bottom: 19px;
  }

  .hero-view__title {
    font-size: var(--fs-30);
  }
}

/* «Встретимся позже.»: smaller emblem and title. */
.hero-view--compact .hero-view__head {
  margin-bottom: 22px;
}

.hero-view--compact .hero-view__emblem {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
}

.hero-view--compact .hero-view__emblem .icon {
  width: 20px;
  height: 20px;
}

.hero-view--compact .hero-view__title {
  font-size: 31.2px;
}

.hero-view--compact .hero-view__lead {
  font-size: var(--fs-13);
}

@media (max-width: 760px) {
  .hero-view--compact .hero-view__title {
    font-size: var(--fs-28);
  }
}

@media (max-width: 360px) {
  .hero-view--compact .hero-view__title {
    font-size: 26.4px;
  }
}

.hero-form {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* Fields inside the glass card: 52 high, radius 11, padding 14 (the glass fills come from the
   panel's local tokens). */
.hero-card .input {
  --input-h: 52px;
  --input-px: 14px;
  --input-radius: var(--r-11);
}

.hero-card .disclosure__inner {
  padding-block: 14px 7px;
}

.hero-form__error {
  margin-top: -6px;
}

/* Notes under the primary button («30 минут, вход по ссылке…»). */
.hero-note {
  color: var(--text-muted);
  font-size: var(--fs-11);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

.hero-form > .hero-note {
  margin-top: -6px;
}

/* Signed-in identity row: avatar 31 + name + «Так вас увидят участники» + «Изменить». */
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--r-14);
  background: var(--pg-identity-bg);
}

.identity__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* Lines of 1.2, so the row is the documented 52 (min-height) with its 10 px padding, exactly as
   high as the name field it replaces: the card's button does not move when /api/me answers. */
.identity__name {
  font-size: var(--fs-14);
  font-weight: var(--fw-ui);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.identity__hint {
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.2;
}

.identity__change {
  flex: none;
  align-self: center;
  padding: 6px 2px;
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-ui);
}

.identity__change:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Guest version of «Встретимся позже.»: a link styled as the primary button + a text link. */
.hero-guest {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.hero-guest > .btn {
  width: 100%;
}

.hero-guest__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-ui);
}

.hero-guest__link:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Bottom slot: one grid cell for «Запланировать» and «Назад» (they swap vertically). */
.hero-card__slot {
  display: grid;
  flex: none;
  place-items: center;
  min-height: 58px;
  padding-top: 16px;
}

.hero-card__slot > .btn {
  grid-area: 1 / 1;
  width: 176px;
}

/* «По ссылке» has no pill (§5.3): its empty slot gives its room to the view, so the longer
   «По ссылке» form fits the same card as «Новая встреча» with its pill. */
.hero-card[data-view="join"] .hero-card__slot {
  display: none;
}

/* > 760, until landing.js knows the session (the card has no data-auth yet): a browser that was
   signed in last time (data-session-guess="in", landing-init.js) lays the hidden third view out as
   its form with the one-line lead of view 3, as landing.js measures it, so a signed-in card has
   its height from the first frame (§5.3). The page ships the guest block (no-JS state) and the
   form [hidden]; base.css hides [hidden] with !important, hence the !important here. */
@media (min-width: 761px) {
  :root[data-session-guess="in"] .hero-card:not([data-auth]) #hero-schedule-form[hidden] {
    display: grid !important;
  }

  :root[data-session-guess="in"] .hero-card:not([data-auth]) [data-schedule-guest] {
    display: none;
  }

  :root[data-session-guess="in"] .hero-card:not([data-auth]) [data-schedule-lead] {
    max-height: 1.5em;
    overflow: hidden;
  }
}

/* =========================================================================
   Busy buttons that name what is happening («Создаём встречу…», SCREENS §4.1)
   ========================================================================= */

.btn.has-busy-text[aria-busy="true"] {
  color: var(--btn-fg);
}

.btn.has-busy-text[aria-busy="true"] > * {
  visibility: visible;
}

.btn.has-busy-text[aria-busy="true"]::after {
  content: none;
}

.btn.has-busy-text .spinner {
  width: 16px;
  height: 16px;
}

/* =========================================================================
   Centred message card: 404, «Запись не найдена», load errors (SCREENS §8.1, §9.1, §9.5)
   ========================================================================= */

.message-wrap {
  display: flex;
  justify-content: center;
  padding-block: 32px 64px;
}

.message-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(560px, 100%);
  min-width: 0;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-28);
  background-color: var(--surface-raised);
  box-shadow: 0 25px 100px #11244514;
}

.message-card--narrow {
  width: min(520px, 100%);
}

.message-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.message-card__head > .icon-tile {
  margin-bottom: 6px;
}

.message-card__title {
  overflow-wrap: anywhere;
}

.message-card__title:focus {
  outline: none;
}

.message-card__text {
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.message-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.message-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
}

.message-card__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.message-card__links .icon {
  width: 16px;
  height: 16px;
}

/* Join by code (404): «Ссылка или код встречи» + «Присоединиться». */
.join-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.join-form__row {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.join-form__row > .input {
  flex: 1 1 160px;
}

.join-form__row > .btn {
  flex: none;
}

@media (max-width: 650px) {
  .message-wrap {
    padding-block: 16px 40px;
  }

  .message-card {
    gap: 20px;
    padding: 28px 22px;
    border-radius: var(--r-24);
  }
}

@media (max-width: 480px) {
  .join-form__row {
    flex-direction: column;
  }

  .join-form__row > .input,
  .join-form__row > .btn {
    flex: none;
    width: 100%;
  }
}

/* =========================================================================
   Reading pages: /help and /legal/* (SCREENS §9.2, §9.4)
   ========================================================================= */

.doc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 760px;
  padding-top: 32px;
}

.doc-head__title {
  font-size: var(--fs-42);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: var(--tracking-section);
}

.doc-head__lead {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-15);
  line-height: 1.6;
}

.doc-head__meta {
  color: var(--text-muted);
  font-size: var(--fs-13);
}

.doc-head__cta {
  margin-top: 8px;
}

.doc-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  align-items: start;
  gap: 56px;
  padding-block: 40px 88px;
}

/* Table of contents: sticky list on wide screens, a closed «Разделы» block on narrow ones.
   The list scrolls, so it clips: 8 px of padding on every side (taken back by the margin, the list
   stays where it was) hold a link's whole focus ring, 3 px 5 px out, and Tab stops 8 px clear of
   the edges. */
.doc-toc {
  position: sticky;
  top: 16px;
  min-width: 0;
  max-height: calc(100vh - 32px);
  margin: -8px;
  padding: 8px;
  overflow-y: auto;
  scroll-padding-block: 8px;
  scrollbar-width: thin;
}

.doc-toc__box > summary {
  display: none;
}

.doc-toc__title {
  margin-bottom: 10px;
}

.doc-toc__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-toc__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 0 6px 16px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.doc-toc__list a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent-text);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.doc-toc__list a:hover {
  color: var(--text);
}

.doc-toc__list a[aria-current] {
  color: var(--accent-text);
  font-weight: var(--fw-medium);
}

.doc-toc__list a[aria-current]::before {
  opacity: 1;
}

@media (max-width: 1050px) {
  .doc-head__title {
    font-size: var(--fs-32);
  }

  .doc-grid {
    grid-template-columns: minmax(0, 760px);
    gap: 28px;
    padding-top: 28px;
  }

  .doc-toc {
    position: static;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .doc-toc__box {
    border-radius: var(--r-20);
    background-color: var(--surface-accent);
  }

  .doc-toc__box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: var(--fw-ui);
    list-style: none;
  }

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

  .doc-toc__box > summary .icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform var(--dur-switch) var(--ease-out);
  }

  .doc-toc__box[open] > summary .icon {
    transform: rotate(180deg);
  }

  .doc-toc__box .doc-toc__title {
    display: none;
  }

  .doc-toc__list {
    padding: 0 18px 12px;
  }
}

/* Content typography: h2 26 (help) / 24 (legal), paragraphs 15 / 1.7, links underlined. */
.doc-content {
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-15);
  line-height: 1.7;
}

.doc-content > section {
  scroll-margin-top: 24px;
}

.doc-content > section + section {
  margin-top: 48px;
}

.doc-content h2 {
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.doc-content h2:focus,
.doc-content > section:focus {
  outline: none;
}

.doc-content p + p,
.doc-content p + ul,
.doc-content ul + p,
.doc-content p + ol,
.doc-content ol + p,
.doc-content p + dl,
.doc-content dl + p,
.doc-content ul + dl {
  margin-top: 14px;
}

.doc-content ul,
.doc-content ol {
  margin: 0;
  padding-left: 1.3em;
}

.doc-content li + li {
  margin-top: 8px;
}

.doc-content a:not([class]) {
  color: var(--accent-text);
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

.doc-content a:not([class]):hover {
  color: var(--accent-text-hover);
}

.doc-content code {
  padding: 1px 6px;
  border-radius: var(--r-6);
  background: var(--surface-soft);
  font-size: 0.88em;
}

.doc-content strong {
  font-weight: var(--fw-semibold);
}

/* Browser instructions and other term lists: rows with 1 px dividers. */
.doc-content dl {
  margin: 0;
  border-top: 1px solid var(--border);
}

.doc-content dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 6px 20px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.doc-content dt {
  font-weight: var(--fw-ui);
}

.doc-content dd {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 650px) {
  .doc-content dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Questions (the help dialog's rows): summary 15 / 550 with a chevron turning 90°. */
.faq {
  margin-top: 8px;
}

.faq__item {
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px;
}

.faq__item > summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 18px;
  font-size: var(--fs-15);
  font-weight: var(--fw-ui);
  line-height: 1.5;
  list-style: none;
}

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

.faq__item > summary .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--text-muted);
  transition: transform var(--dur-switch) var(--ease-out);
}

.faq__item[open] > summary .icon {
  transform: rotate(90deg);
}

.faq__item > summary:hover {
  color: var(--accent-text);
}

.faq__body {
  padding: 0 0 20px 28px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.65;
}

.faq__body > * + * {
  margin-top: 12px;
}

.faq__body dl > div {
  font-size: var(--fs-14);
}

.faq__body dt {
  color: var(--text);
}

/* Owner-review note on the legal pages. */
.doc-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 36px;
  padding: 16px 18px;
  border-radius: var(--r-16);
  background-color: var(--surface-accent);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.doc-note > .icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent-text);
}

.doc-note__title {
  display: block;
  margin-bottom: 2px;
  font-weight: var(--fw-semibold);
}

/* Legal headings are a little smaller than the help sections. */
.doc-content--legal > section + section {
  margin-top: 40px;
}

.doc-content--legal h2 {
  margin-bottom: 12px;
  font-size: 24px;
}

.doc-content--legal h3 {
  margin: 24px 0 8px;
  font-size: var(--fs-17);
  font-weight: var(--fw-ui);
  line-height: 1.4;
}

/* =========================================================================
   /status (SCREENS §9.3)
   ========================================================================= */

.status-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: 32px 88px;
}

.status-page .doc-head {
  padding-top: 0;
  margin-bottom: 14px;
}

.status-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
}

.status-banner__main {
  flex: 1 1 auto;
  min-width: 0;
}

.status-banner__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-ui);
  line-height: 1.4;
}

.status-banner__text {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.55;
}

.status-banner__aside {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
}

.status-banner__updated {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.status-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--r-20);
}

.status-metric__label {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.status-metric__value {
  min-height: 38px;
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.status-metric__value .skeleton {
  width: 60%;
  height: 32px;
}

.status-metric__hint {
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.5;
}

.status-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}

.status-about h2 {
  margin-bottom: 2px;
  font-size: var(--fs-18);
  font-weight: var(--fw-ui);
  line-height: 1.5;
}

.status-about p {
  font-size: var(--fs-14);
  line-height: 1.7;
}

.status-about a:not([class]) {
  color: var(--accent-text);
  text-decoration-line: underline;
}

.status-about__version {
  color: var(--text-muted);
  font-size: var(--fs-12);
}

@media (max-width: 1050px) {
  .status-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .status-page {
    padding-top: 20px;
  }

  .status-banner {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
  }

  .status-banner__main {
    flex-basis: calc(100% - 70px);
  }

  .status-banner__aside {
    justify-content: space-between;
    width: 100%;
  }

  .status-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-about {
    padding: 22px 20px;
  }
}

/* =========================================================================
   Shared recording /rec/:id (SCREENS §9.1)
   ========================================================================= */

.rec {
  width: 100%;
  max-width: 960px;
  margin: 24px auto 48px;
}

.rec--message {
  max-width: none;
  margin: 0;
}

.rec__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.rec__title {
  font-size: var(--fs-34);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  overflow-wrap: anywhere;
}

.rec__title:focus {
  outline: none;
}

.rec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.5;
}

.rec__owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.rec__player {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-24);
  background-color: var(--pg-player-bg);
  color: #EDF2FF;
}

.rec__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--pg-player-bg);
}

/* The video fills the rounded player, which clips: the focus ring goes around the player. */
.rec__video:focus-visible {
  outline: none;
}

.rec__player:has(> .rec__video:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 5px;
}

.rec__player-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  padding: 24px;
  text-align: center;
}

.rec__player-error .icon-tile {
  margin-bottom: 4px;
  background-color: #3D2228;
  color: #FFA3AB;
}

.rec__player-error-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-ui);
}

.rec__player-error-text {
  color: #ABB8CC;
  font-size: var(--fs-14);
  line-height: 1.5;
}

.rec__player-error:focus {
  outline: none;
}

.rec__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.rec__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.rec__skeleton .skeleton--text {
  width: 120px;
}

.rec__skeleton .skeleton--title {
  width: 55%;
  height: 34px;
}

.rec__skeleton .skeleton--meta {
  width: 35%;
  height: 14px;
}

/* «Созвонитесь так же.» — the landing's invitation band. */
.invite-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
  padding: 36px 40px;
  overflow: hidden;
  border-radius: var(--r-24);
  background-color: var(--surface-accent);
}

.invite-band::after {
  content: '';
  position: absolute;
  top: -170px;
  right: 15%;
  width: 260px;
  height: 260px;
  border: 1px solid #a4bce44a;
  border-radius: 50%;
  pointer-events: none;
}

.invite-band__text {
  position: relative;
  min-width: 0;
}

.invite-band__title {
  max-width: 25ch;
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-dialog);
}

.invite-band__lead {
  max-width: 43ch;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.invite-band__cta {
  --btn-h: 47px;
  --btn-radius: var(--r-12);
  --btn-fs: var(--fs-13);
  --btn-gap: 13px;
  position: relative;
  min-width: 175px;
  justify-self: end;
}

@media (max-width: 1050px) {
  .invite-band {
    gap: 22px;
    padding: 29px;
  }
}

@media (max-width: 760px) {
  .rec {
    margin-top: 12px;
  }

  .rec__title {
    font-size: var(--fs-28);
  }

  .rec__player {
    border-radius: var(--r-18);
  }

  .invite-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 27px;
    border-radius: 22px;
  }

  .invite-band__title {
    max-width: 22ch;
    font-size: 24.8px;
  }

  .invite-band__lead {
    font-size: var(--fs-13);
  }

  .invite-band__cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

/* =========================================================================
   Coarse pointers: small links get a 44 px hit area without changing the layout
   ========================================================================= */

@media (pointer: coarse) {
  .identity__change,
  .hero-guest__link,
  .message-card__links a {
    position: relative;
  }

  .identity__change::after,
  .hero-guest__link::after,
  .message-card__links a::after {
    content: '';
    position: absolute;
    inset: -6px -4px;
  }

  /* «Изменить» is 30 high (the others 32 and 36): 7 px above and below make it 44. */
  .identity__change::after {
    inset: -7px -4px;
  }

  .doc-toc__list a::after {
    content: '';
    position: absolute;
    inset: -2px 0;
  }
}

/* =========================================================================
   Forced colours: the illustration recedes, its text uses the system colours
   ========================================================================= */

@media (forced-colors: active) {
  .hero__panorama img,
  .hero__art-image {
    opacity: 0.2;
  }

  .hero__art,
  .hero__title,
  .hero__lead,
  .hero__footline {
    color: CanvasText;
  }

  .hero-view.is-inactive,
  .hero-card__tabs.is-concealed {
    visibility: hidden;
  }

  .doc-toc__list a[aria-current]::before {
    background: Highlight;
  }
}