/* One stacking and scrolling rule for every menu, pop-up, drawer, and dialog (owner, 2026-10-28).
   Open layers sit above banners, tab bars, and the bottom bar; they never run off the screen; they scroll inside
   themselves; and the page behind them stays still. Loaded last on every page. */
dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box}
dialog:not([open]){display:none}
dialog::backdrop{background:rgba(0,0,0,.6)}
html:has(dialog[open]:modal),html:has(dialog[open]:modal) body,html.pp-lock,html.pp-lock body{overflow:hidden!important;overscroll-behavior:none}
/* Pop-ups that are not real dialogs: fit the screen, scroll inside, and stack above every bar. */
.howto-pop,#pauseTip.pause-tip,#nameTip,.bar-more,#botDrawer.bot-drawer{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.howto-pop{z-index:2147470000}
#pauseTip.pause-tip{z-index:2147470000}
.bar-more{z-index:2147470000;max-height:calc(100dvh - 120px - env(safe-area-inset-bottom))}
#botDrawer.bot-drawer{z-index:2147469000}
.chat-drawer,#voiceStrip.voice-strip{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Open sections in the page: long contents scroll inside the section instead of pushing the page around. */
details[open]>:not(summary){max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
details details[open]>:not(summary){max-height:none;overflow:visible}
/* The "Your name is permanent" confirm. */
#nameLockDlg{width:min(420px,calc(100vw - 24px));padding:20px;border-radius:18px;border:2px solid #0b1320;background:#ffffff;color:#0b1320}
#nameLockDlg h2{margin:0 0 8px;font:800 22px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif;color:#0b1320!important}
#nameLockDlg p{margin:0 0 16px;font:600 18px/1.4 "Atkinson Hyperlegible",system-ui,sans-serif;color:#0b1320!important}
#nameLockDlg .nl-name{font-weight:800}
#nameLockDlg .nl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#nameLockDlg .nl-row button{min-height:52px;border-radius:14px;font:800 18px/1 "Atkinson Hyperlegible",system-ui,sans-serif;cursor:pointer}
#nameLockDlg .nl-cancel{background:#ffffff;color:#0b1320;border:2px solid #0b1320}
#nameLockDlg .nl-ok{background:#0b5c2c;color:#ffffff;border:2px solid #0b5c2c}
html[data-theme="dark"] #nameLockDlg{background:#0e1622!important;color:#f4f7fb;border-color:#f4f7fb}
html[data-theme="dark"] #nameLockDlg h2,html[data-theme="dark"] #nameLockDlg p{color:#f4f7fb!important}
html[data-theme="dark"] #nameLockDlg .nl-cancel{background:#0e1622;color:#f4f7fb;border-color:#f4f7fb}
html[data-theme="dark"] #nameLockDlg .nl-ok{background:#2fae5a;color:#06140b;border-color:#2fae5a}
/* Back and Forward: small, fixed, thumb-reachable, above the bottom bar, never over content. */
.pp-nav{position:fixed;z-index:2147460000;left:max(8px,env(safe-area-inset-left));bottom:calc(var(--pp-nav-lift,0px) + 10px + env(safe-area-inset-bottom));display:flex;gap:6px}
.pp-nav button{display:flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;border:2px solid #ffffff;background:#0a1848;color:#ffffff;font:800 15px/1 "Atkinson Hyperlegible",system-ui,sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.35);cursor:pointer}
.pp-nav button svg{display:block}
.pp-nav button:disabled{opacity:.45;cursor:default;box-shadow:none}
.pp-nav button:focus-visible{outline:3px solid #ffb400;outline-offset:2px}
html[data-theme="dark"] .pp-nav button{background:#f4f7fb;color:#0a1848;border-color:#0a1848}
html.pp-has-nav body{padding-bottom:calc(var(--pp-nav-lift,0px) + 66px + env(safe-area-inset-bottom))}
html.pp-nav-off .pp-nav{display:none}
/* Sign-in screen note after a log out or an inactivity sign-out. */
#gate .gate-idle{margin:0 0 12px;padding:12px 14px;border-radius:12px;border:2px solid #7a5200;background:#fff4c2;color:#2a1c00!important;font:800 17px/1.35 "Atkinson Hyperlegible",system-ui,sans-serif}
#gate .gate-idle[hidden]{display:none}
/* The helper's answer, voice, and ears. */
#helperDlg .helper-answer{margin:10px 0;white-space:pre-wrap;font-size:17px;line-height:1.45}
#helperDlg .helper-answer:empty{display:none}
#helperDlg .helper-voice{margin-top:12px;padding-top:12px;border-top:1px solid rgba(127,127,127,.45)}
#helperDlg .helper-voice h3{margin:0 0 6px;font-size:18px}
#helperDlg .mic-btn{display:inline-flex;align-items:center;gap:8px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#helperDlg .mic-btn *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
/* Oct 28: the last line ("... usually answers in a few seconds") clears Safari's bottom bar on iPhone. */
#helperDlg .helper-voice{padding-bottom:calc(env(safe-area-inset-bottom) + 80px)}
#helperDlg .mic-btn.live{background:#b3121b!important;color:#fff!important;border-color:#fff!important}
#helperDlg .listen-pill{display:inline-flex;align-items:center;gap:8px;margin:8px 0;padding:6px 12px;border-radius:999px;background:#b3121b;color:#fff!important;font-weight:800}
#helperDlg .listen-pill::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;animation:ppPulse 1s ease-in-out infinite}
#helperDlg .listen-pill[hidden]{display:none}
/* Patience note under the talk controls: its own light box, so the contrast holds in every theme. */
#helperDlg .helper-patience{max-width:34ch;margin:6px auto 4px;padding:6px 10px;border-radius:8px;background:#fff8d6;color:#111!important;border:1px solid #111;font-size:14px;line-height:1.35;font-weight:600;text-align:center;text-wrap:balance}
#helperDlg .helper-patience[hidden]{display:none}
#helperDlg .helper-info-row{display:flex;justify-content:center;margin-top:8px}
#helperDlg .info-btn{width:28px;height:28px;min-width:28px;padding:0;border-radius:50%;border:2px solid #111;background:#fff8d6;color:#111!important;font:700 italic 16px/1 Georgia,serif;cursor:pointer}
#helperDlg .info-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
#helperDlg .info-btn[aria-expanded="true"]{background:#111;color:#fff8d6!important;border-color:#fff8d6}
/* Thinking dots: a gentle bounce (one cycle per 1.2 s, well under 3 flashes a second). */
#helperDlg .think-dots{display:flex;justify-content:center;gap:6px;margin:4px 0}
#helperDlg .think-dots[hidden]{display:none}
#helperDlg .think-dots i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35;animation:ppThink 1.2s ease-in-out infinite}
#helperDlg .think-dots i:nth-child(2){animation-delay:.2s}
#helperDlg .think-dots i:nth-child(3){animation-delay:.4s}
@keyframes ppThink{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){#helperDlg .think-dots i{animation:none;opacity:.8}}
#helperDlg .voice-set summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
#helperDlg .voice-grid{display:grid;gap:8px;padding:6px 0}
#helperDlg .voice-grid select,#helperDlg .voice-grid input[type=range]{width:100%;min-height:44px}
.ear-dot{position:fixed;z-index:2147460001;top:calc(10px + env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid #fff;background:#b3121b;color:#fff;font:800 14px/1 "Atkinson Hyperlegible",system-ui,sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ear-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;animation:ppPulse 1s ease-in-out infinite}
.ear-dot[hidden]{display:none}
@keyframes ppPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){#helperDlg .listen-pill::before,.ear-dot::before{animation:none}}

/* ===== Layout and text pass (owner, 2026-10-28 t3052u, t3054u, t3055u) ===== */
/* Anchors and focused fields land below the sticky tab bar, never under it. */
html{scroll-padding-top:calc(84px + env(safe-area-inset-top));scroll-padding-bottom:calc(var(--pp-nav-lift,0px) + 72px)}
[id]{scroll-margin-top:calc(84px + env(safe-area-inset-top))}

/* Account button (audit A1, owner iPhone Nov 1 2026): ALWAYS labeled "Account", phones included. The old rule here
   clipped the word off under 560px, so the owner saw only an icon and took the dark-mode button for the only control.
   It is a compact pill (44px tall) at the top right, above the open-access banner and the bug notice. */
@media (max-width:560px){
  .acct-menu .acct-menu-btn{width:auto!important;height:auto!important;min-height:44px!important;padding:4px 12px 4px 4px!important;gap:6px!important;justify-content:flex-start}
  .acct-menu .acct-menu-btn .acct-label{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:nowrap;display:inline!important}
}
html:has(#acctMenuBtn) .home-tabs{padding-right:134px}
html:has(#acctMenuBtn) .open-access{padding-right:136px!important}
@media (max-width:380px){ .home-tabs button{font-size:14px;letter-spacing:-.01em;padding:0 2px} }
/* Back and Forward: a solid strip above the bottom bar. The page gets matching bottom padding so nothing is hidden under it. */
.pp-nav{left:0!important;right:0;bottom:calc(var(--pp-nav-lift,0px) + env(safe-area-inset-bottom))!important;padding:6px max(8px,env(safe-area-inset-left));background:#ffffff;border-top:2px solid #0b1320;box-shadow:0 -6px 14px rgba(0,0,0,.18)}
html[data-theme="dark"] .pp-nav{background:#0b1320;border-top-color:#f4f7fb}
.pp-nav button{box-shadow:none!important}
.pp-nav button:disabled{opacity:1!important;background:#dfe4ec!important;color:#3a4454!important;border-color:#3a4454!important;border-style:dashed!important}
html[data-theme="dark"] .pp-nav button:disabled{background:#1f2a38!important;color:#c3ccd8!important;border-color:#c3ccd8!important}
html.pp-has-nav body{padding-bottom:calc(var(--pp-nav-lift,0px) + 72px + env(safe-area-inset-bottom))!important}
/* At the table it stays a small pill so the felt keeps the room. */

/* Text balance: headings and short lines balance, paragraphs avoid orphans. balance.js covers browsers without text-wrap. */
h1,h2,h3,h4,legend,summary,label,.hint,.hero-line,.hero-kicker,.lead,.btn,button{text-wrap:balance}
p,li,dd,blockquote{text-wrap:pretty}
.hero-copy,.hero-copy h1,.hero-copy p,.hero-me,.card > h2,.card > h3,.card-head,.card > .hint:first-of-type,.page-hero,.page-hero h1,.page-hero p{text-align:center}
.hero-copy .hero-logo{display:flex;justify-content:center}
.card-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.card-head h2{margin:0}
/* Hero buttons: equal size, one line, no underline. */
html .hero-actions{justify-content:center}
html .hero-actions .btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;text-decoration:none!important;white-space:nowrap;line-height:1.1}
html.signed-in .hero-main{grid-auto-rows:1fr}
html.signed-in .hero-main .btn{font-size:clamp(14px,4vw,17px);padding:0 6px}
html .hero-start .btn{flex:1 1 0;min-width:0}
/* The helper button shows the helper's own art when it has one. */
.own-bot.own-bot-art img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* Seat code steps. */
dialog.seat-steps ol{text-align:left;margin:0 0 12px;padding-left:1.4em;color:#1a1e24}
dialog.seat-steps li{margin:0 0 10px;font-size:17px;line-height:1.45;color:#1a1e24!important}
dialog.info-panel{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
/* Host form: option groups span the whole form instead of squeezing into half a column. */
#hostForm > fieldset,#hostForm > .psum,#hostForm > label.chk{grid-column:1/-1;min-width:0}
/* Lists inside an open section scroll inside it, so their numbers need room inside the box. */
details[open]>ol,details[open]>ul{padding-left:2.6em}
/* At the table: two small round arrows just above the action bar, at the felt's lower-left corner. */
/* The table has its own menu; the account button stays off the table bar. */
html:has(#table.screen:not([hidden])) .acct-menu{display:none!important}
/* The free-access note scrolls away with the page instead of sitting over the content. */
.open-access{position:relative!important;top:auto!important}
/* Table bar: the notice wraps instead of being cut off, and Sit out stays dark on the light bar in both themes. */
#actionBar #barNotice{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;text-wrap:balance}
#actionBar .acts2 .chk,#actionBar .preacts .chk{background:#f4f7fb!important;border:2px solid #0b1320!important;border-radius:12px}
#actionBar .acts2 .chk,#actionBar .acts2 .chk *,#actionBar .preacts .chk,#actionBar .preacts .chk *{color:#0b1320!important}
/* Helper setup: name ideas and body styles are clear, solid pills in both themes. */
#botIdeas{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
#botIdeas .tool,.bot-styles .bot-style,#meetStyles .bot-style{min-height:40px;padding:0 14px;border-radius:999px;border:2px solid #0b1320;background:#ffffff;color:#0b1320!important;font:700 16px/1 "Atkinson Hyperlegible",system-ui,sans-serif;cursor:pointer}
.bot-style[aria-pressed="true"]{background:#0b5c2c!important;color:#ffffff!important;border-color:#0b5c2c!important}
html[data-theme="dark"] #botIdeas .tool,html[data-theme="dark"] .bot-style{background:#0e1622;color:#f4f7fb!important;border-color:#f4f7fb}
html[data-theme="dark"] .bot-style[aria-pressed="true"]{background:#2fae5a!important;color:#06140b!important;border-color:#2fae5a!important}
/* Selected chip: the id/class rule above forced dark text onto the green fill. Chrome-green with lemon text (light), lemon with deep green text (dark). */
.bot-styles .bot-style[aria-pressed="true"],#meetStyles .bot-style[aria-pressed="true"]{background:linear-gradient(180deg,#0d6a32,#0a4f26)!important;color:#fff7a8!important;border-color:#c9d3dc!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 2px #0a4f26}
html[data-theme="dark"] .bot-styles .bot-style[aria-pressed="true"],html[data-theme="dark"] #meetStyles .bot-style[aria-pressed="true"]{background:linear-gradient(180deg,#fff27a,#f0dc3a)!important;color:#06240f!important;border-color:#ffffff!important;box-shadow:0 0 0 2px #2fae5a}
#meetH{font-size:19px!important;line-height:1.35!important;font-weight:800}
#meetStyles{display:flex!important;flex-wrap:wrap;gap:8px;overflow:visible!important;padding:4px}
#meetStyles .bot-style,#botIdeas .tool{display:inline-flex;align-items:center;justify-content:center}
/* Settings: a big, clear Log out at the top, readable in light and dark. */
#prefsDlg .prefs-logout{display:block;width:100%;background-image:none!important;box-shadow:none;min-height:52px;margin:4px 0 6px;border:2px solid #7a0a10;border-radius:14px;background:#c8102e;color:#ffffff!important;font:800 18px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif;cursor:pointer}
#prefsDlg .prefs-logout:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
#prefsDlg .prefs-logout[hidden]{display:none}
html[data-theme="dark"] #prefsDlg .prefs-logout{background:#c8102e!important;background-image:none!important;border-color:#ffffff;color:#ffffff!important}
#prefsDlg .prefs-logout-hint{margin:0 0 12px;text-align:center}
#gateIdle{scroll-margin-top:16px;font-weight:700}
/* t3066u: two small standalone chrome arrows at the bottom corners. No strip, no words. Hidden at the table. */
.pp-nav{position:fixed!important;z-index:2147460000;left:0!important;right:0!important;bottom:calc(var(--pp-nav-lift,0px) + 10px + env(safe-area-inset-bottom))!important;height:0;padding:0!important;margin:0;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;display:block!important}
.pp-nav button{position:absolute!important;bottom:0;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;display:flex;align-items:center;justify-content:center;border-radius:12px!important;pointer-events:auto;cursor:pointer;-webkit-appearance:none;appearance:none;
  color:#0b1320!important;border:1.5px solid #3a4a5c!important;background:linear-gradient(180deg,#ffffff 0%,#eef2f7 55%,#c9d3de 100%)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(20,32,48,.18),0 2px 0 #7c8a9a,0 4px 10px rgba(0,0,0,.28)!important}
.pp-nav #ppBack{left:max(8px,env(safe-area-inset-left))}
.pp-nav #ppFwd{right:max(8px,env(safe-area-inset-right))}
.pp-nav button svg{width:22px;height:22px}
.pp-nav button span{display:none!important}
.pp-nav button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 0 0 #7c8a9a,0 1px 4px rgba(0,0,0,.25)!important}
.pp-nav button:disabled{opacity:.45!important;cursor:default;border-style:solid!important;box-shadow:none!important;background:linear-gradient(180deg,#ffffff,#e3e8ef)!important;color:#0b1320!important;border-color:#3a4a5c!important}
html[data-theme="dark"] .pp-nav button{color:#f4f7fb!important;border-color:#c3ccd8!important;background:linear-gradient(180deg,#3d4d60 0%,#25313f 55%,#141c26 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.4),0 2px 0 #05080c,0 4px 10px rgba(0,0,0,.5)!important}
html[data-theme="dark"] .pp-nav button:disabled{background:linear-gradient(180deg,#2c3846,#1b242f)!important;color:#f4f7fb!important;border-color:#c3ccd8!important;box-shadow:none!important}
html.pp-has-nav body{padding-bottom:calc(var(--pp-nav-lift,0px) + 60px + env(safe-area-inset-bottom))!important}
/* t3068u (E9): least intrusive, always there. A 28px brand-green button with a white chevron inside a 40px
   invisible hit area (the transparent 6px border is part of the button, so it is tappable, but the paint stops at
   the padding box). In the honor dock's row when it shows; top corners of the turn dock at the table. */
.pp-nav button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border:6px solid transparent!important;border-radius:50%!important;
  background:var(--go,#1d7a42) padding-box!important;color:#fff!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18)!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.pp-nav button svg{width:18px;height:18px;fill:currentColor}
.pp-nav #ppBack{left:var(--pp-nav-l,max(4px,env(safe-area-inset-left)))!important}
.pp-nav #ppFwd{right:var(--pp-nav-r,max(4px,env(safe-area-inset-right)))!important}
.pp-nav button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)!important}
.pp-nav button:disabled{opacity:.55!important;background:var(--go,#1d7a42) padding-box!important;color:#fff!important;border-color:transparent!important;filter:grayscale(.55);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)!important}
html[data-theme="dark"] .pp-nav button,html[data-theme="dark"] .pp-nav button:disabled{background:var(--go,#1d7a42) padding-box!important;color:#fff!important;border-color:transparent!important;
  box-shadow:inset 0 0 0 1.5px #bfe9cc!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
html[data-theme="dark"] .pp-nav button:disabled{filter:grayscale(.55)}
html.pp-nav-indock .pp-nav{bottom:var(--pp-nav-lift,0px)!important}
html.pp-nav-top .pp-nav{top:var(--pp-nav-y,60px)!important;bottom:auto!important}
html.pp-nav-top body{padding-bottom:0!important}
/* the honor dock leaves room for the arrows on both sides, so the two never touch */
html.pp-has-nav .honor-dock{left:48px!important;right:48px!important;border-radius:14px 14px 0 0;border-left:2px solid #c99200!important;border-right:2px solid #c99200!important;
  justify-content:center;gap:6px!important;padding-left:8px!important;padding-right:6px!important}
html.pp-has-nav .honor-dock .mini{display:none!important}
html.pp-has-nav .honor-dock p{text-align:center;font-size:15px!important;line-height:1.2!important;text-wrap:balance}
html.pp-has-nav .honor-dock .honor-learn{padding:8px 10px!important;font-size:15px!important;white-space:nowrap}
@media (max-width:380px){html.pp-has-nav .honor-dock p{font-size:14px!important}html.pp-has-nav .honor-dock .honor-learn{padding:8px 8px!important;font-size:14px!important}}
/* at the table the turn dock pads both sides so the arrows never sit on Your Bot or Focus */
html.pp-has-nav #table .turn-dock{padding-left:48px!important;padding-right:48px!important}
html.pp-nav-top .pp-nav button{top:0!important;bottom:auto!important}
/* Voice emergency 2026-10-28: the mic must take the whole press on iPhone (no text select, no callout, no scroll). */
#helperDlg #helperMic{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#helperDlg #helperMic.live{background:#b3121b;color:#fff;border-color:#b3121b}
#helperDlg .helper-stage{margin:8px 0;padding:8px 12px;border-radius:10px;background:rgba(127,127,127,.16);font-weight:700}
#helperDlg .helper-stage[hidden],#helperDlg #helperReplay[hidden]{display:none}
#helperDlg .helper-stage[data-kind="error"]{background:#fde8e8;color:#8a1016!important}
#helperDlg .helper-stage[data-kind="speaking"]{background:#e6f4ea;color:#0d5a26!important}

/* E11 (owner 12:45): the signed-out notice is in flow above the form and has a tap-to-close button. */
#gate .gate-idle{position:relative;display:flex;align-items:center;gap:8px;padding:10px 6px 10px 14px}
#gate .gate-idle[hidden]{display:none}
#gate .gate-idle-text{flex:1;min-width:0}
#gate .gate-idle-x{flex:none;width:40px;height:40px;margin:-4px 0;border:2px solid #7a5200;border-radius:50%;background:#fffbe6;color:#2a1c00;font:900 22px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0}
#gate .gate-idle-x:focus-visible{outline:3px solid #1f6feb;outline-offset:2px}

/* Home dark-mode toggle (guest or signed in). It sits in the page flow under the open-access banner, never under it,
   and leaves room on the right for the fixed Account button. The welcome gate keeps its own toggle. */
.home-theme-row{display:none}
html.signed-in .home-theme-row,html.guest-play .home-theme-row{display:flex;justify-content:flex-end;margin:0 0 6px}
html:has(#acctMenuBtn) .home-theme-row{padding-right:134px;min-height:52px;align-items:center}
.home-theme-row .home-theme{position:relative;top:auto;right:auto;z-index:1;flex:0 0 auto}
html:has(#table:not([hidden])) .home-theme-row{display:none!important}

/* GOC crest (final main logo). Wide crest at full width on the welcome gate; compact crop of the same crest in small spots. */
#gate .gate-logo.goc-crest,.gate-logo.goc-crest{width:100%;max-width:520px;height:auto;max-height:none;margin:0 auto 4px}
/* Laptop and desktop (audit A6): the 520px crest was about 310px tall and pushed Tommy Bot and Pinky Bot below the fold.
   Same premium crest file (the srcset still picks the 800w/1600w art), shown smaller. */
@media (min-width:900px) and (orientation:landscape){
  #gate .gate-logo.goc-crest,.gate-logo.goc-crest{width:auto;max-width:100%;height:clamp(96px,16vh,140px);max-height:140px;margin:0 auto 2px}
}
.hero-logo img.goc-crest-compact,.hero-mark.goc-crest-compact{width:96px;max-width:96px;height:auto}
.hero-logo:has(.goc-crest-compact){width:96px}
@media (max-width:600px){#gate .gate-logo.goc-crest{margin-top:40px}} /* keep the crest clear of the dark-mode toggle */
/* Welcome headline in crest lettering (owner, Oct 28 2026): chrome silver letters, gold + green trim, navy outline,
   like the 3v8 crest. Solid colors first (fallback), gradient text where background-clip:text works. */
#gate #gateH{color:#e6ebf1;text-shadow:0 0 1px #0f1d3d,0 2px 0 #0f1d3d,0 3px 0 #1b8a3a;letter-spacing:-.01em}
#gate #gateH .yel{color:#f4c430;text-shadow:0 0 1px #0f1d3d,0 2px 0 #0f1d3d,0 3px 0 #1b8a3a}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #gate #gateH{text-shadow:none;
    filter:drop-shadow(1.2px 0 0 #0f1d3d) drop-shadow(-1.2px 0 0 #0f1d3d) drop-shadow(0 1.2px 0 #0f1d3d) drop-shadow(0 -1.2px 0 #0f1d3d)
           drop-shadow(0 2.5px 0 #17803a) drop-shadow(0 5px 6px rgba(10,22,52,.35))}
  #gate #gateH .gate-line{
    background:linear-gradient(180deg,#ffffff 0%,#f3f6fa 22%,#b9c4d1 44%,#5d6b7e 52%,#c9d2dd 60%,#ffffff 78%,#9aa7b7 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    -webkit-text-stroke:.6px #d9a520;padding:0 .04em .06em}
  #gate #gateH .yel{text-shadow:none;
    background:linear-gradient(180deg,#fff7c9 0%,#ffe066 26%,#d9a520 46%,#7a5200 53%,#e8b830 62%,#fff2a8 80%,#b8860b 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    -webkit-text-stroke:.6px #1b8a3a}
}
.ai-tag{display:inline-block;margin:6px 0 0;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;border:1px solid currentColor;opacity:.85}
.ai-tag[hidden]{display:none}

/* Nov 3 2026 (owner pt7063u, LESSON #48): the back/forward arrows are back on EVERY page on a phone. The Oct 29 rule here
   hid them on every phone-width page except the table (display:none), against layout-vault/RULES.md ("every page has ...
   the nav.js back/forward arrows"). Now: on a phone they sit in a solid strip fixed at the bottom (nothing scrolls under
   them, the page gets matching bottom padding), stacked ABOVE any bottom bar, the Quick Seat bar or the words box
   (nav.js lift()). In the lobby they sit inside the lobby's bottom bar (Tables / Chat / Friends / Host), which pads both
   ends for them; at the table they stay in the turn dock. test/e2e-must-exist-ui.mjs blocks a deploy without them. */
@media (max-width:820px){
  html:not(.pp-nav-top) .pp-nav{height:calc(56px + env(safe-area-inset-bottom))!important;bottom:var(--pp-nav-lift,0px)!important;background:#0b1320!important;border-top:2px solid #e8c468!important;pointer-events:auto!important}
  html[data-theme="light"]:not(.pp-nav-top) .pp-nav{background:#f4f7fb!important;border-top-color:#0b1320!important}
  html:not(.pp-nav-top) .pp-nav button{bottom:calc(6px + env(safe-area-inset-bottom))!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  html.pp-has-nav:not(.pp-nav-top) body{padding-bottom:calc(var(--pp-nav-lift,0px) + 72px + env(safe-area-inset-bottom))!important}
}
html.pp-nav-lbdock .lb-dock{padding-left:54px!important;padding-right:54px!important}
html.pp-nav-lbdock .pp-nav{height:0!important;background:none!important;border:0!important}
html.pp-nav-lbdock .lb-dock>button,html.pp-nav-lbdock .lb-dock>a{font-size:12.5px!important;min-width:0}

/* ===== Laptop front page (audit A6, Batch 3, Nov 1 2026) =====
   From 900px wide in landscape the gate is a two-column grid, not a tall phone column. Reading order in index.html is
   unchanged; grid areas only move things on screen. First screen at 1366x768 and 1920x1080: small crest, headline, slogan,
   then Tommy Bot and Pinky Bot on the left with Play as guest and Register beside them. Everything else follows below.
   Phones and portrait tablets keep the single column. Art is untouched (same crest and kitchen-scene images). */
@media (min-width:900px) and (orientation:landscape){
  html body #gate{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);row-gap:0;
    align-items:start;justify-items:center;align-content:start;width:100%;max-width:none;
    padding:10px max(24px,calc((100% - 1320px) / 2)) 0;
    grid-template-areas:"logo logo" "title title" "tag tag" "idle idle" "scene guest" "scene reg" "opener opener" "zero zero" "pills pills" "founder auth" "note note" "foot foot" "talk talk"}
  html body #gate > *{grid-column:1/-1}
  html body #gate > .gate-fx,html body #gate > .gate-theme{grid-column:auto}
  html body #gate > picture{grid-area:logo;display:block;line-height:0}
  html body #gate > #gateH{grid-area:title;font-size:clamp(40px,6.6vh,64px)}
  html body #gate > .gate-tag{grid-area:tag;margin:8px auto 10px}
  html body #gate > #gateIdle{grid-area:idle;margin:0 auto 8px}
  html body #gate > .gate-scene{grid-area:scene;justify-self:end;align-self:center;width:min(100%,680px);max-width:100%;margin:0;box-sizing:border-box}
  html body #gate > #gateGuest{grid-area:guest;justify-self:start;align-self:end;width:min(400px,100%);margin:0 0 8px}
  html body #gate > #gateRegBig{grid-area:reg;justify-self:start;align-self:start;width:min(400px,100%);margin:8px 0 0}
  html body #gate > .goc-opener{grid-area:opener;margin-top:14px}
  html body #gate > #gateZero{grid-area:zero;margin-top:14px}
  html body #gate > .gate-pills{grid-area:pills}
  html body #gate > .founder-wrap{grid-area:founder;justify-self:end;margin-top:12px}
  html body #gate > #gateAuth{grid-area:auth;justify-self:start;margin-top:12px}
  html body #gate > .gate-note{grid-area:note}
  html body #gate > .gate-foot{grid-area:foot}
  html body #gate > .talk-bots{grid-area:talk}
}

/* Pop-ups on a laptop spread wide instead of a narrow phone card (audit A6). Phones keep their sizes. */
@media (min-width:900px) and (orientation:landscape){
  html body dialog.info-panel{width:min(48rem,calc(100% - 48px))}
  html body .goc-bug .goc-bug-card{width:min(760px,100%)}
  html body .goc-trust .goc-trust-card{width:min(940px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:28px;row-gap:8px;align-items:center;justify-items:center;align-content:center;padding:18px 26px 20px}
  html body .goc-trust-card>.goc-trust-logo{grid-column:1;grid-row:1;width:auto;max-width:100%;height:min(18vh,150px)}
  html body .goc-trust-card>.goc-trust-slogan-a{grid-column:1;grid-row:2}
  html body .goc-trust-card>.goc-trust-h{grid-column:1;grid-row:3}
  html body .goc-trust-card>.goc-trust-fair{grid-column:1;grid-row:4/span 4}
  html body .goc-trust-card>.goc-trust-text{grid-column:2;grid-row:1/span 3;max-width:none;align-self:end}
  html body .goc-trust-card>.goc-trust-closer{grid-column:2;grid-row:4;max-width:none;align-self:start}
  html body .goc-trust-card>.goc-trust-age{grid-column:2;grid-row:5}
  html body .goc-trust-card>.goc-trust-btn{grid-column:2;grid-row:6}
  html body .goc-trust-card>.goc-trust-sound{grid-column:2;grid-row:7}
  html body .goc-trust-card>.goc-trust-slogan-c{grid-column:1/-1;grid-row:8}
}
/* Nov 3 2026 (owner pt7063u, must-exist e2e): poker.css sets html,body{height:100%}, so on the content pages
   (home.html, lobby.html, every page without the #app game shell) the body's bottom padding sat at the end of
   the first screen and the last footer links stayed under the Back/Forward strip. Let those bodies grow. */
html.pp-has-nav:not(:has(#app)) body{height:auto;min-height:100%}
/* BUG-20261103-010 (owner 11/03 9:35 PM): MUST-EXIST keeps the back/forward arrows on the gate, so on phones the two gate buttons
   are inset clear of the corner arrows (8-48 px from each edge). A gate button can then never sit under an arrow, at load or after scroll. */
@media (max-width:600px){
  html:not(.signed-in) body #gate > #gateGuest,html:not(.signed-in) body #gate > #gateRegBig{width:min(400px,calc(100% - 88px))!important;margin-left:44px!important;margin-right:44px!important}
}
/* BUG-20261103-010: on the signed-out gate (html.pp-gate-nav, set by nav.js lift()) the bottom strip is not painted: the two
   arrows stay fixed at the bottom corners (44 px, tappable) and the gate buttons above are inset clear of them, so no gate button
   is ever under the arrow bar, at load or with the skit dock open. The page keeps its bottom padding so everything scrolls clear. */
@media (max-width:820px){
  html.pp-gate-nav:not(.pp-nav-top) .pp-nav,html[data-theme="light"].pp-gate-nav:not(.pp-nav-top) .pp-nav{background:none!important;border-top:0!important;box-shadow:none!important;pointer-events:none!important}
  html.pp-gate-nav:not(.pp-nav-top) .pp-nav button{pointer-events:auto!important}
}
/* t8386 F2 (S23): a drag inside a popup or the robot picker never pulls the page into Chrome's pull-to-refresh. */
html:has(dialog[open]),html:has(dialog[open]) body{overscroll-behavior-y:none}
dialog{overscroll-behavior:contain}
/* FX-13: one chat Close (the top ✕ Close); the bottom duplicate stays in the DOM, hidden */
#chatClose[hidden]{display:none!important}
/* tfH5 (TestMu iPhone 15 Safari landscape): the table menu could not reach Last hand / Hand history / Leave.
   Short screens get a compact three-column menu that fits; the list (not the page) scrolls if it ever must,
   and Close stays pinned at the bottom. */
@media (max-height:520px){
  #menuDlg[open]{display:flex!important;flex-direction:column;padding:10px 12px 8px;width:min(780px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;max-width:none!important;
    max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:hidden!important}
  #menuDlg h2{font-size:16px;margin:0 0 6px;flex:0 0 auto}
  #menuDlg .menu-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 6px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  #menuDlg .menu-list>.btn{min-height:40px;padding:6px 8px;font-size:14px;line-height:1.15;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
  #menuDlg .menu-list>[hidden]{display:none!important}
  #menuDlg #leaveBtn{grid-column:1/-1}
  #menuDlg .amState{margin-left:6px}
  #menuDlg>form{flex:0 0 auto;margin:0;display:flex;justify-content:flex-end}
  #menuDlg>form .btn{min-height:40px;padding:6px 18px}
}