/* ============================================================
DinkedIn — Cebu
Clean, light-first: Paper ground, hairline borders, generous radii.
One Dink Yellow (lime) FILL with Ink text is the primary action;
lime-family text and strokes use --hi-strong. Court Pink survives
only as --danger. Information hierarchy comes from weight and
spacing, not hue. Binding rules: docs/design/components.md.
SECTION MAP. Search for the § anchor to jump. Each section has
one owner during a build wave; see docs/design/components.md.
§0 Components + page templates (docs/design/ui-framework.md)
§1 Tokens (colour × 4 theme blocks, type, space, tap, z)
§2 Base (reset, body, focus, inputs)
§3 Components (shared): buttons, pills, avatars, cards,
court card, queue row, leaderboard row, delta chip,
bottom sheet, stepper, skeleton, offline bar, empty
state, footer credit
§4 Masthead + nav (shell)
§5 Courts finder (courts: stat strip → map view)
§6 Bookings + pickers (courts: bookings → set-up court)
§7 Scorer (game)
§8 iPad board (board: courtside board → open play board)
§9 Open Play on a phone (game)
§10 Groups regions (one START/END region per owner)
§11 P2 components (CSS only, unused until phase 2)
============================================================ */
/* ══ §0 Components ══════════════════════════════════════════
The inventory (v2: borderless, lighter type, one framework). One class
family per job; variants are modifiers. Feature CSS further down may set
LAYOUT only (grid, gap, order, placement, width). Colour, radius, type,
padding and shadow come from here. Spec: docs/design/ui-framework.md.
.btn (--primary --ink --soft --on-dark --quiet --danger --state, --sm --lg --block)
.icon-btn (--sm --bare) · .seg > .seg-item (--fill) · .chip (--on --token)
.tag (--neutral --lime --tint --loss --dot) · .field (--float --chat)
.card (--dark --quiet) > .card-head · .tile · .list-row · .stat (--tile)
.stat-strip · .bar · .bar-chart · .avatar-stack · .page-head
.crew-line · .door (--invite) · .overlay (--s --m --l --pop)
.shout · .label · .say (--shout) · .sticker · .tilt-l .tilt-r · .pill-nav
Crew v2 kit (docs/design/rebrand/README.md): no borders, hairlines,
gradients or shadows; a colour block separates things. One Ink primary
per view. Text on colour is always Ink. Radii: --r-lg 40, --r-card 30,
--r-tile 22, --r-field 14, --r-pill. Type: Bricolage 800 for score,
shout, titles and headings; Figtree 800 for buttons and chips, 500-700
for text; JetBrains Mono 600 caps for labels. Press scales to .95.
Tilt: ±1-3° playful cards and rows, 4-8° stickers, rewards and bubbles,
0° on forms, inputs, payments and settings.
Page templates ([data-tpl] on every view) close this block. */
/* ── button ── 56 (sm 44, the minimum), pill, Figtree 800, no border. A
bare .btn is the primary: Ink with white text, the one main action in a
view (--primary and --ink are the same). --soft is the secondary: White
on a colour or on Cream, Cream on a White card or sheet. --lime is a
lime fill for a highlight action on Ink. */
.btn {
min-height: var(--tap-lg); padding: 0 24px; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--font-body); font-size: var(--t-button); font-weight: 800; line-height: 1.2;
white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer;
border: 0; border-radius: var(--r-pill);
background: var(--ink); color: var(--white);
-webkit-tap-highlight-color: transparent;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--white)); }
.btn:active { transform: scale(.95); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary, .btn--ink { background: var(--ink); color: var(--white); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--accent-2); }
.btn--soft { background: var(--btn-2, var(--white)); color: var(--ink); }
.btn--soft:hover { background: color-mix(in srgb, var(--ink) 6%, var(--btn-2, var(--white))); }
:is(.card:not(.card--dark):not(.card--quiet), .overlay, .tile) { --btn-2: var(--cream); }
/* On an ink card (--dark): white on ink, the soft button turned over. */
.btn--on-dark { background: var(--white); color: var(--ink); }
.btn--on-dark:hover { background: var(--cream); }
.btn--quiet { background: none; color: var(--ink-2); padding-inline: 12px; }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn.btn--danger { color: var(--loss); }
.btn.btn--danger:hover { color: var(--loss); background: var(--loss-tint); }
/* A pressed choice (a team, an option in a pair). */
.btn--soft[aria-pressed="true"] { background: var(--lime-tint); color: var(--on-lime-tint); }
/* The RSVP morph: one control whose look follows the user's state. Bare
(.is-in) it is primary; Going and Out settle into calmer fills. */
.btn--state { transition-property: background-color, color, box-shadow, width, transform; }
.btn--state.is-going { background: var(--lime-tint); color: var(--on-lime-tint); }
.btn--state.is-out { background: var(--surface-2); color: var(--ink-2); }
.btn--sm { min-height: var(--tap); padding-inline: 18px; font-size: 14px; }
.btn--lg { min-height: var(--tap-lg); padding-inline: 28px; font-size: 17px; }
/* --xl: the homepage's calls to action (§13), 56 (--tap-lg), 17/800. */
.btn--xl { min-height: var(--tap-lg); padding-inline: 28px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }
@media (max-width: 767.98px) { .btn--lg { width: 100%; } }
/* --touch: a pair of answers; 56 like every button (kept for its callers). */
@media (max-width: 767.98px) { .btn--touch { min-height: var(--tap-lg); } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: default; }
/* ── icon button ── a 44 circle in --surface-2 (Sand). Always
carries an aria-label. --sm is the 30px close (44 to tap); --bare drops the fill. */
.icon-btn {
width: var(--tap); height: var(--tap); flex: none; padding: 0;
display: inline-grid; place-items: center; cursor: pointer;
font: inherit; font-size: 18px; line-height: 1; text-decoration: none;
background: var(--surface-2); color: var(--ink);
border: 0; border-radius: 50%;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 9%, var(--surface-2)); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:disabled { opacity: .45; pointer-events: none; }
.icon-btn--sm { position: relative; width: 30px; height: 30px; color: var(--ink-2); }
.icon-btn--sm::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; } /* 44px tap area */
.icon-btn--sm svg { width: 12px; height: 12px; }
/* --bare: a glyph at the nav icons' size (22px), no fill; the tap area
stays and hover is the tabs' soft rounded wash. Help, theme, sign out. */
.icon-btn--bare { background: none; color: var(--ink-2); border-radius: var(--r-field); }
.icon-btn--bare:hover, .icon-btn--bare[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.icon-btn--bare svg { width: 22px; height: 22px; }
/* ── segmented control ── the pill nav's look: a Sand track, 4px inset,
pill. Items 40 high, Figtree 800 14, Ink; the selected one is Ink with
white text. The track hugs its labels; --fill stretches the items (phone,
sheets). Items are buttons (aria-pressed / aria-selected), links
(aria-current) or labels after a hidden radio (input:checked + .seg-item). */
.seg {
display: inline-flex; gap: 2px; padding: 4px; min-width: 0; max-width: 100%;
align-self: flex-start; background: var(--surface-2); border-radius: var(--r-pill);
}
.seg--fill { display: flex; align-self: stretch; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-item {
flex: 0 0 auto; min-width: 0; min-height: 40px; padding: 0 18px;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1.2;
white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer;
color: var(--ink); background: none; border: 0; border-radius: var(--r-pill);
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.seg--fill .seg-item { flex: 1 1 0; padding-inline: 8px; }
.seg-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg-item:active { transform: scale(.95); }
.seg-item svg { width: 16px; height: 16px; flex: none; }
.seg-item[aria-pressed="true"], .seg-item[aria-selected="true"], .seg-item[aria-current]:not([aria-current="false"]),
.seg-item.is-on, .seg input:checked + .seg-item {
background: var(--ink); color: var(--white);
}
.seg input:focus-visible + .seg-item { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Tabs hug their labels on a wide view and fill the width on a phone. */
@media (max-width: 767.98px) {
.seg { display: flex; align-self: stretch; width: 100%; }
.seg-item { flex: 1 1 0; padding-inline: 8px; }
}
/* Short labels for a phone (ui.seg({ short })): Cork, Club, Board. */
.seg-short { display: none; }
@media (max-width: 767.98px) {
.seg-item:has(.seg-short) .seg-long { display: none; }
.seg-item .seg-short { display: inline; }
}
/* ── chip ── tappable only (filter, pick). 40 high, --r-field (14),
Figtree 800 14 on the screen's tint (--stage-tint, Sand on Cream), no
border. --on (or a pressed state) flips to Ink with the stage colour as
its text (--stage-on, Lime on Cream).
--token is a filter Volley set: lime tint, 600, optional bolt; the same
element in the chat, the Courts list and the phone sheet. A label that
can't be tapped is a .tag. */
.chip {
position: relative; min-height: 40px; padding: 0 16px; min-width: 0; max-width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: pointer;
color: var(--ink); background: var(--stage-tint);
border: 0; border-radius: var(--r-field);
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out);
}
.chip::after { content: ""; position: absolute; inset: -5px 0; }
.chip:hover { background: color-mix(in srgb, var(--ink) 7%, var(--stage-tint)); }
.chip:active { transform: scale(.95); }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip--on, .chip[aria-pressed="true"], .chip[aria-checked="true"], .chip[aria-selected="true"], .chip[aria-expanded="true"], .chip.is-on,
input:checked + .chip {
background: var(--ink); color: var(--stage-on);
}
.chip--token, .chip.chip--token.is-on { background: var(--lime-tint); color: var(--ink); padding-inline: 12px; min-height: 34px; font-size: 13px; }
.chip--token:hover { background: color-mix(in srgb, var(--lime) 40%, var(--lime-tint)); }
.chip--token svg { width: 11px; height: 11px; }
.chip--token svg path { fill: currentColor; }
.chip:disabled { opacity: .45; pointer-events: none; }
/* A chip can be the label of a hidden checkbox before it (forms). */
input:focus-visible + .chip { outline: 2px solid var(--ink); outline-offset: 2px; }
/* --float: over the map, White (no shadow: the map is the colour block). */
.chip--float:not(.is-on):not([aria-expanded="true"]):not(.chip--token) { background: var(--surface); }
/* ── tag ── a status label, never tappable (no click handler, ever).
22 high, pill, 12/600. Bare is neutral (surface-2): You, Owner, Guest. */
.tag {
display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; flex: none;
height: 22px; padding: 0 9px;
min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12px; font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; text-transform: none;
border: 0; border-radius: var(--r-pill);
color: var(--ink); background: var(--surface-2);
}
.tag--neutral { color: var(--ink); background: var(--surface-2); }
.tag--lime { color: var(--on-lime); background: var(--lime); }
.tag--tint { color: var(--on-lime-tint); background: var(--lime-tint); height: 24px; padding-inline: 10px; font-size: 12.5px; }
.tag--loss { color: var(--loss); background: var(--loss-tint); }
/* Live: lime with a 6px ink dot that pulses. */
.tag--live { color: var(--on-lime); background: var(--lime); }
.tag--live::before {
content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
animation: tag-pulse 1.6s ease-out infinite;
}
@keyframes tag-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--on-lime) 45%, transparent); }
100% { box-shadow: 0 0 0 6px transparent; }
}
/* A one-letter result dot (W / L / D in a form row). */
.tag--dot { width: 22px; padding: 0; justify-content: center; }
/* ── field ── search, caption and chat inputs. 44 high, --r-field,
--surface-2 fill, no border, 15px; a leading 17px icon. --float is white
with the float shadow (the map search on a phone); --chat is a pill with
a 34px send button inside. Wraps an (.field > svg + input) or is
the itself. */
.field {
min-height: 44px; min-width: 0; width: 100%;
display: flex; align-items: center; gap: 10px; padding: 0 14px;
font: inherit; font-size: var(--t-body); color: var(--ink);
background: var(--surface-2); border: 0; border-radius: var(--r-field);
}
.field > svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.field > input, .field > textarea {
flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0; margin: 0; border-radius: 0;
font: inherit; color: inherit; background: none; border: 0; outline: 0; box-shadow: none;
}
.field::placeholder, .field > input::placeholder, .field > textarea::placeholder { color: var(--ink-3); }
.field:focus-within { background: var(--surface); box-shadow: var(--ring-field); }
.field > :is(input, textarea, select), .field > :is(input, textarea, select):is(:hover, :focus, :focus-visible) { background-color: transparent; box-shadow: none; outline: 0; }
.field--float { min-height: 48px; border-radius: var(--r-pill); background: var(--surface); padding: 0 6px 0 16px; }
.field--chat { min-height: 44px; border-radius: var(--r-tile); padding: 5px 5px 5px 16px; }
.field-send {
flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center; background: var(--ink); color: var(--lime);
transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.field-send:active { transform: scale(.96); }
.field-send:disabled { background: var(--send-off); color: var(--ink-4); cursor: default; }
.field-send svg { width: 15px; height: 15px; }
/* ── card ── the one container: --surface (White), --r-card (30), no
border, no shadow: White on Cream is the separation. Children are spaced
by the gap. --dark is Ink (next game, game of the week); --quiet is a
--surface-3 (Cream) block (Dink's nudge, hint cards, "you're up next");
--stage is a crew colour block (set --stage on it), Ink text. */
.card {
min-width: 0; padding: 22px;
display: flex; flex-direction: column; gap: 16px;
background: var(--surface); border: 0; border-radius: var(--r-card);
}
@media (max-width: 767.98px) { .card { padding: 20px; gap: 14px; } }
.card--dark { background: var(--ink); color: var(--cream); }
.card--dark :is(.card-meta, .card-head-meta, .card-kicker) { color: var(--inv-ink-2); }
.card--dark .card-sub { color: var(--inv-ink-2); }
.card--quiet { background: var(--surface-3); }
.card--stage { background: var(--stage); color: var(--ink); --btn-2: var(--white); }
.card--stage :is(.card-meta, .card-head-meta, .card-kicker, .card-sub) { color: var(--ink); }
.card--lg { border-radius: var(--r-lg); }
/* The card's gap is the only space between its parts: nothing inside a
card adds block margins (important, so a feature rule can't win). */
.card > * { margin-block: 0 !important; }
/* A card's head: title left, meta or a link right, on one baseline. */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; flex-wrap: wrap; }
.card-head > :is(h2, h3, .card-title) { margin: 0; min-width: 0; }
.card-title { font-family: var(--font-display); font-size: var(--t-card); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: inherit; text-wrap: balance; }
a.stat-strip { color: inherit; text-decoration: none; }
.card-head-meta, .card-head > a { margin: 0 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.card-head > a { color: var(--ink-2); }
.card-head > a:hover { color: var(--ink); }
.card-kicker { margin: 0; font-family: var(--font-mono); font-size: var(--t-label-mono); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.card-sub { margin: 0; font-size: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
/* The one pairing: a card title's own subline sits 4px under it. */
.card > :is(.card-title, .sec-head, .card-head) + .card-sub { margin-top: calc(4px - var(--sp-4)) !important; }
/* The feature title (a game, a court): a heading, Bricolage 800. */
.feature-title { margin: 0; font-family: var(--font-display); font-size: var(--t-feature); font-weight: 800; letter-spacing: var(--track-heading); line-height: 1; }
/* A score: Bricolage 800, tabular. The big result score is .score--hero. */
.score { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.score--hero { font-size: var(--t-score); letter-spacing: var(--track-score); line-height: .8; }
.score-dash { color: var(--ink-4); padding: 0 10px; }
@media (max-width: 767.98px) { .score { font-size: 28px; } .score-dash { padding: 0 6px; } }
/* ── tile ── a quiet cell holding one item (gear, trophy, quest art):
--surface-3 (Cream), --r-tile (22), no border, no shadow. --lime-tint when on. A tile
never contains a card. Interactive tiles (button/a) press. */
.tile {
min-width: 0; padding: var(--sp-3);
background: var(--surface-3); border: 0; border-radius: var(--r-tile);
color: var(--ink); font: inherit; text-decoration: none;
}
:is(button, a).tile { cursor: pointer; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
:is(button, a).tile:active { transform: scale(.95); }
.tile--on, .tile.is-on, .tile[aria-pressed="true"], .tile[aria-checked="true"] { background: var(--lime-tint); }
.tile.is-locked { background: var(--sand); color: var(--ink-3); }
/* ── list row ── the one row for every table or list: leaderboard, This
week, high scores, partners, the courts list, members. A grid of
[rank 14] [avatar 28–30 | thumb 52–56] [name + meta] [value], 46 high,
gap 12, no dividers. Slots are optional. --selected is a White block
(the selected court); --me lifts the name to 700. */
.list { display: flex; flex-direction: column; min-width: 0; }
.list-row {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
min-height: 46px; min-width: 0; padding: 0; color: inherit; text-decoration: none;
font-size: 14.5px; font-weight: 500; border: 0; background: none;
}
.list-row:has(.list-meta) { min-height: 56px; padding-block: 4px; }
.list-row:has(> .list-rank) { grid-template-columns: 14px auto minmax(0, 1fr) auto; }
.list-row:not(:has(> .list-lead)) { grid-template-columns: minmax(0, 1fr) auto; }
.list-row:has(> .list-rank):not(:has(> .list-lead)) { grid-template-columns: 14px minmax(0, 1fr) auto; }
.list-rank { font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.list-lead { display: inline-flex; line-height: 0; flex: none; }
.list-lead .avatar { --av: 30px; }
.list-thumb { display: block; width: 56px; height: 56px; border-radius: var(--r-field); object-fit: cover; overflow: hidden;
background: var(--sand); }
.list-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.list-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-meta { font-size: 13px; font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.list-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-value small { font-weight: 500; color: var(--ink-3); }
.list-value-meta { font-size: 12.5px; font-weight: 500; color: var(--lime-ink); white-space: nowrap; }
.list-value-meta.is-warn { color: var(--warn); }
.list-value-meta.is-quiet { color: var(--ink-3); }
.list-row .bar { margin-top: 2px; }
.list-row--thumb { min-height: 76px; gap: 14px; padding: 10px; margin-inline: -10px; border-radius: var(--r-tile); }
.list-row--me .list-title, .list-row--thumb .list-title { font-weight: 700; }
.list-row--thumb .list-title { font-size: var(--t-body); }
.list-row--selected { background: var(--surface); }
/* --wrap: title and meta wrap instead of clipping (rows an organizer must read whole). */
.list-row--wrap { padding-block: 8px; }
.list-row--wrap :is(.list-title, .list-title > span, .list-meta) { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* --stack: under 480px the value slot drops under the name, left-aligned
(a row whose two buttons won't fit beside it). */
@media (max-width: 479.98px) {
.list-row.list-row--stack { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 8px; }
.list-row--stack .list-end { align-items: flex-start; }
}
:is(a, button).list-row { cursor: pointer; font: inherit; font-size: 14.5px; text-align: left; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
:is(a, button).list-row:active { transform: scale(.98); }
:is(a, button).list-row--thumb:hover:not(.list-row--selected) { background: var(--surface-3); }
@media (max-width: 767.98px) { .list-thumb { width: 52px; height: 52px; } .list-row--thumb { min-height: 72px; gap: 12px; } }
/* ── stat ── label (meta), value (28/700 tabular), optional delta (12.5/500,
--lime-ink up, --ink-3 neutral). --tile sits on a --surface-3 panel
(Insights). .stat-strip is the white bar of four on the Me stage. */
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-delta { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.stat-delta.is-up { color: var(--lime-ink); }
.stat--tile { padding: 16px 18px; background: var(--surface-3); border-radius: var(--r-tile); }
.stat-strip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
padding: 12px 18px; background: var(--surface); border-radius: var(--r-tile);
}
.stat-strip .stat { flex-direction: column-reverse; gap: 0; }
.stat-strip .stat-value { font-size: 20px; letter-spacing: -.02em; }
.stat-strip .stat-label { font-size: 12px; }
/* --bare: on a phone the strip sits straight on the stage (one number, no bar). */
@media (max-width: 767.98px) { .stat-strip--bare { padding: 0; background: none; } }
/* ── bar ── an 8px progress track in Sand with an Ink fill, Lime when
complete. .bar-chart is the column chart: ink bars, radius 8, the
current period lime, micro --ink-3 labels. */
.bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--ink); transition: width var(--dur-3) var(--ease-out); }
.bar.is-done > i { background: var(--lime); }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; min-width: 0; }
.bar-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.bar-col > i { display: block; width: 100%; height: var(--h, 0%); min-height: 4px; border-radius: var(--r-field); background: var(--ink); }
.bar-col.is-now > i { background: var(--lime); }
.bar-col > span, .bar-axis { font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar-axis { display: flex; justify-content: space-between; color: var(--ink-4); }
/* ── avatar stack ── 32–34 circles, -8 overlap, a 2.5px surface ring (no
border), then trailing meta: "+4 going". */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { --av: 34px; border: 0; box-shadow: 0 0 0 2.5px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }
.avatar-stack .avatar-more { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); }
.avatar-stack-meta { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 767.98px) { .avatar-stack .avatar { --av: 32px; } }
/* ── page head ── back link, then [mark] title + one meta line, then at
most one .btn and one .icon-btn on the right. Ownership is meta text,
never a tag. ui.pageHead() builds every one. */
.page-head { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0 0 18px; }
.page-back {
align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
margin: -6px 0 -8px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); text-decoration: none;
}
.page-back svg { width: 14px; height: 14px; }
.page-back:hover { color: var(--ink); }
.page-head-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-mark { flex: none; display: inline-flex; line-height: 0; }
.page-mark .gtile { --gt: 52px; border-radius: var(--r-field); font-size: 17px; }
.page-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-title { margin: 0; font-family: var(--font-display); font-size: var(--t-page); font-weight: 800; letter-spacing: var(--track-title); line-height: .95; overflow-wrap: anywhere; text-wrap: balance; }
.page-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.page-meta { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-3); overflow-wrap: anywhere; }
.page-head-actions { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.page-head > .seg { margin: 0; }
@media (max-width: 767.98px) {
.page-head-row { flex-wrap: wrap; }
.page-head-actions:has(> .seg) { flex: 1 0 100%; margin-left: 0; }
.page-mark .gtile { --gt: 44px; border-radius: 14px; font-size: 15px; }
.page-meta { font-size: 13px; }
}
/* ── crew line ── the crew inside content: the one crew size (40px,
PAC_UI.CREW_PX) and its words in a soft bubble, no outline. Attached to an
action it leads that card instead (.crew-line--lead: same 40px, the words
as the card's title, no bubble). Volley's chat keeps its own size. */
.crew-line { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.crew-line > :first-child { flex: none; line-height: 0; }
.crew-line b, .crew-line strong { font-weight: 600; }
.crew-line > p { position: relative; margin: 0; min-width: 0; max-width: var(--w-bubble); padding: 9px 14px; border-radius: var(--r-tile); background: var(--surface-2); }
.crew-line > p::before { content: ''; position: absolute; left: -4px; top: 50%; width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: translateY(-50%) rotate(45deg); }
.crew-line--lead { gap: 14px; font-size: var(--t-body); color: var(--ink); }
.crew-line--lead .crew-line-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crew-line--lead .crew-line-text { font-size: var(--t-card); font-weight: 600; }
.crew-line--lead .crew-line-meta { font-size: 13px; color: var(--ink-3); }
.crew-line--lead > .btn { flex: none; }
@media (max-width: 767.98px) {
.crew-line { font-size: 13px; }
.crew-line--lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
.crew-line--lead > .btn { grid-column: 1 / -1; width: 100%; min-height: 48px; }
}
/* ── locker door ── one member's door (Clubhouse and the Me locker). White
face, --r-card, vents and a handle (no frame line). 80 avatar (62 on a phone), name + tag,
record meta, a row of 30px stickers. --invite is the + door. */
.door {
position: relative; min-width: 0; height: 244px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 14px 16px; text-align: center; color: inherit; text-decoration: none;
background: var(--surface); border: 0; border-radius: var(--r-card);
font: inherit;
}
:is(a, button).door { cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
:is(a, button).door:active { transform: scale(.95); }
.door-vents { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px 4px; }
.door-vents i { display: block; height: 3px; border-radius: var(--r-pill); background: var(--door-metal); }
.door-handle { position: absolute; right: 14px; top: 50%; width: 6px; height: 20px; margin-top: -10px; border-radius: var(--r-pill); background: var(--door-metal); }
.door-face { margin-top: 6px; display: grid; place-items: center; line-height: 0; }
.door-face .avatar { --av: 80px; border: 0; }
.door-name { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; min-width: 0; max-width: 100%; font-size: var(--t-body); font-weight: 600; }
.door-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.door-meta { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.door-stickers { margin-top: auto; display: flex; gap: 2px; justify-content: center; min-height: 30px; line-height: 0; }
.door-stickers > * { display: inline-block; width: 30px; height: 30px; transform: rotate(var(--tilt, 0deg)); }
.door-stickers svg { width: 100%; height: 100%; }
.door--invite { background: var(--surface-2); justify-content: center; gap: 10px; color: var(--ink-2); }
.door--invite .door-plus { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; }
.door--invite .door-plus svg { width: 18px; height: 18px; }
.door--invite .door-name { padding: 0; font-size: var(--t-label); color: var(--ink); }
@media (max-width: 767.98px) {
.door { height: 196px; gap: 4px; padding: 14px 12px 12px; }
.door-vents { grid-template-columns: repeat(2, 10px); gap: 3px; }
.door-handle { right: 11px; width: 5px; height: 18px; margin-top: -9px; }
.door-face { margin-top: 4px; }
.door-face .avatar { --av: 62px; }
.door-name { font-size: 14.5px; }
.door-meta { font-size: 12px; }
.door-stickers { min-height: 26px; }
.door-stickers > * { width: 26px; height: 26px; }
}
/* ── map pin ── a price on the map: a White pill, Figtree 800; --on (the
picked court) is Ink. */
.pin {
display: inline-flex; align-items: center; height: 32px; padding: 0 13px; white-space: nowrap;
font-size: 13px; font-weight: 800; color: var(--ink); background: var(--surface);
border: 0; border-radius: var(--r-pill);
}
.pin--on { background: var(--ink); color: var(--white); }
@media (max-width: 767.98px) { .pin { height: 30px; padding: 0 12px; font-size: 12.5px; } }
/* ── section head ── kept for bare sections outside a card: a heading,
meta 13 on the right, optional action. Inside a card it is the card head. */
.sec-head { display: flex; align-items: baseline; gap: var(--sp-1) var(--sp-4); flex-wrap: wrap; min-width: 0; margin: 0; }
.sec-head > :is(h2, h3, .sec-title) { margin: 0; min-width: 0; font-family: var(--font-display); font-size: var(--t-section); font-weight: 800; letter-spacing: var(--track-heading); line-height: 1; color: var(--ink); text-wrap: balance; }
.card .sec-head > :is(h2, h3, .sec-title) { font-size: var(--t-card); letter-spacing: -.02em; }
.sec-meta { margin: 0 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sec-head > :is(a, button):last-child { margin-left: auto; }
.sec-meta + :is(a, button) { margin-left: 0; }
/* ── overlay ── one