/* Topspin Thomas: its own brand, on top of the Touch Grass page layout (touch-grass-volley/tgv.css,
   loaded first). Colours come from the Topspin logo: court navy, ball green and ice white, with
   court lines instead of lawn stripes.
   Thomas is colourblind (deuteranomaly), so statuses never rely on colour alone (every status has a
   word) and the two status colours are ball green and pink, which stay apart for red-green colour
   blindness; green on navy and navy on green both have strong contrast. */
:root {
  --lawn: #011e7e;
  --mow: #07278f;
  --deep: #00155e;
  --chalk: #e0eff4;
  --chalk-soft: rgba(224, 239, 244, .8);
  --chalk-faint: rgba(224, 239, 244, .2);
  --gold: #3ee13f;
  --gold-h: #74ef72;
  --plum: #3ee13f;
  --clay: #ff8fd0;
  --err: #ffb3de;
  --display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --ink: var(--chalk); --muted: var(--chalk-soft); --line: var(--chalk-faint); --soft: rgba(224, 239, 244, .07);
  --accent: var(--gold); --blue: var(--plum); --orange: var(--clay); --font: var(--serif);
}
body.tgx { font: 400 18px/1.55 var(--serif); }
.tgx ::selection { background: var(--gold); color: var(--lawn); }

/* the logo's heavy italic caps wherever Touch Grass uses its tall display type */
.tgx-mark span, .tg .h3, .tg h1, .tg h2.tg-h, .tg-time, .tg-stat b, .tg-empty h5, .tg-policy h5 {
  font-weight: 800; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; }
.tgx-mark span { font-size: 21px; }
.tgx-mark span b { color: var(--gold); font-weight: 800; }
.tgx-mark img { border-radius: 50%; }
.tg .h3, .tg h1 { line-height: .92; }
.tg-head h6, .tg h3.tg-h, .tg-day > h3 { font-style: normal; font-weight: 600; }
.tg-time { font-size: 30px; }

.tgx .tg-btn, .tgx .tgx-btn { font: 700 18px/1 var(--serif); letter-spacing: .01em; }
.tgx .tg-btn.small, .tgx .tgx-btn.small { font-size: 16px; }

/* statuses: green (paid) and pink (no-show), each always with a word */
.tg-chip.paid, .tg-chip.showed { background: var(--gold); border-color: var(--gold); color: var(--lawn); font-weight: 700; }
.tg-chip.pending { border-style: dashed; border-color: var(--chalk); color: var(--chalk); }
.tg-chip.noshow { background: var(--clay); border-color: var(--clay); color: var(--deep); }
.tg-chip.court { border-color: var(--chalk-soft); }
.tg-chip.court.ok { background: var(--chalk); border-color: var(--chalk); color: var(--lawn); font-weight: 700; }
.tg-chip.court.bad { background: var(--clay); border-color: var(--clay); color: var(--deep); font-weight: 700; }
.tg .tg-seg button[aria-pressed="true"].yes { color: var(--lawn); font-weight: 700; }
.tg-meter i { background: var(--gold); }

/* lesson choice on the booking page */
.tst-pick { display: grid; gap: 8px; justify-items: end; width: 330px; max-width: 100%; }
.tst-pick [data-notebox] input { width: 100% !important; padding: 9px 12px !important; font-size: 16px !important; }
.tst-friend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; margin-top: 4px; }
.tst-friend input { width: 170px !important; padding: 9px 12px !important; font-size: 16px !important; }
.tst-packs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 22px 26px;
  margin-top: 28px; border-radius: 18px; border: 1px solid var(--gold); background: var(--deep); }
.tst-packs h4 { font: italic 800 24px/1.1 var(--display); text-transform: uppercase; }
.tst-packs p { color: var(--chalk-soft); font-size: 17px; margin-top: 4px; }
@media (max-width: 760px) {
  .tst-pick { justify-items: stretch; }
  .tst-friend { flex-wrap: wrap; }
  .tst-friend input { width: 100% !important; }
  .tst-packs { grid-template-columns: 1fr; }
}

/* month calendar (booking and admin pages). Days with lessons say how many in words, not colour only. */
.tst-cal { border: 1px solid var(--chalk-faint); border-radius: 18px; padding: 18px 18px 14px; background: var(--deep); margin-top: 28px; }
.tst-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tst-cal-h strong { font: italic 800 24px/1 var(--display); text-transform: uppercase; }
.tst-cal-h .tg-link { font-size: 30px; line-height: 1; text-decoration: none; padding: 2px 12px; }
.tst-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tst-cal-w { font-size: 13px; color: var(--chalk-soft); text-align: center; padding-bottom: 4px; }
.tst-cal-d { min-height: 64px; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid transparent; background: none; color: var(--chalk-soft); font: inherit; text-align: left; }
.tst-cal-d b { font-weight: 600; font-size: 16px; }
.tst-cal-d small { font-size: 12px; line-height: 1.15; font-weight: 600; }
.tst-cal-d.is-blank, .tst-cal-d.is-past { opacity: .4; }
.tst-cal-d.is-today b { text-decoration: underline; text-underline-offset: 3px; }
button.tst-cal-d { cursor: pointer; color: var(--chalk); border-color: var(--chalk-faint); background: var(--lawn); }
button.tst-cal-d.is-open { border-color: var(--gold); }
button.tst-cal-d.is-open small { color: var(--gold); }
button.tst-cal-d.is-mine { background: var(--gold); border-color: var(--gold); color: var(--lawn); }
button.tst-cal-d.is-full small { color: var(--chalk-soft); }
button.tst-cal-d.is-sel { outline: 3px solid var(--chalk); outline-offset: 1px; }
button.tst-cal-d:hover { background: var(--mow); }
button.tst-cal-d.is-mine:hover { background: var(--gold-h); }
.tst-dayh { font: 600 24px/1.2 var(--serif); margin: 30px 0 4px; }
@media (max-width: 760px) {
  .tst-cal { padding: 14px 10px 10px; }
  .tst-cal-g { gap: 4px; }
  .tst-cal-d { min-height: 52px; padding: 5px 4px; align-items: center; text-align: center; }
  .tst-cal-d small { font-size: 10px; }
}

/* admin form rows: inputs line up even when a label is longer */
.tst-row { align-items: end; }
.tst-row .tg-field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg select { appearance: auto; }