/* scarf page layout, ported from reference/team-page.html. Colours and type come from brand-tokens.css;
   each page or team element sets --stripe and --stripe-wide for its own team. */

/* The brand faces from our own site: the variable files Google Fonts sends a current browser, latin
   and latin-ext only, with Google's unicode-range, so a page loads only the files its text needs.
   Their licences sit next to them in fonts/. */
@font-face { font-family: 'Albert Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/AlbertSans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Albert Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/AlbertSans-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: 'Bricolage Grotesque'; font-weight: 300 800; font-display: swap; src: url(fonts/BricolageGrotesque-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 300 800; font-display: swap; src: url(fonts/BricolageGrotesque-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; }

body { margin: 0; background: var(--wool); color: var(--ink); font-family: var(--font-body); }
a { color: var(--terrace); }
a:hover { color: var(--ink); }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 13px; line-height: 1.5; color: var(--stand); }

/* Colour says who, lines say what: a country is its flag, name and stripes, a sport its ball icon,
   drawing and words. */
.flag { display: block; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(23, 23, 28, 0.2); }
.country-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.country-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; box-sizing: border-box; border: var(--border) solid var(--ink); border-radius: var(--radius-pill); background: var(--white); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.country-chip:hover { color: var(--ink); background: var(--wool); }
/* The country's name links to its page, from the landing's card and from a team page. */
a.country-name { color: var(--ink); text-decoration: none; }
a.country-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.band { height: 12px; background: var(--stripe-wide); border-bottom: var(--border) solid var(--ink); }
.wrap { max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; padding-left: 24px; padding-right: 24px; }

/* Header */
.site-header { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .wordmark { font-size: 30px; line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--radius-pill); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.pill-primary { padding: 0 18px; background: var(--terrace); color: var(--white); font-weight: 700; }

/* Buttons as links */
a.btn-primary, a.btn-secondary { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary:hover, .pill-primary:hover { color: var(--white); }
.btn-secondary:hover { color: var(--ink); }
button { cursor: pointer; }

/* Hero */
.hero { padding-top: 32px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px; align-items: start; }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
/* Team page: the country, its sport switch and the sport tag over the headline */
.country-bar { display: grid; grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; gap: 12px 20px; padding: 14px 0; border-top: var(--border) solid var(--chalk); border-bottom: var(--border) solid var(--chalk); }
/* Share ends the row; on phones it moves up beside the country and the sport switch takes a row. */
.country-bar .share { grid-column: -2; justify-self: end; padding: 0 16px; white-space: nowrap; }
.share svg { vertical-align: -4px; margin-right: 8px; }
/* Long names (Liechtenstein, Bosnia and Herzegovina) wrap or sit closer, never squeeze the button. */
@media (max-width: 719px) {
  .country-bar { grid-template-columns: 1fr auto; column-gap: 12px; }
  .country-bar .share { padding: 0 12px; }
  .country-bar .switch { grid-row: 2; grid-column: 1 / -1; }
}
/* Under 360 px a long single word (Liechtenstein) leaves no room: the icon stacks over the word
   rather than pushing the page sideways. */
@media (max-width: 359px) { .country-bar .share { white-space: normal; } }
.switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: var(--border) solid var(--ink); border-radius: var(--radius-pill); background: var(--white); }
.switch a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.switch a[aria-current] { background: var(--ink); color: var(--wool); font-weight: 700; }
.sport-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; box-sizing: border-box; border: var(--border) solid var(--ink); border-radius: var(--radius-pill); background: var(--white); font-size: 14px; font-weight: 700; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 76px); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; }
.lede { font-size: 19px; line-height: 1.5; color: var(--stand); max-width: 560px; }

/* Subscribe panel */
.subscribe { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.paste { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--stand); }
.paste-row { display: flex; gap: 8px; }
.paste input { flex: 1; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 12px; border: var(--border) solid var(--chalk); border-radius: var(--radius-input); background: var(--white); color: var(--ink); font: 400 14px var(--font-body); }
.paste button { flex: none; padding: 0 16px; }
/* The feed choice is hidden until the script that makes it work has run. */
.feed-choice:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
/* Safari sizes a grid fieldset's legend against zero width, which wrapped it one word per line. */
.feed-choice legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--stand); white-space: nowrap; }
.feed-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: var(--border) solid var(--chalk); border-radius: var(--radius-input); background: var(--white); font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.feed-choice label:has(:checked) { border-color: var(--ink); }
.feed-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--terrace); cursor: pointer; }
.feed-choice .small { display: block; margin-top: 2px; font-weight: 400; }

/* Cards */
.card { display: flex; flex-direction: column; }
.card-surface { height: 150px; padding: 16px 28px; box-sizing: border-box; background: var(--wool); border-bottom: var(--border) solid var(--chalk); }
.card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--stand); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.4; }
.facts li { display: flex; align-items: center; gap: 12px; }
.facts svg { flex: none; }
.facts a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--chalk); font-size: 13px; color: var(--stand); }
.yours { color: var(--stand); white-space: nowrap; }

/* Upcoming games */
.games { background: var(--white); border-top: var(--border) solid var(--chalk); border-bottom: var(--border) solid var(--chalk); }
.games > .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.aside { font-size: 14px; color: var(--stand); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 0; border-top: var(--border) solid var(--chalk); }
.row:last-child { border-bottom: var(--border) solid var(--chalk); }
.row-date { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.row-day { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.03em; }
.row-time { font-size: 14px; color: var(--stand); }
.row-main { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.row-meta { font-size: 14px; line-height: 1.4; color: var(--stand); }
.row-tickets { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: var(--border) solid var(--ink); border-radius: var(--radius-button); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.games .small { max-width: 760px; }

/* How it works: each step is a card with a picture of what the calendar shows on top, like the
   next-game card's drawing. The button is the section's one red. */
.how { padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.step { background: var(--white); border: var(--border) solid var(--ink); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.step-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -0.04em; }
.step h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.step p { font-size: 15px; line-height: 1.5; color: var(--stand); }
.scene { min-height: 168px; box-sizing: border-box; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--wool); border-bottom: var(--border) solid var(--chalk); font-size: 13px; color: var(--stand); }
.scene .btn-primary { height: 48px; font-size: 16px; }
.cal-old { align-self: flex-start; padding: 4px 10px; border: var(--border) dashed var(--chalk); border-radius: 6px; font-size: 12px; text-decoration: line-through; }
.cal-event, .nudge { display: flex; flex-direction: column; gap: 2px; background: var(--white); border: var(--border) solid var(--chalk); }
/* The bar is the team's calendar colour: 6 px of the stripe is its first colour. */
.cal-event { position: relative; overflow: hidden; padding: 10px 12px 10px 18px; border-radius: 8px; }
.cal-event::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--stripe); }
.nudge { padding: 12px 14px; border-radius: 14px; }
.nudge-time { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.nudge-time svg { width: 16px; height: 16px; }
.cal-event b, .nudge b { font-size: 15px; color: var(--ink); }

/* Find your country: hidden until the script that filters the countries has run. A filtered-out
   chip or card is hidden too, over its own display. 16 px text, so phones do not zoom on focus. */
.find:not([hidden]) { display: flex; flex-direction: column; gap: 6px; max-width: 360px; font-size: 13px; font-weight: 600; color: var(--stand); }
.find input { height: 46px; box-sizing: border-box; padding: 0 12px; border: var(--border) solid var(--chalk); border-radius: var(--radius-input); background: var(--white); color: var(--ink); font: 400 16px var(--font-body); }
.country-chip[hidden], .card[hidden] { display: none; }
.find:not([hidden]) .small:empty { display: none; }

/* Other teams: the text, then every country's chip across the full width */
.teams { background: var(--ink); color: var(--wool); }
.teams > .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.teams .find:not([hidden]), .teams .find .small { color: var(--ink-muted); }
.teams-text { display: flex; flex-direction: column; gap: 12px; }
.teams-text p { font-size: 16px; line-height: 1.5; color: var(--ink-muted); max-width: 460px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.teams .country-chip { gap: 10px; border-color: var(--wool); background: transparent; color: var(--wool); font-size: 14px; }
.teams .country-chip:hover { color: var(--wool); border-color: var(--ink-muted); }
.teams .country-chip[aria-current] { background: var(--wool); color: var(--ink); }

/* A country card, on its page and in the kit: one cell per sport */
.countries { padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.country-body { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.country-body .country-name { align-self: center; gap: 14px; }
.country-body h2 { font-weight: 800; font-size: 36px; letter-spacing: -0.04em; }
.country-body .country-name svg { width: 24px; height: 24px; }
.cell { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: var(--border) solid var(--chalk); border-radius: var(--radius-button); background: var(--wool); color: var(--ink); text-decoration: none; }
a.cell:hover { color: var(--ink); border-color: var(--ink); }
.cell-sport { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.cell-sport svg { width: 20px; height: 20px; }
.cell-sport small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--stand); }
.cell-next { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--stand); }
.cell-next b { font-size: 16px; font-weight: 600; color: var(--ink); }
.cell-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.cell-cta svg { width: 16px; height: 16px; }
/* A sport the country has no team in: greyed out, the ball too. */
.cell-empty { justify-content: center; border-style: dashed; background: transparent; color: var(--stand); font-size: 14px; }
.cell-empty .cell-sport svg { stroke: currentColor; }

/* Clubs: a club is its crest, its name and its kit stripes, with its country's flag as a small mark
   by its home city. Its chip carries a swatch of the stripes where a country's carries its flag. */
.section { padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.swatch { flex: none; width: 20px; height: 15px; border-radius: 3px; background: var(--swatch); box-shadow: 0 0 0 1px rgba(23, 23, 28, 0.2); }
.teams .swatch { box-shadow: 0 0 0 1px rgba(251, 248, 242, 0.35); }
/* The crest, or until its file is in assets/crests/ a round swatch of the kit stripes. */
.crest { flex: none; object-fit: contain; }
.crest-kit { box-sizing: border-box; border: var(--border) solid var(--ink); border-radius: 50%; background: var(--stripe); }
.club-grid, .comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.club-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.club-head, .club-id { display: flex; align-items: center; gap: 12px; }
.club-head .crest { width: 44px; height: 44px; }
.club-id .crest { width: 48px; height: 48px; }
.club-name { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; line-height: 1; }
.club-name a { color: var(--ink); text-decoration: none; }
.club-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.club-home { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; color: var(--stand); text-decoration: none; }
.club-id .club-home { margin-top: 3px; }
.club-home .flag { border-radius: 2px; }
.club-body .cell-cta, .comp-body .cell-cta { margin-top: auto; }
a.cell-cta { color: var(--ink); text-decoration: none; }
/* A competition's card: no stripe header, nothing on it is a team. */
.comp-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.comp-name { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
.comp-name svg { width: 26px; height: 26px; }
/* The competition's clubs and This week's teams: smaller chips. */
.comp-clubs, .row-teams { display: flex; flex-wrap: wrap; gap: 8px; }
.comp-clubs .country-chip, .row-teams .country-chip { padding: 0 12px 0 10px; font-size: 14px; }
.comp-clubs .country-chip { border-color: var(--chalk); }
/* "and 14 more", "All 20 EuroLeague clubs", "Every team on scarf": dashed, quieter. */
.country-chip.more { border-style: dashed; color: var(--stand); }
.teams .country-chip.more { color: var(--ink-muted); }
.country-chip.more svg { width: 16px; height: 16px; }
/* Other teams on a club page: the neighbours in small groups, not the whole site. */
.teams-group { display: flex; flex-direction: column; gap: 10px; }
.teams-group h3 { font-size: 14px; font-weight: 600; color: var(--ink-muted); }

/* Identity kit (/kit/): every country, sport and team card side by side */
.kit { padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.kit-team { display: flex; flex-direction: column; gap: 8px; }
.kit-words { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.kit-words dt { color: var(--stand); }
.kit-words dd { margin: 0; font-weight: 600; }

/* Footer */
.site-footer { padding-top: 28px; padding-bottom: 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; line-height: 1.5; color: var(--stand); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .wordmark { font-size: 20px; color: var(--ink); }
/* A quiet link in the footer's own grey; the GitHub mark sits on the text's baseline and follows its colour. */
.footer-link { color: inherit; text-underline-offset: 3px; }
.footer-link:hover { color: var(--ink); }
.footer-link svg { vertical-align: -3px; margin-right: 6px; }