/* ═══════════════════════════════════════════════════════════════
   Pickleball Manager · Rally — the app shell
   Concept A "Floodlight", approved 11 Sep 2026.
   Every colour is a token from brand.pickleball.css. No raw hex.
   Centre-aligned; list rows with a value on the right are the one
   allowed exception. Nothing tappable under 44px.
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;min-height:100%;
  background:var(--t-bg);color:var(--t-text);
  font-family:var(--t-sans);font-size:16px;line-height:1.55;
  text-align:center;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--t-serif);letter-spacing:-.03em;line-height:1.08;margin:0;
  text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--t-action);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;top:0;inset-inline-start:0;z-index:200;background:var(--t-action);
  color:var(--t-action-ink);padding:0;border-radius:0 0 12px 0;font-weight:800}
.skip:focus{width:auto;height:auto;min-height:44px;display:inline-flex;align-items:center;
  clip-path:none;padding:12px 18px}

/* ── the app frame ──────────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100svh;
  padding-block-end:env(safe-area-inset-bottom)}
.boot{min-height:70svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;color:var(--t-dim);font-weight:700;font-size:13px}
.boot-mark{width:34px;height:34px;border-radius:50%;border:3px solid var(--t-line);
  border-top-color:var(--t-action);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

main{flex:1;min-height:0;display:flex;flex-direction:column}
.pad{padding-inline:14px}
.wrap{width:100%;max-width:var(--col,560px);margin-inline:auto}

/* ── brand bar ──────────────────────────────────────────────── */
.bbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 6px) 12px 8px;
  background:color-mix(in srgb,var(--t-bg) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--t-line)}
.bbar .bl{display:flex;align-items:center;gap:8px;min-width:0;
  font:800 15px var(--t-serif);letter-spacing:-.02em;
  background:none;border:0;padding:6px 2px;min-height:44px;cursor:pointer;color:var(--t-text)}
.bbar .bl svg{color:var(--t-action);width:19px;height:19px;flex:none}
.bbar .bl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbar .br{margin-inline-start:auto;display:flex;align-items:center;gap:3px;flex:none}
.lang{display:flex;border:1px solid var(--t-line);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;padding:0 9px;height:44px;min-width:44px;
  font:700 11.5px var(--t-sans);color:var(--t-dim);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--t-action);color:var(--t-action-ink)}
.icb{background:none;border:0;width:44px;height:44px;border-radius:11px;color:var(--t-muted);
  display:grid;place-items:center;cursor:pointer;font-size:16px}
.icb:hover{background:var(--soft)}
@media(max-width:349px){.bbar .bl{font-size:13.5px}.lang button{min-width:44px;padding:0 5px}}

/* ── trial strip ────────────────────────────────────────────── */
.tstrip{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--t-deep) 80%,transparent),
             color-mix(in srgb,var(--t-action) 14%,transparent));
  border-block-end:1px solid color-mix(in srgb,var(--t-action) 26%,transparent);
  font:700 11px var(--t-sans);color:var(--t-muted);flex-wrap:wrap}
.tstrip b{font:800 11.5px var(--t-sans);color:var(--t-action)}
.tstrip .gauge{width:48px;height:7px;border-radius:99px;background:var(--t-field);
  border:1px solid var(--t-line);overflow:hidden;flex:none}
.tstrip .gauge i{display:block;height:100%;
  background:linear-gradient(90deg,var(--t-accent),var(--t-action));transition:width .5s ease}
.tstrip a{min-height:44px;display:inline-flex;align-items:center;color:var(--t-action);
  font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ── the live rail · Concept A puts it under the brand bar ──── */
.rail{display:flex;align-items:stretch;background:var(--t-field);
  border-block-end:1px solid var(--t-line)}
.rail .rc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-height:52px;padding:7px 4px;
  border-inline-end:1px solid var(--t-line);background:none;border-block:0;border-inline-start:0;
  cursor:pointer;color:inherit;font:inherit}
.rail .rc:last-child{border-inline-end:0}
.rail .rc:active{background:var(--soft)}
.rail .rc b{font:800 15px var(--t-serif);color:var(--t-text);line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
.rail .rc b.hi{color:var(--t-action)}
.rail .rc b.cy{color:var(--t-accent)}
.rail .rc>span{font:700 8.5px var(--t-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-dim);line-height:1.2}

/* ── date strip ─────────────────────────────────────────────── */
.dstrip{display:flex;gap:6px;overflow-x:auto;padding:11px 12px 9px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.dstrip::-webkit-scrollbar{display:none}
.dstrip button{flex:none;min-width:48px;min-height:50px;border-radius:11px;
  border:1px solid var(--t-line);background:transparent;color:var(--t-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 7px;cursor:pointer;scroll-snap-align:center}
.dstrip button>em{font-style:normal;font:700 8.5px var(--t-sans);letter-spacing:.09em;
  text-transform:uppercase}
.dstrip button>b{font:800 15px var(--t-serif);line-height:1;font-variant-numeric:tabular-nums}
.dstrip button[aria-pressed="true"]{background:var(--t-action);border-color:var(--t-action);
  color:var(--t-action-ink)}
.dstrip button[aria-pressed="true"]>b{color:var(--t-action-ink)}
.dstrip button.today:not([aria-pressed="true"]){border-color:
  color-mix(in srgb,var(--t-action) 45%,transparent);color:var(--t-text)}

/* ── the board ──────────────────────────────────────────────── */
.board{padding:6px 12px 0}
.board svg{width:100%;height:auto;overflow:visible}
.pl-ap{fill:var(--apron)}
.pl-court{fill:var(--court)}
.pl-k{fill:var(--courtk)}
.pl-l{fill:none;stroke:var(--cl);stroke-width:1.6;mix-blend-mode:overlay;stroke-linecap:round;
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
.drawn .pl-l{animation:pdraw 1.2s cubic-bezier(.3,.9,.3,1) forwards}
.drawn .pl-l.d2{animation-delay:.1s}
.drawn .pl-l.d3{animation-delay:.2s}
.drawn .pl-l.d4{animation-delay:.3s}
@keyframes pdraw{to{stroke-dashoffset:0}}
.pl-net{stroke:var(--net,#F6FBFF);stroke-width:2.4;fill:none;opacity:0;
  transition:opacity .4s ease .7s}
.drawn .pl-net{opacity:1}
.pl-fill{opacity:0;transition:opacity .3s ease}
.pl-fill.on{opacity:.92}
.f-booked{fill:var(--c-booked)}
.f-open_play{fill:var(--c-open)}
.f-lesson{fill:var(--c-lesson)}
.f-block{fill:var(--t-dim)}
/* the name sits ON a court, so its ink belongs to the court's colour,
   not to whatever identity colour the venue chose */
.pl-who,.pl-sub{fill:var(--c-ink,#0C1405);text-anchor:middle;opacity:0;
  transition:opacity .25s ease}
.pl-who{font:800 6.8px var(--t-sans);letter-spacing:-.01em}
.pl-sub{font:700 6px var(--t-sans)}
.pl-who.on{opacity:1}
.pl-sub.on{opacity:.82}
.pl-n{fill:var(--t-dim);font:800 8.5px var(--t-sans);text-anchor:middle;letter-spacing:.1em;
  opacity:0;transition:opacity .4s ease .85s}
.drawn .pl-n{opacity:1}
.pl-hit{fill:transparent;cursor:pointer}
.pl-hit:focus-visible{outline:3px solid var(--t-action);outline-offset:2px}

/* ── the time slider ────────────────────────────────────────── */
.timer{padding:2px 14px 0}
.scrub{-webkit-appearance:none;appearance:none;background:transparent;height:44px;width:100%;
  display:block;margin:0;cursor:grab}
.scrub::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:var(--t-field);
  border:1px solid var(--t-line)}
.scrub::-moz-range-track{height:5px;border-radius:99px;background:var(--t-field);
  border:1px solid var(--t-line)}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--t-action);border:4px solid var(--t-bg);margin-top:-11px;
  box-shadow:0 3px 13px color-mix(in srgb,var(--t-action) 55%,transparent)}
.scrub::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--t-action);
  border:4px solid var(--t-bg)}
.tks{display:flex;justify-content:space-between;font:700 9.5px var(--t-sans);
  color:var(--t-dim);margin-block-start:-7px;font-variant-numeric:tabular-nums}
.atrow{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px 0;
  font:700 11.5px var(--t-sans);color:var(--t-muted);flex-wrap:wrap}
.atrow em{font-style:normal;font:800 8.5px var(--t-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-dim)}
.atrow b{font:800 14px var(--t-serif);color:var(--t-action);font-variant-numeric:tabular-nums}
.atrow .nowbtn{min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--t-line);
  background:transparent;color:var(--t-muted);font:800 11px var(--t-sans);cursor:pointer}
.atrow .nowbtn:disabled{opacity:.4;cursor:default}

/* ── legend ─────────────────────────────────────────────────── */
.key{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 12px 4px;
  font:700 10.5px var(--t-sans);color:var(--t-dim)}
.key>span{display:inline-flex;align-items:center;gap:6px}
.key i{width:10px;height:10px;border-radius:3px;font-style:normal;flex:none}
.k-booked{background:var(--c-booked)}
.k-open_play{background:var(--c-open)}
.k-lesson{background:var(--c-lesson)}
.k-free{background:transparent;border:1.5px solid var(--t-dim)}

/* ── list rows (value on the right: the allowed exception) ──── */
.rows{padding:6px 12px 14px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);
  text-align:start;min-height:56px;width:100%;cursor:pointer;color:inherit;font:inherit}
.row:active{background:var(--soft)}
/* flex:1 so the text sits beside its tick rather than flying to the far
   edge: space-between alone looks right on a 390px row and pulls apart
   on a 700px one. */
.row .rl{min-width:0;flex:1 1 auto}
.row .rl b{display:block;font:800 12.5px var(--t-sans);color:var(--t-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rl i{display:block;font-style:normal;font:700 10.5px var(--t-sans);color:var(--t-dim);
  margin-block-start:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rt{font:800 10.5px var(--t-sans);color:var(--t-action);white-space:nowrap;flex:none}
.row .rt.cy{color:var(--t-accent)}
.row .rt.dim{color:var(--t-dim)}

/* ── states ─────────────────────────────────────────────────── */
.state{padding:34px 22px;display:flex;flex-direction:column;align-items:center;gap:12px}
.state h3{font-size:19px;font-weight:800}
.state p{color:var(--t-muted);font-size:14px;max-width:34ch}
.state .mk{width:44px;height:44px;color:var(--t-dim)}
.state.bad .mk{color:var(--t-bad)}
.skel{border-radius:12px;background:linear-gradient(90deg,var(--t-field),
  color-mix(in srgb,var(--t-text) 7%,var(--t-field)),var(--t-field));
  background-size:220% 100%;animation:sweep 1.3s ease-in-out infinite}
@keyframes sweep{to{background-position:-220% 0}}
.skel-board{height:190px;margin:10px 12px}
.skel-row{height:56px;margin:0 12px 8px}

/* ── buttons ────────────────────────────────────────────────── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  border-radius:var(--t-radius);font:800 14.5px var(--t-sans);border:1px solid transparent;
  cursor:pointer;padding:13px 18px;width:100%;
  transition:transform .14s ease,filter .2s ease}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.b1{background:linear-gradient(180deg,var(--t-action),var(--t-action-2));
  color:var(--t-action-ink);
  box-shadow:0 8px 24px color-mix(in srgb,var(--t-action) 24%,transparent)}
.b2{border-color:var(--t-line);color:var(--t-text);background:transparent}
.b2:active{background:var(--soft)}
.b3{border-color:color-mix(in srgb,var(--t-bad) 45%,transparent);color:var(--t-bad);
  background:transparent}

/* ── the tab bar ────────────────────────────────────────────── */
.tabs{position:sticky;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
  border-block-start:1px solid var(--t-line);background:var(--t-field);
  padding:7px 0 calc(env(safe-area-inset-bottom) + 9px)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:48px;font:800 8.5px var(--t-sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--t-dim);line-height:1.2}
.tabs a svg{width:19px;height:19px}
.tabs a[aria-current="page"]{color:var(--t-action)}

/* ── the booking sheet ──────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim,rgba(4,7,10,.72));
  opacity:0;transition:opacity .25s ease;-webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px)}
.scrim.on{opacity:1}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:61;background:var(--t-bg);
  border-block-start:1px solid var(--t-line);border-radius:20px 20px 0 0;
  padding:8px 14px calc(env(safe-area-inset-bottom) + 18px);
  max-height:92svh;overflow-y:auto;text-align:center;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1);
  max-width:var(--col,560px);margin-inline:auto;
  box-shadow:0 -18px 50px rgba(0,0,0,.45)}
.sheet.on{transform:none}
.grab{width:40px;height:4px;border-radius:99px;background:var(--t-line);margin:0 auto 12px}
.sheet .sub{font:700 9.5px var(--t-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-accent);margin-block-end:5px}
.sheet h3{font-size:19px;font-weight:800;margin-block-end:14px}
.fld{border:1px solid var(--t-line);border-radius:11px;background:var(--t-field);
  padding:8px 12px;margin-block-end:8px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;text-align:start;min-height:50px;width:100%;
  cursor:pointer;color:inherit;font:inherit}
.fld>em{font-style:normal;font:700 9.5px var(--t-sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--t-dim);flex:none}
.fld>b{font:800 13px var(--t-sans);color:var(--t-text);text-align:end;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fld>b.dim{color:var(--t-dim);font-weight:700}
.fld input{background:none;border:0;text-align:end;font:800 13px var(--t-sans);
  color:var(--t-text);min-width:0;width:100%;padding:0;min-height:44px}
.fld input[type="date"]{text-align:end}
.fld input::placeholder{color:var(--t-dim);font-weight:700}
.fld input:focus{outline:none}
.segs{display:flex;gap:6px;margin-block-end:8px}
.segs button{flex:1;min-width:0;min-height:46px;border-radius:10px;border:1px solid var(--t-line);
  background:var(--t-field);color:var(--t-dim);font:800 11.5px var(--t-sans);padding:0 4px;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segs button[aria-pressed="true"]{background:var(--t-action);border-color:var(--t-action);
  color:var(--t-action-ink)}
.ptot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;
  border-radius:11px;margin-block:4px 10px;text-align:start;
  background:color-mix(in srgb,var(--t-action) 12%,var(--t-field));
  border:1px solid color-mix(in srgb,var(--t-action) 26%,transparent)}
.ptot>span{font:700 11px var(--t-sans);color:var(--t-muted)}
.ptot>b{font:800 17px var(--t-serif);color:var(--t-action);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.sheet .btn+.btn{margin-block-start:8px}
.sheet .err{margin-block:2px 10px;padding:10px 12px;border-radius:11px;text-align:start;
  background:color-mix(in srgb,var(--t-bad) 13%,var(--t-field));
  border:1px solid color-mix(in srgb,var(--t-bad) 40%,transparent);
  color:var(--t-bad);font:700 12.5px var(--t-sans)}
.pick-list{max-height:44svh;overflow-y:auto;margin-block-end:8px;
  display:flex;flex-direction:column;gap:6px}
.pick-list .row{min-height:52px}

/* ── toast ──────────────────────────────────────────────────── */
#toast{position:fixed;inset-block-end:calc(env(safe-area-inset-bottom) + 78px);
  inset-inline:14px;z-index:90;background:var(--t-text);color:var(--t-bg);border-radius:12px;
  padding:13px 16px;font:700 13.5px var(--t-sans);opacity:0;transform:translateY(10px);
  pointer-events:none;transition:opacity .22s,transform .22s;max-width:420px;margin-inline:auto}
#toast.on{opacity:1;transform:none}
#toast.bad{background:var(--t-bad);color:var(--t-action-ink)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .pl-l{stroke-dashoffset:0!important}
  .pl-net{opacity:1!important}
  .pl-n{opacity:1!important}
}

/* ═══ Wider than a phone ════════════════════════════════════════
   The phone is the design and it stays the design: the same screens,
   the same order, the same words. What changes with width is only how
   much room they get, and where the five destinations live.

   One variable does the widening — --col — so a breakpoint is one
   number, not a list of rules to keep in step.

   620  a big phone and a small tablet: the column simply centres.
   768  iPad and the counter tablet: the bottom bar becomes a rail down
        the left, because a thumb no longer reaches the bottom of the
        screen and the desk's hand rests at the side. Sheets stop
        sliding up from an edge that is now far away and become what
        they always were on a wide screen — a dialog in the middle.
   1100 desktop: lists run in two columns rather than one long ribbon
        down the middle of an empty page.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:620px){
  .app{--col:560px}
  /* width:100% matters everywhere here: an auto inline margin on a flex
     or grid item overrides stretch and makes it shrink-wrap, so without
     it the search field and the action row collapse to their content
     instead of filling the column. */
  .board,.timer,.rows,.dstrip,.key,.atrow,.segs.pad,.search,.backrow,
  .state,.chips,.fabrow{
    width:100%;max-width:var(--col);margin-inline:auto}
  /* centred, like everything else, once there is room not to scroll */
  .chips{justify-content:center;overflow-x:visible;flex-wrap:wrap}
  .dstrip{justify-content:center}
  /* width:100% matters: once .app is a grid (768 and up) an auto inline
     margin makes a grid item shrink-wrap its content, and the live rail
     would sit as a narrow pill instead of spanning the column. */
  .rail{width:100%;max-width:var(--col);margin-inline:auto;
    border-inline:1px solid var(--t-line)}
}

@media(min-width:768px){
  /* A screen that carries no bottom bar and no rail — the trial, the lock,
     sign-in — is the whole window. Without this it lands in the 104px
     navigation column and reads as a sliver. */
  .app.solo{display:flex;flex-direction:column}

  .app{
    --col:700px;
    --nav:104px;
    display:grid;
    grid-template-columns:var(--nav) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;
    padding-block-end:0;
  }
  .bbar    {grid-column:2;grid-row:1}
  .trialbar{grid-column:2;grid-row:2}
  .rail    {grid-column:2;grid-row:3}
  main     {grid-column:2;grid-row:4}

  /* the five destinations, down the left, labels kept */
  .tabs{
    grid-column:1;grid-row:1 / -1;
    position:sticky;top:0;align-self:start;height:100dvh;
    grid-template-columns:1fr;grid-auto-rows:max-content;align-content:start;
    gap:4px;padding:14px 10px calc(env(safe-area-inset-bottom) + 14px);
    border-block-start:0;border-inline-end:1px solid var(--t-line);
  }
  .tabs a{min-height:66px;gap:7px;border-radius:13px;font-size:9px}
  .tabs a svg{width:23px;height:23px}
  .tabs a[aria-current="page"]{background:var(--soft)}

  /* room to breathe, now that there is room */
  .rail .rc{min-height:64px}
  .rail .rc b{font-size:18px}
  .rail .rc>span{font-size:9px}

  /* a sheet on a wide screen is a dialog, not a drawer */
  .sheet{
    inset:auto;top:50%;left:50%;
    width:min(560px,92vw);max-width:none;margin:0;
    max-height:86dvh;border-radius:18px;border:1px solid var(--t-line);
    transform:translate(-50%,-42%);
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .sheet.on{transform:translate(-50%,-50%)}
  .sheet .grab{display:none}
  .pick-list{max-height:46dvh}
}

@media(min-width:1100px){
  .app{--col:860px;--nav:132px}
  .tabs a{min-height:62px;font-size:10px;flex-direction:row;gap:10px;
    justify-content:flex-start;padding-inline:14px}
  /* Two columns, because one ribbon of cards down the middle of a wide
     page reads as an empty page. The board, the day strip and the time
     control stay single — they are one object, not a list. */
  .rows{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .rows>.state{grid-column:1 / -1}
  /* A row carrying a proportional bar is a chart, not a list item: split
     across two columns the bars sit on two different scales and stop
     comparing. Money's "where from" therefore stays one column. */
  .rows:has(.row.bar){grid-template-columns:1fr}
}

/* ═══ Members ═══════════════════════════════════════════════════ */
.search{padding:11px 12px 6px}
.search input{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--t-line);
  background:var(--t-field);color:var(--t-text);padding:0 14px;font:700 14px var(--t-sans);
  text-align:center}
.search input::placeholder{color:var(--t-dim);font-weight:700}
.search input:focus{outline:none;border-color:color-mix(in srgb,var(--t-action) 55%,transparent)}

.chips{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:0 13px;border-radius:999px;border:1px solid var(--t-line);background:transparent;
  color:var(--t-muted);font:700 12px var(--t-sans);cursor:pointer;white-space:nowrap}
.chips button>i{font-style:normal;font:800 11px var(--t-sans);color:var(--t-dim);
  font-variant-numeric:tabular-nums}
.chips button[aria-pressed="true"]{background:var(--t-action);border-color:var(--t-action);
  color:var(--t-action-ink)}
.chips button[aria-pressed="true"]>i{color:var(--t-action-ink);opacity:.72}

.row.static{cursor:default}
.row .rt.bad{color:var(--t-bad)}
.tally{padding:2px 12px 14px;font:700 11px var(--t-sans);color:var(--t-dim)}

.fabrow{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 12px 12px;
  background:linear-gradient(180deg,transparent,var(--t-bg) 42%)}
.fab-btn{flex:1;min-height:52px;border-radius:var(--t-radius);border:1px solid var(--t-line);
  background:var(--t-card);color:var(--t-text);font:800 13.5px var(--t-sans);cursor:pointer;
  padding:0 12px}
.fab-btn.primary{background:linear-gradient(180deg,var(--t-action),var(--t-action-2));
  border-color:transparent;color:var(--t-action-ink);
  box-shadow:0 8px 22px color-mix(in srgb,var(--t-action) 22%,transparent)}

/* ── one member ─────────────────────────────────────────────── */
.backrow{padding:8px 8px 0;display:flex}
.backbtn{min-height:44px;padding:0 12px;border:0;background:none;color:var(--t-muted);
  font:800 13px var(--t-sans);cursor:pointer;border-radius:11px}
.backbtn:active{background:var(--soft)}
.who{padding:6px 16px 14px}
.who h2{font-size:clamp(23px,6.4vw,30px);font-weight:800}
.who .phone{font:700 14px var(--t-sans);color:var(--t-accent);margin-block-start:6px;
  font-variant-numeric:tabular-nums}
.who .since{font:700 11.5px var(--t-sans);color:var(--t-dim);margin-block-start:5px}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 12px}
.three.tight{padding:12px}
.three>div{border:1px solid var(--t-line);border-radius:13px;background:var(--t-card);
  padding:12px 6px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.three>div>span{font:700 8.5px var(--t-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-dim);line-height:1.25}
.three>div>b{font:800 clamp(17px,5vw,21px) var(--t-serif);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--t-text);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.three>div>b.cy{color:var(--t-accent)}
.three>div>b.hi{color:var(--t-action)}
.three>div>b.bad{color:var(--t-bad)}
.three>div>b.dim{color:var(--t-dim)}

.block{padding-block-start:6px}
.blockhead{font:800 10px var(--t-sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t-dim);padding:10px 12px 2px}
.emptyline{padding:14px 12px;font:700 12.5px var(--t-sans);color:var(--t-dim)}
.pad.bottom{padding-block:8px 26px}

/* ── the importer ───────────────────────────────────────────── */
.lead{font-size:clamp(21px,5.8vw,26px);font-weight:800;margin-block-end:8px}
.hint{font:400 13.5px var(--t-sans);color:var(--t-muted);max-width:40ch;margin-inline:auto;
  margin-block-end:14px;line-height:1.55}
.paste{width:100%;border-radius:13px;border:1px solid var(--t-line);background:var(--t-field);
  color:var(--t-text);padding:13px 14px;font:600 13.5px/1.6 var(--t-sans);text-align:start;
  resize:vertical;margin-block-end:10px;min-height:150px}
.paste::placeholder{color:var(--t-dim)}
.paste:focus{outline:none;border-color:color-mix(in srgb,var(--t-action) 55%,transparent)}
.st-new{border-color:color-mix(in srgb,var(--t-action) 42%,transparent)}
.st-match{opacity:.72}
.st-dupe,.st-skip{opacity:.5}

/* ═══ Passes · Concept C "Two lists" ════════════════════════════ */
.segs.pad{padding-inline:12px;margin-block-end:4px}
.segs button[aria-pressed="true"]{background:var(--t-action);border-color:var(--t-action);
  color:var(--t-action-ink)}
.row[aria-pressed="true"]{border-color:var(--t-action);background:var(--soft)}
.row.alert{border-color:color-mix(in srgb,var(--t-warn) 48%,transparent)}
.row.gone{opacity:.5}
.row .rt.warn{color:var(--t-warn)}
.tot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:4px 12px 14px;padding:11px 13px;border-radius:12px;text-align:start;
  background:color-mix(in srgb,var(--t-action) 12%,var(--t-field));
  border:1px solid color-mix(in srgb,var(--t-action) 26%,transparent)}
.tot span{font:700 11px var(--t-sans);color:var(--t-muted)}
.tot b{font:800 15px var(--t-serif);color:var(--t-action);font-variant-numeric:tabular-nums;
  white-space:nowrap}
a.row{text-decoration:none}
a.row .rt svg{width:17px;height:17px;color:var(--t-dim)}
.fld input[type="number"]{-moz-appearance:textfield}
.fld input[type="number"]::-webkit-outer-spin-button,
.fld input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ══ screen 5 · open play, Concept A "The court" ═══════════════ */
.sessline{padding:10px 12px 0;text-align:center;font:700 11.5px var(--t-sans);
  color:var(--t-muted);letter-spacing:.01em}

.mini{padding:8px 12px 4px}
.playcourt{display:block;width:100%;max-width:520px;margin-inline:auto;height:auto}
.pl-seat{fill:var(--t-action-ink);text-anchor:middle;font:800 7.4px var(--t-sans);
  opacity:0;transition:opacity .25s ease;letter-spacing:-.01em}
.pl-seat.on{opacity:1}
:root[data-theme="light"] .pl-seat{fill:var(--t-action-ink)}

.big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:calc(100% - 24px);margin:6px 12px 4px;min-height:62px;border-radius:var(--t-radius);
  border:1px solid transparent;cursor:pointer;padding:10px 14px;
  background:linear-gradient(180deg,var(--t-action),var(--t-action-2));color:var(--t-action-ink);
  box-shadow:0 10px 26px color-mix(in srgb,var(--t-action) 24%,transparent)}
.big b{font:800 15px var(--t-sans);letter-spacing:-.01em}
.big i{font-style:normal;font:700 11px var(--t-sans);opacity:.76;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.big:disabled{background:var(--t-card);border-color:var(--t-line);color:var(--t-dim);
  box-shadow:none;cursor:default}

.grouphead{padding:10px 12px 0;text-align:center;font:800 10px var(--t-sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.grouphead.cy{color:var(--t-accent)}

.row.q{gap:12px}
.row .n{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--t-field);border:1px solid var(--t-line);
  font:800 11.5px var(--t-sans);color:var(--t-muted);font-variant-numeric:tabular-nums}
.row.next .n{background:var(--t-action);border-color:transparent;color:var(--t-action-ink)}
.row.next{border-color:color-mix(in srgb,var(--t-action) 46%,var(--t-line))}
.row .rt.hi{color:var(--t-action)}

.skel-court{height:186px;margin:10px 12px}

/* ══ screen 7 · money ══════════════════════════════════════════ */
.bignum{padding:16px 12px 6px}
.bignum b{display:block;font:800 clamp(34px,10vw,46px) var(--t-serif);color:var(--t-action);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bignum span{display:block;margin-top:8px;font:700 10px var(--t-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-dim)}

.twoup{display:flex;gap:8px;padding:14px 12px 6px}
.twoup .half{flex:1;min-width:0;border:1px solid var(--t-line);border-radius:var(--t-radius);
  background:var(--t-card);padding:14px 10px}
/* Two seven-figure đồng amounts side by side do not fit a 390px phone
   at 5.4vw — they were being clipped to "4.175.0… đ", which is worse
   than a smaller number. Shrink with the viewport and let the figure
   break rather than truncate. */
.twoup b{display:block;font:800 clamp(15px,4.3vw,25px) var(--t-serif);color:var(--t-text);
  line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  overflow-wrap:anywhere}
.twoup b.cy{color:var(--t-accent)}
.twoup span{display:block;margin-top:7px;font:700 9px var(--t-sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--t-dim)}

.grouphead.warn{color:var(--t-warn)}
.levelled{padding:8px 16px 14px;font:700 12.5px var(--t-sans);color:var(--t-good)}
.row.gapline b{font:800 17px var(--t-serif);color:var(--t-warn);font-variant-numeric:tabular-nums}
.row.gapline{border-color:color-mix(in srgb,var(--t-warn) 40%,var(--t-line))}
.row.alert{border-color:color-mix(in srgb,var(--t-warn) 40%,var(--t-line))}

.row.bar{position:relative;overflow:hidden}
.fillbar{position:absolute;inset-block:0;inset-inline-start:0;width:var(--p);
  background:color-mix(in srgb,var(--t-action) 13%,transparent);pointer-events:none}
.row.bar .rl,.row.bar .rt{position:relative}

.chips .chip{flex:none;display:inline-flex;align-items:baseline;gap:7px;min-height:44px;
  padding:0 13px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card)}
.chips .chip em{font-style:normal;font:700 10px var(--t-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-dim)}
.chips .chip b{font:800 12.5px var(--t-sans);color:var(--t-text);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.week{display:flex;gap:5px;padding:6px 12px 16px;align-items:flex-end;
  overflow-x:auto;scrollbar-width:none}
.week::-webkit-scrollbar{display:none}
.wday{flex:1 0 46px;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:96px;border:1px solid transparent;border-radius:11px;background:transparent;
  color:inherit;font:inherit;cursor:pointer;padding:6px 2px}
.wday .col{width:100%;height:52px;display:flex;align-items:flex-end;justify-content:center}
.wday .col i{display:block;width:72%;border-radius:4px;background:var(--t-field);
  border:1px solid var(--t-line)}
.wday.on{border-color:var(--t-line);background:var(--t-card)}
.wday.on .col i{background:linear-gradient(180deg,var(--t-action),var(--t-action-2));
  border-color:transparent}
.wday em{font-style:normal;font:700 9px var(--t-sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-dim)}
.wday b{font:800 9.5px var(--t-sans);color:var(--t-muted);font-variant-numeric:tabular-nums;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wday.on b{color:var(--t-text)}

.skel-big{height:104px;margin:14px 12px 8px}
.row .rl.wrapline i{white-space:normal;overflow:visible;line-height:1.45}

/* ══ screen 8 · settings ═══════════════════════════════════════ */
.screenhead{padding:6px 16px 4px;font:800 22px var(--t-serif);letter-spacing:-.02em}
.fabrow.static{position:static;background:none;padding:2px 12px 14px}
.capnote{margin:2px 12px 14px;padding:12px 14px;border-radius:var(--t-radius);
  background:var(--t-field);border:1px solid var(--t-line)}
.capnote b{display:block;font:800 12.5px var(--t-sans);color:var(--t-text)}
.capnote i{display:block;font-style:normal;font:700 11.5px var(--t-sans);
  color:var(--t-accent);margin-top:4px}
.twotime{display:flex;gap:8px;width:100%}
.twotime input{flex:1;min-width:0}
.row.gone .rl b{color:var(--t-dim)}

/* ══ screen 9 · coaches and pay ════════════════════════════════ */
.row .rt2{flex:none;text-align:end;min-width:0}
.row .rt2 b{display:block;font:800 12.5px var(--t-sans);color:var(--t-action);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.row .rt2 i{display:block;font-style:normal;font:700 9.5px var(--t-sans);
  color:var(--t-dim);margin-top:2px;white-space:nowrap}
.row .rt2 i.warn{color:var(--t-warn)}
.row .rt2 i.cy{color:var(--t-accent)}
.twoup .half b.warn{color:var(--t-warn)}
.levelled.dim{color:var(--t-dim)}
.slipnum{margin:2px 0 10px;font:800 26px var(--t-serif);color:var(--t-action);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ══ screen 6 · check-in ═══════════════════════════════════════ */
.scanstrip{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;width:calc(100% - 24px);margin:10px 12px 4px;min-height:96px;
  border-radius:var(--t-radius);border:1px solid var(--t-line);
  background:linear-gradient(160deg,var(--panel2,var(--t-deep)),var(--t-field));
  overflow:hidden;color:inherit;font:inherit;cursor:pointer;padding:12px 14px}
.scanstrip.off{cursor:default}
.scanstrip b{font:800 12.5px var(--t-sans);color:var(--t-text)}
.scanstrip i{font-style:normal;font:700 11px var(--t-sans);color:var(--t-dim);
  max-width:30ch;text-align:center}
.scanstrip.live{min-height:168px;padding:0;cursor:default}
.scanstrip.live video{width:100%;height:168px;object-fit:cover;display:block}
.scanstrip .beam{position:absolute;inset-inline:26px;top:50%;height:2px;
  background:var(--t-action);box-shadow:0 0 14px var(--t-action);opacity:.8}
.scanstrip .stopcam{position:absolute;top:8px;inset-inline-end:8px;min-height:36px;
  padding:0 12px;border-radius:999px;border:1px solid var(--t-line);
  background:color-mix(in srgb,var(--t-bg) 76%,transparent);color:var(--t-text);
  font:800 11px var(--t-sans);cursor:pointer}
.scanstrip .scanmsg{position:absolute;inset-inline:0;bottom:8px;text-align:center;
  font:800 11px var(--t-sans);color:var(--t-action);
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

.row .tick{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 13px var(--t-sans);background:var(--t-field);border:1px solid var(--t-line);
  color:var(--t-dim)}
.row .tick.on{background:var(--t-good);border-color:transparent;color:var(--t-action-ink)}
.row.done .rl b{color:var(--t-muted)}
.row .rt2 b.good{color:var(--t-good)}
.row .rl i b.owe{font-weight:800;color:var(--t-warn)}

/* ══ screen 10 · tournaments ═══════════════════════════════════ */
.champion{margin:8px 12px 4px;padding:14px 16px;border-radius:var(--t-radius);text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--t-action) 18%,var(--t-field)),
    var(--t-field));border:1px solid color-mix(in srgb,var(--t-action) 40%,transparent)}
.champion span{display:block;font:800 9.5px var(--t-sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-dim)}
.champion b{display:block;margin-top:6px;font:800 18px var(--t-serif);color:var(--t-action);
  letter-spacing:-.02em}

.match{display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 12px;
  border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);
  color:inherit;font:inherit;text-align:center;cursor:pointer;min-height:78px}
.match .side{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.match .side b{font:700 12.5px var(--t-sans);color:var(--t-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.match .side i{font-style:normal;font:800 14px var(--t-serif);color:var(--t-dim);flex:none;
  font-variant-numeric:tabular-nums}
.match .side.won b{color:var(--t-text);font-weight:800}
.match .side.won i{color:var(--t-action)}
.match .vs{font:800 8.5px var(--t-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-dim);min-height:12px}
.match.done .vs{color:transparent}
div.match{cursor:default}

/* ══ screen 11 · ladders ═══════════════════════════════════════ */
.rulestrip{display:flex;gap:6px;margin:8px 12px 2px}
.rulestrip div{flex:1;min-width:0;border:1px solid var(--t-line);border-radius:11px;
  background:var(--t-card);padding:9px 6px;text-align:center}
.rulestrip em{display:block;font-style:normal;font:700 8.5px var(--t-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-dim)}
.rulestrip b{display:block;margin-top:4px;font:800 11.5px var(--t-sans);color:var(--t-text)}
.row .rt2 i.up{color:var(--t-good)}
.row .rt2 i.down{color:var(--t-bad)}

/* ═══════════════════════════════════════════════════════════════
   The trial kit, fitted to this app.

   assets/trial.css is identical in every Wells product and is never
   edited per app — so the two things this app needs on top live here:

   1. Centre alignment. William reviews on a phone and wants headings,
      subheadings and body text centred everywhere; the kit is
      left-aligned. Field labels stay left, against their fields, so a
      form still reads as a form.
   2. The strip sits inside the app shell rather than at the top of a
      page of its own, so it inherits the shell's own edges.
   ═══════════════════════════════════════════════════════════════ */
.t-card h1,
.t-card .t-sub,
.t-card .t-note,
.t-card .t-address,
.t-card .t-price,
.t-sheet h2,
.t-sheet p{ text-align:center }

.t-card .t-brand{ justify-content:center }
.t-card .t-live{ display:flex; margin-left:auto; margin-right:auto }
.t-days{ justify-content:center }
.t-built{ justify-content:center }
.t-row{ justify-content:center; text-align:center }

/* The kit's own box-sizing is scoped to .t-scene and friends; the
   strip lives inside the app shell, which already has a reset. */
.t-strip{ padding-left:16px; padding-right:16px }

/* Screens 1-3 and 6 take the whole page: no bottom bar, no rail, and
   the app's own max-width does not apply to them. */
.t-scene{ margin:0 auto }

/* The address: slug on one line, domain under it. A 24-character slug
   plus the domain does not fit a 390px phone on one line, and breaking
   it mid-word reads like a mistake. */
.t-address i{ display:block; font-style:normal; color:var(--t-accent);
  font-size:14px; word-break:normal }
.t-address b{ word-break:break-all }

/* Tap targets. The kit sizes these for a desktop-first product; every
   club here runs the app one-handed on a phone, so nothing a thumb has
   to find is under 44px. */
.t-strip .t-keep{ min-height:44px; padding:6px 14px }
.t-quiet{ min-height:44px }
.t-powered a{ display:inline-block; padding:13px 8px }
.t-card .t-live{ display:flex; width:max-content; margin-inline:auto }

/* The club name doubles as the way out of a venue on Circuit; the
   chevron says so without a second control. */
.bbar .bl.outof .js-club::after{content:" ‹ ";color:var(--t-accent);font-weight:800}

/* ── Circuit · a venue's own colour ─────────────────────────────
   A short list, not a wheel: the venue owns the identity colour and
   nothing else, so the swatches are the only place the choice shows. */
.skins{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-block:4px 12px}
.skins button{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 13px;border-radius:999px;border:1px solid var(--t-line);
  background:var(--t-field);color:var(--t-muted);font:700 12px var(--t-sans);cursor:pointer}
.skins button>i{width:14px;height:14px;border-radius:50%;background:var(--sw);
  display:block;flex:none}
.skins button[aria-pressed="true"]{border-color:var(--sw);color:var(--t-text);
  box-shadow:inset 0 0 0 1px var(--sw)}
/* the dot on a venue card is that venue's colour, so the group view
   reads as a set of places rather than a list of rows */
.row .tick[style*="--sw"]{color:var(--sw);border-color:var(--sw)}
.row .tick.on[style*="--sw"]{background:color-mix(in srgb,var(--sw) 22%,transparent)}