/* =========================================================================
   Canoepolo Scout — a Rectusoft application.

   House style taken from the live sites:

     tournamentorganizer.live   cyan #07a7e3 top bar carrying the white
                                Rectusoft logo, white page, Bootstrap-blue
                                #0d6efd table headers, flat surfaces
     backend.tournamentorganizer.live
                                same bar, solid colour stat blocks
                                (#00c0ef / #00a65a / #f39c12 / #d9534f)

   Flat, light, small radii, almost no shadow. The system font stack is used
   for the interface, exactly as the live sites render. The one exception is
   the clock, which uses a shipped geometric face whose digits all share the
   same width so the countdown does not jitter.

   The theme is resolved to data-theme="light" or "dark" on <html> by a small
   script in the page head, so every rule below deals with just those two.
   ========================================================================= */

@font-face {
  font-family: "Adventor";
  src: url("../fonts/adventor-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adventor";
  src: url("../fonts/adventor-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* Rectusoft brand — the same in both themes */
  --brand-bar:    #07a7e3;   /* the top bar on every Rectusoft site */
  --brand-bar-2:  #0691c6;   /* pressed / darker state */
  --primary:      #0d6efd;   /* Bootstrap primary: buttons, table headers */
  --primary-deep: #0b5cd5;
  --brand-dark:   #122f3b;
  --brand-slate:  #4f5b60;
  --brand-blue:   #0070bb;   /* logo */
  --brand-orange: #f7921e;   /* logo */

  /* Solid tile colours, straight from the backend dashboard */
  --tile-blue:   #00c0ef;
  --tile-green:  #00a65a;
  --tile-orange: #f39c12;
  --tile-red:    #d9534f;
  --tile-pink:   #e5289b;

  --success:     #28a745;
  --warning:     #ffc107;
  --danger:      #dc3545;

  --radius:      6px;
  --radius-sm:   4px;
  --tap:         56px;

  /* What the live sites actually render in. */
  --ff: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
  /* Equal-width digits for the clock faces. */
  --ff-num: "Adventor", var(--ff);
}

/* ---- light: the default, matching the live sites ---- */
:root,
[data-theme="light"] {
  --bg:          #ffffff;
  --bg-tint:     #f8f9fa;
  --surface:     #ffffff;
  --surface-2:   #f8f9fa;
  --border:      #dee2e6;
  --border-soft: #e9ecef;

  --text:        #212529;
  --text-dim:    #6c757d;
  --text-faint:  #8a949c;

  --accent:      var(--primary);
  --go:          var(--success);
  --warn:        #b8730a;
  --danger-ink:  #ffffff;

  --clock:        #212529;
  --clock-warn:   #d9822b;
  --clock-danger: var(--danger);

  --table-head:   var(--primary);
  --table-stripe: #f8f9fa;

  --shadow: none;

  color-scheme: light;
}

/* ---- dark: same palette, built around the brand's #122f3b ---- */
[data-theme="dark"] {
  --bg:          #0e2028;
  --bg-tint:     #132c37;
  --surface:     #122f3b;
  --surface-2:   #17394a;
  --border:      #26505f;
  --border-soft: #1f4655;

  --text:        #eef5f8;
  --text-dim:    #a3bcc6;
  --text-faint:  #7695a2;

  --accent:      #4da3ff;
  --go:          #2fbf5f;
  --warn:        #f0a02c;
  --danger-ink:  #ffffff;

  --clock:        #ffffff;
  --clock-warn:   var(--tile-orange);
  --clock-danger: #ff5c6e;

  --table-head:   var(--primary-deep);
  --table-stripe: #14333f;

  --shadow: none;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The browser's own rule for [hidden] is display:none, and any author rule
   with a display of its own beats it. Half the components here set
   display:flex or display:grid, so el.hidden = true would quietly do nothing.
   Said once, at the top, instead of per component. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: darkorange; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; color: var(--text); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: .95rem; color: var(--text-dim); }

p { line-height: 1.55; color: var(--text-dim); }

/* --------------------------------------------------- top bar + navigation */

/* The cyan bar with the white Rectusoft logo is the strongest shared
   element across every Rectusoft site, so it stays cyan in both themes. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1rem;
  background: var(--brand-bar);
  padding-top: max(.55rem, env(safe-area-inset-top));
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  min-width: 0;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand img.wordmark { height: 26px; width: auto; display: block; }
.brand .divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, .45);
  flex: none;
}
.brand .app-name { white-space: nowrap; }

/* On a narrow phone the logo alone carries the branding, exactly as the
   live sites do; the page titles and the bottom bar say which app it is. */
@media (max-width: 430px) {
  .brand .divider,
  .brand .app-name { display: none; }
}

.topbar .spacer { flex: 1; }

.userchip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  font-size: .8rem;
  color: #fff;
  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userchip:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, .15); }

.nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  padding: .5rem .2rem .55rem;
  min-height: var(--tap);
  color: var(--text-dim);
  font-size: .68rem;
  font-weight: 600;
  text-decoration: none;
  border-top: 3px solid transparent;
}
.nav a .ico { font-size: 1.2rem; line-height: 1; }

/* Seven or eight tabs on a narrow phone. The grid divides evenly and never
   overflows, so without this the labels wrap into two lines and the bar grows
   taller than the thumb it is meant to sit under. */
@media (max-width: 420px) {
    .nav a { font-size: .6rem; padding: .45rem .1rem .5rem; gap: .12rem; }
    .nav a .ico { font-size: 1.05rem; }
}
.nav a.active { color: var(--brand-bar); border-top-color: var(--brand-bar); }
/* A Member tool that is shut: still there, plainly not available. */
.nav a.locked { opacity: .5; }
.nav a:hover { text-decoration: none; color: darkorange; }

/* --------------------------------------------------------------- structure */

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1rem 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.card > :last-child { margin-bottom: 0; }

.card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.row { display: flex; gap: .6rem; flex-wrap: wrap; }
.row > * { flex: 1 1 0; min-width: 0; }
.stack > * + * { margin-top: .6rem; }

/* ------------------------------------------------------------ brand blocks */

.brand-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .3rem 0 .8rem;
}
.brand-hero img { width: min(210px, 58%); height: auto; display: block; }
.brand-hero .tagline {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.2rem 1rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--bg-tint);
}
.site-footer img { height: 20px; width: auto; }
.site-footer span { font-size: .72rem; color: var(--text-faint); }

/* The coloured logo on light surfaces, the white one on dark surfaces.
   The selectors carry an img so they outrank ".brand-hero img". */
img.logo-on-dark { display: none; }
[data-theme="dark"] img.logo-on-light { display: none; }
[data-theme="dark"] img.logo-on-dark { display: block; }

/* ----------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease;
  user-select: none;
  text-decoration: none;
  width: 100%;
}
.btn:hover { filter: brightness(.96); text-decoration: none; }
.btn:active { filter: brightness(.9); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn:focus-visible { outline: 3px solid rgba(13, 110, 253, .45); outline-offset: 1px; }

.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-go      { background: var(--success); color: #fff; border-color: var(--success); }
.btn-warn    { background: var(--warning); color: #212529; border-color: var(--warning); }
.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-ghost   { background: transparent; }
.btn-sm      { min-height: 38px; padding: .35rem .7rem; font-size: .85rem; width: auto; }
.btn-auto    { width: auto; }

[data-theme="dark"] .btn-warn { color: #212529; }

/* ------------------------------------------------------------------- forms */

label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .25rem; }

input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
textarea { min-height: 90px; resize: vertical; }

.check {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: var(--tap);
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.check input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.check span { font-size: .95rem; color: var(--text); }

.field-error, .validation-summary-errors ul { color: var(--danger); font-size: .875rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* Segmented control, used for the theme picker. */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.segmented button {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: -1px;
}
.segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.segmented button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.segmented button[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
}
.badge-free  { background: var(--tile-blue); }
.badge-pro   { background: var(--tile-orange); }
.badge-admin { background: var(--tile-red); }
.badge-guest { background: var(--brand-slate); }
.badge-trial { background: var(--tile-green); }

.notice {
  border-radius: var(--radius);
  border: 1px solid #b6d4fe;
  background: #cfe2ff;
  color: #084298;
  padding: .75rem 1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.notice.warn   { border-color: #ffe69c; background: #fff3cd; color: #664d03; }
.notice.danger { border-color: #f5c2c7; background: #f8d7da; color: #842029; }
.notice.ok     { border-color: #badbcc; background: #d1e7dd; color: #0f5132; }

[data-theme="dark"] .notice        { background: #0b2b45; border-color: #17466b; color: #9ec5fe; }
[data-theme="dark"] .notice.warn   { background: #332701; border-color: #664d03; color: #ffda6a; }
[data-theme="dark"] .notice.danger { background: #2c0b0e; border-color: #842029; color: #ea868f; }
[data-theme="dark"] .notice.ok     { background: #051b11; border-color: #0f5132; color: #75b798; }

/* -------------------------------------------------------------- clock faces */

.mono { font-family: var(--ff-num); font-variant-numeric: tabular-nums; }

.clock-wrap { text-align: center; }

.clock-main {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(3.4rem, 19vw, 8rem);
  line-height: .95;
  color: var(--clock);
}

.shotclock {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(5rem, 34vw, 15rem);
  line-height: .9;
  color: var(--clock);
  transition: color .2s ease;
}
.shotclock.warn   { color: var(--clock-warn); }
.shotclock.danger { color: var(--clock-danger); animation: pulse .6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

.clock-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dim);
}

.phase-pill {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dim);
}
.phase-pill.running { background: var(--tile-green); border-color: transparent; color: #fff; }
.phase-pill.rest    { background: var(--tile-orange); border-color: transparent; color: #fff; }

/* scoreboard */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.score-team { font-size: .85rem; font-weight: 700; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-value {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 12vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--clock);
}
.score-sep { color: var(--text-faint); font-size: 1.6rem; font-weight: 700; }
.score-btns { display: flex; gap: .35rem; justify-content: center; margin-top: .35rem; }
.score-btns .btn { width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; }

/* ------------------------------------------------------------ counter grid */

.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 620px) {
  .counter-grid { grid-template-columns: repeat(3, 1fr); }
}

.counter {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.counter::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--tile-blue);
}
.counter[data-tone="go"]::before     { background: var(--tile-green); }
.counter[data-tone="warn"]::before   { background: var(--tile-orange); }
.counter[data-tone="danger"]::before { background: var(--tile-red); }
.counter[data-tone="accent"]::before { background: var(--brand-bar); }

/* An action of the user's own. Marked with a dashed stripe rather than a solid
   one, because it is a plain tally: it is counted, shown and exported, but it
   is deliberately left out of involvement and out of every percentage - the
   application cannot know what it means, and a figure that is wrong is worse
   than one that is missing. A button that looked exactly like "Goal" but fed
   nothing would be a trap. */
.counter-own::before {
    background: repeating-linear-gradient(
        90deg,
        var(--brand-bar) 0 6px,
        transparent 6px 11px
    );
}

.counter-head { padding: .55rem .7rem 0; }
.counter-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dim);
}
.counter-value {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  padding: .15rem .7rem .5rem;
  color: var(--text);
}
.counter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: auto; background: var(--border); }
.counter-actions button {
  appearance: none;
  border: 0;
  min-height: 50px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.counter-actions button:active { filter: brightness(.92); }
.counter-actions button:disabled { opacity: .35; cursor: not-allowed; }
.counter-actions button:disabled:active { filter: none; }

/* Player off the field: the whole grid steps back so it is obvious at a
   glance that nothing can be counted right now. */
.counter-grid.locked .counter { opacity: .5; }
.counter-grid.locked .counter::before { filter: grayscale(1); }
.counter-actions .plus { color: var(--tile-green); }
.counter-actions .minus { color: var(--text-faint); }
.counter[data-tone="danger"] .counter-actions .plus { color: var(--tile-red); }

/* -------------------------------------------------------------- statistics */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
@media (min-width: 620px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: .65rem .75rem;
  border-radius: var(--radius);
  background: var(--bg-tint);
  border: 1px solid var(--border);
}
.stat .k { font-size: .72rem; font-weight: 600; color: var(--text-dim); }
.stat .v {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.stat .v.accent { color: var(--accent); }
.stat .v.go     { color: var(--go); }
.stat .v.warn   { color: var(--warn); }

/* Solid colour blocks, as on the backend dashboard. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 620px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }

.tile-stat {
  padding: .85rem .9rem;
  border-radius: var(--radius);
  color: #fff;
}
.tile-stat .v {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.tile-stat .k { font-size: .8rem; font-weight: 600; opacity: .92; }
.tile-stat.blue   { background: var(--tile-blue); }
.tile-stat.green  { background: var(--tile-green); }
.tile-stat.orange { background: var(--tile-orange); }
.tile-stat.red    { background: var(--tile-red); }
.tile-stat.pink   { background: var(--tile-pink); }
.tile-stat.slate  { background: var(--brand-slate); }

.bar { height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: .3rem; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s ease; }
.bar.go > i { background: var(--success); }

/* saved sessions */
.session {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: .6rem;
  overflow: hidden;
}
.session-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  cursor: pointer;
}
.session-head .who { flex: 1; min-width: 0; }
.session-head .who b { display: block; font-size: 1rem; }
.session-head .who small { color: var(--text-dim); font-size: .8rem; }
.session-head .kpi {
  font-family: var(--ff-num);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}
.session-body { padding: 0 .85rem .85rem; display: none; }
.session.open .session-body { display: block; }
.session-body dl { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin: 0; font-size: .9rem; }
.session-body dt { color: var(--text-dim); }
.session-body dd { margin: 0; font-family: var(--ff-num); font-weight: 700; text-align: right; }

/* --------------------------------------------------------------- home tiles */

.tiles { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit rather than a fixed four: the row of tiles is three wide while
   the tactics board is held back, and must not leave a gap. */
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.tile {
  display: block;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-bar);
  background: var(--surface);
  color: var(--text);
  position: relative;
}
.tile:hover { text-decoration: none; border-color: var(--brand-bar); }
.tile .ico { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
.tile b { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.tile span { font-size: .9rem; color: var(--text-dim); line-height: 1.45; display: block; }
.tile .badge { position: absolute; top: .8rem; right: .8rem; }

/* ------------------------------------------------------- readable lists */

/* Used on the privacy page: a list that reads like prose instead of like a
   settings menu. */
ul.plain {
  margin: 0 0 .8rem;
  padding-left: 1.1rem;
  color: var(--text-dim);
  font-size: .92rem;
}
ul.plain li { margin-bottom: .35rem; }
ul.plain li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- usage charts */

/* One series per chart, so one hue does all the work and there is no legend
   to read. Numbers and labels wear the normal text colours; the bar carries
   the magnitude and nothing else. */

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
}
.chip:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Columns grow from a baseline, with a 2px gap so neighbours never merge. */
.col-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  min-width: 100%;
  padding-top: .3rem;
  border-bottom: 1px solid var(--border);
}
.col {
  flex: 1 1 0;
  min-width: 7px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.col-fill {
  width: 100%;
  min-height: 2px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;   /* rounded at the data end only */
}
.col-chart.hours .col { min-width: 10px; }
.col:hover .col-fill { background: var(--primary-deep); }

.axis-row {
  display: flex;
  justify-content: space-between;
  margin-top: .3rem;
  font-size: .7rem;
  color: var(--text-faint);
}

/* Ranked horizontal bars. */
.bar-list { display: flex; flex-direction: column; gap: .45rem; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 44%) 1fr auto;
  align-items: center;
  gap: .6rem;
}
/* Wraps rather than truncating: a label ending in "..." tells you nothing,
   and these are names the reader has to be able to tell apart. */
.bar-label {
  font-size: .82rem;
  line-height: 1.25;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.bar-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--primary);
  border-radius: 4px;
}
.bar-value { font-size: .82rem; font-weight: 600; color: var(--text); }

.table-toggle { margin-top: .7rem; }
.table-toggle summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-dim);
  font-weight: 600;
}
.table-toggle summary:hover { color: var(--primary); }
.table-toggle .table-wrap { margin-top: .5rem; max-height: 320px; overflow-y: auto; }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data thead th {
  background: var(--table-head);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem .6rem;
  text-align: left;
  white-space: nowrap;
}
table.data th, table.data td {
  padding: .6rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.data tbody tr:nth-child(even) { background: var(--table-stripe); }
/* Header cells used as row labels (the account page) stay plain. */
table.data tbody th { background: transparent; color: var(--text-dim); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------ free / Member comparison */

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-bottom: .9rem;
}
.plan-table thead th {
  background: var(--table-head);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  padding: .5rem .55rem;
  text-align: center;
}
.plan-table thead th:first-child { background: transparent; }
.plan-table td {
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.plan-table td:first-child {
  text-align: left;
  color: var(--text-dim);
  white-space: normal;
}
.plan-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.plan-table .yes { color: var(--tile-green); font-weight: 600; }
.plan-table .no  { color: var(--text-faint); }
.plan-table .trial { color: var(--tile-green); font-weight: 600; }

/* ---------------------------------------------------- admin: user list */

/* Tabs. These were referenced by the page but never written, so they have
   been rendering as bare links in a row. */
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.tabs a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-dim); background: var(--surface);
}
.tabs a:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tabs a .n {
  font-size: .72rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim);
}
.tabs a.on .n { background: rgba(255,255,255,.25); color: #fff; }

/* One account = one scannable line. */
.urow {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border-soft);
}
.urow:last-of-type { border-bottom: 0; }
.urow-id { flex: 2 1 190px; min-width: 0; }
.urow-name {
  font-size: 1.02rem; font-weight: 700; color: var(--text);
  line-height: 1.25; overflow-wrap: anywhere;
}
.urow-sub { font-size: .8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.urow-state { flex: 1 1 150px; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.urow-when { flex: 0 0 auto; text-align: right; font-size: .75rem; color: var(--text-faint); }

.urow-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.urow-valid { font-size: .78rem; color: var(--text-dim); }

/* The actions, folded away until you want them. */
.urow-actions { margin: 0 0 .4rem; }
.urow-actions > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600; color: var(--text-dim); background: var(--surface-2);
}
.urow-actions > summary::-webkit-details-marker { display: none; }
.urow-actions > summary:hover { color: var(--primary); border-color: var(--primary); }
.urow-actions[open] > summary { color: var(--primary); border-color: var(--primary); }

.act-group { padding: .7rem 0; border-top: 1px solid var(--border-soft); }
.act-group:first-of-type { border-top: 0; }
.act-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: .45rem;
}
/* Buttons on one line, wrapping only when the screen forces it. */
.act-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem; }
.act-row > form { margin: 0; }
.act-row .grow { flex: 1 1 150px; min-width: 0; }
.act-group.danger { border-top: 2px solid var(--border); margin-top: .3rem; }

/* The three columns only work while there is room for them. On a phone the
   line becomes a small block: name first, then what the account is, then
   when it was last used. */
.urow-when span { display: block; }

@media (max-width: 620px) {
  .urow { flex-direction: column; gap: .3rem; }
  /* In a column, flex-basis is a HEIGHT. Left as it is, every row would be
     190px tall and the list would be nothing but white space. */
  .urow-id, .urow-state, .urow-when { flex: 0 0 auto; }
  .urow-state { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .urow-when { text-align: left; }
  .urow-when span { display: inline; }
  .urow-when span + span::before { content: " \00b7 "; }
  .act-row .grow { flex: 1 1 100%; }
}

/* --------------------------------------------------------- full screen mode */

body.fullscreen-clock .topbar,
body.fullscreen-clock .nav,
body.fullscreen-clock .site-footer,
body.fullscreen-clock .hide-in-fullscreen { display: none !important; }

body.fullscreen-clock main {
  max-width: none;
  height: 100dvh;
  padding: .4rem;
  display: grid;
  gap: .3rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "match score"
    "shot  shot"
    "ctrl  ctrl";
}
body.fullscreen-clock .card {
  background: transparent;
  border: 0;
  padding: .2rem;
  margin: 0;
  min-width: 0;
}
body.fullscreen-clock .fs-match { grid-area: match; align-self: center; }
body.fullscreen-clock .fs-score { grid-area: score; align-self: center; }
body.fullscreen-clock .fs-shot  { grid-area: shot; display: grid; place-items: center; min-height: 0; }
body.fullscreen-clock .fs-controls { grid-area: ctrl; }

body.fullscreen-clock .fs-shot .clock-label,
body.fullscreen-clock .fs-match .clock-label { display: none; }
body.fullscreen-clock .fs-shot .shotclock { font-size: min(56vh, 44vw); }
body.fullscreen-clock .fs-match .clock-main { font-size: min(13vh, 13vw); }
body.fullscreen-clock .score-value { font-size: min(9vh, 9vw); }
body.fullscreen-clock .score-btns .btn { width: 38px; min-height: 38px; }

body.fullscreen-clock .fs-controls .stack { display: flex; gap: .3rem; flex-wrap: wrap; }
body.fullscreen-clock .fs-controls .stack > * { margin-top: 0; }
body.fullscreen-clock .fs-controls .row { display: contents; }
body.fullscreen-clock .fs-controls .btn {
  min-height: 44px;
  font-size: .85rem;
  padding: .3rem .5rem;
  flex: 1 1 120px;
}

@media (orientation: portrait) {
  body.fullscreen-clock main {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "match"
      "shot"
      "score"
      "ctrl";
  }
  body.fullscreen-clock .fs-shot .shotclock { font-size: min(42vh, 72vw); }
  body.fullscreen-clock .fs-match .clock-main { font-size: min(11vh, 20vw); }
  body.fullscreen-clock .score-value { font-size: min(7vh, 13vw); }
}

/* ------------------------------------------------------------ tactics board */

.tb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 41.8 / 29.8;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  touch-action: none;          /* the board handles its own dragging */
  user-select: none;
}
.tb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The little panel that opens on a double-click, over the board itself. */
.tb-edit {
  position: absolute;
  z-index: 5;
  width: 210px;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.tb-edit[hidden] { display: none; }
.tb-edit-who {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: .4rem;
}
.tb-edit-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.tb-edit-row label { flex: 0 0 58px; margin: 0; font-size: .8rem; }
.tb-edit-row input { flex: 1; min-height: 36px; padding: .3rem .5rem; font-size: .9rem; }
.tb-edit-btns { display: flex; gap: .4rem; }
.tb-edit-btns .btn { flex: 1; width: auto; }

.tb-bar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem; }
.tb-bar .btn {
  width: auto;
  min-height: 40px;
  padding: .35rem .65rem;
  font-size: .85rem;
}
.tb-bar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .15rem; }
.tb-tool.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.tb-pen {
  width: auto;
  min-height: 40px;
  padding: .2rem .5rem;
  font-size: .85rem;
  flex: 0 0 auto;
}

.tb-count {
  min-width: 4.2rem;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-dim);
}

.tb-speed { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; font-weight: 600; color: var(--text-dim); }
.tb-speed input[type=range] { width: 110px; min-height: 0; accent-color: var(--primary); }
.tb-speed .mono { min-width: 3.2rem; }

.tb-steps { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.tb-chip {
  min-width: 36px;
  min-height: 34px;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dim);
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.tb-chip.on { background: var(--brand-bar); border-color: var(--brand-bar); color: #fff; }

/* The template strip, directly under the steps. Two rows on a wide screen,
   stacked on a phone; deliberately quiet, because it sits under the board all
   the time and must not shout over it. */
.tb-tpl {
  margin-top: .7rem;
  padding: .55rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.tb-tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tb-tpl-row + .tb-tpl-row { margin-top: .4rem; }
.tb-tpl-label {
  flex: 0 0 5.4rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}
/* The panel that drops out of the toolbar button. Anchored to the card, so it
   works the same in full screen, where the bar is all that is left. */
.tb-card { position: relative; }

.tb-pop {
  position: absolute;
  z-index: 20;
  top: 3.2rem;
  right: .6rem;
  width: min(30rem, calc(100% - 1.2rem));
  max-height: 22rem;
  overflow-y: auto;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.tb-pop[hidden] { display: none; }
.tb-pop-head {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: .5rem;
}
.tb-pop-empty { margin: 0; font-size: .88rem; color: var(--text-dim); }
.tb-pop-list { display: flex; flex-wrap: wrap; gap: .4rem; }

.tb-popbtn {
  flex: 1 1 9rem;
  min-height: 46px;
  max-width: 100%;
  padding: .4rem .7rem;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter .12s ease;
}
.tb-popbtn:hover { filter: brightness(1.08); }
.tb-popbtn:active { filter: brightness(.92); }

@media (max-width: 700px) {
  .tb-pop { left: .6rem; right: .6rem; width: auto; }
}

.tb-tpl-top { align-items: flex-start; }

/* Every template on show. Wraps onto as many rows as it needs, and scrolls
   once there are more than a screenful. */
.tb-tpl-chips {
  flex: 1 1 200px;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  max-height: 8.4rem;
  overflow-y: auto;
  min-width: 0;
}
.tb-tpl-empty { font-size: .85rem; color: var(--text-faint); padding: .35rem 0; }

.tb-tplchip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  max-width: 100%;
}
.tb-tplchip:hover { border-color: var(--primary); }

.tb-tplchip-go {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 15rem;
  padding: .2rem .6rem;
  border: 0;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-tplchip-go:hover { filter: brightness(1.08); }

.tb-tplchip-x {
  flex: none;
  width: 30px;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.tb-tplchip-x:hover { background: var(--danger); color: #fff; }

.tb-tpl-hint { margin: .45rem 0 0; font-size: .78rem; color: var(--text-faint); }

.tb-tpl select, .tb-tpl input[type=text] {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 40px;
  padding: .3rem .55rem;
  font-size: .9rem;
}
.tb-tpl #tbTplScope { flex: 0 1 180px; }
.tb-tpl .btn { width: auto; min-height: 40px; padding: .35rem .7rem; font-size: .85rem; }
.tb-tpl #tbTplDelete { padding: .35rem .6rem; }

@media (max-width: 700px) {
  .tb-tpl-label { flex: 1 1 100%; }
  .tb-tpl select, .tb-tpl input[type=text] { flex: 1 1 100%; }
  .tb-tpl #tbTplScope { flex: 1 1 100%; }
  .tb-tpl .btn { flex: 1 1 auto; }
}

.tb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.tb-legend {
  padding: .25rem .6rem;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, .25);
  font-size: .78rem;
  font-weight: 700;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-check { display: flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.tb-check input { width: 20px; height: 20px; accent-color: var(--primary); }

.tb-colorfield { flex: 0 0 96px; }
.tb-colorfield input[type=color] {
  width: 100%;
  min-height: var(--tap);
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.tb-file { cursor: pointer; }

.tb-help { margin: 0; padding-left: 1.1rem; }
.tb-help li { line-height: 1.55; color: var(--text-dim); margin-bottom: .4rem; font-size: .92rem; }
.tb-help li:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  /* On a phone the icons carry the toolbar; the words would eat the board. */
  .tb-bar .tb-lbl { display: none; }
  .tb-bar .btn { flex: 1 1 auto; font-size: 1.05rem; padding: .35rem .4rem; }
  .tb-bar #tbPrev, .tb-bar #tbNext, .tb-bar #tbAddStep,
  .tb-bar #tbDelStep, .tb-bar #tbPlay { font-size: .85rem; }
  .tb-speed { flex: 1 1 100%; }
  .tb-speed input[type=range] { flex: 1; width: auto; }
  .tb-check { margin-left: 0; flex: 1 1 100%; }
  .tb-stage { aspect-ratio: 29.8 / 41.8; }   /* the pitch turns upright */
}

/* The board on its own, for a beamer, a big screen or a wet poolside. */
body.fullscreen-board .topbar,
body.fullscreen-board .nav,
body.fullscreen-board .site-footer,
body.fullscreen-board .hide-in-fullscreen,
body.fullscreen-board .tb-steps,
body.fullscreen-board .tb-tpl,
body.fullscreen-board .tb-foot { display: none !important; }

/* The panel keeps working in full screen: that is the whole point of putting
   the button up there. */
body.fullscreen-board .tb-pop { top: 3rem; }

body.fullscreen-board main {
  max-width: none;
  height: 100dvh;
  padding: .35rem;
  display: flex;
  flex-direction: column;
}
body.fullscreen-board .tb-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: .35rem;
  border: 0;
  background: transparent;
}
body.fullscreen-board .tb-stage { flex: 1; aspect-ratio: auto; min-height: 0; }

/* ------------------------------------------------- account and suggestions */
/*
   These blocks belong to Membership, Backup and Suggestions. They were written
   against class names that had no rules yet, so the pages rendered as a plain
   stack of text; the styles below give them the same flat, light look as the
   rest of the app.
*/

.grow { flex: 1 1 auto; min-width: 0; }

/* Heading of a card that carries a name on the left and a badge on the right. */
.entry-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.entry-head .who { flex: 1; min-width: 0; }
.entry-head .marks { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }

/* Label-and-value pairs, e.g. "Plan / Member". */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .9rem;
  margin: 0;
  font-size: .92rem;
}
.facts dt { color: var(--text-dim); font-weight: 600; }
.facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* What a plan includes: a tick per line, struck through where it does not. */
.includes { list-style: none; margin: 0; padding: 0; }
.includes li {
  position: relative;
  padding: .35rem 0 .35rem 1.6rem;
  font-size: .92rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.includes li:last-child { border-bottom: 0; }
.includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .3rem;
  font-weight: 700;
  color: var(--success);
}
.includes li.no { color: var(--text-faint); }
.includes li.no::before { content: "✕"; color: var(--text-faint); }

/* A filled bar with a caption above it. */
.meter .caption {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: .3rem;
}
.meter .bar { height: 10px; }

/* The gentle nudge towards a Member account. */
.upsell { border-color: var(--primary); }
.upsell .card-title { color: var(--primary); }

/* ---------------------------------------------------- league player picker */

.league-picked {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.league-picked .grow { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* The result list sits under the box rather than floating over the page: on a
   phone an overlay lands under the thumb and covers the field being typed in. */
.league-results {
  margin-top: .3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-height: 15rem;
  overflow-y: auto;
}
.league-hit {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0; border-bottom: 1px solid var(--border-soft);
  background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  min-height: 2.6rem;
}
.league-hit:last-child { border-bottom: 0; }
.league-hit:hover, .league-hit:focus { background: var(--surface-2); color: var(--primary); }
.league-empty { padding: .6rem .7rem; color: var(--text-dim); font-size: .85rem; }

.danger-text { color: var(--danger); }

/* ------------------------------------------------------------- suggestions */

.sugg {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  background: var(--surface-2);
}

.sugg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .25rem;
}
.sugg-head b { font-size: .98rem; overflow-wrap: anywhere; }

.sugg-meta { margin-bottom: .45rem; }

.sugg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text);
}

/* The fold-out answer box on the administrator's screen. */
.sugg-actions { margin-top: .6rem; }
.sugg-actions > summary {
  display: inline-block;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}
.sugg-actions > summary::-webkit-details-marker { display: none; }
.sugg-actions > summary:hover { color: var(--primary); border-color: var(--primary); }
.sugg-actions[open] > summary { color: var(--primary); border-color: var(--primary); }
.sugg-actions textarea { min-height: 90px; }

/* The administrator's answer, set off from the suggestion itself. */
.sugg-reply {
  margin-top: .6rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
  line-height: 1.55;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-dim); }
.small { font-size: .85rem; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mb0 { margin-bottom: 0; }

@media (orientation: landscape) and (max-height: 520px) {
  .clock-main { font-size: clamp(3rem, 22vh, 7rem); }
  .shotclock  { font-size: clamp(4rem, 46vh, 14rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------------
   The eye in a password field (js/passwordeye.js)

   The wrapper is slid in around the input by the script, so it must not
   change how the field sits in the form: it is a block, full width, and the
   input inside it keeps its own styling. The button floats over the right
   hand end of the field, with enough padding reserved so long passwords
   never run underneath it.
   ------------------------------------------------------------------------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 2.75rem; }

.pw-eye {
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}

.pw-eye:hover,
.pw-eye:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
.pw-eye:focus-visible { outline: 2px solid #0d6efd; outline-offset: 1px; }