/* S.V. De Treffers — site styles. Mobile first; no build step. */

:root {
  --ink: #14171c;
  --ink-2: #3d434c;
  --muted: #6b717b;
  --line: #e4e2dc;
  --line-strong: #cfccc4;
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --chart-surface: #fcfcfb;
  --accent: #b42318;
  --accent-dark: #8f1b12;
  --accent-soft: #fdecea;
  --ok: #1f6b3a;
  --ok-soft: #e7f4eb;
  --info: #24467f;
  --info-soft: #e8eefa;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20, 23, 28, .04), 0 8px 24px rgba(20, 23, 28, .06);
  --shadow-hover: 0 2px 4px rgba(20, 23, 28, .05), 0 14px 32px rgba(20, 23, 28, .09);
  /* Parts that stay dark in both themes: menu bar, homepage banner, footer. */
  --chrome: #14171c;
  /* Filled "selected" elements (current tab, chip, rank 1) and the text on them. */
  --strong: #14171c;
  --on-strong: #ffffff;
  --field: #ffffff;
  --focus-ring: rgba(20, 23, 28, .12);
  --highlight: #fffaf0;
  --badge-bg: #eeece7;
  --warn: #7a5300;
  --warn-soft: #fdf3dc;
  --ok-line: #c4e2cd;
  --info-line: #cbd8f1;
  --accent-line: #f2c7c2;
  --purple: #5a3d99;
  --purple-soft: #f1ecfb;
  --gold-line: #e3c467;
  --chart-grid: #e1e0d9;
  --chart-others: #c9c8c0;
  --chart-axis: #c3c2b7;
  --part-0: #dbeafe; --part-0-ink: #1e3a8a;
  --part-1: #dcfce7; --part-1-ink: #14532d;
  --part-2: #fef3c7; --part-2-ink: #78350f;
  color-scheme: light;
  --header-h: 64px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Dark theme: chosen with the sun/moon toggle, or the site's default (data-theme on <html>). */
:root[data-theme="dark"] {
  --ink: #ecebe7;
  --ink-2: #c5c7cc;
  --muted: #979ca4;
  --line: #2b2f36;
  --line-strong: #3d424a;
  --bg: #0f1114;
  --surface: #181b20;
  --surface-2: #1f2228;
  --chart-surface: #181b20;
  --accent: #e0483d;
  --accent-dark: #ff7a70;
  --accent-soft: rgba(224, 72, 61, .16);
  --ok: #72d295;
  --ok-soft: rgba(114, 210, 149, .12);
  --info: #94b8f7;
  --info-soft: rgba(148, 184, 247, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
  --chrome: #08090b;
  --strong: #ecebe7;
  --on-strong: #14171c;
  --field: #121418;
  --focus-ring: rgba(236, 235, 231, .18);
  --highlight: rgba(201, 162, 39, .12);
  --badge-bg: #2a2e35;
  --warn: #f2c25b;
  --warn-soft: rgba(237, 161, 0, .16);
  --ok-line: rgba(114, 210, 149, .3);
  --info-line: rgba(148, 184, 247, .3);
  --accent-line: rgba(224, 72, 61, .4);
  --purple: #c3b2f2;
  --purple-soft: rgba(154, 128, 230, .18);
  --gold-line: #8a7329;
  --chart-grid: #2b2f36;
  --chart-others: #4a4f57;
  --chart-axis: #4a5059;
  --part-0: rgba(96, 165, 250, .22); --part-0-ink: #bfdbfe;
  --part-1: rgba(74, 222, 128, .2); --part-1-ink: #bbf7d0;
  --part-2: rgba(250, 204, 21, .2); --part-2-ink: #fde68a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 750; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 650; }
p { margin: 0 0 1em; }

/* Hidden means hidden, also for elements that are flex or grid (e.g. a follow-up question). */
[hidden] { display: none !important; }
.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; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding: 24px 0 64px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* ---------- Header & navigation ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--chrome);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; font-size: 1.05rem; letter-spacing: -.01em; min-width: 0; }
.brand:hover { color: #fff; }
/* Logo sizes are set by moderators (--logo-size, --hero-logo-size in base.html). */
.brand-logo { flex: none; display: grid; place-items: center; width: var(--logo-size, 40px); height: var(--logo-size, 40px); border-radius: 50%; background: #fff; }
.brand-logo img { width: calc(var(--logo-size, 40px) * .65); height: calc(var(--logo-size, 40px) * .78); object-fit: contain; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; color: #fff; cursor: pointer; border-radius: 10px;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute; top: var(--header-h); left: 0; right: 0;
  flex-direction: column; align-items: stretch;
  padding: 8px 16px 20px;
  background: var(--chrome);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.nav-open .nav { display: flex; }
.nav > a, .nav-link-button {
  display: block; padding: 12px 4px; color: rgba(255, 255, 255, .82); text-decoration: none;
  font: inherit; font-weight: 550; font-size: 1rem; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav > a:hover, .nav-link-button:hover, .nav > a[aria-current="page"] { color: #fff; }
.nav > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.nav-form { margin: 0; }
.nav-bell { display: inline-flex !important; align-items: center; gap: 6px; }
.nav-bell svg { width: 18px; height: 18px; }
@media (min-width: 1100px) { .nav-bell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.nav-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; vertical-align: 1px;
}
.unread-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.score-item.is-unread .score-date { font-weight: 800; }
.nav-link-button { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: pointer; }
.nav-cta { color: #fff !important; }

.nav-switches { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; margin: 16px 0 0; }
.lang-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.lang-switch button {
  border: 0; background: transparent; padding: 6px 12px; min-width: 44px; font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: rgba(255, 255, 255, .7); cursor: pointer; border-radius: 999px;
}
.lang-switch button.active { background: #fff; color: #14171c; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); cursor: pointer; }
.theme-toggle:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-icon-light, [data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: block; }

/* The full menu needs room; below this width it folds into the menu button. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 4px;
    padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible;
  }
  .nav > a, .nav-link-button { padding: 8px 9px; border: 0; border-radius: 8px; font-size: .9rem; width: auto; white-space: nowrap; }
  .nav > a:hover, .nav-link-button:hover { background: rgba(255, 255, 255, .07); }
  .nav > a[aria-current="page"] { box-shadow: none; padding-left: 9px; background: rgba(255, 255, 255, .1); }
  .nav-cta { background: var(--accent); }
  .nav-cta:hover { background: var(--accent-dark) !important; }
  .nav-switches { margin: 0 0 0 8px; align-self: center; flex-wrap: nowrap; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden; color: #fff; background: var(--chrome);
  padding: 40px 0 56px;
}
.hero::before {
  /* Concentric target rings, faded towards the text. */
  content: ""; position: absolute; width: 760px; height: 760px; right: -260px; top: 50%; transform: translateY(-50%);
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 46px);
  -webkit-mask-image: radial-gradient(circle, #000 0 45%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 45%, transparent 72%);
  pointer-events: none;
}
.hero-inner { position: relative; display: grid; gap: 28px; align-items: center; }
.hero-logo { width: min(calc(var(--hero-logo-size, 176px) * .68), 60vw); padding: calc(var(--hero-logo-size, 176px) * .08); border-radius: 50%; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); aspect-ratio: 1; object-fit: contain; }
.hero h1 { font-size: clamp(2rem, 7vw, 3.3rem); margin: 0 0 6px; letter-spacing: -.03em; }
.hero .tagline { margin: 0; color: rgba(255, 255, 255, .62); font-size: 1.05rem; }
.hero .intro { margin-top: 16px; max-width: 560px; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
.hero .intro p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero .button-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.hero .button-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

@media (min-width: 760px) {
  .hero { padding: 72px 0 88px; }
  .hero-inner { grid-template-columns: auto 1fr; gap: 44px; }
  .hero-logo { width: var(--hero-logo-size, 176px); padding: calc(var(--hero-logo-size, 176px) * .11); }
}

/* ---------- Layout helpers ---------- */

.section { margin-top: 40px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary::after { content: "▾"; margin-left: 2px; font-size: .8em; }
.export-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-hover); }
.export-menu-list a { padding: 9px 12px; border-radius: 7px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.export-menu-list a:hover { background: var(--bg); color: var(--ink); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.card > :last-child { margin-bottom: 0; }
.card-flush { padding: 0; overflow: hidden; }
.narrow { max-width: 480px; margin: 0 auto; }
.medium { max-width: 760px; margin: 0 auto; }

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

@media (min-width: 640px) {
  .card { padding: 24px; }
  .main { padding-top: 32px; }
}

/* ---------- Home ---------- */

.discipline-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.discipline { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.discipline-code {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--strong); color: var(--on-strong); font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--line-strong);
}
.discipline-name { font-weight: 600; font-size: .92rem; line-height: 1.25; }

.news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.news-card:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.news-card img { width: calc(100% + 40px); max-width: none; margin: -20px -20px 16px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
@media (min-width: 640px) { .news-card img { width: calc(100% + 48px); margin: -24px -24px 16px; } }
.news-card time, .news-meta { font-size: .82rem; color: var(--muted); }
.news-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 1em; }
.news-head .news-meta { margin: 0; }
.news-card h3 { margin: 4px 0 8px; }
.news-card p { color: var(--ink-2); font-size: .95rem; }
.pin { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }

.info-card address { font-style: normal; line-height: 1.7; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.hours small { display: block; color: var(--muted); }
.map { padding: 0; overflow: hidden; min-height: 300px; }
.map iframe { border: 0; width: 100%; height: 100%; min-height: 300px; display: block; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 10px; padding: 6px 0; }
.contact-list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--muted); }

.prose-text { color: var(--ink-2); }
.prose-text p:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  background: var(--accent); color: #fff; border: 1px solid transparent; border-radius: 10px;
  padding: 10px 18px; font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .15s, border-color .15s;
}
.button:hover { background: var(--accent-dark); color: #fff; }
.button-dark { background: var(--strong); color: var(--on-strong); }
.button-dark:hover { background: var(--ink-2); color: var(--on-strong); }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-2); }
.button-danger { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.button-danger:hover { background: var(--accent-soft); color: var(--accent-dark); }
.button-sm { min-height: 36px; padding: 6px 12px; font-size: .87rem; border-radius: 8px; }
.button-block { width: 100%; }
.button svg { width: 18px; height: 18px; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(180, 35, 24, .35);
}
.fab:hover { color: #fff; background: var(--accent-dark); }
.fab svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .fab { display: none; } }

/* ---------- Messages, badges, empty states ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.message { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.message-success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.message-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.message-error, .message-warning { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 650; background: var(--badge-bg); color: var(--ink-2); white-space: nowrap; }
.badge-moderator, .badge-running, .badge-club { background: var(--info-soft); color: var(--info); }
.badge-admin { background: var(--accent-soft); color: var(--accent-dark); }
.badge-upcoming { background: var(--warn-soft); color: var(--warn); }
.badge-cancelled { background: var(--accent); color: #fff; }
.badge-class-aspirant { background: var(--purple-soft); color: var(--purple); }
.badge-class-bestuur { background: var(--strong); color: var(--on-strong); }
.badge-ok, .badge-active { background: var(--ok-soft); color: var(--ok); }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty h2 { color: var(--ink); }
.empty > svg { width: 44px; height: 44px; color: var(--line-strong); margin-bottom: 8px; }
.badge svg { width: 13px; height: 13px; }
a.badge { text-decoration: none; }
.empty .button { margin-top: 8px; }

/* ---------- Tiles & stats ---------- */

.tile { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.tile:hover { border-color: var(--ink-2); color: inherit; transform: translateY(-1px); }
.tile h2 { font-size: 1.05rem; margin-bottom: 4px; }
.tile p { margin: 0; color: var(--muted); font-size: .93rem; }
.tile-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); margin-bottom: 14px; color: var(--ink); }
.tile-icon svg { width: 22px; height: 22px; }

.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.stat { padding: 16px; }
.stat-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.stat-value { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.stat-sub { font-size: .78rem; color: var(--muted); }

/* ---------- Chips / tabs ---------- */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -16px 12px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  text-decoration: none; font-weight: 600; font-size: .9rem;
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-current="true"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.chip .count { font-weight: 500; opacity: .7; font-size: .8rem; }
@media (min-width: 640px) { .chips { margin-left: 0; margin-right: 0; padding-left: 2px; padding-right: 2px; flex-wrap: wrap; } }

/* ---------- Charts ---------- */

.chart-card { background: var(--chart-surface); }
.chart-card h2 { font-size: 1rem; margin-bottom: 2px; }
.chart-card .chart-sub { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.chart-box { position: relative; height: 240px; }
@media (min-width: 640px) { .chart-box { height: 280px; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .82rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 14px; height: 3px; border-radius: 2px; }
.legend .swatch-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Tables (stack into cards on phones) ---------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num, .table .right { text-align: right; }
.table .rank { width: 1%; font-weight: 750; text-align: center; }
.table .row-actions { text-align: right; white-space: nowrap; }
.table tr.is-me td { background: var(--highlight); }
.score { font-weight: 750; font-variant-numeric: tabular-nums; }
.series-list { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.rank-inline { display: none; }
@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
  .rank-inline { display: inline-block; min-width: 1.6em; font-weight: 750; color: var(--accent); }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .table-stack td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; text-align: left; font-weight: 500; }
  .table-stack td[data-label=""]::before { content: none; }
  .table-stack td.cell-title { font-weight: 650; font-size: 1rem; text-align: left; justify-content: flex-start; padding-bottom: 6px; }
  .table-stack td.cell-title::before { content: none; }
  .table-stack td.row-actions { justify-content: flex-end; padding-top: 8px; }
  .table-stack td.row-actions::before { content: none; }
  .table-stack .rank { width: auto; text-align: right; }
}

/* ---------- Notifications & cancelled competitions ---------- */

.notice-icon { flex: none; width: 10px; align-self: stretch; border-radius: 5px; background: var(--line-strong); }
.notice-icon.kind-registration { background: #2a78d6; }
.notice-icon.kind-cancelled, .notice-icon.kind-deleted { background: var(--accent); }
.notice-icon.kind-reinstated { background: var(--ok); }
.notice-icon.kind-withdrawal { background: #eda100; }
.cancelled-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; padding: 14px 18px;
  border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-dark);
}
.cancelled-banner form { margin-left: auto; }
.cancel-form { width: 100%; }
.cancel-form summary { list-style: none; display: inline-flex; }
.cancel-form summary::-webkit-details-marker { display: none; }
.cancel-form[open] .form { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.is-cancelled { text-decoration: line-through; color: var(--muted); }

/* ---------- Posters ---------- */

.poster-layout { display: grid; gap: 16px; }
@media (min-width: 900px) { .poster-layout { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
.poster-options { gap: 16px; }
.choice-row { display: grid; gap: 6px; }
.choice { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin: 0 !important; }
.choice input { accent-color: var(--accent); width: 18px; height: 18px; }
.poster-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.poster-preview img { display: block; width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; }

/* ---------- Calendar ---------- */

.year-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.month { padding: 14px; }
.month h2 { font-size: 1rem; margin-bottom: 6px; text-transform: capitalize; }
.month-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .82rem; font-variant-numeric: tabular-nums; }
.month-table th { font-weight: 600; color: var(--muted); font-size: .7rem; text-transform: lowercase; padding-bottom: 4px; }
.month-table td { text-align: center; height: 32px; padding: 0; vertical-align: top; }
.month-table td.out { visibility: hidden; }
.month-table td.today { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; font-weight: 800; }
.month-table td a { display: block; height: 100%; padding-top: 2px; border-radius: 8px; color: var(--ink); font-weight: 750; text-decoration: none; background: var(--bg); }
.month-table td a:hover { background: var(--line); }
.month-table .dots { display: flex; justify-content: center; gap: 2px; margin-top: 1px; }
.agenda-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.agenda-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .85rem; color: var(--ink-2); }
.agenda-legend li { display: inline-flex; align-items: center; gap: 6px; }
.agenda-legend .agenda-dot { width: 10px; height: 10px; }
/* Kinds of dates: colours from the chart palette, plus red for "closed". */
.kind-activity { background: #2a78d6; }
.kind-meeting { background: #6250d6; }
.kind-closed { background: #b42318; }
.kind-competition { background: #1baf7a; }
.kind-tournament { background: #eda100; }
.kind-deadline { background: #eb6834; }
.kind-duty { background: #0e8a94; }
.kind-roster { background: #7fb8bd; }
.agenda-badge { color: #fff; }
.agenda-badge.kind-tournament { color: #3d2a00; }
.agenda-month h3 { margin: 0; padding: 16px 20px 6px; text-transform: capitalize; }
.agenda-month + .agenda-month { margin-top: 12px; }
.agenda-date { flex: none; display: grid; justify-items: center; width: 44px; line-height: 1.1; }
.agenda-date strong { font-size: 1.3rem; }
.agenda-date span { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 650; }

/* ---------- Photo of a card ---------- */

.photo-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-preview { display: block; margin-top: 12px; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line); }
.photo-preview[hidden] { display: none; }
.photo-buttons .button { position: relative; }
.photo-buttons .button svg { width: 18px; height: 18px; }
.photo-clear { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500 !important; margin: 0 !important; }
@media (hover: hover) and (pointer: fine) { .camera-only { display: none !important; } } /* computers: just upload */
.photo-editor { margin-top: 12px; display: grid; gap: 10px; }
.photo-editor[hidden] { display: none; }
.photo-status { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--info-soft); color: var(--info); font-size: .9rem; }
.photo-status[hidden] { display: none; }
.photo-stage {
  position: relative; border-radius: 10px; overflow: hidden; background: #1b1d21;
  height: min(60vh, 92vw); min-height: 200px;
}
.photo-stage svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* Grips: drag the photo area taller or smaller, and the large window in any direction. */
.photo-grip, .photo-dialog-grip {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 28px; height: 28px; touch-action: none;
  background: linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, .7) 48% 54%, transparent 54% 64%,
    rgba(255, 255, 255, .7) 64% 70%, transparent 70% 80%, rgba(255, 255, 255, .7) 80% 86%, transparent 86%);
}
.photo-grip { cursor: ns-resize; border-top-left-radius: 8px; background-color: rgba(0, 0, 0, .35); }
.photo-dialog-grip { cursor: nwse-resize; opacity: .8; filter: invert(1); }
.photo-dialog .photo-grip { display: none; }
[data-readonly] .photo-stage svg { cursor: grab; }
.photo-rings .ring { fill: none; stroke: rgba(255, 196, 0, .75); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.photo-rings .ring-black, .photo-rings .ring-ten { stroke: #ffc400; stroke-width: 2.2; }
.photo-rings .ring-x { stroke: #ffc400; stroke-width: 1.6; stroke-dasharray: 3 3; }
.photo-hole circle { fill: rgba(42, 120, 214, .35); stroke: #2a78d6; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.photo-hole text { fill: #fff; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #0b1f3a; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.photo-handle { fill: rgba(255, 196, 0, .18); stroke: #ffc400; stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: move; }
.photo-handle-dot { fill: #ffc400; pointer-events: none; }
.photo-view { display: grid; gap: 10px; }
.photo-side { display: grid; gap: 10px; align-content: start; }
.photo-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-bar [hidden] { display: none; }
.photo-zoom-buttons { display: inline-flex; gap: 4px; }
.photo-zoom-buttons .button { min-width: 40px; font-size: 1.15rem; padding-left: 0; padding-right: 0; }
.photo-hint { margin: 0; font-size: .8rem; color: var(--muted); }

/* The large view: most of the screen, not full screen. */
.photo-dialog {
  width: min(96vw, 1400px); height: min(92dvh, 1100px); max-width: 100vw; max-height: 100dvh;
  min-width: 320px; min-height: 360px;
  padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden;
}
.photo-dialog.is-placed { margin: 0; inset: auto; } /* moved or resized by hand: left/top/width/height set inline */
.photo-dialog[open] { display: flex; flex-direction: column; }
.photo-dialog::backdrop { background: rgba(10, 12, 15, .7); }
.photo-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none;
}
.photo-dialog-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.photo-dialog-close:hover { background: var(--bg); color: var(--ink); }
.photo-dialog-body { flex: 1; min-height: 0; padding: 12px; overflow: auto; }
.photo-dialog .photo-view { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-dialog .photo-stage { min-height: 0; height: 100%; max-height: none; display: flex; }
.photo-dialog .photo-stage svg { width: 100%; height: 100%; aspect-ratio: auto !important; }
@media (min-width: 900px) {
  .photo-dialog .photo-view { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
  .photo-dialog .photo-status { grid-column: 1 / -1; }
  .photo-dialog .photo-side { overflow-y: auto; }
}
@media (max-width: 899px) {
  /* Phones: the photo gets the full width and most of the height; the tools scroll below it. */
  .photo-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  .photo-dialog-body { padding: 6px; }
  .photo-dialog .photo-view { height: auto; grid-template-rows: auto; }
  .photo-dialog .photo-stage { height: min(75dvh, 100vw); }
}

.photo-tools { display: grid; gap: 10px; }
.photo-adjust { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.photo-adjust summary { cursor: pointer; font-weight: 650; font-size: .9rem; }
.photo-adjust[open] { display: grid; gap: 8px; }
.photo-adjust [data-photo-value] { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.photo-tools[hidden] { display: none; }
.photo-scores { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.photo-size { display: grid; gap: 4px; font-size: .88rem; font-weight: 600 !important; }
.photo-size input[type=range] { width: 100%; min-height: 32px; accent-color: var(--accent); }

.photo-flag svg, .photo-link svg { width: 14px; height: 14px; vertical-align: -2px; }
.photo-link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; margin-top: 4px; }

/* ---------- Score list ---------- */

.score-list { list-style: none; margin: 0; padding: 0; }
.score-list li + li { border-top: 1px solid var(--line); }
.score-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; color: inherit; text-decoration: none; }
a.score-item:hover { background: var(--surface-2); color: inherit; }
.score-main { min-width: 0; }
.score-date { font-weight: 650; }
.score-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.score-meta:empty { display: none; }
.score-meta .badge { white-space: normal; }
.score-list li.is-me { background: var(--highlight); }
.rank-badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); font-weight: 750; font-variant-numeric: tabular-nums; }
.rank-badge.rank-1 { background: var(--strong); color: var(--on-strong); }
.score-note { font-style: italic; }
.score-side { flex: none; text-align: right; }
.score-side .score { font-size: 1.35rem; line-height: 1.1; }

/* ---------- Discipline tabs (multi-discipline competitions) ---------- */

.discipline-tabs { display: flex; gap: 8px; overflow-x: auto; margin: -8px -16px 20px; padding: 0 16px 4px; scrollbar-width: none; }
.discipline-tabs::-webkit-scrollbar { display: none; }
.discipline-tabs a {
  flex: none; display: flex; flex-direction: column; min-width: 96px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: 1.25;
}
.discipline-tabs a span { font-size: .78rem; color: var(--muted); }
.discipline-tabs a:hover { border-color: var(--ink-2); color: var(--ink); }
.discipline-tabs a[aria-current="page"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.discipline-tabs a[aria-current="page"] span { color: var(--on-strong); opacity: .7; }
@media (min-width: 640px) { .discipline-tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }

/* ---------- Tournament podium ---------- */

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; }
.podium-place {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0;
  padding: 16px 8px 14px; border-radius: var(--radius) var(--radius) 6px 6px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.podium-1 { order: 2; padding-top: 24px; padding-bottom: 28px; border-color: var(--gold-line); background: var(--highlight); }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-medal { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; color: #fff; margin-bottom: 6px; }
.podium-1 .podium-medal { background: #c9a227; width: 46px; height: 46px; font-size: 1.15rem; }
.podium-2 .podium-medal { background: #9aa1aa; }
.podium-3 .podium-medal { background: #b0764a; }
.podium-name { font-weight: 700; font-size: .92rem; line-height: 1.2; overflow-wrap: anywhere; }
.podium-club { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.podium-score { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ---------- Round overview grid ---------- */

.round-grid th, .round-grid td { text-align: center; white-space: nowrap; }
.round-grid th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; text-transform: none; letter-spacing: 0; font-size: .93rem; color: var(--ink); font-weight: 600; box-shadow: 1px 0 0 var(--line); }
.round-grid thead th:first-child { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.round-grid tr.is-me th:first-child, .round-grid tr.is-me td { background: var(--highlight); }
.round-grid thead th { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-2); }
.round-status { font-size: .72rem; font-weight: 500; color: var(--muted); }
.round-status.round-open { color: var(--ok); font-weight: 650; }
.round-count { display: inline-block; min-width: 46px; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--muted); }
.round-count.is-partial { background: var(--warn-soft); color: var(--warn); }
.round-count.is-complete { background: var(--ok-soft); color: var(--ok); }
.round-extended { font-size: .72rem; color: var(--info); font-weight: 600; }
.center { text-align: center; }

/* ---------- Forms ---------- */

.form { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .form-grid.cols-2 > .field:has(textarea), .form-grid.cols-2 > .field:has(.series-input),
  .form-grid.cols-2 > .field:has(.checkbox-list), .form-grid.cols-2 > .field:has(.card-photo),
  .form-grid.cols-2 > .field:has(.discipline-positions),
  .form-grid.cols-2 > .full { grid-column: 1 / -1; }
}
.field { min-width: 0; position: relative; }
.label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.form .label-row label, .label-row .form-label { margin: 0; }

/* "?" explanations next to a label */
.explain { display: inline-block; }
.explain summary {
  list-style: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font-size: .78rem; font-weight: 750; cursor: pointer; user-select: none;
}
.explain summary::-webkit-details-marker { display: none; }
.explain summary:hover { border-color: var(--ink-2); color: var(--ink); }
.explain[open] summary { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.explain-body {
  position: absolute; left: 0; right: 0; top: 32px; z-index: 30; max-width: 520px;
  padding: 12px 14px; border-radius: 10px; background: var(--strong); color: var(--on-strong);
  font-size: .86rem; font-weight: 400; line-height: 1.55; box-shadow: 0 12px 32px rgba(20, 23, 28, .25);
}
.field-check .explain-body { top: 30px; }

.checkbox-tools { display: grid; gap: 8px; margin-bottom: 8px; }
.checkbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.checkbox-actions [data-check-count] { margin-left: auto; }
.form label, .form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .form select, .form textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  font: inherit; font-size: 16px; /* 16px stops iOS from zooming in on focus */
  background: var(--field); color: var(--ink); appearance: none;
}
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b717b' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form select[multiple] { background-image: none; min-height: 140px; }
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); }
.form input[type=file] { font: inherit; font-size: .9rem; max-width: 100%; }
.field-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; align-self: center; }
.field-check > .label-row { order: 2; margin: 0; }
.field-check > .label-row label { font-weight: 550; }
.field-check > input { order: 1; }
.field-check > .helptext, .field-check > .errorlist { order: 3; flex-basis: 100%; margin-top: 0; }
.form input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.form input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.form .field label:has(> input[type=radio]) { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; padding: 4px 0; }
.form .helptext { display: block; color: var(--muted); font-size: .82rem; margin-top: 6px; }
.form .helptext ul { margin: 4px 0 0; padding-left: 18px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--accent) !important; }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
@media (max-width: 639px) { .form-actions .button { flex: 1 1 auto; } }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--accent); font-size: .88rem; }
.errorlist.nonfield, .errorlist.nonform { background: var(--accent-soft); padding: 10px 12px; border-radius: 8px; margin: 0; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; padding: 0; }
.clearable-file-input, .form div:has(> input[type=file]) a { word-break: break-all; }

/* The score of a card: one row, or three (prone, standing, kneeling) on a 3 positions card. */
.series-input { display: grid; gap: 8px; max-width: 420px; }
.series-rows { display: grid; gap: 8px; }
.series-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; }
.series-input[data-three] .series-row { grid-template-columns: 90px minmax(0, 1fr); }
.series-input[data-three][data-scoring="points_time"] .series-row,
.series-input[data-three][data-scoring="hit_factor"] .series-row { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }
.series-input:not([data-three])[data-scoring="points_time"] .series-row,
.series-input:not([data-three])[data-scoring="hit_factor"] .series-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.series-label { font-weight: 650; font-size: .92rem; }
.series-label[hidden] { display: none; }
.form .series-row input { min-width: 0; text-align: center; font-weight: 650; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Positions per discipline on the competition form */
.discipline-positions { display: grid; gap: 10px; }
.position-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.position-group[hidden] { display: none; }
.position-group legend { font-weight: 700; padding: 0 4px; }
.position-options { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.form .position-option { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; padding: 6px 0; cursor: pointer; }
.position-option input { width: 18px; height: 18px; accent-color: var(--accent); }

.series-footer { display: flex; justify-content: flex-end; }
.series-footer[hidden] { display: none; }
.series-total { font-size: .92rem; color: var(--muted); }
.series-total strong { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Which inputs a row shows depends on the discipline's scoring. */
.series-head { display: none; }
.series-input[data-scoring="points"] .series-time,
.series-input[data-scoring="time"] .series-points { display: none; }
.series-input[data-scoring="points_time"] .series-head,
.series-input[data-scoring="hit_factor"] .series-head {
  display: grid; grid-template-columns: 0 minmax(0, 1fr) minmax(0, 1fr); gap: 8px; font-size: .75rem; font-weight: 650; color: var(--muted); text-align: center;
}
.series-input[data-three][data-scoring="points_time"] .series-head,
.series-input[data-three][data-scoring="hit_factor"] .series-head { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }

.checkbox-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.checkbox-list > div { margin: 0; }
.checkbox-list label { display: flex !important; align-items: center; gap: 10px; padding: 10px; margin: 0 !important; border-radius: 8px; font-weight: 500 !important; cursor: pointer; }
.checkbox-list label:hover { background: var(--bg); }
.checkbox-list input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

.formset-row { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.formset-row .form-grid { gap: 12px; }
@media (min-width: 640px) { .formset-row .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }


/* ---------- Long text ---------- */

.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
.prose ol { padding-left: 1.6em; }
.password-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.password-box code { font-size: 1.5rem; font-weight: 750; letter-spacing: .04em; padding: 8px 14px; border-radius: 10px; background: var(--bg); }
.notice { background: var(--bg); border-left: 3px solid var(--accent); padding: 10px 14px; color: var(--ink-2); border-radius: 0 8px 8px 0; }
.article-image { width: 100%; border-radius: var(--radius-sm); margin-bottom: 20px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; font-size: .92rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--chrome); color: rgba(255, 255, 255, .7); font-size: .9rem; padding-bottom: env(safe-area-inset-bottom); }
.site-footer strong { color: #fff; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.footer-links { display: flex; flex-direction: column; gap: 4px; }
.footer-links a { color: rgba(255, 255, 255, .85); }
.footer-links a:hover { color: #fff; }
@media (min-width: 640px) { .footer-links { align-items: flex-end; } }

body.has-fab .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-fab .site-footer { padding-bottom: 0; } }

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

/* Competitions: rankings per position, the general ranking, a shooter's progress */
.position-tabs, .my-competitions { align-items: center; }
.position-tabs { margin-top: -8px; }
.my-competitions > span { flex: none; font-weight: 700; }
.entry-choices { align-items: center; margin-top: -4px; }
.entry-choices > span { flex: none; font-weight: 700; }
.entry-choices .chip svg { width: 14px; height: 14px; vertical-align: -2px; }
.my-competitions .chip svg { width: 14px; height: 14px; vertical-align: -2px; }
.position-tabs > span { flex: none; font-weight: 700; }
.percent-parts { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.winner-list { display: grid; gap: 0; }
.winner-title { font-weight: 700; }
.winner-list .score-meta span { display: inline-flex; align-items: center; gap: 6px; }
.winner-list .score-meta svg { width: 16px; height: 16px; flex: none; color: #c99a06; }
.progress-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 12px 0 0; }
.progress-stats div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.progress-stats dt { font-size: .78rem; color: var(--muted); margin: 0; }
.progress-stats dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.card-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg); display: block; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.score-item.has-thumb { gap: 12px; }

/* ---------- Photos (gallery app) ---------- */

.album-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.album-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.album-card:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.album-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--line); }
.album-card-text { padding: 14px 16px 16px; }
.album-card h2 { font-size: 1.05rem; margin: 0 0 4px; }
.album-card p { margin: 0; color: var(--muted); font-size: .9rem; }

.photo-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(30%, 160px), 1fr)); }
.photo-tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--line); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.photo-tile:hover img { transform: scale(1.04); }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 9, 11, .94); color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 9, 11, .94); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.lightbox-bar > span { flex: 1; }
.lightbox-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox-button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.lightbox-button svg { width: 18px; height: 18px; }
.lightbox-figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 0 12px 12px; min-height: 0; }
.lightbox-figure img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox-figure figcaption { padding: 10px 0 0; text-align: center; color: rgba(255, 255, 255, .85); }
.lightbox-figure figcaption[hidden] { display: none; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 2.2rem; cursor: pointer; }
.lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
/* Horizontal finger movement is the swipe (static/js/gallery.js), not the page panning. */
.lightbox-figure { touch-action: pan-y pinch-zoom; }
.lightbox-figure img { will-change: transform; }
@media (max-width: 639px) { .lightbox-nav { display: none; } } /* phones: swipe */

.news-photos { margin-top: 24px; }
.news-photos h2 { font-size: 1.1rem; }
.news-photos .more { display: inline-block; margin-top: 10px; }
.home-photos .photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(30%, 140px), 1fr)); }

/* Panel: managing an album's photos */
.photo-manager { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.photo-manager-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; }
.photo-manager-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg); }
.photo-manager-item .fields { padding: 8px 10px 10px; display: grid; gap: 6px; font-size: .88rem; }
.photo-manager-item input[type=text] { width: 100%; }
.photo-manager-item label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.photo-manager-item.is-cover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.photo-upload { display: grid; gap: 10px; }
.photo-upload-drop { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; }
.photo-upload-drop svg { display: block; width: 36px; height: 36px; margin: 0 auto 8px; }
.album-card .badge { vertical-align: 1px; }
.photo-upload-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.photo-upload progress { width: 100%; height: 10px; }
.photo-upload progress[hidden] { display: none; }

/* Taking part: disciplines with their positions (shooting/competition_join.html) */
.join-form { gap: 12px; }
.join-row { display: grid; gap: 12px; }
.form .join-discipline { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: 600; font-size: 1rem; }
.join-discipline input { width: 22px; height: 22px; flex: none; }
.join-code { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%; background: var(--strong); color: var(--on-strong); font-weight: 800; font-size: .8rem; }
.join-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.join-positions { border: 0; padding: 0 0 0 34px; margin: 0; min-width: 0; }
.join-positions legend { font-size: .82rem; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 6px; }
/* Positions only matter for a ticked discipline. */
.join-row:has(.join-discipline input:not(:checked)) .join-positions { display: none; }
.join-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .join-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; cursor: pointer; background: var(--surface); }
.join-chip input { width: 18px; height: 18px; margin: 0; }
.join-chip:has(input:checked) { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.join-positions:disabled .join-chip { opacity: .6; cursor: default; }

/* ---------- Weapons ---------- */

.weapon-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.weapon-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.weapon-card:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.weapon-card img, .weapon-card-icon { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface-2); display: grid; place-items: center; }
.weapon-card-icon svg { width: 42px; height: 42px; color: var(--line-strong); }
.weapon-card-text { padding: 12px 16px 16px; }
.weapon-card h3 { margin: 0 0 2px; }
.weapon-card p { margin: 0 0 6px; color: var(--muted); font-size: .9rem; }
.weapon-card.is-retired { opacity: .65; }
.badge-due { background: var(--accent-soft); color: var(--accent-dark); }
.weapon-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .weapon-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .weapon-layout > .card-flush, .weapon-layout > section:nth-child(3) { grid-column: 1 / -1; } }
.weapon-photo { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.photo-credit { margin: 0 0 14px; }
.maintenance-log { margin-top: 16px; border-top: 1px solid var(--line); }
.photo-search { display: grid; gap: 10px; }
.photo-search-bar { display: flex; gap: 8px; }
.photo-search-bar input { flex: 1; min-width: 0; }
.photo-search-results { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.photo-search-results:empty { display: none; }
.photo-search-tile { display: grid; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; color: var(--muted); font-size: .7rem; line-height: 1.3; }
.photo-search-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: 6px; }
.photo-search-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.photo-search-tile.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.weapon-photo-current { max-width: 220px; border-radius: 10px; border: 1px solid var(--line); }

/* Entering the points per shot (shooting/widgets/series.html) */
.series-row .shot-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.series-input[data-three] .series-row .shot-grid { grid-column: 2 / -1; }
.shot-grid[hidden] { display: none !important; }
.form .shot-input { padding: 8px 2px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 0; }
.form .shot-input.is-invalid { border-color: var(--accent); background: var(--accent-soft); }
.form .series-points[readonly] { background: var(--surface-2); }
.form .per-shot-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; margin: 2px 0 0; cursor: pointer; }
.per-shot-toggle[hidden] { display: none; }
.shot-hint { margin: 0; }

/* One score card (shooting/card_detail.html) */
.card-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.card-result .score { font-size: 2.6rem; font-weight: 800; }
.card-shots-title { font-size: .95rem; margin: 18px 0 8px; }
.card-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.card-shots span { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 8px; background: var(--bg); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-detail-photo { display: block; width: 100%; max-height: min(80vh, 900px); object-fit: contain; border-radius: 10px; background: var(--surface-2); }
canvas.is-clickable { cursor: pointer; }

/* Charts: the info box of a point, full screen and print (static/js/charts.js) */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chart-tools { display: flex; gap: 6px; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 150px; max-width: 260px; padding: 10px 12px; border-radius: 8px; background: #14171c; color: #fff; font-size: .82rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip.is-pinned { pointer-events: auto; }
.chart-tooltip-title { font-weight: 700; margin-bottom: 2px; }
.chart-tooltip-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.chart-tooltip-link { display: inline-block; margin-top: 6px; color: #ffcfc9; font-weight: 700; text-decoration: none; }
.chart-tooltip-link:hover, .chart-tooltip-link:focus { color: #fff; text-decoration: underline; }
.chart-card:fullscreen, .chart-card.is-fullscreen { display: flex; flex-direction: column; padding: 24px; background: var(--chart-surface); overflow: auto; }
.chart-card.is-fullscreen { position: fixed; inset: 0; z-index: 200; border-radius: 0; }
.chart-card:fullscreen .chart-box, .chart-card.is-fullscreen .chart-box { flex: 1; height: auto !important; min-height: 300px; }
@media print {
  /* Only the chart card: everything that does not contain it is left out. */
  body.printing-chart *:not(:has(.is-printing)):not(.is-printing):not(.is-printing *) { display: none !important; }
  body.printing-chart *:has(.is-printing) { margin: 0 !important; padding: 0 !important; }
  body.printing-chart .is-printing { width: 100%; padding: 0 !important; border: 0; box-shadow: none; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.printing-chart .is-printing .chart-box { height: 420px !important; }
  .chart-tools, .chart-tooltip { display: none !important; }
}

/* News form: the article's photos, tick to delete */
#id_remove_photos { display: flex; flex-wrap: wrap; gap: 10px; }
#id_remove_photos label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-weight: 400; font-size: .85rem; }
#id_remove_photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; display: block; }

/* Two or three choices side by side (e.g. Top 6 / Everyone in a chart) */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.segmented button, .segmented a { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; white-space: nowrap; }
.segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--ink); color: var(--surface); }
.chart-tools { flex-wrap: wrap; align-items: center; }
.chart-box-tall { height: 320px; }

/* Competition overall: the top 3 of every ranking */
.top-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 12px; }
.top-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: inherit; text-decoration: none; transition: border-color .15s; }
.top-card:hover { border-color: var(--line-strong); color: inherit; }
.top-card-title { font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.top-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.top-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-list .rank-badge { flex: none; }
.top-list .top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list .top-score { font-weight: 700; }
.top-list li.is-me .top-name { font-weight: 700; color: var(--accent); }

/* ---------- Live screen (shooting/competition_live.html) ---------- */
html:has(.live-page) { overflow: hidden; }
/* The page is a size container: the slides follow the screen's own shape, also when the picture is turned. */
.live-page { position: fixed; inset: 0; margin: 0; overflow: hidden; container-type: size; background: var(--bg); color: var(--ink); }
.live-frame { height: 100%; display: flex; flex-direction: column; font-size: clamp(14px, 1.1cqw, 28px); }
/* TV hung portrait with a landscape picture: turn the page (screens.Screen.rotation). */
.live-rotate-90, .live-rotate-270 { inset: auto; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: top left; }
.live-rotate-90 { transform: rotate(90deg) translateY(-100%); }
.live-rotate-270 { transform: rotate(-90deg) translateX(-100%); }
.live-page.is-idle { cursor: none; }
.live-bar { display: flex; align-items: center; gap: 1em; padding: .8em 1.4em; border-bottom: 1px solid var(--line); }
.live-logo { width: 2.6em; height: 2.6em; object-fit: contain; border-radius: 50%; background: #fff; }
.live-heading { flex: 1; min-width: 0; }
.live-competition { font-size: .8em; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.live-title { font-size: 1.6em; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-dots { display: flex; gap: .35em; }
.live-dots span { width: .5em; height: .5em; border-radius: 50%; background: var(--line-strong); }
.live-dots span.is-current { background: var(--accent); }
.live-clock { font-size: 1.6em; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-controls { display: flex; gap: .4em; align-items: center; transition: opacity .3s; }
.live-page.is-idle .live-controls { opacity: 0; }
.live-button { display: grid; place-items: center; width: 2em; height: 2em; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font: inherit; font-size: .9em; cursor: pointer; list-style: none; }
.live-button::-webkit-details-marker { display: none; }
.live-button svg { width: 1em; height: 1em; }
.live-options { position: relative; }
.live-options-form { position: absolute; right: 0; top: 2.6em; z-index: 10; width: 300px; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 15px; }
.live-options-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.live-options-form legend { font-weight: 700; margin-bottom: 4px; }
.live-options-form input[type="number"] { width: 6em; margin-left: 6px; }
.live-slides { flex: 1; display: flex; flex-direction: column; padding: .8em 1.6em; min-height: 0; overflow: hidden; }
.live-slide { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; animation: live-in .5s ease; }
.live-slide [hidden] { display: none !important; }
.live-slide[hidden] { display: none; }
@keyframes live-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.live-table { width: 100%; border-collapse: collapse; font-size: 1.15em; }
.live-table th { text-align: left; font-size: .7em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .4em .6em; border-bottom: 1px solid var(--line); }
.live-table td { padding: .3em .6em; border-bottom: 1px solid var(--line); }
.live-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.live-table th.num:first-child, .live-table td.num:first-child { text-align: left; width: 3em; }
.live-rank { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: .85em; }
.live-rank-1 .live-rank { background: #d4a72c; color: #1d1600; }
.live-rank-2 .live-rank { background: #b8bcc4; color: #15171a; }
.live-rank-3 .live-rank { background: #c07a43; color: #1c0f05; }
.live-name { font-weight: 700; }
.live-score { font-weight: 800; font-size: 1.15em; }
.live-parts span { display: inline-block; margin: 0 .35em .2em 0; padding: .05em .5em; border-radius: 999px; background: var(--surface-2); font-size: .7em; color: var(--ink-2); }
.live-more { color: var(--muted); margin: .8em 0 0; }
.live-slide-tops .top-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: .8em; margin: 0; }
.live-slide-tops .top-card { padding: .8em 1em; font-size: 1em; }
.live-chart-box { position: relative; flex: 1; min-height: 300px; }
.live-legend { font-size: .85em; }
.live-foot { flex: none; display: flex; flex-direction: column; gap: .4em; padding: .4em 1.6em .8em; }
.live-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.live-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
@container (max-width: 700px) {
  .live-dots, .live-clock { display: none; }
  .live-parts { display: none; }
}

/* ---------- Member landing page (accounts/dashboard.html) ---------- */
.member-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 28px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, #14171c 0%, #2a2f38 100%); color: #fff; }
.member-hero h1 { color: #fff; margin: 2px 0 10px; }
.member-hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
/* The KNSA licence number as on a membership card: label and number in one pill. */
.knsa-chip { display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; overflow: hidden; text-decoration: none; letter-spacing: .04em; line-height: 1; }
.knsa-chip span { padding: 5px 8px 5px 10px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); font-size: .7rem; }
.knsa-chip strong { padding: 5px 10px 5px 8px; color: #fff; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.knsa-chip:hover { border-color: rgba(255, 255, 255, .5); }
.member-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: rgba(255, 255, 255, .75); font-size: .9rem; }
.member-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.member-hero .button-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.member-hero .button-ghost:hover { background: rgba(255, 255, 255, .16); }
.member-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0 0 18px; }
.member-stats a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.member-stats a:hover { border-color: var(--line-strong); transform: translateY(-1px); color: inherit; }
.member-stats span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.member-stats strong { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.member-stats small { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-stats .is-good strong, .chart-stats .is-good, .improvement-list .is-good { color: var(--ok); }
.member-stats .is-bad strong, .chart-stats .is-bad, .improvement-list .is-bad { color: var(--accent); }
/* The blocks of the member's page in their order: down the first column, then the second. */
.member-blocks { columns: 2 380px; column-gap: 18px; }
.member-blocks > * { break-inside: avoid; margin: 0 0 18px; }
.member-arrange { margin: -4px 0 0; text-align: center; font-size: .9rem; }
.member-arrange a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.member-arrange svg { width: 16px; height: 16px; }
.member-graph { margin-bottom: 18px; }
/* The graph's disciplines: the one shown stands out, the others are grey but a tap away. */
.graph-disciplines { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.graph-disciplines .chip[aria-pressed="false"] { opacity: .5; }
.graph-disciplines .chip[aria-pressed="false"]:hover { opacity: 1; }
.graph-disciplines .chip[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.improvement-arrow { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--badge-bg); font-weight: 800; color: var(--muted); }
.improvement-arrow.is-good { background: var(--ok-soft); }
.improvement-arrow.is-bad { background: var(--accent-soft); }
.member-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.member-main, .member-side { display: grid; gap: 18px; min-width: 0; }
.section-head-inline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; flex-wrap: wrap; }
.section-head-inline h2 { margin: 0; font-size: 1.1rem; }
.section-head-inline > a, .section-head-actions { font-size: .9rem; }
.section-head-actions { display: flex; gap: 14px; align-items: baseline; }
.member-blocks .empty { padding: 24px 20px; }
.member-news img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.member-links { display: grid; gap: 2px; padding: 8px; }
.member-links a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.member-links a:hover { background: var(--bg); }
.member-links svg { width: 18px; height: 18px; color: var(--muted); }
@media (max-width: 900px) {
  .member-grid { grid-template-columns: minmax(0, 1fr); }
  .member-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .member-hero { padding: 20px; }
  .member-stats strong { font-size: 1.4rem; }
}

.member-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; margin-bottom: 18px; }
.member-charts .chart-head h2 { margin: 0 0 2px; }
.chart-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 4px; }
.chart-stats[hidden] { display: none; }
.chart-stats dt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.chart-stats dd { margin: 0; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.member-weapon img, .member-weapon-icon { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bg); }
.member-weapon-icon { display: grid; place-items: center; color: var(--muted); }
.member-weapon-icon svg { width: 22px; height: 22px; }
.member-weapons-due { display: grid; gap: 6px; margin: 0 20px 18px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: .9rem; }
.member-weapons-due .badge { text-decoration: none; }
.member-hero + .member-stats { margin-top: 0; }
/* Arrange my page (accounts/page_layout.html, Management → Members' page): rows that move up and down. */
.arrange-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arrange-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.arrange-list li.is-off .arrange-label { color: var(--muted); }
.arrange-list label { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; cursor: pointer; }
.arrange-list .arrange-fixed { font-size: .8rem; font-weight: 500; color: var(--muted); }
.arrange-moves { display: flex; gap: 4px; }
.arrange-moves button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer; }
.arrange-moves button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--bg); }
.arrange-moves button:disabled { opacity: .3; cursor: default; }
.arrange-list li.is-moved { border-color: var(--ink); }

/* Live screens: the club TV slides */
.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2em; }
.live-list li { display: flex; align-items: center; gap: 1em; padding: .45em 0; border-bottom: 1px solid var(--line); }
.live-date { flex: none; display: grid; justify-items: center; width: 3.2em; line-height: 1.1; }
.live-date strong { font-size: 1.6em; }
.live-date span { font-size: .8em; color: var(--muted); text-transform: uppercase; }
.live-list-main { min-width: 0; }
.live-list .live-name { font-size: 1.2em; }
.live-list-meta { color: var(--muted); font-size: .9em; margin: .2em 0 0; }
.live-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.6em; align-items: start; height: 100%; }
.live-news:not(:has(img)) { grid-template-columns: minmax(0, 1fr); max-width: 60em; }
.live-news img { width: 100%; max-height: 100%; object-fit: cover; border-radius: 14px; }
.live-news h2 { font-size: 2em; margin: .2em 0 .5em; line-height: 1.15; }
.live-news-body { font-size: 1.1em; line-height: 1.5; color: var(--ink-2); }
.live-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; font-size: 1.15em; }
.live-hours h2 { font-size: 1.4em; }
.live-hours .hours { max-width: none; }
.live-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16em), 1fr)); gap: .6em; align-content: start; }
.live-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.live-message { flex: 1; display: grid; place-items: center; text-align: center; }
.live-message-text { font-size: 2.6em; font-weight: 800; line-height: 1.25; max-width: 22em; }
.live-message-text p { margin: 0 0 .4em; }
@container (orientation: portrait) {
  .live-frame { font-size: clamp(14px, 2.1cqw, 34px); }
  .live-bar { flex-wrap: wrap; }
  .live-heading { flex-basis: 100%; order: 3; }
  .live-dots { display: none; }
  .live-news, .live-hours { grid-template-columns: minmax(0, 1fr); }
  .live-news img { max-height: 40cqh; }
  .live-slide-tops .top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-parts { display: none; }
}
.screen-link { margin-bottom: 16px; }
.screen-link h2 { font-size: 1.05rem; margin: 0 0 4px; }
.screen-link-row { display: flex; gap: 8px; }
.screen-link-row input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; }

/* Choices with an explanation under each (e.g. the type of competition) */
.field:has(.choice-cards) { grid-column: 1 / -1; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.choice-cards label { display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.choice-cards label:hover { border-color: var(--line-strong); }
.choice-cards label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-cards input { margin-top: 3px; flex: none; }
.choice-text { display: grid; gap: 3px; }
.choice-text small { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.form-guide { margin-bottom: 16px; }
.form-guide summary { cursor: pointer; }
.form-guide ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 6px; }

/* Card form: the X shots next to the points */
.score-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) 8.5em; gap: 16px; align-items: start; }
.score-row > .field { min-width: 0; }

/* Score sheet: many cards at once, like a spreadsheet (shooting/competition_sheet.html) */
.sheet-card { padding: 0; overflow: hidden; }
.sheet-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.sheet-tools h2 { margin: 0; }
.sheet-date { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sheet-date input { width: auto; }
.sheet-grid { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.sheet-grid th, .sheet-grid td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sheet-grid thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 0; background: var(--surface-2); }
.sheet-grid thead th.num { text-align: center; }
.sheet-grid tbody th { font-weight: 600; min-width: 190px; }
.sheet-grid tbody tr:nth-child(even) { background: var(--surface-2); }
.sheet-grid tbody tr:focus-within { background: var(--highlight); }
.sheet-name { display: block; }
.sheet-grid input, .sheet-grid select { width: 100%; min-width: 0; padding: 9px 10px; font-size: 1.05rem; }
.sheet-grid input[type="date"] { min-width: 150px; }
.sheet-score { max-width: 110px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet-x { max-width: 70px; text-align: center; }
.sheet-grid tr.has-error { background: var(--accent-soft) !important; }
.sheet-error { color: var(--accent-dark); font-size: .85rem; font-weight: 600; margin-top: 4px; }
.sheet-card .form-actions { padding: 14px 20px 18px; align-items: center; flex-wrap: wrap; }
.sheet-excel { margin-top: 18px; }
.sheet-excel ol { padding-left: 20px; display: grid; gap: 6px; }
.sheet-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Competition page: the facts in one line, management in the "More" menu */
.competition-facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; padding: 0; color: var(--ink-2); font-size: .92rem; }
.competition-facts li { display: inline-flex; align-items: center; gap: 6px; }
.competition-facts svg { width: 15px; height: 15px; color: var(--muted); }
.menu-divider { height: 1px; margin: 4px 6px; background: var(--line); }
.export-menu-list .menu-danger { color: var(--accent-dark); }
.menu-button { width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: .92rem; text-align: left; cursor: pointer; }
.menu-button:hover { background: var(--bg); }
.cancel-panel:not([open]):not(:target) { display: none; }
.cancel-panel summary { font-weight: 700; cursor: pointer; }
.competition-about { margin: -4px 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.competition-about summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; }
.competition-about summary::-webkit-details-marker { display: none; }
.competition-about summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.competition-about[open] summary::before { transform: rotate(90deg); }
.competition-about-teaser { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competition-about-more { color: var(--accent); font-weight: 600; font-size: .9rem; }
.competition-about[open] .competition-about-teaser, .competition-about[open] .competition-about-more { display: none; }
.competition-about .prose-text { margin-top: 10px; }

/* Management → E-mail */
.email-status { display: grid; gap: 4px; margin-bottom: 16px; border-left: 4px solid var(--warn, #eda100); }
.email-status.is-on { border-left-color: var(--ok); }
.email-test { display: flex; flex-wrap: wrap; gap: 10px; }
.email-test input { flex: 1; min-width: 220px; }
.email-texts { border: 0; padding: 0; margin: 18px 0 0; }
.email-texts legend { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.email-texts textarea::placeholder { color: var(--muted); opacity: .75; }

/* Teams & classes */
.team-members .counts { font-weight: 700; color: var(--ink-2); }
.segmented label { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--surface); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.month-table td a.add-day { background: none; font-weight: 400; color: inherit; }
.month-table td a.add-day:hover { background: var(--accent-soft); color: var(--accent-dark); }
.weapon-status { display: inline-flex; gap: 8px; }
.weapons-gone { margin-top: 20px; }
.weapons-gone summary { cursor: pointer; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.weapon-card.is-retired { opacity: .7; }
.competition-tile h2 { margin-bottom: 4px; }
.competition-tile-badges, .competition-tile-events { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.competition-tile-events .badge { font-weight: 600; }

/* Competitions: now & coming up, or the past ones per year */
.past-search { margin-bottom: 14px; max-width: 420px; }

/* The how-to guides (core/help.html) */
.help-search { max-width: 560px; margin-bottom: 18px; }
.help-search input { width: 100%; font-size: 1.05rem; padding: 12px 14px; }
.help-topics { display: grid; gap: 12px; }
.help-topic { padding: 0; }
.help-topic[hidden] { display: none; }
.help-topic > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.help-topic > summary::-webkit-details-marker { display: none; }
.help-topic > summary .tile-icon { margin: 0; flex: none; }
.help-topic-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.help-topic-text strong { font-size: 1.08rem; }
.help-topic-open { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); font-size: 1.2rem; font-weight: 700; transition: transform .15s; }
.help-topic[open] .help-topic-open { transform: rotate(45deg); }
.help-topic-body { padding: 0 18px 18px 72px; }
.help-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.help-steps li::marker { font-weight: 800; color: var(--accent); }
.help-tips { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--highlight); }
.help-tips ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.help-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
@media (max-width: 600px) { .help-topic-body { padding-left: 18px; } }
.help-topic { scroll-margin-top: 80px; }
.field[hidden], .choice-cards > [hidden] { display: none !important; }

/* Discipline pages (shooting/guide_*.html) */
.guide-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.guide-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.guide-card:hover { transform: translateY(-2px); border-color: var(--line-strong); color: inherit; }
.guide-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.guide-card-icon { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--bg); color: var(--muted); }
.guide-card-icon svg { width: 40px; height: 40px; }
.guide-card-text { padding: 16px 18px 18px; }
.guide-card-text h2 { font-size: 1.15rem; margin: 0 0 6px; }
.guide-card-text p { margin: 0; color: var(--muted); font-size: .93rem; }
.guide-card.is-draft { opacity: .7; }
.guide-code { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: .8em; font-weight: 800; vertical-align: 2px; }
.guide-hero { display: grid; gap: 20px; align-items: center; margin-bottom: 8px; }
.guide-hero.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.guide-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; }
.guide-hero h1 { margin: 6px 0 10px; }
.guide-hero p { font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); }
.guide-sections { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-top: 18px; }
.guide-section h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.guide-section h2 .tile-icon { margin: 0; }
.guide-section ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .guide-hero.has-image { grid-template-columns: minmax(0, 1fr); } }
a.discipline { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.discipline:hover { border-color: var(--line-strong); transform: translateY(-1px); color: inherit; }
.export-menu-list { max-width: calc(100vw - 16px); }

/* Knock-out duels: the bracket (shooting/includes/bracket.html) */
.bracket-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 8px; }
.bracket-head h2 { margin: 0 0 4px; }
/* A tournament tree: every round a column of equal slots, so each duel sits halfway between the two it
   comes from. ::after draws the line out of a duel to its pair's meeting point, ::before the line in. */
.bracket { --gap: 34px; --wire: var(--line-strong); --wire-won: var(--accent); display: flex; gap: var(--gap); overflow-x: auto; padding: 8px 20px 20px; scroll-snap-type: x proximity; }
.bracket-round { flex: 1 0 200px; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.bracket-round h3 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; }
.bracket-slots { flex: 1; display: flex; flex-direction: column; }
.bracket-slot { flex: 1; display: flex; align-items: center; position: relative; padding: 6px 0; }
.bracket-slot > * { width: 100%; position: relative; z-index: 1; }
.bracket-round:not(:first-child) .bracket-slot::before { content: ""; position: absolute; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2); top: 50%; border-top: 2px solid var(--wire); }
.bracket-round:not(.bracket-champion-round) .bracket-slot::after { content: ""; position: absolute; right: calc(var(--gap) / -2); width: calc(var(--gap) / 2); height: 50%; border-right: 2px solid var(--wire); }
.bracket-slot:nth-child(odd)::after { top: 50%; border-top: 2px solid var(--wire); border-top-right-radius: 8px; }
.bracket-slot:nth-child(even)::after { bottom: 50%; border-bottom: 2px solid var(--wire); border-bottom-right-radius: 8px; }
/* The final is a single slot: a straight line on to the champion. */
.bracket-round:nth-last-child(2) .bracket-slot::after { height: 0; border-right: 0; border-radius: 0; }
.bracket-slot.is-done::after, .bracket-slot.is-done::before { border-color: var(--wire-won) !important; }
.bracket-champion-round { flex: .8 0 160px; }
.bracket { scroll-padding-inline: 20px; }
@media (max-width: 600px) {
  /* Narrower columns, so the next round peeks in and invites a swipe. */
  .bracket { --gap: 22px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .bracket-round { flex: 0 0 175px; }
  .bracket-champion-round { flex: 0 0 140px; }
  .duel-row { padding: 6px 8px; gap: 6px; }
  .duel-row input { width: 2.6em; }
}
.bracket-champion { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; border: 2px dashed var(--line-strong); border-radius: 14px; text-align: center; color: var(--muted); }
.bracket-champion.has-champion { border: 2px solid #d4a72c; background: linear-gradient(180deg, rgba(212, 167, 44, .18), transparent); color: var(--ink); }
.bracket-trophy { font-size: 2.2rem; line-height: 1; filter: grayscale(1) opacity(.5); }
.has-champion .bracket-trophy { filter: none; }
.bracket-champion strong { font-size: 1.05rem; }
.duel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.duel.is-done { border-color: var(--line-strong); }
.duel-row.is-out .duel-name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.duel-bye { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.duel-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 42px; }
.duel-row + .duel-row { border-top: 1px solid var(--line); }
.duel-row.is-winner { background: var(--ok-soft, #e7f6ec); font-weight: 800; }
.duel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
button.duel-name { border: 0; background: none; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; }
button.duel-name:hover { color: var(--accent); text-decoration: underline; }
.duel-row input { width: 3.2em; padding: 6px; text-align: center; font-weight: 700; }
.duel-plates { font-weight: 800; font-variant-numeric: tabular-nums; }
.duel-default { position: absolute; left: -9999px; width: 1px; height: 1px; }
.duel-form { position: relative; }
/* On the screen the tree fills the slide: columns share the width, slots the height. */
.live-bracket { --gap: 2.2em; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.live-bracket .bracket-round { flex: 1 1 0; min-width: 0; }
.live-bracket .bracket-round h3 { font-size: .8em; }
.live-bracket .bracket-slot { padding: .3em 0; min-height: 0; }
.live-bracket .duel-row { font-size: 1.05em; min-height: 0; padding: .35em .7em; }
.live-bracket .bracket-trophy { font-size: 3em; }
.live-bracket .bracket-champion strong { font-size: 1.3em; }
/* Best of 3/5 in the first round, byes, and changing the duels by hand (shooting/duel_setup.html). */
.bracket-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bracket-best-of { text-transform: none; letter-spacing: 0; font-weight: 600; }
.bracket-round.is-best-of { flex-basis: 240px; }
/* Equal rows: each duel stays halfway between the two it comes from, also next to an empty (bye) place. */
.bracket-slots { display: grid; grid-auto-rows: 1fr; }
/* Best of 3/5, filling in: the name on its own line, the runs below it. */
.is-best-of .duel-form .duel-row { flex-wrap: wrap; row-gap: 4px; }
.is-best-of .duel-form .duel-name { flex-basis: 100%; }
.is-best-of .duel-form .duel-wins { margin-left: auto; }
.bracket-slot.is-empty::after, .bracket-slot.is-empty::before { display: none; }
.duel-row input + input { margin-left: -2px; }
.duel-wins { min-width: 1.6em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.duel-row.is-winner .duel-wins { background: var(--accent); color: #fff; }
.duel-plates + .duel-plates { margin-left: 2px; color: var(--muted); }
.bracket-byes { margin: 0 20px 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: .88rem; }
.bracket-byes summary { cursor: pointer; color: var(--ink); }
.bracket-byes p { margin: 6px 0 0; }
.live-byes { margin: 0 0 .5em; font-size: .85em; }
.duel-setup { padding: 20px; }
.duel-setup-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.duel-setup-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.duel-setup-number { font-weight: 800; color: var(--muted); }
.duel-setup-number::before { content: "#"; }
.duel-setup select.is-twice { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
@media (max-width: 600px) {
  .duel-setup-list li { grid-template-columns: 1.6em minmax(0, 1fr); }
  .duel-setup-list li > span.muted { grid-column: 2; font-size: .85rem; }
  .duel-setup-list li > select:last-child { grid-column: 2; }
}
.duel-setup-list li + li { padding-top: 8px; border-top: 1px solid var(--line); }
/* Editing a round's scores on a phone: every card a small block — the name, then its fields with their labels. */
@media (max-width: 640px) {
  .sheet-stack thead { display: none; }
  .sheet-stack, .sheet-stack tbody { display: block; }
  .sheet-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) 76px 64px; gap: 6px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .sheet-stack th[scope=row] { grid-column: 1 / -1; padding: 0; border: 0; }
  .sheet-stack td { display: grid; gap: 2px; padding: 0; border: 0; text-align: left; }
  .sheet-stack td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .sheet-stack td input:not([type=checkbox]) { width: 100%; min-width: 0; }
  .sheet-stack .sheet-notes { grid-column: 1; }
  .sheet-stack .sheet-notes + td { grid-column: 2 / span 2; }
  .sheet-stack td.num { justify-items: start; }
}
/* Score sheet: cards already entered stand out from the empty rows; a card to delete is struck out. */
.sheet-grid tr.is-entered > * { background: var(--surface-2); }
.sheet-grid tr.is-deleted input:not([type=checkbox]) { text-decoration: line-through; opacity: .5; }
.sheet-rounds { margin-top: -6px; }
.chip-note { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.sheet-tools h2 { margin: 0; }
.sheet-tools p { margin: 2px 0 0; }
.sheet-grid tbody tr:not(.is-repeat) > * { border-top: 2px solid var(--line); }
.sheet-grid tr.is-repeat .sheet-name { color: var(--muted); font-weight: 400; text-decoration: none; }
/* Cards per round per discipline and position (competition form): only with rounds, and only next
   to a ticked position. */
.position-item { display: inline-flex; align-items: center; gap: 6px; }
.discipline-positions .position-cards { display: none; align-items: center; gap: 4px; margin: 0; font-size: .85rem; font-weight: 500; color: var(--muted); }
.position-cards input { width: 3.6em !important; min-height: 0 !important; padding: 4px 6px !important; text-align: center; }
.uses-rounds .discipline-positions .position-cards { display: inline-flex; }
.uses-rounds .discipline-positions legend .position-cards { margin-left: 10px; }
.uses-rounds .discipline-positions .position-item:not(:has(input[type=checkbox]:checked)) .position-cards { display: none; }
.badge-featured { background: #fff4d6; color: #7a5600; }
:root[data-theme="dark"] .badge-featured { background: #3a2f12; color: #f1cf72; }
/* Knock-out results: the round reached instead of a score; a nudge to finish once the final is won. */
.knockout-reached { font-size: 1rem; }
.finish-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-left: 4px solid var(--accent); }
.finish-hint p { margin: 0; flex: 1 1 280px; }

/* Logged in as a member (Management → Members → Log in as): on top of every page. */
.impersonate-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; background: var(--warn-soft); color: var(--warn); font-weight: 700; border-bottom: 1px solid var(--line); }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.online-dot.is-on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.badge .online-dot { margin-right: 5px; vertical-align: middle; }

/* ---------- Management: app-style pages ---------- */
/* The management home lists every option in groups; each page has a back button. Lists of options
   and people are rows you tap for more (made for a phone first). */

.back-link {
  display: inline-flex; align-items: center; gap: 2px; margin: -6px 0 10px -6px; padding: 6px 12px 6px 4px;
  border-radius: 999px; color: var(--ink-2); font-weight: 600; text-decoration: none;
}
.back-link svg { width: 20px; height: 20px; }
.back-link:hover { background: var(--surface); color: var(--ink); }
.page-head-app { margin-bottom: 14px; }
.page-head-app .button svg { width: 18px; height: 18px; }

.menu-groups { display: grid; gap: 22px; }
/* Desktop: two columns that fill like a newspaper, so a short group leaves no gap beside a long one. */
@media (min-width: 900px) {
  .menu-groups { display: block; columns: 2; column-gap: 24px; }
  .menu-groups > .menu-group { break-inside: avoid; margin: 0 0 22px; display: block; }
}
.menu-group > h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 0 0 8px 4px; }
.menu-list {
  list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.menu-list > li + li { border-top: 1px solid var(--line); }
.menu-list form { margin: 0; }
.menu-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; color: inherit; text-decoration: none; }
a.menu-row:hover, button.menu-row:hover:not(:disabled) { background: var(--surface-2); color: inherit; }
button.menu-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.menu-row:disabled { cursor: default; opacity: .55; }
.menu-row.is-inactive { opacity: .6; }
.menu-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--ink); }
.menu-icon svg { width: 20px; height: 20px; }
.menu-text { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.menu-title { display: block; font-weight: 650; line-height: 1.3; }
.menu-title .badge { padding: 1px 8px; font-size: .7rem; vertical-align: 1px; }
.menu-sub { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.menu-end { flex: none; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.menu-end > svg { width: 18px; height: 18px; }
.menu-count { font-weight: 650; font-variant-numeric: tabular-nums; }
.menu-note { margin: 8px 4px 0; }
.text-ok { color: var(--ok); font-weight: 600; }

.avatar {
  position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--badge-bg); color: var(--ink-2); font-weight: 700; font-size: .88rem; letter-spacing: .02em; text-decoration: none;
}
.avatar-guest { background: var(--warn-soft); color: var(--warn); }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar .online-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--surface); }
.avatar-lg .online-dot { width: 16px; height: 16px; right: 2px; bottom: 2px; }

.list-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
@media (min-width: 640px) { .list-tools { grid-template-columns: minmax(0, 1fr) auto; } }
.sort-tools { display: flex; gap: 6px; align-items: center; }
.sort-tools select { flex: 1; min-width: 0; }
.button-icon { width: 44px; height: 44px; padding: 0; flex: none; }
.button-icon svg { width: 20px; height: 20px; }
.button-icon.is-on { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.quick-actions { margin-bottom: 18px; }
.quick-actions .chip svg { width: 16px; height: 16px; }
.stats-compact { margin-bottom: 14px; }
.stats-compact .stat { padding: 12px 14px; }
.stats-compact .stat-value { font-size: 1.5rem; }

.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.profile-head h1 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); }
.profile-head p { margin: 4px 0 0; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-list { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.detail-list > div + div { border-top: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-size: .9rem; }
.detail-list dd { margin: 0; text-align: right; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.target-thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg); border: 1px solid var(--line); }
.target-thumb-empty { display: grid; place-items: center; color: var(--muted); }
.target-thumb-empty svg { width: 28px; height: 28px; }
.target-photo { max-width: 260px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 12px; }
.score-item > .target-thumb + .score-main { flex: 1; }
.agenda-tabs { margin-bottom: 8px; }
.agenda-tabs .chip svg, .chips .chip svg { width: 16px; height: 16px; }
.duty-row.is-mine { background: var(--ok-soft); }
.duty-row .menu-end form { margin: 0; }
.text-warn { color: var(--warn); font-weight: 600; }
.menu-group.is-today > h2 { color: var(--accent); }
/* A row that opens its own page: the whole row is the link, an arrow says so (no "Edit" button). */
.row-chevron { flex: none; display: grid; place-items: center; color: var(--muted); }
.row-chevron svg { width: 20px; height: 20px; }
a.score-item:hover .row-chevron { color: var(--ink); }
.score-row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
li.score-item { gap: 8px; }

/* Poules (shooting/includes/poules.html): a table per poule, its duels round by round. */
.poules { display: grid; gap: 24px; padding: 4px 20px 20px; }
@media (min-width: 1000px) { .poules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.poule h3 { margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.poule-table td, .poule-table th { padding: 8px 8px; }
.poule-table tr.is-through td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.poule-table tr.is-me td { background: var(--accent-soft); }
.poule-through-mark { display: inline-block; width: 3px; height: 12px; background: var(--ok); vertical-align: -1px; margin-right: 4px; }
.poule-note { margin: 6px 0 0; }
.poule-rounds { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.poule-round + .poule-round { border-top: 1px solid var(--line); }
.poule-round > summary { cursor: pointer; font-weight: 650; padding: 12px 14px; display: flex; gap: 8px; align-items: baseline; }
.poule-round[open] > summary { background: var(--surface-2); }
.poule-round .poule-matches { padding: 10px; }
.poule-matches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.duel-actions { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--line); }
.duel-actions .is-on { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.duel-draw { padding: 4px 10px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); text-align: center; }
.poule-ready { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 20px 12px; }
.poule-ready p { margin: 0; }
.target-thumb-sm { width: 36px; height: 36px; border-radius: 10px; }

/* New competition in questions (shooting/competition_wizard.html, static/js/wizard.js). */
.wizard { display: grid; gap: 18px; }
.wizard-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.wizard.is-stepped .wizard-step { min-height: 40vh; }
.wizard-step h2 { margin: 0 0 6px; font-size: 1.3rem; }
.wizard-step > .muted { margin: 0 0 14px; }
.wizard-subquestion { margin-top: 22px !important; font-size: 1.05rem !important; }
.wizard-options { display: grid; gap: 10px; margin-top: 12px; }
.wizard-options-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.wizard-option { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wizard-option:hover { border-color: var(--ink-2); }
.wizard-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wizard-option[hidden], .wizard-group[hidden] { display: none; }
.wizard-option input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.wizard-option .choice-text strong { font-size: 1.02rem; }
.wizard-light { font-weight: 400; color: var(--muted); }
.wizard-group h3 { margin: 14px 0 0; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wizard-number { display: grid; gap: 10px; margin-top: 12px; max-width: 360px; }
.wizard-number input { font-size: 1.4rem; font-weight: 700; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); width: 100%; }
.wizard-number label { font-weight: 650; }
.wizard-presets { margin: 0; padding: 0; }
.wizard-choice-chips { flex-wrap: wrap; margin: 10px 0 0; padding: 0; }
.wizard-choice-chips .chip:has(input:checked) { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.wizard-choice-chips input { position: absolute; opacity: 0; pointer-events: none; }
.wizard-checks { display: grid; gap: 10px; margin: 14px 0; }
.field-check-inline { display: flex; gap: 10px; align-items: center; font-weight: 550; }
.field-check-inline input { width: 20px; height: 20px; accent-color: var(--accent); }
.wizard-step .field { display: grid; gap: 6px; margin-top: 12px; align-content: start; }
.wizard-step .field input, .wizard-step .field textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.wizard-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; margin: 18px 0; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); font-size: .92rem; }
@media (min-width: 560px) { .wizard-summary { grid-template-columns: auto minmax(0, 1fr); } }
.wizard-summary dt { color: var(--muted); }
.wizard-summary dd { margin: 0 0 6px; font-weight: 600; }
.wizard-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wizard-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.wizard-count { margin: -10px 0 0; }
.wizard-nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.wizard-nav [data-wizard-next] { margin-left: auto; min-width: 140px; }
.wizard-errors ul { margin: 6px 0 0; padding-left: 18px; }
.wizard-nav [hidden] { display: none; }
.profile-best { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--ink); }

/* The full competition form in parts that fold open (shooting/competition_form.html). */
.form-sections { display: grid; gap: 12px; }
.form-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-section > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.form-section[open] > summary::after { transform: rotate(-135deg); }
.form-section[open] > summary { border-bottom: 1px solid var(--line); }
.form-section > .form-grid { padding: 18px; }
.form-section-number { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); font-weight: 750; color: var(--ink-2); }
.form-section[open] .form-section-number { background: var(--accent); color: #fff; }
.form-section-title { display: grid; gap: 2px; min-width: 0; }
.form-section-title small { color: var(--muted); font-size: .84rem; }

/* Tasks in the club (range officer, bar…): badges with the name, cards on the member's dashboard. */
.badge-task { background: var(--ok-soft); color: var(--ok); }
.task-cards { margin-bottom: 20px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.task-card { display: grid; gap: 12px; align-content: start; }
.task-card-head { display: flex; gap: 12px; align-items: flex-start; }
.task-card-head h3 { margin: 4px 0 2px; font-size: 1.05rem; }
.task-card-head p { margin: 0; }
.task-duties { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.task-duties a { color: inherit; text-decoration: none; }
.task-duties a:hover { color: var(--accent); }
.task-open { font-weight: 650; font-size: .92rem; }
.task-colleagues { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--muted); font-size: .85rem; }
.avatar-xs { width: 26px; height: 26px; font-size: .65rem; }

/* The date picker on a computer (static/js/site.js); phones keep their own. */
.date-field { position: relative; }
.date-native { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.date-button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field, var(--surface)); color: var(--ink);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.date-button::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.date-button.is-empty { color: var(--muted); }
.date-button:hover, .date-button[aria-expanded="true"] { border-color: var(--ink-2); }
.date-button:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); }
.date-popup { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 308px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.date-popup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.date-popup-head strong { text-transform: capitalize; }
.date-nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.date-nav:hover { background: var(--bg); }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-weekday { font-size: .72rem; font-weight: 650; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.date-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.date-day:hover:not(:disabled) { background: var(--bg); }
.date-day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-strong); font-weight: 700; }
.date-day.is-selected { background: var(--accent); color: #fff; font-weight: 700; }
.date-day:disabled { color: var(--line-strong); cursor: default; }
.date-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.date-popup-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Your own duty: highlighted in the calendar (core/agenda.html). */
.month-table td.my-duty a { background: #0e8a94; color: #fff; }
.month-table td.my-duty a:hover { background: #0b7078; }
.month-table td.my-duty .agenda-dot { box-shadow: 0 0 0 1.5px #fff; }
.agenda-month li.is-my-duty { background: rgba(14, 138, 148, .10); box-shadow: inset 4px 0 0 #0e8a94; }
.agenda-month li.is-my-duty .score-date { font-weight: 800; }
/* Several dates at once (static/js/site.js, data-multi-dates). */
.multi-dates { max-width: 340px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field, var(--surface)); }
.multi-dates-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.multi-dates-list .chip { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.field:has(input[data-multi-dates]) { position: relative; }
/* Notes about a member (Management → Members → the member, and on their account page when shown). */
.note-form { display: grid; gap: 10px; margin-bottom: 12px; }
.note-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); color: var(--ink); }
.note-form-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.note { padding: 12px 16px; }
.note + .note { border-top: 1px solid var(--line); }
.note-text { white-space: normal; }
.note-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.note-meta form { margin: 0; }
.link-button { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.menu-row-danger .menu-title { color: var(--accent); }
.wizard-suboptions { display: grid; gap: 8px; margin-left: 30px; }
/* Cards to approve (shooting/card_approval.html). */
.approval-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.approval-card { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.approval-actions form { margin: 0; }
.approval-reject[open] form { display: grid; gap: 8px; margin-top: 8px; min-width: 240px; }
.approval-reject > summary { list-style: none; }
.approval-reject > summary::-webkit-details-marker { display: none; }
.label-fields { max-height: none; }