/* Spielfest theme on top of Pico CSS. Colors are tokens so light and dark both work. */

/* The second selector is not decoration. Pico sets its light-scheme colours on
   ":root:not([data-theme='dark'])", which outranks a plain ":root", so our brand
   teal never reached a Pico-styled button and the forms came out azure. Dark mode
   was fine, which is why it went unnoticed: our dark block already matches Pico's
   specificity. Matching it here too, and coming later in the file, wins. */
:root,
:root:not([data-theme="dark"]) {
  --pico-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-font-size: 100%;
  --pico-border-radius: .6rem;
  --pico-primary: #0f766e;
  --pico-primary-hover: #115e59;
  --pico-primary-background: #0f766e;
  --pico-primary-underline: rgba(15, 118, 110, .5);
  --pico-primary-focus: rgba(15, 118, 110, .25);
  --pico-primary-inverse: #fff;
  --st-1: #22a35a;   /* rank 1, weakest */
  --st-2: #2f6fd6;
  --st-3: #ea7a1b;
  --st-4: #a855f7;
  --st-5: #dc2626;
  --st-6: #0891b2;   /* rank 6, strongest possible */
  --brand-bg: #0f766e;
  --brand-bg-2: #0b5f59;
  --brand-fg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7f7;
  --line: #e3e9e8;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --hl-bg: rgba(15, 118, 110, .16);
  --ok: #15803d;  /* open, as the admin shows it; darker to read on white */
  --ok-bg: rgba(34, 197, 94, .14);
  --dim: .32;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-primary: #2dd4bf;
    --pico-primary-hover: #5eead4;
    --pico-primary-background: #0f766e;
    --pico-primary-inverse: #fff;
    --surface: #1a2027;
    --surface-2: #141a20;
    --line: #2a333c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .6);
    --hl-bg: rgba(45, 212, 191, .24);
    --ok: #22c55e;
    --ok-bg: rgba(34, 197, 94, .16);
  }
}
:root[data-theme="dark"] {
  --surface: #1a2027; --surface-2: #141a20; --line: #2a333c; --hl-bg: rgba(45, 212, 191, .24);
  --ok: #22c55e; --ok-bg: rgba(34, 197, 94, .16);
}

body { background: var(--pico-background-color); }
h1, h2, h3 { letter-spacing: -.015em; }
h2 { font-size: 1.35rem; margin-top: 2.2rem; }
main.container { padding-top: 1.75rem; padding-bottom: 3rem; }
.meta { color: var(--pico-muted-color); }
/* A form button that reads as a link, for an action inside a sentence. */
button.link { all: unset; color: var(--pico-primary); text-decoration: underline; cursor: pointer; }
button.link:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }

/* Header */
.brand-bar { background: linear-gradient(90deg, var(--brand-bg), var(--brand-bg-2)); color: var(--brand-fg); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.brand-bar nav { min-height: 3.6rem; }
.brand-bar nav a { color: var(--brand-fg); text-decoration: none; font-weight: 500; opacity: .92; }
.brand-bar nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
.brand-bar .logo { font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; display: flex; align-items: center; gap: .55em; opacity: 1; }
.brand-bar .logo svg { width: 1.5em; height: 1.5em; }
/* The name on one line; on a phone the links move closer, and where even
   then the name does not fit beside them, the mark alone leads home. */
.brand-bar .logo { white-space: nowrap; }
@media (max-width: 30rem) {
  .brand-bar nav li { padding-inline: .4rem; }
  .brand-bar nav a, .brand-bar .logout button { font-size: .95rem; }
  .brand-bar nav.is-busy .logo__name { display: none; }
}
@media (max-width: 24rem) { .brand-bar .logo__name { display: none; } }

/* Our --pico-border-radius of .6rem turns a 20px box into a circle, so a
   checkbox reads as a radio button. Radios keep their own round shape. */
input[type="checkbox"] { border-radius: .25rem; }
input[type="checkbox"][role="switch"] { border-radius: 999px; }

/* The organiser's notes on the schedule page: set apart from the schedule,
   quiet enough not to compete with it. */
.public-notes {
  margin: 0 0 1.4rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--pico-primary);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--surface-2);
}
.public-notes p { margin: 0 0 0.4rem; line-height: 1.55; }
.public-notes p:last-child { margin-bottom: 0; }

/* The invitation note on the sign-up page, dressed like the notes above. */
.invite {
  margin: 0 0 1.4rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--pico-primary);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--surface-2);
}
.invite p { margin: 0 0 0.4rem; line-height: 1.55; }
.invite p:last-child { margin-bottom: 0; }

/* Consent boxes: the box beside its sentence, not above it, and the sentence
   allowed to wrap without sliding under the box. */
.consent { border: 0; margin: 1.2rem 0 1rem; padding: 0; }
.consent label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .1rem .6rem;
  margin: 0 0 .7rem;
  font-size: .92rem;
  line-height: 1.5;
}
.consent label input[type="checkbox"] { margin: .15em 0 0; }
.consent__err { display: block; margin: -.4rem 0 .7rem 1.9rem; color: var(--pico-del-color); }

/* The teams of a registration (register.html): name and strength side by side
   in one row per team, the column heads once above them, the cross for an
   added row at the end. */
.team-rows { border: 0; margin: 0 0 var(--pico-spacing); padding: 0; }
.team-rows__head, .team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.6rem;
  column-gap: .5rem;
  align-items: start;
}
.team-rows__head { margin-bottom: calc(var(--pico-spacing) * .375); }
.team-row > input, .team-row > select { margin-bottom: .5rem; }
.team-row__remove {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: auto;
  margin: 0 0 .5rem;
  padding: 0;
  border-color: var(--pico-form-element-border-color);
  background: transparent;
  color: var(--pico-muted-color);
}
.team-row__remove:hover { border-color: var(--pico-del-color); color: var(--pico-del-color); background: transparent; }
.team-row__remove svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.team-row__err { grid-column: 1 / -1; margin: -.2rem 0 .6rem; color: var(--pico-del-color); }
.team-rows .team-rows__add { width: auto; margin: .1rem 0 .5rem; padding: .35rem .9rem; font-size: .9rem; }
.team-rows > small { display: block; color: var(--pico-muted-color); }
@media (max-width: 519px) {
  /* Too narrow for both side by side: "Anfänger (Superminis)" came out as
     "Anfä…". The strength goes under the name, the cross beside the name, and
     the empty choice says what it asks for. */
  .team-rows__head { grid-template-columns: minmax(0, 1fr); }
  .team-rows__head span + span { display: none; }
  .team-row { grid-template-columns: minmax(0, 1fr) 2.6rem; margin-bottom: .9rem; }
  .team-row > input { grid-column: 1; grid-row: 1; }
  .team-row > select { grid-column: 1; grid-row: 2; }
  .team-row > button, .team-row > span { grid-column: 2; grid-row: 1; }
  .team-row__err { grid-row: 3; }
}
/* The submit button Enter reaches first (register.html), there but unseen.
   Pico's full width for submit buttons would still widen the page. */
button.sf-default-submit[type="submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Footer with the legal pages. Quiet on purpose: it has to be there, it does
   not have to be seen first. */
.site-foot { border-top: 1px solid var(--line); margin-top: 2rem; padding: 1.2rem 0 2rem; }
.site-foot .container { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.site-foot a { font-size: .86rem; color: var(--pico-muted-color); text-decoration: none; }
.site-foot a:hover { color: var(--pico-primary); text-decoration: underline; text-underline-offset: .2em; }
/* The theme switch (js/theme.js): a quiet control among the links, pushed to
   the right; Pico would otherwise make it a full-size button. */
.site-foot .theme-switch { width: auto; margin: 0 0 0 auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--pico-muted-color); font-size: .86rem; cursor: pointer; }
.site-foot .theme-switch:hover { color: var(--pico-primary); text-decoration: underline; text-underline-offset: .2em; }
/* On a phone the links are what a thumb aims at, 21 px high as a line of
   text; the padding makes them 30 without moving them apart. */
@media (max-width: 640px) {
  .site-foot .container { row-gap: 0; }
  .site-foot a, .site-foot .theme-switch { padding-block: .35rem; }
}

/* The legal pages, the guide and the festival list: a reading column, not a
   full-width wall of text. */
.legal, .guide, .upcoming { max-width: 44rem; margin: 0 auto; }
.legal h1, .guide h1, .upcoming h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 0 0 1.2rem; letter-spacing: -.02em; }
.legal h2, .guide h2, .upcoming h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.legal h3, .guide h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.legal p, .guide p, .upcoming p { line-height: 1.65; margin: 0 0 .8rem; }
.legal p.meta { font-size: .88rem; }
.legal code { font-size: .86em; }
/* The guide adds a lead, lists, a checklist and a way in at the end. */
.guide .lead { font-size: 1.12rem; color: var(--pico-muted-color); }
.guide ul { margin: 0 0 .8rem; }
.guide li { line-height: 1.6; margin-bottom: .25rem; }
.guide .checklist { list-style: none; padding-left: 0; }
.guide .checklist li { position: relative; padding-left: 1.7rem; list-style: none; }
.guide .checklist li::before { content: "✓"; position: absolute; left: .2rem; color: var(--pico-primary); font-weight: 700; }
/* By hand and with the planner, side by side; stacked on a phone. */
.guide .versus h3 { margin: 1.6rem 0 .6rem; }
.versus__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 40rem) { .versus__pair { grid-template-columns: 1fr; } }
.versus__side { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.versus__side--planner { border-color: var(--pico-primary); background: var(--hl-bg); }
.guide .versus__side p { margin: 0; line-height: 1.55; }
.guide .versus__side .versus__label { margin-bottom: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pico-muted-color); }
.guide .versus__side--planner .versus__label { color: var(--pico-primary); }
.guide__cta { margin-top: 2.4rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.guide__cta h2 { margin-top: 0; }

/* Handball-Funino.de (templates/funino/): Mini-Spielfest.de's bar, its
   sections as links, and the way to the planner. */
.brand-bar .funino-nav__cta { padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-weight: 600; opacity: 1; }
.brand-bar .funino-nav__cta:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
@media (max-width: 48rem) { .funino-nav__section { display: none; } }
/* On its own domain the name is the site, so on a phone it stays beside the
   button, a little smaller; only below a 360px phone the mark stands alone. */
@media (max-width: 24rem) {
  .brand-bar--funino .logo__name { display: inline; }
  .brand-bar--funino .logo { font-size: .95rem; gap: .45em; }
  .brand-bar--funino .funino-nav__cta { padding: .3rem .6rem; font-size: .88rem; }
}
@media (max-width: 22.4rem) { .brand-bar--funino .logo__name { display: none; } }
.site-foot__by { font-size: .86rem; color: var(--pico-muted-color); }

/* The game formats from 2028/29 (_formats_article.html): the guide's column, with
   drawings of fields and halls (fieldsvg.py) and tabs for the formats. */
.formats__note { padding: .7rem 1rem; border-left: 4px solid var(--pico-primary); border-radius: 0 .6rem .6rem 0; background: var(--hl-bg); font-size: .92rem; }
.formats__small, .formats__source { font-size: .88rem; color: var(--pico-muted-color); }
.formats__source { margin-top: 2rem; }
.formats__ideas, .formats__rules { padding-left: 1.1rem; }
.formats__motto { margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--st-3); background: var(--surface-2); font-size: 1.1rem; font-weight: 600; }
.formats__motto cite { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 400; font-style: normal; color: var(--pico-muted-color); }

/* The four fields to scale: each as wide as its length, all on one floor. */
.growth { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem 1rem; margin: 1rem 0 1.2rem; }
.growth__item { margin: 0; }
.growth__item svg { display: block; width: calc(var(--len) * .36rem); height: auto; }
.growth__item figcaption { display: flex; flex-direction: column; margin-top: .35rem; font-size: .82rem; line-height: 1.35; color: var(--pico-muted-color); }
.growth__item figcaption strong { color: var(--pico-color); }

/* Age group against experience: each format a pill that opens its tab. */
.matrix-wrap { overflow-x: auto; margin: 1rem 0 .6rem; }
.matrix { width: 100%; margin: 0; font-size: .92rem; }
.matrix th, .matrix td { padding: .55rem .6rem; vertical-align: top; }
.matrix thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pico-muted-color); }
.matrix td { min-width: 7.5rem; }
.matrix__format { display: inline-block; margin: 0 .3rem .3rem 0; padding: .2rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; }
.matrix__format:hover, .matrix__format.is-active { border-color: var(--pico-primary); background: var(--hl-bg); text-decoration: none; }
.matrix__none { color: var(--pico-muted-color); }
@media (max-width: 40rem) {
  /* Four columns do not fit a phone: one block per age group, each level a
     line with its name in front, and no line for a level the group lacks. */
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { padding: .5rem 0 .3rem; border-bottom: 1px solid var(--line); }
  .matrix th[scope="row"], .matrix td { padding: .15rem 0; border: 0; background: none; }
  .matrix th[scope="row"] { font-weight: 700; }
  .matrix td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-width: 0; }
  .matrix td::before { content: attr(data-label); flex: 0 0 7.5rem; font-size: .8rem; color: var(--pico-muted-color); }
  .matrix td:has(.matrix__none) { display: none; }
}

/* The tabs above the format cards. */
.ftabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .8rem; scroll-margin-top: 1rem; }
.ftabs button { width: auto; margin: 0; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; font-size: .92rem; font-weight: 600; }
.ftabs button:hover { border-color: var(--pico-primary); }
.ftabs button[aria-selected="true"] { border-color: var(--pico-primary); background: var(--pico-primary); color: var(--pico-primary-inverse); }
.fcard { margin: 0 0 1.4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.fcard h3 { margin: 0 0 .2rem; font-size: 1.25rem; }
.fcard__field-name { margin-left: .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pico-primary); }
.guide .fcard__tag { margin-bottom: .8rem; color: var(--pico-muted-color); }
.fcard__field { margin: 0 0 1rem; }
.fcard__field svg { display: block; width: 100%; height: auto; max-height: 22rem; }
.fcard__field figcaption { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .4rem; font-size: .82rem; color: var(--pico-muted-color); }
.pf-legend { display: inline-flex; align-items: center; gap: .35rem; }
.pf-legend::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50%; box-sizing: border-box; }
.pf-legend--a::before { background: var(--pico-primary); }
.pf-legend--b::before { background: var(--st-3); }
.pf-legend--gk::before { border: 2px solid var(--pico-muted-color); width: .9rem; height: .9rem; }
.pf-legend--fly::before { border: 2px dashed var(--pico-muted-color); width: .9rem; height: .9rem; }
.fcard__facts { display: grid; grid-template-columns: 8.5rem 1fr; gap: .35rem 1rem; margin: 0 0 .8rem; font-size: .93rem; }
.fcard__facts dt { color: var(--pico-muted-color); }
.fcard__facts dd { margin: 0; }
.fcard__rules { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
@media (max-width: 40rem) {
  .fcard { padding: 1rem; }
  .fcard__facts { grid-template-columns: 1fr; gap: 0; }
  .fcard__facts dt { margin-top: .55rem; font-size: .8rem; }
}

/* The halls, two side by side where there is room. */
.halls { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem 1rem; margin: 1rem 0; }
.hall { margin: 0; }
.hall svg { display: block; width: 100%; height: auto; }
.hall figcaption { display: flex; flex-direction: column; gap: .1rem; margin-top: .45rem; font-size: .88rem; line-height: 1.4; }
.hall figcaption strong { color: var(--pico-color); font-size: .95rem; }
.hall__fields { color: var(--pico-primary); font-weight: 600; }
.hall__note { color: var(--pico-muted-color); }

/* The page's last word: what it means for those who plan with
   Mini-Spielfest.de, and the way there, in the guide's closing card. */
.formats .fsec--yours { border-left: 4px solid var(--pico-primary); }

/* The table of contents is for wide screens only, see below. */
.formats__toc { display: none; }
.fcard[hidden] { display: none; }

/* Wide screens: the page leaves the guide's column and uses the width. */
@media (min-width: 64rem) {
  .guide.formats { max-width: 76rem; }
  .formats__head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: end; }
  .guide.formats h1 { font-size: 2.7rem; }
  .formats__head .lead { margin-bottom: 0; }
  .formats__head .formats__note { margin: 0; }
  .formats__toc {
    position: sticky; top: 0; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .4rem;
    margin: 1.8rem -.5rem 0; padding: .6rem .5rem;
    background: var(--pico-card-background-color, var(--surface));
    border-bottom: 1px solid var(--line);
  }
  .formats__toc a { margin: 0; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; }
  .formats__toc a:hover { border-color: var(--pico-primary); background: var(--hl-bg); }
  .fsec { margin-top: 2.8rem; }
  .fsec > h2:first-child { margin-top: 0; }
  .formats h2 { font-size: 1.45rem; scroll-margin-top: 4.5rem; }

  /* The four fields larger, and the three ideas as cards in a row. */
  .growth { gap: 1.2rem 2rem; }
  .growth__item svg { width: calc(var(--len) * .62rem); }
  .formats__ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; list-style: none; }
  .guide .formats__ideas li { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); list-style: none; }
  .formats__ideas li strong { display: block; margin-bottom: .2rem; color: var(--pico-primary); }

  /* The table beside what it means. */
  .fsec--finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); grid-template-rows: auto auto 1fr; gap: 0 3rem; }
  .fsec--finder > h2, .fsec--finder > p { grid-column: 1; }
  .fsec--finder > .matrix-wrap { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .matrix { font-size: 1rem; }
  .matrix th, .matrix td { padding: .8rem .9rem; }

  /* A format's field beside its facts. */
  .fcard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; padding: 1.6rem 1.8rem; }
  .fcard > h3, .fcard > .fcard__tag { grid-column: 1 / -1; }
  .fcard > h3 { font-size: 1.5rem; }
  .fcard__field { grid-column: 1; grid-row: 3 / span 2; margin: 0; }
  .fcard__field svg { max-height: none; }
  .fcard__facts { grid-column: 2; grid-row: 3; grid-template-columns: 7.5rem 1fr; }
  .fcard__rules { grid-column: 2; grid-row: 4; }

  /* Three halls in a row, and the rules beside the festival. */
  .halls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .fsec-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; align-items: start; }
  .formats .guide__cta { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: .5rem 2rem; align-items: center; }
  .formats .guide__cta h2 { grid-column: 1 / -1; }
  .formats .guide__cta .cta { flex-direction: column; }
}

/* The drawings: floor, fields, zones and goals, and the two teams. */
.pf { overflow: visible; }
.pf-floor { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.pf-field { fill: color-mix(in srgb, var(--st-1) 20%, var(--surface)); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.pf-field--alt { fill: color-mix(in srgb, var(--st-3) 18%, var(--surface)); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.pf-zone { fill: color-mix(in srgb, var(--pico-primary) 24%, transparent); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.pf-dash { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 2; stroke-dasharray: 6 5; }
.pf-mark { stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.pf-goal { fill: var(--pico-color); }
.pf-curtain { stroke: var(--pico-muted-color); stroke-width: 2.5; stroke-dasharray: 8 6; }
.pf-a { fill: var(--pico-primary); stroke: var(--surface); stroke-width: 1.5; }
.pf-b { fill: var(--st-3); stroke: var(--surface); stroke-width: 1.5; }
.pf-gk { fill: none; stroke-width: 2; }
.pf-gk--a { stroke: var(--pico-primary); }
.pf-gk--b { stroke: var(--st-3); }
/* The festival list: a filter, then one card per festival, month by month. */
.upcoming .lead { font-size: 1.12rem; color: var(--pico-muted-color); }
/* Like the home page's eyebrow. */
.upcoming .upcoming__association { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pico-primary); }
.upcoming__filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem 1rem; margin: 1.2rem 0 .5rem; }
.upcoming__filter label { margin: 0; font-size: .85rem; color: var(--pico-muted-color); }
.upcoming__filter select { margin: .25rem 0 0; }
.upcoming__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.upcoming__list li { list-style: none; margin: 0; }
.upcoming__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
@media (hover: hover) { .upcoming__item:hover { border-color: var(--pico-primary); } }
.upcoming__main { flex: 1 1 18rem; display: flex; gap: 1rem; align-items: baseline; min-width: 0; color: inherit; text-decoration: none; }
/* The whole card is the link; the registration button sits on top of it.
   On a phone it wraps below, on the right. */
.upcoming__main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.upcoming__register { position: relative; z-index: 1; margin-left: auto; padding: .35rem .95rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .upcoming__register:hover { box-shadow: inset 0 0 0 1px var(--ok); text-decoration: none; } }
.upcoming__closed { margin-left: auto; font-size: .85rem; color: var(--pico-muted-color); white-space: nowrap; }
.upcoming__badge { margin-left: auto; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--pico-muted-color); white-space: nowrap; }
.upcoming .upcoming__example-intro { margin: 1.2rem 0 .5rem; font-size: .92rem; color: var(--pico-muted-color); }
.upcoming__date { flex: 0 0 5.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pico-primary); }
.upcoming__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.upcoming__where, .upcoming__note { font-size: .88rem; color: var(--pico-muted-color); }
/* ".upcoming p" sets the margins of every paragraph here; these two need more. */
.upcoming .upcoming__empty { margin-top: 1.5rem; color: var(--pico-muted-color); }
.upcoming .upcoming__cta { margin-top: 2rem; font-size: .92rem; color: var(--pico-muted-color); }

/* Home */
.hero { padding: 3rem 0 1.5rem; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.08; margin-bottom: .8rem; max-width: 22ch; }
.hero p.lead { font-size: 1.15rem; max-width: 46rem; color: var(--pico-muted-color); line-height: 1.55; }
.hero [role="button"] { margin-right: .5rem; }
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0 2.5rem; }
.steps article, .fests article, .card { margin: 0; padding: 1.35rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); }
.steps .num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--pico-primary-background); color: #fff; font-weight: 700; margin-bottom: .7rem; }
.steps h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.steps p { margin: 0; font-size: .95rem; color: var(--pico-muted-color); line-height: 1.5; }
.rules { columns: 2; column-gap: 2.5rem; font-size: .97rem; padding-left: 1.2rem; }
.rules li { break-inside: avoid; margin-bottom: .35rem; }
@media (max-width: 700px) { .rules { columns: 1; } }
.fests { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.fests h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.fests h3 a { text-decoration: none; }
.fests h3 a:hover { text-decoration: underline; }
.fests .meta { font-size: .9rem; line-height: 1.5; }
.fests p:last-child { margin-bottom: 0; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12em .6em; border-radius: 1em; vertical-align: middle; }
.tag.draft { color: #9a4b00; background: rgba(234, 122, 27, .14); }
.tag.published { color: #146c2e; background: rgba(34, 163, 90, .16); }

/* Strength badges and team chips */
.badge { display: inline-block; min-width: 1.7em; padding: 0 .38em; border-radius: .35em; font-size: .7em;
  font-weight: 700; letter-spacing: .02em; color: #fff; text-align: center; vertical-align: middle; line-height: 1.7; }
.st-1 { background: var(--st-1); } .st-2 { background: var(--st-2); } .st-3 { background: var(--st-3); }
.st-4 { background: var(--st-4); } .st-5 { background: var(--st-5); } .st-6 { background: var(--st-6); }
.team { display: inline-flex; align-items: center; gap: .4em; padding: .15em .55em .15em .35em; border-radius: .5em;
  color: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
/* A flex item: a long name squeezed the badge into "A" over "N". */
.team .badge { flex: none; }
/* Hover only where there is a mouse: a phone keeps the :hover of a tap until the
   next one, which read as a stray highlight (js/schedule.js does the same). */
.team.hl { background: var(--hl-bg); border-color: var(--pico-primary); text-decoration: none; }
@media (hover: hover) { .team:hover { background: var(--hl-bg); border-color: var(--pico-primary); text-decoration: none; } }
.team.active { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem .5rem; margin: .5rem 0 1.1rem; }
.chips .team { border-color: var(--line); background: var(--surface); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .3rem 0 .6rem; font-size: .92rem; }
.legend span { white-space: nowrap; }

/* Schedule */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; margin: .2rem 0 1rem; }
.toolbar a { font-weight: 600; }
.block { margin-top: 1.25rem; }
.block + .block { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.warmup { display: inline-flex; gap: .6em; align-items: baseline; padding: .45em .9em; border-radius: .6em; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: .8rem; }
.table-wrap { border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); overflow: auto; }
.schedule { margin: 0; }
.schedule thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pico-muted-color); }
.schedule th, .schedule td { border-color: var(--line); vertical-align: middle; padding: .55rem .8rem; }
.schedule tbody tr:last-child td { border-bottom: 0; }
.schedule .n { width: 3.6rem; text-align: center; color: var(--pico-muted-color); }
.schedule .kickoff { width: 5.2rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* A pair too wide for its column breaks between the teams, never inside a
   name, instead of running out of the frame (stacked below, where it would). */
.schedule .match { white-space: normal; }
.schedule .team { white-space: nowrap; }
.schedule .vs { color: var(--pico-muted-color); margin: 0 .3em; }
table.schedule.striped tbody tr:nth-child(odd) > td { background-color: transparent; }
table.schedule tbody tr.pause > td { background: var(--surface-2); color: var(--pico-muted-color); font-size: .85rem; font-weight: 600; padding-top: .35rem; padding-bottom: .35rem; }
table.schedule.striped tbody tr:nth-child(even) > td { background-color: color-mix(in srgb, var(--surface-2) 60%, transparent); }
/* Highlighting the whole row painted everything, including matches the team
   is not in. The kickoff answers "when", the chip answers "who", and that is
   what someone scanning for their team needs. */
table.schedule tbody tr.hl-row > td.kickoff,
table.schedule tbody tr.hl-row > td.n { background-color: var(--hl-bg); }
table.schedule tbody tr.hl-row > td.kickoff { font-weight: 800; }
/* A block filters when one of its teams is chosen (js/schedule.js); the others stay whole. */
.block.filtering .schedule tr:not(.has-team) { display: none; }
.block.filtering .schedule td.match:not(.has-team) { opacity: var(--dim); }
.filter-banner { display: none; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 1rem; border-radius: .7rem;
  background: var(--hl-bg); border: 1px solid var(--pico-primary); margin-bottom: 1rem; }
.block.filtering .filter-banner { display: flex; }
.filter-banner a { margin-left: auto; white-space: nowrap; font-weight: 600; }
.filter-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter-chip { all: unset; cursor: pointer; padding: .15em .7em; border-radius: 1em; font-size: .9em; font-weight: 600;
  background: var(--pico-primary-background); color: #fff; }
@media (hover: hover) { .filter-chip:hover { opacity: .85; } }
.qr { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.qr svg { width: 6.5rem; height: 6.5rem; background: #fff; padding: .3rem; border-radius: .5rem; }
.qr p { margin: 0; font-size: .9rem; }

@media (max-width: 600px) {
  main.container { padding-top: 1rem; }
  .steps article, .fests article { padding: 1.1rem; }
}

/* Teams grouped by strength as in the editor of the admin: a band in the
   level's colour per group, its name and number in a column of their own,
   the chips beside them wrapping in theirs. Side by side the groups ran into
   a single wall of chips with no telling where one began; with the name in
   a row that wrapped, a group whose chips fitted the line kept them beside
   it and the others wrapped them under it. On a phone the name is above. */
.chip-groups { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 1.1rem; }
.chip-group {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .4rem .5rem .4rem .75rem;
  border-left: 4px solid var(--lvl);
  border-radius: 0 .6rem .6rem 0;
  background: color-mix(in srgb, var(--lvl) 7%, transparent);
}
.chip-group__label { display: inline-flex; flex: 0 0 10rem; align-items: center; gap: .45rem; padding-top: .3rem; font-weight: 600; }
.chip-group__count { padding: 0 .4em; border-radius: .6em; background: color-mix(in srgb, var(--lvl) 22%, transparent); font-size: .75rem; }
.chip-groups .chips { flex: 1 1 auto; min-width: 0; margin: 0; }
.lvl-1 { --lvl: var(--st-1); } .lvl-2 { --lvl: var(--st-2); } .lvl-3 { --lvl: var(--st-3); }
.lvl-4 { --lvl: var(--st-4); } .lvl-5 { --lvl: var(--st-5); } .lvl-6 { --lvl: var(--st-6); }
@media (max-width: 640px) {
  .chip-group { flex-direction: column; gap: .35rem; }
  .chip-group__label { flex: none; padding-top: 0; }
}

/* The two teams of a match one above the other, where side by side they do
   not fit a field's column: below 1280 px always (on a phone on its side the
   table ran off the screen, on a small desktop every pair broke at its dash),
   wider from three fields on. Stacked they line up, and the chips are tighter,
   or a round grew a quarter taller; still over the 24 px a finger needs. Where
   even one name per line is too wide, it breaks inside its chip rather than
   cutting off the last field. */
@media (max-width: 1279px) {
  .schedule .match .team { display: flex; width: fit-content; white-space: normal; line-height: 1.3; padding-block: .1em; }
  .schedule .match .vs { display: none; }
  .schedule .match .vs + .team { margin-top: .1rem; }
}
@media (min-width: 1280px) {
  .schedule:not(.fields-1, .fields-2) .match .team { display: flex; width: fit-content; white-space: normal; line-height: 1.3; padding-block: .1em; }
  .schedule:not(.fields-1, .fields-2) .match .vs { display: none; }
  .schedule:not(.fields-1, .fields-2) .match .vs + .team { margin-top: .1rem; }
}

/* Narrower than a desktop the schedule takes the whole width, which Pico's
   containers (510 and 700 px) left unused, and the round moves under its
   kickoff: a row is two lines high anyway, and the column it had is what a
   third field needs. */
@media (max-width: 1023px) {
  .schedule-page .container { max-width: none; padding-inline: var(--pico-spacing); }
  .schedule { font-size: .94em; }
  .schedule th, .schedule td { padding: .4rem .5rem; }
  .schedule .kickoff { width: 4rem; }
  .schedule .n { display: none; }
  .schedule td.kickoff::after {
    content: "Runde " attr(data-round);
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: var(--pico-muted-color);
  }
}

/* Phones: the table needs more columns than there is room for. Each round
   becomes a card instead, with the kickoff as its heading and one row per
   field: the field as a narrow tag, its two teams one above the other. */
@media (max-width: 680px) {
  .table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .schedule, .schedule tbody, .schedule tr, .schedule td { display: block; width: auto; }
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule tbody tr {
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: .6rem;
    padding: .55rem .7rem;
  }
  table.schedule.striped tbody tr:nth-child(even) > td { background: none; }
  .schedule td { border: 0; padding: .2rem 0; }
  .schedule .n { display: inline; width: auto; text-align: left; font-size: .8rem; }
  .schedule .n::before { content: "Runde "; }
  .schedule .kickoff { display: inline; width: auto; margin-left: .5rem; font-size: 1.05rem; }
  .schedule td.kickoff::after { content: none; }
  /* A pause is a line between two rounds, not a round: without the "Runde"
     its empty number cell used to show, and slimmer than a card. */
  .schedule tbody tr.pause { padding-block: .15rem; background: var(--surface-2); box-shadow: none; }
  .schedule tr.pause .n { display: none; }
  .schedule .match {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: .5rem;
    align-items: center;
    padding: .35rem 0 0;
    border-top: 1px solid var(--line);
    margin-top: .3rem;
  }
  /* "FELD" over the number, where "FELD 1" on one line took a quarter of
     the width and squeezed the names into two lines each. */
  .schedule .match::before,
  .schedule .match::after { grid-column: 1; text-align: center; }
  .schedule .match::before {
    content: "Feld";
    grid-row: 1;
    align-self: end;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pico-muted-color);
  }
  .schedule .match::after { content: attr(data-field); grid-row: 2; align-self: start; font-weight: 700; line-height: 1.2; }
  .schedule .match > * { grid-column: 2; }
  /* A card has the width for the full size. */
  .schedule { font-size: 1em; }
  /* A field without a match says nothing a card needs to say. */
  .schedule .match.empty { display: none; }
  table.schedule tbody tr.hl-row > td.kickoff,
  table.schedule tbody tr.hl-row > td.n { background: none; }
  .schedule tbody tr.hl-row { border-color: var(--pico-primary); box-shadow: 0 0 0 1px var(--pico-primary); }
  .block.filtering .schedule td.match:not(.has-team) { display: none; }
}

@media print { .brand-bar, .site-foot, .filter-banner, .toolbar, .chips { display: none !important; } .table-wrap { box-shadow: none; } }

/* Logging out is a POST, so the control is a button that has to look like the
   other links in the bar. */
.brand-bar .logout { display: inline; margin: 0; }
.brand-bar .logout button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.brand-bar .logout button:hover { text-decoration: underline; }

/* ==========================================================================
   Landing page.

   Deliberately not the admin's look: this is the one page a stranger sees
   first, so it carries its own type scale and rhythm. Everything stays on the
   existing colour tokens, so light and dark keep working.
   ========================================================================== */

.home main.container {
  max-width: 68rem;
  /* Pico drops its gutter once a max-width is set, so it is restated here. */
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}

.home .hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
}

.home .eyebrow {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-primary);
}

.home .hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}

.home .hero h1 .hl {
  background: linear-gradient(100deg, var(--brand-bg), var(--pico-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home .lead {
  max-width: 34rem;
  margin: 0 0 1.8rem;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--pico-muted-color);
}

.home .cta, .guide .cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

.home .btn, .guide .btn {
  display: inline-flex;
  align-items: center;
  padding: .72rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.home .btn:hover, .guide .btn:hover { transform: translateY(-1px); }
.home .btn--primary, .guide .btn--primary { background: var(--brand-bg); color: var(--brand-fg); box-shadow: 0 8px 20px -10px var(--brand-bg); }
.home .btn--primary:hover, .guide .btn--primary:hover { background: var(--brand-bg-2); }
.home .btn--ghost, .guide .btn--ghost { border-color: var(--line); color: inherit; }
.home .btn--ghost:hover, .guide .btn--ghost:hover { border-color: var(--pico-primary); }
.home .flow__more { margin: 1.2rem 0 0; color: var(--pico-muted-color); }

.home .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.6rem 0 0;
}

.home .facts div { margin: 0; }

/* A notice between the buttons and the figures, across the hero's width. */
.home .news { margin: 2.2rem 0 0; }
.home .news + .facts { margin-top: 2rem; }
.home .news a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface);
  font-size: .95rem;
  line-height: 1.45;
  text-decoration: none;
}
.home .news a:hover { border-color: var(--pico-primary); }
.home .news__tag {
  flex: none;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home .news__text { flex: 1; color: var(--pico-muted-color); }
.home .news__text strong { color: var(--pico-h2-color); }
.home .news__go { flex: none; color: var(--pico-primary); font-weight: 700; }
/* On a phone one flowing text, the tag and the arrow inside its lines. */
@media (max-width: 40rem) {
  .home .news a { display: block; }
  .home .news__tag { margin-right: .35rem; vertical-align: .08em; }
  .home .news__go { margin-left: .25rem; }
}
.home .facts dt { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1; color: var(--pico-primary); }
.home .facts dd { margin: .3rem 0 0; font-size: .86rem; color: var(--pico-muted-color); }

/* The three steps: a numbered spine so the order reads at a glance. */
.home .flow { padding: 3rem 0 1rem; }
.home .flow h2, .home .closing h2 {
  margin: 0 0 1.8rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -.02em;
}

.home .flow__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.home .step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.3rem;
  padding: 0 0 2.2rem;
}

/* The spine, drawn behind the numbers and stopping at the last step. */
.home .step::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--line), transparent);
}

.home .step:last-child { padding-bottom: 0; }
.home .step:last-child::before { display: none; }

.home .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-size: 1.15rem;
  font-weight: 700;
}

.home .step__body h3 { margin: .45rem 0 .5rem; font-size: 1.22rem; letter-spacing: -.01em; }
.home .step__body p { margin: 0 0 .5rem; max-width: 42rem; line-height: 1.62; }
.home .step__hint { font-size: .88rem; color: var(--pico-muted-color); }


.home .closing { padding: 1rem 0 3.5rem; }
.home .closing p { max-width: 40rem; line-height: 1.62; color: var(--pico-muted-color); }
.home .closing .cta { margin-top: 1.4rem; }

@media (max-width: 640px) {
  .home .hero { padding-top: 2.2rem; }
  /* The whole width each, where three pills of three widths stood ragged
     one under the other. */
  .home .cta .btn { flex: 1 1 100%; justify-content: center; }
  .home .facts { gap: 1.6rem; }
  .home .facts dt { font-size: 1.7rem; }
  .home .step { grid-template-columns: 2.4rem 1fr; gap: 0 1rem; }
  .home .step::before { left: 1.2rem; top: 2.4rem; }
  .home .step__num { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home .btn:hover { transform: none; }
}

/* The exponent in the hero: superscript without pushing the line apart. */
.home .lead sup, .home .facts sup { font-size: .62em; vertical-align: super; line-height: 0; }
.home .lead strong { color: var(--pico-primary); font-weight: 700; white-space: nowrap; }
.home .facts dt { white-space: nowrap; }
/* "bis zu 40": the limit reads as one, the number stays the figure. */
.home .facts dt small { font-size: .5em; font-weight: 700; }

/* Closing section: words on one side, a mock of the schedule on the other. */
.home .closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
  padding: 2.5rem 0 4rem;
}

.home .lead__setup { display: block; font-weight: 600; color: var(--pico-contrast); margin-bottom: .35rem; }

/* Tilted so it reads as a picture of the product rather than part of the page. */
.home .preview { perspective: 1400px; }

.home .preview__frame {
  transform: rotateY(-9deg) rotateX(3deg) rotate(-1.5deg);
  transform-origin: left center;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 30px 60px -25px rgb(0 0 0 / 55%), 0 2px 8px rgb(0 0 0 / 12%);
  padding: 1rem 1.1rem 1.2rem;
  font-size: .82rem;
}

.home .preview__head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .8rem; }
.home .preview__title { font-weight: 700; font-size: 1.05rem; }
.home .preview__sub { font-size: .74rem; color: var(--pico-muted-color); }

.home .preview__filter {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .3rem .6rem;
  border: 1px solid var(--pico-primary);
  border-radius: .5rem;
  font-size: .73rem;
  color: var(--pico-muted-color);
}

.home .preview__filter em { font-style: normal; font-weight: 600; color: var(--pico-primary); }

.home .preview__rounds { list-style: none; margin: 0; padding: 0; }

.home .preview__rounds li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .42rem .2rem;
  border-top: 1px solid var(--line);
}

.home .preview__rounds li.on .t { color: var(--pico-primary); }
.home .preview__rounds li:not(.on) { opacity: .45; }
.home .preview__rounds .t { font-variant-numeric: tabular-nums; font-weight: 700; width: 3.2rem; }
.home .preview__rounds .m { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.home .preview__rounds u { text-decoration: none; color: var(--pico-muted-color); margin: 0 .15rem; }

.home .preview__rounds .b {
  width: .85rem;
  height: .85rem;
  border-radius: .25rem;
  flex: 0 0 auto;
}

.home .preview__rounds .b1 { background: var(--st-3); }
.home .preview__rounds .b2 { background: var(--st-2); }
.home .preview__rounds .b3 { background: var(--st-1); }

@media (max-width: 860px) {
  .home .closing { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 3rem; }
  .home .preview__frame { transform: rotate(-1deg); transform-origin: center; }
}

@media (prefers-reduced-motion: reduce) {
  .home .preview__frame { transform: none; }
}

/* Slim header on focused pages: the mark leads home, nothing else competes. */
.brand-bar--slim nav { justify-content: flex-start; }
.brand-bar--slim ul { margin: 0; padding: 0; }

/* "Why an account?" as a popover on the signup page.
 *
 * A <details> rather than a dialog with a script: this page ships no
 * JavaScript, and this works with none. The question is the trigger, so anyone
 * who already knows never has to read past it.
 */
.why { margin: 1.1rem 0 1.5rem; }

/* The underline sits on the text, not on the summary. On the summary it
   propagated into the ::after circle and struck right through it, and
   text-decoration cannot be switched off again on a descendant. */
.why summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pico-primary);
}

.why__q { text-decoration: underline; text-underline-offset: .2em; }

/* Both are needed: the pseudo-element for WebKit, ::marker for the rest.
   With display:inline-flex on the summary the native arrow reappears. */
.why summary::-webkit-details-marker { display: none; }
.why summary::marker { content: ""; }
/* Pico draws its own chevron as a background image on summary::after, which an
   empty content does not remove. */
.why summary::after { display: none !important; }

.why__mark { display: inline-flex; flex: 0 0 auto; }

.why__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.why__icon .why__dot { fill: currentColor; stroke: none; }
.why__icon--close { display: none; }
.why[open] .why__icon--open { display: none; }
.why[open] .why__icon--close { display: inline; }

/* In the flow, not floating. Floating, it covered the fields below it, and
   nothing an absolutely positioned box does can push them out of the way. */
.why__panel {
  margin-top: .6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.why__panel p { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.55; color: var(--pico-muted-color); }
.why__panel p:last-child { margin-bottom: 0; }
.why__panel strong { color: var(--pico-contrast); font-weight: 600; }