/* The shared hub's own pages (src/platform/pages.js): sign-in, sign-up, the setup wizard, team, account, /platform.
   On app.css's tokens and components; phone-first, 16px gutters. Stronger Hub's mark is ink, not a gym's colour. */
.pf .brand-mark, .pf-auth .brand-mark { background: var(--ink); color: var(--bg); }
/* Stronger Hub's own primary button is ink; a gym's hub keeps its brand colour. */
.pf .btn-primary, .pf-auth .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pf .btn-primary:hover, .pf-auth .btn-primary:hover { background: var(--ink); border-color: var(--ink); filter: none; opacity: .9; }
.pf-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pf-logo .brand-mark { width: 30px; height: 30px; font-size: 15px; }
.pf-auth .login-card { width: min(420px, 100%); }
.pf-or { border-top: 1px solid var(--line); padding-top: 14px; }
.pf { background: var(--bg); min-height: 100vh; }
.pf-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.pf-top-in { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pf-nav a { white-space: nowrap; }
@media (max-width: 560px) { .pf-top-in { gap: 6px; } .pf-nav { margin: 0 -10px; } .pf-nav a { padding: 6px 8px; } }
.pf-nav a { padding: 6px 10px; border-radius: var(--r-ctl); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.pf-nav a:hover { background: var(--surface-2); }
.pf-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.pf-main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 14px; }
.pf-main.pf-wide { max-width: 980px; }
.pf-main { grid-template-columns: minmax(0, 1fr); }
.pf-main.sk-xwide { max-width: 1280px; }
.pf-main .view-head h1 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; }
.pf-sec { display: grid; gap: 12px; min-width: 0; }
.pf-sec h2 { font-size: var(--fs-h); font-weight: 600; }
.pf-sec h3 { font-size: var(--fs-lg); font-weight: 600; margin-top: 6px; }
.pf-ok { background: var(--good-soft); color: var(--good); border-radius: var(--r-ctl); padding: 10px 12px; font-weight: 500; }
.pf-warn { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-ctl); padding: 10px 12px; font-weight: 500; }
.pf-link { border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 12px; display: grid; gap: 10px; background: var(--surface-2); }
.pf-copy { display: flex; gap: 8px; min-width: 0; margin: 6px 0; }
.pf-copy .inp { flex: 1; min-width: 0; font-family: var(--font-num); font-size: var(--fs-xs); }
.pf-rows, .pf-steps, .pf-check-list { margin: 0; padding: 0; }
.pf-rows { list-style: none; display: grid; gap: 0; }
.pf-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pf-rows > li:first-child { border-top: 0; }
.pf-rows > li > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.pf-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.pf-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-inline .inp { flex: 1 1 180px; min-width: 0; }
.pf-inline-btn { display: inline; }
.inp-sm { min-height: 28px; padding: 0 8px; font-size: var(--fs-xs); width: auto; }
.pf-invite { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .pf-invite, .pf-two { grid-template-columns: 1fr; } }
.pf-list { padding-left: 20px; display: grid; gap: 8px; }
.pf-help { border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; }
.pf-help summary { cursor: pointer; font-weight: 600; }
.pf-help ol { padding-left: 20px; display: grid; gap: 6px; margin-top: 10px; }
.pf-scopes { padding-left: 18px; columns: 2; font-size: var(--fs-xs); }
.pf-scopes code { color: var(--ink-3); }
@media (max-width: 560px) { .pf-scopes { columns: 1; } }
.pf-replace > summary { list-style: none; }
.pf-replace > summary::-webkit-details-marker { display: none; }
.pf-replace[open] { flex-basis: 100%; }
.pf-replace[open] > form { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); }
.pf-choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; cursor: pointer; }
.pf-choice:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.pf-choice span, .pf-check span { display: grid; gap: 2px; }
.pf-choice small { color: var(--ink-3); }
.pf-check { display: flex; gap: 10px; align-items: flex-start; }
.pf-check input, .pf-choice input { margin-top: 3px; }
.pf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-colour { padding: 2px; height: 40px; }
.pf-logo-row { display: flex; gap: 14px; align-items: center; }
.pf-logo-img { width: 56px; height: 56px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; display: grid; place-items: center; }
.pf-site { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pf-steps { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pf-steps a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; color: var(--ink-2); text-decoration: none; font-size: var(--fs-xs); background: var(--surface); }
.pf-steps a i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 11px; font-weight: 600; }
.pf-steps a.done i { background: var(--good-soft); color: var(--good); }
.pf-steps a[aria-current="step"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pf-check-list { list-style: none; display: grid; }
.pf-check-list li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pf-check-list li:first-child { border-top: 0; }
.pf-check-list li > div { flex: 1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pf-check-list i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); flex: none; }
.pf-check-list li.done i { background: var(--good-soft); color: var(--good); }
/* The Ads benchmark (src/platform/bench-pages.js): tiles, two small charts, the gyms table, the leaderboards. */
.bx-crumbs { color: var(--ink-3); }
.bx-crumbs a { color: var(--ink-2); }
.bx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pf-main .view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bx-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; }
.bx-filters .field { display: grid; gap: 4px; flex: 1 1 140px; min-width: 0; }
.bx-filters .field span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.bx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bx-tile { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.bx-tile .tile-value { font-size: 22px; }
.bx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .bx-two { grid-template-columns: 1fr; } }
.bx-chart { margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 6px; min-width: 0; }
.bx-chart figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bx-plot { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.bx-y { position: relative; width: 34px; height: 170px; font: 11px/1 var(--font-num); color: var(--ink-3); }
.bx-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.bx-area { position: relative; height: 170px; min-width: 0; }
.bx-chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.bx-end { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--s1); box-shadow: 0 0 0 2px var(--surface); }
.bx-x { display: flex; justify-content: space-between; margin-left: 42px; font: 11px/1 var(--font-num); color: var(--ink-3); }
.bx-chart .grid-line { stroke: var(--grid, var(--line)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bx-chart .axis-line { stroke: var(--axis, var(--line-2)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bx-chart .tick { fill: var(--ink-3); font: 11px var(--font-num); }
.bx-chart .bar { fill: var(--s1); }
.bx-chart .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bx-chart .dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.bx-chart .hit { fill: transparent; }
.bx-chart g:hover .bar { opacity: .8; }
.bx-table summary, .bx-more > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--ink-3); }
.bx-more > summary { list-style: none; display: inline-flex; margin-top: 4px; color: var(--ink-2); }
.bx-more > summary::-webkit-details-marker { display: none; }
.bx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bx-table table, .bx-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bx-table td, .bx-table th, .bx-tbl td, .bx-tbl th { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.bx-tbl thead th { border-top: 0; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.bx-tbl tbody th { font-weight: 500; min-width: 150px; }
.bx-tbl .r { text-align: right; white-space: nowrap; }
.bx-tbl a { color: var(--ink); }
.block { display: block; }
.bx-board-head { display: grid; gap: 4px; }
.bx-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 400px) { .bx-boards { grid-template-columns: 1fr; } }
.bx-board h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 6px; }
.bx-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.bx-rows > li { display: grid; gap: 4px; padding: 9px 0; border-top: 1px solid var(--line); }
.bx-rows > li:first-child { border-top: 0; }
.bx-row-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bx-row-nums { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.bx-thin { opacity: .62; }
.bx-bar { position: relative; display: block; height: 10px; border-radius: 3px; background: var(--surface-2); }
.bx-bar .bx-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--axis, var(--line-2)); }
.bx-bar .bx-fill { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.bx-bar .bx-fill.good { background: var(--s1); }
.bx-bar .bx-fill.poor { background: var(--s2); }
.bx-bar .bx-ci { position: absolute; top: 4px; height: 2px; background: var(--ink-2); border-radius: 1px; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.bx-recs { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.bx-recs p { margin: 2px 0; }
.bx-ads { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bx-ads > li { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px; }
@media (max-width: 560px) { .bx-ads > li { grid-template-columns: 1fr; } }
.bx-thumb { width: 160px; height: 160px; object-fit: cover; border-radius: var(--r-ctl); background: var(--surface-2); }
.bx-nothumb { display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-xs); }
.bx-ad-body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.bx-copy { white-space: pre-wrap; margin: 0; max-height: 9.5em; overflow: hidden; color: var(--ink-2); overflow-wrap: anywhere; }
.bx-ad-body .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-ad-nums { margin: 0; color: var(--ink-2); }
/* Setup → Your look: the form beside a small email in the gym's brand (pages.js brandPreview; platform.js keeps it
   current). The email stays light in dark mode, as it will in most inboxes. */
.pf-brand { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .pf-brand { grid-template-columns: 1fr; } .pf-mail { order: -1; position: static; } }
.pf-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .pf-three { grid-template-columns: 1fr; } }
.pf-seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-seg legend { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.pf-seg label { display: inline-flex; }
.pf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pf-seg span { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-sm); cursor: pointer; background: var(--surface); }
.pf-seg input:checked + span { border-color: var(--ink); background: var(--surface-2); font-weight: 600; }
.pf-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-mail { position: sticky; top: 16px; display: grid; gap: 6px; min-width: 0; }
.pf-mail-card { background: #ebebe8; border-radius: 10px; padding: 12px; color-scheme: light; }
.pf-mail-card > * { background: #fff; }
.pf-mail-head { background: var(--d); padding: 16px; text-align: center; border-radius: 6px 6px 0 0; }
.pf-mail-head img { max-width: 140px; max-height: 48px; object-fit: contain; display: block; margin: 0 auto; }
.pf-mail-head b { font-family: var(--hf); color: #fff; font-size: 17px; }
.pf-mail-rule { background: var(--b); height: 3px; }
.pf-mail-body { padding: 18px 20px 14px; font-family: var(--bf); color: #34383c; font-size: 13px; line-height: 1.55; }
.pf-mail-body h4 { font-family: var(--hf); color: #16181a; font-size: 18px; line-height: 1.25; margin: 0 0 10px; font-weight: 700; }
.pf-mail-body p { margin: 0 0 10px; }
.pf-mail-btn { display: inline-block; background: var(--b); color: var(--bi); border-radius: var(--r); padding: 9px 16px; font-weight: 700; margin: 4px 0 12px; }
.pf-mail-sign b { color: #16181a; }
.pf-mail-foot { background: var(--d); padding: 14px 16px; text-align: center; font-family: var(--bf); font-size: 10.5px; line-height: 1.5; color: #a9aeb3; border-radius: 0 0 6px 6px; }
.pf-mail-foot p { margin: 0 0 4px; overflow-wrap: anywhere; }
.pf-mail-soc { color: #fff; font-weight: 700; }
.pf-mail-unsub { color: #7b8187; text-decoration: underline; }
.pf-brand .pf-two, .pf-brand .pf-three { align-items: start; }
/* Gym credentials (src/platform/credentials-pages.js): the owner's page from their link, and the console. */
.sk-main { max-width: 680px; }
.sk-kicker { color: var(--ink-3); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 4px; }
.sk-secure { gap: 6px; }
.sk-mono { font-family: var(--font-num); letter-spacing: .02em; }
.sk-form { display: grid; gap: 14px; }
.sk-group-head { display: flex; gap: 12px; align-items: flex-start; }
.sk-group-head p { margin-top: 2px; }
.sk-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 600; font-size: var(--fs-sm); }
.sk-done .sk-num { background: var(--good-soft); color: var(--good); }
.sk-how { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.sk-how li { padding-left: 2px; }
.sk-how code, .sk-group code { font-family: var(--font-num); font-size: .92em; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.sk-how a { color: var(--ink); font-weight: 500; }
.sk-fields { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.sk-drop { position: relative; display: grid; gap: 2px; place-items: center; text-align: center; padding: 18px 12px; border: 1.5px dashed var(--line-2); border-radius: var(--r-card); background: var(--surface-2); cursor: pointer; color: var(--ink-2); }
.sk-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sk-drop:focus-within { outline: 2px solid var(--s1); outline-offset: 1px; }
.sk-drop.sk-over { border-color: var(--ink); background: var(--surface); }
.sk-drop.sk-has { border-style: solid; border-color: var(--good); }
.sk-drop-name { color: var(--good); font-weight: 600; overflow-wrap: anywhere; }
.sk-drop-name:empty { display: none; }
.sk-paste summary { cursor: pointer; color: var(--ink-3); margin-top: 6px; }
.sk-paste textarea { margin-top: 6px; font-size: var(--fs-xs); }
.sk-bad .inp, .sk-bad .sk-drop { border-color: var(--bad); }
.sk-note { color: var(--bad); }
.field .login-err { margin: 0; }
.sk-got { background: var(--good-soft); color: var(--good); border-radius: var(--r-ctl); padding: 8px 10px; }
.sk-got b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.sk-send { display: grid; gap: 10px; position: sticky; bottom: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.sk-left { font-weight: 500; }
.sk-closed h1 { font-size: var(--fs-title); font-weight: 600; }
.sk-new-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.sk-new-text { display: grid; gap: 10px; min-width: 0; }
.sk-new-text textarea { font-size: var(--fs-sm); }
.sk-qr { margin: 0; display: grid; gap: 6px; justify-items: center; }
.sk-qr .qr { display: block; border-radius: 8px; border: 1px solid var(--line); max-width: 100%; height: auto; }
@media (max-width: 640px) { .sk-new-grid { grid-template-columns: 1fr; } }
.sk-links > li { padding: 7px 0; }
/* The console: the matrix, each gym's types. */
.sk-ask-form { display: grid; gap: 12px; }
.sk-pick { flex-basis: 100%; }
.sk-pick summary { cursor: pointer; color: var(--ink-3); }
.sk-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; margin-top: 8px; }
.sk-types small { color: var(--ink-3); font-size: var(--fs-xs); }
.sk-matrix th.sk-c, .sk-matrix td.sk-c { text-align: center; white-space: nowrap; font-size: var(--fs-xs); }
.sk-matrix thead th.sk-c { font-weight: 500; }
.sk-matrix tbody th a { font-weight: 600; }
.sk-cell { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.sk-cell.good { background: var(--good-soft); color: var(--good); }
.sk-cell.warn { background: var(--warn-soft); color: var(--warn); }
.sk-cell.bad { background: var(--bad-soft); color: var(--bad); }
.sk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk-types-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sk-type { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.sk-type:first-child { border-top: 0; }
.sk-type-main { display: grid; gap: 3px; flex: 1 1 300px; min-width: 0; overflow-wrap: anywhere; }
.sk-type-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sk-fieldrows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.sk-fieldrows li { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sm); }
.sk-fieldrows li > span:first-child { min-width: 120px; color: var(--ink-2); }
/* Gyms (src/platform/gyms-pages.js): the list's tabs and matrix, Add gym, a gym's page. */
.pf .block { display: block; }
.sk-tabs .pill { height: 28px; padding: 0 10px; text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
.sk-tabs .pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sk-matrix th[scope="row"] { min-width: 170px; }
.sk-matrix td.small { white-space: nowrap; }
.sk-allin { color: var(--good); font-weight: 500; }
/* Positioned, so the cells' screen-reader text stays inside the scrolling box (else the page scrolls sideways). */
.sk-matrix-wrap, .sk-cell { position: relative; }
.sk-cell.na { background: transparent; color: var(--ink-3); opacity: .6; }
.sk-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sk-add { display: grid; gap: 14px; }
.sk-slug { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sk-slug > .muted { font-size: var(--fs-sm); white-space: nowrap; }
.sk-slug .inp { flex: 1; min-width: 0; }
@media (max-width: 560px) { .sk-slug { flex-direction: column; align-items: stretch; gap: 2px; } .sk-slug .inp { flex: none; } }
.sk-plans { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sk-plans legend { font-weight: 500; margin-bottom: 6px; padding: 0; font-size: var(--fs-sm); }
.sk-plans .pf-choice b { font-weight: 600; }
@media (min-width: 561px) { .sk-person { grid-template-columns: 2fr 1.4fr 1fr; } }
.sk-person .sk-invite-now { grid-column: 1 / -1; }
.sk-type-head .sk-cell { flex: none; }
/* Sticky gym column on narrow screens: the matrix scrolls under it. */
@media (max-width: 760px) {
  .sk-owner-email { display: none; }
  .sk-matrix th[scope="row"], .sk-matrix thead th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); min-width: 150px; }
}
/* The launch portal (src/platform/portal-pages.js). */
.sk-top-gym { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sk-top-gym > span { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.sk-h2 { font-size: var(--fs-h); font-weight: 600; margin: 6px 0 -4px; }
.sk-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sk-bar > span { display: block; height: 100%; background: var(--good); border-radius: inherit; min-width: 4px; }
.sk-one { display: grid; gap: 12px; }
.sk-one > .btn { justify-self: start; }
@media (max-width: 560px) { .sk-one > .btn { justify-self: stretch; } }
.sk-where > summary { font-weight: 600; }
.sk-where .sk-how { margin-top: 10px; }
.sk-code { font-family: var(--font-num); font-size: 22px; letter-spacing: .3em; text-align: center; }
.sk-journey { border-style: dashed; }
.sk-group h3 { font-size: var(--fs-lg); font-weight: 600; }
.pf:has(.sk-xwide) .pf-top-in { max-width: 1280px; }

/* ---- The launch portal's journey (src/platform/onboard-pages.js) ---- */
.jr-next { display: grid; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 14px; background: var(--surface-2); }
.jr-next h3 { font-size: var(--fs-h); margin: 0; }
.jr-next h3 a { color: var(--ink); text-decoration: none; }
.jr-next .sk-kicker { margin: 0; }
.jr-phase { border-top: 1px solid var(--line); padding-top: 10px; }
.jr-phase:first-of-type { border-top: 0; padding-top: 0; }
.jr-phase > summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 600; list-style: none; padding: 4px 0; }
.jr-phase > summary::-webkit-details-marker { display: none; }
.jr-phase > summary::before { content: '▸'; color: var(--ink-3); margin-right: 6px; }
.jr-phase[open] > summary::before { content: '▾'; }
.jr-phase > summary > span:first-child { flex: 1; }
.jr-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.jr-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.jr-steps li:first-child { border-top: 0; }
.jr-steps li > div { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.jr-steps li > div a { color: var(--ink); font-weight: 500; text-decoration: none; }
.jr-steps li > div a:hover { text-decoration: underline; }
.jr-steps i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.jr-steps .jr-done i { background: var(--good-soft); color: var(--good); }
.jr-steps .jr-attention i { background: var(--bad-soft); color: var(--bad); }
.jr-steps .jr-waiting i, .jr-steps .jr-in_progress i, .jr-steps .jr-ready i { background: var(--warn-soft); color: var(--warn); }
.jr-steps .jr-skipped { opacity: .65; }
.jr-steps .jr-here { background: var(--surface-2); border-radius: var(--r-ctl); padding-inline: 8px; }
.jr-crumbs a { color: var(--ink-2); }
.jr-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.jr-article { line-height: 1.6; }
.jr-article h2 { font-size: var(--fs-h); margin-top: 8px; }
.jr-article h3 { font-size: var(--fs-lg); }
.jr-article ol, .jr-article ul { padding-left: 22px; display: grid; gap: 6px; }
.jr-article code { font-family: var(--font-num); font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.jr-article a { color: var(--ink); }
.jr-tbl td { overflow-wrap: anywhere; }
.jr-val { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; vertical-align: middle; }
.jr-val code { background: var(--surface-2); border: 1px solid var(--line); }
.jr-val .btn-sm { min-height: 24px; padding: 0 8px; font-size: var(--fs-xs); }
.jr-missing { font-size: var(--fs-xs); color: var(--warn); background: var(--warn-soft); border-radius: 4px; padding: 1px 6px; }
.jr-quote { display: grid; gap: 8px; justify-items: start; }
.jr-quote blockquote { margin: 0; border-left: 3px solid var(--line-2); padding: 8px 14px; background: var(--surface-2); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; display: grid; gap: 8px; }
.jr-fail { line-height: 1.5; }
.jr-acts { align-items: center; }
.jr-fold > summary { cursor: pointer; }
.jr-site { display: grid; gap: 12px; }
.jr-flash { outline: 2px solid var(--s1); outline-offset: 2px; transition: outline-color .6s; }
.jr-waits a { color: var(--ink-2); }

/* The assistant: a button bottom right, a panel above it (full width on phones). */
.jr-ai { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; justify-items: end; gap: 10px; }
.jr-ai-open { box-shadow: var(--shadow-pop); }
.jr-ai-panel { width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 96px)); display: grid; grid-template-rows: auto 1fr auto; box-shadow: var(--shadow-lg); overflow: hidden; background: var(--surface); }
.jr-ai-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.jr-ai-log { overflow-y: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; min-height: 160px; }
.jr-msg { padding: 9px 12px; border-radius: 10px; display: grid; gap: 6px; max-width: 92%; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.5; }
.jr-msg ol, .jr-msg ul { padding-left: 18px; display: grid; gap: 4px; margin: 0; }
.jr-msg p { margin: 0; }
.jr-me { justify-self: end; background: var(--ink); color: var(--bg); }
.jr-bot { justify-self: start; background: var(--surface-2); }
.jr-act { justify-self: start; border: 1px solid var(--line-2); background: var(--surface); justify-items: start; }
.jr-good { border-color: var(--good); }
.jr-bad { border: 1px solid var(--bad); }
.jr-copy { white-space: pre-wrap; margin: 0; font: var(--fs-xs)/1.5 var(--font-num); background: var(--surface-2); padding: 8px; border-radius: 6px; max-height: 220px; overflow: auto; width: 100%; }
.jr-ai-form { display: grid; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.jr-ai-form .ta { min-height: 56px; resize: vertical; }
.jr-ai-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jr-ai-row [data-ai-file] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-ai-shot { cursor: pointer; }
.sk-main { padding-bottom: 96px; }
@media (max-width: 520px) {
  .jr-ai { right: 12px; bottom: 12px; left: 12px; }
  .jr-ai-panel { width: 100%; max-height: calc(100vh - 80px); }
}
.sk-allkeys > summary { cursor: pointer; list-style: none; margin-bottom: 10px; }
.sk-allkeys > summary::-webkit-details-marker { display: none; }
.sk-allkeys > summary::before { content: '▸ '; color: var(--ink-3); }
.sk-allkeys[open] > summary::before { content: '▾ '; }
.sk-allkeys { display: grid; gap: 14px; }

/* "Tell us about your gym" */
.sp-nav .pf-steps { flex-wrap: nowrap; }
.sp-form { gap: 16px; }
.sp-field { display: grid; gap: 6px; }
.sp-field legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.sp-cards, .sp-radios, .sp-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sp-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-req { color: var(--bad); }
.sp-repeat { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.sp-row { padding: 12px; display: grid; gap: 10px; }
.sp-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.sp-colour { display: flex; gap: 8px; align-items: center; }
.sp-colour input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface); }
.sp-go { justify-content: flex-end; }

/* A VIP invitation (src/platform/join-pages.js) */
.vip-hero { display: grid; gap: 10px; padding: 26px 22px; border-radius: 14px; background: var(--ink); color: var(--bg); }
.vip-hero h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 650; margin: 0; }
.vip-hero .muted { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.vip-badge { justify-self: start; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); border-radius: 999px; padding: 3px 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vip-form { gap: 14px; }
.vip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vip-ok { color: var(--good); font-weight: 500; }
.vip-bad { color: var(--bad); font-weight: 500; }
@media (max-width: 520px) { .vip-hero h1 { font-size: 24px; } .vip-hero { padding: 20px 16px; } }

/* Matt's console: the journey (src/platform/gyms-pages.js, onboard-console-pages.js) */
.sk-bar-sm { display: block; height: 6px; margin-bottom: 4px; min-width: 90px; }
.sk-jcell { min-width: 150px; }
.sk-jcell .pill { margin-top: 4px; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ob-stepform .select, .ob-stepform .inp { flex: 1 1 160px; min-width: 0; }
.ob-pack { white-space: pre-wrap; font: var(--fs-xs)/1.5 var(--font-num); margin: 8px 0 0; max-height: 360px; overflow: auto; }
.ob-summary { white-space: pre-wrap; }
.ob-tx { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ob-tx .pf-rows li.on { background: var(--surface-2); border-radius: var(--r-ctl); padding-inline: 8px; }
.ob-log { display: grid; gap: 10px; }
.ob-log .jr-msg { max-width: 86%; }
.ob-meta { opacity: .75; }
.ob-text { white-space: pre-wrap; }
.ob-dns td { vertical-align: middle; }
.ob-dns .pf-copy { margin: 0; min-width: 180px; }
@media (max-width: 760px) { .ob-tx { grid-template-columns: minmax(0, 1fr); } }
.pf-check .vip-terms { display: block; }
@media (max-width: 520px) { .jr-ai-open[aria-expanded="true"] { display: none; } }