/* Get the Jersey - design system, ported 1:1 from prototype v8 (Get The Jersey v8.dc.html).
   Order: fonts, tokens, base, layout, masthead, footer, buttons, forms, cards, home, browse,
   model, tables, dialogs, utilities, legacy shims, pages section (owner: pages agent).
   Radius is 0 everywhere, the 1px #161616 rule is the only frame, one shadow for floating layers.
   No dark block: this is a paper design, color-scheme is light (round-1-gtj.md, "Dark Mode entfaellt"). */

/* fonts - the four faces of the brand kit, self-hosted; blocks copied verbatim from fonts/FONTFACE.css */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/barlow-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/barlow-condensed-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/barlow-condensed-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/geist-400-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/geist-400-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* tokens - the whole palette, type scale and rhythm of the design; nothing outside this block invents a value */
:root{
  color-scheme:light;
  /* colour (v8 design system) */
  --ink:#161616;                    /* text, frames, primary buttons - the base colour of the system */
  --muted:#5d5b56;                  /* secondary text, meta, labels; 6.0:1 on --paper */
  --faint:#6b6960;                  /* placeholders only; 4.9:1 on --paper */
  --petrol:#0f6b6b;                 /* accent: links, 01/02/03, focus ring; 5.6:1 on --paper. Round 2, point 8: no
                                       longer the footer plane - petrol stays the accent of the light half of the page. */
  --sleeves:#508b8b;                /* second petrol step, hover on petrol planes */
  /* Round 2, point 8 - the two colours the dark footer needs. Both computed against --ink #161616 (relative
     luminance 0.00802, so every ratio below is (L+0.05)/0.05802):
       --muted-on-dark #9a978e  L 0.30949  ->  6.20:1   (kickers and the legal line; the bar is 4.5:1)
       --petrol-on-dark #508b8b L 0.22036  ->  4.66:1   (link hover)
     Plain --petrol #0f6b6b reaches only 2.88:1 on ink, which is why the hover uses the system's second petrol
     step instead: still petrol, still the accent, but legible. Reference values for the plane itself:
       #fff     18.10:1  (links)          --paper #f2f1ed  15.98:1  (body copy)   --mist #b2d1ce  11.13:1 (logo) */
  --muted-on-dark:#9a978e;          /* muted text on --ink; 6.2:1 */
  --petrol-on-dark:#508b8b;         /* petrol accent on --ink (link hover); 4.66:1 */
  --paper:#f2f1ed;                  /* page ground */
  --surface:#e9e8e2;                /* image planes behind shirts, row hover */
  --white:#fff;                     /* inputs, cards, price panel */
  --mist:#b2d1ce;                   /* light petrol plane (the highlighted collection card) */
  --mist-ink:#cfe5e3;               /* light petrol text; 4.8:1 on --petrol. Round 2, point 8 took the petrol plane
                                       out of the footer, so this is now only used inside the page (pages section). */
  --wash:#dfeceb;                   /* notice plane (alert saved) */
  --danger:#b3261e;
  --line:#161616;                   /* 1px, the frame that carries the design */
  --line-soft:rgba(22,22,22,.16);   /* inner dividers */
  --line-tile:rgba(22,22,22,.2);    /* club tiles and colour swatches */
  --float:0 16px 32px -20px rgba(22,22,22,.4);   /* the only shadow: suggest list, sheet, dialog */
  /* type */
  --display:'Barlow Condensed','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t:15px; --t-lg:16px; --t-lead:17px;
  --d-hero:clamp(60px,7.4vw,120px); --d-page:clamp(40px,4.6vw,68px); --d-name:clamp(46px,5.4vw,84px);
  --d-h2:clamp(30px,3.2vw,44px); --d-h3:clamp(26px,2.6vw,36px);
  /* rhythm */
  /* --header-h is the one number every sticky offset and scroll-padding in this file reads (round 2, point 4).
     --head-h is the former name, kept as an alias so page-level CSS that already used it keeps working. */
  --wrap:1440px; --pad:clamp(16px,4vw,56px); --sec:clamp(56px,7vw,104px); --header-h:72px; --head-h:var(--header-h);
  --grid-card:repeat(auto-fill,minmax(min(100%,max(168px,21vw)),1fr));
  --grid-card-gap:32px clamp(12px,1.8vw,28px);
}

/* base - one body font, tabular numerals everywhere, no rounding, no underline until it is a prose link */
*,::before,::after{box-sizing:border-box}
/* Every in-page jump clears the sticky masthead. This is the ONLY offset in the file - no element adds its own
   scroll-margin-top on top of it, or an anchor lands 90px too low (round 2, point 4). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t)/1.5 var(--body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--petrol)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit;border-radius:0}
input::placeholder{color:var(--faint)}
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
::selection{background:var(--petrol);color:#fff}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* skip link - first tab stop, sits on the paper as a bordered block once focused */
.skip{position:absolute;left:-9999px;top:0;z-index:80}
.skip:focus{left:var(--pad);top:8px;display:inline-flex;align-items:center;min-height:44px;background:var(--ink);
  color:var(--paper);padding:0 16px;font-weight:500}

/* display type - Barlow Condensed, always uppercase; 900 for names, 600 for section heads and labels */
.d1,.d2,.d3,.d-name,h1.d1{font-family:var(--display);text-transform:uppercase;letter-spacing:.002em;font-weight:900;margin:0}
.d1{font-size:var(--d-hero);line-height:.88;text-wrap:balance}
.d-name{font-size:var(--d-name);line-height:.9;text-wrap:balance}
.d-page{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:var(--d-page);line-height:.92;letter-spacing:.002em;margin:0;text-wrap:balance}
.d2{font-weight:600;font-size:var(--d-h2);line-height:1}
.d3{font-weight:600;font-size:var(--d-h3);line-height:1}
/* kicker - 13px Barlow 600, wide tracking, muted; the small label above every heading */
.kicker{font-family:var(--display);font-weight:600;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.kicker.dash{display:flex;align-items:center;gap:12px;letter-spacing:.16em}
.kicker.dash::before{content:"";width:28px;height:2px;background:var(--petrol);flex:none}
.lead{font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}

/* layout - one 1440 column with fluid side padding; sections are separated by a rule, not by a box */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
main{display:block}
.page{padding-top:clamp(20px,3vw,36px)}
.section{margin-top:var(--sec)}
/* section head - rule on top, h2 left, one line of context (or a petrol text link) right */
.section-head{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px 24px;flex-wrap:wrap;margin-bottom:20px}
.section-head>*{min-width:0}
.section-head h2,.section-head .d2{font-family:var(--display);font-weight:600;font-size:var(--d-h2);line-height:1;text-transform:uppercase;margin:0}
.section-head .ctx{display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;font-size:var(--t-md);color:var(--muted)}
.section-head a{font-weight:500;color:var(--petrol)}
.section-head a:hover{text-decoration:underline}
/* back bar - "<- All clubs" left, "Country - Season" kicker right, above every detail page */
.backbar{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;font-size:var(--t-md)}
.backbar a{display:inline-flex;align-items:center;gap:8px;font-weight:500;min-height:32px}

/* masthead - 72px tall, hairline-hard bottom rule, logo left, main nav, alerts right, menu button below 1100px.
   Round 2, point 4: it stays at the top of the viewport on every screen size, phone included. The plane is --paper
   so the page reads as one sheet, and the 1px rule is what separates it - until the page is scrolled, when
   `.stuck` adds a short shadow under that rule so the header sits above the content instead of in it.
   z-index 50 puts it over the page but under the skip link (80), the dialog (70) and the filter sheet (60). */
.topbar{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.topbar.stuck{box-shadow:var(--float)}
/* 1x1 marker at the very top of the document; app.js watches it to know whether the header is stuck. Out of flow,
   so it moves nothing. Without JavaScript it simply never fires and the header keeps the plain rule. */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.topbar .wrap{display:flex;align-items:center;gap:12px 32px;min-height:var(--header-h);padding-top:10px;padding-bottom:10px}
.brand{display:block;flex:none;padding:4px 0}
.brand img{display:block;width:clamp(240px,19vw,260px);height:auto}
.brand:hover{color:inherit}
.nav-main{display:flex;gap:6px 26px;font-size:var(--t);font-weight:500;flex-wrap:wrap}
.nav-main a[aria-current=page]{color:var(--petrol)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px 20px}
.top-right .alerts{display:inline-flex;align-items:center;min-height:32px;font-size:var(--t);font-weight:500;white-space:nowrap}
/* (Round 2, point 1: the "Prototype - sample data" badge and its .flag rule are gone. The listings on this site are
   real dealer records, so the note was simply untrue; it came in from the v8 mock-up.) */
.menu-btn{display:none;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);font-size:var(--t-md);font-weight:500}
.menu-btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
/* mobile menu - a plain list of rules, opened by the menu button, closed on navigation or Escape. It sits inside the
   sticky header, so it is capped at the viewport and scrolls inside itself rather than running off the screen. */
.menu{border-top:1px solid var(--line-soft);background:var(--paper);padding:8px var(--pad) 16px;display:flex;
  flex-direction:column;max-height:calc(100dvh - var(--header-h));overflow-y:auto}
.menu a{padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-lead);font-weight:500}
.menu .note{padding-top:12px;font-size:var(--t-sm);color:var(--muted)}

/* footer - full ink plane, reverse mark, one paragraph, two link columns, legal line below a hairline.
   Round 2, point 8: the petrol plane was the loudest thing on a page whose whole idea is paper and one rule, so
   the plane is --ink and petrol goes back to being an accent in the light half. Contrast on #161616, measured:
   links #fff 18.1:1, body copy --paper 16.0:1, kickers/legal --muted-on-dark 6.2:1, hover --petrol-on-dark 4.66:1.
   The hairline is rgba(242,241,237,.16) - the paper colour at low alpha, not a grey. */
footer{margin-top:var(--sec);background:var(--ink);color:var(--paper)}
footer a{color:#fff}
footer a:hover{color:var(--petrol-on-dark);text-decoration:underline}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px 48px;
  align-items:start;padding:clamp(36px,5vw,64px) 0 36px}
.footer-top .fmark{display:inline-block;padding:6px 0}
.footer-top .fmark img{display:block;width:220px;height:auto}
.footer-top p{margin-top:14px;max-width:460px;font-size:var(--t);line-height:1.55;text-wrap:pretty}
.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;font-size:var(--t);line-height:2.1;
  justify-self:end;min-width:min(100%,320px)}
.footer-cols>div{display:flex;flex-direction:column}
.footer-cols .kicker{color:var(--muted-on-dark);line-height:2}
.footer-legal{border-top:1px solid rgba(242,241,237,.16)}
.footer-legal .wrap{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:16px;font-size:var(--t-sm);color:var(--muted-on-dark)}

/* buttons - primary is ink on paper, secondary is a 1px frame, both turn petrol on hover; 44px minimum */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;
  border:1px solid var(--line);background:transparent;color:var(--ink);font:500 var(--t-md)/1 var(--body);
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn:active,.btn.primary:active{background:var(--sleeves);border-color:var(--sleeves);color:#fff}
.btn.lg{height:48px;padding:0 22px;font-size:var(--t)}
.btn.sm{height:40px;padding:0 14px}
.btn.block{width:100%}
.btn.text{height:auto;min-height:32px;padding:0;border:0;background:none;color:var(--petrol);font-size:var(--t-md)}
.btn.text:hover{background:none;color:var(--petrol);text-decoration:underline}
.btn.text.danger{color:var(--danger)}
.btn.multiline{height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;white-space:normal;text-align:center}
/* link with an arrow - the recurring "-> more" affordance in petrol */
.tlink{display:inline-flex;align-items:center;min-height:32px;font-weight:500;color:var(--petrol)}
.tlink:hover{text-decoration:underline}
.tlink.quiet{color:var(--muted)}

/* search field - a single 1px box, white, with a solid ink submit button flush to its right edge */
.searchbox{position:relative;max-width:620px}
.searchbox .field{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--white)}
.searchbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--t-lead);
  padding:0 18px;height:58px;-webkit-appearance:none;appearance:none}
/* Nur der Absende-Knopf, nicht jeder Knopf im Formular: die Vorschlagsliste haengt im selben <form> und
   bestand aus <button>-Zeilen - die trugen dadurch weisse Schrift auf weissem Grund und waren unlesbar. */
.searchbox .field button{flex:none;padding:0 24px;background:var(--ink);color:var(--paper);font-weight:500;
  font-size:var(--t);transition:background .2s}
.searchbox .field button:hover{background:var(--petrol);color:#fff}
.searchbox.compact input{height:52px;font-size:var(--t-lg);padding:0 16px}
.searchbox.compact .field button{padding:0 20px}
/* suggest list - floats under the field, 44px shirt drawing, label, sub, petrol call to action */
.suggest{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--white);border:1px solid var(--line);
  border-top:0;box-shadow:var(--float)}
.suggest .head{padding:10px 18px;font-size:var(--t-sm);color:var(--muted);border-bottom:1px solid var(--line-soft)}
.suggest button{display:grid;width:100%;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:8px 18px 8px 12px;border-bottom:1px solid var(--line-soft);background:var(--white);transition:background .15s}
.suggest button:hover,.suggest button[aria-selected=true]{background:var(--surface)}
.suggest .pic{width:44px;height:44px;background:var(--surface);position:relative;display:block;overflow:hidden}
.suggest .l{min-width:0}
.suggest .l b{display:block;font-weight:500;font-size:var(--t)}
.suggest .l span{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.suggest .cta{font-size:var(--t-sm);font-weight:500;color:var(--petrol);white-space:nowrap}

/* filter bar - one rule-bordered row of underlined selects; label muted, value ink, 32px hit area */
.filterbar{margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);
  padding:10px 0;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.filterbar .fields{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;min-width:0}
.filterbar label,.sel{display:flex;align-items:baseline;gap:6px;font-size:var(--t-md);color:var(--muted);white-space:nowrap}
.filterbar select,.sel select{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font-weight:500;font-size:var(--t-md);padding:4px 0;cursor:pointer;min-height:32px;max-width:200px;
  -webkit-appearance:none;appearance:none}
.filterbar .push{margin-left:auto}
.filter-btn{display:none}

/* Round 2, point 5 - the one filter component for /search, the club page, a collection and a league.
   The band above stays exactly the v8 "Filter bar": rule on top, soft rule below, labelled selects on one line,
   the sort menu pushed right. Three things v8 did not have and Tom asked for:
     - every value carries the number of listings it would leave, and a value with no listings is greyed out rather
       than dropped, so the bar shows where the archive is thin instead of quietly hiding it;
     - sizes are a segment, not a menu;
     - the item price is a pair of fields with its own apply button.
   The last two are wider than a select, so they share a second line inside the same band: .fx-row takes the whole
   flex line (flex-basis:100%) and therefore wraps under the selects without a second border.
   All of it is one GET form. Without JavaScript the "Apply" button submits it; with JavaScript the controls submit
   on change and that button is hidden. */
/* On wide screens the field block is transparent to layout, so the menus, the second line and the sort menu are
   all items of the same flex band and wrap the way v8 draws it: menus and sort on one line, the size segment and
   the price pair on the next, the note last. `order` does that without moving anything in the markup - the sheet
   needs #filter-fields to stay one movable node. Below 760px the block becomes a real box again. */
.filterbar .fields{display:contents}
.filterbar .more-btn,.filterbar .apply,.filterbar .push{order:1}
.filterbar .fx-row{order:2;flex:1 1 100%;display:flex;align-items:flex-end;gap:12px 36px;flex-wrap:wrap;min-width:0}
.filterbar .unit{order:3}
.filterbar .fx,.sheet .fx{display:flex;flex-direction:column;gap:5px;min-width:0}
.filterbar .fx>.l,.sheet .fx>.l{font-size:var(--t-md);color:var(--muted);line-height:1.2}
.filterbar option:disabled,.sheet option:disabled{color:var(--faint)}
/* one line under the bar: the numbers are listings, the result count above the grid is shirt models - two different
   units, so the bar says which one it is showing instead of letting the reader assume they match */
.filterbar .unit,.sheet .unit{flex:1 1 100%;margin:0;font-size:var(--t-sm);color:var(--muted);line-height:1.4}
.sheet .unit{order:0}

/* size segment - the shared-frame idiom of the system, count under the label. A size with no listings keeps its
   place, greyed and disabled: the row has the same shape on every page. Radios, so it works with JavaScript off. */
.segsizes{display:flex;flex-wrap:wrap}
.segsizes label{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:54px;min-height:44px;padding:4px 8px;margin-left:-1px;margin-top:-1px;border:1px solid var(--line);
  background:var(--white);cursor:pointer;transition:background .2s,color .2s}
.segsizes label:hover{background:var(--surface)}
.segsizes label:has(input:checked){background:var(--ink);color:var(--paper);z-index:1}
.segsizes label:has(input:checked):hover{background:var(--petrol);color:#fff}
.segsizes label:has(input:focus-visible){outline:2px solid var(--petrol);outline-offset:2px;z-index:2}
.segsizes label.off{background:var(--paper);color:var(--faint);cursor:not-allowed}
.segsizes input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.segsizes .l{font-family:var(--display);font-weight:600;font-size:17px;line-height:1;letter-spacing:.02em}
.segsizes .s{font-size:11px;line-height:1;color:var(--muted)}
.segsizes label:has(input:checked) .s{color:var(--mist)}
.segsizes label.off .s{color:var(--faint)}

/* item price - two fields and one apply button, instead of a menu of canned steps. Spinners off: the arrows add
   nothing and cost the field a third of its width. */
.pricefld{display:flex;align-items:center;gap:8px}
.pricefld input{width:9ch;min-width:0;height:40px;padding:0 8px;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:var(--t-md);font-weight:500;appearance:textfield;-moz-appearance:textfield}
.pricefld input::-webkit-outer-spin-button,.pricefld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pricefld .to{font-size:var(--t-md);color:var(--muted)}
.pricefld .btn{height:40px;padding:0 14px}

/* active filters - removable chips with a big x, and "Clear all" on the right of the same line */
.active-filters{margin-top:12px;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.active-filters .lab{font-size:var(--t-sm);color:var(--muted);margin-right:2px}
.active-filters .clear{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 8px 0 12px;border:1px solid var(--line);
  background:var(--white);font-size:var(--t-md);font-weight:500;color:var(--ink);transition:background .15s}
.chip:hover{background:var(--surface);color:var(--ink)}
.chip .x{font-size:var(--t-lead);line-height:1}
/* browse head - kicker, display h1 and lead left, the search box right; the pair wraps below 760px */
.browse-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.browse-head .t{min-width:0;flex:1 1 320px}
.browse-head h1{margin:6px 0 0}
.browse-head .searchbox{flex:1 1 320px;max-width:560px}
.browse-head .links{margin-top:10px;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:var(--t-md);font-weight:500}
.lead-sm{margin-top:10px;font-size:var(--t);line-height:1.5;color:var(--muted);max-width:620px;text-wrap:pretty}

/* result meter - "n shirts" left, the price convention right, above every grid */
.meter{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;
  font-size:var(--t-md);color:var(--muted)}
.meter b{font-weight:600;color:var(--ink)}

/* card grid + card - image plane, season badge top right, sketch tag bottom left, rule, then the text block */
.cards{margin-top:18px;display:grid;grid-template-columns:var(--grid-card);gap:var(--grid-card-gap)}
.card{display:flex;flex-direction:column;min-width:0;color:var(--ink);transition:color .2s}
.card:hover{color:var(--petrol)}
.card .pic{position:relative;display:block;aspect-ratio:1;background:var(--surface);overflow:hidden}
.card .pic svg,.pic svg{display:block;width:100%;height:100%}
.badge{position:absolute;right:0;top:0;background:var(--ink);color:var(--paper);font-family:var(--display);
  font-weight:900;font-size:20px;line-height:1;padding:7px 10px 5px}
.sketch{position:absolute;left:0;bottom:0;background:var(--paper);color:var(--muted);font-family:var(--display);
  font-weight:600;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:6px 8px 5px;border-top:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.card .txt{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.card .club{display:block;font-family:var(--display);font-weight:600;font-size:24px;line-height:1;
  text-transform:uppercase;min-height:48px}
.card .sub{display:block;margin-top:2px;font-size:var(--t-md);line-height:1.4;color:var(--muted)}
.card .price{display:block;margin-top:10px;font-size:var(--t-lead);font-weight:600}
.card .price.sold{color:var(--muted)}
.card .fine{display:block;margin-top:2px;font-size:var(--t-sm);line-height:1.4;color:var(--muted)}

/* result row - the compact list form of a shirt: 64px drawing, two lines, price right */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:48px}
.result{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);transition:background .2s}
.result:hover{background:var(--surface);color:var(--ink)}
.result .pic{position:relative;display:block;width:64px;height:64px;background:var(--surface);overflow:hidden}
.result .body{min-width:0}
.result .title{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1;text-transform:uppercase}
.result .meta{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--muted);line-height:1.35}
.result .price{font-size:var(--t-md);font-weight:600;text-align:right;white-space:nowrap}
.result .price .from{font-weight:400;font-size:var(--t-sm);color:var(--muted)}
.result .price .sub{display:block;font-weight:400;font-size:var(--t-xs);color:var(--muted)}
.result .price.sold{color:var(--muted)}
.result .sub.danger{color:var(--danger)}

/* hero - kicker with a petrol dash, the biggest type on the site, lead, search, two text links; kit wall right */
.hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(28px,4vw,56px) clamp(32px,5vw,96px);
  align-items:center;padding-top:clamp(28px,4vw,64px)}
.hero>div{min-width:0}
.hero h1{margin:16px 0 0}
.hero .lead{margin-top:22px;max-width:520px}
.hero .searchbox{margin-top:26px}
.hero .links{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;margin-top:16px;font-size:var(--t);font-weight:500}
/* kit wall - six shirts in three columns, the middle column dropped by 28px so the block reads as a wall, not a table */
.kitwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);align-items:start}
.kitwall a{position:relative;display:block;aspect-ratio:1;background:var(--surface);overflow:hidden;color:var(--ink);transition:background .25s}
.kitwall a:hover{background:#e1e0d9}
.kitwall a:nth-child(3n+2){margin-top:28px}
.kitwall .badge{font-size:clamp(14px,1.3vw,20px);padding:6px 8px 4px}

/* collections - three cards, a strip of shirts on top, kicker + name + one sentence below a hairline */
.colls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.coll{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white);color:var(--ink);
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.coll:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(22,22,22,.55)}
.coll.mist{background:var(--mist)}
.coll .strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:14px 14px 0;min-height:96px}
.coll .strip span{position:relative;display:block;aspect-ratio:1}
.coll .strip span svg{display:block;width:100%;height:100%}
.coll .txt{display:block;padding:12px 16px 16px;border-top:1px solid var(--line-soft);margin-top:8px}
.coll .name{display:block;margin-top:4px;font-family:var(--display);font-weight:900;font-size:32px;line-height:1;text-transform:uppercase}
.coll .desc{display:block;margin-top:8px;font-size:var(--t-md);line-height:1.45;color:var(--muted);text-wrap:pretty}

/* club tiles - a two-colour stripe, the club name in condensed caps, one counting line */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,224px),1fr));gap:12px}
.tile{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;
  border:1px solid var(--line-tile);background:var(--white);color:var(--ink);transition:border-color .2s}
.tile:hover{border-color:var(--line);color:var(--ink)}
.stripe{width:44px;height:44px;border:1px solid var(--line-tile);box-sizing:border-box;display:block;flex:none}
.tile .name{display:block;font-family:var(--display);font-weight:600;font-size:22px;line-height:1;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .meta{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--muted);line-height:1.35}
/* Round 2, point 2: the tile says which group it comes from (Premier League, National teams ...). Barlow-Condensed
   kicker like every other label in the system, so it reads as a category and never competes with the club name. */
.tile .grp{display:block;font-family:var(--display);font-weight:600;font-size:11px;line-height:1;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}

/* how it works - three steps, each opened by a 2px petrol rule and a big petrol number */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px clamp(16px,3vw,48px)}
.step{border-top:2px solid var(--petrol);padding-top:14px}
.step .n{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--petrol)}
.step h3{margin-top:10px;font-family:var(--display);font-weight:600;font-size:26px;line-height:1;text-transform:uppercase}
.step p{margin-top:8px;font-size:var(--t);line-height:1.5;color:var(--muted);text-wrap:pretty}

/* dealer rows - name with an outbound arrow, count right, country and currency underneath */
.dealers{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:48px}
.dealers .dealer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink)}
.dealers .dealer .name{font-size:var(--t);font-weight:500}
.dealers .dealer .n{font-size:var(--t-md);text-align:right;white-space:nowrap;color:var(--muted)}
.dealers .dealer .sub{font-size:var(--t-sm);color:var(--muted)}

/* price panel - the white box on the model page: kicker, big price, match line, filters, CTA row, fine print */
.pricepanel{margin-top:20px;border:1px solid var(--line);background:var(--white);padding:16px 20px}
.pricepanel .big{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;margin-top:4px}
.pricepanel .big .p{font-family:var(--display);font-weight:900;font-size:clamp(44px,4.6vw,64px);line-height:1}
.pricepanel .big .p.sold{color:var(--muted)}
.pricepanel .big .s{font-size:var(--t);color:var(--muted)}
.pricepanel .line{margin-top:8px;font-size:var(--t-md);line-height:1.5;text-wrap:pretty}
.pricepanel .matches{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-size:var(--t-md)}
.pricepanel .matches b{font-weight:600}
.pricepanel .matches .f{color:var(--muted)}
.pricepanel .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.pricepanel .fine{margin-top:12px;font-size:var(--t-sm);color:var(--muted);line-height:1.5;text-wrap:pretty}
/* saved alert notice - petrol frame on the wash plane, with edit and remove as underlined text */
.saved{padding:12px 14px;border:1px solid var(--petrol);background:var(--wash);font-size:var(--t-md);line-height:1.55;
  display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:14px}
.saved b{font-weight:600}
.saved .acts{display:flex;gap:14px;align-items:center;white-space:nowrap}
.saved .m{color:var(--petrol);font-weight:500}
.saved .acts button,.saved .acts a{font-weight:500;color:var(--petrol);text-decoration:underline;
  text-underline-offset:3px;min-height:32px}

/* size segment - square buttons that share their 1px frame, the count sits under the label */
.sizes{display:flex;margin-top:8px;flex-wrap:wrap}
.sizes a,.sizes button{min-width:60px;height:52px;padding:0 10px;margin-left:-1px;margin-top:-1px;
  border:1px solid var(--line);background:transparent;color:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;position:relative;transition:background .2s,color .2s}
.sizes a:hover,.sizes button:hover{background:var(--surface);color:var(--ink)}
.sizes .on,.sizes [aria-pressed=true]{background:var(--ink);color:var(--paper);z-index:1}
.sizes .on:hover,.sizes [aria-pressed=true]:hover{background:var(--petrol);color:#fff}
.sizes .l{font-family:var(--display);font-weight:600;font-size:20px;line-height:1;letter-spacing:.02em}
.sizes .s{font-size:11px;line-height:1;color:var(--muted)}
.sizes .on .s,.sizes [aria-pressed=true] .s{color:var(--mist)}
/* tabs - the same shared-frame idiom, one row high (kit tabs on a club page) */
.tabs{display:flex;flex-wrap:wrap}
.tabs a,.tabs button{min-height:40px;padding:0 14px;margin-left:-1px;margin-top:-1px;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:var(--t-md);font-weight:500;display:inline-flex;
  align-items:center;transition:background .2s,color .2s}
.tabs a:hover,.tabs button:hover{background:var(--surface);color:var(--ink)}
.tabs .on,.tabs [aria-pressed=true]{background:var(--ink);color:var(--paper);position:relative;z-index:1}

/* listings table - a real grid: dealer, size, condition, notes, price, open; collapses to two rows on the phone */
.listings{margin-top:18px}
.listings .grp{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;padding-bottom:8px;
  border-bottom:1px solid var(--line);font-size:var(--t-md)}
.listings .grp b{font-weight:600}
.listings .grp span{color:var(--muted)}
.lrow,.lhead{display:grid;grid-template-columns:minmax(0,1.4fr) 56px minmax(0,1fr) minmax(0,1.8fr) 110px 150px;
  grid-template-areas:"dealer size cond notes price action";align-items:center;gap:8px 16px;
  border-bottom:1px solid var(--line-soft)}
.lhead{padding:10px 0 6px;font-size:var(--t-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lrow{padding:12px 0;transition:background .2s}
.lrow:hover{background:var(--surface)}
.lrow .dealer{grid-area:dealer;min-width:0;font-weight:500;font-size:var(--t);line-height:1.3}
.lrow .dealer .sub,.lrow .cond .sub{display:block;font-weight:400;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.lrow .size{grid-area:size;font-family:var(--display);font-weight:600;font-size:22px;line-height:1}
.lrow .cond{grid-area:cond;min-width:0;font-size:var(--t)}
.lrow .cond .sub{font-size:var(--t-xs)}
.lrow .notes{grid-area:notes;font-size:var(--t-md);color:var(--muted);line-height:1.4;min-width:0}
.lrow .meta{grid-area:meta;display:none;font-size:var(--t-md)}
.lrow .price{grid-area:price;text-align:right;font-weight:600;font-size:18px}
.lrow .price .sub{display:block;font-weight:400;font-size:var(--t-xs);color:var(--muted)}
.lrow .price.sold{color:var(--muted);font-weight:400}
.lrow .action{grid-area:action;justify-self:end}
.lrow .action .btn{height:40px;padding:0 14px}

/* fact table - the dl on a model page: label left in muted, value right, hairline between rows */
.facts{margin:0;display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);border-top:1px solid var(--line);
  font-size:var(--t);line-height:1.4;align-self:start}
.facts dt{padding:10px 16px 10px 0;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.facts dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line-soft);min-width:0;overflow-wrap:anywhere}

/* empty state - a condensed headline, one honest sentence, then the ways out */
.empty{padding:40px 0 8px;max-width:560px}
.empty .t{font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1;text-transform:uppercase}
.empty p{margin-top:12px;font-size:var(--t);line-height:1.55;color:var(--muted);text-wrap:pretty}
.empty .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* notice - a bordered white strip for "listing gone", "n shirts hidden by the filter" */
.notice{margin-top:16px;padding:14px 16px;border:1px solid var(--line);background:var(--white);
  display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:var(--t-md);line-height:1.5}
.notice.soft{border-color:var(--line-soft)}
.notice b{font-weight:600}

/* prose - legal pages and long copy; the only place where links are underlined by default */
.prose{max-width:70ch;font-size:var(--t-lg);line-height:1.6}
.prose>*+*{margin-top:16px}
.prose h2{margin-top:32px;font-family:var(--display);font-weight:600;font-size:var(--d-h3);line-height:1;text-transform:uppercase}
.prose h3{margin-top:24px;font-family:var(--display);font-weight:600;font-size:22px;line-height:1;text-transform:uppercase}
.prose a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 48px;max-width:1100px;
  font-size:var(--t);line-height:1.55}
.cols>div{border-top:1px solid var(--line);padding-top:12px}
.cols h2,.cols h3{margin:0;font-family:var(--display);font-weight:600;font-size:24px;line-height:1;text-transform:uppercase}
.cols p{margin-top:10px;text-wrap:pretty}

/* price alert form - one heading, one line, one row of fields; no box, it sits on the paper */
.notify{margin-top:var(--sec);border-top:1px solid var(--line);padding-top:14px}
.notify h2{font-family:var(--display);font-weight:600;font-size:var(--d-h3);line-height:1;text-transform:uppercase;margin:0}
.notify form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;max-width:720px}
.notify input{height:46px;padding:0 12px;border:1px solid var(--line);background:var(--white);font-size:var(--t);
  flex:1 1 16ch;min-width:0}
.notify input.short{flex:0 1 16ch}
.notify .fine{margin-top:10px;font-size:var(--t-sm);color:var(--muted);line-height:1.5;max-width:720px;text-wrap:pretty}

/* sheet + dialog - the two floating layers; both dim the page, both are closed by Escape or the backdrop.
   Round 2, point 5: the filter sheet comes up from the bottom edge (inset:auto 0 0 0, at most 88dvh) instead of
   being a centred box. Three parts: a fixed head with "Filters" and "Clear all", a scrolling body with the same
   #filter-fields nodes the wide bar uses, and a pinned foot with "Show N results". app.js moves the sheet to
   <body> on load so header, main and footer can be marked inert while it is open. */
.sheet{position:fixed;inset:0;z-index:60}
.sheet .back{position:absolute;inset:0;background:rgba(22,22,22,.45);cursor:default}
.dialog .back{position:absolute;inset:0;cursor:default}
.sheet .panel{position:absolute;inset:auto 0 0 0;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;
  background:var(--paper);border-top:1px solid var(--line);box-shadow:var(--float)}
.sheet .head{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:16px var(--pad) 12px;border-bottom:1px solid var(--line-soft)}
.sheet .head .t{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;text-transform:uppercase}
.sheet .body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px var(--pad) 18px}
.sheet .foot{flex:none;padding:12px var(--pad);border-top:1px solid var(--line);background:var(--paper)}
.sheet .fields{display:grid;gap:14px}
.sheet label{display:grid;gap:6px;font-size:var(--t-sm);color:var(--muted)}
.sheet select,.dialog select,.dialog input{border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-weight:500;padding:0 12px;height:48px;font-size:var(--t-lg);max-width:none;-webkit-appearance:none;appearance:none}
.sheet .fine{margin-top:12px;font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.sheet .sheet-slot .fields{display:grid;gap:14px}
.sheet .sheet-slot label{display:grid;gap:6px;font-size:var(--t-sm);color:var(--muted);white-space:normal}
.sheet .sheet-slot select{border:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);
  height:48px;padding:0 12px;font-size:var(--t-lg);max-width:none;width:100%}
/* the two wide groups become full-width blocks in the sheet; the price fields share the line, the segment wraps */
.sheet .fx-row{display:grid;gap:14px}
.sheet .fx{gap:6px}
.sheet .fx>.l{font-size:var(--t-sm)}
.sheet .segsizes label{min-width:0;flex:1 0 20%;min-height:48px}
.sheet .pricefld input{flex:1 1 0;width:auto;height:48px;font-size:var(--t-lg)}
.sheet .pricefld .btn{height:48px}
.sheet .unit{margin-top:2px}
.btn.tall{height:52px;font-size:var(--t-lg)}
.dialog{position:fixed;inset:0;z-index:70;background:rgba(22,22,22,.45);display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,28px)}
.dialog form,.dialog .panel{position:relative;width:100%;max-width:620px;max-height:92vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line);padding:18px clamp(16px,3vw,28px) 22px;
  box-shadow:var(--float);outline:none}
.dialog .panel form{max-width:none;max-height:none;border:0;padding:0;box-shadow:none;background:none}
.dialog .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dialog .close{width:44px;height:44px;border:1px solid var(--line);font-size:22px;line-height:1;flex:none;display:grid;place-items:center}
.dialog .close:hover{background:var(--petrol);color:#fff}
.dialog h2{margin:4px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(28px,3vw,40px);line-height:.95;
  text-transform:uppercase;text-wrap:balance}
.dialog .grp{margin-top:14px}
.dialog .grp>.l{font-size:var(--t-sm);color:var(--muted)}
.dialog .two{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.dialog label{display:grid;gap:6px;font-size:var(--t-sm);color:var(--muted)}
.dialog .sum{margin-top:16px;padding:12px 14px;border:1px solid var(--line-soft);background:var(--white);
  font-size:var(--t-md);line-height:1.5}
.dialog .sum .m{color:var(--petrol);font-weight:500}
.dialog .err{margin-top:10px;padding:10px 12px;border:1px solid var(--danger);color:var(--danger);font-size:var(--t-md);line-height:1.5}
.dialog .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
body.locked{overflow:hidden}

/* utilities - spacing on a 4px scale, the three text colours, the measure; nothing else */
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:24px}
.mt-6{margin-top:32px}.mt-7{margin-top:48px}.mt-8{margin-top:64px}.mt-9{margin-top:96px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-5{margin-bottom:24px}.mb-6{margin-bottom:32px}.mb-7{margin-bottom:48px}.mb-8{margin-bottom:64px}
.measure{max-width:70ch}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.row.g-l{gap:10px 22px}
.between{justify-content:space-between}
.right{text-align:right}
.t-1,.small{font-size:var(--t-sm);line-height:1.5}
.t-3{font-size:var(--t-lead);line-height:1.5}
.ink-2{color:var(--muted)}
.ink-3{color:var(--muted)}
.faint{color:var(--faint)}
.danger{color:var(--danger)}
.num{font-variant-numeric:tabular-nums}
.note{padding:0 0 0 12px;border-left:2px solid var(--petrol);color:var(--muted);font-size:var(--t-md);line-height:1.5}
.note.danger{border-color:var(--danger);color:var(--danger)}
.fine{font-size:var(--t-sm);color:var(--muted);line-height:1.5;text-wrap:pretty}
.icon{display:inline-block;vertical-align:middle;flex:none}
/* breadcrumb - small, muted, the current page is never a link */
.breadcrumb{margin-top:16px;font-size:var(--t-sm);color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;padding:0}
.breadcrumb li{display:inline-flex;align-items:center;gap:4px}
/* pager - previous, "page x of y", next */
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:32px;
  font-size:var(--t-md);font-weight:500}
.pager a{display:inline-flex;align-items:center;gap:4px;min-height:44px}
.pager .prev{grid-column:1;justify-self:end}.pager .next{grid-column:3;justify-self:start}
.pager .cur{grid-column:2;color:var(--muted)}
/* index list - clubs and leagues as a set of ruled name/count lines */
.index{columns:3;column-gap:48px;list-style:none;padding:0;margin:0}
.index li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;break-inside:avoid;
  border-bottom:1px solid var(--line-soft)}
.index .n{color:var(--muted)}
/* kit drawing - never scaled by CSS, the size comes from the markup */
.kit-svg{display:block;flex:none}
.kit-svg .ol{fill:none;stroke:rgba(30,30,30,.55);stroke-width:1.4;stroke-linejoin:round;shape-rendering:geometricPrecision}
.club-badge{vertical-align:middle}
/* generic table - shop lists, history; the listings grid above is the special case */
table.tbl{width:100%;border-collapse:collapse;font-size:var(--t)}
.tbl th{padding:0 16px 8px 0;font-size:var(--t-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:left;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tbody tr:hover td{background:var(--surface)}
.tbl .num,.tbl .right{text-align:right}
.tbl .price{font-weight:600}
.tbl .sub{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.tbl .price.sold,.price.sold{color:var(--muted)}
.tblwrap{overflow-x:auto}
.tag{display:inline-block;padding:2px 8px;border:1px solid var(--line-soft);font-size:var(--t-xs);
  color:var(--muted);white-space:nowrap}

/* motion - only what the prototype does; every rule sits behind prefers-reduced-motion. The card grid lifts as it
   enters, and the range ends early on purpose: a card that is even slightly in view is already at full opacity, so
   the fold never shows a half-faded row. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cards>*{animation:rise .4s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 25%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* below 1100px - the nav folds into the menu button, the hero and the model page become one column */
@media (max-width:1099px){
  .nav-main,.top-right .alerts{display:none}
  .menu-btn{display:inline-flex}
  .hero{grid-template-columns:minmax(0,1fr)}
  .index{columns:2}
}
/* phone - one column everywhere, filters move into a sheet, the listing row becomes two lines.
   Every tap target grows to 44px here: text buttons, chips, the sort select and the footer link columns. */
@media (max-width:759px){
  .btn.text,.tlink,.saved .acts a,.saved .acts button{min-height:44px}
  .section-head a{display:inline-flex;align-items:center;min-height:44px}
  footer .footer-cols a{display:flex;align-items:center;min-height:44px;line-height:1.3}
  .chip{height:44px}
  .filterbar select,.sel select{min-height:44px}
  #recent a{display:inline-flex;align-items:center;min-height:44px}
  .hero{padding-top:20px}
  .kitwall a:nth-child(3n+2){margin-top:0}
  /* Filters on the phone. WITH JavaScript the whole field block moves into the bottom sheet, so the bar keeps only
     the "Filters" button and the sort menu. WITHOUT JavaScript nothing is hidden - the fields stack under the rule,
     full width, and the Apply button submits them. The gate is html[data-js], set by one line in <head>, because a
     phone without JavaScript used to lose every filter here (round 2, point 5: "must stay reachable"). */
  html[data-js="1"] .filterbar .fields,html[data-js="1"] .filterbar .more-btn{display:none}
  html[data-js="1"] .filter-btn{display:inline-flex}
  .filterbar .fields{display:grid;gap:14px;flex:1 1 100%;order:2}
  /* Without JavaScript this is the only way to apply the stack of fields above, so on a phone it stops being a
     petrol text link and becomes the full-width primary button at the foot of the band. With JavaScript it carries
     the hidden attribute and never shows at all. */
  .filterbar .btn.text.apply{order:3;flex:1 1 100%;min-height:48px;justify-content:center;
    border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:var(--t)}
  .filterbar .btn.text.apply:hover{background:var(--petrol);border-color:var(--petrol);color:#fff;text-decoration:none}
  .filterbar .fields>label,.filterbar .fields>.sel,.filterbar .fx-row>.fx{width:100%;white-space:normal}
  .filterbar .fields>label,.filterbar .fields>.sel{display:grid;gap:5px}
  .filterbar .fields select{max-width:none;width:100%;min-height:44px;border:1px solid var(--line);
    background:var(--white);padding:0 12px;height:48px;font-size:var(--t-lg)}
  .filterbar .pricefld input{flex:1 1 0;width:auto;height:48px;font-size:var(--t-lg)}
  .filterbar .pricefld .btn{height:48px}
  .segsizes label{flex:1 0 20%;min-width:0;min-height:48px}
  .lhead{display:none}
  .lrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dealer price" "meta meta" "notes notes" "action action";padding:14px 0}
  .lrow .size,.lrow .cond{display:none}
  .lrow .meta{display:block}
  .lrow .notes{font-size:var(--t-sm)}
  .lrow .action{justify-self:stretch;margin-top:4px}
  .lrow .action .btn{width:100%}
  .index{columns:1}
  .facts{grid-template-columns:minmax(96px,auto) minmax(0,1fr)}
  .footer-cols{justify-self:start}
  .searchbox input{height:52px;font-size:var(--t-lg);padding:0 14px}
  .searchbox .field button{padding:0 16px}
  .cards{--grid-card:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:24px 12px}
  .card .club{font-size:21px;min-height:42px}
  .pager{gap:8px}
  .prose{font-size:var(--t)}
}

/* shims - class names still used by templates the pages agent has not converted yet; they get the new system,
   not the old one, so nothing renders unstyled while the conversion runs. Delete a line once its markup is gone. */
.head{display:flex;align-items:center;gap:16px;margin-top:24px}
.head>div{min-width:0}
.head h1{font-family:var(--display);font-weight:900;font-size:var(--d-name);line-height:.9;text-transform:uppercase;margin:0}
.sect{padding-top:24px;border-top:1px solid var(--line);margin-top:32px}
.box{border:1px solid var(--line);background:var(--white);padding:16px 20px}
.detail-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px) clamp(24px,4vw,64px);
  align-items:start;margin-top:14px}
.detail-head>.main{min-width:0}
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:24px}
.sizebar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.seg{display:inline-flex;max-width:100%;min-width:0;flex-wrap:wrap}
.seg a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;margin-left:-1px;margin-top:-1px;
  border:1px solid var(--line);font-size:var(--t-md);font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.seg a:hover{background:var(--surface);color:var(--ink)}
.seg a.active{background:var(--ink);color:var(--paper);position:relative;z-index:1}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0}
.spec div{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.spec dt{font-size:var(--t-sm);color:var(--muted)}
.spec dd{margin:0}
.hist{list-style:none;padding:0;margin:0}
.hist li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.hist .date{min-width:9ch;color:var(--muted);font-size:var(--t-sm)}
.spark{display:block;width:100%;height:44px;color:var(--petrol);margin-bottom:12px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 32px}
.controls{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto}
.select-text{position:relative;display:inline-flex;align-items:baseline;gap:6px;font-size:var(--t-md);color:var(--muted)}
.select-text select{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-weight:500;
  font-size:var(--t-md);padding:4px 0;cursor:pointer;min-height:32px;-webkit-appearance:none;appearance:none}
.select-text .icon{display:none}
.bullets{padding-left:22px;margin:0}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid .wide{grid-column:1/-1}
.field{display:block}
.field label{display:block;margin-bottom:4px;font-size:var(--t-sm);color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--white);
  height:46px;padding:0 12px;font-size:var(--t)}
.field textarea{height:auto;padding:10px 12px}
.check{display:flex;align-items:center;gap:8px;font-size:var(--t);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--petrol)}
details.fold>summary,details.sold>summary{list-style:none;cursor:pointer;padding:8px 0;font-weight:500;color:var(--petrol);min-height:40px}
summary::-webkit-details-marker{display:none}
@media (max-width:759px){.detail-head{grid-template-columns:minmax(0,1fr)}.spec,.grid-2{grid-template-columns:1fr}}

/* admin - dashboard.html only, outside the design system; plain, dense, prefixed .dashboard */
.dashboard .scroll{overflow-x:auto}
.dashboard .small,.dashboard .tiny,.dashboard .kbd,.dashboard .status{font-size:var(--t-sm);line-height:1.4}
.dashboard .muted{color:var(--muted)}
.dashboard tr.edit td{background:var(--surface)}
.dashboard .tbl th{white-space:nowrap}
.dashboard .note{margin-top:16px}
.dashboard .tabs{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 24px;border-bottom:1px solid var(--line-soft)}
.dashboard .tabs a{min-height:auto;padding:8px 0;border:0;color:var(--muted);font-weight:500}
.dashboard .tabs a:hover{background:none;color:var(--petrol)}
.dashboard .status,.dashboard .kbd{display:inline-block;padding:0 4px;border:1px solid var(--line-soft);
  color:var(--muted);white-space:nowrap}
.dashboard .kbd{font-family:ui-monospace,Menlo,monospace}
.dashboard .status.gesperrt,.dashboard .status.fehler,.dashboard .status.abgebrochen,.dashboard .btn.danger{color:var(--danger);border-color:var(--danger)}
.dashboard .bar{height:8px;background:var(--line-soft);overflow:hidden}
.dashboard .bar i{display:block;height:100%;background:var(--petrol)}
.dashboard .bar.bad i{background:var(--danger)}
.dashboard .btn.small{height:40px;padding:0 12px}
.dashboard form.inline{display:inline}
.dashboard h3{margin-bottom:12px;font-family:var(--display);font-weight:600;font-size:22px;text-transform:uppercase}
.dashboard .tbl td{vertical-align:top;overflow-wrap:anywhere}
.dashboard section{margin-top:32px}

/* pages (owner: pages agent, additions only) */

/* pages */
/* P-PAGES (Runde 1 "Get the Jersey"). Nur was den Seitenvorlagen gehoert und im System-Teil daruber
   nicht schon steht: Modell-/Angebotsraster, Listings ohne Notizspalte, Haendlerzeilen der /shops-
   Seite, Ligazeilen, Alarmzeilen, Watch-Zeile der Vereinsseite, Abstimmungszeile. Alles andere
   (Karten, Kacheln, Preis-Panel, Fakten, Chips, Prosa, Buttons) kommt aus dem System oben.
   Masse 1:1 aus dem Prototyp v8; schmal = <=759px, der Umschaltpunkt des Prototyps. */

/* Modellseite: Zeichnung links (5fr), Kopf mit Preis-Panel rechts (7fr). Auf dem Telefon kommt der
   Kopf zuerst - der Name und der Preis stehen vor dem Bild, genau wie in v8 (dAreas). */
.model{margin-top:14px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"illu head";gap:clamp(20px,3vw,40px) clamp(24px,4vw,64px);align-items:start}
.model .illu{grid-area:illu;min-width:0}
.model .info{grid-area:head;min-width:0}
.model .pic{position:relative;display:block;aspect-ratio:1;background:var(--surface);overflow:hidden}
.model .pic svg{display:block;width:100%;height:100%}
.model .pic .badge{font-size:26px;padding:9px 12px 7px}
.model .pic .sketch{font-size:var(--t-sm);padding:8px 10px 6px}
.model .caption{margin-top:10px;font-size:var(--t-sm);line-height:1.5;color:var(--muted);text-wrap:pretty}
.model .sub{margin-top:8px;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,32px);
  line-height:1;text-transform:uppercase;color:var(--muted)}

/* Listings ohne Notizspalte: wir zeigen nur Fakten (Haendler, Groesse, Zustand, Preis, Link),
   keine Beschreibungstexte des Shops - darum faellt v8s "Notes from the dealer" weg. */
.listings.nonotes .lrow,.listings.nonotes .lhead{grid-template-columns:minmax(0,1.6fr) 56px minmax(0,1.2fr) 110px 150px;
  grid-template-areas:"dealer size cond price action"}
.listings .conv{color:var(--muted)}

/* Vereinsseite: Name mit Farbstreifen, darunter die Watch-Zeile aus v8 (Button + ein Satz). */
.clubhead{margin-top:14px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:16px clamp(16px,2.5vw,32px);align-items:start}
.stripe.xl{width:clamp(64px,8vw,112px);height:clamp(64px,8vw,112px)}
.watchline{display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:18px;align-items:center}
.watchline p{font-size:var(--t-md);color:var(--muted);max-width:460px;line-height:1.5;text-wrap:pretty}

/* Haendlerzeilen der /shops-Seite: Name + Domain, Land + Waehrung, Bestand, Button. */
.drows{margin-top:24px;border-top:1px solid var(--line)}
.drow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.2fr) auto;
  gap:6px 24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.drow .n{font-family:var(--display);font-weight:600;font-size:24px;line-height:1;text-transform:uppercase}
.drow .s{margin-top:4px;font-size:var(--t-sm);color:var(--muted)}
.drow .v{font-size:var(--t)}
.drow .btn{justify-self:end}

/* Ligazeilen: dieselbe Zeile, drei Spalten (Liga, Land + Vereine, Bestand). */
.lgrows{margin-top:24px;border-top:1px solid var(--line)}
.lgrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr);
  gap:6px 24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.lgrow:hover{background:var(--surface);color:var(--ink)}
.lgrow .n{font-family:var(--display);font-weight:600;font-size:24px;line-height:1;text-transform:uppercase}
.lgrow .s{margin-top:4px;font-size:var(--t-sm);color:var(--muted)}
.lgrow .v{font-size:var(--t)}
.lgrow .v.right{text-align:right}

/* Alarmseite: Kriterien links, aktuelle Treffer rechts. */
.alertrow{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px 40px;align-items:start}
.alertrow>div{min-width:0}
.alertrow .t{display:inline-block;margin-top:4px;font-family:var(--display);font-weight:900;
  font-size:var(--d-h3);line-height:1;text-transform:uppercase}
.alertrow .l1{margin-top:8px;font-size:var(--t);line-height:1.5}
.alertrow .l2{margin-top:4px;font-size:var(--t-sm);color:var(--muted);line-height:1.5;text-wrap:pretty}
.alertrow .acts{display:flex;gap:16px;margin-top:10px;align-items:center}
.alertrow .acts form{margin:0}
.alertrow .side .h{font-weight:600;font-size:var(--t-md)}
.alertrow .side a{display:block;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm)}

/* Abstimmungszeile der Angebotsseite. */
.vote{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:16px;font-size:var(--t-md)}
.vote form{margin:0}
.vote .btn{height:40px;padding:0 14px}
.vote .btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

@media (max-width:759px){
  .model{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "illu"}
  .model .pic{aspect-ratio:4/3}
  .listings.nonotes .lrow,.listings.nonotes .lhead{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"dealer price" "meta meta" "action action"}
  .drow,.lgrow{grid-template-columns:minmax(0,1fr)}
  .drow .btn{justify-self:start;margin-top:8px}
  .lgrow .v.right{text-align:left}
  .alertrow{grid-template-columns:minmax(0,1fr)}
  .clubhead{grid-template-columns:minmax(0,1fr)}
}

/* Detailseiten haben den engeren Sektionsabstand des Prototyps (clamp(36px,5vw,64px) statt --sec). */
.section.close{margin-top:clamp(36px,5vw,64px)}
/* "About this shirt": Prosa links, Faktentabelle rechts. */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:20px clamp(24px,4vw,64px);align-items:start}
.about p{margin-top:12px;max-width:560px;font-size:var(--t-lg);line-height:1.55;text-wrap:pretty}
.about p:first-child{margin-top:0}
.about p.fine{font-size:var(--t-sm)}
.clubhead .m{margin-top:8px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);
  line-height:1;text-transform:uppercase;color:var(--muted)}

/* Vereins- und Sammlungsfilter: keine Sheet-Mechanik, die Zeile bricht auf dem Telefon einfach um -
   so bleibt jeder Filter erreichbar, auch ohne JavaScript. */
@media (max-width:759px){
  .filterbar form.row{width:100%;gap:12px}
  .filterbar form.row .sel{flex:1 1 45%}
  .filterbar form.row .sel select{max-width:100%;width:100%}
  .filterbar form.row .btn{flex:1 1 100%}
}

/* Sammlungsuebersicht: sechs Karten lesen sich als 3x2, nicht als 4+2 (die Startseite zeigt drei und
   bleibt bei der auto-fit-Regel des Systems). */
@media (min-width:1000px){.colls.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Namenskollision aufgeloest (Integration): die Haendlerzeile der Startseite heisst jetzt `.dealers .dealer`,
   die Haendlerzelle der Listings-Tabelle bleibt `.lrow .dealer`. Der frueher noetige Ueberschreib-Block
   (display/padding/border zuruecksetzen) ist damit weg - eine Regel weniger, die man kennen muss. */

/* Laendersprungliste auf /clubs: eine umbrechende Zeile aus Textlinks mit ihrer Bestandszahl. Der Zaehler
   steht als eigenes Wort, damit "UK 7,503" nicht als "UK7,503" zusammenlaeuft. */
.countrynav{margin-top:24px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--t-md);font-weight:500}
.countrynav a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--petrol)}
.countrynav a:hover{text-decoration:underline}
.countrynav .n{font-weight:400;color:var(--muted)}

/* Tap-Ziele auf dem Telefon: alles, was auf den Seiten dieses Agenten angetippt wird, ist mindestens 44px
   hoch - auch die Systemvarianten, die auf dem Desktop mit 40px bzw. 32px auskommen. */
@media (max-width:759px){
  .lrow .action .btn,.tabs a,.tabs button,.countrynav a{min-height:44px;height:auto}
  .lrow .action .btn{padding-top:10px;padding-bottom:10px}
  .btn.text,.tlink,.alertrow .acts .btn,.saved .acts a,.saved .acts button{min-height:44px}
}
/* Entfernen-Formular auf /sellers: zwei Felder nebeneinander, aber nicht ueber die ganze Breite. */
.removeform{max-width:760px}

/* Dichte Link-Listen (Saisons, Ligen) auf dem Telefon: jede Zeile ist ein Ziel von 44px, statt einer
   20px-Textzeile zwischen zwei anderen. Auf dem Desktop bleibt es der ruhige Fliesstext des Prototyps. */
.linklist a{display:inline-block}
@media (max-width:759px){
  .linklist{display:flex;flex-wrap:wrap;gap:0 14px}
  .linklist a{min-height:44px;display:inline-flex;align-items:center}
  .linklist .kicker{flex-basis:100%}
  .backbar a{min-height:44px}
  .drow .n a,.lgrow,.alertrow .t{min-height:44px;display:inline-flex;align-items:center}
  .lgrow{display:grid}
}

/* integration (owner: integrator, additions only - no token, no base element, no redefinition) */

/* Alert form (v8 "Alert dialog") rendered inline in _notify.html. v8 draws its options as pressed buttons; here they
   are checkboxes and radios so the whole form works with JavaScript off. The native control is hidden and the label
   carries the button look, so the tap target is the 44px box the eye sees. */
.notify form.alertform{display:block;max-width:720px}
.afset{border:0;padding:0;margin:16px 0 0;min-width:0}
.afset legend{padding:0;font-size:var(--t-sm);color:var(--muted)}
.aopts{display:flex;flex-wrap:wrap;margin-top:6px}
.aopt{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-left:-1px;margin-top:-1px;
  border:1px solid var(--line);background:var(--paper);font-size:var(--t-md);font-weight:500;white-space:nowrap;
  cursor:pointer;transition:background .2s,color .2s}
.aopt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.aopt:hover{background:var(--surface)}
.aopt:has(input:checked){background:var(--ink);color:var(--paper);position:relative;z-index:1}
.aopt:has(input:checked):hover{background:var(--petrol);color:#fff}
.aopt:has(input:focus-visible){outline:2px solid var(--petrol);outline-offset:2px}
.arow{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.afld{display:grid;gap:6px;font-size:var(--t-sm);color:var(--muted);min-width:0}
.afld select,.afld input{height:46px;padding:0 10px;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:var(--t);font-weight:500;width:100%;min-width:0;box-sizing:border-box}
.notify form.alertform input.short{flex:none;width:100%;max-width:220px}
.notify form.alertform>.btn{margin-top:16px}
/* Round 2, point 7 - the address block that stands directly above the button. It is the only field the form
   cannot do without, so it gets a rule of its own, a real label and a visible "Required"; the placeholder is an
   example, not the label. Widest sensible measure for an address is about 30 characters. */
.afld.email{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);max-width:420px}
.afld.email label{display:flex;align-items:baseline;gap:8px;font-size:var(--t-md);color:var(--ink);font-weight:500}
.afld.email .req{font-family:var(--display);font-weight:600;font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.afld.email input{display:block;width:100%;height:48px;margin-top:6px;padding:0 12px;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font-size:var(--t-lg)}
.afld.email input:invalid:not(:placeholder-shown){border-color:var(--danger)}
.afld.email .fine{margin-top:6px}

/* Restliche Tap-Ziele unter 760 px (Integration, im Browser bei 390 px nachgemessen):
   - der Haendlername in einer Listings-Zeile war 20 px hoch (Ziel: die Zeile fuehrt zu unserer Angebotsseite,
     der Knopf daneben zum Haendler - beide muessen mit dem Daumen zu treffen sein);
   - der Kicker-Rueckverweis ueber der Modell-Ueberschrift war 16 px;
   - Links in einer Faktenliste (`.facts dd a`, z. B. der Verein) waren 20 px.
   Das Aussehen aendert sich nicht: die Flaeche waechst nach unten in den vorhandenen Zeilenabstand. */
@media (max-width:759px){
  .lrow .dealer>a,.about .facts dd a,.facts dd a{display:inline-flex;align-items:center;min-height:44px}
  a.kicker,.info>a.kicker{display:inline-flex;align-items:center;min-height:44px}
  /* Trefferzeilen eines Alarms: eine Zeile je Modell, jede ein eigenes Ziel. */
  .alertrow .side a{display:flex;align-items:center;min-height:44px;padding:8px 0}
  /* Ja/Nein auf der Angebotsseite (40 px auf dem Desktop) und die Vereinsnamen in der Liga-Tabelle. */
  .vote .btn{height:44px}
  .tbl td a,.tbl th a{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================================
   Runde 2 (F-pages). Drei neue Bausteine, alle im System von v8 (Radius 0, 1px --line,
   Barlow Condensed 600 fuer Zahlen und Marken, Geist fuer den Rest):
   1. die Zeitleiste der Vereinsseite (Punkt 6),
   2. die Saisongruppen unter der Zeitleiste (Punkt 6),
   3. die eine Filterkomponente fuer Vereins-, Sammlungs- und Ligaseite (Punkt 5).
   ============================================================================ */

/* --- 1. Zeitleiste (Punkt 6) -------------------------------------------------
   Eine echte Zeitachse: x = (Jahr - erstes Jahr) / Spanne. Ein Jahr ohne Trikots hat keinen
   Punkt, und weil die Position aus der Zeit kommt, bleibt die Luecke als Luecke sichtbar.
   Die Schiene ist so breit wie die Spanne (56px je Jahr, als --tl-w vom Template gesetzt) und
   scrollt waagerecht; unter 900px kippt derselbe DOM in Dekaden-Bloecke untereinander. */
.tlscroll{overflow-x:auto;overflow-y:hidden;padding:0 26px 4px;margin:0 -26px;
  scrollbar-width:thin;overscroll-behavior-x:contain;
  /* die rechte Kante blendet aus, damit sichtbar ist, dass die Achse weitergeht */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)}
.tlscroll:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.tlrail{position:relative;min-width:var(--tl-w,100%);
  /* so hoch wie das vollste Jahr: --tl-rows ist die groesste Zahl Saisons, die sich einen Ort teilen */
  height:calc(30px + var(--tl-rows,1) * 44px)}
/* die Achse selbst */
.tlrail::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:var(--line)}
.tldec{display:contents}
/* Dekaden als Marken: Barlow-Condensed-Kicker an der Achse, dazu eine hohe Haarlinie */
.tldec>.lab{position:absolute;left:var(--x);top:0;padding-left:8px;
  font-family:var(--display);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:none;color:var(--muted);border-left:1px solid var(--line-soft);height:100%;
  line-height:1.6;white-space:nowrap;pointer-events:none}
/* ein Punkt = eine Saison: Punkt auf der Achse, darunter Saison, Anzahl und guenstigster Preis.
   Saisons, die sich ein Jahr teilen ("2012", "2012/13", "2011/13"), stehen uebereinander (--row) -
   die Hoehe einer Spalte ist damit selbst eine Aussage, und keine Saison faellt weg. */
.tlpt{position:absolute;left:var(--x);top:calc(18px + var(--row,0) * 44px);
  width:54px;margin-left:-27px;padding-top:13px;
  display:grid;grid-template-columns:auto auto;grid-template-areas:"y y" "n p";
  justify-content:center;align-content:start;column-gap:5px;row-gap:2px;
  color:var(--ink);transition:color .2s}
.tlpt::before{content:"";position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4px;
  background:var(--ink);border:1px solid var(--ink);box-sizing:border-box}
.tlpt.empty::before{background:var(--paper)}
.tlpt:hover,.tlpt:focus-visible{color:var(--petrol)}
.tlpt:hover::before,.tlpt:focus-visible::before{background:var(--petrol);border-color:var(--petrol)}
.tlpt .y{grid-area:y;justify-self:center;font-family:var(--display);font-weight:600;font-size:15px;
  line-height:1;text-transform:uppercase;white-space:nowrap}
.tlpt .n{grid-area:n;font-size:var(--t-xs);line-height:1;color:var(--muted);white-space:nowrap}
.tlpt .p{grid-area:p;font-size:var(--t-xs);line-height:1;font-weight:600;white-space:nowrap}
.tlpt.empty .p{font-weight:400;color:var(--muted)}

/* --- 2. Saisongruppen unter der Zeitleiste (Punkt 6) ------------------------- */
.seasongrp{margin-top:28px}
.sg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:10px}
.sg-head h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;text-transform:uppercase;margin:0}
/* Die Saisonueberschrift ist ein Link auf die Verein-Saison-Seite und damit ein Bedienelement, kein Fliesstext:
   auf dem Telefon mass sie 84x31 px und verfehlte die 44-px-Regel. Die Hoehe kommt aus dem Element, nicht aus
   einem Abstand, damit die Trefferflaeche wirklich 44 px hoch ist. */
.sg-head h3 a{display:inline-flex;align-items:center;min-height:44px}
.sg-head .ctx{font-size:var(--t-sm);color:var(--muted)}
.seasongrp .cards{margin-top:14px}

/* --- 3. Kit-Reiter ueber der Filterleiste (Punkt 5) -------------------------
   Die Filterkomponente selbst gehoert F-system (`_facets.html`, Makro `filterbar`, und ihr CSS im
   Systemteil dieser Datei). Hier steht nur, was die Vereinsseite zusaetzlich braucht: die v8-Kit-Reiter
   stehen jetzt ueber der Leiste statt darin. */
.kitbar{margin-top:24px}

@media (max-width:899px){
  /* Punkt 6: unter 900px keine Wischstrecke, sondern Dekaden untereinander - derselbe DOM, andere Regeln. */
  .tlscroll{overflow:visible;padding:0;margin:0;-webkit-mask-image:none;mask-image:none}
  .tlrail{min-width:0;height:auto;display:block}
  .tlrail::before{display:none}
  .tldec{display:block;margin-top:18px;border-top:1px solid var(--line-soft);padding-top:10px}
  .tldec>.lab{position:static;height:auto;border:0;padding:0;display:block;transform:none;margin-bottom:8px}
  /* jeder Punkt wird zu einer eigenen Kachel: Jahr, Anzahl, Preis untereinander, 44px hoch,
     in einer umbrechenden Reihe je Dekade - kein waagerechtes Scrollen auf dem Telefon. */
  .tlpt{position:static;width:auto;min-width:56px;margin:0 -1px -1px 0;padding:6px 10px 8px;
    display:inline-flex;flex-direction:column;align-items:center;gap:2px;
    border:1px solid var(--line-soft);min-height:44px}
  .tlpt::before{position:static;width:7px;height:7px;margin:0 0 2px;flex:none}
  .tlpt .n,.tlpt .p{margin-top:0}
  /* der Hinweis auf die Wischstrecke gilt nur oberhalb von 900px */
  .wideonly{display:none}
}

/* --- /clubs: "Show all N clubs" (Punkt 2) -----------------------------------
   Ein <details>. Ohne JavaScript bedienbar, die verborgenen Vereine bleiben im Dokument (Suchen im
   Browser und Screenreader finden sie), und der Griff ist ein 44px-Ziel im Knopf-Idiom von v8. */
.showall{margin-top:14px}
.showall>summary{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding:0 16px;
  border:1px solid var(--line);background:var(--paper);font-size:var(--t);font-weight:500;
  cursor:pointer;list-style:none;transition:background .2s,color .2s}
.showall>summary::-webkit-details-marker{display:none}
.showall>summary::after{content:"+";font-family:var(--display);font-weight:600;font-size:20px;line-height:1}
.showall[open]>summary::after{content:"–"}
.showall>summary:hover{background:var(--ink);color:var(--paper)}
.showall>summary .s{font-size:var(--t-sm);color:var(--muted)}
.showall>summary:hover .s{color:var(--mist-ink)}
.showall>summary:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
/* die Sektionskopf-Zeile auf /clubs traegt drei Angaben statt einer: sie darf umbrechen, aber nicht
   mitten in "59 clubs". Eigene Klasse, damit die Regel keine andere Sektionskopf-Zeile anfasst. */
.section-head .ctx.tight>span{white-space:nowrap}
@media (max-width:759px){.showall>summary{align-items:center;flex-wrap:wrap;padding:8px 14px}}

/* --- /alerts: hinterlegte Adresse + Aendern (Punkt 7) -----------------------
   Die Adresse steht maskiert in einer eigenen Zeile; "Change" ist ein <details>, damit das Feld
   ohne JavaScript aufgeht und der geschlossene Zustand die Zeile nicht aufblaeht. */
.mailrow{margin-top:10px;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;
  font-size:var(--t-md);color:var(--muted)}
.mailrow .lab{font-family:var(--display);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase}
.mailrow .addr{color:var(--ink);font-weight:500}
.chmail{min-width:0}
.chmail[open]{flex:1 1 100%}
.chmail>summary{display:inline-flex;align-items:center;min-height:32px;color:var(--petrol);
  font-weight:500;cursor:pointer;list-style:none}
.chmail>summary::-webkit-details-marker{display:none}
.chmail>summary:hover{text-decoration:underline}
.chmail>summary:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.chmail form{margin-top:10px;padding:12px 14px;border:1px solid var(--line);background:var(--white);
  max-width:420px}
.chmail form .btn{margin-top:10px}
.chmail form .fine{margin-top:8px}
@media (max-width:759px){.chmail>summary,.chmail form .btn{min-height:44px;height:auto}}