/* =========================================================================
   Desktop shell (decision 135; slice D2, piece S)
   Loaded by index.html with the desktop media query (DESKTOP_QUERY in
   src/components/frame/useDesktop.ts) as its media attribute, so nothing here repeats that query and nothing reaches a phone. The phone side of
   the frame (what hides, the wrapper classes, the skip link) is in components.css, "Desktop frame: phone side".
   Only these nested queries are allowed: (max-width: 999px), (max-width: 1199px), (hover: hover), (prefers-reduced-motion: reduce).
   Every width comes from a token; the one font family named is var(--font-sans).
   ========================================================================= */

/* ---- The frame ---- */
.club-deskbar, .club-deskfoot, .club-backrow { display: block; }
.club-app > .club-topbar, .club-app > .club-tabs { display: none; }
.club-app { min-height: auto; padding-bottom: var(--space-7); }
.club-main { padding-top: var(--space-6); }
.club-dock { bottom: 0; }

/* The footer sits at the foot of the page, starting just below the fold even on a short page (decision 156). A page that
   fills in after it loads then never pushes the footer out of view, and the page scrolls from the first paint, so the
   scrollbar never arrives late and nudges it sideways (Lighthouse counted both as layout shift on Household and My sits). */
#root { display: flex; flex-direction: column; min-height: 100vh; }
.club-deskfoot { margin-top: auto; }
#root > .club-app { width: 100%; min-height: calc(100vh - var(--deskbar-height)); }

/* ---- The desk bar: logo and balance in fixed-size slots, so a renamed "hall pass" or a new logo never moves the navigation. ---- */
.club-deskbar { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.club-deskbar__inner {
  display: grid; grid-template-columns: var(--slot-brand) minmax(0, 1fr) var(--slot-balance); align-items: center; gap: var(--space-5);
  max-width: var(--page-max); min-height: var(--deskbar-height); margin: 0 auto; padding: var(--space-2) var(--page-gutter);
}
.club-deskbar__brand { display: inline-flex; align-items: center; justify-self: start; width: var(--slot-brand); height: var(--tap-target); overflow: hidden; }
.club-deskbar__brand img { height: var(--desk-logo); width: auto; max-width: 100%; max-height: var(--desk-logo); object-fit: contain; object-position: left center; }
.club-deskbar__end { justify-self: end; width: var(--slot-balance); display: flex; justify-content: flex-end; }
.club-deskbar__end .club-balance { box-shadow: none; max-width: 100%; }
.club-deskbar__end .club-balance__text { min-width: 0; }
.club-deskbar__note { justify-self: center; margin: 0; color: var(--ink-muted); }

.club-desknav { display: flex; justify-self: center; gap: var(--space-2); }
.club-desknav__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target); padding: 0 var(--space-5);
  border: 2px solid transparent; border-radius: var(--radius-full);
  color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 16px; line-height: 20px;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.club-desknav__link:hover { background: var(--paper-sunk); color: var(--ink); }
.club-desknav__link[aria-current="page"] { background: var(--club-pink-soft); border-color: var(--club-pink); color: var(--club-pink); font-weight: 800; }
.club-desknav__dot { width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--club-pink); }

/* ---- The short sign-in strip (decision 143): under the bar on every page of a short sign-in. ---- */
.club-shortstrip__inner { padding: var(--space-2) var(--page-gutter); }

/* ---- The footer ---- */
.club-deskfoot { border-top: 2px solid var(--rule); background: var(--paper-sunk); }
.club-deskfoot__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--page-gutter);
}
.club-deskfoot__inner p { margin: 0; }

.club-getphone { display: grid; grid-template-columns: var(--qr-size) 1fr; gap: var(--space-4); align-items: center; max-width: 34em; }
.club-getphone p { margin: 0; }
.club-getphone div { display: grid; gap: var(--space-1); }
.club-qr { display: block; width: var(--qr-size); height: var(--qr-size); border: 2px solid var(--card-edge); border-radius: var(--radius-sm); }

/* ---- The page: one container for every signed-in screen, at the bar's own edges. ---- */
.club-app:not(.club-promo__panel) { max-width: var(--page-max); padding: 0 var(--page-gutter) var(--space-7); }
.club-app.club-app--read { max-width: calc(var(--read-max) + var(--page-gutter) * 2); }
.club-app:not(.club-promo__panel) > .club-main { padding: var(--space-6) 0 0; }
.club-backrow { padding: var(--space-4) 0 0; }
.club-app > .club-backrow ~ .club-main { padding-top: var(--space-3); }

/* ---- The signed-out promo: the pitch beside the sign-in panel ---- */
.club-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--content-max); gap: var(--space-7); align-items: start;
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-7) var(--page-gutter);
}
.club-promo__pitch { display: grid; gap: var(--space-5); align-content: start; padding-top: var(--space-5); }
.club-promo__pitch > * { margin: 0; }
.club-promo__pitch .t-display { max-width: 12em; }
.club-promo__pitch .club-steps { max-width: 34em; }
.club-promo__pitch .club-getphone { padding: var(--space-4); background: var(--paper-raised); border: 2px solid var(--card-edge); border-radius: var(--radius-sm); }
.club-promo__panel {
  width: auto; max-width: none; min-height: auto; margin: 0; padding-bottom: 0;
  border: 2px solid var(--card-edge); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden;
}
/* The pitch is the one big picture, and the sign-in button stays above the fold at 1024 x 768. */
.club-promo__panel .club-art { display: none; }

/* ---- Page head: title and lede on the left, the page's action on the right. ---- */
.club-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.club-page-head > .club-screen-head { flex: 1 1 24em; }
.club-page-head > .club-btn, .club-page-head > .club-actions { flex: none; }
.club-page-head .club-btn--block, .club-row-actions .club-btn--block { width: auto; display: inline-flex; }

/* Notices read at reading width; the offline banner runs the page's width. */
.club-main > .club-notice:not(.club-notice--bleed), .club-main > .club-quiet { max-width: var(--read-max); }
.club-app--read .club-main > .club-notice, .club-app--read .club-main > .club-quiet, .club-aside .club-notice { max-width: none; }
.club-notice--bleed { margin: 0; border-radius: var(--radius-sm); border-width: 2px 2px 2px 8px; }
.club-chips { margin: 0; padding: 2px 0 6px; flex-wrap: wrap; overflow: visible; }

/* ---- Ticket grid: the Board's date groups lay out as a grid, the group's label across the top. Date order runs left to right, then down. ---- */
.club-board__group, .club-ticket-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ticket-min), 100%), 1fr));
  gap: var(--grid-gap); align-items: stretch;
}
.club-board__group > .club-section-label { grid-column: 1 / -1; margin-bottom: calc(var(--space-2) * -1); }
.club-board { gap: var(--space-6); }
.club-board__group + .club-board__group { margin-top: 0; }
.club-ticket-grid { display: grid; }
.club-ticket-grid > .club-skel { min-height: 160px; }
.club-board__group > .club-ticket .club-ticket__body, .club-ticket-grid > .club-ticket .club-ticket__body { align-content: start; }

/* ---- Split page: what it is (left), what you can do (right, one action card that stays in view). ---- */
.club-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-width); gap: var(--space-6); align-items: start; }
.club-split > * { min-width: 0; }
.club-split__main { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.club-aside {
  position: sticky; top: calc(var(--deskbar-height) + var(--stripe-band) * 4 + var(--space-5));
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
}
.club-actioncard {
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
  padding: var(--space-5); background: var(--paper-raised); color: var(--ink);
  border: 2px solid var(--card-edge); border-radius: var(--radius-md); box-shadow: var(--shadow-paper);
}
.club-actioncard > .t-overline { color: var(--ink-muted); }
.club-actioncard .club-btn--quiet { justify-self: start; }

/* Two even columns (My sits, Your request's facts and history), or three. */
.club-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.club-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-cols > section, .club-cols > div { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-content: start; }

/* A row of buttons, left to right in reading order (empty states, page heads). */
.club-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Reading pages (Post, Sit details, Me's pages): one column at reading width; buttons keep their own width. */
.club-aside .club-btn--block { width: 100%; }
.club-app--read .club-main > .club-btn--block { width: auto; justify-self: start; display: inline-flex; }
.club-main > .club-btn:not(.club-btn--block), .club-main > .club-btn--quiet, .club-split__main > .club-btn--quiet { justify-self: start; }

/* ---- Tables. Plain type. They scroll inside themselves, never the page. ---- */
.club-table-wrap { overflow-x: auto; background: var(--paper-raised); border: 2px solid var(--card-edge); border-radius: var(--radius-sm); }
.club-table { width: 100%; border-collapse: collapse; font: 400 16px/24px var(--font-sans); color: var(--ink); }
.club-table th { padding: var(--space-3) var(--space-4); text-align: left; font: 700 14px/20px var(--font-sans); color: var(--ink-muted); background: var(--paper-sunk); border-bottom: 2px solid var(--rule); }
.club-table td { padding: var(--space-2) var(--space-4); height: 64px; vertical-align: middle; }
.club-table td:not(:first-child) { white-space: nowrap; }
.club-table tbody tr + tr td { border-top: 2px dashed var(--rule); }
.club-table td:last-child, .club-table th:last-child { text-align: right; }
.club-table__who { display: flex; align-items: center; gap: var(--space-3); }
.club-table__who > span:last-child { display: grid; }
.club-table__who small { font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.club-table .club-btn { min-height: var(--tap-target); }
.club-table td > a:only-child { display: flex; align-items: center; min-height: var(--tap-target); }

/* ---- Shared building blocks for the area pieces (from the hi-fi's part 3). Areas use them; they don't redefine them. ---- */
/* A plain card: Me's sections, setup asides, "What happens next". */
.club-card {
  display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-content: start;
  padding: var(--space-5); background: var(--paper-raised); color: var(--ink);
  border: 2px solid var(--card-edge); border-radius: var(--radius-md);
}
.club-card > .club-btn { justify-self: start; }
.club-card > .club-list { margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1); border-width: 2px 0 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Three across (Me's cards, How the club works); two from 900 to 1199. */
.club-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; list-style: none; }

/* Club tiles on Your clubs. */
.club-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ticket-min), 100%), 1fr)); gap: var(--grid-gap); }
.club-tile { display: flex; align-items: center; gap: var(--space-4); min-height: 96px; padding: var(--space-4) var(--space-5); background: var(--paper-raised); color: var(--ink); text-decoration: none; border: 2px solid var(--card-edge); border-radius: var(--radius-md); box-shadow: var(--shadow-paper); }
.club-tile__text { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.club-tile__text strong { font: 800 20px/26px var(--font-sans); }
.club-tile__text small { font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.club-tile__text .club-badge { justify-self: start; }
.club-tile > .club-icon { color: var(--ink-muted); }

/* A form's foot: a note on the left, the one primary last, on the right. */
.club-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.club-form-foot > p, .club-form-foot > .club-quiet { flex: 1 1 20em; margin: 0; }
.club-form-foot > .club-btn { margin-left: auto; }
/* Two-column forms (child form, home form): both columns, then the foot across both. */
.club-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); align-items: start; }
.club-form2 > .club-form-foot { grid-column: 1 / -1; }

/* A drawn desktop notification. Decorative: the words are in the page. */
.club-desknote { display: grid; grid-template-columns: 2.25rem 1fr; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); background: var(--paper-raised); color: var(--ink); border: 2px solid var(--field-edge); border-radius: var(--radius-md); box-shadow: var(--shadow-paper); }
.club-desknote img { grid-row: span 2; width: 2.25rem; height: 2.25rem; }
.club-desknote p { margin: 0; }

/* How the club works: three cards, each with its icon. */
.club-how { align-items: stretch; }
.club-how .club-card { height: 100%; }
.club-how .club-card > .club-icon { width: 2rem; height: 2rem; color: var(--club-pink); }
.club-main > .club-progress { max-width: var(--read-max); }

.club-center { text-align: center; justify-items: center; }
.club-center .club-screen-head { justify-items: center; }

/* ---- Toasts: bottom left of the page, under the content they relate to; 6 seconds, still aria-live. ---- */
.club-toast {
  left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter))); right: auto;
  bottom: var(--space-5); margin: 0; max-width: var(--toast-max);
}

/* ---- The desktop dialog: a bottom sheet becomes a centred dialog (same .club-sheet markup, focus trap and Escape).
   Its top edge sits at 15% of the window, so it doesn't jump when an error appears; 560px with a form. ---- */
.club-has-dialog { overflow: hidden; }
.club-scrim { opacity: 0.6; }
.club-sheet {
  top: 15vh; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); margin: 0;
  width: min(var(--dialog-width), calc(100vw - var(--space-7) * 2)); max-width: none; max-height: calc(85vh - var(--space-7));
  gap: var(--space-4); padding: var(--space-5);
  border-bottom: 2px solid var(--card-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker);
  animation: club-dialog-in var(--motion-base) var(--ease-out);
}
.club-sheet--form { width: min(var(--dialog-width-form), calc(100vw - var(--space-7) * 2)); }
.club-sheet::before { display: none; }
.club-sheet > .t-heading { padding-right: var(--space-7); }
.club-sheet__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: grid; place-items: center; width: var(--tap-target); height: var(--tap-target);
  border: 2px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer;
}
.club-sheet .club-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.club-sheet .club-actions .club-btn--block { width: auto; display: inline-flex; }
.club-sheet .club-actions .club-btn--primary { min-height: var(--tap-target); }
@keyframes club-dialog-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- Hover (mouse only). ---- */
@media (hover: hover) {
  .club-btn--secondary:hover { background: var(--paper-sunk); border-color: var(--ink); }
  .club-btn--primary:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sticker), 1px 1px 0 var(--sticker-edge); }
  .club-btn--quiet:hover { text-decoration-thickness: 3px; }
  .club-btn--destructive:hover { background: var(--cancelled-soft); }
  .club-btn[disabled]:hover, .club-btn[aria-disabled="true"]:hover { transform: none; background: var(--paper-sunk); box-shadow: none; }
  .club-chip:hover, .club-check:hover, .club-radio:hover { border-color: var(--ink); }
  a.club-list__row:hover, .club-table tbody tr:hover { background: var(--paper-sunk); }
  .club-back:hover { text-decoration: underline; text-underline-offset: 3px; }
  .club-sheet__close:hover { background: var(--paper-sunk); border-color: var(--field-edge); }
  a.club-ticket, a.club-tile { transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
  a.club-ticket:hover, a.club-tile:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--memphis-lilac); }
}

/* A small laptop (to 1199px): the promo panel gets a little less of the width (about 420px at 1024), and three across becomes two. */
@media (max-width: 1199px) {
  .club-promo { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-6); padding: var(--space-6) var(--space-5); }
  .club-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Split pages stack in phone order (details, then the action card); forms and columns go to one column. */
@media (max-width: 999px) {
  /* A narrow window: the navigation keeps one line between the two fixed slots. */
  .club-deskbar__inner { gap: var(--space-4); }
  .club-desknav { gap: var(--space-1); }
  .club-desknav__link { padding: 0 var(--space-3); }
  .club-split { grid-template-columns: minmax(0, 1fr); }
  .club-aside { position: static; }
  .club-form2, .club-cols, .club-cols--3 { grid-template-columns: minmax(0, 1fr); }
  .club-form2 > .club-form-foot { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .club-desknav__link, a.club-ticket, a.club-tile { transition: none; }
  a.club-ticket:hover, a.club-tile:hover, .club-btn--primary:hover { transform: none; }
  .club-sheet { animation: none; }
}