/* Components of mockup B2 «Tor» (odds, buttons, chips, shelves, event cards,
 * taśmy) and the ones designed in its language for the rest of the site
 * (catalogue rows, forms, accordion, prose, content cards, steps, empty states). */

@keyframes pop { 45% { transform: scale(.94); } }
@keyframes in { from { opacity: 0; transform: translateX(12px); } }

/* ── odds button ──────────────────────────────────────────────────────── */
.odd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 52px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--color-pick); color: var(--color-pick-ink); transition: transform var(--dur-base) var(--ease), background-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.odd .k { font: 600 11.5px/1.1 var(--font-body); opacity: .75; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odd .v { font: italic 700 var(--fs-odd)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.odd:hover { background: var(--color-pick-hover); transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(17, 19, 27, .5); }
.odd:active { transform: translateY(0) scale(.98); }
.odd[aria-pressed="true"] { background: var(--color-brand); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.odd[aria-pressed="true"] .k { opacity: .92; }
.odd.pop { animation: pop 300ms var(--ease); }
.odd--row { flex-direction: row; justify-content: space-between; gap: 10px; padding: 0 14px; min-height: 50px; }
.odd--row .k { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: left; line-height: 1.2; }
.odd--row .v { flex: none; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; line-height: 1.15; text-align: center; transition: background-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease), box-shadow var(--dur-base); }
.btn .icon { width: 18px; height: 18px; }
.btn--line { background: var(--surface-card); box-shadow: inset 0 0 0 1.5px var(--color-text); color: var(--color-text); }
.btn--line:hover { background: var(--color-text); color: #fff; transform: translateY(-2px); }
.btn--brand { background: var(--color-brand); color: #fff; }
.btn--brand:hover { background: var(--color-brand-hover); transform: translateY(-2px); }
.btn--brand:active { background: var(--color-brand-active); transform: none; }
.btn--brand[disabled], .btn--brand:disabled { background: var(--color-disabled); color: #fff; cursor: not-allowed; transform: none; }
.btn--pick { background: var(--color-pick); color: var(--color-pick-ink); }
.btn--pick:hover { background: var(--color-pick-hover); transform: translateY(-2px); }
.btn--ghost-night { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.btn--ghost-night:hover { background: #fff; color: var(--color-text); }
.btn--block { width: 100%; }
.link { color: var(--color-brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.link:hover { color: var(--color-brand-hover); }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-weight: 700; color: #fff; border-radius: var(--radius-sm); transition: color var(--dur-base); }
.more:hover { color: var(--color-pick); }
.more .icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease); }
.more:hover .icon { transform: translateX(3px); }

/* ── tools: segmented, search, chips ─────────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--color-border); }
.seg button, .seg a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; color: var(--color-muted); transition: background-color var(--dur-base), color var(--dur-base); }
.seg button:hover, .seg a:hover { color: var(--color-text); }
.seg [aria-pressed="true"], .seg [aria-current] { background: var(--color-text); color: #fff; }
.seg [aria-pressed="true"]:hover, .seg [aria-current]:hover { color: #fff; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; margin-left: auto; }
.search .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--color-muted); width: 18px; height: 18px; pointer-events: none; }
.search input { width: 100%; height: 48px; border: 0; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--color-border); padding: 0 16px 0 44px; font: 500 15px var(--font-body); color: var(--color-text); transition: box-shadow var(--dur-base); }
.search input::placeholder { color: var(--color-placeholder); }
.search input:focus { outline: 0; box-shadow: var(--focus-ring), inset 0 0 0 1.5px var(--color-brand); }
.search--btn input { padding-right: 112px; }
.search--btn .btn { position: absolute; right: 4px; top: 4px; min-height: 40px; border-radius: var(--radius-pill); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px 8px; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--color-border); font-weight: 600; font-size: 14px; transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease), background-color var(--dur-base), color var(--dur-base); }
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--color-text); }
.chip .icon { width: 17px; height: 17px; color: var(--color-brand-text); }
.chip small { font-size: 12px; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--color-text); color: #fff; box-shadow: none; }
.chip[aria-current] .icon, .chip[aria-pressed="true"] .icon { color: var(--color-pick); }
.chip[aria-current] small, .chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.select { position: relative; }
.select select { appearance: none; height: 48px; padding: 0 42px 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--color-border); font: 600 14.5px var(--font-body); color: var(--color-text); cursor: pointer; }
.select select:focus-visible { outline: 0; box-shadow: var(--focus-ring), inset 0 0 0 1.5px var(--color-brand); }
.select .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 18px; height: 18px; }

/* ── notice card (live / empty / info) ───────────────────────────────── */
.live { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 18px 20px; margin: 18px 0 8px; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-1); }
.live__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-brand-text); }
.live h2, .live h3 { font: italic 700 22px/1.1 var(--font-display); }
.live p { font-size: 14px; color: var(--color-muted); margin-top: 3px; max-width: 68ch; }

/* ── shelves ──────────────────────────────────────────────────────────── */
.shelf { padding: 28px 0 4px; }
.shelf__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.shelf__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--color-brand); color: #fff; transform: skewX(-8deg); flex: none; }
.shelf__ic .icon { transform: skewX(8deg); }
.shelf__h h2 { display: flex; align-items: center; min-height: 44px; font: italic 800 var(--fs-h2)/1 var(--font-display); letter-spacing: -.005em; }
.shelf__n { font-size: 13px; font-weight: 700; color: var(--color-muted); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--color-border); border-radius: var(--radius-pill); padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shelf__h .all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px; font-weight: 700; font-size: 14px; color: var(--color-brand-text); }
.shelf__h .all:hover { text-decoration: underline; text-underline-offset: 3px; }
.arrows { display: flex; gap: 6px; }
.rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-card); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--color-border); color: var(--color-text); transition: background-color var(--dur-base), color var(--dur-base), opacity var(--dur-base); }
.rb:hover { background: var(--color-text); color: #fff; }
.rb[disabled] { opacity: .35; cursor: default; background: var(--surface-card); color: var(--color-text); }
.rb--prev .icon { transform: scaleX(-1); }
.track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; padding: 8px 4px 20px; margin: 0 -4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -2px; }
.lead { flex: 0 0 220px; scroll-snap-align: start; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-md); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; min-height: 236px; background: var(--surface-night); box-shadow: var(--shadow-1); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.lead:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lead picture, .lead > img { position: absolute; inset: 0; z-index: -2; }
.lead img { width: 100%; height: 100%; object-fit: cover; }
.lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 14, 20, .9) 6%, rgba(12, 14, 20, .15) 62%); }
.lead::after { content: ""; position: absolute; right: 26px; top: -10%; bottom: -10%; width: 16px; background: var(--color-brand); transform: skewX(-24deg); z-index: -1; box-shadow: 24px 0 0 -10px var(--color-pick); }
.lead b { font: italic 800 32px/.95 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.lead span { font-size: 13px; font-weight: 600; opacity: .9; display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.lead span .icon { width: 16px; height: 16px; }
.ev { flex: 0 0 280px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 14px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.ev:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ev::before { content: ""; position: absolute; left: 16px; top: 0; width: 30px; height: 4px; border-radius: 0 0 3px 3px; background: var(--color-brand); transform: skewX(-24deg); }
.ev__top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.ev__top span { min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.ev__top time { flex: none; color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev__teams { display: grid; gap: 6px; }
.ev__teams b { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.2; min-width: 0; }
.ev__teams b span { min-width: 0; overflow-wrap: anywhere; }
.ev__teams i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font: italic 800 15px/1 var(--font-display); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-muted); }
.ev__teams i .icon { width: 14px; height: 14px; }
.ev__field { font-size: 13.5px !important; color: var(--color-muted); font-weight: 500 !important; }
.ev__odds { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.ev__more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 28px; font-size: 13px; font-weight: 700; color: var(--color-muted); transition: color var(--dur-base); }
.ev__more:hover { color: var(--color-brand-text); }
.ev__more .icon { width: 16px; height: 16px; }
.shelf__empty { flex: 1 0 260px; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: inset 0 0 0 1.5px var(--color-border); color: var(--color-muted); font-size: 14px; }
.shelf__empty b { color: var(--color-text); font-size: 15px; }

/* ── taśmy ────────────────────────────────────────────────────────────── */
.tapes { position: relative; isolation: isolate; margin: 36px 0 12px; padding: 36px 36px 8px; border-radius: var(--radius-lg); overflow: hidden; }
.tapes__pic { position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -2; }
.tapes__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.tapes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -1; background: linear-gradient(90deg, rgba(12, 14, 20, .88) 0%, rgba(12, 14, 20, .6) 46%, rgba(12, 14, 20, .15) 80%); }
.tapes__h { display: flex; align-items: flex-end; gap: 16px; color: #fff; margin-bottom: 22px; }
.tapes__h > div:first-child { padding: 14px 18px 16px; border-radius: var(--radius-md); background: rgba(12, 14, 20, .9); }
.tapes__h h2 { font: italic 800 clamp(30px, 3vw, 44px)/1 var(--font-display); text-transform: uppercase; }
.tapes__h p { font-size: 14px; color: rgba(255, 255, 255, .85); margin-top: 6px; max-width: 52ch; }
.tapes__h .arrows { margin-left: auto; }
.tapes .track { padding-bottom: 28px; }
.tape { flex: 0 0 330px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-2); overflow: hidden; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.tape:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.tape__lane { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; min-height: 118px; border-bottom: 2px solid var(--color-text); background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(226, 35, 47, .14) 27px 29px), var(--surface-card); }
.tape__no { font: italic 800 var(--fs-lane)/.78 var(--font-display); color: var(--color-brand-text); letter-spacing: -.04em; margin-left: -4px; }
.tape__no small { font-size: .42em; vertical-align: .95em; margin-right: 2px; }
.tape__no.ol { color: transparent; -webkit-text-stroke: 2px var(--color-brand); }
.tape__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-text); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
.tape__tag .icon { width: 14px; height: 14px; color: var(--color-pick); }
.tape__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.tape h3 { font: italic 700 22px/1.05 var(--font-display); }
.tape__sub { font-size: 13px; color: var(--color-muted); margin-top: 2px; }
.tape ol { display: grid; }
.tape li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--color-border); font-size: 13.5px; }
.tape li a { display: block; min-width: 0; }
.tape li a:hover b { color: var(--color-brand-text); }
.tape li b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tape li small { color: var(--color-muted); font-size: 12px; }
.tape li .v { font: italic 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; padding: 5px 8px; border-radius: 7px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--color-border); }
.tape__sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 2px solid var(--color-text); font-size: 13px; font-weight: 600; }
.tape__sum b { font: italic 800 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ── catalogue rows (designed in the card language) ──────────────────── */
.day { margin-top: 28px; }
.day__h { display: flex; align-items: center; gap: 12px; font: italic 800 24px/1 var(--font-display); text-transform: uppercase; margin-bottom: 4px; }
.day__h::before { content: ""; width: 26px; height: 5px; background: var(--color-brand); transform: skewX(-24deg); }
.lg-h { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.lg-h a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }
.lg-h a:hover { color: var(--color-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.lg-h .icon { width: 16px; height: 16px; color: var(--color-brand-text); }
.rows { display: grid; gap: 10px; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto; gap: 12px 18px; align-items: center; padding: 14px 14px 14px 20px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.row:hover { box-shadow: var(--shadow-2); }
.row::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 3px 3px 0; background: var(--color-brand); }
.row__m { min-width: 0; }
.row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--color-muted); font-weight: 600; }
.row__meta time { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.row__teams { display: grid; gap: 2px; margin-top: 6px; }
.row__team { font-weight: 700; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { font-size: 13px; color: var(--color-muted); }
.row__odds { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.row__more { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--color-muted); white-space: nowrap; border-radius: 8px; transition: color var(--dur-base); }
.row__more:hover { color: var(--color-brand-text); }
.row__more .icon { width: 16px; height: 16px; }

/* ── empty / error states ─────────────────────────────────────────────── */
.empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-1); }
.empty__ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-brand-text); }
.empty__ic .icon { width: 28px; height: 28px; }
.empty h2, .empty h3 { font: italic 800 26px/1.05 var(--font-display); }
.empty p { color: var(--color-muted); max-width: 52ch; }
.empty__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

/* ── section heads, content cards, steps ─────────────────────────────── */
.section { padding-top: 48px; }
.sec-h { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.sec-h h2 { font: italic 800 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; }
.sec-h p { color: var(--color-muted); max-width: 60ch; }
.kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-text); }
.kick::before { content: ""; width: 18px; height: 4px; background: var(--color-brand); transform: skewX(-24deg); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.card::before { content: ""; position: absolute; left: 20px; top: 0; width: 30px; height: 4px; border-radius: 0 0 3px 3px; background: var(--color-brand); transform: skewX(-24deg); }
a.card:hover, .card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-text); color: var(--color-pick); }
.card h3 { font: italic 700 24px/1.05 var(--font-display); }
.card p { font-size: 14.5px; color: var(--color-muted); }
.card .link { margin-top: auto; align-self: flex-start; }
.steps { display: grid; gap: 14px; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 22px 20px 16px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); }
.step__no { font: italic 800 72px/.8 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--color-brand); text-align: center; }
.step h3 { font: italic 700 24px/1.05 var(--font-display); }
.step p { color: var(--color-muted); margin-top: 6px; }
.step p a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.photo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); background: var(--surface-night); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.photo::after { content: ""; position: absolute; right: 30px; top: -10%; bottom: -10%; width: 18px; background: var(--color-brand); transform: skewX(-24deg); box-shadow: 26px 0 0 -10px var(--color-pick); }
.note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--color-border); font-size: 14.5px; color: var(--color-muted); }
.note .icon { color: var(--color-brand-text); margin-top: 2px; }
.note b { color: var(--color-text); }
.note--brand { background: var(--color-brand-tint); box-shadow: none; }

/* ── accordion (FAQ, glossary): <details> — opens without JS too ─────── */
.acc { display: grid; gap: 10px; }
.acc__item { border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); }
.acc__q { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 18px 16px 20px; font: 700 16.5px/1.3 var(--font-body); color: var(--color-text); border-radius: var(--radius-md); cursor: pointer; list-style: none; transition: color var(--dur-base); }
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { color: var(--color-brand-text); }
.acc__q .icon { margin-left: auto; transition: transform var(--dur-base) var(--ease); color: var(--color-brand-text); }
.acc__item[open] > .acc__q .icon { transform: rotate(45deg); }
.acc__a { padding: 0 20px 18px; color: var(--color-muted); }
.acc__item:not([open]) > .acc__a { display: none; }
.acc__item[open] > .acc__a { animation: acc-in var(--dur-slow) var(--ease); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }
.acc__a p + p, .acc__a p + ul, .acc__a ul + p { margin-top: 10px; }
.acc__a ul { list-style: disc; padding-left: 20px; }
.acc__a a, .acc__a .link { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.acc-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
/* ── forms ────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > label, .field__label { font-weight: 700; font-size: 14px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); background: var(--surface-sunken); box-shadow: inset 0 0 0 1.5px var(--color-border); font: 500 15px/1.4 var(--font-body); color: var(--color-text); transition: box-shadow var(--dur-base), background-color var(--dur-base); }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; background: #fff; box-shadow: var(--focus-ring), inset 0 0 0 1.5px var(--color-brand); }
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: inset 0 0 0 1.5px var(--color-error); background: var(--color-error-tint); }
.field__hint { font-size: 12.5px; color: var(--color-muted); }
.field__error { font-size: 13px; font-weight: 600; color: var(--color-error); }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
.field--check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-brand); cursor: pointer; }
.field--check label { font-weight: 500; font-size: 14px; }
.field--check label a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.field--check .field__error { grid-column: 1 / -1; }
.form__error { padding: 10px 12px; border-radius: 8px; background: var(--color-error-tint); color: var(--color-error); font-weight: 600; font-size: 14px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.counter { font-size: 12.5px; color: var(--color-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── prose: legal and long text (reading column ≤ 800px, brief §6) ───── */
.read { max-width: var(--read); margin: 0 auto; padding-top: 36px; }
.prose { font-size: 16px; line-height: var(--lh-read); color: #2A2E39; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 40px; font: italic 800 30px/1.05 var(--font-display); color: var(--color-text); scroll-margin-top: 24px; }
.prose h3 { margin-top: 26px; font: 700 18px/1.3 var(--font-body); color: var(--color-text); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--color-brand-text); }
.prose a { color: var(--color-brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-brand-hover); }
.prose strong { color: var(--color-text); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.prose th, .prose td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.prose th { font-weight: 700; color: var(--color-text); background: var(--surface-sunken); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); background: var(--surface-card); }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--color-muted); }
.meta-line b { color: var(--color-text); }
.toc { padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-1); }
.toc h2 { font: 700 13px/1 var(--font-body) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted) !important; margin: 0 0 10px !important; }
.toc ol { padding-left: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 36px; font-size: 14.5px; }
.toc li { break-inside: avoid; }
.toc a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.toc a:hover { color: var(--color-brand-text); text-decoration: underline; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); }
  .row__more { grid-column: 1 / -1; justify-self: start; min-height: 32px; padding: 0; }
}
@media (max-width: 900px) {
  .live { grid-template-columns: auto minmax(0, 1fr); }
  .live .btn { grid-column: 1 / -1; justify-self: start; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .search { max-width: none; margin-left: 0; flex-basis: 100%; }
  .seg { width: 100%; }
  .seg button, .seg a { flex: 1; padding: 0 8px; }
  .shelf__h { flex-wrap: wrap; gap: 8px 10px; }
  .shelf__h .arrows { display: none; }
  .shelf__h { flex-wrap: nowrap; }
  .shelf__title h2 { min-height: 0; }
  .lead { flex-basis: 150px; min-height: 220px; }
  .lead b { font-size: 26px; }
  .ev { flex-basis: 272px; }
  .tapes { margin-left: calc(var(--container-pad) * -1); margin-right: calc(var(--container-pad) * -1); padding: 28px 16px 4px; border-radius: 0; }
  .tapes__h { flex-wrap: wrap; }
  .tapes__h .arrows { margin-left: 0; }
  .tape { flex-basis: min(310px, 84vw); }
  .row { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 12px 18px; }
  .row__odds .odd { min-height: 50px; }
  .step { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .step__no { font-size: 54px; }
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 15.5px; }
  .prose h2 { font-size: 26px; margin-top: 32px; }
  .select, .select select { width: 100%; }
}

.shelf__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.shelf__title h2 { min-width: 0; }

/* links and code inside running text move to the next line whole instead of splitting across lines */
@media (min-width: 400px) { .prose a, .note a, .step p a, .acc__a a, .phead__lead a, .foot__rg a, .prose code, .step code { white-space: nowrap; } }
@media (max-width: 399px) { .prose a, .note a, .step a, .acc__a a, .step code { display: inline-block; max-width: 100%; } }
.ev__teams i[data-n]::before { content: attr(data-n); }