/* Shared wide-screen shell. The same mounted screen reflows across the breakpoint: no resize routing or state reset. */
.side-nav { display: none; }
/* app.js excludes physical hinges from wide-shell using positive feature checks, including in WebKit. */
@media (min-width: 720px) {
  body.wide-shell {
    --shell-rail: 176px;
    --col: min(1120px, calc(100vw - var(--shell-rail)));
    --content-max: var(--col);
    --shell-gutter: clamp(24px, 3vw, 48px);
    --tabs-h: 0px;
    padding-left: var(--shell-rail);
  }
  .wide-shell .app { width: 100%; border: 0; background: transparent; }
  .wide-shell .tabs { display: none; }
  .wide-shell .side-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 25; width: var(--shell-rail);
    display: flex; flex-direction: column; padding: 20px 12px max(12px, var(--safe-bottom));
    background: linear-gradient(170deg, #17223b, var(--bg) 65%); border-right: 1px solid var(--line-strong);
  }
  .side-brand { display: flex; align-items: center; gap: 9px; flex: none; min-height: 56px; margin: 0 0 18px; text-decoration: none; }
  .side-brand img { flex: none; width: 38px; height: 38px; }
  .side-brand span { font: 700 18px/1.02 var(--font-display); }
  .side-brand em { display: block; color: var(--gold); font-style: normal; }
  .side-links { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; padding: 3px; }
  .side-group + .side-group { margin-top: 18px; }
  .side-label { color: var(--text-2); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 0 10px 6px; }
  .side-group a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 10px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 11px; text-decoration: none; color: var(--text-2); font-size: 14px; line-height: 1.2; }
  .side-group a > svg { width: 20px; height: 20px; flex: none; }
  .side-group a:hover { color: var(--text); background: var(--bg-inset); }
  .side-group a[aria-current="page"] { color: var(--gold); background: var(--gold-tint); border-color: #6c5225; box-shadow: inset 3px 0 0 var(--gold); }
  .side-group .dot { flex: none; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  .side-group .tab-badge { flex: none; margin-left: auto; }
  .wide-shell .footer-bar { left: var(--shell-rail); right: 0; max-width: var(--content-max); }
  .wide-shell .toast-root { left: var(--shell-rail); }
  .wide-shell .screen, .wide-shell .footer-bar { padding-inline: var(--shell-gutter); }
}
/* These footers belong to a column inside the right-hand app, not to half the whole viewport. */
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  .wide-shell .footer-bar.split-foot-lead, .wide-shell .footer-bar.split-foot-more {
    width: calc((var(--col) - 2 * var(--shell-gutter) - var(--split-gap)) / 2 + 2 * var(--shell-gutter));
    max-width: none; right: auto;
    left: calc((100vw + var(--shell-rail) - var(--col)) / 2);
  }
  .wide-shell .footer-bar.split-foot-more { left: calc((100vw + var(--shell-rail) + var(--split-gap)) / 2 - var(--shell-gutter)); }
  .wide-shell .screen.more-rehearsal.wide-split + .footer-bar.split-foot-more {
    left: auto; margin-left: calc(50% + var(--split-gap) / 2 - var(--shell-gutter));
  }
}
@media (min-width: 1200px) {
  body.wide-shell { --shell-rail: 224px; }
  .wide-shell .side-nav { padding: 28px 18px 18px; }
  .side-brand { margin-bottom: 26px; }
  .side-brand img { width: 46px; height: 46px; }
  .side-brand span { font-size: 22px; }
  .side-group a { font-size: 15px; min-height: 46px; }
}
/* ---------- Signed-out screens on tablets and desktop (welcome, sign-in, verify, reset, invite) ----------
   These screens have no side rail (app.js syncWideShell), so without this they sat in the 600 px phone column.
   Phones and portrait tablets are untouched: everything here needs a screen 820 px+ wide, 560 px+ tall and wider than
   tall (a phone on its side is under 480 px tall; a portrait iPad keeps the centred column). */
@media (min-width: 820px) and (min-height: 560px) and (min-aspect-ratio: 1/1) {
  :root:has(.core-welcome), :root:has(.more-signin) { --col: 100%; }
  .app:has(> .core-welcome), .app:has(> .more-signin) { border: 0; background: transparent; }
  /* The welcome lays itself out by the app column's width (a container), so a Surface Duo's one-screen column keeps the phone cards. */
  .app:has(> .core-welcome) { container: wdesk / inline-size; }

  /* Sign in, Confirm email, New password: the brand mark and the card centred on the page, under the top bar. */
  .screen.more-signin { display: flex; flex-direction: column; min-height: 100dvh; width: min(1120px, 100%); margin-inline: auto; }
  .screen.more-signin::after { content: ""; order: 1; margin-top: auto; height: clamp(40px, 6dvh, 60px); background: url(/assets/brand/logo.svg) center / contain no-repeat; }
  .more-signin .signin-card { order: 2; margin: var(--s6) auto auto; width: min(100%, 30rem); padding: var(--s6); }
  .more-signin .signin-card .t { font-size: var(--fs-2xl, 1.75rem); }

  /* Invite landing (/i/): the message and its buttons are one centred group, not a message up top and a bar at the
     bottom of a 1000 px screen. */
  .app:has(> .core-invite) { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; }
  .screen.core-invite { min-height: 0; flex: none; padding-bottom: var(--s4); }
  .screen.core-invite.with-footer { padding-bottom: var(--s4); }
  .core-invite + .footer-bar { position: static; width: min(100%, 30rem); margin: 0 auto calc(var(--s10) + var(--safe-bottom)); padding-inline: 0; border-top: 0; background: transparent; }
  .core-invite + .footer-bar::before { display: none; }
  .core-invite .core-invite-logo img { height: clamp(40px, 6dvh, 60px); }
  .core-invite .core-invite-body { max-width: 34rem; }
}

/* Welcome, two columns: the example cards (or each card's picture) on the left; the words, Next and the links on the
   right. The track keeps scrolling one card at a time (dots, Next, swipe, arrow keys, Enter). Each card is the full
   track; its words sit in the right half (padding) and its picture is pinned in the left half (absolute), so the words
   stay in the normal flow the phone uses. The foot overlays the bottom of the right half; --wd-foot keeps words clear. */
@container wdesk (min-width: 800px) {
  .core-welcome {
    --wd-gap: clamp(40px, 5vw, 104px);
    --wd-h: clamp(400px, calc(100dvh - 190px), 600px); /* track height */
    --wd-foot: 128px;                                   /* Next + links under the words */
    --wd-names: 76px;                                   /* the gold names under the example cards */
    --wd-side: clamp(28px, 3.5vw, 56px);                /* inner room so the tilted end cards are never clipped */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto minmax(var(--s6), 1fr);
    column-gap: var(--wd-gap); width: min(1440px, calc(100% - 2 * clamp(32px, 5vw, 96px))); margin-inline: auto;
    padding-bottom: var(--safe-bottom);
  }
  .core-welcome .ob-top { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .core-welcome .ob-track { grid-column: 1 / -1; grid-row: 3; height: var(--wd-h); flex: none; }
  .core-welcome .ob-foot { display: contents; }
  .core-welcome .ob-foot .btn { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; width: min(100%, 22rem); margin-bottom: 52px; position: relative; z-index: 1; }
  .core-welcome .ob-foot-row { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; justify-content: flex-start; position: relative; z-index: 1; }
  .core-welcome .ob-dots { grid-column: 1; grid-row: 4; align-self: start; justify-self: center; margin-top: var(--s2); }

  .core-welcome .ob-card { position: relative; overflow: hidden; text-align: left; align-items: stretch;
    padding: var(--s4) 0 var(--wd-foot) calc(50% + var(--wd-gap) / 2); gap: clamp(12px, 2.4cqh, 24px); }
  .core-welcome .ob-card > * { max-width: 34rem; margin-inline: 0; }
  .core-welcome .ob-card > .ob-skip { align-self: flex-start; }
  .core-welcome .core-ob-guest { text-align: left; }
  /* Words at desktop size. */
  .core-welcome .core-ob-title, .core-welcome .core-ob-hero .core-ob-title { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.9rem); line-height: 1.06; text-align: left; }
  .core-welcome .core-ob-lead { font-size: clamp(1.15rem, .8rem + .7vw, 1.5rem); }
  .core-welcome .core-ob-shout { font-size: var(--fs-md); text-align: left; }
  .core-welcome .core-ob-shout { align-self: flex-start; width: fit-content; }
  .core-welcome .core-ob-shout .crew-say { text-align: center; } /* each line centred on itself (owner, 2026-11-07) */
  .core-welcome .core-ob-how { place-items: center start; }

  /* The left half: pictures pinned there, centred in the track's height. */
  /* The example cards: as big as the half allows (width, or the track's height), with the names right under them and
     the pair centred in the height (cq units: the track is the `ob` size container; 1.917 = the row's width:height). */
  .core-welcome .core-ob-hero { --wd-stage-h: min(calc((50cqw - var(--wd-gap) / 2 - 2 * var(--s5) - 12px) / 1.917 + 10px), calc(100cqh - var(--wd-names) - 2 * var(--s6))); }
  .core-welcome .core-ob-hero > .core-ob-stage {
    position: absolute; left: 0; top: calc(50% - (var(--wd-stage-h) + var(--wd-names)) / 2); width: calc(50% - var(--wd-gap) / 2);
    height: var(--wd-stage-h); max-width: none; max-height: none; min-height: 0; margin: 0 !important; }
  .core-welcome .core-ob-stage .cine { width: min(100% - 2 * var(--wd-side), calc((100cqh - 10px) * 1.917 + 12px), 700px); } /* room for the tilted end cards */
  .core-welcome .core-ob-hero .core-ob-stage .film { font-size: clamp(14px, 4.2cqi, 30px); }
  .core-welcome .core-ob-stage .cine-panel .slot { font-size: clamp(10px, 2.5cqi, 16px); }
  .core-welcome .core-ob-hero > .core-ob-linknames { position: absolute; left: 0; top: calc(50% + (var(--wd-stage-h) - var(--wd-names)) / 2); width: calc(50% - var(--wd-gap) / 2); height: var(--wd-names);
    max-width: none; margin: 0 !important; align-items: center; font-size: clamp(16px, .6rem + .6vw, 22px);
    /* Each name between its two films: the 6-column grid from core.css, over the cards' own width. */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; column-gap: 3px; padding-inline: var(--wd-side); box-sizing: border-box; }
  .core-welcome .core-ob-hero > .core-ob-linknames b { white-space: nowrap; }
  .core-welcome .core-ob-hero > .core-ob-linknames { align-items: start; }
  .core-welcome .core-ob-hero > .core-ob-linknames .mq { --dot: 8px; }
  /* What the hovered example film is about, under the names. */
  .core-welcome .core-ob-hero > .core-ob-about { display: block; position: absolute; left: 0; width: calc(50% - var(--wd-gap) / 2); max-width: none;
    top: calc(50% + (var(--wd-stage-h) + var(--wd-names)) / 2 + var(--s2)); margin: 0 !important; padding-inline: var(--wd-side); box-sizing: border-box;
    text-align: center; color: var(--text-2); font-size: clamp(14px, .5rem + .5vw, 17px); line-height: 1.4; text-wrap: balance;
    opacity: 0; translate: 0 4px; transition: opacity .25s ease, translate .25s ease; }
  .core-welcome .core-ob-hero > .core-ob-about.on { opacity: 1; translate: 0 0; }
  /* The hovered card lifts a little. translate composes with the card's own tilt transform. */
  .core-welcome .core-ob-hero .cine-panel { transition: translate .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease; cursor: default; }
  .core-welcome .core-ob-hero .cine-panel:hover { translate: 0 -10px; filter: brightness(1.08) drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
  .core-welcome .core-ob-pictures, .core-welcome .core-ob-doors, .core-welcome .core-ob-streak {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(50% - var(--wd-gap) / 2); max-width: none; margin: 0 !important; }
  .core-welcome .core-ob-picture { flex: none; width: clamp(110px, 10vw, 180px); }
  .core-welcome .core-ob-lock { width: 40px; height: 40px; }
  .core-welcome .core-ob-lock svg { width: 22px; height: 22px; }
  .core-welcome .core-ob-doors { gap: var(--s5); }
  .core-welcome .core-ob-doors > span { padding: clamp(24px, 3vw, 44px); font-size: var(--fs-lg); }
  .core-welcome .core-ob-doors svg, .core-welcome .core-ob-fire svg { width: clamp(64px, 6vw, 104px); height: clamp(64px, 6vw, 104px); }
  .core-welcome .core-ob-reward { font-size: var(--fs-lg); }
  /* Save your spot: the logo stands in the left half; the last card has no Next, so its words get the room. */
  .core-welcome .core-ob-save::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(50% - var(--wd-gap) / 2);
    background: url(/assets/brand/logo.svg) center / min(100%, 520px) auto no-repeat; }
  .core-welcome:has(.ob-foot.last) .core-ob-save { padding-bottom: 52px; }
  .core-welcome .core-ob-save .core-ob-signin { max-width: 24rem; }
}

@media (prefers-reduced-motion: reduce) { .core-welcome .core-ob-hero .cine-panel, .core-welcome .core-ob-hero > .core-ob-about { transition: none; } .core-welcome .core-ob-hero .cine-panel:hover { translate: none; } }