/* Readability layer (QA 2026-10-28, Origin 1d2f316 chrome build). Loaded LAST on every page.
   1) Theme tokens so the older dark panels follow light/dark. 2) Every yellow or gold surface has #111 text in both
   themes. 3) Text over chrome gradients gets a solid backing. 4) Balanced headings, no orphan words.
   Checked by .qa/live/contrast-audit.mjs: 4.5:1 body text, 3:1 large text, light and dark, 390px. */

/* ---------- 1. tokens ---------- */
html[data-theme="light"],html:not([data-theme]){--bg:#e6e9ee;--panel:#fbfcfe;--panel2:#eef3f8;--ink:#1a1e24;--mute:#3e4651;--line:#8ea0b4;--accent:#0b5cad}
html[data-theme="dark"]{--bg:#121a28;--panel:#243244;--panel2:#1a2636;--ink:#eef3f8;--mute:#c5d0dc;--line:#6d7e90;--accent:#9fd0ff}

/* ---------- 2. yellow / gold surfaces: black text, light and dark ---------- */
html[data-theme] .open-access,html[data-theme] .open-access *,
html[data-theme] #banner,html[data-theme] #banner *,html[data-theme] #joinToast,html[data-theme] #joinToast *,html[data-theme] .tb-badge,html[data-theme] .tb-badge *,
html[data-theme] .act.raise,html[data-theme] .act.raise *,
html[data-theme] #gate .gate-tag,html[data-theme] #gate .gate-tag *,html[data-theme] #gate .gate-pill.c,
html[data-theme] .honor-dock p{color:#111!important;-webkit-text-fill-color:#111;text-shadow:none!important}
html[data-theme] .open-access a,html[data-theme] #banner a,html[data-theme] #joinToast a,html[data-theme] .honor-dock p a{color:#0b3d1f!important;-webkit-text-fill-color:#0b3d1f;text-decoration:underline!important;text-underline-offset:2px;font-weight:800}
/* the dock strip was a gold chrome bar with dark bands under the words; a flat lemon bar reads cleanly */
.honor-dock{background:linear-gradient(180deg,#fff9d6 0%,#ffe766 55%,#ffd84a 100%)!important;border-top:2px solid #c99200!important}
/* slogan pill: solid lemon behind the words */
#gate .gate-tag{background:linear-gradient(180deg,#fff7c8 0%,#ffe766 60%,#ffd84a 100%) padding-box,linear-gradient(180deg,#fff 0%,#c5d4e4 40%,#3a4a5c 100%) border-box!important}
#gate .gate-pill.c{background:linear-gradient(180deg,#fff7c8 0%,#ffe766 70%,#ffd84a 100%) padding-box,linear-gradient(180deg,#fff,#6b4c00) border-box!important}
.act.raise{background:linear-gradient(180deg,#fff6c2 0%,#ffe14a 80%,#f2c400 100%)!important}

/* ---------- 3. chrome strips and panels ---------- */
#gate .gate-foot{color:#1a1e24!important;background:linear-gradient(180deg,#ffffff,#e9eef4)!important;border:2px solid #8ea0b4;box-shadow:inset 0 1px 0 #fff,0 3px 0 #2a3848!important;text-shadow:none!important}
html[data-theme="dark"] #gate .gate-foot{color:#eef3f8!important;background:linear-gradient(180deg,#2a3a4e,#1a2636)!important;border-color:#6d7e90}
html[data-theme="dark"] #gate .gate-title .yel{color:#ffe14a;text-shadow:0 1px 0 #1a2636}
html[data-theme="dark"] #gate .gate-switch button,html[data-theme="dark"] #gate .gate-forgot,html[data-theme="dark"] #forgotBack{color:#b6f26a}
/* dark mode: every panel family gets a dark surface (some were left light) */
html[data-theme="dark"] .flag,html[data-theme="dark"] .toc,html[data-theme="dark"] .soon,html[data-theme="dark"] .pop,html[data-theme="dark"] .rules-ov{color:#eef3f8;
  background:linear-gradient(180deg,#243244,#1a2636) padding-box,linear-gradient(180deg,#f7fbff 0%,#8ea0b4 40%,#1c2836 100%) border-box!important}
/* chrome buttons and pills stay silver in both themes, so their words stay dark in both */
html[data-theme="dark"] a.btn,html[data-theme="dark"] .btn,html[data-theme="dark"] .lobby-nav a,html[data-theme="dark"] nav[aria-label="GOC Poker Pals"] a{color:#1a1e24!important}
html[data-theme="dark"] .btn.go,html[data-theme="dark"] .btn.primary{color:#07140c!important}

/* ---------- 4. balanced text ---------- */
h1,h2,h3,.card h2,.card h3,.page-hero h1,.hero h1,.gate-title,.gate-lead,.honor-dock p,.open-access,#banner,legend,summary{text-wrap:balance}
p,li,dd,.hint{text-wrap:pretty}
.nb{white-space:nowrap}

/* ---------- 5. Need help? line (footer, Info tab, guide) ---------- */
.help-foot{margin:28px auto 8px;padding:14px 16px;max-width:640px;text-align:center;border-radius:14px;background:#fbfcfe;border:1px solid #8ea0b4}
html[data-theme] .help-line,.help-line{margin:8px 0;font-size:16px;line-height:1.45;color:#1a1e24!important;text-wrap:balance}
.help-line a{color:#0b4f8a!important;text-decoration:underline;font-weight:700;overflow-wrap:anywhere}
.legal-foot .help-line,#infoHelp{text-align:center}
html[data-theme="dark"] .help-foot{background:#1a2636;border-color:#6d7e90}
html[data-theme="dark"] .help-line{color:#eef3f8!important}
html[data-theme="dark"] .help-line a{color:#b6f26a!important}

/* ---------- 6. surfaces that stayed dark in light mode (and the reverse) ---------- */
html:not([data-theme="dark"]) main fieldset,html:not([data-theme="dark"]) main pre,html:not([data-theme="dark"]) main .panel,
html:not([data-theme="dark"]) .stat,html:not([data-theme="dark"]) .guest,html:not([data-theme="dark"]) .draft,
html:not([data-theme="dark"]) #toc,html:not([data-theme="dark"]) .builder-dock,html:not([data-theme="dark"]) .dock{
  background:linear-gradient(180deg,#fbfcfe,#eef3f8)!important;color:#1a1e24!important;border:1px solid #8ea0b4!important;box-shadow:inset 0 1px 0 #fff,0 6px 12px rgba(8,14,24,.12)!important}
html[data-theme="dark"] main fieldset,html[data-theme="dark"] main pre,html[data-theme="dark"] main .panel,
html[data-theme="dark"] .stat,html[data-theme="dark"] .guest,html[data-theme="dark"] .draft,html[data-theme="dark"] #toc,html[data-theme="dark"] .dock{
  background:linear-gradient(180deg,#243244,#1a2636)!important;color:#eef3f8!important;border:1px solid #6d7e90!important}
html .stat b,html .stat span,html .draft strong,html #toc strong{color:inherit!important}
/* the birth-month row is part of the form, not a separate panel */
html #gate .gate-born{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
#gate .gate-born legend{color:#1a1e24}
html[data-theme="dark"] #gate .gate-born legend{color:#eef3f8}
/* links by surface */
#gate .gate-keep a,.toc a,#toc a,footer button.link,.legal-foot button.link,dialog button.link,#infoAutoMuck,#adjustBtn,.foot-links a{color:#0b4f8a!important;text-decoration:underline}
html[data-theme="dark"] #gate .gate-keep a,html[data-theme="dark"] .toc a,html[data-theme="dark"] #toc a,html[data-theme="dark"] footer button.link,html[data-theme="dark"] .legal-foot button.link,
html[data-theme="dark"] dialog button.link,html[data-theme="dark"] #infoAutoMuck,html[data-theme="dark"] #adjustBtn,html[data-theme="dark"] .foot-links a{color:#b6f26a!important}
/* chrome (silver) controls are silver in both themes: dark words in both */
html[data-theme="dark"] a.plan-link,html[data-theme="dark"] a.tool,html[data-theme="dark"] .tool,html[data-theme="dark"] .dock a,html[data-theme="dark"] .dock button,
html[data-theme="dark"] main nav a,html[data-theme="dark"] .avpick span,html[data-theme="dark"] .tabs [role=tab]{color:#1a1e24!important}
.avpick span{background:#fbfcfe;color:#1a1e24!important;border-radius:8px;padding:2px 6px}
html .dock a,html .dock button{color:#1a1e24!important}
.plan-link{background:linear-gradient(180deg,#fff,#dfe6ee)!important;color:#1a1e24!important;border:1px solid #8ea0b4!important}
/* small labels */
.lobby-row .tag{color:#1a1e24!important;background:#e6ecf3!important;border:1px solid #8ea0b4}
html[data-theme="dark"] .lobby-row .tag{color:#eef3f8!important;background:#1a2636!important;border-color:#6d7e90}
html:not([data-theme="dark"]) .hint,html:not([data-theme="dark"]) .seat-note,html:not([data-theme="dark"]) #memberHint{color:#2e3540!important}
html:not([data-theme="dark"]) .step .num{color:#0b5c57!important}
html[data-theme="dark"] .step .num{color:#7fe0d6!important}
html:not([data-theme="dark"]) #deckFit.is-warn{color:#7a4a00!important}
html[data-theme="dark"] .hero-kicker,html[data-theme="dark"] .page-hero .kicker{color:#ffe14a!important}
html[data-theme="dark"] .hero .tag,html[data-theme="dark"] p.tag{color:#c5d0dc!important}
html[data-theme="dark"] .hero-line{color:#b6f26a!important}
/* selected chip options */
html .chipopt input:checked + span{background:#0b4f8a!important;color:#fff!important;border-color:#0b4f8a!important}
html[data-theme="dark"] .chipopt input:checked + span{background:#9fd0ff!important;color:#07140c!important;border-color:#9fd0ff!important}
html .chipopt span{color:inherit}

/* builder member note: light surface in light theme (was dark teal under forced dark text) */
html:not([data-theme="dark"]) .member-note{background:#eef8f6!important;border-color:#0b5c57!important}
html:not([data-theme="dark"]) .member-note,html:not([data-theme="dark"]) .member-note *{color:#1a1e24!important}
html:not([data-theme="dark"]) .member-note a{color:#0b4f8a!important;text-decoration:underline}

/* danger + disabled buttons: readable in both themes (disabled was dark text on greyed dark fill) */
html[data-theme] .btn.danger,html .btn.danger{background:#a3212f!important;background-image:none!important;border-color:#7a1822!important;color:#fff!important}
html[data-theme] .btn:disabled,html .btn:disabled,html[data-theme] .btn[aria-disabled="true"]{opacity:1!important;filter:none!important;background:#dfe3e8!important;background-image:none!important;border-color:#9aa3ae!important;color:#3a414c!important;box-shadow:none!important}

/* honor popup + explain dialog sit on dark green/teal in both themes: keep their text light */
html[data-theme] .honor .honor-card p,html[data-theme] .honor .honor-card li,html .honor .honor-card p{color:#f7fbfc!important}
.honor .honor-explain{pointer-events:auto}
html:not([data-theme="dark"]) .honor .honor-explain a{color:#0b4f8a!important}
html[data-theme="dark"] .honor .honor-explain a{color:#b6f26a!important}

/* 2026-10-28: signed-in hero card (own avatar), collapsible Tables list, richer lobby rows. */
.hero-me{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 12px;border-radius:20px;border:2px solid #8ea0b4;background:rgba(255,255,255,.72)}
html[data-theme="dark"] .hero-me{background:rgba(10,18,28,.72);border-color:#6d7e90}
.me-face{position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#0f1b2a;border:3px solid #7fe0d6;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.me-face canvas{width:100%;height:100%}
.me-face .face-media{width:100%;height:100%;object-fit:cover;display:block}
.you-face{width:96px;height:96px;flex:0 0 96px}
.me-name{margin:2px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.me-name .me-label{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3e4651}
html[data-theme="dark"] .me-name .me-label{color:#c9d4df!important}
.me-name .me-value{font-size:22px;font-weight:800;color:#1a1e24}
html[data-theme="dark"] .me-name .me-value{color:#eef3f8!important}
.hero-me .hint{margin:0}
.hero-me .own-bot-btn{margin-top:4px}
html.signed-in .hero-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html.signed-in .hero-main .btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;min-width:0}
.lobby-head{margin:0}
.lobby-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;font:inherit;font-weight:800;color:inherit}
.lobby-toggle:focus-visible{outline:3px solid #7cc4ff;outline-offset:3px;border-radius:8px}
.lobby-count{min-width:28px;padding:2px 8px;border-radius:999px;font-size:15px;text-align:center;background:#e6ecf3;color:#1a1e24;border:1px solid #8ea0b4}
.lobby-count:empty{display:none}
html[data-theme="dark"] .lobby-count{background:#1a2636;color:#eef3f8;border-color:#6d7e90}
.lobby-caret{margin-left:auto;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.lobby-toggle[aria-expanded="false"] .lobby-caret{transform:rotate(-45deg)}
#lobbyBody{margin-top:8px}
.lobby-row{flex-wrap:nowrap}
.lrow-main{min-width:0;flex:1 1 auto}
.lrow-title{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lrow-title strong{margin-right:2px}
.lobby-row .lrow-title .tag{margin-left:0}
.lobby-row .tag.lock{display:inline-flex;align-items:center;gap:4px}
.lrow-meta{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px}
.lrow-seats{font-weight:800}
.lrow-line{margin:2px 0 0}
.lobby-row .btn{flex:0 0 auto;white-space:nowrap}
.join-view{margin:8px 0;display:flex;flex-direction:column;gap:4px}
.join-view .who{display:flex;justify-content:space-between;gap:8px;margin:0}
@media (max-width:420px){
  .lobby-row{flex-wrap:wrap}
  .lobby-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.lobby-caret{transition:none}}

/* Business inquiries footer line + small TEXT-only Tommy/Pinky exchange above it (owner, Oct 30, 2026; Legal log b81265e3). No audio. */
.biz-banter{margin:10px auto 4px;max-width:420px;font-size:14px;line-height:1.4;text-align:left;color:#1a1e24}
.biz-banter p{margin:3px 0}.biz-banter .ai-tag{margin:0 4px 0 2px;font-size:11px;padding:0 6px;vertical-align:1px}
.biz-banter a{color:#0b4f8a;text-decoration:underline;font-weight:700;overflow-wrap:anywhere}
html[data-theme="dark"] .biz-banter{color:#eef3f8}html[data-theme="dark"] .biz-banter a{color:#b6f26a}
.help-line.biz-line{font-size:15px}