/* Desktop presentation shell: at >=768px every VoteTexasValues page (the app AND the
   search pages) shows the pitch rail + a phone frame running the page's own mobile layout.
   Loaded by index.html and by every page tools/generate-seo-pages.py writes. */
.vtv-shellmode, .vtv-shellmode body { background:#f2ece9 !important; overflow:hidden; height:100%; }
#vtv-shell { position:fixed; inset:0; background:#f2ece9; z-index:100; }
/* dark "sheet of paper" the composition sits on; falls back to full-bleed ink on narrow viewports */
/* dark "sheet of paper" the composition sits on; falls back to full-bleed ink on narrow viewports */
#vtv-shell::before { content:''; position:absolute; left:48px; right:64px; top:44px; bottom:44px;
  background:#0d0d0d; border-radius:26px; box-shadow:0 24px 70px rgba(30,15,10,.35); }
#vtv-shell .vs-heart { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px;
  border:2.5px solid rgba(255,255,255,.85); border-radius:4px; color:#fff; font-size:19px; vertical-align:-10px; margin:0 8px 0 0; }
#vtv-shell .vs-cta { border:0; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:19px; color:#fff;
  background:#9a1029; padding:13px 44px 13px 18px; margin-bottom:18px;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
#vtv-shell .vs-cta .vs-heart { border-color:#fff; margin:0; color:#f5c145; }
#vtv-shell .vs-ctaglow { display:inline-block; filter:drop-shadow(0 0 16px rgba(200,30,60,.65)); }
#vtv-shell .vs-arrow { font-size:22px; line-height:0; }
#vtv-shell .vs-what { font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.18em;
  font-size:13px; color:#f08a90; margin-bottom:9px; }
#vtv-shell .vs-list { list-style:none; margin:0; padding:0; }
#vtv-shell .vs-list li { position:relative; padding-left:24px; margin-bottom:8px; color:rgba(255,255,255,.95); font-weight:600; font-size:15px; line-height:1.45; }
#vtv-shell .vs-list li::before { content:'\2713'; position:absolute; left:0; top:0; color:#8fb3d9; font-weight:800; }
#vtv-shell .vs-why { margin-top:18px; color:#fff; font-size:17px; line-height:1.55; font-weight:600;
  border-left:3px solid #9a1029; padding-left:14px; }
/* rail + phone centered as ONE composition: shared --x anchors both, outer margins
   absorb extra width instead of the gap between them */
#vtv-shell { --pw:min(510px, calc((100vh - 20px) / 2)); --gap:56px;
  --x:max(16px, calc((100vw - 430px - var(--gap) - var(--pw)) / 2)); }
#vtv-shell .vs-col { position:absolute; left:var(--x); top:0; bottom:0; width:430px; display:flex; flex-direction:column; justify-content:center; gap:44px; padding:40px 48px 40px 56px; z-index:2; }
/* short viewports (landscape tablets): compress the rail so it fits the height */
@media (max-height: 850px) and (orientation: landscape) {
  #vtv-shell .vs-col { gap:24px; padding-top:24px; padding-bottom:24px; }
  #vtv-shell .vs-pitch h1 { font-size:30px; }
  #vtv-shell .vs-cta { font-size:16px; padding:10px 36px 10px 14px; margin-bottom:10px; }
  #vtv-shell .vs-cta .vs-heart { width:28px; height:28px; font-size:15px; }
  #vtv-shell .vs-list li { font-size:13px; margin-bottom:5px; }
  #vtv-shell .vs-why { font-size:13px; margin-top:8px; }
  #vtv-shell .vs-qr img { width:120px; height:120px; }
}
/* no room for the rail (portrait tablets / narrow windows): phone alone, centered on ink */
@media (max-width: 1023px), (orientation: portrait) {
  #vtv-shell .vs-col { display:none; }
  #vtv-shell::before, #vtv-shell.vs-slim.vs-slim::before { left:16px; right:16px; top:16px; bottom:16px; border-radius:20px; }
  #vtv-shell .vs-col { display:none; }
  /* phone never wider than the window, and centered (Gina, Oct 14: "when you make the window thinner the phone should stay on the screen") */
  #vtv-shell, #vtv-shell.vs-slim.vs-slim { --pw:min(510px, calc((100vh - 20px) / 2), calc(100vw - 48px)); }
  #vtv-shell { --x:calc((100vw - var(--pw)) / 2 - 430px - var(--gap)); }
  #vtv-shell.vs-slim.vs-slim { --x:calc((100vw - var(--pw)) / 2 - var(--col) - var(--gap)); }
}
#vtv-shell .vs-pitch h1 { font-family:'Archivo',sans-serif; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.02em; font-size:38px; line-height:1.1; }
#vtv-shell .vs-pitch p { font-family:'Mulish',sans-serif; color:rgba(255,255,255,0.75); font-size:16px; line-height:1.65; margin-top:18px; max-width:34ch; }
#vtv-shell .vs-qr { display:flex; align-items:center; gap:18px; }
#vtv-shell .vs-qr img { width:166px; height:166px; background:#fff; padding:5px; border:2px solid #810d24; }
#vtv-shell .vs-qr span { font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:#fff; max-width:12ch; line-height:1.5; }
#vtv-shell .vs-lockup { display:block; text-decoration:none; padding:0 40px; text-align:center; }
#vtv-shell .vs-art { display:flex; align-items:center; justify-content:center; gap:2.5%; }
#vtv-shell .vs-art img { width:26%; }
#vtv-shell .vs-art img.vs-name { width:66%; }
#vtv-shell .vs-div { display:flex; align-items:center; gap:12px; margin:16px 0 12px; }
#vtv-shell .vs-div i { display:block; height:2px; flex:1; }
#vtv-shell .vs-div i.l { background:#fff; } #vtv-shell .vs-div i.r { background:#810d24; }
#vtv-shell .vs-div b { color:#fff; font-size:17px; line-height:1; font-weight:400; }
#vtv-shell .vs-tag { font-family:'Mulish',sans-serif; font-weight:700; color:#fff; letter-spacing:.18em; text-transform:uppercase; font-size:12.5px; white-space:nowrap; }
#vtv-shell .vs-mid { padding:0 40px; }
#vtv-shell .vs-ask { background:#810d24; color:#fff; text-align:center; padding:16px 12px;
  font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:16px; }
#vtv-shell .vs-help { padding-top:20px; text-align:center; font-family:'Mulish',sans-serif; font-size:15px; line-height:1.6; color:rgba(255,255,255,.72); }
#vtv-shell .vs-banner { position:relative; display:block; }
#vtv-shell .vs-banner img { display:block; width:100%; }
#vtv-shell .vs-contrib { position:absolute; left:8%; top:30%; background:#810d24; color:#fff;
  font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size:12px; padding:9px 16px; border-radius:10px; border:2px solid #191919; }
#vtv-shell .vs-stage { position:absolute; inset:0; z-index:1; }
#vtv-shell .vs-frame { position:absolute; top:50%; transform:translateY(-50%); left:calc(var(--x) + 430px + var(--gap)); width:var(--pw); height:calc(var(--pw) * 2); background:#000; border-radius:34px;
  border:1px solid #8a8a8a; box-shadow:0 30px 90px rgba(0,0,0,.5), inset 0 0 0 3px #1a1a1a, 0 0 0 1.5px rgba(255,255,255,.42), 0 0 0 2.5px rgba(0,0,0,.28), 0 0 30px rgba(255,255,255,.1); padding:12px; }
#vtv-shell .vs-frame iframe { width:100%; height:100%; border:0; border-radius:24px; background:#f4f4f2; display:block; }
.vtv-shellmode body > :not(#vtv-shell) { display:none !important; }
#vtv-shell .vs-cta:hover { filter:brightness(1.15); } #vtv-shell .vs-cta:active { transform:scale(.98); }
#vtv-shell .vs-cta { white-space:nowrap; font-size:17px; padding-right:40px; }

/* Left side = just the QR (Gina, Sep 27) */
#vtv-shell .vs-col.vs-qronly { align-items:center; justify-content:center; gap:12px; text-align:center; }
#vtv-shell .vs-qronly img { width:140px; height:140px; background:#fff; padding:6px; border:3px solid #810d24; border-radius:8px; }
#vtv-shell .vs-qronly p { margin:0; font-family:'Archivo',sans-serif; font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:#fff; max-width:14ch; line-height:1.2; }

/* slim composition: QR column + phone, the dark sheet hugs them instead of spanning the window */
#vtv-shell.vs-slim { --col:240px; --x:max(16px, calc((100vw - var(--col) - var(--gap) - var(--pw)) / 2)); }
#vtv-shell.vs-slim .vs-col { width:var(--col); padding:40px 0; }
#vtv-shell.vs-slim .vs-frame { left:calc(var(--x) + var(--col) + var(--gap)); }
#vtv-shell.vs-slim::before { left:max(16px, calc(var(--x) - 56px)); right:max(16px, calc(100vw - var(--x) - var(--col) - var(--gap) - var(--pw) - 56px)); }