/* `hidden` wins, always.
 *
 * The browser's own `[hidden] { display: none }` is a bare attribute
 * selector, so any class that sets `display` out-specifies it — and the
 * element stays on screen while `el.hidden` cheerfully reports true. That is
 * how a signed-in host kept seeing "Sign in with Pinch": the logic was right,
 * the checks passed, and the pixels disagreed. */
[hidden] { display: none !important; }

/* The console's components, shared with every page that is not the console.
 *
 * These lived inline in index.html, which meant a second page — the tab
 * translator — linked style.css, got the design tokens, and none of the
 * components built on them: raw browser dropdowns, unstyled buttons, no
 * topbar. Anything reusable belongs in a file both pages can link.
 */
body { overflow: auto; }
  .console { max-width: 54rem; margin: 0 auto; padding: clamp(12px, 1.6vw, 20px) var(--pad) 24px; }
  .console h1 {
    margin: 0 0 10px;
    font-size: clamp(21px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.14;
  }
  .console .lede {
    margin: 0 0 clamp(16px, 2vw, 22px);
    color: var(--ink-soft);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.6;
    text-wrap: pretty;
  }

  .form { display: grid; gap: clamp(14px, 1.8vw, 20px); }
  /* `display: grid` on a class out-specifies the browser's own `[hidden]`
     rule, so a form the script had hidden went on rendering — both setups
     were on screen under the chooser that exists to show one of them. */
  .form[hidden], .chooser[hidden] { display: none; }
  /* start, not stretch: a short control beside a tall one would otherwise be
     pushed to the bottom of the row instead of sitting under its label. */
  .field { display: grid; gap: 7px; align-content: start; }
  .field > label { font-size: clamp(14px, 1.4vw, 16px); font-weight: 600; }
  .field .hint { font-size: clamp(12px, 1.2vw, 13px); color: var(--ink-faint); line-height: 1.5; }
  .who { font-size: 14px; color: var(--ink-faint); }
  .who[hidden] { display: none; }
  .signin[hidden] { display: none; }
  #setupPage[hidden] { display: none; }
  .signin .btn { text-decoration: none; display: inline-block; }
  .signin { max-width: 40rem; }

  .works-with {
    margin: 26px 0 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .platforms { display: flex; flex-wrap: wrap; gap: 10px; }
  .platform {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    font-size: 14px; font-weight: 500;
  }
  .platform img { display: block; }

  .how {
    list-style: none;
    margin: 26px 0 30px; padding: 0;
    display: grid; gap: 10px;
  }
  .how li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
  .how span {
    flex: none;
    width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-strong);
    font-size: 13px; font-weight: 600;
  }
  .signin-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); }
  /* Disabled because the meeting platform cannot support it — greyed all the
     way through, so it reads as unavailable rather than merely unchecked. */
  .check.unavailable { opacity: .55; }
  .check.unavailable b, .check.unavailable small { color: var(--ink-faint); }
  .check.unavailable input { cursor: not-allowed; }
  .unavailable-note { color: var(--warn) !important; font-weight: 500; }
  .unavailable-note[hidden] { display: none; }
  .field input[type="text"], .field select {
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: clamp(15px, 1.6vw, 17px);
    outline: none;
    width: 100%;
  }
  .field input[type="text"]:focus, .field select:focus { border-color: var(--accent); }
  .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(16px, 2.4vw, 24px); }

  /* Two columns so the whole form fits a laptop screen without scrolling.
     The left holds decisions about the meeting, the right the languages —
     which is the tall control, and the only one that wants the height. Below
     820px it collapses to one column, where scrolling is expected anyway. */
  .setup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.8vw, 22px);
    align-items: start;
  }
  .col { display: grid; gap: clamp(10px, 1.2vw, 14px); align-content: start; }
  @media (max-width: 820px) {
    .setup { grid-template-columns: 1fr; }
  }

  /* Bounded and scrollable. Every supported language has to be reachable,
     but unbounded it is forty buttons and the tallest thing on the page —
     which reads as the main decision when the main decision is the link. */
  .picker {
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg);
  }

  .checks { display: grid; gap: 12px; }
  /* Indented under the checkbox that reveals them, so the dependency is
     visible rather than something you infer from them appearing. */
  .sub-checks {
    display: grid;
    gap: 12px;
    margin: 2px 0 0 29px;
    padding-left: 14px;
    border-left: 2px solid var(--line);
  }
  .sub-checks[hidden] { display: none; }
  .consent[hidden] { display: none; }
  .consent b { font-weight: 500; }
  .consent.missing b { color: var(--warn); }
  /* The minute between pressing the button and the bot appearing in the
     meeting. Most of it is a browser starting, and a host shown nothing for a
     minute reasonably concludes it is broken. */
  .launch { display: grid; gap: 10px; justify-items: start; padding: 22px 0; }
  .launch[hidden] { display: none; }
  .launch-head { display: flex; align-items: center; gap: 10px; }
  .launch-head h2 { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
  .launch .live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--warn); flex: none;
    animation: launchPulse 1.4s ease-in-out infinite;
  }
  .launch .live-dot.on { background: var(--live); animation: none; }
  @keyframes launchPulse { 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .launch .live-dot { animation: none; } }
  .launch-sub { margin: 0; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16px); max-width: 52ch; }

  /* The bot's name sits beside the button that commits it, and freezes there
     once it has: the room can already see it, so it is no longer editable. */
  .actions { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; }
  .actions .botname { margin: 0; display: grid; gap: 6px; }
  .actions .botname label { font-size: 13px; color: var(--ink-soft); }
  .actions .botname input {
    padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); font-size: 15px; min-width: 15rem;
  }
  .actions .botname input:disabled { opacity: .6; cursor: not-allowed; }

  .end-action { display: grid; gap: 6px; justify-items: start; margin-top: 18px; }
  .end-action .hint { font-size: 13px; color: var(--ink-faint); }
  .check { display: flex; gap: 11px; align-items: flex-start; font-size: clamp(14px, 1.4vw, 16px); }
  /* `flex: none` because the box is a fixed size and the label beside it is
     not. Without it the input is a shrinkable flex item, so the option with
     the longest description squeezed its own checkbox narrower than the one
     above it — which reads as two different kinds of control. */
  .check input { flex: none; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }
  .check b { font-weight: 500; }
  .check small { display: block; color: var(--ink-faint); font-size: clamp(12px, 1.2vw, 13px); line-height: 1.5; }

  .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .actions .hint { font-size: 13px; color: var(--ink-faint); }

  .sessions { margin-top: clamp(36px, 5vw, 56px); }
  .sessions h2 { font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; margin: 0 0 14px; }
  .session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 10px;
  }
  .session .url {
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .session .meta { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
  .session-actions { display: flex; gap: 8px; }
  .empty { color: var(--ink-faint); font-size: 14px; padding: 12px 0; }

  .banner {
    margin-bottom: clamp(20px, 3vw, 28px);
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--warn);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55;
  }
  .banner code { font-size: 13px; color: var(--accent); }


  /* One step at a time, on one page. The rail is both a progress indicator
     and the way back — a step you have answered stays clickable, because
     changing your mind about the meeting link should not mean starting over. */
  .wiz { margin: 0 0 24px; }
  .wiz-rail {
    display: flex; align-items: center; gap: 6px;
    list-style: none; margin: 0 0 24px; padding: 0; flex-wrap: wrap;
  }
  .wiz-rail li + li::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: var(--line-strong); margin-right: 6px; vertical-align: middle;
  }
  .wiz-rail li { display: flex; align-items: center; }
  .wiz-crumb {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 13.5px; font-weight: 500;
    border: 0; background: none; padding: 4px 2px;
    color: var(--ink-faint); cursor: default;
  }
  .wiz-crumb i { font-style: normal; }
  .wiz-crumb span {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); color: var(--ink-faint);
    font-size: 12px; font-weight: 600;
  }
  .wiz-crumb.done { color: var(--ink-soft); cursor: pointer; }
  .wiz-crumb.done span { background: var(--live); color: var(--on-live); }
  .wiz-crumb.on { color: var(--ink); font-weight: 600; }
  .wiz-crumb.on span { background: var(--ink); color: var(--bg); }
  .wiz-crumb.done:hover { color: var(--ink); }
  .wiz-crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .wiz-step { display: grid; gap: 12px; }
  .wiz-step[hidden] { display: none; }
  .wiz-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .wiz-step > input[type="text"] {
    width: 100%; max-width: 34rem; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); font-size: 15px; outline: none;
  }
  .wiz-step > input[type="text"]:focus { border-color: var(--accent); }
  .wiz-nav { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
  .field.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
  .field.inline label { font-size: 14px; color: var(--ink-soft); margin: 0; }
  .extras { margin-top: 2px; }
  .extras > summary {
    cursor: pointer; font-size: 13.5px; color: var(--ink-faint); list-style: none;
  }
  .extras > summary::-webkit-details-marker { display: none; }
  .extras > summary::before { content: "＋ "; }
  .extras[open] > summary::before { content: "－ "; }
  .extras-body { display: grid; gap: 14px; padding-top: 12px; }

  /* The bot's name is the last thing set and the first thing the room sees,
     so it sits with the final step — on its own line, above the button. */
  .botname { display: grid; gap: 6px; margin: 6px 0 0; }
  .botname label { font-size: 13px; color: var(--ink-soft); }
  .botname input {
    padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); font-size: 15px; max-width: 22rem;
  }
  .botname input:disabled { opacity: .6; cursor: not-allowed; }
  .actions[hidden] { display: none; }

  /* The minute between pressing the button and the bot appearing in the
     meeting. Most of it is a browser starting, and a host shown nothing for a
     minute reasonably concludes it is broken. */
  .launch { display: grid; gap: 10px; justify-items: start; padding: 22px 0; }
  .launch[hidden] { display: none; }
  .launch-head { display: flex; align-items: center; gap: 10px; }
  .launch-head h2 { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
  .launch .live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--warn); flex: none;
    animation: launchPulse 1.4s ease-in-out infinite;
  }
  .launch .live-dot.on { background: var(--live); animation: none; }
  @keyframes launchPulse { 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .launch .live-dot { animation: none; } }
  .launch-sub { margin: 0; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16px); max-width: 52ch; }

  .end-action { display: grid; gap: 6px; justify-items: start; margin-top: 18px; }
  .end-action .hint { font-size: 13px; color: var(--ink-faint); }
  .check { display: flex; gap: 11px; align-items: flex-start; font-size: clamp(14px, 1.4vw, 16px); }
  /* `flex: none` because the box is a fixed size and the label beside it is
     not. Without it the input is a shrinkable flex item, so the option with
     the longest description squeezed its own checkbox narrower than the one
     above it — which reads as two different kinds of control. */
  .check input { flex: none; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }
  .check b { font-weight: 500; }
  .check small { display: block; color: var(--ink-faint); font-size: clamp(12px, 1.2vw, 13px); line-height: 1.5; }

  .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .actions .hint { font-size: 13px; color: var(--ink-faint); }

  .sessions { margin-top: clamp(36px, 5vw, 56px); }
  .sessions h2 { font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; margin: 0 0 14px; }
  .session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 10px;
  }
  .session .url {
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .session .meta { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
  .session-actions { display: flex; gap: 8px; }
  .empty { color: var(--ink-faint); font-size: 14px; padding: 12px 0; }

  .banner {
    margin-bottom: clamp(20px, 3vw, 28px);
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--warn);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55;
  }
  .banner code { font-size: 13px; color: var(--accent); }


  /* Three numbered steps rather than two columns and a disclosure. The number
     is the whole affordance: it says how much is left. */
  .steps-form { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 26px; }
  .stepf { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
  .stepf-n {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); color: var(--ink-soft);
    font-size: 13px; font-weight: 600;
  }
  .stepf-body { display: grid; gap: 10px; min-width: 0; }
  .stepf-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .stepf-body > input[type="text"] {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); font-size: 15px; outline: none;
  }
  .stepf-body > input[type="text"]:focus { border-color: var(--accent); }
  .field.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
  .field.inline label { font-size: 14px; color: var(--ink-soft); margin: 0; }
  .extras { margin-top: 4px; }
  .extras > summary {
    cursor: pointer; font-size: 13.5px; color: var(--ink-faint);
    list-style: none;
  }
  .extras > summary::-webkit-details-marker { display: none; }
  .extras > summary::before { content: "＋ "; }
  .extras[open] > summary::before { content: "－ "; }
  .extras-body { display: grid; gap: 14px; padding-top: 12px; }
  @media (max-width: 560px) {
    .steps-form { gap: 22px; }
    .stepf { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
    .stepf-n { width: 24px; height: 24px; font-size: 12px; }
  }
  .advanced-body { display: grid; gap: 14px; padding-top: 12px; }

  .share {
    margin-top: clamp(16px, 2vw, 24px);
    padding: clamp(16px, 2vw, 22px);
    border: 2px solid var(--accent);
    border-radius: 12px;
  }
  .share[hidden] { display: none; }
  .share h2 { margin: 0 0 14px; font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; }
  .share-row { display: flex; gap: 10px; }
  .share-row input {
    flex: 1; min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    font-size: clamp(13px, 1.4vw, 15px);
  }
  .share-code {
    margin: 14px 0 0;
    font-size: clamp(15px, 1.7vw, 18px);
  }
  .share-code b {
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: 0.16em;
    margin-left: 6px;
  }
  .share-note { margin: 14px 0 0; color: var(--ink-soft); font-size: clamp(13px, 1.4vw, 15px); }
  .share-langs { display: grid; gap: 6px; margin-top: 14px; }
  .share-langs:empty { display: none; }
  .share-lang {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%;
    padding: 9px 12px;
    font: inherit; font-size: 14px; text-align: left;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); cursor: pointer;
  }
  .share-lang:hover { border-color: var(--ink-faint); }
  .share-lang em { font-style: normal; color: var(--ink-faint); font-size: 13px; }

  .share-step {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--live);
  }
  /* The share panel is the whole point of the page once a meeting has
     started: nobody hears anything until this link is sent. */
  .share {
    border: 2px solid var(--live);
    border-radius: 12px;
    padding: clamp(18px, 2.6vw, 26px);
  }
  .share h2 { margin: 0 0 14px; font-size: clamp(19px, 2.2vw, 24px); }

/* A language that arrives as text and not as speech. Set apart rather than
   hidden: subtitles in it are a real thing to choose. */
.pick-quiet { opacity: 0.72; }
.pick-head {
  flex-basis: 100%;
  margin: 10px 0 2px;
  font-size: 12px;
  color: var(--mute);
}

/* The way back sits with the content, not centred over it. `.console` centres
   its children, which left the link floating above a left-aligned page. */
.console > .link-back { justify-self: start; }