/* account area: the account, get-started and sign-in pages. Loaded on every page, so every rule is scoped by
   .area-account. Tokens come from style.css :root. (The header, bell included, lives in style.css.) */


/* ---- the account area ------------------------------------------------------------------------------------ */
.area-account { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --d1: 0.15s; --d2: 0.25s; --d3: 0.4s; }
.area-account .js-only { display: none; }
.area-account.js .js-only { display: revert; }
.area-account .mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.area-account .ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.area-account .tab-count { display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.25rem; text-align: center; color: var(--on-action); background: var(--teal); border-radius: 0.6rem; }
.area-account a:focus-visible, .area-account button:focus-visible, .area-account summary:focus-visible, .area-account input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.area-account button, .area-account .btn { transition: background var(--d1), border-color var(--d1), transform var(--d2) var(--spring); }
.area-account button:active, .area-account .btn:active { transform: scale(0.97); }
.area-account h2 { font-family: var(--font-head); }
.area-account .panel { margin: 0 0 1rem; padding: 1rem 1.25rem; animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-account .panel > h2:first-child, .area-account .card-head h2 { font-size: 1.125rem; }
.area-account .card-head { align-items: center; margin-bottom: 0.5rem; }
.area-account .card-head .sub { margin: 0.1rem 0 0; font-size: 0.875rem; }
@keyframes acct-in { from { opacity: 0; transform: translateY(8px); } }

.area-account .glyph { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--teal); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.area-account .glyph.big { width: 3.25rem; height: 3.25rem; border-radius: 10px; }
.area-account .glyph.big .ic { width: 26px; height: 26px; }

/* ---- the page: title, then sub-nav beside the main column ------------------------------------------------------- */
.area-account .acct-top { margin: 2rem 0 1.25rem; }
.area-account .acct-top h1 { margin: 0; font-size: 1.75rem; }
.area-account .acct-top .account-who { margin: 0.25rem 0 0; font-size: 0.875rem; }
.area-account .acct-shell { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.area-account .acct-main { min-width: 0; }
.area-account .acct-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); }
.area-account .acct-nav a { display: flex; align-items: center; gap: 0.65rem; min-height: 2.5rem; padding: 0 0.7rem; color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-control); transition: color var(--d1), background var(--d1), border-color var(--d1); }
.area-account .acct-nav a:hover { color: var(--ink); background: var(--hover); }
.area-account .acct-nav a.on { color: var(--ink); background: var(--hover); border-color: var(--rule-strong); }
.area-account .acct-nav a.on .ic { color: var(--teal); }
@media (max-width: 860px) {
  .area-account .acct-shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .area-account .acct-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 4px; gap: 2px; }
  .area-account .acct-nav::-webkit-scrollbar { display: none; }
  .area-account .acct-nav a { flex: none; white-space: nowrap; padding: 0 0.8rem; min-height: 44px; }
  .area-account .acct-top { margin-top: 1.25rem; }
}

/* ---- overview: the status bar, one bordered panel with dividers --------------------------------------------------- */
.area-account .acct-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); overflow: hidden; }
.area-account .acct-status .tile { border: 0; border-radius: 0; background: transparent; padding: 0.9rem 1.15rem; gap: 0.25rem; }
.area-account .acct-status .tile + .tile { border-left: 1px solid var(--rule); }
.area-account .tile-label { font-size: 0.8125rem; font-weight: 600; }
.area-account .tile-value { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
.area-account .tile-value .of { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; margin-left: 0.2rem; }
.area-account .tile-note { font-size: 0.8125rem; line-height: 1.4; }
.area-account .acct-status form.claim, .area-account .acct-status .claim-done { margin: 0.15rem 0 0; }
.area-account .claim-done { font-size: 0.8125rem; }
.area-account .acct-status form.claim button { min-height: 2rem; padding: 0.3rem 0.7rem; font-size: 0.875rem; }
@media (max-width: 760px) {
  .area-account .acct-status { grid-template-columns: 1fr; }
  .area-account .acct-status .tile + .tile { border-left: 0; border-top: 1px solid var(--rule); }
}

/* the setup checklist: a row per step with a check circle, the title, what finishes it, and its state */
.area-account progress.progress { height: 6px; border-radius: 3px; margin: 0.5rem 0 0.9rem; background: var(--rule); color: var(--teal); }
.area-account progress.progress::-webkit-progress-bar { background: var(--rule); }
.area-account progress.progress::-webkit-progress-value { background: var(--teal); border-radius: 3px; transition: width var(--d3) var(--ease-out); }
.area-account progress.progress::-moz-progress-bar { background: var(--teal); border-radius: 3px; }
.area-account .acct-checklist h2 .muted { font-size: 0.8125rem; font-weight: 600; margin-left: 0.4rem; font-family: var(--font-mono); }
.area-account .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.area-account .check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; background: var(--field); border: 1px solid var(--rule); border-radius: var(--r-control); font-size: 0.9375rem; transition: border-color var(--d1), background var(--d1); }
.area-account .check-list li.todo:hover { border-color: var(--rule-strong); background: var(--hover); }
.area-account .check-list .mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; box-sizing: border-box; border: 1.5px solid var(--rule-strong); border-radius: 50%; color: var(--on-action); }
.area-account .check-list li.done .mark { background: var(--teal); border-color: var(--teal); }
.area-account .check-list .mark .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.area-account .check-list li.done .mark .ic { animation: acct-pop var(--d3) var(--spring) backwards; }
@keyframes acct-pop { from { transform: scale(0.3); } }
.area-account .check-list .what { display: grid; min-width: 0; }
.area-account .check-list .what a { color: var(--ink); text-decoration: none; }
.area-account .check-list .what a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.area-account .check-list .when-line { font-size: 0.8125rem; }
.area-account .check-list .state { font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; }
.area-account .check-list li.done .state { color: var(--ink-2); }

.area-account .row-form { display: grid; gap: 0.4rem; }
.area-account .row-form label { font-weight: 600; font-size: 0.875rem; }
.area-account .inrow { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.area-account .inrow input { flex: 1 1 12rem; }
.area-account .hint { font-size: 0.8125rem; color: var(--ink-2); }
.area-account .welcome { margin-top: 0; }
.area-account .welcome h2 { font-size: 1.375rem; margin: 0 0 0.4rem; }
.area-account .welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.area-account .welcome-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.area-account .welcome-grid > *, .area-account .activity-row > * { min-width: 0; }
.area-account .connect-ai pre { overflow-x: auto; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.area-account .wallet-empty { margin: 0.5rem 0; }
.area-account .wallet-empty p { margin: 0 0 0.5rem; }
.area-account .welcome-side > * { margin: 0; }

/* bot cards */
.area-account .section-head { margin: 1.5rem 0 0.75rem; align-items: center; }
.area-account .section-head h2 { font-size: 1.125rem; }
.area-account .bot-cards { grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.area-account .bot-card { gap: 0.65rem; padding: 0.9rem 1rem; transition: border-color var(--d2), background var(--d2), transform var(--d2) var(--ease-out); animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-account .bot-card:not(.new-bot):hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.area-account .bot-card header { align-items: center; flex-wrap: nowrap; gap: 0.6rem; }
.area-account .bot-card header h3 { flex: 1 1 auto; font-size: 1.0625rem; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; }
.area-account .bot-card .bot-conn { margin: 0; }
.area-account .bot-figures dd { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; }
.area-account .bot-card .actions { display: flex; align-items: center; gap: 0.75rem; }
.area-account .bot-card .actions a:not(.btn) { font-size: 0.875rem; }
.area-account .bot-card.new-bot { background: transparent; border-style: dashed; border-color: var(--rule-strong); justify-content: center; }
.area-account .bot-card.new-bot > summary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 5rem; cursor: pointer; list-style: none; font-weight: 650; }
.area-account .bot-card.new-bot > summary::-webkit-details-marker { display: none; }
.area-account .bot-card.new-bot[open] > summary { min-height: 0; justify-content: flex-start; margin-bottom: 0.75rem; }
.area-account .bot-card.new-bot .plus { font-size: 1.25rem; color: var(--teal); }
.area-account .bot-card.new-bot:hover { background: var(--hover); }
.area-account .bot-card.new-bot input { width: 100%; box-sizing: border-box; }


/* recent activity (compact) and "Connect your AI" */
.area-account .activity-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.area-account .activity-row > .activity, .area-account .activity-row > .connect-ai { margin: 0; flex: none; }
.area-account .activity-list { margin: 0; }
.area-account .activity-line { padding: 0.45rem 0; font-size: 0.875rem; align-items: center; flex-wrap: nowrap; }
.area-account .activity-line .what { min-width: 0; overflow-wrap: anywhere; }
.area-account .activity-line .how { flex: none; font-family: var(--font-mono); font-size: 0.8125rem; }
.area-account .activity-line .when { font-family: var(--font); font-size: 0.8125rem; }
.area-account .pos { color: var(--check); }
.area-account .neg { color: var(--err); }
.area-account .connect-ai h2 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.area-account .connect-ai > p { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.5; }
.area-account .connect-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.area-account .connect-list .btn, .area-account .connect-list button { width: 100%; box-sizing: border-box; min-height: 2.25rem; font-size: 0.875rem; padding: 0.3rem 0.6rem; }
.area-account .ai-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem 1.25rem; margin: 0 0 0.5rem; }
.area-account .ai-group h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin: 0 0 0.5rem; font-size: 0.9375rem; }
.area-account .ai-group h3 svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.area-account .ai-group h3 span { font-size: 0.75rem; font-weight: 400; }
.area-account .ai-group .connect-list { margin: 0 0 0.5rem; }
.area-account .ai-group .connect-list { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.area-account .ai-group .connect-list .btn, .area-account .ai-group .connect-list button { height: auto; white-space: normal; line-height: 1.25; text-align: center; }
.area-account .ai-hint, .area-account .ai-app-note { margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.45; }
.area-account .ai-hint code { overflow-wrap: anywhere; }
.area-account .ai-copy-row { margin: 0 0 0.5rem; }
.area-account .ai-prompt pre { margin: 0.5rem 0 0; }
.area-account .ai-prompt summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.area-account .welcome-side .connect-ai { margin: 0; }
.area-account .connect-ai .ai-more { margin: 0.6rem 0 0; font-size: 0.8125rem; }
@media (max-width: 960px) { .area-account .activity-row { grid-template-columns: minmax(0, 1fr); } }

/* count-up figures need no layout shift */
.area-account [data-count] { font-variant-numeric: tabular-nums; }

/* ---- points ---------------------------------------------------------------------------------------------------- */
.area-account .points-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.area-account .points-top .tile { padding: 1rem 1.15rem; }
.area-account .points-top .explain h2 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.area-account .points-top .explain ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; display: grid; gap: 0.35rem; }
.area-account .points-top .explain { display: block; }
.area-account .points-top .explain > summary { cursor: pointer; }
.area-account .points-top .explain > summary h2 { display: inline; margin: 0; }
.area-account .points-top .explain[open] > summary { margin-bottom: 0.5rem; }
.area-account .history-section h2 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.area-account .history-section > p { font-size: 0.875rem; margin: 0 0 0.5rem; }
.area-account table.history td, .area-account table.history th { padding: 0.5rem 0.8rem; }
.area-account table.history tbody tr { transition: background var(--d1); }
.area-account table.history tbody tr:hover { background: var(--hover); }
@media (max-width: 760px) { .area-account .points-top { grid-template-columns: minmax(0, 1fr); } }

/* ---- notifications: a row per message, icon by kind, an unread dot ------------------------------------------------- */
.area-account .notif-list { list-style: none; margin: 0; padding: 0; }
.area-account .notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.area-account .notif .kind { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--ink-2); background: var(--field); border: 1px solid var(--rule); border-radius: 8px; }
.area-account .notif.unread .kind { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, var(--rule)); }
.area-account .notif.k-set_lost .kind, .area-account .notif.k-set_aborted .kind { color: var(--err); }
.area-account .notif.k-set_won .kind { color: var(--check); }
.area-account .notif .what { min-width: 0; overflow-wrap: anywhere; }
.area-account .notif .body { font-size: 0.875rem; }
.area-account .notif .how { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.area-account .notif .when { font-size: 0.8125rem; }
.area-account .notif .notif-links { display: inline-flex; gap: 0.9rem; margin-left: 0.4rem; font-weight: 650; }
.area-account .notif .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--teal); }
.area-account .notif form { margin: 0; }
.area-account .empty-state { display: grid; justify-items: center; gap: 0.6rem; text-align: center; padding: 2rem 1rem; }
.area-account .empty-state .big { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--teal); background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.area-account .empty-state .big .ic { width: 26px; height: 26px; }
.area-account .empty-state p { margin: 0; max-width: 40ch; }
@media (max-width: 560px) { .area-account .notif { grid-template-columns: auto minmax(0, 1fr); } .area-account .notif .how { grid-column: 2; } }

/* ---- settings: accordions ------------------------------------------------------------------------------------------ */
.area-account .acc-list { max-width: none; display: grid; gap: 0.6rem; }
.area-account details.acc { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); overflow: hidden; transition: border-color var(--d2); }
.area-account details.acc[open] { border-color: var(--rule-strong); }
.area-account details.acc > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; cursor: pointer; list-style: none; font-weight: 650; transition: background var(--d1); }
.area-account details.acc > summary::-webkit-details-marker { display: none; }
.area-account details.acc > summary:hover { background: var(--hover); }
.area-account details.acc > summary .t { font-family: var(--font-head); font-size: 1rem; }
.area-account details.acc > summary .cur { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; }
.area-account details.acc > summary .cur .small-note { font-family: var(--font); }
.area-account details.acc > summary .chev { flex: none; display: grid; transition: transform var(--d3) var(--spring); color: var(--ink-2); }
.area-account details.acc[open] > summary .chev { transform: rotate(180deg); }
.area-account details.acc .acc-body { padding: 0.25rem 1.1rem 1.1rem; display: grid; gap: 0.75rem; }
.area-account details.acc .acc-body > form { margin: 0; }
.area-account details.acc::details-content { block-size: 0; overflow: hidden; transition: block-size var(--d3) var(--ease-out), content-visibility var(--d3) allow-discrete; }
.area-account details.acc[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .area-account { interpolate-size: allow-keywords; } }
.area-account .setting-row { margin: 0; padding: 0.65rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--field); }
.area-account .session-row.current { border-left: 3px solid var(--teal); }
.area-account .acc-body dl.facts { margin: 0; }

/* "Check my bot": one row per check with an icon and the fix sentence */
.area-account .check-result { margin: 0.5rem 0 0; }
.area-account .check-result:empty { display: none; }
.area-account .console-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.area-account .console-check { display: grid; grid-template-columns: auto minmax(8rem, 12rem) minmax(0, 1fr); align-items: center; gap: 0.1rem 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--field); animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-account .console-check .ic { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; padding: 4px; box-sizing: border-box; border-radius: 50%; stroke-width: 2.6; color: var(--ink-2); border: 1.5px solid var(--rule-strong); align-self: start; }
.area-account .console-check.ok .ic { color: var(--on-action); background: var(--check); border-color: var(--check); }
.area-account .console-check.fail { border-color: var(--err-line); background: var(--err-wash); }
.area-account .console-check.fail .ic { color: var(--on-action); background: var(--err); border-color: var(--err); }
.area-account .console-check span { font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); justify-self: start; }
.area-account .console-check.ok span { color: var(--check); }
.area-account .console-check.fail span { color: var(--err); }
.area-account .console-check p { grid-column: 2 / -1; margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.area-account .console-check em { color: var(--ink); font-style: normal; font-weight: 600; }
@media (max-width: 560px) { .area-account .console-check { grid-template-columns: auto minmax(0, 1fr); } .area-account .console-check span { grid-column: 2; } }

/* the key shown once (the dialog is built by account.js; this panel is the no-script version) */
.area-account .start-key { border-color: var(--teal); }
dialog.key-dialog .run-hint { margin: 0.5rem 0; word-break: break-all; white-space: pre-wrap; font-size: 0.8125rem; }
dialog.key-dialog .run-hint code { display: inline-block; }
dialog.key-dialog .run-hint .kc { display: inline-block; animation: acct-flip 0.5s var(--flip-ease, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; animation-delay: calc(var(--i) * 12ms); }
@keyframes acct-flip { from { opacity: 0; transform: rotateX(90deg) translateY(-0.4em); } }
dialog.key-dialog .dlg-form > button { margin: 0 0 0.75rem; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
dialog.key-dialog .dlg-form > button.copied { background: var(--teal); border-color: var(--teal); color: var(--on-action); }
dialog.key-dialog .key-gate { margin: 0.25rem 0 0.75rem; }

/* ---- a bot's page: head, tabs, dense panels, console ---------------------------------------------------------------------- */
.area-account .breadcrumb { margin: 1.5rem 0 0.75rem; }
.area-account .bot-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.area-account .bot-head .who { flex: 1 1 12rem; min-width: 0; }
.area-account .bot-head h1 { margin: 0; font-size: 1.75rem; overflow-wrap: anywhere; }
.area-account .bot-head .bot-line { margin: 0.2rem 0 0; }
.area-account .bot-head .actions { margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.area-account .bot-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; margin: 0 0 1rem; position: relative; }
.area-account .bot-tabs a { white-space: nowrap; flex: none; } /* flex: none: the touch rule `main nav a { min-width: 44px }` drops the min-content floor, so tabs would shrink under their labels */
.area-account .bot-tab { margin-bottom: 1.25rem; }
/* a phone: a tab strip that scrolls sideways fades at the end(s) with more tabs past it (account.js sets .scrolls-x, .at-start, .at-end) */
@media (max-width: 640px) {
  .area-account .acct-nav.scrolls-x, .area-account .bot-tabs.scrolls-x { --fade-l: 1.25rem; --fade-r: 1.25rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
  .area-account .scrolls-x.at-start { --fade-l: 0px; }
  .area-account .scrolls-x.at-end { --fade-r: 0px; }
}
.area-account.tabs-on .bot-tab:not(.on), .area-account .tabs-on .bot-tab:not(.on) { display: none; }
.area-account .bot-tab.on { animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-account .bot-tab > .panel:first-child { margin-top: 0; }
.area-account .manage-grid { gap: 0.75rem; }
.area-account .manage-grid .panel, .area-account .bot-tab .panel { padding: 1rem 1.15rem; }
.area-account .manage-grid h2, .area-account .bot-tab h2 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.area-account .bot-figures.big { gap: 0.5rem 1.5rem; }
.area-account .bot-figures.big dd { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; }
.area-account form.add-points { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.area-account form.add-points label { display: grid; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.area-account form.add-points input { width: 7rem; font-family: var(--font-mono); font-size: 0.8125rem; }
@media (hover: none) and (pointer: coarse), (max-width: 640px) { .area-account form.add-points input { font-size: 16px; } }
.area-account .work-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
.area-account details.more-actions summary, .area-account details.advanced summary { cursor: pointer; font-weight: 650; font-size: 0.9375rem; }
.area-account details.advanced { padding: 0.8rem 1.15rem; }
.area-account .rescue { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.area-account .rescue-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 1rem; background: var(--err-wash); border: 1px solid var(--err-line); border-left: 4px solid var(--err); border-radius: var(--r-sheet); }
.area-account .rescue-card p { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }
.area-account .rescue-card form { margin: 0; }
.area-account .console-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
.area-account .console-bar .check { margin: 0; }
.area-account .console-live { font-size: 0.8125rem; font-family: var(--font-mono); }
.area-account .panel .table-wrap { margin: 0.6rem 0 0.5rem; border-radius: var(--r-control); }
.area-account table.console { font-size: 0.8125rem; border-collapse: separate; border-spacing: 0 4px; margin: 0; padding: 0 4px; }
.area-account table.console th { border-bottom: 0; padding: 0.3rem 0.7rem; }
.area-account table.console td { white-space: nowrap; vertical-align: middle; padding: 0.45rem 0.7rem; border-bottom: 0; background: var(--paper); border-block: 1px solid var(--rule); }
.area-account table.console td:first-child { border-left: 1px solid var(--rule); border-radius: 6px 0 0 6px; }
.area-account table.console td:last-child { border-right: 1px solid var(--rule); border-radius: 0 6px 6px 0; }
.area-account table.console tr.console-request:hover td { background: var(--hover); }
.area-account table.console td:nth-child(7) { white-space: normal; min-width: 12rem; }
.area-account tr.console-request.err td { background: var(--err-wash); border-color: var(--err-line); }
.area-account details.problem summary { cursor: pointer; color: var(--ink); }
.area-account details.problem pre { margin: 0.5rem 0 0; max-height: 14rem; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 0.75rem; }
.area-account table.keys td { vertical-align: middle; }
.area-account .tag[data-reason] { margin-left: 0.4rem; }
.area-account .key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.4rem 0; }
.area-account .key-row form { margin: 0; }
.area-account .rating-list li { padding: 0.35rem 0; }

/* ---- get started ------------------------------------------------------------------------------------------------------ */
.area-start .page-head { margin: 2rem 0 1.25rem; }
.area-start .page-head h1 { font-size: 1.75rem; }
.area-start .page-head .lead { font-size: 1rem; max-width: 62ch; margin-top: 0.4rem; }
.area-account .paths { margin: 0.5rem 0 1.25rem; }
.area-account .paths h2 { margin: 0 0 0.75rem; font-size: 1.125rem; }
.area-account .path-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0.75rem; }
.area-account .path-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; height: 100%; box-sizing: border-box; padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); transition: border-color var(--d2), background var(--d2), transform var(--d2) var(--ease-out); }
.area-account .path-card:hover { background: var(--hover); border-color: var(--teal); text-decoration: none; transform: translateY(-2px); }
.area-account .path-card:active { transform: scale(0.98); }
.area-account .path-card .pic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; color: var(--teal); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.area-account .path-card .pic .ic { width: 20px; height: 20px; }
.area-account .path-card strong { font-family: var(--font-head); font-size: 1.0625rem; }
.area-account .path-card strong::after { content: " \2192"; color: var(--teal); }
.area-account .path-card .d { color: var(--ink-2); font-size: 0.875rem; }
.area-account #steps, .area-account #ask { scroll-margin-top: 1rem; }
.area-start .start-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; max-width: 54rem; }
.area-start .start-steps > li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.85rem; padding: 0 0 1.25rem; border: 0; }
.area-start .start-steps > li::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--rule); }
.area-start .start-steps > li:last-child::before { display: none; }
.area-start .start-steps > li.done::before { background: var(--teal); }
.area-start .start-steps .mark { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; box-sizing: border-box; border: 2px solid var(--rule-strong); border-radius: 50%; background: var(--paper); font: 600 0.8125rem var(--font-mono); color: var(--ink-2); }
.area-start .start-steps li.current .mark { border-color: var(--teal); background: var(--paper); color: var(--teal); }
.area-start .start-steps li.done .mark { background: var(--teal); border-color: var(--teal); color: var(--on-action); animation: acct-pop var(--d3) var(--spring) backwards; }
.area-start .start-steps .body { padding: 0.25rem 0 0; min-width: 0; }
.area-start .start-steps .body > h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.area-start .start-steps li.todo h2 { color: var(--ink-2); }
.area-start .start-steps li.current .body { padding: 0.8rem 1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); margin-top: -0.25rem; animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-start .start-steps .body p { font-size: 0.9375rem; margin: 0.35rem 0; }
.area-start .start-where { font-weight: 600; margin: 1rem 0 0; }
.area-start .panel { max-width: 54rem; }
.area-start .ai-box { max-width: 54rem; }

/* ---- sign-in pages: a centred card with the brand mark ------------------------------------------------------------------- */
.area-account.auth { max-width: 26rem; margin: 2.5rem auto 3rem; }
.area-account .auth-head { text-align: center; margin-bottom: 1rem; }
.area-account .auth-head h1 { font-size: 1.625rem; }
.area-account .auth-head .lead { font-size: 0.9375rem; margin-top: 0.4rem; }
.area-account .auth-card { padding: 1.4rem; animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-account .auth-card .field { display: grid; gap: 0.35rem; }
.area-account .auth-card .field > label { font-weight: 600; font-size: 0.875rem; }
.area-account .auth-card .field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.area-account .auth-card .field-row a { font-size: 0.8125rem; }
.area-account .auth-card .hint { font-size: 0.8125rem; }
.area-account .auth-alt a { font-weight: 650; }
.area-account .auth-card .field-row a, .area-account .auth-alt a, .area-account.auth .resend summary { display: inline-flex; align-items: center; min-height: 44px; }
.area-account .auth-card .field-row { align-items: center; }
.area-account .auth-alt { margin-top: 0.5rem; text-align: center; }
.area-account .error-summary { margin: 0 0 1rem; padding: 0.7rem 1rem; background: var(--err-wash); border: 1px solid var(--err-line); border-left: 4px solid var(--err); border-radius: var(--r-control); }
.area-account .error-summary[hidden] { display: none; }
.area-account .error-summary ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.area-account .error-summary a { color: var(--ink); }
.area-account .field-error { font-size: 0.8125rem; font-weight: 600; color: var(--err); }
.area-account .field-error[hidden] { display: none; }
.area-account input[aria-invalid="true"] { border-color: var(--err); }
.area-account.auth .resend { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.area-account.auth .resend summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
  .area-account *, .area-account *::before, .area-account *::after, header.site .bell-pop, header.site .bell, .bot-menu, dialog.key-dialog *, dialog.key-dialog { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .area-account .bot-card:not(.new-bot):hover, .area-account .path-card:hover { transform: none; }
}

/* long ledger refs are cut, not scrolled */
.area-account table.history td:last-child code { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* the ledger on a phone: one card per posting (what and amount, then when and ref) instead of a sideways scroll */
.area-account table.history tbody tr { content-visibility: auto; contain-intrinsic-size: auto 2.6rem; }
@media (max-width: 640px) {
  .area-account table.history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .area-account table.history, .area-account table.history tbody { display: block; }
  .area-account table.history tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--rule); }
  .area-account table.history tbody tr:first-child { border-top: 0; }
  .area-account table.history td { padding: 0; border: 0; }
  .area-account table.history td.mv { grid-column: 1; grid-row: 1; font-weight: 600; }
  .area-account table.history td.num { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .area-account table.history td.acct { grid-column: 1; grid-row: 2; font-size: 0.875rem; }
  .area-account table.history td.ts { grid-column: 1; grid-row: 3; font-size: 0.75rem; }
  .area-account table.history td.ref { display: none; }
  .area-account table.history td.empty { grid-column: 1 / -1; }
}
.area-account .inbox-foot { margin: 0.25rem 0 0; font-size: 0.875rem; }
.area-account .more-sessions > summary { cursor: pointer; padding: 0.4rem 0; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.area-account .more-sessions .setting-row { margin-top: 0.75rem; }
@media (max-width: 640px), (pointer: coarse) {
  .area-account .check-list li.todo { position: relative; }
  .area-account .check-list li.todo .what > a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the step's link */
  .area-account .bot-card header h3 { overflow: visible; overflow-wrap: anywhere; }   /* so the name link's taller hit area is not clipped */
  .area-account .acc-body button.small, .area-account .inbox button.small, .area-account .more-sessions > summary { min-height: 2.75rem; }
  .area-account .points-top .explain > summary { display: flex; align-items: center; min-height: 2.75rem; }
}

/* ---- the first-bot flow: waiting state, check-your-email page, closed AI panel ------------------------------------------- */
.area-account .waiting { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.area-account .waiting .pulse { position: relative; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--teal); }
.area-account .waiting .pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--teal); animation: acct-beat 1.6s ease-out infinite; }
.area-account .sent-steps { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.area-account.auth .waiting { padding: 0.75rem 0.9rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-control); }
.area-account .more { margin: 0 0 0.25rem; }
.area-account .more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.area-account .more[open] > summary { margin-bottom: 0.5rem; }
.area-start .start-ai, .area-start .start-check { max-width: 54rem; margin: 0 0 1rem; }
.area-start .start-ai > summary, .area-start .start-check > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink-2); }
.area-start .start-ai[open] > summary, .area-start .start-check[open] > summary { color: var(--ink); }
.area-start .start-check .check-result { margin-top: 0.5rem; }
.area-start .start-key .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
/* "Play in the browser" (browser_bot.js): a terminal running the bot, its red notice under it, and the set's two boards beside it
   (below on a phone), drawn from the match objects, the bot's discs teal. The terminal is dark in every theme, as terminals are. */
.area-start .browser-play { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.area-start .browser-play .actions { align-items: center; }
.area-account .bp-panel { display: grid; gap: 1rem; margin-top: 0.85rem; grid-template-columns: minmax(0, 1fr); }
.area-account .bp-panel[hidden] { display: none; }
@media (min-width: 52rem) { .area-account .bp-panel:not(.is-live) { grid-template-columns: minmax(0, 1.7fr) minmax(12rem, 1fr); align-items: start; } }
/* The set page's own boards (is-live): the scoreboard and both games across the key box, which takes the page's width as the set
   page does, the terminal under them; the bot's small boards are then not shown. */
.area-start .start-key:has(.bp-panel.is-live:not([hidden])) { max-width: none; }
.area-account .bp-live { grid-column: 1 / -1; }
.area-account .bp-live[hidden], .area-account .bp-panel.is-live .bp-boards { display: none; }
.area-account .bp-live .set-layout { margin-top: 0.75rem; }
.area-account .bp-panel.is-live .bp-log { max-height: 14rem; min-height: 8rem; }
.area-account .bp-term { background: var(--slate); color: var(--slate-ink); border: 1px solid var(--slate-rule); border-radius: 10px; overflow: hidden; }
.area-account .bp-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; background: #141a2a; border-bottom: 1px solid var(--slate-rule); }
.area-account .bp-dots { display: inline-flex; gap: 6px; }
.area-account .bp-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-line); }
.area-account .bp-title { flex: 1; min-width: 0; text-align: center; font-size: 0.75rem; color: #8b98b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-account .bp-ctrlc { font: 600 0.75rem/1 var(--font-mono); color: var(--slate-ink); background: transparent; border: 1px solid var(--slate-line); border-radius: var(--r-control); padding: 0.3rem 0.55rem; min-height: 0; }
.area-account .bp-ctrlc:hover { border-color: var(--coral); color: var(--coral); }
.area-account .bp-ctrlc[hidden] { display: none; }
.area-account .bp-leave button[hidden] { display: none; }
.area-account .bp-leave .bp-leave-nav { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.area-account .bp-log { margin: 0; padding: 0.75rem 0.9rem; min-height: 14rem; max-height: 22rem; overflow-y: auto; background: transparent; border: 0;
  font: 0.75rem/1.65 var(--font-mono); color: var(--slate-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.area-account .bp-log a { color: var(--teal); }
.area-account .bp-p, .area-account .bp-win { color: var(--teal); }
.area-account .bp-dim { color: #8b98b0; }
.area-account .bp-ok { color: var(--check); }
.area-account .bp-err { color: var(--coral); }
.area-account .bp-cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--slate-ink); animation: bp-blink 1s steps(1) infinite; }
@keyframes bp-blink { 50% { opacity: 0; } }
.area-account .bp-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0.9rem; border-top: 1px solid rgba(255, 107, 94, 0.35); background: rgba(255, 107, 94, 0.08); }
.area-account .bp-warn p { flex: 1 1 18rem; margin: 0; color: var(--coral); font-size: 0.8125rem; line-height: 1.5; }
.area-account .bp-warn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area-account .bp-warn .bp-hint { flex-basis: 100%; color: #8b98b0; font-size: 0.75rem; }
.area-account .bp-warn button { color: var(--coral); background: transparent; border: 1px solid var(--coral); }
.area-account .bp-warn button:hover { background: rgba(255, 107, 94, 0.12); }
.area-account .bp-side .bp-meta { margin: 0.5rem 0 0; }
.area-account .bp-boards { display: flex; flex-wrap: wrap; gap: 1rem; }
.area-account .bp-boards:empty { display: none; }
.area-account .bp-game { margin: 0; flex: 1 1 11rem; max-width: 17rem; }
@media (min-width: 52rem) { .area-account .bp-game { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .area-account .bp-cursor { animation: none; } }
.area-account .bp-board { display: grid; gap: 2px; padding: 4px; background: var(--rule-strong); border-radius: var(--r-control); }
.area-account .bp-board span { aspect-ratio: 1; border-radius: 50%; background: var(--paper); }
.area-account .bp-board span.me { background: var(--teal); }
.area-account .bp-board span.them { background: var(--ink-2); }
.area-account .bp-game figcaption { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .area-account .waiting .pulse::after { animation: none; display: none; } }
.area-account .acct-checklist .next-step { margin: 0.75rem 0 0.25rem; }
.area-start .start-win { border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal); animation: acct-in var(--d3) var(--ease-out) backwards; }
.area-start .start-win h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.area-start .start-win .start-result p { margin: 0.3rem 0; }
.area-start .start-recap { max-width: 54rem; margin: 0 0 0.5rem; }
.area-start .start-recap > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 600; }
.area-account .notice[hidden] { display: none; }
.area-account .notice.soft { border-left-color: var(--rule); font-size: 0.9rem; justify-content: space-between; }
@keyframes acct-beat { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* /start: the bot name field takes the row on a phone instead of a 100px box that clips the suggested name */
.area-start form.inline label { flex: 1 1 14rem; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.area-start form.inline label input { flex: 1 1 auto; min-width: 0; width: 100%; }

/* Prizes (USDC, pages_cash.py): a card per prize with its four steps. */
.area-account .prize-card { border-color: color-mix(in srgb, var(--usdc) 45%, var(--rule)); display: grid; gap: 1rem; }
.area-account .prize-card.prize-paid, .area-account .prize-card.prize-expired { border-color: var(--rule); }
.area-account .prize-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1.5rem; }
.area-account .prize-head h2 { margin: 0; font-size: 1.25rem; }
.area-account .prize-head p { margin: 0.2rem 0 0; }
.area-account .prize-amount { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; }
.area-account .prize-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.area-account .prize-steps li { border-top: 4px solid var(--rule); padding-top: 0.4rem; }
.area-account .prize-steps li.done { border-top-color: var(--usdc); color: var(--ink); }
.area-account .prize-claim { border-top: 1px solid var(--rule); padding-top: 1rem; max-width: 40rem; }
.area-account .prize-claim input[type="text"] { font-family: var(--font-mono); }
.area-account .cash-form .explain { background: var(--field); border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: 0.9rem 1rem; }
.area-account .cash-form .explain ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Run in this browser (bot page #run, run_in_browser.js): the game, bot and mode in a row that wraps on a phone, Start, then
   the terminal and the set's boards (the .bp-* rules above, shared with /start), then the same bot on a computer. The
   sandboxed iframe that runs the bot is never seen. */
.area-account .run-browser .run-fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; margin: 0.75rem 0 0.5rem; }
.area-account .run-browser .run-field { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); min-width: 0; flex: 1 1 14rem; }
.area-account .run-browser .run-field select { width: 100%; min-height: 44px; font-weight: 400; }
.area-account .run-browser .run-play-hint { margin: 0 0 0.5rem; font-size: 0.875rem; }
.area-account .run-browser .run-play-hint[hidden] { display: none; }
.area-account .run-browser .run-own { margin: 0.25rem 0 0.5rem; padding: 0.75rem 0.9rem; background: var(--field); border: 1px solid var(--rule); border-radius: var(--r-sheet); }
.area-account .run-browser .run-own[hidden] { display: none; }
.area-account .run-browser .run-own p { margin: 0.35rem 0; }
.area-account .run-browser .run-own .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.area-account .run-browser .run-file { position: relative; overflow: hidden; cursor: pointer; }
.area-account .run-browser .run-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.area-account .run-browser .run-bad { color: var(--coral); }
.area-account .run-browser .run-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0; }
.area-account .run-browser .run-actions button { min-width: 7rem; }
.area-account .run-browser .run-actions button[hidden] { display: none; }
.area-account .run-browser .run-state { flex: 1 1 12rem; }
.area-account .run-browser .bp-panel { margin-top: 1rem; }
.area-account .run-browser .bp-warnline { color: #f5c26b; }
.area-account .run-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.area-account .run-elsewhere .run-steps { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.75rem; }
.area-account .run-elsewhere .run-steps li > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.area-account .run-elsewhere .run-steps [hidden] { display: none; }
/* A link inside a step's sentence stays inline: the 44px tap-target box of standalone links would stretch every line of the step. */
.area-account .run-elsewhere .run-steps li a:not(.btn) { display: inline; min-height: 0; }
.area-account .run-elsewhere .run-hint { margin: 0.5rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.area-account .run-elsewhere .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
.area-account .run-elsewhere .run-files { margin-top: 0.75rem; }
.area-account .run-elsewhere .run-files summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font-weight: 600; }
.area-account .run-elsewhere .run-files ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.875rem; }
.area-account .bot-card .run-link { white-space: nowrap; }
.area-account .run-first { margin-top: 0.5rem; }

/* Running bots (templates/_running_bots.html, run_in_browser.js): a row per bot, its dot, name, status, Start or Stop on one
   line; what it is ready for; a chip per game (ticked: teal); per ticked game its code and Auto-play. Phone first: 44px
   targets, the chips wrap, nothing wider than the screen. */
.area-account .running-bots { scroll-margin-top: 4rem; }
.area-account .running-bots .rb-intro { margin: 0 0 0.75rem; }
.area-account .running-bots .rb-intro a { display: inline; min-height: 0; }
.area-account .running-bots [hidden] { display: none; }
.area-account .rb-global { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.75rem; }
.area-account .rb-global button { min-height: 44px; }
.area-account .rb-summary { flex: 1 1 8rem; font-size: 0.875rem; }
.area-account .rb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.area-account .rb-bot { padding: 0.65rem 0.75rem; background: var(--field); border: 1px solid var(--rule); border-radius: var(--r-sheet); min-width: 0; }
.area-account .rb-bot[data-state="playing"] { border-color: color-mix(in srgb, var(--teal) 55%, var(--rule)); }
.area-account .rb-bot[data-state="error"] { border-color: var(--err-line); }
.area-account .rb-head { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.area-account .rb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); }
.area-account .rb-bot[data-state="ready"] .rb-dot { background: var(--teal); }
.area-account .rb-bot[data-state="playing"] .rb-dot { background: var(--teal); box-shadow: 0 0 0 0 rgb(46 230 197 / 0.6); animation: rb-pulse 2s ease-out infinite; }
.area-account .rb-bot[data-state="connecting"] .rb-dot, .area-account .rb-bot[data-state="stopping"] .rb-dot { background: var(--amber); }
.area-account .rb-bot[data-state="error"] .rb-dot { background: var(--coral); }
@keyframes rb-pulse { 70% { box-shadow: 0 0 0 7px rgb(46 230 197 / 0); } 100% { box-shadow: 0 0 0 0 rgb(46 230 197 / 0); } }
@media (prefers-reduced-motion: reduce) { .area-account .rb-bot[data-state="playing"] .rb-dot { animation: none; } }
.area-account .rb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.area-account .rb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-account .rb-name a { display: inline; min-height: 0; color: var(--ink); }
.area-account .rb-status { font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.area-account .rb-bot[data-state="playing"] .rb-status, .area-account .rb-bot[data-state="ready"] .rb-status { color: var(--teal); }
.area-account .rb-bot[data-state="error"] .rb-status { color: var(--coral); }
.area-account .rb-head button { flex: none; min-height: 44px; min-width: 5.5rem; }
.area-account .rb-ready { margin: 0.2rem 0 0.1rem; font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.area-account .rb-ready.is-note { color: var(--coral); }
.area-account .rb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.area-account .rb-chip { min-height: 44px; padding: 0 0.85rem; border-radius: 999px; font: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--ink-2); background: transparent; border: 1px solid var(--rule-strong); cursor: pointer; }
.area-account .rb-chip[aria-pressed="true"] { color: var(--on-action); background: var(--teal); border-color: var(--teal); }
.area-account .rb-chip[aria-pressed="true"]::before { content: "✓ "; }
.area-account .rb-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.area-account .rb-picked { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.area-account .rb-picked:empty { display: none; }
.area-account .rb-game { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding-top: 0.35rem; border-top: 1px solid var(--rule); }
.area-account .rb-game-name { flex: 1 1 6rem; min-width: 0; font-weight: 600; font-size: 0.875rem; }
.area-account .rb-source { min-height: 44px; flex: none; width: auto; max-width: 100%; }   /* sized to "Ready-made" at the 16px phone font */
.area-account .rb-game .rb-auto { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; min-height: 44px; margin: 0;
  font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.area-account .rb-game .rb-auto span { white-space: nowrap; }
.area-account .rb-game .rb-auto input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--teal); margin: 0; }
.area-account .rb-warnword { color: var(--amber); font-size: 0.75rem; font-weight: 400; white-space: nowrap; }
.area-account .rb-own { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.area-account .rb-own .rb-file { min-height: 44px; }
.area-account .rb-note { margin: 0.75rem 0 0; font-size: 0.8125rem; }
/* My bots (/bots, bots.html): the same panel as the page itself, a plain list: no card around it, a rule between the bots. */
.area-bots .bots-head { margin-bottom: 1rem; }
.area-bots .bots-head .lead a { display: inline; min-height: 0; }
.area-bots .bots-new { min-height: 44px; }
.area-bots .bots-auth { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area-bots .bots-auth .btn { min-height: 44px; }
.area-bots .running-bots.rb-page { margin: 0 0 2rem; }
.area-bots .rb-page .rb-global { padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.area-bots .rb-page .rb-list { gap: 0; }
.area-bots .rb-page .rb-bot { padding: 0.6rem 0 0.85rem; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.area-bots .rb-page .rb-bot[data-state="playing"], .area-bots .rb-page .rb-bot[data-state="error"] { border-color: var(--rule); }
.area-bots .rb-page .rb-bot[data-state="playing"] .rb-dot { background: var(--amber); animation-name: rb-pulse-amber; }
.area-bots .rb-page .rb-bot[data-state="playing"] .rb-status { color: var(--amber); }
.area-bots .rb-page .rb-name { font-size: 1.0625rem; }
.area-bots .rb-page .rb-name a:hover { text-decoration: underline; }
@keyframes rb-pulse-amber { 0% { box-shadow: 0 0 0 0 rgb(242 184 75 / 0.6); } 70% { box-shadow: 0 0 0 7px rgb(242 184 75 / 0); } 100% { box-shadow: 0 0 0 0 rgb(242 184 75 / 0); } }
.area-account .run-log .run-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.area-account .run-log .run-field { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); flex: 1 1 14rem; min-width: 0; }
.area-account .run-log .run-field select { width: 100%; min-height: 44px; font-weight: 400; }
.area-account .run-log .run-play-hint { margin: 0 0 0.5rem; font-size: 0.875rem; }
.area-account .run-log .run-play-hint[hidden] { display: none; }
.area-account .run-log .run-play-hint a { display: inline; min-height: 0; }
.area-account .run-log .bp-warnline { color: #f5c26b; }
.area-account .run-browser { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.area-account .run-browser > * { min-width: 0; }