:root {
  --green: #1b7f3b;
  --green-surface: #e4f4e9;
  --yellow: #8a6100;
  --yellow-surface: #fdf3d7;
  --red: #b3261e;
  --red-surface: #fbe9e7;
  --purple: #5b3d8f;
  --purple-surface: #f0eaf8;
  --grey: #5b5b5b;
  --grey-surface: #eeeeee;
  --border: #cfcfcf;
}

* { box-sizing: border-box; }

/* The hidden attribute works through a browser rule that easily loses out to a display rule of
   our own. Without this rule a label with display block, for example, simply stays in place
   while it should be hidden. */
[hidden] { display: none !important; }

body {
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  max-width: 52rem;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1a1a1a;
}

h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }

.context {
  margin: 0 0 1.5rem;
  color: var(--grey);
  font-size: 0.9rem;
}

.step { margin-bottom: 2rem; }

.step h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.choices {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

label {
  display: block;
  font-size: 0.9rem;
}

select, input {
  display: block;
  margin-top: 0.25rem;
  padding: 0.45rem 0.5rem;
  min-width: 12rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}

/* On a narrow screen (phone) the grid with ten columns is too much, even with horizontal
   scrolling. Under 640px (the common boundary between phone and tablet/desktop) the page shows
   the grouped list below instead; both views come out of the same overview() call. */
.mobile-view { display: none; }

@media (max-width: 640px) {
  .grid-view { display: none; }
  .mobile-view { display: block; }
}

.grid-scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  font-size: 0.85rem;
}

th, td {
  border: 1px solid var(--border);
  text-align: center;
}

thead th, tbody th {
  padding: 0.35rem 0.5rem;
  background: var(--grey-surface);
  font-weight: 600;
  white-space: nowrap;
}

.cell { padding: 0; }

.cell button {
  display: block;
  padding: 0.4rem 0.3rem;
  width: 100%;
  min-width: 3.1rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

/* The color of a cell says whether conditions apply, the text in it says which. Green is
   therefore "without further ado", yellow is "allowed, but one or more requirements apply"
   (mits, lft, team, max 2, or a combination of those). See cellColor() in cell-text.js. */
.cell.free { background: var(--green-surface); color: var(--green); }
.cell.conditional { background: var(--yellow-surface); color: var(--yellow); }
.cell.no { background: var(--red-surface); color: var(--red); }
.cell.out-of-scope { background: var(--grey-surface); color: var(--grey); }
.cell.empty { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #f4f4f4 4px, #f4f4f4 8px); }

.cell.selected { outline: 3px solid #1a1a1a; outline-offset: -3px; }

/* Text that is not on screen but is read aloud by a screen reader. The standard trick: the
   element shrinks to 1px and is clipped outside the visible area, without display:none (that
   would make the text disappear for screen readers too). */
.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;
}

/* Small triangle in the top right of the cell: the verdict here rests on a point the
   Bondsreglement leaves open (see uncertainties.js). It is the only marker in the grid, so it sits
   in the corner where the eye lands. Purple, so it stands out against the green, yellow, red and
   grey cell backgrounds alike, and the same purple as the block it points at in the detail view.
   The marker is purely visual; see SR_ONLY_UNCERTAIN in app.js for the textual counterpart. */
.uncertain-corner {
  position: relative;
}

.uncertain-corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 0.6rem solid var(--purple);
  border-left: 0.6rem solid transparent;
}

/* Small example of the marker itself, used in the explanation line of the legend and under the
   mobile view. */
.marker-example {
  display: inline-block;
  min-width: 1.7rem;
  margin-right: 0.3rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--green-surface);
  color: var(--green);
  font-weight: 600;
  vertical-align: middle;
}

.legend {
  margin: 0.6rem 0 0;
  color: var(--grey);
  font-size: 0.8rem;
}

.legend-badge {
  margin-left: 0.8rem;
  margin-right: 0.15rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-weight: 600;
}

.legend-badge:first-child { margin-left: 0; }
.legend-badge.free { background: var(--green-surface); color: var(--green); }
.legend-badge.conditional { background: var(--yellow-surface); color: var(--yellow); }
.legend-badge.no { background: var(--red-surface); color: var(--red); }
.legend-badge.out-of-scope { background: var(--grey-surface); color: var(--grey); }

.mobile-category { margin-bottom: 1.25rem; }
.mobile-category:last-child { margin-bottom: 0; }

.mobile-category h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.mobile-group { margin-bottom: 0.6rem; }
.mobile-group:last-child { margin-bottom: 0; }

.mobile-group-heading {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey);
}

.mobile-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mobile-class {
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.mobile-class.free { background: var(--green-surface); color: var(--green); border-color: var(--green-surface); }
.mobile-class.conditional { background: var(--yellow-surface); color: var(--yellow); border-color: var(--yellow-surface); }
.mobile-class.no { background: var(--red-surface); color: var(--red); border-color: var(--red-surface); }
.mobile-class.out-of-scope { background: var(--grey-surface); color: var(--grey); border-color: var(--grey-surface); }

.mobile-class.selected { outline: 3px solid #1a1a1a; outline-offset: -1px; }

/* The short labels of the requirements behind the class label in the mobile view, for example
   "4e klasse mits+lft". A bit smaller than the label itself, so the class stays leading. */
.mobile-requirements {
  font-size: 0.75rem;
  font-weight: 600;
}

/* In the mobile list a corner on a fully round pill would float loose from the shape, so there the
   same marker is a ring around the pill. */
.mobile-class.uncertain {
  box-shadow: inset 0 0 0 2px var(--purple);
}

/* Explanation under the mobile view: a line per requirement with the short label, plus the
   explanation of the ring and of the combined labels. The lines are stacked here instead of
   running on like in the legend under the grid, so without the indentation of the badge. */
.mobile-explanation {
  margin: 0.75rem 0 0;
  color: var(--grey);
  font-size: 0.8rem;
}

.mobile-explanation .legend-badge { margin-left: 0; }

.footnote, .out-of-scope-notice {
  margin: 0.75rem 0 0;
  color: var(--grey);
  font-size: 0.85rem;
}

/* The footnote can be empty: showGrid in app.js sets gridFootnote.textContent = "" on its early
   returns, before there is a grid to annotate. Without this rule the empty element's top margin
   still leaves a gap where the grid would be. */
.footnote:empty {
  display: none;
}

.missing-choices:empty {
  display: none;
}

.out-of-scope-notice {
  padding: 0.9rem 1.1rem;
  border-left: 5px solid var(--grey);
  border-radius: 4px;
  background: var(--grey-surface);
  color: #1a1a1a;
  font-size: 1rem;
}

.birth-date { margin-bottom: 1rem; }

#result {
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--grey);
  border-radius: 4px;
  background: var(--grey-surface);
}

#result.allowed { border-color: var(--green); background: var(--green-surface); }
#result.not-allowed { border-color: var(--red); background: var(--red-surface); }

.verdict { margin: 0; font-size: 1.15rem; font-weight: 600; }

/* Block for outcome.caveats: not a condition to meet, but a warning that this tool cannot judge
   the match day, the round, the club or the matches played. It sits directly under the summary,
   above the conditions (see cautionBlockHtml in app.js). Grey, because it belongs to no marker in
   the grid and shows up at every allowed verdict: in yellow it read as the counterpart of a yellow
   marker, and that was ticket #36. Yellow now means one thing on this page: a condition applies.
   Since rules.js hands over caveats only for allowed verdicts, the block always sits on the green
   surface of #result.allowed, where the grey stands out. */
.caution {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 5px solid var(--grey);
  border-radius: 4px;
  background: var(--grey-surface);
}

#result .caution h3 {
  margin: 0 0 0.4rem;
  color: var(--grey);
}

#result h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

#result ul { margin: 0; padding-left: 1.2rem; }
#result li { margin-bottom: 0.35rem; }

details {
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }

.article-text {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.article-text p { margin: 0 0 0.7em; }
.article-text p:last-child { margin-bottom: 0; }

.article-item {
  position: relative;
  padding-left: 1.3em;
}

.article-item::before {
  content: "•";
  position: absolute;
  left: 0.1em;
}

.article-item-2 {
  padding-left: 2.6em;
}

.article-item-2::before {
  content: "o";
  left: 1.4em;
}

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--grey);
  font-size: 0.85rem;
}

/* The link to the repo in the footer. The brand icon sits left of the text and drops down with
   the line, hence the flex with align-items center instead of a vertical-align. */
.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.repo-icon {
  flex: none;
}

/* The disclaimer sits at the top of the footer and has to stand out without shouting: a bit
   darker than the rest of the footer, with a rule in front of it so that it reads as a block of
   its own. */
.disclaimer {
  border-left: 3px solid var(--border);
  padding-left: 0.9rem;
  color: #3a3a3a;
}

/* The block with the open uncertainties, directly under the verdict. Purple, so it is not confused
   with the yellow of a condition or the red of a rejection: this says nothing about the verdict
   itself, only that the verdict rests on a choice the reglement does not make. Collapsed by
   default, because a combination can carry four uncertainties at once. This is a `details`
   element, so the generic `details` rule above would otherwise also give it a full border; the
   `border: 0` here overrides that cascaded border so only the border-left remains. */
.uncertainty {
  border: 0;
  margin: 0.75rem 0;
  border-left: 5px solid var(--purple);
  background: var(--purple-surface);
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
}

.uncertainty > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--purple);
}

/* The warning sign before the heading. The one emoji this project allows, see the language rule in
   CLAUDE.md: it has to read as a warning at a glance, and a drawn-out /!\ read as punctuation to a
   screen reader. aria-hidden is not needed: the text right after it says the same thing in words. */
.uncertainty > summary::before {
  content: "\26A0\FE0F  ";
  white-space: pre;
}

#result .uncertainty ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.uncertainty li + li {
  margin-top: 0.5rem;
}