/* STUC public pages (TO-0100 item 6, PUBLIC-PAGES-SPEC §8.1): home, /join,
   /login, /signup, /privacy, /help/invite. Tokens and layout copied from the
   approved mockups docs/mockups/*-v2.html (TO-0079 v1.1); mockup notes left
   out. System fonts only; light tokens on :root, dark under
   prefers-color-scheme; zoom is never blocked. No inline styles anywhere:
   the pages' CSP is style-src 'self' (item 8). */
:root{
  --paper:#F3F4F8;--surface:#FFFFFF;--sunk:#E9EBF1;--ink:#171A22;--ink-2:#3A3E49;--muted:#575C69;
  --line:#D9DCE5;--blue:#2563EB;--blue-ink:#1D4ED8;--on-blue:#FFFFFF;--btn2-bg:#FFFFFF;--btn2-ink:#171A22;
  --star:#2563EB;--ok:#0F7B4B;--bad:#B42318;--bad-bg:#FDECEA;--tag:#8A5A00;--focus:#1D4ED8;--btn-hover:#1D4ED8;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0E1117;--surface:#171B24;--sunk:#1F2430;--ink:#E9EBF1;--ink-2:#C9CDD8;--muted:#A4AAB8;
  --line:#2C3240;--blue:#3B6CF0;--blue-ink:#8FB0FF;--on-blue:#FFFFFF;--btn2-bg:#171B24;--btn2-ink:#E9EBF1;
  --star:#6F97FF;--ok:#4FD39A;--bad:#FF8A80;--bad-bg:#3A1A1A;--tag:#F3C969;--focus:#8FB0FF;--btn-hover:#2F5FDB;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Leelawadee UI","Khmer Sangam MN","Noto Sans Khmer","Lao Sangam MN","Noto Sans Lao","Myanmar Sangam MN","Noto Sans Myanmar","Kohinoor Devanagari","Nirmala UI","Noto Sans Devanagari","Tamil Sangam MN","Noto Sans Tamil","Geeza Pro","Noto Naskh Arabic","PingFang SC","PingFang TC","Hiragino Sans","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:17px;line-height:1.55}
/* The sign-up page also loads app.css (language picker): undo its full-height
   flex body and zeroed spacing for the page shell. */
body.public{display:block;height:auto;min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow-x:hidden}
a{color:var(--blue-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
code,.mono{font-family:var(--mono);font-size:.92em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 28px}}
@media (min-width:1200px){.wrap{padding:0 40px}}
/* top bar */
.bar{display:flex;align-items:center;gap:10px;min-height:60px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);margin-right:auto}
.mark{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mark .star{fill:var(--star);stroke:none}
.word{font-family:var(--serif);font-size:22px;letter-spacing:.01em}
.beta{font-size:12px;font-weight:700;color:var(--blue-ink);border:1px solid currentColor;border-radius:999px;padding:1px 8px;line-height:1.5}
.signin{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink)}
/* buttons */
.btn,#code-button{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:12px 22px;border-radius:14px;font:inherit;font-weight:700;font-size:17px;line-height:1.3;text-decoration:none;cursor:pointer;border:1px solid transparent}
/* #code-button keeps TO-0057's exact markup, so it is styled by id. */
.btn-main,#code-button{background:var(--blue);color:var(--on-blue)}
.btn-main:hover,#code-button:hover{background:var(--btn-hover);color:var(--on-blue)}
.btn-main:disabled,#code-button:disabled{opacity:.6;cursor:default}
.btn-2{background:var(--btn2-bg);color:var(--btn2-ink);border-color:var(--line)}
.btn-2:hover{border-color:var(--blue)}
.btn.full,#code-button{width:100%}
.btn.inline{display:inline-flex}
.btns{display:flex;flex-direction:column;gap:10px}
@media (min-width:600px){.btns{flex-direction:row}.btns .btn{flex:0 0 auto}}
/* text */
h1,h2,h3{font-weight:400;margin:0}
.display{font-family:var(--serif);line-height:1.12}
h2.sec{font-family:var(--serif);font-size:28px;line-height:1.2;margin:0 0 18px}
.small{font-size:14.5px;color:var(--muted)}
.lede{font-size:18px;color:var(--ink-2)}
.flush{margin:0}
.more{margin:20px 0 0}
section.block{padding-top:44px;padding-bottom:44px;border-top:1px solid var(--line)}
@media (min-width:768px){section.block{padding-top:64px;padding-bottom:64px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.banner{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--sunk);color:var(--ink);font-size:15px;font-weight:600;line-height:1.45}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* footer */
footer.foot{border-top:1px solid var(--line);margin-top:28px;padding-top:28px;padding-bottom:28px;font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 20px;margin:0;padding:0;list-style:none}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.foot-line{margin:14px 0 0;color:var(--muted);font-size:14.5px}

/* home: hero */
.hero{display:grid;gap:28px;padding-top:28px;padding-bottom:36px}
.hero-text{display:flex;flex-direction:column;gap:16px}
.eyebrow{font-size:14px;font-weight:600;color:var(--blue-ink)}
.hero h1{font-size:clamp(34px,8.6vw,60px)}
.hero .lede{margin:0}
.hero .small{margin:0}
@media (min-width:1024px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:48px;padding-top:64px;padding-bottom:64px}}
/* home: demo (block 5). The bubbles mirror the live chat (app.css
   .message-card family, app.js renderMessage), values copied from the
   approved mockup, which keeps the own bubble at --blue for AA in dark. */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px rgba(23,26,34,.07)}
.demo-head{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.demo{--c0-accent:#0f766e;--c0-tint:#ccfbf1;--c0-text:#134e4a;--c2-accent:#7e22ce;--c2-tint:#f3e8ff;--c2-text:#581c87;--c4-accent:#be123c;--c4-tint:#ffe4e6;--c4-text:#881337;--c6-accent:#a04a07;--c6-tint:#fef3c7;--c6-text:#78350f}
@media (prefers-color-scheme:dark){.demo{--c0-accent:#5eead4;--c0-tint:#042f2e;--c0-text:#ccfbf1;--c2-accent:#d8b4fe;--c2-tint:#3b0764;--c2-text:#f3e8ff;--c4-accent:#fda4af;--c4-tint:#4c0519;--c4-text:#ffe4e6;--c6-accent:#fcd34d;--c6-tint:#451a03;--c6-text:#fef3c7}}
.message-card[data-color="0"]{--sw-accent:var(--c0-accent);--sw-tint:var(--c0-tint);--sw-text:var(--c0-text)}
.message-card[data-color="2"]{--sw-accent:var(--c2-accent);--sw-tint:var(--c2-tint);--sw-text:var(--c2-text)}
.message-card[data-color="4"]{--sw-accent:var(--c4-accent);--sw-tint:var(--c4-tint);--sw-text:var(--c4-text)}
.message-card[data-color="6"]{--sw-accent:var(--c6-accent);--sw-tint:var(--c6-tint);--sw-text:var(--c6-text)}
.message-card{display:flex;flex-direction:column;max-width:85%;border-radius:16px;padding:10px 14px}
.message-card.own{align-self:flex-end;background:var(--blue);color:var(--on-blue)}
.message-card.other{align-self:flex-start;background:var(--sw-tint,var(--surface));color:var(--sw-text,var(--ink));border:1px solid transparent;border-left:3px solid var(--sw-accent,var(--line))}
.message-card.own,.message-card.other{border-top-left-radius:16px;border-top-right-radius:16px}
.message-card.own.group-single{border-bottom-right-radius:4px}
.message-card.other.group-single{border-bottom-left-radius:4px}
.bubble-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.avatar{width:24px;height:24px;border-radius:50%;border:2px solid var(--sw-accent,var(--blue-ink));color:var(--sw-accent,var(--blue-ink));font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sender-tag{font-size:.8rem;font-weight:700;color:var(--sw-accent,var(--blue-ink))}
.translation{font-size:1rem;line-height:1.35;font-weight:400;word-break:break-word}
.message-card.other .translation{color:var(--sw-text,var(--ink))}
.message-card.own .translation{color:var(--on-blue)}
.original-wrap{margin-top:6px;padding-top:6px;border-top:1px solid var(--sw-accent,var(--line))}
.original-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sw-text,var(--muted));font-weight:700}
.original{font-size:.9rem;color:var(--sw-text,var(--muted));line-height:1.4;margin-top:2px;word-break:break-word}
.translation,.original{overflow-wrap:anywhere}
.msg-meta{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin-top:4px;font-size:.75rem}
.message-card.own .msg-meta{color:var(--on-blue)}
.translated-from{display:none;font-style:italic}
.caption{font-size:14.5px;color:var(--muted);margin:2px 2px 0}
@media (max-width:430px){.demo{gap:8px}.message-card{max-width:92%}}
@media (min-width:900px){
  .message-card{max-width:75%}
  .msg-body.has-original{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .msg-body.has-original .original-wrap{margin-top:0;padding-top:0;border-top:none;padding-left:16px;border-left:1px solid var(--sw-accent,var(--line))}
}
/* home: blocks 6-11 */
.steps{display:grid;gap:14px;counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}.steps li{flex-direction:column}}
.tiles{display:grid;gap:12px}
@media (min-width:768px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile h3{font-size:18px;font-weight:700;margin:0 0 4px;line-height:1.35}
.tile p{margin:0;color:var(--ink-2)}
.invite-short{display:grid;gap:16px}
@media (min-width:900px){.invite-short{grid-template-columns:1.2fr 1fr;align-items:center}}
.example{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.chip{font-family:var(--mono);font-size:16px;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:6px 10px;overflow-wrap:anywhere}
.never{font-weight:700;font-size:18px;margin:0}
.sent-label{margin-bottom:6px}
.invite-text{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.facts li{padding-left:22px;position:relative}
.facts li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
@media (min-width:900px){.facts{grid-template-columns:1fr 1fr;gap:14px 32px}}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:1024px){.who-grid{grid-template-columns:repeat(4,1fr)}}
.who-card{display:flex;flex-direction:column;gap:10px;font-weight:600;line-height:1.35}
.who-card svg{color:var(--blue-ink)}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:2px dashed var(--line);border-radius:14px;background:var(--sunk);color:var(--muted);padding:14px;font-size:14px;line-height:1.4}
.ph svg{color:var(--muted)}
.ph .ph-tag{font-size:12px;font-weight:700;color:var(--tag)}
.hero .ph{aspect-ratio:16/9}
.who-card .ph{aspect-ratio:4/3;font-size:12.5px;padding:8px;font-weight:400}
.again{text-align:center}
.again .btn{display:inline-flex;width:100%}
@media (min-width:600px){.again .btn{width:auto}}

/* narrow pages: /join, /login, /signup. The column is capped on desktop
   (F-10) and every field is fluid on a phone. */
.narrow{max-width:520px;margin:0 auto;padding:32px 16px 8px}
@media (min-width:768px){.narrow{padding-top:56px}}
.narrow .banner{margin:0 0 14px}
.domain{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted);margin:0 0 18px}
.domain code{color:var(--ink);font-size:15px}
.narrow h1{font-family:var(--serif);font-size:34px;line-height:1.15;margin:0 0 10px}
.narrow .lede{margin:0 0 22px}
#code-form,.fields{display:flex;flex-direction:column;gap:12px}
.narrow label{font-weight:700;font-size:15.5px}
.narrow input{width:100%;min-width:0;font:inherit;font-size:18px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.narrow input:focus{border-color:var(--blue);outline:3px solid var(--focus);outline-offset:0}
#code{font-size:22px;letter-spacing:.06em;font-family:var(--mono);text-transform:uppercase}
.under{margin:8px 0 0}
.err{min-height:1.4em;margin:4px 0 0;color:var(--bad);font-weight:600;font-size:15.5px}
.trust{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.trust svg{flex:0 0 auto;color:var(--ok);margin-top:2px}
.trust p{margin:0}
.agree{margin:16px 0 0;font-size:14.5px;color:var(--muted)}
.alt{margin:20px 0 0}
/* sign-up form (TO-0051, TO-0052): moved from the page's inline style. */
.signup-form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.signup-form label,.signup-field{display:flex;flex-direction:column;gap:6px;font-size:15.5px;font-weight:700}
.signup-form label span,.signup-field span span{font-weight:400;color:var(--muted)}
.signup-form .lp-button{font-size:18px;padding:14px 16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.signup-form button[type="submit"]{margin-top:8px;min-height:52px;background:var(--blue);color:var(--on-blue);border:none;border-radius:14px;padding:14px;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.signup-form button[type="submit"]:hover{background:var(--btn-hover)}
.signup-form button[disabled]{opacity:.6;cursor:progress}
#signup-status{min-height:1.4em;color:var(--bad);font-size:14.5px;margin:0}
.signup-avatar{display:flex;flex-direction:column;gap:10px;border:0;margin:0;padding:0;min-width:0}
.signup-avatar legend{padding:0;margin-bottom:4px;font-size:15.5px;font-weight:700}
.signup-avatar legend span{font-weight:400;color:var(--muted)}
.avatar-current{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--sunk)}
.avatar-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.avatar-choice{border:2px solid transparent;border-radius:50%;padding:2px;background:var(--surface);cursor:pointer}
.avatar-choice svg{display:block;width:100%;height:auto}
.avatar-choice[aria-pressed="true"]{border-color:var(--blue)}
.avatar-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.signup-form .avatar-controls button,.signup-form .avatar-controls label{max-width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:400;cursor:pointer}
.signup-form .avatar-controls input[type="file"]{font-size:14px;padding:6px 0;border:0;background:none;width:100%;max-width:100%}
.avatar-preview{width:min(100%,320px);border-radius:12px;background:var(--ink)}
#avatar-status{min-height:1.4em;color:var(--ink-2);font-size:14.5px;margin:0}

/* document pages: /privacy, /help/invite */
.doc{max-width:720px;margin:0 auto;padding:32px 16px 8px}
@media (min-width:768px){.doc{padding-top:56px}}
.doc h1{font-family:var(--serif);font-size:38px;line-height:1.15;margin:0 0 8px}
.doc h2{font-family:var(--serif);font-size:25px;line-height:1.25;margin:40px 0 10px}
.doc p{margin:0 0 12px}
.short{margin:18px 0 0;padding:20px;list-style:none;display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.short li{padding-left:24px;position:relative}
.short li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.toc{display:flex;flex-wrap:wrap;gap:4px 16px;margin:16px 0 0;padding:0;list-style:none;font-size:15px}
.toc a{display:inline-flex;min-height:44px;align-items:center}
.phone{max-width:340px;margin:18px 0 6px;background:var(--sunk);border:1px solid var(--line);border-radius:22px;padding:14px}
.phone-top{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.phone-top .av{width:30px;height:30px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--blue-ink)}
.bubble{background:var(--surface);border-radius:4px 16px 16px 16px;padding:10px 12px;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere;max-width:92%}
.bubble .u{color:var(--blue-ink);text-decoration:underline}
.time{font-size:11.5px;color:var(--muted);margin-top:4px}
.rules{margin:18px 0 0;padding:0;list-style:none;counter-reset:r;display:grid;gap:14px}
.rules.cont{counter-reset:r 1}
.rules li{position:relative;padding-left:44px}
.rules li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.pair{display:grid;gap:16px}
@media (min-width:768px){.pair{grid-template-columns:1fr 1fr}}
.label-ok{font-size:13px;font-weight:700;color:var(--ok)}
.label-bad{font-size:13px;font-weight:700;color:var(--bad)}
.fake .bubble{border:1.5px solid var(--bad)}
.mark-bad{background:var(--bad-bg);color:var(--bad);border-radius:3px;padding:0 2px}
.report{margin:24px 0 0}

/* guest join page /join/{token} (TO-0104, mockups guest-join-v2.html and
   session-ended-v2.html): the form keeps the old field ids, so it is styled
   by id; app.css loads first for the language picker, as on /signup. */
.host{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.host .av{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--sunk);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--blue-ink)}
.join-page .host h1{margin:0;font-size:30px;min-width:0;overflow-wrap:anywhere}
.count{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--blue-ink);margin:0 0 18px}
.count i{width:9px;height:9px;border-radius:50%;background:var(--ok)}
#f{display:flex;flex-direction:column;gap:12px}
#f .lp-button{min-height:52px;font-size:18px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
#lang-label,.pick-label{margin-top:6px}
.pick-label{margin-bottom:0;font-weight:700;font-size:15.5px}
.hint{margin:-4px 0 0;font-size:14.5px;color:var(--muted)}
.narrow .confirm{display:flex;gap:12px;align-items:center;min-height:44px;font-weight:400;font-size:16px}
.narrow .confirm input{width:22px;height:22px;margin:0;padding:0;flex:0 0 auto}
.avatar-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.narrow .avatar-tools label,.avatar-tools button{max-width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px 14px;background:var(--btn2-bg);color:var(--btn2-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.avatar-tools button:hover,.narrow .avatar-tools label:hover{border-color:var(--blue)}
.narrow .avatar-tools input[type="file"]{display:block;width:100%;max-width:100%;margin-top:4px;padding:4px 0;border:0;background:none;font-size:14px;font-weight:400}
#f .join{margin-top:10px;min-height:52px;width:100%;padding:12px 22px;border:1px solid transparent;border-radius:14px;background:var(--blue);color:var(--on-blue);font:inherit;font-size:17px;font-weight:700;line-height:1.3;cursor:pointer}
#f .join:hover{background:var(--btn-hover)}
#f .join:disabled{opacity:.6;cursor:progress}
.form-foot{margin:22px 0 0;text-align:center}
.state{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.state h1,.state h2{font-family:var(--serif);font-size:28px;line-height:1.2;margin:0;overflow-wrap:anywhere}
.state p{margin:0;color:var(--ink-2)}
.state .btn{margin-top:6px}
.ico{width:46px;height:46px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center;color:var(--blue-ink)}
/* the picker's search box (app.css .lp-search, margin 8px 12px) must not take
   .narrow input's width:100%: it overflowed the sheet by 24px and, focused,
   scrolled the whole panel 11px to the left (TO-0104 r1). */
.narrow .lp-search{width:auto;min-width:0}
/* Password pages (TO-0105): a result card or a form that password.js
   hides must stay hidden, though .state and .fields set display:flex. */
.state[hidden],.fields[hidden]{display:none}
.narrow .state{margin-top:8px}
.alt.forgot{margin-top:14px}
/* password.js focuses a result card's heading (TO-0105 r1); the card
   itself is the cue, so the programmatic focus draws no ring. */
.state h2[tabindex="-1"]:focus{outline:none}