/* Layout: één smalle kolom als een logboek. Per niveau een sectie, per toernooisoort een uitlegblok, daaronder de events als ticketstroken. */
:root {
  /* Same tokens as index.html, so both pages look like one site. */
  --bg: #f6f4ef; --surface: #fff; --text: #1d1d1f; --muted: #6b6b70; --border: #dedad2; --accent: #c0392b;
  /* Text on a red button. Dark mode uses dark text: white on the lighter red is too faint. */
  --on-accent: #fff;
  /* Ticket sales stand out in their own block: green = open, amber = soon, grey = closed. */
  --good: #256b42; --soon: #8a5a00;
  --good-soft: color-mix(in srgb, var(--good) 12%, var(--surface));
  --soon-soft: color-mix(in srgb, var(--soon) 14%, var(--surface));
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-data: ui-monospace, "SF Mono", Menlo, monospace;
}
/* Dark follows the device, unless the button in the top bar chose (data-theme, see shared.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #141416; --surface: #1f1f23; --text: #ececee; --muted: #9a9aa2; --border: #34343a; --accent: #e5604f;
          --on-accent: #141416; --good: #7fd1a1; --soon: #e8b64c;
          --accent-soft: color-mix(in srgb, var(--accent) 4%, var(--surface)); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #141416; --surface: #1f1f23; --text: #ececee; --muted: #9a9aa2; --border: #34343a; --accent: #e5604f;
  --on-accent: #141416; --good: #7fd1a1; --soon: #e8b64c;
  --accent-soft: color-mix(in srgb, var(--accent) 4%, var(--surface)); color-scheme: dark; }
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font-body); -webkit-text-size-adjust: 100%; }
.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; }
/* The top bar is in shared.css. The content uses the full width with the same 16px side margin as the card page;
   running text keeps a line length of about 65 characters. */
.wrap { padding: 24px 16px 64px; display: grid; gap: 40px; }
.content { display: grid; gap: 40px; min-width: 0; }
.intro { display: grid; gap: 14px; }
.eyebrow { font: 600 14px/1.3 var(--font-body); color: var(--accent); }
.page-title { font: 700 clamp(32px, 6vw, 44px)/1.05 var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
.lede { margin: 0; color: var(--muted); max-width: 62ch; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Niveau-teken: drie streepjes, oplopend als een signaalmeter. Altijd naast de tekst, nooit alleen. */
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.bars i { width: 6px; border-radius: 2px; background: var(--border); }
.bars i:nth-child(1) { height: 8px; } .bars i:nth-child(2) { height: 13px; } .bars i:nth-child(3) { height: 18px; }
.bars i.on { background: var(--accent); }

.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rung { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.rung:hover { border-color: var(--accent); }
.rung .top { display: flex; align-items: center; gap: 10px; }
.rung .lv { font: 600 15px/1.2 var(--font-body); color: var(--accent); }
.rung b { font: 700 19px/1.2 var(--font-display); }
.rung .what { font-size: 15px; color: var(--muted); line-height: 1.4; }
.rung .count { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: auto; }
.rung .count::after { content: " ↓"; }

.filterbar { display: grid; gap: 8px; }
.filterbar .flabel { font: 600 15px/1.3 var(--font-body); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font: 600 15px/1 var(--font-body); padding: 10px 14px; min-height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.result { font-size: 15px; color: var(--muted); margin: 0; }

.next { max-width: 760px; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.next .label { font: 600 14px/1.3 var(--font-body); color: var(--muted); }
.next strong { font: 700 20px/1.25 var(--font-display); }
.next span { color: var(--muted); }

.level { display: grid; gap: 26px; scroll-margin-top: 84px; }
.level:focus { outline: none; }
#niveaus { scroll-margin-top: 84px; }
.level-head { display: grid; gap: 8px; border-bottom: 2px solid var(--text); padding-bottom: 14px; }
h2 { margin: 0; display: grid; gap: 4px; }
h2 .lvrow { display: flex; align-items: center; gap: 10px; font: 600 17px/1.2 var(--font-body); color: var(--accent); }
h2 .lvname { font: 700 clamp(26px, 4.5vw, 32px)/1.1 var(--font-display); text-wrap: balance; }
.level-head .sub { margin: 0; font-weight: 600; }
.level-head p { margin: 0; color: var(--muted); max-width: 65ch; }
.back { font-size: 15px; font-weight: 600; color: var(--accent); justify-self: start; text-underline-offset: 3px; }

.type { display: grid; gap: 12px; }
.type-head { display: grid; gap: 8px; }
h3 { font: 700 21px/1.25 var(--font-display); margin: 0; }
h3 .season { font-weight: 600; color: var(--muted); }
.type-head p { margin: 0; max-width: 65ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 16px; margin: 2px 0 0; }
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; min-width: 0; max-width: 60ch; }
.facts a { color: var(--accent); text-underline-offset: 3px; }
.facts ul { margin: 0 0 4px; padding-left: 1.1em; display: grid; gap: 2px; }
.prize-hint { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.prize { position: relative; }
.prize-btn { font: inherit; color: var(--text); background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer; text-align: left; text-decoration: underline dotted var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.prize-btn:hover, .prize-btn[aria-expanded="true"] { color: var(--accent); }
/* Klein fotootje-icoon: zegt dat er een afbeelding achter zit. */
.pic { width: 16px; height: 12px; border: 2px solid var(--accent); border-radius: 3px; position: relative; flex: none; }
.pic::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 4px; background: var(--accent); clip-path: polygon(0 100%, 35% 0, 60% 60%, 75% 30%, 100% 100%); }
.pop { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); width: min(230px, 80vw); }
.pop.two { width: min(400px, 86vw); display: none; }
.pop.wide { width: min(420px, 86vw); }
.pop img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pop.two img { width: calc(50% - 4px); }
.prize-btn[aria-expanded="true"] + .pop, .prize-btn:focus-visible + .pop { display: flex; gap: 8px; }
@media (hover: hover) { .prize:hover .pop { display: flex; gap: 8px; } }
/* Telefoon: geen zwevend venster over de inhoud, maar de afbeelding in de lijst zelf. */
@media (hover: none), (max-width: 600px) {
  .pop { position: static; box-shadow: none; margin: 6px 0 10px; width: min(260px, 100%); }
  .pop.two, .pop.wide { width: 100%; max-width: 420px; }
}
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dt { margin-top: 8px; } }
.list { display: grid; gap: 10px; align-items: start; }
/* Wide screens: the event cards of one type side by side. */
@media (min-width: 900px) { .list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }

.ev { display: grid; grid-template-columns: 84px 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stub { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 14px 6px; background: var(--bg); border-right: 2px dashed var(--border); text-align: center; }
.stub .d { font: 700 20px/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.stub .m { font: 600 13px/1.25 var(--font-body); color: var(--muted); }
.stub .rel { font: 600 13px/1.25 var(--font-body); color: var(--accent); margin-top: 6px; }
/* One row gap and one padding for the whole card, so it reads calm. */
.body { padding: 14px; display: grid; gap: 10px; min-width: 0; }
.body h4 { margin: 0; font: 700 18px/1.25 var(--font-display); }
.place { margin: 0; font-size: 15px; color: var(--muted); }
.place b { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 13px/1.2 var(--font-body); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); }
.chip.lvl { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.chip.lvl .bars { height: 12px; gap: 2px; }
.chip.lvl .bars i { width: 4px; }
.chip.lvl .bars i.on { background: var(--text); }
.chip.lvl .bars i:nth-child(1) { height: 5px; } .chip.lvl .bars i:nth-child(2) { height: 9px; } .chip.lvl .bars i:nth-child(3) { height: 12px; }
/* Only the sales status has a colour of its own: accent for a sale still to come, text for open, muted for closed. */
.note { margin: 0; font-size: 14px; color: var(--muted); }
/* The ticket block: the most important part of a card, so it has a colour of its own. */
.sale { display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--good); background: var(--good-soft); font-size: 15px; }
.sale.soon { border-left-color: var(--soon); background: var(--soon-soft); }
.sale.closed { border: 1px solid var(--border); border-left: 4px solid var(--muted); background: transparent; }
.sale-tag { font-weight: 700; font-size: 14px; color: var(--good); }
.sale.soon .sale-tag { color: var(--soon); }
.sale.closed .sale-tag { color: var(--muted); }
.sale-when { font-weight: 600; }
.sale-via { font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 15px/1.2 var(--font-body); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.links { display: flex; flex-wrap: wrap; column-gap: 16px; }
.tlink { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font: 600 14px/1.2 var(--font-body); text-underline-offset: 3px; }
.pick { display: grid; gap: 6px; padding: 8px 12px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.pick > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.pick[hidden] { display: none; }
/* Calendar button in the date column: icon with "Agenda" below it. */
.stub-cal { margin-top: 8px; min-width: 52px; min-height: 44px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 12px/1 var(--font-body); cursor: pointer; }
.stub-cal:hover, .stub-cal[aria-expanded="true"] { border-color: var(--accent); }
.remind { margin-top: 6px; font-size: 14px; padding: 0 12px; }
.remind svg { flex: none; }
.mi-two { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-two .btn { font-size: 14px; padding: 0 12px; }
.next .sale-alert { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; }
.disclaimer { margin: 0; font-size: 14px; color: var(--muted); }
.empty { color: var(--muted); font-style: italic; margin: 0; }

/* min-width: 0 lets the table scroll inside the card instead of making the card, and the page, wider. */
details.calc { border-top: 1px dashed var(--border); min-width: 0; }
details.calc summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--accent); font-size: 15px; }
.calc-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 6px; font-size: 15px; }
.calc-in input { width: 7em; font: 500 15px/1 var(--font-data); padding: 7px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.calc-in .hint { color: var(--muted); font-size: 14px; flex-basis: 100%; }
.calc-sum { font-size: 15px; color: var(--muted); margin: 0 0 6px; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font: 600 13px/1.25 var(--font-body); color: var(--muted); white-space: normal; vertical-align: bottom; }
td.sure { color: var(--text); font-weight: 700; font-family: var(--font-data); }
td.maybe { font-family: var(--font-data); }
td.maybe small { color: var(--muted); font-family: var(--font-body); }

footer { border-top: 1px solid var(--border); padding-top: 16px; font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
footer div { max-width: 80ch; }
footer a { color: var(--accent); }
/* Phone: the date becomes a line on top of the card, so the content gets the full width. */
@media (max-width: 480px) {
  .ev { grid-template-columns: 1fr; }
  .stub { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 8px 14px; border-right: 0; border-bottom: 2px dashed var(--border); text-align: left; }
  .stub .d { font-size: 16px; }
  .stub { align-items: center; }
  .stub .rel { margin: 0 0 0 auto; }
  .stub > span { white-space: nowrap; }
  .stub-cal { flex: none; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; }
}