/* One look for every phone / laptop page of the clock (start, remote, control, timers, sponsors,
   camera framing, TV cards, PIN), in the club's colours (from the crest: deep purple, gold, plum,
   cream). The TV pages (tv.html, tvview.html, ads.html) have their own styles. */
:root {
  --bg: #1a1322; --panel: #271c33; --panel2: #352645; --line: #4d3a5e; --text: #f9ebc4; --muted: #b9a8c9;
  --accent: #fdce5b; --accent-ink: #2a1a08; --plum: #7d4164; --plum-ink: #fbeedf;
  --warn: #fdce5b; --crit: #ff5a5a; --bad: #ff6b6b; --good: #58c48a;
  --digits: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --radius: 3px; --radius-s: 3px;   /* near-square, the Infinity Curling design system's radius-xs (25 Oct 2026, the user) */
  --edge: #0f0a14;   /* the dark edge under a raised button */
  --line-strong: color-mix(in srgb, var(--line), var(--muted));   /* pill outlines (design system: border-strong) - from each club's colours; High Park: ~#83718f */
  --focus: var(--accent);   /* keyboard focus ring (design system: focus) */
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font, "Segoe UI", system-ui, sans-serif);
  -webkit-text-size-adjust: 100%; }
body { padding: 0 16px calc(28px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 640px; line-height: 1.35; }
body.wide { max-width: 1200px; }
/* laptops (24 Oct 2026): the settings pages use the width - each page lays its parts out side by side from here */
@media (min-width: 900px) { body { max-width: 1200px; padding: 0 28px 32px; } }
[hidden] { display: none !important; }
a { color: var(--accent); }

/* header: crest, page title, where it belongs, way back */
.app-header { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; margin-bottom: 8px;
  border-bottom: 2px solid var(--plum); }
.app-header img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.app-header .titles { flex: 1; min-width: 0; }
.app-header h1 { font-size: 21px; font-weight: 800; line-height: 1.15; color: #fff; }
.app-header .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.app-header .back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-s); background: linear-gradient(#3f2d52, #2d2039); border: 1px solid var(--line); color: var(--text);
  text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 var(--edge); }
.app-header .back:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 var(--edge); }
.app-header .tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* text */
h2.part { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 20px 0 8px; }
.intro, .note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.intro { margin: 6px 0 14px; }
.note { margin-top: 14px; }
.msg { min-height: 22px; margin-top: 12px; font-size: 15px; line-height: 1.45; }
.msg.ok { color: var(--good); }
.msg.bad { color: var(--bad); }

/* cards and pills */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.card h3 { font-size: 17px; font-weight: 800; color: #fff; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 3px 8px; white-space: nowrap; }
.pill.accent { color: var(--accent); border-color: var(--accent); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.good { color: var(--good); border-color: var(--good); }

/* buttons: raised, touch sized; they press down */
.btn, button.btn, .raised { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: linear-gradient(#3f2d52, #2d2039); color: var(--text);
  font: 700 15px/1.2 var(--font, "Segoe UI", system-ui, sans-serif); cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 var(--edge), 0 4px 10px rgba(0,0,0,.45);
  transition: transform .05s, box-shadow .05s; }
/* keyboard focus: a 2px ring, 2px off the button (25 Oct 2026, the Infinity Curling design system) */
a:focus-visible, button:focus-visible, .raised:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:active:not(:disabled), .raised:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 var(--edge); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: linear-gradient(#ffe08a, #f2bd3c); border-color: #c9962a; color: var(--accent-ink); --edge: #7a5a12; }
.btn.good { background: linear-gradient(#3da871, #2a7f52); border-color: #236b45; color: #fff; --edge: #15402a; }
.btn.danger { background: linear-gradient(#5a2a2a, #3f1c1c); border-color: #7a3a3a; color: #ffb3b3; --edge: #1f0b0b; }
.btn.block { width: 100%; }
.btn.big { min-height: 60px; font-size: 19px; }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 14px; }   /* same 3px ledge as the others (design system) */
input, select, textarea { font: inherit; color: #fff; background: #140e1b; border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 10px 12px; min-height: 44px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.actions .btn { flex: 1 1 160px; }
details.card summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 28px; color: #fff; }
details.card summary::before { content: "▸"; color: var(--accent); font-size: 13px; }
details.card[open] summary::before { content: "▾"; }
details.card summary::-webkit-details-marker { display: none; }
details.card > :not(summary) { margin-top: 10px; }

/* live status strip (start page) */
.status { display: grid; gap: 8px; }
.status .sheet { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.status .sheet .no { font: 800 22px var(--digits); color: #fff; }
.status .sheet .no small { display: block; font: 600 10px var(--font, "Segoe UI", system-ui, sans-serif); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.status .sheet .what { font-size: 14px; }
.status .sheet .what b { font-weight: 800; color: #fff; }
.status .sheet .what small { display: block; color: var(--muted); font-size: 12px; }
.status .sheet .clocks { font: 700 16px var(--digits); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.3; }
.status .sheet .clocks span { display: block; }
.status .sheet.live { border-color: var(--accent); }
.status .bell { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--muted);
  padding: 8px 2px 0; }
.status .bell b { color: var(--accent); font: 700 16px var(--digits); }

/* offline banner, used by pages that poll the clock */
.offline { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 12px;
  border-radius: var(--radius-s); background: #a00; color: #fff; text-align: center; font-weight: 700; z-index: 5; }

@media (max-width: 520px) {
  /* phones: title and crest on the first line, the page's controls and the way back on the next */
  .app-header { flex-wrap: wrap; row-gap: 10px; }
  .app-header .titles { flex: 1 1 60%; }
  .app-header h1 { font-size: 19px; }
  .app-header .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-header .tools { margin-left: auto; }
  .app-header .back { padding: 0 10px; font-size: 13px; }
  .app-header .tools + .back { margin-left: 0; }
}