/* Touch Grass Volley: its own brand, separate from the rest of digathomas.com.
   Colours come from the TG logo: deep lawn green, chalk cream and ball gold, with mowed-lawn stripes.
   Statuses never rely on colour alone (Thomas is colourblind): every status has a word, and the two
   status colours are plum and orange, which stay apart for red-green colour blindness. */
:root {
  --lawn: #1f4a2c;
  --mow: #245332;
  --deep: #163a21;
  --chalk: #f4e4be;
  --chalk-soft: rgba(244, 228, 190, .78);
  --chalk-faint: rgba(244, 228, 190, .22);
  --gold: #e2b25a;
  --gold-h: #edc57b;
  --plum: #6b4585;
  --clay: #e08a36;
  --err: #ffb08a;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  /* names the booking and admin pages already use */
  --ink: var(--chalk); --muted: var(--chalk-soft); --line: var(--chalk-faint); --soft: rgba(244, 228, 190, .07);
  --accent: var(--gold); --blue: var(--plum); --orange: var(--clay); --font: var(--serif);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.tgx { margin: 0; background: var(--lawn); color: var(--chalk); font: 500 19px/1.55 var(--serif); }
.tgx img { display: block; max-width: 100%; }
.tgx a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tgx p, .tgx h1, .tgx h2, .tgx h3, .tgx h4, .tgx h5, .tgx h6 { margin: 0; }
.tgx ul { margin: 0; padding-left: 1.2em; }
.tgx ::selection { background: var(--gold); color: var(--lawn); }
.tgx :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tgx * { animation: none !important; transition: none !important; } }

/* ---------- brand bar and footer (every Touch Grass page) ---------- */
.tgx-top { position: sticky; top: 0; z-index: 20; background: var(--lawn); border-bottom: 1px solid var(--chalk-faint); }
.tgx-top .in { width: min(1180px, 100% - 40px); margin: 0 auto; display: flex; align-items: center; gap: 28px; height: 72px; }
.tgx-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.tgx-mark img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tgx-mark span { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.tgx-top nav { display: flex; align-items: center; gap: 26px; font-size: 18px; }
.tgx-top nav a { text-decoration: none; }
.tgx-top nav a:hover, .tgx-top nav a[aria-current="page"] { text-decoration: underline; }
.tgx-foot { border-top: 1px solid var(--chalk-faint); background: var(--deep); }
.tgx-foot .in { width: min(1180px, 100% - 40px); margin: 0 auto; padding: 36px 0 44px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; font-size: 16px; color: var(--chalk-soft); }
.tgx-foot .in > :first-child { margin-right: auto; }

/* ---------- buttons ---------- */
.tgx .tg-btn, .tgx .tgx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px;
  border-radius: 1000px; border: 1px solid var(--gold); background: var(--gold); color: var(--lawn);
  font: 600 19px/1 var(--serif); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; }
.tgx .tg-btn:hover, .tgx .tgx-btn:hover { background: var(--gold-h); border-color: var(--gold-h); }
.tgx .tg-btn.ghost, .tgx .tgx-btn.ghost { background: transparent; color: var(--chalk); border-color: var(--chalk-soft); }
.tgx .tg-btn.ghost:hover, .tgx .tgx-btn.ghost:hover { background: var(--soft); border-color: var(--chalk); }
.tgx .tg-btn.small, .tgx .tgx-btn.small { min-height: 40px; padding: 0 18px; font-size: 17px; }
.tgx-top .tgx-btn { min-height: 40px; padding: 0 20px; font-size: 17px; }
.tgx .tg-btn[disabled] { opacity: .55; cursor: progress; }
.tgx .tg-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tgx .tg-link.muted { color: var(--chalk-soft); }

/* ---------- inner pages: book, account, reset, admin ---------- */
.tg-wrap { width: min(880px, 100% - 40px); margin: 0 auto; padding: 56px 0 88px; }
.tg-wrap.narrow, .tg-wrap .narrow { width: min(540px, 100%); }
.tg-wrap.narrow { width: min(540px, 100% - 40px); }
.tg [hidden] { display: none !important; }
.tg .h3, .tg h1 { font: 400 clamp(48px, 8vw, 84px)/.95 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.tg-head h6 { font: italic 500 clamp(24px, 3vw, 30px)/1.25 var(--serif); margin-top: 18px; }
.tg-head p { color: var(--chalk-soft); margin-top: 12px; max-width: 60ch; }
.tg .body-large { font-size: 20px; }
.tg-crumbs { font-size: 16px; color: var(--chalk-soft); margin-bottom: 22px; }
.tg-muted { color: var(--chalk-soft); }
.tg-small { font-size: 16px; }
.tg h2.tg-h { font: 400 36px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 56px 0 18px; }
.tg h3.tg-h { font: italic 500 26px/1.2 var(--serif); margin: 36px 0 12px; }

.tg-note { padding: 16px 22px; border-radius: 16px; background: var(--soft); border: 1px solid var(--chalk-faint); margin: 22px 0; }
.tg-note.info { border-color: var(--gold); }
.tg-note.warn { border-color: var(--clay); }
.tg-note strong { display: block; margin-bottom: 2px; font-weight: 700; }
.tg-error { color: var(--err); }

.tg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border-radius: 1000px; font-size: 15px; line-height: 1.1;
  border: 1px solid var(--chalk-faint); color: var(--chalk); white-space: nowrap; }
.tg-chip.paid, .tg-chip.showed { background: var(--plum); border-color: var(--plum); color: #fff; font-weight: 600; }
.tg-chip.pending { border-color: var(--clay); color: var(--clay); font-weight: 700; }
.tg-chip.noshow { background: var(--clay); border-color: var(--clay); color: var(--deep); font-weight: 700; }
.tg-chip.cancelled { color: var(--chalk-soft); text-decoration: line-through; }
.tg-chip.full { background: var(--chalk); border-color: var(--chalk); color: var(--lawn); font-weight: 600; }

/* sessions as mowed-lawn stripes */
.tg-day { margin-top: 44px; }
.tg-day > h3 { font: italic 500 24px/1.2 var(--serif); padding-bottom: 12px; }
.tg-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 24px; margin: 0 -24px; }
.tg-card:nth-of-type(odd) { background: var(--mow); }
.tg-day .tg-card:first-of-type { border-top: 1px solid var(--chalk-faint); }
.tg-card { border-bottom: 1px solid var(--chalk-faint); }
.tg-time { font: 400 34px/1 var(--display); }
.tg-time small { display: block; font: 500 16px/1.2 var(--serif); color: var(--chalk-soft); margin-top: 6px; }
.tg-what h4 { font: 600 23px/1.2 var(--serif); margin-bottom: 4px; }
.tg-what p { font-size: 17px; color: var(--chalk-soft); }
.tg-what .tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tg-act { display: grid; justify-items: end; gap: 8px; text-align: right; }
.tg-spots { font-size: 16px; color: var(--chalk-soft); }
.tg-meter { width: 150px; height: 4px; border-radius: 4px; background: var(--chalk-faint); overflow: hidden; }
.tg-meter i { display: block; height: 100%; background: var(--gold); }
.tg-card.is-cancelled .tg-time, .tg-card.is-cancelled h4 { text-decoration: line-through; color: var(--chalk-soft); }
.tg-empty { padding: 40px 30px; border-radius: 20px; background: var(--mow); margin-top: 32px; }
.tg-empty h5 { font: 400 30px/1.05 var(--display); text-transform: uppercase; margin-bottom: 10px; }

/* forms */
.tg-tabs { display: flex; gap: 8px; margin: 36px 0 26px; flex-wrap: wrap; }
.tg-tabs button { min-height: 44px; padding: 0 22px; border-radius: 1000px; border: 1px solid var(--chalk-faint); background: transparent; color: var(--chalk); font: 500 18px/1 var(--serif); cursor: pointer; }
.tg-tabs button[aria-selected="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--lawn); font-weight: 600; }
.tg-form { display: grid; gap: 20px; }
.tg-field { display: grid; gap: 6px; }
.tg-field > label, .tg-field > .tg-label { font-size: 18px; }
.tg-field .tg-hint { font-size: 15px; color: var(--chalk-soft); }
.tg input[type="text"], .tg input[type="email"], .tg input[type="password"], .tg input[type="tel"], .tg input[type="number"],
.tg input[type="date"], .tg input[type="time"], .tg select, .tg textarea {
  font: 500 19px/1.3 var(--serif); color: var(--chalk); width: 100%; padding: 13px 16px; border: 1px solid var(--chalk-faint); border-radius: 10px;
  background: var(--deep); color-scheme: dark; }
.tg textarea { min-height: 96px; resize: vertical; }
.tg input:focus, .tg select:focus, .tg textarea:focus { border-color: var(--gold); outline: none; }
.tg input::placeholder { color: rgba(244, 228, 190, .45); }
.tg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tg-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.tg-check { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.tg-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--gold); }
.tg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* account */
.tg-stat { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; }
.tg-stat b { display: block; font: 400 46px/1 var(--display); }
.tg-stat span { font-size: 16px; color: var(--chalk-soft); }
.tg-list { border-top: 1px solid var(--chalk-faint); }
.tg-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--chalk-faint); }
.tg-item h4 { font: 600 21px/1.25 var(--serif); margin-bottom: 4px; }
.tg-item p { font-size: 17px; color: var(--chalk-soft); }
.tg-ledger { width: 100%; border-collapse: collapse; font-size: 17px; }
.tg-ledger td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--chalk-faint); vertical-align: top; }
.tg-ledger td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.tg details summary { cursor: pointer; }

.tg-policy { margin-top: 64px; padding: 34px 36px; border-radius: 22px; background: var(--deep); border: 1px solid var(--chalk-faint); }
.tg-policy h5 { font: 400 30px/1 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.tg-policy ul { display: grid; gap: 10px; }

/* admin page pieces */
.tg .tg-seg { border-color: var(--chalk-faint); }
.tg .tg-seg button { background: transparent; color: var(--chalk); font-family: var(--serif); font-size: 16px; }
.tg .tg-seg button + button { border-left-color: var(--chalk-faint); }
.tg .tg-seg button[aria-pressed="true"].no { color: var(--deep); }

@media (max-width: 760px) {
  .tgx-top .in { gap: 16px; height: 64px; }
  .tgx-mark span { display: none; }
  .tgx-top nav { gap: 16px; font-size: 17px; }
  .tg-wrap { padding-top: 32px; }
  .tg-card { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; margin: 0 -20px; }
  .tg-act { justify-items: start; text-align: left; }
  .tg-act .tg-btn { width: 100%; }
  .tg-meter { width: 100%; }
  .tg-row2, .tg-row3 { grid-template-columns: 1fr; }
  .tg-item { grid-template-columns: 1fr; }
  .tg-stat { gap: 28px; flex-wrap: nowrap; }
  .tg-stat b { font-size: 38px; }
  .tg-policy { padding: 26px 22px; }
}