/* Home Ice club website: the app's look (deep navy, raised cards, one club color). Print is light. */
:root {
  --ground: #0b1a2e;
  --card: #13263f;
  --line: #22395a;
  --ink: #e8f0f8;
  --muted: #a9bdd4;
  --accent: #2fb4e6;
  --accent-ink: #06121f;
  --accent-text: #2fb4e6;
  --warm: #f0a77a;
  --callout: color-mix(in srgb, var(--accent) 22%, var(--ground));
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; }

h1, h2, .num, .huge, .code { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.05; margin: 0 0 6px; }
h2 { font-size: 22px; margin: 0 0 10px; }
p { margin: 0 0 8px; }
a { color: var(--accent-text); }

.page, .narrow { padding: 28px 16px 48px; margin: 0 auto; }
.page { max-width: 960px; }
.narrow { max-width: 520px; }
.loading { padding: 40px 16px; color: var(--muted); text-align: center; }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.problem { color: var(--warm); }

.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mark { border-radius: 12px; flex: none; object-fit: contain; }
.mark-text { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink);
  font: 700 22px var(--display); }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; }
.top .brand-row { margin: 0; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.top nav a { text-decoration: none; font-weight: 600; }
select { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font: inherit; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 16px; }
.grid .panel { margin: 0; }
.callout { background: var(--callout); }

.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--muted); margin-bottom: 6px; }
.big .num { font-size: 56px; line-height: 1; color: var(--ink); }

.bars { margin: 16px 0 0; }
.bar-row { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.bar.now { background: var(--accent); }
.bar-value { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.bars figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

.section { font-size: 15px; font-family: var(--body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.list { list-style: none; margin: 0; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.list li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--card); color: var(--ink); text-decoration: none; }
.row:hover { background: color-mix(in srgb, var(--card) 85%, white); }
.row > span:first-child { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row .right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.chev { color: var(--muted); font-size: 22px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 16px; }
.stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; }
.stats .num { font-size: 36px; line-height: 1.1; }

.back { display: inline-block; margin-bottom: 16px; text-decoration: none; font-weight: 600; }

label { display: block; font-weight: 600; margin: 12px 0 6px; }
input:not([type=color]):not([type=file]) {
  width: 100%; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 14px 20px;
  border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: 600 16px var(--body);
  text-decoration: none; cursor: pointer; width: 100%;
}
.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button:disabled { opacity: 0.6; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: underline; }
.link.danger { color: var(--muted); margin-top: 18px; }

.code-panel { text-align: center; }
.code { display: block; font-size: clamp(44px, 12vw, 64px); letter-spacing: 0.08em; margin: 6px 0 4px; user-select: all; }
.small-code { font-size: 32px; text-align: left; margin: 0 0 6px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.swatch.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatch.custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); margin: 0; }
.swatch.custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.logo-row .button { width: auto; margin: 0; }
.plain { padding-left: 18px; margin: 0 0 12px; }

.demo-banner { background: var(--callout); border-bottom: 1px solid var(--line); padding: 10px 16px; text-align: center; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--ground);
  padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 8px 30px rgb(0 0 0 / 0.35); }

.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.toolbar .back { margin: 0; }
.toolbar .button { width: auto; margin: 0 0 0 8px; }
.sheet { background: #fff; color: #0b1a2e; border-radius: 18px; padding: clamp(20px, 5vw, 44px); }
.sheet .muted { color: #50627a; }
.sheet .eyebrow { color: #50627a; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin: 28px 0; }
.huge { font-family: var(--display); font-size: 72px; line-height: 1; margin: 6px 0 2px; color: color-mix(in srgb, var(--accent) 70%, #0b1a2e); }
.sheet table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 15px; }
.sheet th, .sheet td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #dfe6ee; }
.sheet th { font-size: 13px; color: #50627a; font-weight: 600; }
.sheet td:not(:first-child), .sheet th:not(:first-child) { text-align: right; }

@media (max-width: 560px) {
  .big .num { font-size: 46px; }
  .row { padding: 14px; }
  .toolbar .button { margin: 8px 8px 0 0; }
}

@media print {
  body { background: #fff; }
  .no-print, .demo-banner, .toast { display: none !important; }
  .page { padding: 0; max-width: none; }
  .sheet { border-radius: 0; padding: 0; }
}