/* Talk to Vera: the scripted one-card reading inside Vera's phone (desktop) or full screen (phones).
   The reading layer is laid out in the app's points: 402 wide and --rh tall, scaled by --rs.
   In the phone frame --rs is 0.7463 and --rh 874px (same as the hero stage); full screen, js/reading/full.js
   sets them so the stage covers the width. Paper tokens, SF Pro / New York, no italics, sentence case,
   only cards cast shadows. */

/* ---------- the phone while a reading runs ---------- */
.tc-rd [data-vp="chrome"], .tc-rd [data-vp="sheet"], .tc-rd [data-vp="foot"], .tc-rd [data-vp="dim"] { display: none !important; }

.rd { --rs: 0.7463; --rh: 874px; --rx: 0px; --top: 54px; --sbx: 0px;
  position: absolute; left: 0; top: 0; width: 402px; height: var(--rh); transform: translateX(var(--rx)) scale(var(--rs)); transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; color: #1B1A17; -webkit-tap-highlight-color: transparent;
  overflow: hidden; z-index: 2; }
.rd button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.rd button:focus-visible, .rd a:focus-visible, .rd input:focus-visible { outline: 2.5px solid #3E5566; outline-offset: 2px; }
.rd .tc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header: chevron (leave) · Vera chip · ••• */
.rd-head { position: absolute; left: 16px; right: 16px; top: var(--top); height: 44px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.rd-glass { height: 44px; box-sizing: border-box; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.75); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #1B1A17; }
.rd-iconbtn { width: 44px; padding: 0; cursor: pointer; }
.rd-name { padding: 0 16px; gap: 7px; font-size: 17px; line-height: 22px; font-weight: 600; }
.rd-ai { display: inline-block; padding: 2px 5px; border-radius: 5px; background: #1B1A17; color: #F6F2EA; font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.3px; }

.rd-menu { position: absolute; right: 16px; top: calc(var(--top) + 52px); width: 248px; padding: 6px 0; border-radius: 18px; background: #F6F2EA; border: 1px solid rgba(27,26,23,0.16); z-index: 6; }
.rd-menu button { display: block; width: 100%; min-height: 48px; padding: 0 18px; border: 0; background: transparent; text-align: left; font-size: 17px; line-height: 22px; cursor: pointer; }
.rd-menu button + button { border-top: 0.5px solid rgba(27,26,23,0.16); }
.rd-menu button[data-act="end"] { color: #B3261E; }

/* ---------- the table (rises over her as a paper sheet) ---------- */
.rd-table { position: absolute; left: 0; right: 0; top: 262px; bottom: 0; background: #2B241E; color: #F3EEE4; border-radius: 28px 28px 0 0;
  transform: translateY(105%); transition: transform 900ms cubic-bezier(0.16,1,0.3,1); z-index: 1; --ch: clamp(150px, calc(var(--rh) - var(--sbx) - 612px), 250px); }
.rd[data-table="up"] .rd-table { transform: none; }
.rd-deck { position: absolute; left: 24px; top: 24px; width: 64px; height: 110px; }
.rd-deck img { position: absolute; left: 0; top: 0; width: 64px; height: 110px; border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.35); }
.rd-deck img:nth-child(2) { transform: translate(2px, -2px); }
.rd-deck img:nth-child(3) { transform: translate(4px, -4px); }
.rd-slot { position: absolute; left: 50%; top: 24px; height: var(--ch); width: calc(var(--ch) * 0.5957); margin-left: calc(var(--ch) * -0.29785); perspective: 900px; }
.rd-card { position: absolute; inset: 0; opacity: 0; }
.rd[data-card="dealt"] .rd-card, .rd[data-card="turned"] .rd-card { opacity: 1; }
.rd-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(0.4,0,0.2,1); }
.rd[data-card="turned"] .rd-card-inner { transform: rotateY(180deg); }
.rd-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.50), 0 10px 24px rgba(0,0,0,0.50); }
.rd-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-front { transform: rotateY(180deg); background: #F6F2EA; }
.rd-front[data-rev="true"] img { transform: rotate(180deg); }
.rd-under { position: absolute; left: 20px; right: 20px; top: calc(24px + var(--ch) + 10px); text-align: center; opacity: 0; transition: opacity 400ms cubic-bezier(0.16,1,0.3,1) 200ms; }
.rd[data-card="turned"] .rd-under { opacity: 1; }
.rd-cardname { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.rd-full { display: inline-block; margin-top: 2px; padding: 4px 8px; font-size: 13px; line-height: 18px; color: #E6A17F; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- the conversation sheet ---------- */
.rd-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: calc(520px + var(--sbx)); background: #EEE8DD; border-radius: 28px 28px 0 0;
  transform: translateY(286px); transition: transform 560ms cubic-bezier(0.16,1,0.3,1); z-index: 3; }
.rd[data-phase="turn"] .rd-sheet, .rd[data-phase="rec"] .rd-sheet, .rd[data-phase="type"] .rd-sheet { transform: none; }
.rd[data-phase="ended"] .rd-sheet { transform: translateY(260px); }
.rd[data-kb="up"] .rd-sheet { transform: translateY(calc(var(--kb, 0px) * -1)); transition-duration: 250ms; }

.rd-chip { position: absolute; top: -16px; left: 50%; height: 32px; padding: 0 14px; transform: translateX(-50%); border-radius: 16px; background: #1B1A17; color: #F6F2EA;
  display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; transition: opacity 300ms cubic-bezier(0.16,1,0.3,1); }
.rd[data-phase="draw"] .rd-chip, .rd[data-phase="ended"] .rd-chip { opacity: 0; }
.rd-chip [data-chip] { display: none; align-items: center; gap: 8px; }
.rd[data-phase="speak"] .rd-chip [data-chip="speak"] { display: inline-flex; }
.rd[data-phase="turn"] .rd-chip [data-chip="turn"], .rd[data-phase="type"] .rd-chip [data-chip="turn"] { display: inline-flex; }
.rd[data-phase="rec"] .rd-chip [data-chip="rec"] { display: inline-flex; }
.rd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #E6A17F; }
.rd-dot.is-rec { background: #F28B82; }
.rd-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.rd-bars i { display: block; width: 2.5px; height: 12px; border-radius: 1.25px; background: #E6A17F; transform: scaleY(.4); animation: rdBar 900ms ease-in-out infinite; }
.rd-bars i:nth-child(2) { animation-delay: -200ms; } .rd-bars i:nth-child(3) { animation-delay: -450ms; } .rd-bars i:nth-child(4) { animation-delay: -650ms; } .rd-bars i:nth-child(5) { animation-delay: -100ms; }
@keyframes rdBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* captions: New York, two lines, "hidden, come into focus", resting at 80% */
.rd-caps { position: absolute; left: 14px; right: 14px; top: 26px; height: 70px; padding: 6px; margin: 0; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: default; }
.rd[data-phase="speak"] .rd-caps { cursor: pointer; }
.rd-cap-page { position: absolute; left: 6px; right: 6px; top: 6px; margin: 0; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 20px; line-height: 29px; font-weight: 400; color: #1B1A17;
  opacity: 0; transition: opacity 160ms cubic-bezier(0.16,1,0.3,1); }
.rd-cap-page.is-on { opacity: 1; transition-duration: 250ms; }
.rd-caps.is-resting .rd-cap-page.is-on { opacity: .8; transition: opacity 2s cubic-bezier(0.16,1,0.3,1); }
.rd-w { display: inline-block; margin-right: 0.26em; opacity: 0; filter: blur(4px); transform: translateY(2px);
  transition: opacity 250ms cubic-bezier(0.16,1,0.3,1), filter 250ms cubic-bezier(0.16,1,0.3,1), transform 250ms cubic-bezier(0.16,1,0.3,1); }
.rd-w.is-said { opacity: 1; filter: none; transform: none; }

/* intake: situation chips (always offered), the live draft, the composer */
.rd-intake, .rd-draft, .rd-compose { position: absolute; left: 20px; right: 20px; top: 106px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 560ms cubic-bezier(0.16,1,0.3,1), transform 560ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 560ms; }
.rd[data-phase="turn"] .rd-intake, .rd[data-phase="rec"] .rd-draft, .rd[data-phase="type"] .rd-compose { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rd-chips button { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(27,26,23,0.16); background: #F6F2EA; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.rd-chips button:hover { background: #E3DACA; }
.rd-hint { margin: 10px 2px 0; font-size: 13px; line-height: 18px; color: #5A564F; }
.rd-draft { box-sizing: border-box; min-height: 96px; max-height: 196px; overflow: hidden; padding: 12px 16px 14px; border-radius: 18px; background: #F6F2EA; border: 1px solid rgba(27,26,23,0.10); }
.rd-draft-label { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: #5A564F; }
.rd-draft-text { margin: 6px 0 0; font-size: 17px; line-height: 23px; color: #1B1A17; }
.rd-draft-text:empty::before { content: "Listening…"; color: #5A564F; }
.rd-compose { display: flex; gap: 8px; align-items: center; }
.rd-compose input { flex: 1; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 25px; border: 1.5px solid rgba(27,26,23,0.18); background: #F6F2EA; font-family: inherit; font-size: 17px; color: #1B1A17; }
.rd-compose input::placeholder { color: #5A564F; opacity: 1; }
.rd-send { flex: none; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 25px; background: #A84C25; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rd-compose-note { position: absolute; left: 4px; top: 58px; margin: 0; font-size: 13px; line-height: 18px; color: #5A564F; }

/* the control row: Type (or Cancel) · the orb · End */
.rd-controls { position: absolute; left: 20px; right: 20px; top: 330px; display: grid; grid-template-columns: 72px 1fr 72px; align-items: start; justify-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 560ms cubic-bezier(0.16,1,0.3,1), transform 560ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 560ms; }
.rd[data-phase="turn"] .rd-controls, .rd[data-phase="rec"] .rd-controls, .rd[data-phase="type"] .rd-controls { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rd-ctl, .tc-s-ctl { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 16px; color: #5A564F; }
.rd-ctl-face, .tc-s-ctl-face { width: 56px; height: 56px; border-radius: 28px; background: #E3DACA; display: flex; align-items: center; justify-content: center; color: #1B1A17; margin-top: 8px; }
.rd-orb, .tc-s-orb { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 20px; font-weight: 600; color: #1B1A17; }
.rd-orb-face, .tc-s-orb-face { width: 72px; height: 72px; border-radius: 36px; background: #A84C25; color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(168,76,37,0.16); animation: rdHalo 3s ease-in-out infinite; }
.rd[data-phase="rec"] .rd-orb-face { background: #1B1A17; box-shadow: 0 0 0 10px rgba(27,26,23,0.12); animation: rdHaloRec 1.6s ease-in-out infinite; }
@keyframes rdHalo { 0%, 100% { box-shadow: 0 0 0 7px rgba(168,76,37,0.16); } 50% { box-shadow: 0 0 0 12px rgba(168,76,37,0.16); } }
@keyframes rdHaloRec { 0%, 100% { box-shadow: 0 0 0 6px rgba(27,26,23,0.12); } 50% { box-shadow: 0 0 0 14px rgba(27,26,23,0.12); } }
.rd [data-when] { display: none; }
.rd[data-phase="turn"] [data-when~="turn"], .rd[data-phase="rec"] [data-when~="rec"], .rd[data-phase="type"] [data-when~="type"] { display: flex; }
.rd[data-mic="off"] .rd-orb { display: none !important; }
/* started from the scene's Type: on your turn, Type is the one to tap */
.rd[data-hl="type"] [data-ctl="type"] { color: #1B1A17; font-weight: 600; }
.rd[data-hl="type"] [data-ctl="type"] .rd-ctl-face { background: #1B1A17; color: #F6F2EA; box-shadow: 0 0 0 6px rgba(27,26,23,0.12); }
.rd-micoff { display: none; max-width: 200px; margin: 18px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: #5A564F; }
.rd[data-mic="off"][data-phase="turn"] .rd-micoff { display: block; }

/* after the reading */
.rd-ended { position: absolute; left: 20px; right: 20px; top: 104px; display: flex; gap: 10px; opacity: 0; visibility: hidden; transition: opacity 560ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 560ms; }
.rd[data-phase="ended"] .rd-ended { opacity: 1; visibility: visible; transition-delay: 0s; }
.rd-btn { flex: 1; height: 50px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rd-btn-primary { border: 0; background: #A84C25; color: #FFFFFF !important; }
.rd-btn-secondary { border: 1.5px solid #1B1A17; background: transparent; }

.rd-foot { position: absolute; left: 20px; right: 20px; bottom: calc(26px + var(--sbx)); margin: 0; text-align: center; font-size: 12px; line-height: 16px; color: #5A564F; z-index: 4; }

/* sheets inside the reading: transcript, "Need to talk to someone?" */
.rd-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--top) + 56px); box-sizing: border-box; padding: 24px 20px calc(24px + var(--sbx)); background: #EEE8DD; border-radius: 28px 28px 0 0;
  z-index: 8; display: flex; flex-direction: column; transform: translateY(105%); visibility: hidden; transition: transform 520ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 520ms; }
.rd-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.rd-panel-help { top: auto; }
.rd-panel h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.rd-panel-body { flex: 1; overflow-y: auto; margin-top: 12px; overscroll-behavior: contain; }
.rd-panel-body p { margin: 0 0 14px; font-size: 17px; line-height: 24px; }
.rd-tr-who { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: #5A564F; }
.rd-tr-vera { font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; }
.rd-panel .rd-btn { flex: none; width: 100%; margin-top: 12px; }
.rd-scrim { position: absolute; inset: 0; background: rgba(27,26,23,0.35); z-index: 7; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; }
.rd-scrim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Reduce Motion: fades, and the sheet over her within 260 ms ---------- */
@media (prefers-reduced-motion: reduce) {
  .rd-table { transform: none !important; opacity: 0; transition: opacity 240ms linear !important; }
  .rd[data-table="up"] .rd-table { opacity: 1; }
  .rd-card-inner { transition: none !important; transform: none !important; }
  .rd-face.rd-back { transition: opacity 200ms linear; }
  .rd-front { transform: none; opacity: 0; transition: opacity 200ms linear; }
  .rd[data-card="turned"] .rd-front { opacity: 1; }
  .rd-w { filter: none; transform: none; transition: opacity 200ms linear; }
  .rd-sheet, .rd-intake, .rd-draft, .rd-compose, .rd-controls, .rd-ended, .rd-panel { transition-duration: 200ms !important; transform: none; }
  .rd[data-phase="speak"] .rd-sheet, .rd[data-phase="draw"] .rd-sheet { transform: translateY(286px) !important; }
  .rd[data-phase="ended"] .rd-sheet { transform: translateY(260px) !important; }
  .rd-panel:not(.is-open) { opacity: 0; }
  .rd-orb-face, .tc-s-orb-face, .rd-bars i, .rd-chip, .rd-chip * { animation: none !important; }
  .rd-chip, .rd-cap-page, .rd-under, .rd-scrim { transition-duration: 200ms !important; }
  .rd-caps.is-resting .rd-cap-page.is-on { transition-duration: 200ms !important; }
}

/* ---------- phones: Vera's scene is the first screen, edge to edge ----------
   Same media query as TCFull.isPhone(). The scene is in the page (not a fixed overlay) and is
   100lvh tall, so the room runs under Safari's floating bar; everything you read or tap sits inside
   the small viewport (100svh), above the bar. Two layers, two scales:
   - the art ([data-vp=stage]: room, Vera, table) is scaled to COVER the scene (--as), centred;
   - the app UI (VeraPhone's chrome/sheet/foot, and the reading .rd) is laid out at the real
     viewport size in app points: width 100vw / --rs, height 100lvh / --rs, where --rs is 1 unless
     the visible height is under 700 px (then it shrinks just enough to fit). Never letterboxed.
   All of it is CSS (tan(atan2()) turns a length ratio into a number); js/reading/full.js only
   refines --vvh from visualViewport while a reading runs, and fills the numbers in on browsers
   without CSS trig. */
.tc-cue, .tc-m-brand, .tc-scene-ctl { display: none; }
@media (max-width: 759.98px), (pointer: coarse) and (max-width: 899.98px), (pointer: coarse) and (max-height: 500px) {
  body { overflow-x: clip; }
  body > div > header { display: none !important; }
  .tcVeraHero { display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important; max-width: none !important; padding: 0 0 72px !important; }
  .tcVeraHero > .tc-hero-phone { order: -1; animation: none !important; }
  .tcVeraHero > .tc-hero-text { padding: 44px 24px 0; }
  .tcVeraHero > .tc-hero-side { padding: 24px 24px 0; box-sizing: border-box; }
  .tcVeraHero > .tc-hero-text { box-sizing: border-box; scroll-margin-top: 0; }
  .tc-talk-row, .tc-talk-note { display: none !important; }
  .tc-join-cta { margin-top: 8px; }
  .tc-m-brand { display: block; margin: 0; font-size: 15px; line-height: 20px; color: #5e5157; }
  .tc-m-brand b { color: #21181c; font-weight: 700; }

  .tc-hero-phone { position: relative; width: 100%;
    --L: 100vh; --V: 100vh;
    --Vr: var(--vvh, var(--V));
    --rs: min(1, tan(atan2(var(--Vr), 700px)));
    --uw: calc(100vw / var(--rs) + 1px); /* +1px: no sub-pixel sliver at the right edge */
    --rh: calc(var(--L) / var(--rs));
    --sbx: calc((var(--L) - var(--Vr) + max(0px, env(safe-area-inset-bottom, 0px) - 10px)) / var(--rs));
    --top: calc(max(12px, env(safe-area-inset-top, 0px)) / var(--rs) + 8px);
    --as: max(tan(atan2(100vw + 2px, 402px)), tan(atan2(var(--L) + 2px, 874px))); /* 1px of bleed on each side */
    --ax: calc((100vw - 402px * var(--as)) / 2); }
  @supports (height: 100lvh) { .tc-hero-phone { --L: 100lvh; --V: 100svh; } }
  .tc-hero-phone { --ay: 0px; }

  .tc-phone-slot { position: relative; width: 100% !important; height: 100vh !important; height: 100lvh !important; overflow: hidden; background: #2C251E; }
  .tc-phone-slot > div, .tc-phone-slot .tc-phone-still { width: 100% !important; height: 100% !important; transform: none !important; }
  .tc-phone-slot [data-vp="bezel"] { width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; background: #2C251E !important; touch-action: manipulation; }
  .tc-phone-slot [data-vp="screen"] { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
  .tc-phone-slot [data-vp="stage"] { transform: translate(var(--ax), var(--ay)) scale(var(--as)) !important; }
  .tc-phone-slot [data-vp="dim"] { display: none !important; }
  .tc-phone-slot [data-vp="ui"] { width: var(--uw) !important; height: var(--rh) !important; transform: scale(var(--rs)) !important; }
  .tc-phone-slot [data-vp="chrome"] { top: var(--top) !important; }
  .tc-phone-slot [data-vp="sheet"] { left: 0 !important; right: 0; width: auto !important; max-width: 560px; margin: 0 auto; top: calc(var(--rh) - 444px - var(--sbx)) !important; height: calc(444px + var(--sbx)) !important; transform: translateY(148px) !important; } /* 296 showing, as the reading */
  .tc-phone-slot [data-vp="ctl"] { display: none !important; }
  .tc-phone-slot [data-vp="foot"] { bottom: calc(46px / var(--rs) + var(--sbx)) !important; } /* clear of the cue row (44 px targets) below it at any scale */
  .tc-phone-still img { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-position: 50% 20% !important; }

  /* the real controls in the scene's sheet (js/main.js), in the reading's own control row:
     Hear her · the orb (Talk to Vera) · Type */
  .tc-scene-ctl { display: grid; position: absolute; left: 20px; right: 20px; top: 100px; grid-template-columns: 72px 1fr 72px; align-items: start; justify-items: center; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; }
  .tc-scene-ctl button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
  .tc-scene-ctl .tc-s-ctl[aria-pressed="true"] .tc-s-ctl-face { background: #1B1A17; color: #F6F2EA; }
  .tc-s-mid { display: flex; flex-direction: column; align-items: center; }
  .tc-s-note { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: #5A564F; text-align: center; white-space: nowrap; }
  .tc-scene-ctl button:focus-visible { outline: 2.5px solid #3E5566; outline-offset: 2px; }
  .tc-rd .tc-scene-ctl { display: none; }

  /* a small row at the bottom edge: the waitlist, and a cue that the rest of the page is below.
     Each is a 44 px tall tap target; the row sits 0 px from the visible bottom so its text lines up
     where the single cue used to be. */
  .tc-cue { display: flex; position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; bottom: calc(var(--L) - var(--Vr) + env(safe-area-inset-bottom, 0px));
    align-items: center; white-space: nowrap; font-size: 13px; line-height: 18px; color: #5A564F; }
  .tc-cue-join, .tc-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  .tc-more { color: inherit; text-decoration: none; }
  .tc-more:hover { opacity: 1; }
  .tc-cue-join { border: 0; background: none; margin: 0; font: inherit; font-weight: 600; color: #21181c; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
  .tc-cue-dot { color: #5A564F; }

  /* the reading, laid out at the viewport's own size */
  .tc-hero-phone .rd { --rs: inherit; --rh: inherit; --top: inherit; --sbx: inherit; --rx: 0px; width: var(--uw); }
  .tc-hero-phone .rd-sheet, .tc-hero-phone .rd-table, .tc-hero-phone .rd-panel { max-width: 560px; margin: 0 auto; }
  /* the sheets' content stays a phone's width, but their paper runs to both screen edges (no strips of
     the room beside them on wide screens and in landscape): a full-width backdrop behind each sheet */
  .tc-hero-phone .rd-sheet, .tc-hero-phone .rd-panel, .tc-phone-slot [data-vp="sheet"] { background: transparent !important; box-shadow: none !important; }
  .tc-hero-phone .rd-panel { isolation: isolate; }
  .tc-hero-phone .rd-sheet::before, .tc-hero-phone .rd-panel::before, .tc-phone-slot [data-vp="sheet"]::before {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - var(--uw) / 2); width: var(--uw);
    background: #EEE8DD; border-radius: 28px 28px 0 0; pointer-events: none; }
  .tc-phone-slot [data-vp="sheet"]::before { box-shadow: 0 -10px 28px rgba(27,26,23,0.14); }
  .tc-phone-slot [data-vp="sheet"] { isolation: isolate; }
  /* wide screens (landscape, tablets): header and sheets stay a phone's width, centred */
  .tc-hero-phone .rd-head, .tc-phone-slot [data-vp="chrome"] { max-width: 528px; margin: 0 auto; }
  .tc-hero-phone .rd-menu { right: max(16px, calc((100% - 528px) / 2)); }
  /* one design for idle and reading: while Vera speaks the sheet shows its top 296 points, the same as
     the idle scene (caption + control row), so starting a reading doesn't move it */
  .tc-hero-phone .rd .rd-sheet { transform: translateY(224px); }
  .tc-hero-phone .rd[data-phase="turn"] .rd-sheet, .tc-hero-phone .rd[data-phase="rec"] .rd-sheet, .tc-hero-phone .rd[data-phase="type"] .rd-sheet { transform: none; }
  .tc-hero-phone .rd[data-phase="ended"] .rd-sheet { transform: translateY(260px); }
  .tc-hero-phone .rd[data-kb="up"] .rd-sheet { transform: translateY(calc(var(--kb, 0px) * -1)); }
  /* the table: the card and its name stay above that sheet on short screens too */
  .tc-hero-phone .rd-table { --ch: clamp(130px, calc(var(--rh) - var(--sbx) - 674px), 250px);
    top: max(calc(var(--top) + 52px), min(262px, calc(var(--rh) - var(--sbx) - 296px - var(--ch) - 104px))); }
  @media (prefers-reduced-motion: reduce) {
    .tc-hero-phone .rd[data-phase="speak"] .rd-sheet, .tc-hero-phone .rd[data-phase="draw"] .rd-sheet { transform: translateY(224px) !important; }
  }

  /* text the keyboard opens for is at least 16 px on screen after the UI's scale, so Safari doesn't zoom */
  .tc-hero-phone .rd-compose input { font-size: max(17px, calc(16.5px / var(--rs))); }
  /* the AI notice and the page clear the notch and rounded corners in landscape */
  .tc-hero-phone .rd-foot, .tc-phone-slot [data-vp="foot"] {
    left: max(20px, calc(env(safe-area-inset-left, 0px) / var(--rs) + 8px)) !important;
    right: max(20px, calc(env(safe-area-inset-right, 0px) / var(--rs) + 8px)) !important; }
  main > section:not(.tcVeraHero):not(#cards) > div, body > div > footer > div, .tcVeraHero > .tc-hero-text, .tcVeraHero > .tc-hero-side {
    padding-left: max(24px, env(safe-area-inset-left, 0px)) !important; padding-right: max(24px, env(safe-area-inset-right, 0px)) !important; }

  /* ---------- landscape phones (844 x 390 up to 956 x 440) ----------
     The art is cover-scaled as in portrait (no side bars), moved up so Vera's face sits in the space
     above the sheet. The UI is never scaled below 0.92 (text >= 11 px, controls >= 40 px), so the
     sheet can't fit under her the way it does in portrait: idle and while she speaks it shows its top
     160 points (caption on the left, the idle controls on the right); on your turn it rises over her
     up to the header, with the control row at its foot. */
  @media (orientation: landscape) {
    .tc-hero-phone {
      --rs: clamp(0.92, tan(atan2(var(--Vr), 440px)), 1);
      --ay: clamp(calc(var(--L) - 874px * var(--as)), calc((var(--Vr) - 160px * var(--rs)) / 2 + 8px - 180px * var(--as)), 0px); }
    .tc-phone-slot [data-vp="sheet"] { max-width: 820px; transform: translateY(284px) !important; }
    .tc-phone-slot [data-vp="sheet"] > div:nth-child(2) { right: 340px !important; top: 26px !important; }
    .tc-scene-ctl { left: auto; right: 20px; width: 300px; top: 14px; }
    .tc-phone-slot [data-vp="foot"] { text-align: left;
      left: max(calc(50% - 390px), calc(env(safe-area-inset-left, 0px) / var(--rs) + 8px)) !important;
      right: max(calc(50% - 70px), calc(env(safe-area-inset-right, 0px) / var(--rs) + 8px)) !important; }
    /* the cue row (waitlist · more) sits under the AI notice on the left, clear of the controls on the
       right: the notice's left edge in screen pixels (it is laid out in the UI layer, scaled by --rs),
       minus the row's own 8 px padding so the text lines up */
    .tc-cue { transform: none; right: auto;
      left: max(0px, calc(max(50vw - 390px * var(--rs), env(safe-area-inset-left, 0px) + 8px * var(--rs)) - 8px)); }
    .tc-hero-phone .rd-sheet { max-width: 820px; height: calc(var(--rh) - var(--top) - 60px); }
    .tc-hero-phone .rd .rd-sheet { transform: translateY(calc(100% - 160px - var(--sbx))); }
    .tc-hero-phone .rd[data-phase="ended"] .rd-sheet { transform: translateY(calc(100% - 210px - var(--sbx))); }
    .tc-hero-phone .rd-controls { top: auto; bottom: calc(46px + var(--sbx)); left: 50%; right: auto; width: 400px; margin-left: -200px; }
    .tc-hero-phone .rd-draft { max-height: 96px; }
    .tc-hero-phone .rd-intake, .tc-hero-phone .rd-draft, .tc-hero-phone .rd-compose { top: 94px; }
    .tc-hero-phone .rd-chips button { height: 44px; border-radius: 22px; } /* >= 40 px on screen */
    .tc-hero-phone .rd-ai, .tc-phone-slot [data-vp="chrome"] span > span { font-size: 12px !important; line-height: 14px !important; }
    .tc-hero-phone .rd-ended { max-width: 480px; margin: 0 auto; }
    .tc-hero-phone .rd-table { max-width: 820px; top: calc(var(--top) + 52px);
      --ch: clamp(110px, calc(var(--rh) - var(--sbx) - 160px - var(--top) - 52px - 38px), 250px); }
    .tc-hero-phone .rd-under { left: calc(50% + var(--ch) * 0.3 + 16px); right: 20px; top: calc(24px + var(--ch) / 2 - 24px); text-align: left; }
    @media (prefers-reduced-motion: reduce) {
      .tc-hero-phone .rd[data-phase="speak"] .rd-sheet, .tc-hero-phone .rd[data-phase="draw"] .rd-sheet { transform: translateY(calc(100% - 160px - var(--sbx))) !important; }
      .tc-hero-phone .rd[data-phase="ended"] .rd-sheet { transform: translateY(calc(100% - 210px - var(--sbx))) !important; }
    }
  }

  /* while a reading runs: the scene is a fixed layer over everything, like an app screen. The page
     under it is gone and locked, so there is nothing to scroll to, and it can't bounce or pull to
     refresh. (Safari's toolbar then stays as it is; the scene runs under it, 100lvh tall.) */
  html.tc-full-open, html.tc-full-open body { overscroll-behavior: none; overflow: hidden; height: 100%; background: #E1D2BC; } /* Vera's wall: Safari tints the status bar from it */
  html.tc-full-open .tc-hero-phone { position: fixed; left: 0; right: 0; top: 0; z-index: 50; }
  html.tc-full-open body > div > header, html.tc-full-open body > div > footer, html.tc-full-open main > section:not(.tcVeraHero),
  html.tc-full-open .tcVeraHero > div:not(.tc-hero-phone), html.tc-full-open .tc-cue { display: none !important; }
  html.tc-full-open .tcVeraHero { padding: 0 !important; }
  html.tc-full-open body > div { min-height: 0 !important; }
}