/* Стили страниц гостя и внешнего участника. Владелец — по карте слотов 00-plan §4; цвета только из theme.css. */

/* ---------- The external participant's page, #/x/:token (r1 R1.3): one column, a phone first ---------- */
.gx-page { min-height: 100dvh; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 16px; line-height: 25px; }
.gx-head { display: flex; align-items: center; gap: 10px; max-width: 720px; height: 60px; margin: 0 auto; padding: 0 16px; border-bottom: 1px solid var(--border); }
.gx-head .w-brand { flex: none; gap: 9px; }
.gx-head .w-brand-mark { width: 24px; height: 24px; }
.gx-head .w-brand-word { height: 15px; }
.gx-org { min-width: 0; padding-left: 10px; border-left: 1px solid var(--border); color: var(--muted-foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.gx-kicker { margin: 0 0 4px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.gx-title { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.3px; overflow-wrap: anywhere; }
.gx-meta { margin: 6px 0 0; color: var(--muted-foreground); }
.gx-given { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--sunken); font-size: 14px; line-height: 21px; color: var(--body); }
.gx-given .w-i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--muted-foreground); }
.gx-blocks { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.gx-block-title { margin: 0 0 6px; font-size: 17px; line-height: 24px; font-weight: 600; }
.gx-names { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gx-names li { padding: 2px 10px; border-radius: 999px; background: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }
.gx-none, .gx-note { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 21px; }
.gx-note + .gx-note { margin-top: 6px; }
.gx-wait { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--soon-bg); color: var(--body); font-size: 14px; }
.gx-media { padding-top: 16px; border-top: 1px solid var(--border); }
.gx-code { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-width: 320px; }
.gx-code .w-input { height: 44px; font-size: 20px; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
.gx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gx-video { display: block; width: 100%; max-height: 60vh; margin-bottom: 8px; border-radius: 12px; background: var(--media-surface); }
.gx-lines { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gx-lines li { display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; }
.gx-lines time { grid-row: span 2; color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.gx-lines b { font-size: 13px; font-weight: 600; }
.gx-lines span { color: var(--body); overflow-wrap: anywhere; }
.gx-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.gx-foot p { margin: 0 0 4px; overflow-wrap: anywhere; }
.gx-foot a, .gx-page .w-state a, .gx-note a { color: var(--accent-ink); }
@media (min-width: 720px) {
  .gx-title { font-size: 28px; line-height: 34px; }
  .gx-wrap { padding-top: 32px; }
}

/* ---------- «Доступ» on the meeting page: what the participants see, the external participants, the link ---------- */
.ga-sec + .ga-sec { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.ga-sec > .w-h3 { margin: 0 0 8px; }
.ga-sec > .w-note { margin: 0; }
.ga-add { margin-top: 12px; }
.ga-lead { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.ga-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ga-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); }
.ga-row:first-child { border-top: 0; }
/* The name and the address keep a readable width; in a narrow sheet the actions go under them. */
.ga-who { flex: 1 1 160px; min-width: 0; }
.ga-who b { display: block; font-weight: 500; overflow-wrap: break-word; }
.ga-who small { display: block; font-size: 13px; line-height: 19px; color: var(--muted-foreground); overflow-wrap: break-word; }
.ga-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.ga-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--sunken); }
.ga-form .w-label { display: block; margin-bottom: 4px; }
.ga-sub { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.ga-checks { display: flex; flex-direction: column; gap: 2px; }
.ga-check small { display: block; font-size: 12px; line-height: 18px; color: var(--muted-foreground); }
.ga-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ga-form-actions .ga-hint { flex: 1; min-width: 160px; font-size: 13px; color: var(--muted-foreground); }

/* ---------- The guest's name in the pre-join: how many characters are left ---------- */
.guest-name-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.guest-name-hint { min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.guest-name-count { display: block; flex-shrink: 0; font-size: 12px; line-height: 16px; color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guest-name-count.is-over { color: var(--danger); }