/* Aimlink CLUB on an upright iPad: the screens of apps/club/index.html, HTML in the app's own look (the colours and the
   tab bar are the GO app's, Figma "Aimlink GO AI Design System"; the layout follows GO's screens, wider).
   They are stand-ins built from what aimlink.ai says CLUB does until real screens exist: access for members and guests,
   QR check-in for GO users, equipment, lanes and events, and a complete activity record over time. Demo data: the
   Westside Shooting Club on a Tuesday evening, with the same people as in GO's feed and on the start page.
   The iPad's screen is 100cqw wide and about 143cqw tall. Parts switch on at a point in their clip with data-at
   (app-page.js runs the clock and adds .is-on; .t-in and .t-fade are in app-page-wide.css). Without the clock every
   screen shows its end state. */

@layer sections {
  .cs {
    --app-bg: var(--color-night); --app-card: var(--color-line-dark); --app-tile: var(--color-grey-2); --app-line: var(--color-grey-2); --app-text: var(--color-snow); --app-muted: var(--color-snow-2); --app-lime: var(--color-lime);
    position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
    font: 400 3.2cqw/1.3 var(--font-text); color: var(--app-text); background: var(--app-bg);
  }
  .cs .ui-ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .cs .ic { width: 2.1em; height: 2.1em; flex: none; margin: -0.5em; }
  .cs-top { display: flex; align-items: center; justify-content: space-between; padding: 3.6cqw 5.4cqw 0; font-size: 0.92em; font-weight: 600; }
  .cs-top-r { display: flex; align-items: center; gap: 0.4em; }
  .cs-bar { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 1.8cqw 5.4cqw 2cqw; }
  .cs-logo { display: flex; align-items: center; gap: 0.4em; font: 500 6.6cqw/1 var(--font-numeric); letter-spacing: 0.02em; }
  .cs-logo img { width: 1.2em; height: 1.2em; flex: none; margin-top: -0.2em; }
  .cs-who { display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; line-height: 1.2; text-align: right; }
  .cs-who small { display: block; color: var(--app-muted); }
  .cs-av { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; flex: none; border-radius: 50%; background: var(--app-tile); font-size: 0.74em; font-weight: 600; letter-spacing: 0.02em; }
  .cs-main { display: grid; align-content: start; gap: 2.2cqw; padding: 1cqw 4.8cqw 1.6cqw; min-height: 0; }
  .cs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; }
  .cs-h { font: 500 7cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .cs-sub { margin-top: 0.35em; color: var(--app-muted); }
  .cs-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.62em 1.1em; border-radius: 999px; background: var(--app-lime); color: var(--color-moss); font-size: 0.92em; font-weight: 600; white-space: nowrap; }
  .cs-btn .ic { width: 1.7em; height: 1.7em; margin: -0.4em 0 -0.4em -0.25em; }
  .cs-k, .cs-card-h { font-size: 0.78em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
  .cs-card { display: flex; flex-direction: column; min-height: 0; padding: 3cqw 3.4cqw; border-radius: 4.4cqw; background: var(--app-card); overflow: hidden; }
  .cs-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4cqw; }
  .cs-live { display: inline-flex; align-items: center; gap: 0.45em; color: var(--app-lime); }
  .cs-live i { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
  .cs-foot { display: flex; align-items: center; gap: 0.5em; margin-top: 1.2cqw; font-size: 0.9em; color: var(--app-muted); }
  .cs-foot .ic { width: 2.2em; height: 2.2em; margin: -0.5em; }
  .cs-foot-solo { margin: 0; }
  .cs-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 14cqw; padding: 2cqw 1cqw 0; border-radius: 5cqw 5cqw 0 0; background: var(--color-grey-2); }
  .cs-tabs span { display: grid; justify-items: center; align-content: start; gap: 0.6cqw; font-size: 0.74em; white-space: nowrap; }
  .cs-tabs .ic { width: 8.6cqw; height: 8.6cqw; margin: -1.8cqw; }
  .cs-tabs .is-on { color: var(--app-lime); }

  /* 1 · Open the door: the night's check-ins and the code to scan */
  .cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
  .cs-stats p { display: grid; justify-items: center; gap: 0.8cqw; padding: 1.8cqw 0 1.4cqw; border-radius: 4cqw; background: var(--app-tile); }
  .cs-stats b { font: 500 7.6cqw/0.85 var(--font-numeric); color: var(--app-lime); font-variant-numeric: tabular-nums; }
  .cs-stats b i { font-style: normal; color: var(--app-muted); font-size: 70%; }
  .cs-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 2cqw; padding: 0.9cqw 0; border-top: 1px solid var(--app-line); }
  .cs-log .nm { line-height: 1.2; }
  .cs-log .nm small { display: block; font-size: 0.8em; color: var(--app-muted); }
  .cs-log .tm { color: var(--app-muted); font-variant-numeric: tabular-nums; }
  .cs-log .ln { padding: 0.25em 0.75em; border-radius: 999px; background: var(--app-tile); font-size: 0.82em; font-weight: 600; }
  .cs-log li:last-child .ln { background: var(--app-lime); color: var(--app-bg); }
  .cs-qr { flex-direction: row; align-items: center; gap: 4cqw; padding: 2.4cqw 3.4cqw; }
  .cs-qr svg { display: block; width: 16cqw; height: 16cqw; flex: none; padding: 1.4cqw; border-radius: 2.2cqw; background: var(--color-paper); }
  .cs-qr svg path { fill: var(--color-night); }
  .cs-qr p { font: 500 5.2cqw/1.05 var(--font-numeric); letter-spacing: 0.01em; }
  .cs-qr small { display: block; margin-top: 0.6em; font: 400 3cqw/1.3 var(--font-text); color: var(--app-muted); }

  /* 2 · Run the range: lanes and equipment */
  .cs-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8cqw; }
  .cs-lane { display: flex; flex-direction: column; justify-content: space-between; min-height: 17cqw; padding: 1.8cqw 2cqw; border-radius: 3cqw; background: var(--app-tile); color: var(--app-text); }
  .cs-lane b { font: 500 5.6cqw/1 var(--font-numeric); }
  .cs-lane .cs-user { display: flex; align-items: center; gap: 0.45em; font-size: 0.8em; line-height: 1.15; }
  .cs-lane .cs-user .cs-av { width: 5cqw; height: 5cqw; background: rgb(0 0 0 / 0.28); }
  .cs-lane .cs-free { display: none; font-size: 0.8em; font-weight: 600; }
  .cs-lane.is-free { background: transparent; box-shadow: inset 0 0 0 1px var(--app-line); color: var(--app-muted); }
  .cs-lane.is-free .cs-user { display: none; }
  .cs-lane.is-free .cs-free { display: inline; }
  .cs-lane.is-guest .cs-av { background: var(--color-yellow); color: var(--app-bg); }
  .cs-gear li { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; padding: 1.7cqw 0; border-top: 1px solid var(--app-line); }
  .cs-gear li span:last-child { color: var(--app-muted); text-align: right; }
  .cs-gear b { font-weight: 600; }

  /* 3 · Keep the record: two weeks of check-ins */
  .cs-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 1.4cqw; height: 36cqw; padding-top: 1cqw; }
  .cs-bars i { display: block; height: calc(var(--v) / 16 * 100%); min-height: 1cqw; border-radius: 1cqw 1cqw 0.3cqw 0.3cqw; background: #3a4450; transform-origin: 50% 100%; }
  .cs-bars i.is-today { background: var(--app-lime); }
  .cs-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 1.4cqw; font-size: 0.78em; color: var(--app-muted); text-align: center; }
  .cs-days .is-today { color: var(--app-text); font-weight: 600; }
  .cs-days-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; padding: 1.6cqw 0; border-top: 1px solid var(--app-line); }
  .cs-days-rows b { font: 500 6.4cqw/1 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .cs-days-rows small { display: block; color: var(--app-muted); }

  /* 4 · Bring the club together: events and the ranking */
  .cs-event { display: grid; gap: 1cqw; padding: 3cqw 3.4cqw; border-radius: 4.4cqw; background: var(--app-card); }
  .cs-event h4 { font: 500 6.6cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .cs-event p { color: var(--app-muted); }
  .cs-badge { justify-self: start; padding: 0.35em 0.9em 0.25em; border-radius: 999px; background: var(--app-lime); color: var(--color-moss); font-size: 0.74em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .cs-badge.is-soft { background: var(--app-tile); color: var(--app-text); }
  .cs-rank li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2.4cqw; padding: 1.8cqw 0; border-top: 1px solid var(--app-line); }
  .cs-rank i { display: grid; place-items: center; width: 6.6cqw; height: 6.6cqw; padding-top: 0.4cqw; border-radius: 50%; background: var(--app-tile); font: 500 4.4cqw/1 var(--font-numeric); font-style: normal; }
  .cs-rank li:first-child i { background: #C9A400; color: #1b1500; }
  .cs-rank b { font: 500 6.6cqw/1 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .cs-rank b small { font-size: 60%; }

  /* ── The clock, CLUB's own parts ── */
  .is-timed .t-bar[data-at] { transform: scaleY(0); transition: transform 520ms var(--ease-out); }
  .is-timed .t-bar[data-at].is-on { transform: none; }
  .is-timed .cs-lane.has-user[data-at] { transition: background-color 420ms var(--ease-out), color 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
  .is-timed .cs-lane.has-user[data-at]:not(.is-on) { background: transparent; box-shadow: inset 0 0 0 1px var(--app-line); color: var(--app-muted); }
  .is-timed .cs-lane.has-user[data-at]:not(.is-on) .cs-user { display: none; }
  .is-timed .cs-lane.has-user[data-at]:not(.is-on) .cs-free { display: inline; }
}