/* Portal HFT/FT — wariant C "terenowy, ciemny" on top of Pico CSS 2 (data-theme="dark"). */

:root,
[data-theme="dark"] {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --pico-background-color: #15181c;
  --pico-color: #e7e9ec;
  --pico-h1-color: #f3f4f6;
  --pico-h2-color: #e7e9ec;
  --pico-h3-color: #e7e9ec;
  --pico-muted-color: #8b949e;
  --pico-muted-border-color: #2a3037;
  --pico-primary: #ff9f1c;
  --pico-primary-background: #ff9f1c;
  --pico-primary-border: #ff9f1c;
  --pico-primary-underline: rgba(255, 159, 28, 0.5);
  --pico-primary-hover: #ffb347;
  --pico-primary-hover-background: #ffb347;
  --pico-primary-hover-border: #ffb347;
  --pico-primary-focus: rgba(255, 159, 28, 0.35);
  --pico-primary-inverse: #1a1300;
  --pico-secondary: #aab2bc;
  --pico-secondary-background: #2a3037;
  --pico-secondary-border: #3a414a;
  --pico-secondary-hover-background: #343b44;
  --pico-secondary-hover-border: #4a525c;
  --pico-secondary-inverse: #e7e9ec;
  --pico-card-background-color: #1d2126;
  --pico-card-sectioning-background-color: #22272d;
  --pico-card-box-shadow: none;
  --pico-form-element-background-color: #15181c;
  --pico-form-element-border-color: #3a414a;
  --pico-form-element-focus-color: #ff9f1c;
  --pico-table-border-color: #2a3037;
  --pico-table-row-stripped-background-color: #1a1e23;
  --pico-mark-background-color: rgba(255, 159, 28, 0.18);
  --pico-mark-color: #ffcf8a;
  --pico-border-radius: 0.6rem;
  --pico-spacing: 1rem;
  --portal-panel: #1d2126;
  --portal-line: #2a3037;
  --portal-ok: #3fb950;
  --portal-warn: #d29922;
  --portal-bad: #f85149;
  --portal-info: #58a6ff;
  --portal-forced: #c084fc;
  color-scheme: dark;
}

body { min-height: 100vh; }
main.container { padding-top: 1.25rem; padding-bottom: 3rem; }
h1 { font-size: 1.6rem; font-weight: 750; margin-bottom: 0.25rem; }
h2 { font-size: 1.15rem; font-weight: 650; margin-top: 1.5rem; }
small, .muted { color: var(--pico-muted-color); }

/* Icons */
.icon { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex-shrink: 0; }
.icon-lg { width: 1.4em; height: 1.4em; }

/* Top bar */
.topbar { background: #1d2126; border-bottom: 1px solid var(--portal-line); position: sticky; top: 0; z-index: 20; }
.topbar nav { gap: 0.5rem; }
.topbar .brand, .topbar nav a:not([role="button"]) { white-space: nowrap; }
.topbar .brand { font-weight: 800; color: var(--pico-primary); letter-spacing: 0.02em; display: inline-flex; gap: 0.45rem; align-items: center; text-decoration: none; }
.topbar nav a:not(.brand):not([role="button"]) { color: #aab2bc; display: inline-flex; gap: 0.4rem; align-items: center; border-radius: 0.5rem; padding: 0.45rem 0.7rem; margin: 0; }
.topbar nav a:not(.brand):not([role="button"]):hover, .topbar nav a:not([role="button"])[aria-current="page"] { background: #2a3037; color: #fff; text-decoration: none; }
.topbar details.dropdown summary { border-radius: 0.5rem; }
.topbar details.dropdown ul { background: #1d2126; border: 1px solid var(--portal-line); }
/* The account list hangs from the right edge of its <li>: WebKit does not use <details> as the
   containing block, and dir="rtl" tricks disagree between browsers. */
.set-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.4rem; vertical-align: middle; margin-right: 0.5rem; }
/* Dictionary hint under equipment fields: a compact pill, hidden while empty */
.catalog-hint { display: none; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; margin: -0.35rem 0 1rem; padding: 0.35rem 0.75rem; border: 1px solid var(--portal-line); border-radius: 999px; font-size: 0.85rem; line-height: 1.3; color: var(--pico-muted-color); }
.catalog-hint:not([data-state="empty"]) { display: flex; }
.catalog-hint::before { content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--hint-icon) center / contain no-repeat; mask: var(--hint-icon) center / contain no-repeat; }
.catalog-hint[data-state="known"] { --hint-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); color: #7ee787; background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.35); }
.catalog-hint[data-state="new"] { --hint-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); color: #e3b341; background: rgba(210, 153, 34, 0.12); border-color: rgba(210, 153, 34, 0.35); }
.account-menu { position: relative; }
.account-initials { margin-left: 0.3rem; font-weight: 700; letter-spacing: 0.03em; }
/* The account button lights up on the user's own pages (core.navigation ACCOUNT). */
.account-menu.current > details > summary { border-color: var(--pico-primary); }
/* Pico pads body > header; the top bar does not need it. */
body > header.topbar { padding-block: 0; }
/* Account menu groups ("Moje", "Konto") and shorter rows so the list fits on screen. */
.account-menu .menu-group { padding: 0.55rem 1rem 0.15rem; border-top: 1px solid #2b3138; margin-top: 0.25rem; cursor: default; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; color: var(--pico-muted-color); }
.account-menu details.dropdown ul li:not(.account-card):not(.menu-group) { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.account-menu .account-card { display: grid; gap: 0.15rem; padding: 0.3rem 1rem 0.6rem; border-bottom: 1px solid #2b3138; margin-bottom: 0.25rem; cursor: default; }
.account-card small { color: var(--pico-muted-color); overflow-wrap: anywhere; }
.account-roles { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.account-menu details.dropdown { position: static; }
.topbar details.dropdown summary + ul { left: auto; right: 0; inset-inline: auto 0; }
.topbar details.dropdown ul li form button { width: 100%; text-align: left; margin: 0; }
.nav-toggle { display: none; }
/* Language switcher: works without JavaScript (details + POST form). */
.flag { width: 1.3rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); vertical-align: middle; flex: none; }
.lang-switch { position: relative; }
.lang-switch details.dropdown { position: static; margin: 0; }
.lang-switch summary { display: inline-flex; align-items: center; padding: 0.45rem 0.7rem; margin: 0; color: #aab2bc; }
.topbar .lang-switch details.dropdown > summary { border: 0; background: transparent; box-shadow: none; }
.topbar .lang-switch details.dropdown > summary::after { display: none; content: none; background-image: none; }
.topbar .lang-switch details.dropdown[open] > summary, .topbar .lang-switch details.dropdown > summary:hover { background: #2a3037; }
.lang-switch summary .flag { width: 1.05em; }
.lang-switch li { padding: 0; }
.lang-switch details.dropdown summary + ul { min-width: 0; width: max-content; padding: 0.35rem; }
.lang-switch form { display: grid; grid-template-columns: repeat(3, 4rem); gap: 0.15rem; }
.topbar .lang-switch details.dropdown ul li form button.lang-option { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0.45rem 0.25rem; background: transparent; border: 0; border-radius: 0.5rem; color: var(--pico-muted-color); }
.lang-switch .lang-option .flag { width: 1.7em; }
.lang-switch .lang-cap { font-size: 0.7rem; font-weight: 700; line-height: 1; color: var(--pico-muted-color); }
.topbar .lang-switch .lang-option:hover, .topbar .lang-switch .lang-option:focus-visible { background: #2a3037; }
.topbar .lang-switch .lang-option[aria-current="true"] { background: #2a3037; }
.topbar .lang-switch .lang-option[aria-current="true"] .lang-cap { color: #fff; }
@media (max-width: 1279px) {
  .lang-switch details.dropdown summary + ul { width: 100%; }
  .lang-switch form { grid-template-columns: repeat(3, 1fr); }
}
/* One row from 1280 px (F-UI-2): tighter items, no wrapping; Help shrinks to its icon. */
@media (min-width: 1280px) {
  .topbar nav { flex-wrap: nowrap; }
  .topbar nav .nav-links { flex-wrap: nowrap; margin-left: auto; }
  .topbar nav > ul > li { padding: 0.55rem 0.1rem; }
  .topbar nav a:not(.brand):not([role="button"]) { padding: 0.4rem 0.6rem; }
  .topbar nav .nav-links .help-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The bar is ~73 px high, so the account list may be almost as tall as the window. */
  .account-menu details.dropdown summary + ul { max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
  /* Tighter account list so it fits a 1366x768 screen without scrolling inside. */
  .account-menu .menu-group { padding-top: 0.4rem; margin-top: 0.15rem; }
  .account-menu details.dropdown ul li:not(.account-card):not(.menu-group) { padding-top: 0.05rem; padding-bottom: 0.05rem; }
  .account-menu .account-card { padding-bottom: 0.4rem; margin-bottom: 0.15rem; }
  .account-menu details.dropdown ul li:not(.account-card):not(.menu-group) a { padding-top: 0.28rem; padding-bottom: 0.28rem; }
}
/* 1280-1535 px: Pico's container is 1200 px, so the item icons go (not brand, help, flag, account). */
@media (min-width: 1280px) and (max-width: 1535px) {
  .topbar nav .nav-links > li > a:not(:has(.help-label)) .icon { display: none; }
  .topbar nav a:not(.brand):not([role="button"]) { padding-left: 0.45rem; padding-right: 0.45rem; }
}
@media (max-width: 1279px) {
  .js .nav-toggle { display: inline-flex; padding: 0.45rem 0.6rem; margin: 0; }  /* a button that needs JavaScript */
  /* Pico's invisible click-away layer would cover the page and the hamburger while the account
     list is open; in the phone menu the list is inline and needs no such layer. */
  .topbar details.dropdown[open] > summary::before { display: none; }
  /* The open menu can be taller than a small phone screen; the sticky header scrolls inside itself. */
  .topbar { max-height: 100dvh; overflow-y: auto; }
  .topbar nav { flex-wrap: wrap; }
  .topbar nav .nav-links { width: 100%; flex-direction: column; align-items: stretch; }
  .js .topbar nav .nav-links { display: none; }
  .js .topbar nav.open .nav-links { display: flex; }
  .topbar nav .nav-links li { padding: 0.1rem 0; }
  /* In the open phone menu the account list unfolds in the flow instead of floating. */
  /* relative + z-index keeps the list above Pico's invisible click-away layer (summary::before). */
  .topbar details.dropdown summary + ul { position: relative; z-index: 99; width: 100%; margin-top: 0.25rem; }
  /* Phone and tablet: the open menu has two columns; the account spans both. */
  .js .topbar nav.open .nav-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5rem; }
  .topbar nav .nav-links > li.account-menu { grid-column: 1 / -1; }
  .topbar .account-menu .account-card { padding-top: 0.6rem; }
}

/* Page header: title + actions */
/* F-UI-2: the title, then the meta line, then the actions — always under the title, from the left. */
.page-header { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.6rem; margin-bottom: 1rem; }
.page-header h1 { margin: 0; }
.page-header .meta { color: var(--pico-muted-color); font-size: 0.9rem; margin: 0.2rem 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.actions > *, .actions form button { margin: 0; }
.actions form button, .actions button { width: auto; }
a[role="button"], button { display: inline-flex; gap: 0.4rem; align-items: center; justify-content: center; font-weight: 650; }
a[role="button"].secondary, button.secondary { font-weight: 600; }
/* One weight for every button: Pico's [type=…] selectors outrank a bare `button`, so a
   <button type="submit"> used to render at 400 next to 650 links-as-buttons (F-UI-2). */
button[type], :is(a, button, summary)[role="button"] { font-weight: 650; }
button[type].secondary, :is(a, button, summary)[role="button"].secondary { font-weight: 600; }
/* Green is reserved for signing off results: "Zatwierdzam" (card), "Zatwierdź wyniki". */
button.approve, a[role="button"].approve { background: var(--portal-ok); border-color: var(--portal-ok); color: #07130a; }
button.approve:hover, a[role="button"].approve:hover { background: #56d364; border-color: #56d364; }
/* Actions inside one table cell: links, small buttons and a red link on one line. */
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.row-actions .inline-form { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
table.data-table td .row-actions { white-space: normal; }
/* My starts (competitions/my_entries.html): one row per start, three columns: [name + results] [details 2x2] [actions in the result lines] */
.starts-table table tr.start-row > td { vertical-align: top; white-space: normal; padding-top: 0.6rem; padding-bottom: 0.7rem; }
.start-line { display: flex; align-items: center; min-height: 2.6rem; }
.start-line + .start-line { margin-top: 0.3rem; }
.start-line.right { justify-content: flex-end; }
.start-line .start-chip { margin-top: 0; }
.start-title > span { white-space: nowrap; }
.start-line .part-label { margin-right: 0.4rem; }
.start-meta-cell { width: 21.5rem; }
.start-meta { display: grid; grid-template-columns: 13rem 6rem; justify-content: start; justify-items: start; align-items: center; gap: 0.5rem 1rem; padding-top: 0.35rem; }
.start-meta .meta-date { font-weight: 500; }
.start-meta .meta-amount { color: var(--pico-muted-color); }
.start-actions { display: inline-flex; gap: 0.4rem; align-items: center; }
.start-actions [role="button"], .start-actions button { width: auto; margin: 0; padding: 0.2rem 0.7rem; font-size: 0.85rem; line-height: 1.4; white-space: nowrap; }
.start-actions form { margin: 0; display: inline-flex; }
.start-actions .icon { width: 1em; height: 1em; margin-right: 0.3rem; vertical-align: -0.12em; }
@media (max-width: 640px) {
  .starts-table table tr.start-row { display: grid; grid-template-columns: 1fr auto; }
  .starts-table table thead tr { display: grid; grid-template-columns: 1fr auto; }
  .starts-table table thead th:nth-child(3) { display: none; }
  .starts-table table tr.start-row > td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  .starts-table table tr.start-row > td:nth-child(3) .start-title { display: none; }
  .starts-table table tr.start-row > td:nth-child(3) .start-line.right { justify-content: flex-start; }
  .starts-table table tr.start-row > td:nth-child(1), .starts-table table tr.start-row > td:nth-child(2) { border-bottom: 0; }
  .starts-table table .start-line:empty, .starts-table table .start-line.right:not(:has(.start-actions > *)) { display: none; }
  .starts-table table .start-line .part-label.sm-only { display: inline; }
  .starts-table table .start-title > span { white-space: normal; }
  .start-meta-cell { width: auto; }
  .start-meta { grid-template-columns: max-content; }
  .start-meta .meta-date { font-size: 0.85rem; white-space: normal; }
}

/* Panels */
.panel, article { background: var(--portal-panel); border: 1px solid var(--portal-line); border-radius: 0.8rem; padding: 1rem; margin: 0 0 1rem; box-shadow: none; }
article > header { margin: -1rem -1rem 1rem; padding: 0.75rem 1rem; background: var(--pico-card-sectioning-background-color); border-bottom: 1px solid var(--portal-line); border-radius: 0.8rem 0.8rem 0 0; }
.duo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; margin-bottom: 1rem; }
.duo > .panel { margin: 0; }
/* A column of panels inside .duo (account settings): the two stacks balance their heights. */
.duo > .duo-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.duo-col > .panel { margin: 0; }
/* Account settings: two equal columns from tablet width, one on a phone. */
@media (min-width: 768px) { .settings-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo:not(:has(.panel)) { display: none; }
/* The map actions (Pokaż mapę, coordinates + Kopiuj, Nawiguj) must stay on one line: below 1280 px
   directions and weather stack, from 1280 px directions get the wider column and a shorter field;
   side by side both panels are as tall as the taller one. */
@media (max-width: 1279px) { .duo:has(> #dojazd) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1280px) {
  .duo:has(> #dojazd):has(> #pogoda) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
  .duo .map-actions .copy-row input { width: 10.5rem; padding-inline: 0.55rem; font-size: 0.8rem; }
}
details.course > summary, details.entrants > summary { margin-bottom: 0.75rem; }
details.entrants tr.muted td, details.entrants tr.muted a { color: var(--pico-muted-color); }
.subnav.course-tabs { margin: 0 0 0.75rem; }  /* HFT / FT tabs of the public course panel */
.subnav.course-tabs a { padding: 0.45rem 0.9rem; }
td.ft-diff { color: var(--pico-primary); font-weight: 650; }  /* FT value that differs from HFT */
.panel-title { display: flex; gap: 0.5rem; align-items: center;  margin: 0 0 0.75rem; font-size: 1.05rem; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1rem; }
.tile { display: block; background: var(--portal-panel); border: 1px solid var(--portal-line); border-radius: 0.8rem; padding: 1rem; color: inherit; text-decoration: none; }
.tile:hover { border-color: var(--pico-primary); text-decoration: none; }
.tile strong { display: block; font-size: 1.05rem; }
.tile .icon, .meta .icon { margin-right: 0.35rem; }
.form-panel { max-width: 40rem; }
/* Avatar page (F-ATH-6): the 96 px circle above the upload */
.avatar-head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1rem; }
.avatar-head p { margin: 0.2rem 0 0; }
.avatar-preview { flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--portal-line); font-size: 2rem; font-weight: 700; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Avatar library picker: a grid of round pictures, each a label around a visually hidden radio. */
.avatar-group { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.avatar-group legend { font-weight: 600; margin-bottom: 0.5rem; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.5rem; }
.avatar-choice { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; }
.avatar-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.avatar-choice img { width: 64px; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; box-sizing: border-box; }
.avatar-choice:hover img { border-color: var(--portal-line); }
.avatar-choice input:checked + img { border-color: var(--pico-primary); box-shadow: 0 0 0 2px var(--pico-background-color), 0 0 0 4px var(--pico-primary); }
.avatar-choice input:focus-visible + img { outline: 2px solid var(--pico-primary); outline-offset: 3px; }
.flush { margin: 0; }
.spaced { margin-bottom: 1rem; }
.inline-form { display: inline; }
.inline-form button { margin: 0; width: auto; min-height: 2.75rem; min-width: 2.75rem; padding: 0.2rem 0.8rem; }
.inline-form button.sm { min-height: 2.5rem; min-width: 0; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
.inline-form select { margin: 0; width: auto; max-width: 100%; min-height: 2.75rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }
/* Merge request queue: reason field, reject and mark-done in one row (wraps on a phone). */
.merge-actions .reject-form { display: flex; flex: 1 1 20rem; gap: 0.5rem; align-items: center; }
.merge-empty { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; }
.merge-actions .reject-form input { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 2.75rem; }
.void-form { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
/* Course page (Stanowiska i cele): the targets in two columns split by lane (one under 1100 px),
   compact fields, a line between lanes, voiding in a row under its target. Killzone: the field
   plus six circles drawn to scale (15-40 mm, course.js writes the value). On a phone each target
   takes two lines: target, stance, distance; then killzone with its circles. */
.course-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
@media (max-width: 1099px) { .course-cols { grid-template-columns: 1fr; } }
.course-table { width: 100%; min-width: 0; --pico-form-element-spacing-vertical: 0.3rem; --pico-form-element-spacing-horizontal: 0.5rem; }
.course-table :is(th, td) { vertical-align: middle; padding-block: 0.3rem; padding-inline: 0.35rem; }
.course-table :is(select, input) { margin: 0; }
.course-table select { width: 4.4rem; }
.course-table td.num input { width: 4.4rem; text-align: right; }
.course-table tr.lane-start td { border-top: 2px solid var(--portal-line); }
.course-table td.st { color: var(--pico-muted-color); }
.course-table thead th { white-space: normal; line-height: 1.2; }  /* "Odległość [m]" may wrap: two columns must fit */
.course-table tr.figure-row td { padding-top: 0; border-top: 0; }
.course-table tr:has(+ tr.figure-row) td { border-bottom: 0; }  /* the void line belongs to its target */
.course-table .void-form { display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: center; }
.course-table .void-form select { flex: 1 1 auto; width: 0; min-width: 0; }  /* width 0: the longest reason must not widen the table */
.course-table button.sm { width: auto; margin: 0; min-height: 0; padding: 0.3rem 0.8rem; font-size: 0.9rem; white-space: nowrap; }
.kz-wrap { display: flex; align-items: center; gap: 0.45rem; flex-wrap: nowrap; }
.kz-wrap input { width: 3.4rem; text-align: right; flex: none; }
/* .kz-dots.js-only: must outweigh `.js .js-only { display: revert }` further down */
.js .kz-dots.js-only { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; }
/* The button is the touch target (--hit, the circle's own size on a wide screen, 44 px on a
   phone); the span inside is the circle drawn to scale. */
.kz-dot { --d: 24px; --hit: var(--d); width: var(--hit); height: var(--hit); min-height: 0; padding: 0; margin: 0;
  display: inline-grid; place-items: center; flex: none; cursor: pointer; border: 0; background: none; }
/* A tap focuses the button: no ring around the whole touch target (:focus-visible marks the circle). */
.kz-dot:focus { box-shadow: none; outline: none; }
.kz-dot > span { width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--pico-muted-border-color, #3a414a); color: var(--pico-muted-color);
  font-size: 0.62rem; font-weight: 700; line-height: 1; }
.kz-dot:hover > span, .kz-dot:focus-visible > span { border-color: var(--pico-primary); color: var(--pico-primary); }
.kz-dot.on > span { background: var(--pico-primary); border-color: var(--pico-primary); color: #16120a; }
.kz-dot.inherited > span { border-style: dashed; border-color: var(--pico-primary); color: var(--pico-primary); }
.kz-15 { --d: 18px; } .kz-20 { --d: 22px; } .kz-25 { --d: 26px; } .kz-30 { --d: 30px; } .kz-35 { --d: 34px; } .kz-40 { --d: 38px; }
@media (max-width: 640px) {
  .course-table, .course-table thead, .course-table tbody { display: block; }
  .course-table tr:not(.figure-row) { display: grid; grid-template-columns: 2.2rem 2.4rem 4.6rem 1fr; align-items: center; }
  .course-table thead th:nth-child(5) { display: none; }  /* killzone has its own label in the cell */
  .course-table td.kz-cell { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .course-table tr.lane-start td.kz-cell { border-top: 0; }
  .course-table td.num input { width: 100%; }
  .course-table tr.figure-row { display: block; }
  .course-table tr.figure-row td { display: block; }
  .kz-wrap { flex-wrap: wrap; row-gap: 0.2rem; }
  .kz-label { color: var(--pico-muted-color); font-size: 0.85rem; }
  .js .kz-dots.js-only { flex-basis: 100%; min-width: 0; justify-content: space-between; gap: 0; }
  .kz-dot { --hit: 44px; flex: 0 1 var(--hit); min-width: 0; }  /* narrower than 341 px: shrink, never scroll */
}
.thumb { max-width: 15rem; border-radius: 0.6rem; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.details dt { color: var(--pico-muted-color); }
dl.details dd { margin: 0; }
.photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; border-radius: 0.6rem; }

/* Alerts (Django messages) */
.alert { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--portal-line); border-left: 4px solid var(--portal-info); background: var(--portal-panel); border-radius: 0.6rem; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.alert-success { border-left-color: var(--portal-ok); }
.alert-error { border-left-color: var(--portal-bad); }
.alert-warning { border-left-color: var(--portal-warn); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.78rem; font-weight: 650; background: #2a3037; color: #cdd3da; white-space: nowrap; }
.badge-ok { background: rgba(63, 185, 80, 0.15); color: #7ee787; }
.badge-warn { background: rgba(210, 153, 34, 0.15); color: #e3b341; }
.badge-bad { background: rgba(248, 81, 73, 0.15); color: #ff7b72; }
.badge-info { background: rgba(88, 166, 255, 0.15); color: #79c0ff; }
.badge-accent { background: rgba(255, 159, 28, 0.15); color: #ffb347; }
.badge-wrap { white-space: normal; overflow-wrap: anywhere; }

/* Tables */
.table-wrap { overflow-x: auto; position: relative; }  /* relative: an absolute .sr-only inside the table must stay clipped, or it widens the page */
table { font-size: 0.95rem; }
table th { color: var(--pico-muted-color); font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
table td, table th { padding: 0.6rem 0.55rem; }
table.data-table td { white-space: nowrap; }
table.data-table td small { white-space: normal; }
.big-number { font-size: 1.6rem; font-weight: 800; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank { font-weight: 800; }
.rank-1 { color: #ffd166; } .rank-2 { color: #d0d7de; } .rank-3 { color: #e3a36b; }
.bar { display: inline-block; vertical-align: middle; width: 4rem; height: 0.35rem; margin-left: 0.4rem; background: #2a3037; border-radius: 0.2rem; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--pico-primary); }
/* Short forms of labels: full text on wide screens, abbreviation (full name in the title) on phones */
.sm-short, .sm-only { display: none; }
abbr.sm-short { text-decoration: underline dotted var(--pico-muted-color); text-underline-offset: 3px; cursor: help; }
.legend { color: var(--pico-muted-color); font-size: 0.78rem; margin: 0.6rem 0 0; }
/* Competition details on a phone: secondary actions as equal tiles (icon above label), the main action full width below. */
@media (max-width: 640px) {
  .page-header .actions.detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
  .detail-actions > a[role="button"].secondary { flex: 1 1 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 3.75rem; min-width: 0; padding: 0.5rem 0.25rem; font-size: 0.8rem; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  .detail-actions abbr.sm-short { text-decoration: none; cursor: inherit; }
  .detail-actions > a[role="button"]:not(.secondary) { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) { .hide-sm, .bar { display: none; } .sm-full { display: none; } .sm-short { display: inline; } .sm-only { display: block; } table.data-table td { white-space: normal; } table.data-table td.num { white-space: nowrap; } table td, table th { padding-left: 0.4rem; padding-right: 0.4rem; } }
th .sort-button { all: unset; cursor: pointer; display: inline-flex; gap: 0.3rem; align-items: center; color: inherit; font: inherit; padding: 0.35rem 0.25rem; margin: -0.35rem -0.25rem; }
th .sort-button::after { content: "⇅"; opacity: 0.45; font-size: 0.85em; }
th[aria-sort="ascending"] .sort-button, th[aria-sort="descending"] .sort-button { color: var(--pico-primary); }
th[aria-sort="ascending"] .sort-button::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .sort-button::after { content: "▼"; opacity: 1; }
th .sort-button:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; border-radius: 0.2rem; }

/* Search box above tables */
.table-search { max-width: 22rem; margin-bottom: 1rem; }
.table-search input { margin: 0; }
[data-search-empty] { color: var(--pico-muted-color); }

/* Forms */
form > div { margin-bottom: 0.25rem; }
.helptext { display: block; color: var(--pico-muted-color); font-size: 0.85rem; margin-top: -0.5rem; margin-bottom: 0.75rem; }
.errorlist { color: var(--portal-bad); list-style: none; padding: 0; margin: 0 0 0.5rem; }
.errorlist li { list-style: none; }
input:not([type="checkbox"], [type="radio"]), select, textarea, button, a[role="button"] { min-height: 2.75rem; }
.panel-title .push { margin-left: auto; }
.panel h3 { font-size: 1rem; margin: 1rem 0 0.4rem; color: var(--pico-muted-color); }

/* Footer with the "report a problem" link */
/* "Zgłoś problem": tab on the right edge + slide-in side panel (feedback-panel.js). */
.edge-tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 0.5rem; }
.tab-count { writing-mode: horizontal-tb; transform: rotate(180deg); display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.25rem; border-radius: 99px; background: var(--portal-bad); color: #fff; font-size: 0.72rem; font-style: normal; font-weight: 700; }
.tab-count.info { background: var(--portal-info); color: #0d1117; }
.tab-count.warn { background: var(--portal-warn); color: #0d1117; }
.survey-list { display: flex; flex-direction: column; gap: 0.6rem; }
.survey-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); color: var(--pico-color); text-decoration: none; }
.survey-card:hover { border-color: var(--pico-primary); }
.survey-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.survey-question { margin: 0 0 1rem; padding: 0; border: 0; }
.survey-question h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.survey-option { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; margin: 0 0 0.35rem; border: 1px solid var(--portal-line); border-radius: 0.5rem; background: var(--pico-background-color); }
.survey-option input { margin: 0; }
.survey-results { display: flex; flex-direction: column; gap: 0.5rem; }
.survey-line { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; font-size: 0.9rem; }
.survey-line .n { color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.survey-bar { grid-column: 1 / -1; height: 0.55rem; border-radius: 99px; background: var(--portal-line); overflow: hidden; }
.survey-bar u { display: block; height: 100%; background: var(--pico-secondary); border-radius: 99px; }
.survey-line.mine .survey-bar u { background: var(--pico-primary); }
.back-link { font-size: 0.85rem; }
.feedback-tab { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.7rem 0.45rem; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--pico-secondary-background); color: var(--pico-color); border: 1px solid var(--pico-secondary-border); border-left: 0; border-radius: 0 0.6rem 0.6rem 0; font-size: 0.85rem; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.feedback-tab.tab-off { display: none; }
.feedback-tab:hover, .feedback-tab:focus-visible { background: var(--pico-primary); color: var(--pico-primary-inverse); text-decoration: none; }
.feedback-tab .icon { transform: rotate(180deg); }
.feedback-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.5); }
.feedback-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--portal-panel); border-left: 1px solid var(--portal-line); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.2s ease-out; }
.feedback-panel.open { transform: none; }
.feedback-panel[hidden], .feedback-backdrop[hidden] { display: none; }
.feedback-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--portal-line); }
.feedback-panel > header h2 { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0; font-size: 1.15rem; }
.feedback-panel > header button { margin: 0; padding: 0.35rem 0.5rem; width: auto; }
.feedback-panel-body { flex: 1; overflow-y: auto; padding: 1rem; }
.feedback-panel-body button[type="submit"] { width: 100%; }
body.feedback-open { overflow: hidden; }
@media (max-width: 576px) { .feedback-panel { width: 100vw; border-left: 0; } .feedback-tab { padding: 0.6rem 0.35rem; font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .feedback-panel { transition: none; } }

/* "Analiza stanowisk": filters, tabs, stat tiles, chart boxes, heatmap (stats/analysis.js). */
.filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.filters select { width: auto; min-width: 12rem; margin: 0; }
.tiles-compact { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.stat strong { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .muted { font-size: 0.8rem; }
.tabs { display: none; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--portal-line); overflow-x: auto; }
.js .tabs { display: flex; justify-content: flex-start; }
.tabs button { display: inline-flex; flex: 0 0 auto; gap: 0.4rem; align-items: center; width: auto; margin: 0; padding: 0.6rem 1rem; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--pico-muted-color); white-space: nowrap; }
.tabs button:hover, .tabs button:focus-visible { color: var(--pico-color); }
.tabs button[aria-selected="true"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }
.chart-box { position: relative; height: 16rem; }
.chart-box.chart-small { height: 12rem; }
.chart-box.chart-tall { height: 22rem; }
.legend-inline { font-size: .78rem; color: var(--pico-muted-color); margin: .3rem 0 0; }
.chart-title { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--pico-muted-color); font-weight: 600; }
.small { font-size: 0.82rem; }
.heatmap { width: 100%; }
.heatmap th, .heatmap td { white-space: nowrap; }
.heatmap td small { color: var(--pico-muted-color); }
.heat-0 { background: rgba(248, 81, 73, 0.45); }
.heat-1 { background: rgba(248, 81, 73, 0.22); }
.heat-2 { background: rgba(210, 153, 34, 0.25); }
.heat-3 { background: rgba(63, 185, 80, 0.25); }
.heat-4 { background: rgba(63, 185, 80, 0.5); }
/* Equipment comparison (F-STA-E2): small sample mark, reading note, two chart columns. */
.small-n { font-size: .72rem; color: #e3b341; border: 1px solid rgba(210, 153, 34, 0.45); border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; white-space: nowrap; }
.eq-note { border-left: 3px solid var(--portal-warn); background: var(--portal-panel); padding: .5rem .8rem; font-size: .85rem; margin: 0 0 1rem; color: var(--pico-secondary); }
.eq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .eq-grid2 { grid-template-columns: 1fr; } }
.data-table a[aria-current="true"] { font-weight: 700; color: var(--pico-primary); }  /* the row of the open detail panel */
.eq-detail .eq-grid2 > div { min-width: 0; }
.eq-slice { font-size: .85rem; margin: .4rem 0 0; }
.eq-slice th, .eq-slice td { padding: .25rem .5rem; }

/* "Udostepnij wynik": previews of the generated images (scoring/share.js). */
.share-preview { display: block; width: 100%; height: auto; border-radius: 0.6rem; border: 1px solid var(--portal-line); margin-bottom: 1rem; }
.share-who { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.share-who label { margin: 0; }

/* Komunikaty: public board (competition detail), form helpers, e-mail preview. */
.timeline { border-left: 2px solid var(--portal-line); margin-left: 0.4rem; padding-left: 1rem; }
.timeline-item { position: relative; margin-bottom: 1.1rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.5rem; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--portal-info); }
.timeline-item.kind-date_change::before { background: var(--portal-warn); }
.timeline-item.kind-important::before, .timeline-item.kind-cancellation::before { background: var(--portal-bad); }
.timeline-body { margin-top: 0.35rem; }
.chip-link { display: inline-block; margin: 0 0.4rem 0.3rem 0; padding: 0.1rem 0.7rem; border: 1px solid var(--pico-secondary-border); border-radius: 999px; font-size: 0.85rem; text-decoration: none; }
.mail-preview { white-space: pre-wrap; background: var(--pico-form-element-background-color); border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.8rem 1rem; font-family: inherit; font-size: 0.92rem; }
.mail-preview { margin-top: 1rem; }
.board-option { display: block; margin: 1rem 0 1.25rem; }

/* Badge carousel on the athlete page (stats/_badge_carousel.html); tiers = core.figures.TIERS. */
:root { --tier-gold: #f5c542; --tier-silver: #c5ced8; --tier-bronze: #d08a4f; --tier-steel: #8593a1; --tier-accent: #ff9f1c; }
.tier-gold { --tier: var(--tier-gold); } .tier-silver { --tier: var(--tier-silver); } .tier-bronze { --tier: var(--tier-bronze); }
.tier-steel { --tier: var(--tier-steel); } .tier-accent { --tier: var(--tier-accent); }
.bm { position: relative; display: block; width: var(--bm-size, 4.6rem); flex: 0 0 auto; margin: 0 auto; }
.bm svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--tier); }
.bm-ring { fill: var(--portal-panel); stroke: var(--tier); stroke-width: 6; }
.bm-inner { fill: none; stroke: var(--tier); stroke-opacity: 0.22; stroke-width: 1.5; }
.bm-fig { fill: currentColor; --cut: var(--portal-panel); --tusk: #e7e9ec; }
.bm-pill { position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%); background: var(--tier); color: #16120a; font-weight: 800; font-size: 0.74rem; line-height: 1.35; border-radius: 999px; padding: 0 0.5em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bm-count { position: absolute; top: -0.3rem; right: -0.45rem; font-weight: 800; font-size: 0.72rem; line-height: 1.35; background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: 999px; padding: 0 0.4rem; }
.bm.is-locked svg { filter: grayscale(1); opacity: 0.28; }
.bm.is-locked .bm-pill { background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); border: 1px solid var(--portal-line); }
.bc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.bc-head .panel-title { margin: 0; }
.bc-switch { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--portal-line); border-radius: 1.1rem; overflow: hidden; }
.bc-switch a { padding: 0.25rem 0.85rem; font-size: 0.85rem; color: var(--pico-muted-color); text-decoration: none; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.bc-switch a[aria-current="true"] { background: var(--pico-primary); color: var(--pico-primary-inverse); font-weight: 700; }
/* Shared horizontal carousel (core/carousel.js): badges, season recap cards and the hourly weather. */
.carousel-wrap { position: relative; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-track[hidden] { display: none; }
.carousel-arrows { display: none; }
html.js .carousel-arrows { display: contents; }
/* Round, fixed size: Pico stretches buttons to 100% width and the portal sets min-height 2.75rem on every button. */
.carousel-arrows button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; margin: 0; padding: 0; width: 1.7rem; height: 1.7rem; min-width: 0; min-height: 0; max-width: 1.7rem; max-height: 1.7rem; line-height: 1; border-radius: 50%; display: grid; place-items: center; background: var(--portal-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.carousel-arrows button svg { width: 0.9rem; height: 0.9rem; }
.carousel-arrows button[data-dir="-1"] { left: -0.6rem; }
.carousel-arrows button[data-dir="1"] { right: -0.6rem; }
.carousel-arrows button:disabled { opacity: 0; pointer-events: none; }
.bc-track { gap: 0.7rem; padding: 0.5rem 0.1rem 0.7rem; }
.bc-card { flex: 0 0 10.5rem; height: 15.5rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: 0.8rem; padding: 0.9rem 0.7rem 0.6rem; }
.bc-card:has(details[open]) { height: auto; }
.bc-card.is-record { border-color: rgba(255, 159, 28, 0.55); }
.bc-title { margin-top: 0.85rem; font-size: 0.9rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta, .bc-hint { font-size: 0.76rem; color: var(--pico-muted-color); margin-top: 0.2rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-hint { font-size: 0.72rem; }
.bc-foot, .bc-next { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--pico-muted-color); }
.bc-next { flex-direction: column; align-items: stretch; text-align: left; }
.bc-next-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-next + .bc-foot { margin-top: 0.3rem; }
.bc-bar { width: 100%; height: 0.35rem; margin: 0.3rem 0 0; accent-color: var(--pico-primary); }
.is-locked > .bc-bar { margin-top: auto; }
.bc-share { margin-left: auto; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--portal-line); border-radius: 50%; color: var(--pico-muted-color); }
.bc-share:hover { color: var(--pico-primary); border-color: var(--pico-primary); }
.bc-more { width: 100%; margin: 0.3rem 0 0; font-size: 0.76rem; }
.bc-more > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-more ul, dialog.bc-dialog ul { list-style: none; margin: 0.3rem 0 0; padding: 0; text-align: left; }
.bc-more li, dialog.bc-dialog li { display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid var(--portal-line); }
.bc-more li .muted, dialog.bc-dialog li .muted { margin-left: auto; white-space: nowrap; }
.carousel-pager { justify-content: center; gap: 0; }
html.js .carousel-pager { display: flex; }
.carousel-pager button { box-sizing: content-box; width: 0.45rem; height: 0.45rem; min-width: 0; min-height: 0; margin: 0; padding: 0.35rem 0.2rem; border: 0; border-radius: 50%; background: var(--portal-line); background-clip: content-box; box-shadow: none; cursor: pointer; }
.carousel-pager button:hover { background-color: var(--pico-muted-color); }
.carousel-pager button.on { background-color: var(--pico-primary); }
dialog.bc-dialog article { max-width: 32rem; width: calc(100% - 2rem); margin: 0 auto; }
dialog.bc-dialog h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
dialog.bc-dialog .bc-close { margin-left: auto; width: auto; }
@media (max-width: 640px) {
  .bc-card { flex-basis: 8.9rem; height: 15rem; padding: 0.8rem 0.5rem 0.6rem; }
  .bm { --bm-size: 4rem; }
  html.js .carousel-arrows { display: none; }
}

/* The copy-link row. */
.copy-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.copy-row input { margin: 0; }
.copy-row button { margin: 0; width: auto; flex: 0 0 auto; }

/* Drużyny (teams/competition.html). */
.lineup { border-top: 1px solid var(--portal-line); padding-block: 0.6rem; }
.lineup ul { margin: 0.3rem 0; }
.lineup-form { border-top: 1px solid var(--portal-line); padding-top: 0.8rem; margin-top: 0.8rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.checks label { margin: 0; }
.new-team { margin-top: 1rem; }
.team-members { white-space: normal; min-width: 18rem; }

/* Opiekun i junior: tekst zgody i prosby o potwierdzenie (athletes/wards.html). */
.terms { border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.8rem 1rem; margin-bottom: 1rem; max-height: 16rem; overflow-y: auto; }
.ward-request { border-top: 1px solid var(--portal-line); padding-top: 0.8rem; margin-top: 0.8rem; }

/* "DEMO" watermark (DEMO_WATERMARK=True): a small, faint, tiled and rotated word over the whole page.
   It never takes clicks; the tile is 300x180 px. */
body.demo-watermark::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='180'%3E%3Ctext x='150' y='100' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='40' letter-spacing='6' fill='%23ffffff' fill-opacity='0.035' transform='rotate(-24 150 90)'%3EDEMO%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Labels of required fields (set by forms.js). */
label.is-required::after { content: " *"; color: var(--portal-bad); }
.req-star { color: var(--portal-bad); }

/* Training diary: series cards and shot pills (training/_series_card.html). */
.series-head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; }
.series-head .panel-title { margin: 0; }
.shot-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.shot-pills form { margin: 0; }
.pill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.1rem 0.4rem; margin: 0; border-radius: 0.5rem; border: 1px solid var(--portal-line); background: var(--portal-panel); color: var(--pico-color); font-weight: 650; line-height: 1.1; }
.pill small { font-size: 0.7rem; opacity: 0.9; }
.pill-KNOCKDOWN { border-color: var(--portal-ok); background: color-mix(in srgb, var(--portal-ok) 22%, transparent); }
.pill-FACEPLATE { border-color: var(--portal-warn); background: color-mix(in srgb, var(--portal-warn) 22%, transparent); }
.pill-MISS { border-color: var(--portal-bad); background: color-mix(in srgb, var(--portal-bad) 22%, transparent); }
.form-error { color: var(--portal-bad); margin: 0.4rem 0; }
.shot-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.6rem 0; }
.shot-buttons form { margin: 0; }
.shot-button { width: 100%; min-height: 4rem; margin: 0; font-size: 1.7rem; border: 1px solid var(--portal-line); color: var(--pico-color); }
.shot-KNOCKDOWN { background: color-mix(in srgb, var(--portal-ok) 30%, var(--portal-panel)); border-color: var(--portal-ok); }
.shot-FACEPLATE { background: color-mix(in srgb, var(--portal-warn) 30%, var(--portal-panel)); border-color: var(--portal-warn); }
.shot-MISS { background: color-mix(in srgb, var(--portal-bad) 30%, var(--portal-panel)); border-color: var(--portal-bad); }
.filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; align-items: end; }
.filter-form label, .filter-form select, .filter-form button { margin: 0; }
.share-options label { display: block; margin-bottom: 0.6rem; }
.share-link { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.share-link input { flex: 1 1 14rem; margin: 0; }
.share-link button { margin: 0; }
/* Pico colours buttons with [type=submit] (higher specificity than a lone class): light text on our dark tinted buttons. */
.series-card .shot-button, .series-card button.pill { color: #f4f6f8; }
.sr-only, .tabs-ready .tab-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Honeypot field of public forms: out of sight for people, visible to bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Club logos: small squares next to the organizer; initials when there is no logo. */
.club-logo { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 0.35rem; object-fit: contain; background: #fff; vertical-align: middle; margin-right: 0.5rem; flex: none; }
.club-logo-lg { width: 2.6rem; height: 2.6rem; }
.club-logo-ph { background: #2b3a55; color: #9db4e0; font-size: 0.65rem; font-weight: 700; }

/* Cycle colours (Season.color): a stripe on the row and a pill with the cycle's name. */
.cycle-pill { display: inline-block; padding: 0.05rem 0.6rem; border-radius: 99px; font-size: 0.72rem; font-weight: 650; color: #fff; background: #5d6672; text-decoration: none; margin: 0.15rem 0.3rem 0 0; }
a.cycle-pill:hover { filter: brightness(1.15); color: #fff; }
.cycle-red { background: #b3413b; } .cycle-orange { background: #b86a1f; } .cycle-yellow { background: #8f8420; }
.cycle-green { background: #2f8f5b; } .cycle-teal { background: #26858a; } .cycle-blue { background: #3b6fb3; }
.cycle-purple { background: #7a52a8; } .cycle-pink { background: #b3417f; }
.cycle-lime { background: #5f8f2a; } .cycle-cyan { background: #2b7fa6; } .cycle-indigo { background: #5560c4; } .cycle-magenta { background: #a63fa6; } .cycle-brown { background: #8a5a3c; } .cycle-slate { background: #66758a; } .cycle-maroon { background: #8c2f46; }
tr.stripe-red td:first-child { box-shadow: inset 4px 0 0 #b3413b; } tr.stripe-orange td:first-child { box-shadow: inset 4px 0 0 #b86a1f; }
tr.stripe-yellow td:first-child { box-shadow: inset 4px 0 0 #8f8420; } tr.stripe-green td:first-child { box-shadow: inset 4px 0 0 #2f8f5b; }
tr.stripe-teal td:first-child { box-shadow: inset 4px 0 0 #26858a; } tr.stripe-blue td:first-child { box-shadow: inset 4px 0 0 #3b6fb3; }
tr.stripe-purple td:first-child { box-shadow: inset 4px 0 0 #7a52a8; } tr.stripe-pink td:first-child { box-shadow: inset 4px 0 0 #b3417f; }
tr.stripe-lime td:first-child { box-shadow: inset 4px 0 0 #5f8f2a; } tr.stripe-cyan td:first-child { box-shadow: inset 4px 0 0 #2b7fa6; } tr.stripe-indigo td:first-child { box-shadow: inset 4px 0 0 #5560c4; } tr.stripe-magenta td:first-child { box-shadow: inset 4px 0 0 #a63fa6; } tr.stripe-brown td:first-child { box-shadow: inset 4px 0 0 #8a5a3c; } tr.stripe-slate td:first-child { box-shadow: inset 4px 0 0 #66758a; } tr.stripe-maroon td:first-child { box-shadow: inset 4px 0 0 #8c2f46; }
tr.stripe- td:first-child { box-shadow: inset 4px 0 0 #5d6672; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.filter-bar label { margin: 0; font-size: 0.85rem; }
.filter-bar select, .filter-bar button, .filter-bar a[role="button"] { margin: 0; width: auto; }

/* First steps (home page): one hero card with the next step, a progress ring, the other steps as pills. */
.first-steps { margin-bottom: 1rem; }
.first-hero { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(255, 159, 28, 0.18), rgba(255, 159, 28, 0.04)); border: 1px solid rgba(255, 159, 28, 0.45); }
.first-eyebrow { margin: 0; color: var(--pico-primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.first-hero h2 { margin: 0.15rem 0 0.25rem; font-size: 1.25rem; }
.first-hint { margin: 0; color: #cfd6df; font-size: 0.95rem; }
.first-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; align-items: center; }
.first-actions a[role="button"], .first-actions button { margin: 0; width: auto; }
.first-ring { width: 4.8rem; height: 4.8rem; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--pico-primary) var(--deg, 0%), #222a33 0); }
.first-ring::after { content: ""; position: absolute; inset: 0.45rem; border-radius: 50%; background: #161b22; }
.first-ring b { position: relative; font-size: 0.95rem; }
.first-dots { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.first-dots li { list-style: none; display: inline-block; margin: 0; padding: 0; }
.first-dots li::marker { content: none; }
.first-dots li a { display: inline-block; font-size: 0.78rem; color: #8a93a3; border: 1px solid #2b3138; border-radius: 99px; padding: 0.1rem 0.6rem; text-decoration: none; }
.first-dots li.done a { color: #7ee787; border-color: rgba(63, 185, 80, 0.4); }
.first-dots li.next a { color: var(--pico-primary); border-color: var(--pico-primary); }
.first-tip { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.7rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: #11161d; border: 1px dashed #2b3138; font-size: 0.85rem; color: #cfd6df; }
@media (max-width: 760px) { .first-hero { grid-template-columns: 1fr; } .first-ring { justify-self: start; } }

/* Map of a competition (Leaflet loaded on demand) */
/* isolation keeps Leaflet's own z-index (panes 400, controls 1000) inside the map, under the sticky menu (z-index 20). */
.map-canvas { height: 22rem; border-radius: 0.6rem; border: 1px solid #2b3138; background: #11161d; margin-top: 0.75rem; position: relative; isolation: isolate; }
.map-canvas-edit { height: 26rem; cursor: crosshair; }
.map-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.map-actions .copy-row { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; }  /* the generic .copy-row has margin-bottom: it lifted the field above the buttons */
.map-actions .copy-row input { width: 12rem; margin: 0; font-size: 0.85rem; }
.map-actions button, .map-actions a[role="button"] { margin: 0; width: auto; }
/* one height, one baseline and one weight for every control in the row */
.map-actions button, .map-actions a[role="button"], .map-actions .copy-row input { height: 2.6rem; padding-block: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; font-weight: 600; line-height: 1; }
.map-consent { display: block; margin-top: 0.5rem; }
.map-points { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.3rem; }
.map-points li, .map-point-list li { list-style: none; margin: 0; }
.map-points .map-nav { margin-left: 0.5rem; }
.map-tools { display: flex; gap: 0.75rem; flex-wrap: wrap; border: 1px solid #2b3138; border-radius: 0.6rem; padding: 0.5rem 0.75rem; }
.map-tools label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.9rem; }
.map-tools input[type=radio] { margin: 0; }
.map-point-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.4rem; }
.map-point-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; }
.map-point-list input, .map-point-list button { margin: 0; }
.hft-pin { background: none; border: 0; }
.hft-pin-dot { display: block; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); }
.leaflet-container { background: #0d1117; font: inherit; }
.map-tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6); }
.leaflet-control-attribution { background: rgba(13, 17, 23, 0.8) !important; color: #9aa4b2 !important; }
.leaflet-control-attribution a { color: #c9d1d9 !important; }
.leaflet-bar a { background: #161b22 !important; color: #e6edf3 !important; border-color: #2b3138 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #161b22; color: #e6edf3; }
.leaflet-popup-content a { color: #ffa600; }
.js-only { display: none; }
.js .js-only { display: revert; }

/* Season recap ("Mój sezon"): story cards in three themes (a Portal, b Tarcza, c Plakat) */
.recap-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; }
.recap-pickers { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; }
.recap-pickers label { margin: 0; }
.recap-pickers select { margin: 0; min-width: 9rem; }
.recap-themes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.recap-themes a { margin: 0; width: auto; }
.recap-deck { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.1rem 0.7rem; }
.recap-slot { flex: 0 0 min(19rem, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.5rem; }
.recap-download { margin: 0; width: 100%; text-align: center; }
.recap-card { aspect-ratio: 9 / 16; border-radius: 1rem; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; background: #15181c; color: #e7e9ec; border: 1px solid #2a3037; position: relative; overflow: hidden; --accent: #ff9f1c; --muted: #8b949e; --panel: #1d2126; --track: #2a3037; }
.recap-card > * { margin: 0; position: relative; }
.recap-brand { font-size: 0.7rem; font-weight: 700; color: var(--accent); display: flex; justify-content: space-between; }
.recap-brand span { color: var(--muted); }
.recap-title { font-size: 1rem; color: var(--muted); font-weight: 400; }
.recap-huge { font-size: 4.6rem; font-weight: 800; line-height: 1; color: var(--accent); text-align: center; margin-top: 1rem; overflow-wrap: anywhere; }
.recap-sub { color: var(--muted); text-align: center; font-size: 0.9rem; }
.recap-line { font-weight: 700; font-size: 1.05rem; text-align: center; }
.recap-line.big { font-size: 1.6rem; margin-top: 3rem; }
.recap-accent { color: var(--accent); font-weight: 700; font-size: 1.5rem; text-align: center; }
.recap-accent.small { font-size: 1rem; text-align: left; }
.recap-stats { display: flex; justify-content: space-around; margin-top: 1rem; }
.recap-stats p { margin: 0; text-align: center; }
.recap-stats b { display: block; font-size: 2rem; }
.recap-stats span { font-size: 0.75rem; color: var(--muted); }
.recap-bars { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.7rem; }
.recap-bars li { display: grid; grid-template-columns: 1fr auto; row-gap: 0.2rem; margin: 0; font-size: 0.85rem; list-style: none; }
.recap-bars i { grid-column: 1 / -1; display: block; height: 0.5rem; border-radius: 0.3rem; background: var(--track); }
.recap-bars u { display: block; height: 100%; border-radius: 0.3rem; background: var(--accent); text-decoration: none; }
.recap-tiles { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.recap-tiles li { margin: 0; list-style: none; background: var(--panel); border-radius: 0.8rem; padding: 0.8rem 0.4rem; text-align: center; display: grid; gap: 0.3rem; }
.recap-tiles b { color: var(--accent); font-size: 1.5rem; }
.recap-tiles span { font-size: 0.75rem; }
.recap-who { margin-top: auto; border-top: 1px solid var(--track); padding-top: 0.6rem; font-weight: 700; overflow-wrap: anywhere; }
.theme-b .recap-card { background-image: radial-gradient(circle at 80% 72%, var(--accent) 0 0.4rem, transparent 0.45rem, transparent 3rem, var(--track) 3.05rem 3.15rem, transparent 3.2rem, transparent 6rem, var(--track) 6.05rem 6.15rem, transparent 6.2rem, transparent 9rem, var(--track) 9.05rem 9.15rem, transparent 9.2rem); }
.theme-c .recap-card { border: 0; }
.theme-c .recap-title { color: inherit; text-transform: uppercase; font-weight: 800; }
.theme-c .recap-card.kind-intro, .theme-c .recap-card.kind-weakness, .theme-c .recap-card.kind-outro { background: #ff9f1c; color: #1a1300; --accent: #1a1300; --muted: #543800; --panel: #ffbe5a; --track: #d68200; }
.theme-d .recap-card { background: radial-gradient(circle at 50% 56%, #0e1a12 0 60%, #060b08 100%); --accent: #5dffb0; --muted: #6fa488; --panel: #12241a; --track: #1f3b2b; border-color: #1f3b2b; }
.theme-d .recap-card::before { content: ""; position: absolute; inset: auto -30% 8% -30%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #1f3b2b; background: linear-gradient(#1f3b2b, #1f3b2b) center / 2px 100% no-repeat, linear-gradient(#1f3b2b, #1f3b2b) center / 100% 2px no-repeat; pointer-events: none; }
.theme-e .recap-card { background-color: #f2ede0; background-image: repeating-linear-gradient(0deg, transparent 0 1.4rem, rgba(0, 0, 0, 0.05) 1.4rem 1.45rem); color: #1c1a16; border: 0; --accent: #c0392b; --muted: #6b6455; --panel: #e4dcc8; --track: #cfc6ad; }
.theme-e .recap-title { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #1c1a16; font-size: 0.85rem; border-bottom: 2px solid #1c1a16; padding-bottom: 0.3rem; }
.theme-e .recap-huge { font-family: Georgia, serif; border: 3px solid var(--accent); border-radius: 0.4rem; transform: rotate(-3deg); padding: 0.2rem 0.4rem; width: fit-content; align-self: center; }
.theme-f .recap-card { background-color: #0b0b0c; background-image: linear-gradient(45deg, #151516 25%, transparent 25% 75%, #151516 75%), linear-gradient(45deg, #151516 25%, transparent 25% 75%, #151516 75%); background-size: 0.6rem 0.6rem; background-position: 0 0, 0.3rem 0.3rem; color: #f4f4f5; border: 0; border-left: 0.4rem solid #ff2d2d; --accent: #ff2d2d; --muted: #9a9a9f; --panel: #1a1a1c; --track: #34343a; }
.theme-f .recap-title { text-transform: uppercase; font-style: italic; font-weight: 800; color: #f4f4f5; }
.theme-f .recap-huge { font-style: italic; }

/* Weather tile on the competition page */
.weather-day h3 { margin: 0.75rem 0 0.25rem; text-transform: capitalize; }
.weather-day[hidden] { display: none; }
.weather-summary { font-weight: 600; margin: 0.2rem 0 0.4rem; }
.weather-tabs { display: none; gap: 0.4rem; margin: 0.4rem 0 0.2rem; flex-wrap: wrap; }
.js .weather-tabs { display: flex; }
.weather-tabs button { width: auto; margin: 0; padding: 0.2rem 0.85rem; border-radius: 999px; font-size: 0.85rem; background: var(--pico-card-background-color, #1b222b); color: inherit; border: 1px solid var(--portal-line, #2a3037); }
.weather-tabs button[aria-selected="true"] { background: var(--pico-primary, #ff9f1c); color: #1a1205; border-color: var(--pico-primary, #ff9f1c); font-weight: 700; }
.is-tabbed .weather-day h3 { display: none; }
.weather-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.3rem 0 0.7rem; }
.weather-chip { border: 1px solid var(--portal-line, #2a3037); background: rgba(255, 255, 255, 0.04); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.82rem; white-space: nowrap; }
.weather-chip-ok { border-color: #1f5a2c; background: rgba(63, 185, 80, 0.12); color: #7ee787; }
.weather-chip-warn { border-color: #6b4e12; background: rgba(210, 153, 34, 0.14); color: #e3b341; }
.weather-chip-bad { border-color: #7d2a26; background: rgba(248, 81, 73, 0.14); color: #ff7b72; }
.weather-timeline { padding-bottom: 0.3rem; }
.wx-col { flex: 1 0 4.3rem; min-width: 4.3rem; text-align: center; padding: 0.35rem 0; border-right: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.wx-col:last-child { border-right: 0; }
.wx-h { color: var(--pico-muted-color); font-size: 0.75rem; }
.wx-col b { display: block; font-size: 1rem; margin: 0.1rem 0; }
.wx .icon { width: 1.7rem; height: 1.7rem; }
.wx-sun { color: #ffb347; } .wx-cloud { color: #aab4c0; } .wx-rain { color: #79c0ff; }
.wx-wind { margin-top: 0.2rem; }
.wx-wind small, .wx-gust { color: var(--pico-muted-color); font-size: 0.7rem; }
.wx-p { color: #79c0ff; font-size: 0.75rem; min-height: 1.1em; }
.wind-arrow.wind-calm { color: #3fb950; } .wind-arrow.wind-mid { color: #d29922; } .wind-arrow.wind-strong { color: #f85149; }
.wind-arrow { display: inline-block; color: var(--pico-primary, #ff9f1c); font-weight: 700; font-size: 1.35rem; line-height: 1; width: 1.4rem; text-align: center; }

/* Dictionary suggestion list under the equipment fields (replaces the browser's datalist) */
.combo-field { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% - 1rem + 4px); z-index: 30; margin: 0; padding: 0.3rem; list-style: none; max-height: 19rem; overflow: auto; background: var(--portal-panel); border: 1px solid var(--pico-form-element-border-color); border-radius: 0.7rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }
.combo-list[hidden] { display: none; }
.combo-opt { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 2.6rem; padding: 0.55rem 0.7rem; border-radius: 0.45rem; cursor: pointer; }
.combo-opt .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt .sub { color: var(--pico-muted-color); font-size: 0.8rem; white-space: nowrap; }
.combo-opt mark { background: rgba(255, 159, 28, 0.2); color: #ffcf8a; border-radius: 0.2rem; padding: 0 0.05rem; }
.combo-opt[aria-selected="true"] { background: rgba(255, 159, 28, 0.13); box-shadow: inset 3px 0 0 var(--pico-primary); }
.combo-empty, .combo-foot { padding: 0.5rem 0.7rem; color: var(--pico-muted-color); font-size: 0.85rem; }
.combo-foot { margin-top: 0.3rem; border-top: 1px solid var(--portal-line); font-size: 0.75rem; }


/* Small buttons, the danger style and the cards of 'Mój sprzęt' */
.sm { width: auto; min-height: 2.5rem; margin: 0; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
button.danger, a[role="button"].danger { background: var(--portal-bad); border-color: var(--portal-bad); color: #fff; }
button.danger:hover, a[role="button"].danger:hover { background: #ff6b63; border-color: #ff6b63; }
.danger-link { background: transparent; border: 0; color: #ff7b72; box-shadow: none; font-size: 0.9rem; font-weight: 600; padding: 0.4rem 0.3rem; width: auto; min-height: 2.5rem; margin: 0; }
button[type].danger-link { font-weight: 600; }
/* A red link to a confirmation page looks like the red button next to it (no underline). */
a.danger-link { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; border-radius: var(--pico-border-radius); }
.danger-link:hover, .danger-link:focus { background: rgba(248, 81, 73, 0.12); color: #ff9b94; }
.cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card-item { display: flex; flex-direction: column; gap: 0.5rem; background: var(--pico-background-color); border: 1px solid var(--portal-line); border-radius: 0.7rem; padding: 0.8rem; }
.card-body { display: flex; flex-direction: column; gap: 0.15rem; overflow-wrap: anywhere; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.card-actions .inline-form { display: block; }
.set-cover { width: 100%; height: 7rem; object-fit: cover; border-radius: 0.5rem; }
.cards-one { grid-template-columns: 1fr; margin-bottom: 1rem; }
.more-equipment { margin-top: 0.6rem; border-top: 1px solid var(--portal-line); padding-top: 0.4rem; }
.more-equipment > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--pico-primary); font-weight: 600; }
.more-equipment > summary::-webkit-details-marker { display: none; }
.more-equipment > summary .meta { color: var(--pico-muted-color); font-weight: 400; font-size: 0.85rem; }
.more-equipment .chev { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform 0.15s; }
.more-equipment[open] .chev { transform: rotate(180deg); }
.more-equipment .when-open, .more-equipment[open] .when-closed { display: none; }
.more-equipment[open] .when-open { display: inline; }

/* Confirmation dialog (core/static/core/confirm-dialog.js) */
dialog.confirm-dialog article { max-width: 30rem; width: calc(100% - 2rem); margin: 0 auto; }
dialog.confirm-dialog footer { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
dialog.confirm-dialog footer button { width: auto; margin: 0; }
dialog.confirm-dialog p[hidden] { display: none; }
.report-meta { color: var(--muted, #98a1ab); }
.report-note { color: #ffb347; border-left: 2px solid #ff9f1c; padding-left: 0.4rem; margin-top: 0.15rem; }
.badge.sm-short .icon { width: 1.2em; height: 1.2em; }
table.data-table td.wrap { white-space: normal; min-width: 12rem; }
/* Secondary text that may break onto a second line so a wide table fits a laptop (row actions stay visible). */
table.data-table td.soft-wrap { white-space: normal; }

/* Club page: two columns, member tiles, recent results (clubs/club_detail.html). */
.club-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .club-cols { grid-template-columns: 1fr; } .club-aside { order: -1; } }
.club-links { margin: 0; }
.club-links .chip-link { display: inline-flex; gap: 0.4rem; align-items: center; }
.club-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; }
.club-member { display: flex; gap: 0.6rem; align-items: center; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-card-sectioning-background-color); text-decoration: none; color: inherit; }
.club-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; }
.club-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: #2b3a55; color: #9db4e0; font-size: 0.8rem; font-weight: 700; }
.club-member-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.club-member-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-member-text small { color: var(--pico-muted-color); font-size: 0.75rem; }
.club-recent { display: grid; gap: 0.75rem; }
.club-recent-item { padding: 0.8rem 0.9rem; border: 1px solid var(--portal-line); border-radius: 0.8rem; background: var(--pico-card-sectioning-background-color); }
.club-recent-head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem; }
.club-recent-head a { font-weight: 700; }
.club-recent-head .muted { font-size: 0.85rem; }
.club-recent-sum { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.club-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.club-podium li { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.club-podium-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.club-podium-who small { color: var(--pico-muted-color); font-size: 0.78rem; }
.club-podium-pct { margin-left: auto; flex: none; }
.club-nopodium { color: var(--pico-muted-color); font-size: 0.88rem; margin: 0; }
.place { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; min-width: 2.9rem; padding: 0.15rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--portal-line); font-weight: 700; font-size: 0.85rem; }
.place .icon { width: 1em; height: 1em; }
.place-1 { background: rgba(255, 159, 28, 0.18); border-color: #ff9f1c; color: #ffb347; }
.place-2 { background: rgba(170, 178, 188, 0.15); border-color: #aab2bc; color: #d0d6dd; }
.place-3 { background: rgba(210, 153, 34, 0.15); border-color: #b8863a; color: #e3b341; }

/* Athlete profile: section nav, form tiles, insights, efficiency bars */
.pf-nav { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; margin-bottom: 1rem; background: var(--pico-background-color); border-bottom: 1px solid var(--portal-line); }
.pf-nav a { white-space: nowrap; text-decoration: none; color: var(--pico-secondary); border: 1px solid var(--portal-line); border-radius: 99px; padding: .15rem .8rem; background: var(--portal-panel); font-size: .9rem; }
.pf-nav a:hover { color: var(--pico-primary); border-color: var(--pico-primary); }
section.panel[id] { scroll-margin-top: 4.5rem; }
.pf-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; }
.pf-two > * { min-width: 0; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pf-tile { background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: .6rem; padding: .75rem; min-width: 0; }
.pf-tile p { margin: 0; }
.pf-tile.pf-hl { border-color: var(--pico-primary); }
.pf-tile.pf-hl .pf-big { color: var(--pico-primary); }
.pf-big { font-size: 1.7rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pf-up { color: var(--portal-ok); } .pf-down { color: var(--portal-bad); }
.pf-insights { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pf-insights li { display: grid; grid-template-columns: 26px 1fr; gap: .5rem; }
.pf-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pico-card-sectioning-background-color); font-weight: 700; }
.pf-ic.pf-warn { color: var(--portal-warn); } .pf-ic.pf-star { color: var(--pico-primary); } .pf-ic.pf-info { color: var(--portal-info); }
.pf-eff { display: grid; grid-template-columns: 6rem 1fr 8rem; gap: .6rem; align-items: center; padding: .3rem 0; }
.pf-track { height: 10px; background: var(--portal-line); border-radius: 5px; overflow: hidden; }
.pf-track i { display: block; height: 100%; background: var(--pico-primary); }
.pf-weak .pf-track i { background: var(--portal-warn); }
.pf-eff-val { font-variant-numeric: tabular-nums; }
.pf-tabs { display: none; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.pf-tabbed .pf-tabs { display: flex; }
.pf-tabbed .pf-pane-title { display: none; }
.pf-tabs button { width: auto; margin: 0; padding: .2rem .75rem; border-radius: 999px; background: none; border: 1px solid var(--pico-secondary-border); color: #cdd3da; font-size: .85rem; font-weight: 400; }
.pf-tabs button[aria-selected="true"] { border-color: var(--pico-primary); color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); }
tr.pf-best td { background: rgba(255, 159, 28, .08); }
.pf-pill { display: inline-block; padding: 0 .5rem; border-radius: 99px; font-size: .74rem; color: var(--pico-mark-color); background: var(--pico-mark-background-color); }
.pf-medal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 700; color: #1a1300; }
.start-chip { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; padding: 0.1rem 0.55rem; border: 1px solid var(--portal-line); border-radius: 99px; font-size: 0.8rem; color: var(--pico-muted-color); white-space: nowrap; }
.start-chip b { color: var(--pico-color); }
.pf-m1 { background: #e0b43a; } .pf-m2 { background: #b8c0c8; } .pf-m3 { background: #c7814a; }
@media (max-width: 720px) { .pf-two { grid-template-columns: 1fr; } .pf-eff { grid-template-columns: 4.5rem 1fr 6.5rem; } }

/* Statistics page: "Portal w liczbach" (stats/_overview.html) */
.ov-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ov-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.ov-grid3 > * { min-width: 0; }
.ov-bar { padding: .3rem 0; }
.ov-bar-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.ov-bar-top > span:first-child { min-width: 0; }
.ov-bar .pf-track { display: block; height: 8px; }
.ov-foot { margin: .6rem 0 0; }
.ov-chart { position: relative; height: 220px; }
.ov-legend { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.ov-key-bar { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--pico-primary); }
.ov-key-avg { display: inline-block; width: 1.2rem; border-top: 2px dashed var(--pico-secondary); margin-left: .6rem; }
.ov-facts-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.ov-facts-list li { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: baseline; margin: 0; padding: .3rem 0; border-bottom: 1px solid var(--portal-line); font-size: .9rem; }
.ov-facts-list b { font-variant-numeric: tabular-nums; text-align: right; }
.ov-facts-list li > span:last-child { grid-column: 1 / -1; min-width: 0; font-size: .85rem; }
.ov-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: .35rem 0; background: var(--portal-line); }
.ov-stack i { display: block; height: 100%; }
.ov-stack .k { background: var(--pico-primary); }
.ov-stack .f { background: var(--portal-warn); }
.ov-stack .m { background: #4a525c; }
.ov-small { opacity: .55; }
.ov-grid3 .chart-title { margin-top: .25rem; }
.ov-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ov-fact { margin: 0; padding: .75rem; background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: .6rem; box-shadow: none; }
.ov-fact p { margin: 0 0 .2rem; }
.ov-fact .pf-big small { font-size: .9rem; font-weight: 500; color: var(--pico-muted-color); }
@media (max-width: 1000px) { .ov-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .ov-grid3 { grid-template-columns: 1fr; } }
/* Athlete profile: details and equipment side by side, stacked on phones */
.pf-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.pf-top > .panel { min-width: 0; }
@media (max-width: 720px) { .pf-top { grid-template-columns: 1fr; gap: 0; } }

/* Sanitised rich text (|rich filter): no stray outer margins in panels. */
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich h2 { font-size: 1.15rem; margin: 1rem 0 0.4rem; }
.rich blockquote { margin: 0.75rem 0; }
.rich li > p { margin: 0; }
.rich blockquote > p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { padding-left: 1.25rem; }
/* Competitions page (/zawody/) and its widget: chips, month groups and rows */
.filter-chips { display: flex; justify-content: flex-start; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1rem; }
.filter-chips .chip { flex: none; border: 1px solid var(--pico-secondary-border); border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.85rem; color: #cdd3da; text-decoration: none; }
.filter-chips .chip.on { border-color: var(--pico-primary); color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); }
.cal-month { margin: 0 0 1.25rem; }
.cal-month h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); border-bottom: 1px solid var(--portal-line); padding-bottom: 0.3rem; margin: 0 0 0.6rem; }
.cal-row { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.6rem 0.75rem 0.6rem 0; margin: 0 0 0.5rem; border: 0; border-left: 4px solid #5d6672; border-radius: 0.6rem; background: var(--pico-card-sectioning-background-color); }
.cal-row.past .cal-date, .cal-row.past .cal-body { opacity: 0.6; }
.cycle-stripe-red { border-left-color: #b3413b; } .cycle-stripe-orange { border-left-color: #b86a1f; } .cycle-stripe-yellow { border-left-color: #8f8420; } .cycle-stripe-green { border-left-color: #2f8f5b; }
.cycle-stripe-teal { border-left-color: #26858a; } .cycle-stripe-blue { border-left-color: #3b6fb3; } .cycle-stripe-purple { border-left-color: #7a52a8; } .cycle-stripe-pink { border-left-color: #b3417f; }
.cycle-stripe-lime { border-left-color: #5f8f2a; } .cycle-stripe-cyan { border-left-color: #2b7fa6; } .cycle-stripe-indigo { border-left-color: #5560c4; } .cycle-stripe-magenta { border-left-color: #a63fa6; } .cycle-stripe-brown { border-left-color: #8a5a3c; } .cycle-stripe-slate { border-left-color: #66758a; } .cycle-stripe-maroon { border-left-color: #8c2f46; }
.cal-date { text-align: center; line-height: 1; padding-left: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.cal-date .d { font-size: 1.6rem; font-weight: 800; color: var(--pico-h1-color); }
.cal-date.long .d { font-size: 0.95rem; }
.cal-date .m { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); }
.cal-date .w { font-size: 0.68rem; color: var(--pico-muted-color); }
.cal-name { font-weight: 700; font-size: 1rem; }
.cal-body .muted { font-size: 0.85rem; }
.cal-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.3rem; font-size: 0.8rem; }
.cal-tags .cycle-pill { margin: 0; }
.disc { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #cdd3da; border: 1px solid var(--pico-secondary-border); border-radius: 0.3rem; padding: 0 0.35rem; }
.cal-side { text-align: right; }
.cal-today { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-primary); }
.cal-today::before, .cal-today::after { content: ""; flex: 1; border-top: 1px dashed var(--pico-primary); }
.cal-years { display: flex; justify-content: space-between; margin: 0 0 1rem; }
.cal-note { font-size: 0.8rem; }
@media (max-width: 640px) { .cal-row { grid-template-columns: 3.4rem 1fr; } .cal-date .d { font-size: 1.3rem; } .cal-state.sm-only { display: inline; } }
body.widget { padding: 0; }
body.widget main.container { padding: 0.75rem 0.75rem 1rem; max-width: none; }
.widget-head { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--pico-muted-color); margin: 0 0 0.6rem; }
.widget-head .brand { font-weight: 800; color: var(--pico-primary); text-decoration: none; display: inline-flex; gap: 0.3rem; align-items: center; }
.widget-foot { font-size: 0.85rem; margin: 0.4rem 0 0; text-align: right; }

.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.share-box { background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.75rem 0.9rem; }
.share-box b { display: block; margin-bottom: 0.25rem; }
.share-box p.muted { font-size: 0.82rem; margin: 0 0 0.5rem; }
.share-box input, .share-box textarea { font-size: 0.82rem; margin-bottom: 0.5rem; }
.share-box button, .share-box a[role="button"] { width: auto; margin: 0 0.3rem 0.3rem 0; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.share-formats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
@media (max-width: 720px) { .share-grid { grid-template-columns: 1fr; } }

/* Ranking HFT/FT Masters (ranking/templates/ranking/index.html) */
.rk-controls { display: grid; gap: 0.7rem; }
.rk-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.6rem 1.5rem; margin: 0 0 0.5rem; }
.rk-about { display: grid; gap: 0.6rem; font-size: 0.9rem; }
.rk-about p { margin: 0; }
.rk-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.rk-levels-title { font-weight: 700; }
.rk-levels > span:not(.rk-levels-title) { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-left { display: grid; gap: 0.15rem; min-width: 0; }

.rk-side { min-width: 16rem; max-width: 22rem; justify-self: end; width: 100%; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rk-chip { border: 1px solid var(--portal-line); border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.85rem; color: var(--pico-muted-color); text-decoration: none; }
.rk-chip small { opacity: 0.7; }
.rk-chip[aria-current="true"] { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); font-weight: 700; }
.rk-table { font-variant-numeric: tabular-nums; }
.rk-table th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; font-weight: 800; white-space: nowrap; }
.rk-table td { vertical-align: middle; }
.rk-table th, .rk-table td { text-align: center; }
.rk-pos { width: 3.4rem; }
.rk-medal { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 900; font-size: 0.95rem; border: 2px solid currentColor; }
.rk-name { font-weight: 600; }
.rk-sub { display: none; font-size: 0.78rem; color: var(--pico-muted-color); font-weight: 400; }
/* the whole row of places 1-3: gold, silver, bronze */
.rk-table tbody tr.t1 > td { background: color-mix(in srgb, #ffd166 24%, transparent); color: #ffe7a6; }
.rk-table tbody tr.t2 > td { background: color-mix(in srgb, #d0d7de 20%, transparent); color: #eef1f4; }
.rk-table tbody tr.t3 > td { background: color-mix(in srgb, #cd7f32 28%, transparent); color: #f0c49b; }
.rk-table tbody tr.t1 .rk-medal { color: #ffd166; }
.rk-table tbody tr.t2 .rk-medal { color: #d0d7de; }
.rk-table tbody tr.t3 .rk-medal { color: #e3a36b; }
.rk-table tbody tr.t1 .rk-name, .rk-table tbody tr.t2 .rk-name, .rk-table tbody tr.t3 .rk-name { font-weight: 800; }
.rk-table tbody tr.t1 .rk-sub, .rk-table tbody tr.t2 .rk-sub, .rk-table tbody tr.t3 .rk-sub { color: inherit; opacity: 0.85; }
.rk-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.08rem 0.5rem; border-radius: 999px; border: 1px solid var(--portal-line); color: var(--pico-muted-color); white-space: nowrap; }
.rk-table tbody tr.t1 .rk-cat, .rk-table tbody tr.t2 .rk-cat, .rk-table tbody tr.t3 .rk-cat { color: inherit; border-color: currentColor; }
.rk-tier { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid currentColor; }
.rk-tier-ENTRY { color: #f87171; background: color-mix(in srgb, #f87171 14%, transparent); }
.rk-tier-REGULAR { color: #fb923c; background: color-mix(in srgb, #fb923c 14%, transparent); }
.rk-tier-ADVANCED { color: #facc15; background: color-mix(in srgb, #facc15 14%, transparent); }
.rk-tier-PRO { color: #4ade80; background: color-mix(in srgb, #4ade80 16%, transparent); }
.rk-tier-ELITE { color: #c084fc; background: color-mix(in srgb, #c084fc 16%, transparent); }
.rk-table tbody tr.t1 .rk-tier, .rk-table tbody tr.t2 .rk-tier, .rk-table tbody tr.t3 .rk-tier { filter: brightness(1.15); }
button.rk-val { width: auto; margin: 0; padding: 0.1rem 0.45rem; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font-size: 1.25rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; cursor: pointer; }
button.rk-val:hover, button.rk-val:focus-visible { color: var(--pico-primary); }
.rk-source { display: none; }
/* details dialog: centred on the screen, opened by the score */
dialog#rk-det { padding: 0; border: 0; background: transparent; }
dialog#rk-det article { width: min(48rem, 94vw); max-width: none; max-height: 86vh; margin: 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; border: 1px solid var(--portal-line); border-radius: 0.9rem; }
dialog#rk-det article > header { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: start; padding: 0 2.2rem 0.7rem 0; margin: 0 0 0.6rem; background: none; border-bottom: 1px solid var(--portal-line); }
dialog#rk-det article > header button[rel="prev"] { position: absolute; top: 0; right: 0; margin: 0; }
dialog#rk-det h3 { margin: 0; font-size: 1.15rem; }
dialog#rk-det .rk-dtotal { grid-column: 2; grid-row: 1; margin: 0; text-align: right; line-height: 1; font-variant-numeric: tabular-nums; }
dialog#rk-det .rk-dtotal b { font-size: 1.9rem; font-weight: 900; }
dialog#rk-det .rk-dtotal small { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pico-muted-color); }
dialog#rk-det .rk-dmeta { grid-column: 1; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--pico-muted-color); display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
dialog#rk-det .rk-dbody { overflow: auto; min-height: 0; }
dialog#rk-det .rk-dhead { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--pico-muted-color); }
dialog#rk-det ol.rk-starts { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
dialog#rk-det .rk-hd, dialog#rk-det .rk-row { display: grid; grid-template-columns: 5.2rem 1fr 3.4rem 3.4rem 4.6rem; gap: 0.2rem 0.7rem; align-items: center; margin: 0; padding: 0.42rem 0.4rem; list-style: none; }
dialog#rk-det .rk-hd { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pico-muted-color); padding-block: 0.1rem 0.3rem; }
dialog#rk-det .rk-row { border-top: 1px solid color-mix(in srgb, var(--portal-line) 60%, transparent); font-size: 0.9rem; }
dialog#rk-det .rk-row .d { color: var(--pico-muted-color); font-size: 0.82rem; }
dialog#rk-det .rk-row .n { font-size: 0.84rem; }
dialog#rk-det .rk-row .n a { color: inherit; text-decoration: none; }
dialog#rk-det .rk-row .n a:hover, dialog#rk-det .rk-row .n a:focus-visible { color: var(--pico-primary); text-decoration: underline; }
dialog#rk-det .rk-row .t { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--portal-line); color: var(--pico-muted-color); white-space: nowrap; }
dialog#rk-det .p, dialog#rk-det .v { text-align: right; }
dialog#rk-det .rk-row .p { color: var(--pico-muted-color); }
dialog#rk-det .rk-row .v { font-weight: 800; }
dialog#rk-det .rk-row.w .p { color: #ffd166; font-weight: 800; }
dialog#rk-det .rk-row.zero { color: var(--pico-muted-color); }
dialog#rk-det .rk-row.zero .v { font-weight: 400; }
dialog#rk-det .rk-dsum { margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--portal-line); font-size: 0.82rem; color: var(--pico-muted-color); }
@media (max-width: 640px) {
  .rk-bar { grid-template-columns: 1fr; }
  .rk-side { justify-self: stretch; max-width: none; min-width: 0; }
  .rk-sub { display: block; }
  button.rk-val { font-size: 1.1rem; }
  .rk-table td, .rk-table th { padding-inline: 0.3rem; }
  .rk-table th { font-size: 0.85rem; }
  dialog#rk-det .rk-hd { display: none; }
  dialog#rk-det .rk-row { grid-template-columns: 1fr auto auto; gap: 0.1rem 0.6rem; padding: 0.5rem 0.3rem; }
  dialog#rk-det .rk-row .n { grid-column: 1 / 3; grid-row: 1; }
  dialog#rk-det .rk-row .v { grid-column: 3; grid-row: 1; }
  dialog#rk-det .rk-row .d { grid-column: 1; grid-row: 2; font-size: 0.76rem; }
  dialog#rk-det .rk-row .k { grid-column: 2; grid-row: 2; }
  dialog#rk-det .rk-row .p { grid-column: 3; grid-row: 2; font-size: 0.76rem; }
  dialog#rk-det .rk-dtotal b { font-size: 1.6rem; }
}
/* Competition list: search in the filter bar, active filter chips, year chips, pager */
.filter-bar .grow { flex: 1 1 14rem; }
.filter-bar input[type="search"] { margin: 0; }
@media (min-width: 761px) { .filter-bar { flex-wrap: nowrap; } .filter-bar select { min-width: 11rem; } }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: -0.25rem 0 1rem; font-size: 0.85rem; }
.active-filters .chip { border: 1px solid var(--pico-primary); color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); border-radius: 999px; padding: 0.1rem 0.7rem; text-decoration: none; }
.active-filters .chip::after { content: " ×"; opacity: 0.7; }
/* Filters behind one "Filtr" button (competition list, Portal w liczbach): a <details> panel that
   works without JavaScript; the active filters stay visible as chips under the button. */
.filter-zone { margin-bottom: 1rem; }
.filters-row { position: relative; display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap; }
.filter-box { margin: 0; flex: none; }
.filter-box[open] { flex-basis: 100%; }
.filter-box > summary.filter-toggle { display: inline-flex; align-items: center; gap: 0.45rem; width: auto; margin: 0; list-style: none; }
.filter-box > summary.filter-toggle::-webkit-details-marker { display: none; }
.filter-box > summary.filter-toggle::after { display: none; }
.filter-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--pico-primary); color: #16120a; font-size: 0.75rem; font-weight: 800; }
.filter-panel { margin: 0.6rem 0 0; padding: 1rem; }
.filter-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.filter-fields label { margin: 0; font-size: 0.85rem; }
.filter-search { display: block; margin: 0 0 0.75rem; font-size: 0.85rem; }
.filter-search input[type="search"] { margin: 0.2rem 0 0; }
.filter-fields select { margin: 0.2rem 0 0; }
.filter-panel .actions { margin-top: 0.9rem; }
.filter-zone .active-filters { margin: 0.6rem 0 0; }
/* Competitions page: Filtr, the view chips (Wszystkie / Nadchodzące / Zakończone, Zapisy otwarte, Moje starty) and Udostepnij in one
   row; an open panel drops under the row over the list, so the row never moves. On a phone the
   chips take a second line of their own, with full labels. */
.filters-row.one-line { flex-wrap: nowrap; align-items: center; }
.filters-row.one-line .view-chips { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; margin: 0; padding: 0; }
.year-chips { flex-wrap: wrap; overflow-x: visible; row-gap: 0.3rem; margin-bottom: 0.8rem; }
.view-chips .chip { display: inline-flex; gap: 0.35rem; align-items: center; }
.view-chips .chip .n { font-size: 0.72rem; font-weight: 700; padding: 0 0.4rem; border-radius: 999px; background: #2a3037; color: var(--pico-color); }
.view-chips .chip.on .n { background: var(--pico-primary); color: #16120a; }
@media (max-width: 640px) {
  .filters-row.one-line { flex-wrap: wrap; }
  .filters-row.one-line .view-chips { order: 3; flex-basis: 100%; }
}
.filters-row.one-line .filter-box[open] { flex-basis: auto; }
.filters-row.one-line .filter-box > .filter-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.filters-row.one-line .filter-box[open] > summary { border-color: var(--pico-primary); color: var(--pico-primary); }
.filters-row.one-line .share-drop { margin-left: auto; }
.share-drop .share-grid { margin-top: 0; }
@media (max-width: 640px) { .share-drop > summary { padding-inline: 0.75rem; } }
.active-filters .chip-static { border-color: var(--pico-secondary-border); color: #cdd3da; background: transparent; }
.active-filters .chip-static::after { content: none; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* Athlete list: alphabet tiles (one row, scrolls sideways on narrow screens) */
.alpha-tiles { display: flex; flex-wrap: nowrap; gap: 0.2rem; margin: 0 0 1rem; transition: opacity 0.15s; }
.alpha-tiles .tile { flex: 1 1 0; min-width: 0; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 2.8rem; line-height: 1.1; border: 1px solid var(--pico-secondary-border); border-radius: 6px; color: #cdd3da; text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.alpha-tiles .tile small { font-size: 0.62rem; font-weight: 400; opacity: 0.65; }
a.tile:hover { border-color: var(--pico-primary); }
.alpha-tiles .tile.on { border-color: var(--pico-primary); color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); }
.alpha-tiles .tile.empty { opacity: 0.3; }
.alpha-tiles .tile.all { flex: 0 0 auto; padding: 0 0.7rem; margin-right: 0.3rem; font-size: 0.8rem; }
.alpha-tiles.searching { opacity: 0.45; }
@media (max-width: 900px) { .alpha-tiles { overflow-x: auto; padding-bottom: 0.25rem; } .alpha-tiles .tile { flex: 0 0 2.2rem; } .alpha-tiles .tile.all { flex: 0 0 auto; } }
/* Scan job panels: one panel per card, status and actions in shared columns */
.scan-list { margin: 0 0 1rem; }
.scan { display: grid; grid-template-columns: minmax(0, 1.4fr) 9.5rem minmax(0, 1fr) 13rem; gap: 0.3rem 1rem; align-items: center; padding: 0.7rem 0.9rem; margin: 0 0 0.6rem; min-width: 0; }
.scan[hidden] { display: none; }
.scan-file { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; font-weight: 600; }
.scan-file a { display: flex; min-width: 0; }
.scan-file .stem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scan-file .ext, .scan-file small { white-space: nowrap; flex: none; }
.scan-no { color: var(--pico-muted-color); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.scan-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; color: var(--pico-muted-color); font-size: 0.85rem; }
.scan-meta b { color: var(--pico-color); font-weight: 600; }
.scan-note { grid-column: 1 / 4; margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.scan-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; grid-column: 4; grid-row: 1; }
.scan-actions a, .scan-actions button { margin: 0; width: auto; padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.scan-actions form { display: inline; margin: 0; }
@media (max-width: 640px) { .scan { grid-template-columns: minmax(0, 1fr) auto; } .scan-meta, .scan-note { grid-column: 1 / 3; } .scan-actions { grid-column: 1 / 3; grid-row: auto; justify-content: flex-start; } }
/* Scan upload form: mode, files and the button on one line; requirements as a hint below */
.upload-form { display: grid; gap: 0.6rem 1rem; align-items: end; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; }
.upload-form > div { margin: 0; }
.upload-form label { margin: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.upload-form select, .upload-form input[type=file], .upload-form button { margin: 0; }
.upload-form button { width: auto; white-space: nowrap; }
.upload-form .upload-errors, .upload-hint { grid-column: 1 / -1; margin: 0; }
.upload-hint { color: var(--pico-muted-color); font-size: 0.8rem; }
@media (max-width: 900px) { .upload-form { grid-template-columns: 1fr; } .upload-form button { width: 100%; } }
/* Scan verification: shots in groups like the rows of the printed card, two columns, points on the buttons */
.vs-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0; }
.vs-links a { background: rgba(210, 153, 34, 0.18); border: 1px solid var(--portal-warn, #e3b341); color: #ffd166; border-radius: 0.4rem; padding: 0.1rem 0.55rem; font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.vs-links a.vs-link-done { background: rgba(63, 185, 80, 0.15); border-color: var(--portal-ok, #3fb950); color: #7ee787; }
.vs-group { border: 1px solid var(--portal-line); border-radius: 0.7rem; margin: 0 0 0.7rem; }
.vs-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; padding: 0.55rem 0.9rem; cursor: pointer; list-style: none; font-weight: 700; }
.vs-group > summary::-webkit-details-marker { display: none; }
.vs-group > summary::before { content: "▸"; color: var(--pico-muted-color); transition: transform 0.15s; }
.vs-group[open] > summary::before { transform: rotate(90deg); }
.vs-sum { margin-left: auto; color: var(--pico-muted-color); font-weight: 600; font-size: 0.85rem; }
.vs-sum b { color: var(--pico-color); }
.vs-has-check { border-color: #e3b341; border-left-width: 0.35rem; }
.vs-has-check > summary { background: rgba(210, 153, 34, 0.1); border-radius: 0.6rem 0.6rem 0 0; }
.vs-badge { background: #e3b341; color: #1a1405; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 0.35rem; padding: 0.1rem 0.5rem; }
.vs-ok { color: #7ee787; font-size: 0.8rem; font-weight: 600; }
.vs-progress { color: var(--pico-muted-color); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-progress.vs-complete { color: #7ee787; }
.vs-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.5rem; padding: 0.2rem 0.6rem 0.6rem; }
.vs-shot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.4rem; align-items: center; padding: 0.2rem 0.4rem 0.2rem 0.55rem; border: 1px solid var(--portal-line); border-radius: 0.5rem; }
.vs-name { display: flex; align-items: center; font-weight: 700; font-size: 0.95rem; white-space: nowrap; min-width: 0; }
.vs-name b, .vs-name .vs-mark { flex: none; }
.vs-name small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vs-name small { color: var(--pico-muted-color); font-weight: 400; font-size: 0.72rem; margin-left: 0.3rem; }
.vs-void-note { font-style: italic; }
.vs-mark { display: none; background: #e3b341; color: #1a1405; border-radius: 0.3rem; padding: 0 0.3rem; font-size: 0.7rem; font-weight: 800; margin-right: 0.3rem; }
.vs-pick { display: flex; gap: 0.2rem; }
.vs-pick label { margin: 0; display: flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0.3rem 0.5rem; border: 1px solid var(--pico-form-element-border-color); border-radius: 0.4rem; font-size: 0.95rem; font-weight: 700; line-height: 1.1; cursor: pointer; background: var(--pico-form-element-background-color); }
.vs-pick input { position: absolute; opacity: 0; pointer-events: none; }
.vs-pick label:has(input:checked) { background: var(--pico-primary-background); color: #16120a; border-color: transparent; }
.vs-pick label:has(input:focus-visible) { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.vs-hint { grid-column: 1 / -1; margin: 0; font-size: 0.74rem; line-height: 1.2; color: var(--pico-muted-color); }
.vs-check { border-color: #e3b341; border-left-width: 0.35rem; background: rgba(210, 153, 34, 0.12); }
.vs-check .vs-mark { display: inline-block; }
.vs-check .vs-hint strong { color: #e3b341; }
.vs-check.vs-done { border-color: var(--portal-ok, #3fb950); background: rgba(63, 185, 80, 0.08); }
.vs-check.vs-done .vs-mark { background: var(--portal-ok, #3fb950); }
.vs-check.vs-done .vs-mark::before { content: "✓"; }
.vs-check.vs-done .vs-mark { font-size: 0; }
.vs-check.vs-done .vs-mark::before { font-size: 0.7rem; }
.vs-check.vs-done .vs-hint strong { color: var(--pico-muted-color); }
.vs-void { opacity: 0.7; }
@media (max-width: 640px) { .vs-shots { grid-template-columns: 1fr; } }

/* Cycle management: the add-competition picker gets its own row below the buttons. */
.cycle-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
/* Combobox: one field with a list that narrows while typing (combobox.js). */
.combo { position: relative; }
.combo input[role="combobox"] { margin-bottom: 0; padding-right: 2.75rem; }
.combo.has-value input[role="combobox"] { padding-right: 5.5rem; }
.combo .combo-toggle, .combo .combo-clear {
  position: absolute; top: 0; height: 100%; width: 2.75rem; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; color: var(--pico-muted-color);
  display: flex; align-items: center; justify-content: center;
}
.combo .combo-toggle { right: 0; }
.combo .combo-clear { right: 2.75rem; display: none; font-size: 1.1rem; }
.combo.has-value .combo-clear { display: flex; }
.combo .combo-toggle svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.combo.open .combo-toggle svg { transform: rotate(180deg); }
.combo ul[role="listbox"] {
  position: absolute; z-index: 20; left: 0; min-width: 100%; width: max-content;
  max-width: min(34rem, calc(100vw - 2rem)); top: calc(100% + 0.25rem); margin: 0; padding: 0.25rem;
  list-style: none; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pico-card-background-color); border: 1px solid var(--portal-line);
  border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.combo ul[role="listbox"][hidden] { display: none; }
.combo li[role="option"] {
  margin: 0; padding: 0.5rem 0.7rem; min-height: 2.75rem; display: flex; flex-direction: column;
  justify-content: center; border-radius: 0.4rem; cursor: pointer; list-style: none;
}
.combo li[role="option"]:hover, .combo li[role="option"].active { background: rgba(255, 159, 28, 0.14); }
.combo li[role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--pico-primary); }
.combo li[aria-disabled="true"] { cursor: default; color: var(--pico-muted-color); }
@media (max-width: 640px) { .combo ul[role="listbox"] { width: 100%; max-width: 100%; } }
.combo li > span { overflow-wrap: anywhere; }
.combo li small { color: var(--pico-muted-color); font-size: 0.8rem; }
.combo li mark { background: none; color: var(--pico-primary); font-weight: 700; padding: 0; }
.combo .combo-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.combo select.combo-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; border: 0; }
.cycle-add .combo { flex: 1 1 16rem; min-width: 0; max-width: 32rem; }
.cycle-add .combo input[role="combobox"] { min-height: 2.75rem; text-overflow: ellipsis; }
.tile .cycle-add .combo { flex: 1 1 100%; max-width: none; }
.cycle-add button { width: auto; margin: 0; min-height: 2.75rem; }
/* Multi-select combobox with tokens (combobox-multi.js): ranking cycles. */
.cm { position: relative; }
.cm-box { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; min-height: 2.75rem; padding: 0.3rem 0.5rem; border: 1px solid var(--portal-line); border-radius: 0.5rem; cursor: text; }
.cm-box:focus-within { border-color: var(--pico-primary); }
.cm-tok { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.1rem 0.35rem 0.1rem 0.65rem; border: 1px solid var(--pico-primary); border-radius: 999px; color: var(--pico-primary); font-size: 0.82rem; line-height: 1.4; }
.cm-tok button { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 1rem; line-height: 1; }
.cm-tok button:hover, .cm-tok button:focus-visible { background: rgba(255, 159, 28, 0.2); }
.cm input.cm-in { flex: 1 1 6rem; min-width: 6rem; width: auto; margin: 0; padding: 0.25rem; height: auto; border: 0; background: transparent; box-shadow: none; font-size: 0.9rem; }
.cm ul.cm-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.3rem); margin: 0; padding: 0.25rem; list-style: none; max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; background: var(--pico-card-background-color); border: 1px solid var(--portal-line); border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.cm ul.cm-pop[hidden] { display: none; }
.cm-opt { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin: 0; padding: 0.4rem 0.55rem; border-radius: 0.4rem; font-size: 0.9rem; cursor: pointer; list-style: none; }
.cm-opt:hover, .cm-opt.active { background: rgba(255, 159, 28, 0.14); }
.cm-opt .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-opt .dt { flex: none; font-size: 0.72rem; color: var(--pico-muted-color); }
.cm-empty { padding: 0.6rem; font-size: 0.85rem; color: var(--pico-muted-color); list-style: none; }
.cm select.combo-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; border: 0; }
.cm-bar { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; }
.cm-bar .clear { margin-left: auto; font-size: 0.85rem; color: var(--pico-muted-color); }
.cm-bar button { width: auto; margin: 0; padding: 0.35rem 1rem; font-size: 0.85rem; }
.cm-bar button[hidden] { display: none; }
.cycle-manage .actions .inline-form button { padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); }
/* Club list: website, Facebook and Instagram as icon links. */
table.data-table td.club-list-links { white-space: nowrap; }
.club-list-links a { display: inline-flex; padding: 0.3rem; margin-right: 0.15rem; border-radius: 0.4rem; }
.club-list-links a:hover, .club-list-links a:focus-visible { background: var(--pico-secondary-focus); }
/* Distance estimates (ranging): sheet form with killzone chips, course map, diverging scale. */
.est-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.est-head, .est-row { display: grid; grid-template-columns: 3.6rem 4.4rem 1fr; gap: 0.4rem; align-items: center; }
.est-head { font-size: 0.8rem; color: var(--pico-muted-color); padding-bottom: 0.4rem; border-bottom: 1px solid var(--portal-line); }
.est-row { font-size: 0.92rem; padding: 0.4rem 0; border-bottom: 1px solid var(--portal-line); }
.est-row.has-error { background: color-mix(in srgb, var(--portal-bad) 10%, transparent); }
.est-row label { margin: 0; }
.est-row input.est-input { width: 4.4rem; margin: 0; padding: 0.35rem 0.5rem; height: 2.4rem; text-align: right; }
.est-row .est-error { grid-column: 1 / -1; margin: 0; }
.kz-pick { display: flex; flex-wrap: nowrap; gap: 0.25rem; align-items: center; }
.kz-chip { margin: 0; cursor: pointer; }
.kz-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kz-chip span { display: inline-grid; place-items: center; min-width: 2.15rem; height: 2.3rem; padding: 0 0.2rem; border: 1px solid var(--portal-line); border-radius: 0.5rem; background: var(--pico-background-color); font-weight: 650; font-variant-numeric: tabular-nums; }
.kz-chip input:checked + span { border-color: var(--pico-primary); background: color-mix(in srgb, var(--pico-primary) 25%, transparent); }
.kz-chip input:focus-visible + span { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.est-row input.kz-other { width: 3.6rem; margin: 0; padding: 0.35rem 0.3rem; height: 2.4rem; text-align: right; }
@media (max-width: 1100px) { .est-cols { grid-template-columns: 1fr; } .est-col + .est-col .est-head { display: none; } }
@media (max-width: 640px) {
  .est-head { display: none; }
  .est-row { grid-template-columns: auto 1fr; }
  .est-row .est-dist { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
  .est-row .kz-pick { grid-column: 1 / -1; gap: 0.2rem; }
  .kz-chip span { min-width: 0; width: 2.35rem; padding: 0; }
}
/* Below ~370 px six chips and "inna" no longer fit in one row: narrower chips, and a wrap as a safety net. */
@media (max-width: 380px) {
  .est-row .kz-pick { flex-wrap: wrap; gap: 0.15rem; }
  .kz-chip span { width: 2rem; }
  .est-row input.kz-other { width: 2.75rem; padding: 0.35rem 0.2rem; }
}
.err-good { color: #7ee787; } .err-fair { color: #e3b341; } .err-bad { color: #ff7b72; }
.diverge-n3 { background: rgba(88, 166, 255, 0.55); } .diverge-n2 { background: rgba(88, 166, 255, 0.32); } .diverge-n1 { background: rgba(88, 166, 255, 0.14); }
.diverge-0 { background: rgba(63, 185, 80, 0.22); }
.diverge-p1 { background: rgba(248, 81, 73, 0.14); } .diverge-p2 { background: rgba(248, 81, 73, 0.32); } .diverge-p3 { background: rgba(248, 81, 73, 0.55); }
.course-map { display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); }
.course-map .cm-cell { border-radius: 0.35rem; padding: 0.2rem 0.1rem; text-align: center; font-size: 0.75rem; line-height: 1.15; border: 1px solid var(--portal-line); font-variant-numeric: tabular-nums; }
.course-map .cm-cell span { display: block; }
.course-map .cm-cell b { display: block; font-size: 0.68rem; color: var(--pico-muted-color); font-weight: 600; }
.course-map .cm-empty { opacity: 0.35; }
.legend-scale { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-size: 0.75rem; margin-top: 0.6rem; }
.legend-scale span { padding: 0.1rem 0.45rem; border-radius: 0.25rem; }

/* Place fields (core/places.py): state of the city on the map under the profile and club forms. */
.place-found { display: flex; gap: 0.35rem; align-items: center; margin: -0.3rem 0 0.9rem; font-size: 0.85rem; color: var(--portal-ok); }
.place-missing { color: var(--portal-warn); }

/* "Skąd jesteśmy?" map on the club list (core/static/core/geo-map.js). */
/* Map on the left, legend and the "always show" option in a side column on the right. */
.geo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.25rem; align-items: start; }
.geo-side { display: flex; flex-direction: column; gap: 0.75rem; padding-left: 1.25rem; border-left: 1px solid var(--portal-line); }
.geo-layout .map-canvas { margin-top: 0; }
/* Until the map loads, a dashed frame of the map's height holds the "show map" button. */
.js .geo-layout .map-actions { min-height: 22rem; justify-content: center; border: 1px dashed var(--portal-line); border-radius: 0.6rem; }
html:not(.js) .geo-map-col { display: none; }
.geo-legend { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.geo-legend label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.geo-legend input { margin: 0; }
.geo-legend small { margin-left: 2.9rem; }
.geo-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; }
.geo-swatch-club { background: #58a6ff; border: 2px solid #fff; }
.geo-swatch-athletes { background: rgba(255, 166, 0, 0.45); border: 2px solid #ffa600; }
.geo-swatch-range { border-radius: 0; background: #f85149; border: 2px solid #fff; transform: rotate(45deg) scale(0.8); margin: 0 0.1rem; }
.geo-note, .geo-side .map-consent { margin: 0; }
@media (max-width: 720px) {
  .geo-layout { grid-template-columns: 1fr; }
  .geo-side { padding-left: 0; border-left: 0; }
  .js .geo-layout .map-actions { min-height: 0; border: 0; justify-content: flex-start; }
}

/* Club list (/kluby/): clubs on the left, shooting ranges on the right; stacked on narrow screens. */
.clubs-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.clubs-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.clubs-col > .panel, .clubs-col > .actions { margin: 0; }
@media (max-width: 960px) {
  .clubs-columns { grid-template-columns: 1fr; }
}

/* Simple mode (F-ACC-9): switch in the account menu and the notice badge */
.mode-switch form { margin: 0; display: grid; gap: .15rem; }
.mode-switch label { align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.js .mode-switch label.js-only { display: flex; }
.mode-switch input[role=switch] { margin: 0; }
.js .mode-switch .no-js-only { display: none; }
.mode-switch small { font-size: .78rem; line-height: 1.3; }

/* ---- F-UI-2 layout pieces (spec 2026-10-11-spojnosc-ui-design.md) ---- */
/* Breadcrumbs above the page title; the last item is the current page (no link). */
.crumbs { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.crumbs a { color: var(--pico-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--pico-primary); }
.crumbs .sep { opacity: 0.6; }
/* Section tabs (Organizacja, Rankingi, Trening): links, the current one marked aria-current. */
.subnav { display: flex; justify-content: flex-start; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--portal-line); overflow-x: auto; }
.subnav a { flex: 0 0 auto; display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.6rem 1rem; border-bottom: 3px solid transparent; color: var(--pico-muted-color); text-decoration: none; }
.subnav a:hover { color: var(--pico-color); }
.subnav a[aria-current="page"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }
/* Tabs that do not fit: core/tabs-more.js adds sticky arrow buttons over a fade at the edges (classes
   has-more / has-less on the row), each gone at its end of the row. The buttons take no room in the row
   (negative margin), so showing or hiding them moves the tabs by at most the row gap. The fade colour is set on the row,
   not read inside the button: Pico sets --pico-background-color to the primary colour on buttons.
   Motion off with prefers-reduced-motion. */
.subnav, .tabs { scrollbar-width: none; --tabs-fade: var(--pico-background-color); }
.subnav::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.panel :is(.subnav, .tabs), article :is(.subnav, .tabs) { --tabs-fade: var(--portal-panel); }
:is(.subnav, .tabs) > .subnav-more, :is(.subnav, .tabs) > .subnav-less { display: none; position: sticky; flex: none; align-self: stretch; width: 2.75rem; padding: 0; border: 0; border-radius: 0; color: var(--pico-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: none; align-items: center; }
:is(.subnav, .tabs) > .subnav-more { right: 0; margin: 0 0 0 -2.75rem; justify-content: flex-end; padding-right: 0.2rem; background: linear-gradient(to right, transparent, var(--tabs-fade) 55%); animation: subnav-nudge 1.4s ease-in-out infinite; }
:is(.subnav, .tabs) > .subnav-less { left: 0; margin: 0 -2.75rem 0 0; justify-content: flex-start; padding-left: 0.2rem; background: linear-gradient(to left, transparent, var(--tabs-fade) 55%); }
:is(.subnav, .tabs) > .subnav-more:is(:hover, :focus, :active, :focus-visible), :is(.subnav, .tabs) > .subnav-less:is(:hover, :focus, :active, :focus-visible) { background-color: transparent; box-shadow: none; color: var(--pico-primary-hover); }
.has-more > .subnav-more, .has-less > .subnav-less { display: inline-flex; }
@keyframes subnav-nudge { 0%, 100% { padding-right: 0.2rem; } 50% { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { :is(.subnav, .tabs) > .subnav-more { animation: none; } }
/* Tab row (user decision 2026-10-11): tabs on the left, the current tab's buttons on the right;
   a fixed height keeps the row still between tabs with and without buttons. On a phone the
   buttons drop under the tabs, so the tabs stay put there too. */
.subnav-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.4rem; margin: 0 0 1rem; border-bottom: 1px solid var(--portal-line); }
.subnav-bar .subnav { margin: 0; border-bottom: 0; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.subnav-bar .actions { flex: none; flex-wrap: nowrap; }
.subnav-bar:not(:has(*)) { display: none; }
/* Organizacja: one scrolling row like every other tab row (arrows from core/tabs-more.js); the buttons
   of the tab sit in a row of their own, level with the year chips. */
.org-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 0.75rem; flex-wrap: wrap; margin: 0 0 0.8rem; }
.org-toolbar:not(:has(*)) { display: none; }
.org-toolbar .year-chips { flex: 1 1 auto; margin: 0; }
@media (max-width: 640px) {
  .subnav-bar { flex-direction: column; align-items: stretch; min-height: 0; border-bottom: 0; gap: 0.6rem; }
  .subnav-bar .subnav { border-bottom: 1px solid var(--portal-line); }
  .subnav-bar .actions { flex-wrap: wrap; }
}
/* Competition stages and the next step on the organiser's page. */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin: 0 0 1rem; padding: 0; }
.stepper li { list-style: none; margin: 0; padding: 0.45rem 0.5rem; border-top: 3px solid #2a3037; font-size: 0.82rem; color: var(--pico-muted-color); }
.stepper li::marker { content: none; }
.stepper li.done { border-top-color: rgba(63, 185, 80, 0.6); color: #7ee787; }
.stepper li.now { border-top-color: var(--pico-primary); color: var(--pico-color); font-weight: 700; }
.next-step { display: grid; gap: 0.4rem; }
.next-step h3 { margin: 0; font-size: 1.1rem; color: var(--pico-color); }
@media (max-width: 700px) { .stepper { grid-template-columns: repeat(3, 1fr); } }
/* Tiles grouped by stage; a tile that does nothing in this status is greyed out. */
.tile-group { margin: 1.25rem 0 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color); }
.tiles.compact { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.tile small { display: block; color: var(--pico-muted-color); margin-top: 0.15rem; }
.tile.locked { opacity: 0.55; }
.tile.locked:hover { border-color: var(--portal-line); }
/* Footer with the legal links. */
.site-footer { border-top: 1px solid var(--portal-line); padding: 1.25rem 0 2rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; }
.site-footer a { color: var(--pico-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--pico-primary); }
/* "Wydruki i eksport" menu inside a row of actions (details.dropdown, works without JS). */
.actions details.dropdown { margin: 0; }
.actions details.dropdown summary[role="button"] { width: auto; height: auto; min-height: 2.75rem; }
.actions details.dropdown ul a { display: flex; gap: 0.45rem; align-items: center; }
.panel-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
/* Competitions page cards (competitions/cards.py): date | facts | actions; on a phone the actions
   go under the facts. "Zapisz się" has its own colour (F-UI-2 exception, spec 2026-10-12): not the
   orange main button of a page and not the green approve, so every card may carry one. */
.zcard { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 14.5rem; gap: 1rem; align-items: start; padding: 0.9rem 1rem 0.9rem 0; border-left-width: 4px; margin: 0 0 0.75rem; }
.zcard.cycle-stripe- { border-left-color: #5d6672; } /* no cycle; a cycle colours the edge (.cycle-stripe-*) */
.zcard.past .zcard-date, .zcard.past .zcard-body { opacity: 0.7; }
.zcard .cal-date { padding-top: 0.15rem; }
.zcard .cal-date .d { font-size: 1.9rem; }
.zcard .cal-date.long .d { font-size: 0.95rem; }
.zcard-when { font-size: 0.75rem; color: var(--pico-muted-color); margin-top: 0.2rem; text-align: center; }
.zcard h2 { font-size: 1.1rem; margin: 0 0 0.15rem; }
.zcard-where { display: flex; gap: 0.35rem; align-items: baseline; font-size: 0.88rem; color: var(--pico-muted-color); }
.zcard-where > .icon { align-self: center; }
.zcard-where .club-logo { width: 1.2rem; height: 1.2rem; margin-right: 0.25rem; }
.zcard .cal-tags { margin: 0.45rem 0 0.55rem; }
.zfacts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font-size: 0.88rem; }
.zfacts > span { display: inline-flex; gap: 0.35rem; align-items: center; }
.zfacts .icon { color: var(--pico-muted-color); }
.spots progress { width: 3.5rem; height: 0.35rem; margin: 0; }
.my-entry { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: rgba(63, 185, 80, 0.08); border: 1px solid rgba(63, 185, 80, 0.35); font-size: 0.9rem; }
.my-entry > .icon { color: #7ee787; margin-top: 0.15rem; }
.my-entry-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.zcard-act { display: grid; gap: 0.4rem; align-content: start; }
.zcard-act > .badge { justify-self: center; }
.zcard-btns { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem; }
.zcard-btns:has(> :only-child) { grid-template-columns: 1fr; }
.zcard-btns a[role="button"] { width: 100%; margin: 0; white-space: nowrap; }
.zcard-btns a[role="button"].icon-btn { width: auto; padding-inline: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.zcard-btns a[role="button"].nav-btn { display: none; }
.deadline { font-size: 0.85rem; color: var(--pico-muted-color); text-align: center; }
.deadline.soon { color: var(--portal-warn); font-weight: 600; }
a[role="button"].enter { background: var(--portal-info); border-color: var(--portal-info); color: #06121f; font-weight: 700; }
a[role="button"].enter:hover, a[role="button"].enter:focus-visible { background: #79b8ff; border-color: #79b8ff; color: #06121f; }
/* Course tag: dots for targets per lane, "20×2 · 40 celów" */
.course-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.05rem 0.55rem 0.05rem 0.4rem; border-radius: 0.35rem; background: rgba(88, 166, 255, 0.1); border: 1px solid rgba(88, 166, 255, 0.35); color: #cfe3ff; font-size: 0.75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.course-tag .dots { display: inline-grid; grid-auto-flow: column; gap: 2px; }
.course-tag .dots i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #79c0ff; box-sizing: border-box; }
.course-tag .x { color: var(--pico-muted-color); font-weight: 500; }
.course-tag small { color: var(--pico-muted-color); font-weight: 500; font-size: 0.72rem; }
@media (max-width: 640px) {
  .zcard { grid-template-columns: 3.6rem minmax(0, 1fr); padding-right: 0.8rem; }
  .zcard .cal-date .d { font-size: 1.4rem; }
  .zcard-act { grid-column: 1 / -1; padding-left: 0.8rem; }
  .zcard-btns { grid-template-columns: auto auto 1fr; }
  .zcard-btns:has(> :nth-child(2):last-child) { grid-template-columns: auto 1fr; }
  .zcard-btns a[role="button"] { white-space: normal; }
  .zcard-btns a[role="button"].nav-btn { display: inline-flex; gap: 0.35rem; align-items: center; justify-content: center; }
  .zfacts { gap: 0.3rem 0.9rem; font-size: 0.85rem; }
}
/* Agenda of /zawody/ (spec F-CMP-34, 2026-10-28): the number of competitions of a month, the summary line and the
   collapsible card of a phone, the entry panel under the button of the action column, and the filter row (.zrow)
   whose Filtr and Udostepnij are as high as a chip. Without JavaScript every card is open (everything is under .js). */
.cal-month h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.cal-month h3 .mon-n { font-weight: 600; letter-spacing: 0.04em; }
.zsum, .zcard-toggle, .view-menu { display: none; }
.zcard-act .my-entry { margin: 0; padding: 0.4rem 0.6rem; font-size: 0.82rem; gap: 0.4rem; align-items: center; line-height: 1.3; }
.zcard-act .my-entry > .icon { margin: 0; flex: none; }
.zcard-act .my-entry-tags { margin: 0; justify-content: center; }
.zcard-btns a[role="button"].to-page .icon { display: none; }
.filters-row.zrow .filter-box > summary.filter-toggle { position: relative; min-height: calc(0.85rem * 1.5 + 0.4rem + 2px); height: auto; padding: 0.2rem 0.85rem; font-size: 0.85rem; line-height: 1.5; border-radius: 999px; gap: 0.4rem; }
.filters-row.zrow .filter-box > summary.filter-toggle::before { content: ""; position: absolute; inset: -0.45rem -0.15rem; }
.filters-row.zrow .filter-toggle .icon { width: 15px; height: 15px; }
.filters-row.zrow .filter-count { height: 1.2rem; min-width: 1.2rem; font-size: 0.7rem; }
.filters-row.one-line.zrow { gap: 0.45rem; }
/* Filtr pill with the active-filter chips in the same row (Portal w liczbach, 2026-10-29). */
.filters-row.one-line.fchips { flex-wrap: wrap; align-items: center; }
.filters-row.fchips .active-filters { display: contents; }
.filters-row.fchips .active-filters .chip { display: inline-flex; align-items: center; box-sizing: border-box; min-height: calc(0.85rem * 1.5 + 0.4rem + 2px); margin: 0; padding: 0.2rem 0.75rem; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-zone:has(> .fchips) { margin-bottom: 1rem; }
.view-menu { position: relative; margin: 0; flex: none; }
.view-menu > summary { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: calc(0.85rem * 1.5 + 0.4rem + 2px); padding: 0.2rem 0.75rem; margin: 0; border: 1px solid var(--pico-primary); border-radius: 999px; background: rgba(255, 159, 28, 0.1); color: var(--pico-primary); font-size: 0.85rem; list-style: none; cursor: pointer; }
.view-menu > summary::-webkit-details-marker, .view-menu > summary::after { display: none; }
.view-menu > summary::before { content: ""; position: absolute; inset: -0.45rem -0.15rem; }
.view-menu > summary .icon { width: 15px; height: 15px; }
.view-menu > ul { position: absolute; top: 100%; left: 0; z-index: 12; min-width: 13rem; margin: 0.3rem 0 0; padding: 0.3rem; list-style: none; background: #1d2126; border: 1px solid var(--portal-line); border-radius: 0.6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.view-menu li { margin: 0; padding: 0; list-style: none; }
.view-menu li a { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.7rem; border-radius: 0.4rem; color: #cdd3da; text-decoration: none; }
.view-menu li a .n { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 0 0.4rem; border-radius: 999px; background: #2a3037; color: var(--pico-color); }
.view-menu li a[aria-current] { color: var(--pico-primary); }
.view-menu li a:hover, .view-menu li a:focus-visible { background: #2a3037; }
.view-menu .vm-sep { margin: 0.3rem 0; border-top: 1px solid var(--portal-line); }
@media (max-width: 640px) {
  .zcard { position: relative; }
  .js .zcard-when { display: none; }
  .zcard-body { padding-right: 2.4rem; }
  .js .zsum { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; margin-top: 0.3rem; }
  .js .zsum .zwhen { font-size: 0.78rem; color: var(--pico-muted-color); white-space: nowrap; }
  .js .zcard-toggle { display: inline-flex; position: absolute; top: 0.1rem; right: 0.1rem; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; align-items: center; justify-content: center; background: none; border: 0; box-shadow: none; color: var(--pico-muted-color); }
  .zcard-toggle .icon { transition: transform 0.15s; }
  .zcard.open .zcard-toggle .icon { transform: rotate(180deg); }
  .js .zcard:not(.open) .zcard-more, .js .zcard:not(.open) .zcard-act { display: none; }
  .js .zcard-act > .badge { display: none; }
  .zcard-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.5rem; }
  .zcard-act .zcard-btns { display: flex; gap: 0.4rem; grid-column: 2; grid-row: 1; }
  .zcard-act:not(:has(.my-entry)) .zcard-btns { grid-column: 1 / -1; }
  .zcard-btns a[role="button"]:not(.icon-btn):not(.to-page) { flex: 1; }
  .zcard-btns a[role="button"].to-page { flex: none; width: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .zcard-btns a[role="button"].to-page .lbl { display: none; }
  .zcard-btns a[role="button"].to-page .icon { display: inline-block; width: 1.2rem; height: 1.2rem; }
  .zcard-act .my-entry { grid-column: 1; grid-row: 1; min-width: 0; white-space: nowrap; }
  .zcard-act .my-entry > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .zcard-act .my-entry.multi { white-space: normal; }
  .zcard-act .my-entry-tags, .zcard-act .deadline { grid-column: 1 / -1; }
  .zcard-act .deadline { text-align: left; }
  .view-menu { display: block; }
  .filters-row.one-line.zrow .view-chips { order: 0; flex: 0 1 auto; }
  .view-chips .chip.vc-desk { display: none; }
  .filters-row.zrow .view-chips:not(:has(.chip:not(.vc-desk))) { display: none; }
}
/* News (news app): one card everywhere (home, "Inne aktualności"), detail page. */
.news-list { display: grid; gap: 0.75rem; }
.news-item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.7rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); color: inherit; text-decoration: none; }
.news-item:hover { border-color: var(--pico-primary); text-decoration: none; }
.news-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 0.5rem; overflow: hidden; background: var(--portal-panel); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-thumb .news-emblem { width: 45%; height: 45%; color: var(--pico-primary); }
/* News topics (News.Topic, icons in news.models.TOPIC_ICONS): the card emblem of a news item without a photo. */
.news-thumb.topic-message { background: color-mix(in srgb, #ff9f1c 16%, transparent); } .news-thumb.topic-message .news-emblem { color: #ff9f1c; }
.news-thumb.topic-important { background: color-mix(in srgb, #f06b62 16%, transparent); } .news-thumb.topic-important .news-emblem { color: #f06b62; }
.news-thumb.topic-events { background: color-mix(in srgb, #6f9be8 16%, transparent); } .news-thumb.topic-events .news-emblem { color: #6f9be8; }
.news-thumb.topic-results { background: color-mix(in srgb, #f5c542 16%, transparent); } .news-thumb.topic-results .news-emblem { color: #f5c542; }
.news-thumb.topic-report { background: color-mix(in srgb, #e77fb5 16%, transparent); } .news-thumb.topic-report .news-emblem { color: #e77fb5; }
.news-thumb.topic-rules { background: color-mix(in srgb, #5fc6cb 16%, transparent); } .news-thumb.topic-rules .news-emblem { color: #5fc6cb; }
.news-thumb.topic-board { background: color-mix(in srgb, #5fcf8f 16%, transparent); } .news-thumb.topic-board .news-emblem { color: #5fcf8f; }
.news-thumb.topic-training { background: color-mix(in srgb, #b393e0 16%, transparent); } .news-thumb.topic-training .news-emblem { color: #b393e0; }
.news-thumb.topic-fees { background: color-mix(in srgb, #a9cf54 16%, transparent); } .news-thumb.topic-fees .news-emblem { color: #a9cf54; }
.news-thumb.topic-abroad { background: color-mix(in srgb, #9aa8b6 16%, transparent); } .news-thumb.topic-abroad .news-emblem { color: #9aa8b6; }
.news-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.7rem; font-size: 0.78rem; color: var(--pico-muted-color); }
.news-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.news-title { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.news-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; line-height: 1.45; color: var(--pico-muted-color); }
.news-more { font-size: 0.85rem; font-weight: 600; color: var(--pico-primary); }
.news-list.compact .news-item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.7rem; padding: 0.5rem; }
.news-list.compact .news-thumb { aspect-ratio: 1; }
.news-list.compact .news-title { font-size: 0.92rem; }
.news-page { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.news-page > .panel, .news-page > aside > .panel { margin: 0; }
.news-photo { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: cover; border-radius: 0.6rem; margin: 0 0 1rem; }
@media (min-width: 1024px) { .news-page { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .news-item { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.7rem; padding: 0.6rem; } .news-thumb { aspect-ratio: 1; } .news-title { font-size: 0.98rem; } .news-more { display: none; } }
/* Home page W2 (the Aktualnosci tab, 5 news per page also on phones): news panel left, upcoming competitions and results right (one column on phones). */
.home-duo { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 1rem; }
.home-duo > .panel { margin: 0; }
.home-side { display: grid; gap: 1rem; min-width: 0; }
.home-side > .panel { margin: 0; }
.mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.mini-list li { list-style: none; margin: 0; }
.mini-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.45rem 0.4rem; border-radius: 0.5rem; color: inherit; text-decoration: none; }
.mini-row:hover { background: var(--portal-line); text-decoration: none; }
a.mini-row:not([href]):hover { background: none; }  /* a calendar link without an address */
.mini-date { display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0.25rem 0; border-radius: 0.45rem; background: var(--portal-line); }
.mini-date b { font-size: 1.15rem; }
.mini-date small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mini-row strong { display: block; font-size: 0.93rem; line-height: 1.3; }
.mini-row .muted { font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: center; }
@media (min-width: 1024px) { .home-duo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
/* PFTA content from Markdown (news app): the Regulaminy, Historia and Wladze panes of the home page as bordered cards like the news cards (uklad: panele = one column, siatka = two per row from 641 px); the document page with downloads and contents. */
.md-panels { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
.md-grid { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 641px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-card-tall { grid-row: span 2; } }
.md-card { min-width: 0; padding: 0.8rem 1rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); overflow-wrap: anywhere; }
.md-card-wide { grid-column: 1 / -1; }
.md-card .md-card-title { margin: 0 0 0.5rem; font-size: 1.02rem; color: var(--pico-color); }
.md-card p, .md-intro p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.md-card ul { margin: 0 0 0.6rem; padding-left: 0; }
.md-card li { list-style: none; padding: 0.35rem 0; border-bottom: 1px solid var(--portal-line); font-size: 0.95rem; }
.md-card li:last-child { border-bottom: 0; }
.md-card h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0.9rem 0 0.2rem; color: var(--pico-muted-color); }
.md-card > :last-child, .md-intro > :last-child { margin-bottom: 0; }
.md-card ol { margin: 0 0 0.4rem; padding-left: 1.4rem; }
.md-card ol li { list-style: decimal; border-bottom: 0; padding: 0.1rem 0; }
.md-intro { margin: 0 0 1rem; overflow-wrap: anywhere; }
.doc-page { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.doc-page > article, .doc-page > aside > .panel { margin: 0; }
.doc-page > aside { display: grid; gap: 1rem; order: -1; min-width: 0; }
.doc-page .toc { display: none; }
.doc-page .toc ol { margin: 0; padding-left: 1.2rem; }
.doc-page .toc li { margin: 0.25rem 0; font-size: 0.92rem; }
.doc-page .files { list-style: none; padding: 0; margin: 0; }
.doc-page .files li { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--portal-line); }
.doc-page .files li:last-child { border-bottom: 0; }
.doc-page .files small { margin-left: auto; white-space: nowrap; }
article.md h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--portal-line); }
article.md h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
article.md p { margin: 0 0 0.55rem; }
article.md img { display: block; max-width: 100%; height: auto; margin: 0 0 1rem; border-radius: 0.4rem; }
@media (min-width: 1024px) {
  .doc-page { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .doc-page > aside { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
  .doc-page > article { grid-column: 1; grid-row: 1; }
  .doc-page > article:only-child { grid-column: 1 / -1; }
  .doc-page .toc { display: block; }
}
/* Home page: the tab row sits at the top of the news panel, edge to edge. */
.news-panel > .news-tabs { margin: -1rem -1rem 1rem; padding: 0 0.5rem; }
@media (max-width: 640px) { .news-panel > .news-tabs { padding: 0 0.25rem; } }
/* Home page tabs (news/home-tabs.js): panes of the news panel; without JavaScript all panes show one under another with their headings. */
.news-panel[data-tabs] { scroll-margin-top: 4.5rem; }
.tab-pane > .actions { margin-top: 1rem; }
.tab-heading { margin: 0 0 0.75rem; font-size: 1.15rem; }
[data-tabs]:not(.tabs-ready) .tab-pane + .tab-pane { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--portal-line); }
.tabs-ready .tab-pane:not(.is-active) { display: none; }
.tab-pane[hidden], .tab-pane [hidden] { display: none; }
.tab-back { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0 0.75rem; font-weight: 600; text-decoration: none; }
.tab-doc .page-header { margin-bottom: 0.75rem; }
.tab-doc .page-header h2 { margin: 0; font-size: 1.3rem; }
.tab-doc .doc-page > article, .tab-doc .doc-page > aside > .panel { padding: 0.8rem 1rem; border-radius: 0.7rem; background: var(--pico-background-color); }
.tab-doc .doc-page > article { grid-column: auto; grid-row: auto; overflow-wrap: anywhere; }
/* The panel is narrower than a page: downloads and contents sit above the text (contents from 1024 px, as on the page), never in a side column. */
.tab-doc .doc-page { grid-template-columns: minmax(0, 1fr); }
.tab-doc .doc-page > aside { order: -1; grid-column: auto; grid-row: auto; position: static; max-height: none; overflow: visible; }
.tab-doc .doc-page .toc ol { columns: 2 14rem; column-gap: 1.5rem; }
.tab-doc .doc-page .toc li { margin: 0 0 0.3rem; padding: 0; break-inside: avoid; line-height: 1.35; }
.tab-doc [id] { scroll-margin-top: 4.5rem; }
/* The imported document sits one heading level down (home-tabs.js): its h3 and h4 look like the h2 and h3 of the full page. */
.tab-doc article.md h3 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--portal-line); color: var(--pico-h2-color); }
.tab-doc article.md h4 { font-size: 1rem; margin: 1.1rem 0 0.4rem; color: var(--pico-h3-color); }
.tab-doc .doc-page h3.panel-title { margin: 0 0 0.75rem; font-size: 1.05rem; color: var(--pico-h2-color); }
/* Four tabs in one row: narrower tabs without icons on phones and small tablets, and at 1024-1279 px where the news panel is two thirds of the page. */
@media (max-width: 767px), (min-width: 1024px) and (max-width: 1279px) {
  .news-tabs { gap: 0; }
  .news-tabs a { padding: 0.6rem 0.4rem; font-size: 0.9rem; }
  .news-tabs .icon { display: none; }
}
/* News embeds (stage 4): gate before the click, the frame after it, the FB card with its bar on the home page. */
.embed-gate { display: grid; place-items: center; text-align: center; gap: 0.5rem; aspect-ratio: 16 / 9; padding: 1rem; border: 1px dashed var(--portal-line); border-radius: 0.6rem; background: var(--pico-background-color); }
.embed-gate .icon-xl { width: 2.6rem; height: 2.6rem; color: var(--pico-muted-color); }
.embed-gate p { margin: 0; max-width: 32rem; font-size: 0.88rem; color: var(--pico-muted-color); }
.embed-gate button { width: auto; margin: 0.3rem 0 0; }
.news-page .fb-embed, .news-page .embed-box { margin-top: 1rem; }
.embed-box iframe { display: block; width: 100%; border: 0; border-radius: 0.6rem; }
.embed-box.r16x9 iframe { aspect-ratio: 16 / 9; }
.embed-box.r4x3 iframe { aspect-ratio: 4 / 3; }
.news-stack { border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); overflow: hidden; }
.news-stack > .news-item { border: 0; border-radius: 0; }
.news-stack:hover { border-color: var(--pico-primary); }
.news-stack .fb-embed { padding: 0.7rem; border-top: 1px dashed var(--portal-line); }
.fb-gate { display: flex; align-items: center; gap: 0.7rem; }
.fb-gate > .icon { flex: none; width: 1.4rem; height: 1.4rem; color: #79c0ff; }
.fb-gate p { margin: 0; flex: 1 1 auto; font-size: 0.82rem; color: var(--pico-muted-color); }
.fb-gate button { flex: none; width: auto; margin: 0; padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.fb-holder { margin: 0 auto; overflow: hidden; border-radius: 0.5rem; }
.fb-holder iframe { display: block; border: 0; overflow: hidden; transform-origin: 0 0; }
.embed-fallback { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--pico-muted-color); text-align: center; }
@media (max-width: 640px) {
  .embed-gate { aspect-ratio: auto; padding: 1.5rem 1rem; }
  .fb-gate { flex-wrap: wrap; }
  .fb-gate button { width: 100%; }
}

/* Mil-dot ranging panel of the ballistic calculator (athletes/_mildot_panel.html, mildot.js):
   two tables side by side (stacked on a phone), and a sticky bar with the magnification ring
   (second focal plane only) and the eyepiece showing the picked killzone on the reticle. */
.mildot-pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 640px) { .mildot-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mildot-pair h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.mildot-table td, .mildot-table th { padding: 0.2rem 0.35rem; font-size: 0.85rem; white-space: nowrap; }
.mildot-table td.out { color: var(--pico-muted-color); opacity: 0.5; }
.mildot-table tr.major td { border-top: 2px solid var(--portal-line); font-weight: 650; }
.js .mildot-table td.pick { cursor: pointer; }
.mildot-table td.picked { outline: 2px solid var(--pico-primary); outline-offset: -2px; border-radius: 0.25rem; }
.mag-box { margin: 0 -1rem 1.25rem; padding: 0.6rem 1rem 0.75rem; position: sticky; top: 4.55rem; z-index: 5; background: var(--portal-panel); border-bottom: 1px solid var(--portal-line); }
.mag-readout { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.4rem; }
.mag-readout strong { font-size: 1.9rem; line-height: 1; color: var(--pico-primary); font-variant-numeric: tabular-nums; }
.zoom-ring { padding: 0.2rem 0 0; }
.zoom-ring input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.6rem; margin: 0; border-radius: 0.6rem; border: 1px solid var(--portal-line); background: repeating-linear-gradient(90deg, #2a3037 0 3px, #20252b 3px 7px); cursor: ew-resize; }
.zoom-ring input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.6rem; height: 3rem; border-radius: 0.3rem; background: var(--pico-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); border: 0; }
.zoom-ring input[type=range]::-moz-range-thumb { width: 0.6rem; height: 3rem; border-radius: 0.3rem; background: var(--pico-primary); border: 0; }
.zoom-ring input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; box-shadow: none; }
.zoom-ring input[type=range]::-moz-range-track { height: 100%; background: transparent; border: 0; box-shadow: none; }
.zoom-ring input[type=range]::-webkit-slider-thumb { margin-top: -0.25rem; }
.zoom-scale { display: flex; justify-content: space-between; padding: 0.3rem 0.25rem 0; font-size: 0.8rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.zoom-scale span { width: 2ch; text-align: center; }
.zoom-scale span.cal { color: var(--portal-ok); font-weight: 700; }
.js .eyepiece-row.js-only { display: grid; grid-template-columns: 10rem 1fr; gap: 1.25rem; align-items: center; }
.eyepiece-row > * { min-width: 0; }
.eyepiece svg { width: 100%; height: auto; display: block; }
.eyepiece-caption { font-size: 0.9rem; color: var(--pico-muted-color); text-align: center; margin-top: 0.35rem; }
@media (max-width: 640px) {
  .mag-box { top: 4.8rem; padding-top: 0.4rem; padding-bottom: 0.5rem; margin-bottom: 1rem; }
  .mag-readout { gap: 0.4rem; font-size: 0.85rem; }
  .mag-readout strong { font-size: 1.5rem; }
  .zoom-ring input[type=range] { height: 2.2rem; }
  .zoom-ring input[type=range]::-webkit-slider-thumb { height: 2.6rem; margin-top: -0.25rem; }
  .zoom-ring input[type=range]::-moz-range-thumb { height: 2.6rem; }
  .zoom-scale span.tick { display: none; }
  .js .eyepiece-row.js-only { grid-template-columns: 5rem 1fr; gap: 0.75rem; }
  .eyepiece-hint { display: none; }
  .eyepiece-caption { font-size: 0.75rem; }
}

/* Ballistic result page: mode and angle controls in one panel (athletes/ballistics_result.html). */
.ctl { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center; margin: 0 0 0.6rem; }
.ctl-label { font-size: 0.8rem; color: var(--pico-muted-color); }
.ctl .filter-chips { margin: 0; padding: 0; flex-wrap: wrap; }
.angle-form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.angle-form input { width: 5rem; margin: 0; padding: 0.2rem 0.5rem; height: 2rem; }
.angle-form button { margin: 0; width: auto; padding: 0.2rem 0.8rem; height: 2rem; }
details.help { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--pico-muted-color); }
details.help summary { cursor: pointer; }

/* Crop editor (F-ATH-5b): fixed frame, the photo moves under it. */
.crop { gap: 0.6rem; margin-bottom: 0.5rem; }
.crop-stage { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; }
.crop-frame { position: relative; overflow: hidden; width: 100%; border-radius: 0.6rem; border: 1px solid var(--portal-line);
  background: #0d1117; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.crop-frame.square { max-width: 20rem; aspect-ratio: 1 / 1; }
.crop-frame.wide { aspect-ratio: 16 / 9; }
.crop-frame.dragging { cursor: grabbing; }
.crop-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(0.55); transform: scale(1.1); pointer-events: none; }
.crop-img { position: absolute; max-width: none; pointer-events: none; }
.crop-grid { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.28) calc(33.33% - 0.5px), rgba(255,255,255,0.28) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
                    transparent calc(66.66% - 0.5px), rgba(255,255,255,0.28) calc(66.66% - 0.5px), rgba(255,255,255,0.28) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.28) calc(33.33% - 0.5px), rgba(255,255,255,0.28) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px),
                    transparent calc(66.66% - 0.5px), rgba(255,255,255,0.28) calc(66.66% - 0.5px), rgba(255,255,255,0.28) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
  opacity: 0; transition: opacity 0.15s; }
.crop-frame.dragging .crop-grid, .crop-frame:hover .crop-grid { opacity: 1; }
/* Thumbnail preview (the club circle) next to the athlete frame. */
.crop-preview { display: grid; justify-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--pico-muted-color); }
.crop-preview .crop-frame { width: 4.5rem; aspect-ratio: 1 / 1; border-radius: 50%; cursor: default; }
.crop-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.crop-tools button { width: auto; margin: 0; }
.crop-zoom { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; margin: 0; color: var(--pico-muted-color); }
.crop-zoom input[type="range"] { margin: 0; }
.crop-hint { margin: 0; font-size: 0.85rem; }
.photo-file { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; }
.photo-file input[type="file"] { margin: 0; flex: 1 1 14rem; }
.photo-file label { margin: 0; }
.js .crop.js-only { display: grid; }  /* must outweigh `.js .js-only { display: revert }` */
.crop[hidden], .js .crop.js-only[hidden] { display: none; }

/* Photos in a frame and the lightbox with the original (F-ATH-5b). */
.athlete-photo { display: block; width: 100%; max-width: 15rem; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.6rem; }
.set-cover.wide { height: auto; aspect-ratio: 16 / 9; }
.photo-zoom { position: relative; display: block; width: fit-content; max-width: 100%; border-radius: 0.6rem; cursor: zoom-in; }
.card-item .photo-zoom { width: 100%; }
.photo-zoom img { display: block; }
.photo-zoom .zoom-badge { position: absolute; right: 0.45rem; bottom: 0.45rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: rgba(13, 17, 23, 0.72); color: #e6edf3; transition: background 0.15s; }
.photo-zoom:hover .zoom-badge, .photo-zoom:focus-visible .zoom-badge { background: var(--pico-primary); color: #0d1117; }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
dialog.lightbox::backdrop { background: rgba(5, 8, 12, 0.88); }
dialog.lightbox[open] { display: grid; place-items: center; }
dialog.lightbox figure { margin: 0; display: grid; gap: 0.5rem; justify-items: center; max-width: 96vw; }
dialog.lightbox img { max-width: 96vw; max-height: calc(100dvh - 6rem); border-radius: 0.4rem; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
dialog.lightbox figcaption { color: var(--pico-muted-color); font-size: 0.85rem; text-align: center; padding: 0 1rem; }
dialog.lightbox .lightbox-close { position: fixed; top: 0.75rem; right: 0.75rem; width: 2.6rem; height: 2.6rem; padding: 0; margin: 0;
  display: grid; place-items: center; border-radius: 50%; }

/* Podium on the results page (scoring/_podium.html, scoring/podium.js; mockup 2026-10-14). */
.podium-wrap { container: podium / inline-size; }
.podium { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; align-items: end; max-width: 38rem; margin: 0.5rem auto 0; }
.podium .step { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.podium .who { padding: 0 0.2rem 0.5rem; min-width: 0; }
.podium .who b { display: block; font-size: 1.02rem; overflow-wrap: anywhere; }
.podium .who span { display: block; font-size: 0.8rem; color: var(--pico-muted-color); overflow-wrap: anywhere; }
.podium .who .pts { margin-top: 0.15rem; color: var(--pico-color); font-variant-numeric: tabular-nums; }
.podium .block { width: 100%; height: var(--h); display: flex; justify-content: center; align-items: flex-start; padding-top: 0.7rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--portal-panel)), var(--portal-panel)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--portal-line)); border-bottom: 0; border-radius: 0.7rem 0.7rem 0 0; }
.podium .disc { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: var(--c); background: radial-gradient(circle, transparent 0 34%, var(--c) 35% 39%, transparent 40% 60%, var(--c) 61% 66%, transparent 67% 84%, var(--c) 85% 90%, transparent 91%); }
.podium .disc span { background: var(--portal-panel); border-radius: 50%; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; line-height: 1; }
.podium .p1 { --c: var(--pico-primary); --h: 7.2rem; --d: 0.7s; }
.podium .p2 { --c: #aab2bc; --h: 5.2rem; --d: 0.35s; }
.podium .p3 { --c: #cf8f45; --h: 3.8rem; --d: 0s; }
.podium-wrap::after { content: ""; display: block; height: 3px; max-width: 38rem; margin: 0 auto 1.2rem; background: var(--portal-line); border-radius: 2px; }
@container podium (max-width: 420px) { .podium .who b { font-size: 0.8rem; } .podium .who span:not(.pts) { display: none; } .podium .who .pts { font-size: 0.72rem; } .podium .disc { width: 2.2rem; height: 2.2rem; } .podium .p1 { --h: 6.2rem; } .podium .p2 { --h: 4.4rem; } .podium .p3 { --h: 3.2rem; } }
.podium.pending .block, .podium.pending .who { visibility: hidden; }
.podium.reveal .block { animation: podium-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d); }
.podium.reveal .who { animation: podium-show 0.4s ease-out both; animation-delay: calc(var(--d) + 0.45s); }
.podium.reveal .p1 .disc::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: podium-ping 0.9s ease-out both; animation-delay: calc(var(--d) + 0.55s); }
@keyframes podium-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes podium-show { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
@keyframes podium-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .podium.reveal .block, .podium.reveal .who, .podium.reveal .p1 .disc::after { animation: none; } }

/* Heatmap tables (competition analysis, athlete profile): the shot count under the percentage on a phone. */
@media (max-width: 640px) { .heatmap th, .heatmap td { padding-inline: 0.3rem; } .heatmap td small { display: block; } }

/* "Twój wynik na tle grupy" on the results page (scoring/_distribution.html, scoring/dotplot.py; mockup 2026-10-14). */
.dist-wrap { container: dist / inline-size; }
.dist-wrap .meta { margin: 0 0 0.6rem; }
.dots { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 760px; }
.dots.narrow { display: none; }
@container dist (max-width: 520px) { .dots.wide { display: none; } .dots.narrow { display: block; max-width: 520px; } .dist-wrap .tiles-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dist-wrap .stat strong { font-size: 1.25rem; } }
.dots .band { fill: rgba(255, 255, 255, 0.04); }
.dots .tick, .dots .axis { stroke: #4a525b; }
.dots .axis { stroke-width: 2; }
.dots .median { stroke: #8b949e; stroke-dasharray: 3 3; }
.dots .cap { fill: #8b949e; }
.dots .d { fill: #5b6672; }
.dots .d1 { fill: var(--pico-primary); } .dots .d2 { fill: #aab2bc; } .dots .d3 { fill: #cf8f45; }
.dots .me { fill: var(--pico-background-color); stroke: var(--pico-primary); stroke-width: 2.5; }
.dots .me-dot, .dots .me-tag { fill: var(--pico-primary); }
.dots .me-line { stroke: var(--pico-primary); stroke-width: 1.5; }
.dots .me-text { fill: var(--pico-primary-inverse); font-weight: 700; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.78rem; color: var(--pico-muted-color); margin: 0.6rem 0 0.8rem; align-items: center; }
.dist-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; vertical-align: -0.05rem; margin-right: 0.3rem; background: #5b6672; }
.dist-legend .dd1 { background: var(--pico-primary); } .dist-legend .dd2 { background: #aab2bc; } .dist-legend .dd3 { background: #cf8f45; }
.dist-legend .ddme { background: var(--pico-background-color); border: 2px solid var(--pico-primary); width: 0.6rem; height: 0.6rem; }

/* Scan verification: photo and reading side by side (scanning/_compare.html, compare.js; mockup 2026-10-14). */
.cmp { position: relative; width: 100%; aspect-ratio: var(--ar); border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--portal-line); background: #111; --pos: 50%; touch-action: pan-y; user-select: none; }
.cmp .stage { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); }
.cmp img, .cmp .layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cmp .layer img { display: none; }
.js .cmp .layer img { display: block; filter: brightness(0.42) saturate(0.6); }
.js .cmp .layer { clip-path: inset(0 0 0 calc(var(--pos) * var(--k) + var(--o))); }
.cmp svg.over { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-off { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.f-ok-KNOCKDOWN, .f-ok-FACEPLATE, .f-ok-MISS { stroke-width: 2; }
.f-ok-KNOCKDOWN { fill: rgba(63, 185, 80, 0.65); stroke: var(--portal-ok); }
.f-ok-FACEPLATE { fill: rgba(210, 153, 34, 0.7); stroke: var(--portal-warn); }
.f-ok-MISS { fill: rgba(248, 81, 73, 0.6); stroke: var(--portal-bad); }
.f-warn { fill: rgba(255, 159, 28, 0.35); stroke: var(--pico-primary); stroke-width: 3; stroke-dasharray: 8 5; }
.f-cell { fill: none; stroke: var(--pico-primary); stroke-width: 3; stroke-dasharray: 8 5; }
.f-marker { fill: none; stroke: var(--portal-info); stroke-width: 5; }
.cmp .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--pico-primary); pointer-events: none; }
.cmp .handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pico-primary); color: var(--pico-primary-inverse); display: grid; place-items: center; font-weight: 800; }
.cmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp input[type=range]:focus-visible ~ .handle::after { outline: 3px solid #fff; outline-offset: 2px; }
.cmp .tag { position: absolute; top: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 0.4rem; background: rgba(21, 24, 28, 0.85); font-size: 0.78rem; font-weight: 650; pointer-events: none; }
.cmp .tag.l { left: 0.5rem; }
.cmp .tag.r { right: 0.5rem; color: var(--pico-primary); }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--pico-muted-color); align-items: center; }
.cmp-legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; vertical-align: -0.1rem; margin-right: 0.25rem; }
.cmp-legend .k { background: var(--portal-ok); } .cmp-legend .f { background: var(--portal-warn); } .cmp-legend .m { background: var(--portal-bad); }
.cmp-legend .w { background: rgba(255, 159, 28, 0.5); border: 1px dashed var(--pico-primary); }
.cmp-legend .mk { border: 2px solid var(--portal-info); border-radius: 50%; }
.cmp-doubt { margin-top: 1rem; }
.doubt-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.5rem; }
.doubt-chips .chip { display: inline-block; padding: 0.1rem 0.65rem; border-radius: 999px; border: 1px solid var(--portal-warn); color: #e3b341; text-decoration: none; }
.doubt-chips .chip[aria-current] { background: rgba(210, 153, 34, 0.25); }
.doubt-crop { margin: 0 0 0.8rem; }
.doubt-crop[hidden] { display: none; }
.doubt-crop svg { display: block; width: 100%; max-width: 24rem; height: auto; border-radius: 0.5rem; border: 1px solid var(--portal-line); background: #111; }
.doubt-crop figcaption { font-size: 0.85rem; color: var(--pico-muted-color); margin-top: 0.3rem; }

/* Course page: PFTA track check (F-CMP-22) */
.page-header:has(.pfta-stamp) { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pfta-stamp { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 3px double var(--portal-ok); color: var(--portal-ok); border-radius: 0.6rem; padding: 0.35rem 0.9rem; transform: rotate(-4deg);
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.1; }
.pfta-stamp-top { font-size: 0.8rem; font-weight: 700; }
.pfta-stamp-main { font-size: 1.35rem; font-weight: 800; }
.pfta-stamp-sub { font-size: 0.6rem; letter-spacing: 0.05em; }
.pfta-forced { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--pico-muted-color); }
.pfta-forced.ok { color: #7ee787; }
.pfta-issues { margin: 0.5rem 0 0.25rem; padding-left: 1.1rem; }
.pfta-issues li { margin: 0.15rem 0; }
tr.pfta-bad td, tr.pfta-bad-note td { background: rgba(248, 81, 73, 0.08); }
tr.pfta-bad-note td { padding-top: 0; border-top: 0; }
.pfta-note { display: flex; gap: 0.35rem; align-items: center; color: #ff7b72; font-size: 0.8rem; }
tr.pfta-warn-note td { padding-top: 0; border-top: 0; background: rgba(210, 153, 34, 0.08); }
.pfta-note.warn { color: #e3b341; }
@media (max-width: 640px) {
  .page-header:has(.pfta-stamp) { flex-direction: column-reverse; align-items: flex-start; }
  .pfta-stamp { margin: 0.9rem 0 0.4rem 0.4rem; }
}

/* Result tables by competition definition (F-CMP-24) */
.scheme-kind { display: inline-block; font-size: 0.72rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--portal-line); color: var(--pico-muted-color); margin-left: 0.35rem; vertical-align: middle; }
.scheme-kind.cat { border-color: var(--portal-ok); color: var(--portal-ok); }
.scheme-kind.dist { border-color: var(--portal-info); color: var(--portal-info); }
.distinctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.distinction { border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.distinction h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.distinction ol { margin: 0; padding-left: 1.2rem; }
.distinction small { color: var(--pico-muted-color); }

/* Classification definition panel (F-CMP-24, mockup 1a). `fieldset.mode-switch`, not the
   account menu's `li.mode-switch`: a radio group drawn like .bc-switch, works without JS. */
fieldset.mode-switch { position: relative; display: inline-flex; width: fit-content; border: 1px solid var(--portal-line); border-radius: 999px; overflow: hidden; margin: 0; padding: 0; }
fieldset.mode-switch label { display: block; margin: 0; padding: 0.25rem 0.8rem; font-size: 0.85rem; font-weight: 400; color: var(--pico-muted-color); cursor: pointer; white-space: nowrap; }
fieldset.mode-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.mode-switch label:has(input:checked) { background: var(--pico-primary); color: var(--pico-primary-inverse); font-weight: 700; }
fieldset.mode-switch label:has(input:focus-visible) { outline: 2px solid var(--pico-primary); outline-offset: -2px; }
fieldset.mode-switch[aria-invalid="true"] { border-color: var(--pico-del-color); }
/* The first submit of a form with a secondary submit ("Kopiuj"): Enter saves. */
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.scheme-table td { vertical-align: middle; }
.scheme-table .scheme-hint { display: block; margin: 0.3rem 0 0; font-size: 0.78rem; }
.scheme-table tr.off td:first-child { color: var(--pico-muted-color); }
tr.diff td { background: rgba(255, 159, 28, 0.08); }
.scheme-diff { display: block; font-size: 0.78rem; color: var(--pico-primary); }
.scheme-preview { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.scheme-preview li { counter-increment: t; display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--portal-line); }
.scheme-preview li::before { content: counter(t) "."; color: var(--pico-muted-color); width: 1.5rem; flex: none; }
.scheme-preview li span:first-of-type { flex: 1; }
@media (max-width: 640px) {
  fieldset.mode-switch label { padding: 0.25rem 0.5rem; font-size: 0.78rem; }
  .scheme-table td, .scheme-table th { padding-left: 0.3rem; padding-right: 0.3rem; }
}
.classifications-cycle { margin: 0.6rem 0 0.2rem; font-size: 0.95rem; }
.classifications-block p { margin: 0 0 0.3rem; overflow-wrap: anywhere; }

/* Silhouette (F-SIL): zapis, liczniki serii, wyniki. */
.sil-opts { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0.5rem 0 1rem; }
.sil-opt { display: flex; gap: 0.75rem; align-items: center; margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--portal-line); border-radius: 0.6rem; cursor: pointer; }
.sil-opt input { margin: 0; flex: none; }
.sil-opt b { display: block; }
.sil-opt small { color: var(--pico-muted-color); }
.sil-sum { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--portal-line); border-radius: 0.6rem; margin-bottom: 1rem; }
.sil-sum b { font-size: 1.15rem; }
.sil-series { margin: 0 0 1rem; }
.sil-series h3 { font-size: 1rem; margin: 0 0 0.5rem; display: flex; justify-content: space-between; gap: 1rem; }
.sil-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.sil-table { border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.55rem; text-align: center; }
.sil-table .animal { font-size: 0.85rem; color: var(--pico-muted-color); display: block; }
.sil-table .dist { font-size: 0.75rem; color: var(--pico-muted-color); }
.sil-count { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.4rem 0 0.2rem; }
.sil-count button { width: 2.4rem; height: 2.4rem; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.sil-count output { min-width: 2rem; font-size: 1.5rem; font-weight: 700; }
.sil-pips { display: flex; justify-content: center; gap: 0.2rem; }
.sil-pips i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--pico-muted-color); }
.sil-pips i.on { background: var(--portal-ok); border-color: var(--portal-ok); }
.sil-tot { margin-top: 0.3rem; font-size: 0.8rem; color: var(--pico-muted-color); }
.sil-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 7rem; gap: 0.6rem; align-items: stretch; }
.sil-row .sum { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--portal-info); border-radius: 0.6rem; padding: 0.4rem; }
.sil-row .sum span { font-size: 0.75rem; color: var(--pico-muted-color); }
.sil-row .sum b { font-size: 1.5rem; }
.sil-row .sum small { color: var(--pico-muted-color); }
.sil-mini { margin: 0 0 0.6rem; }
@media (max-width: 640px) {
  .sil-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sil-row .sum { grid-column: 1 / -1; flex-direction: row; gap: 0.6rem; }
  .sil-count button { width: 2.6rem; height: 2.6rem; }
}
.sil-count input[type="number"] { width: 3.2rem; margin: 0; padding: 0.2rem; text-align: center; font-size: 1.4rem; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.sil-count input[type="number"]::-webkit-outer-spin-button, .sil-count input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Silhouette: kształty zwierząt z karty w nagłówkach (czarne, przezroczyste; w ciemnym motywie odwrócone). */
.sil-ico { height: 1.7rem; width: auto; max-width: 3rem; vertical-align: middle; filter: invert(1); opacity: 0.9; }
.sil-cap { display: block; font-size: 0.7rem; font-weight: 400; color: var(--pico-muted-color); margin-top: 0.15rem; }
.sil-tall .sil-ico { height: 2.1rem; }
th .sil-ico { display: inline-block; }
@media (max-width: 640px) { .sil-ico { height: 1.4rem; max-width: 2.2rem; } .sil-cap { display: none; } }

/* Family choice of the cycle form (F-SIL cycles): two tiles, the checked one is orange. */
fieldset.kind-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; border: 0; margin: 0 0 1rem; padding: 0; }
fieldset.kind-choice legend { grid-column: 1 / -1; font-weight: 700; }
fieldset.kind-choice label { display: block; margin: 0; padding: 0.8rem 1rem; border: 1px solid var(--portal-line); border-radius: 0.6rem; cursor: pointer; }
fieldset.kind-choice label:has(input:checked) { border-color: var(--pico-primary); }
fieldset.kind-choice label small { display: block; color: var(--pico-muted-color); }
fieldset.kind-choice > small { grid-column: 1 / -1; color: var(--pico-muted-color); }

/* Silhouette badge figure (F-SIL badges): the target shape as a CSS mask over the medal, in the
   tier colour. A mask on an HTML element works in every browser, unlike an SVG mask in a
   <symbol> reached through <use> (WebKit draws a filled rectangle there). The box repeats the
   84x70 figure slot of the 120x120 medal. */
.bm-sil { position: absolute; left: 15%; top: 18.3%; width: 70%; height: 58.3%; background: var(--tier); -webkit-mask: var(--sil) center / contain no-repeat; mask: var(--sil) center / contain no-repeat; pointer-events: none; }

/* Equipment line of the public entrant list: the second and later lines are muted. */
.eq-line { color: var(--pico-muted-color); font-size: 0.82rem; }
.eq-line:not(.sm-only) { display: block; }  /* .sm-only keeps its own display rule */

/* Silhouette panel (F-SIL statistics): the target shape in front of a table's efficiency bar.
   The shapes are black cutouts, so they are inverted on the dark theme. */
.sil-fig { display: inline-flex; align-items: center; gap: 0.4rem; }
.sil-fig img { height: 1.5rem; width: auto; filter: invert(1) brightness(0.9); }
.pf-eff.sil-row { grid-template-columns: 11rem 1fr 8rem; }
@media (max-width: 720px) {
  /* on a phone the bar gets a row of its own under the label and the value */
  .pf-eff.sil-row { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .pf-eff.sil-row > :nth-child(1) { grid-area: 1 / 1; }
  .pf-eff.sil-row > :nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .pf-eff.sil-row > :nth-child(3) { grid-area: 1 / 2; }
}
.sil-fig { white-space: nowrap; }
.sil-spread { margin-top: 1.4rem; }

/* Forum (F-FORUM, mockup docs/makiety/2026-10-16-forum-v2.html, variant "B + UX 2"): sections and
   threads are portal tables, a post is an <article> (panel look) with header.panel-head, its
   actions one muted line (.forum-tools), moderation one details.dropdown (.forum-menu). */
table.data-table.forum-table td:first-child { white-space: normal; }  /* a long title wraps instead of widening the table */
.forum-post { scroll-margin-top: 5rem; }  /* #p<pk> lands below the sticky top bar */
/* The quote header comes from the server (quote_of), not from the post body; it joins the first blockquote. */
.forum-quote-head { margin: 0; padding: 0.5rem var(--pico-spacing) 0; border-left: 0.25rem solid var(--pico-muted-border-color); font-size: 0.82rem; font-weight: 600; color: var(--pico-muted-color); }
.forum-quote-head + .rich > blockquote:first-child { margin-top: 0; padding-top: 0.35rem; }
.forum-hidden { border-style: dashed; border-color: var(--portal-warn); }  /* hidden thread or post, seen only by moderators */
.forum-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; margin-top: 0.6rem; font-size: 0.85rem; }
.forum-tools > a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; color: var(--pico-muted-color); text-decoration: none; }
.forum-tools > a:hover, .forum-tools > a:focus-visible { color: var(--pico-primary); }
.forum-tools .danger-link { min-height: 2rem; padding: 0 0.3rem; font-size: 0.85rem; }
/* Post attachments (F-FORUM-C, markup only from forum/attachment_render.py): a figure or a PDF card
   in the body, leftovers as a thumbnail grid and a file list under it. */
.forum-att { margin: 0.8rem 0; }
.forum-att img, .forum-att-grid img { display: block; max-width: 100%; height: auto; border-radius: var(--pico-border-radius); }
.forum-att figcaption { margin-top: 0.3rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.forum-att-grid, .forum-att-files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.forum-att-grid li { margin: 0; padding: 0; max-width: 9rem; }
.forum-att-files li { margin: 0; padding: 0; flex: 1 1 14rem; }
.forum-att-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.8rem; margin: 0.8rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--portal-line); border-radius: var(--pico-border-radius); }
.forum-att-files .forum-att-pdf { margin: 0; }
.forum-att-name { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.forum-att-download { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; margin-left: auto; text-decoration: none; }
.forum-att-preview { display: block; max-width: 12rem; height: auto; border-radius: var(--pico-border-radius); }
.forum-att-mod { display: block; margin-top: 0.3rem; font-size: 0.85rem; }
.forum-att-mod a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; color: var(--pico-muted-color); text-decoration: none; }
.forum-att-hidden { border: 1px dashed var(--portal-warn); border-radius: var(--pico-border-radius); }
/* Attachment block of the post forms (forum/static/forum/attachments.js): one row per file. */
.att-field { margin: 1rem 0; }
.att-title { font-size: 1rem; margin: 0 0 0.3rem; }
.att-list { display: grid; gap: 0.5rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.att-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.4rem 0.7rem; align-items: start; margin: 0; padding: 0.5rem; border: 1px solid var(--portal-line); border-radius: var(--pico-border-radius); }
.att-thumb { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--pico-border-radius); background: var(--portal-panel); color: var(--pico-muted-color); overflow: hidden; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-body { display: grid; gap: 0.15rem; min-width: 0; }
.att-name { overflow-wrap: anywhere; font-weight: 600; }
.att-caption { margin: 0.2rem 0 0; min-height: 2.5rem; padding: 0.3rem 0.6rem; font-size: 0.9rem; }
.att-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.att-actions button, .att-field > .actions button { width: auto; min-height: 2.75rem; margin: 0; }
.att-status { align-self: center; }  /* in the add row: showing it must not move the submit button under the pointer */
.att-remove { padding-left: 0.8rem; padding-right: 0.8rem; }
/* Giełda photos (the same block with `photos`): the first photo is the main one; its star hides. */
.att-main-tag { display: none; justify-self: start; }
.att-photos .att-item:first-child .att-main-tag { display: inline-block; }
.att-photos .att-item:first-child { border-color: var(--pico-primary); }
.att-photos .att-item:first-child .att-main { display: none; }
/* Giełda listing form (F-FORUM-E, mockup docs/makiety/2026-10-20-forum-kluby-gielda.html, B2 and
   C): type and condition tiles (.seg; the checked look comes from :has, no script), a two-column
   grid of fields, the contact box. A value typed for the listing hides while "Z konta" is chosen
   or the channel is off; without :has it simply stays visible (it is always in the form). */
.market-form-col { max-width: 48rem; }
.market-form-col > .market-form { max-width: none; }
.f-grid > .helptext { margin-top: 0.25rem; }
.market-form fieldset { margin: 0 0 0.5rem; }
.market-form legend { margin-bottom: 0.4rem; }
.market-form .panel-title + fieldset { margin-top: 0.25rem; }
.market-form h2.panel-title { margin-top: 1.25rem; }
.market-form h2.panel-title:first-of-type { margin-top: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.seg label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; margin: 0; padding: 0.4rem 0.8rem; border: 1px solid var(--pico-form-element-border-color); border-radius: 0.6rem; cursor: pointer; font-size: 0.9rem; }
.seg label:has(input:checked) { border-color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); color: #ffb347; }
.seg label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--pico-primary); }
.seg input { flex: none; margin: 0; }
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.f-wide { grid-column: 1 / -1; }
.f-check { padding-top: 2.4rem; }
.f-check label, .f-wide > label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; }
/* the condition in one line (mockup B2b) and the energy confirmation right above the buttons, for
   a rifle or a pistol only; `is-off` (set by the server, kept by forum/market-form.js) hides an
   option only with JavaScript, so without it every option shows and the server decides; the
   alert and the panel share the width of `.market-form-col` */
.seg.state-line { flex-wrap: nowrap; margin-bottom: 0.4rem; min-width: 0; }
.seg.state-line > label { min-width: 0; } /* a long label wraps inside its pill, never a sideways scroll */
.energy-confirm { margin: 1rem 0; padding: 0.7rem 0.9rem; border: 1px solid var(--pico-form-element-border-color); border-radius: 0.6rem; }
.energy-confirm label { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; }
.energy-confirm label input { flex: none; margin: 0.2rem 0 0; }
.energy-confirm .helptext { margin: 0.3rem 0 0; }
.js .state-line label.is-off, .js .energy-confirm.is-off { display: none; }
.contact-box { border: 1px solid var(--portal-line); border-radius: var(--pico-border-radius); padding: 0.8rem 1rem; margin: 0 0 1rem; }
.contact-box label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; }
.contact-box label input { flex: none; margin: 0; }
.contact-box .src { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.6rem 1.7rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.contact-box .src label { display: inline-flex; flex-wrap: wrap; margin: 0; gap: 0.35rem; min-height: 2.75rem; }
.contact-box .src label:has(input:disabled) { opacity: 0.75; cursor: default; }
.contact-box .val { color: var(--pico-muted-color); font-size: 0.85rem; overflow-wrap: anywhere; }
.contact-box .own { margin: 0 0 0.7rem 1.7rem; }
.contact-box .own input { margin-bottom: 0.4rem; }
.contact-box .own .helptext { margin-top: 0; }
.contact-channel:has(input[type="checkbox"]:not(:checked)) .src,
.contact-channel:has(input[type="checkbox"]:not(:checked)) .own,
.contact-channel:has(input[value="ACCOUNT"]:checked) .own { display: none; }
/* Giełda tile grid (F-FORUM-E, mockup B1 and C): type chips, cards with the photo (4:3 thumbnail
   or the category icon on a tinted tile), type badges stacked on it, the outcome overlay of an
   ended listing; two columns on a phone. Filters (owner's decision 2026-10-21): on a computer the
   selects stand visible in a row under the chips (mockup B1, the "Filtr" button hidden), compact
   34 px like the forum toolbar (px: Pico's root font grows to 20 px on wide screens); on a phone
   they drop under the row like the other "Filtr" panels, shown only while the <details> toggle
   next to them is open. */
.market-filters .market-ended { display: flex; align-items: center; gap: 0.5rem; align-self: end; min-height: 2.75rem; }
.market-filters .market-ended input { flex: none; margin: 0; }
@media (max-width: 640px) {
  .market-filters .market-fields { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin: 0.6rem 0 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
  .market-filters:has(> .filters-row > .filter-box:not([open])) .market-fields { display: none; }
}
@media (min-width: 641px) {
  .market-filters .filter-box { display: none; }
  .market-filters .filters-row.one-line { flex-wrap: wrap; }
  .market-filters .market-fields { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0; padding: 0; background: none; border: 0; }
  .market-filters .market-fields .filter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
  .market-filters .market-fields .filter-fields label { display: inline-flex; align-items: center; gap: 0.45rem; }
  .market-filters .market-fields .filter-fields label { font-size: 14px; }
  .market-filters .market-fields select { width: auto; height: 34px; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; font-size: 14px; }
  .market-filters .market-fields .market-ended { align-self: center; min-height: 0; }
  .market-filters .market-fields .actions { margin: 0; }
  .market-filters .market-fields .actions :is(button, a[role="button"]) { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; line-height: 1; white-space: nowrap; }
}
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.mcard { display: flex; flex-direction: column; min-width: 0; background: var(--pico-card-background-color); border: 1px solid var(--portal-line); border-radius: 0.8rem; overflow: hidden; color: inherit; text-decoration: none; }
.mcard:hover, .mcard:focus-visible { border-color: var(--pico-primary); color: inherit; }
.mcard-img { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); background: linear-gradient(135deg, #4a4a4a, #222); }
.mcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard-ph .icon { width: 2.6rem; height: 2.6rem; margin: 0; stroke-width: 1.5; }
.mcard-img.cat-rifle { background: linear-gradient(135deg, #2d4a6b, #1b2a3a); }
.mcard-img.cat-optics { background: linear-gradient(135deg, #5a3f2b, #2b1f16); }
.mcard-img.cat-pellets { background: linear-gradient(135deg, #3b5a45, #1b2b21); }
.mcard-img.cat-pistol { background: linear-gradient(135deg, #4b4f7a, #20223a); }
.mcard-img.cat-accessories { background: linear-gradient(135deg, #5a2f4b, #2b1623); }
.mcard-img .badges { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.mcard-img .cnt { position: absolute; right: 0.5rem; bottom: 0.5rem; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 0.4rem; }
.mcard-img .done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(21, 24, 28, 0.72); color: #e7e9ec; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.mcard-body { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.75rem 0.8rem; }
.mcard-price { font-size: 1.15rem; font-weight: 800; color: #ffb347; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-price small { font-size: 0.72rem; font-weight: 600; color: var(--pico-muted-color); }
.mcard-title { font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: auto; padding-top: 0.35rem; font-size: 0.78rem; color: var(--pico-muted-color); }
/* type badges: the tint as a variable, so on a photo the same tint lies over a dark backing */
.badge-sell { --tint: rgba(63, 185, 80, 0.18); color: #7ee787; }
.badge-buy { --tint: rgba(88, 166, 255, 0.18); color: #79c0ff; }
.badge-swap { --tint: rgba(163, 113, 247, 0.2); color: #d2a8ff; }
.badge-give { --tint: rgba(255, 159, 28, 0.18); color: #ffb347; }
.badge-take { --tint: rgba(219, 97, 162, 0.2); color: #f0a6cf; }
.badge-sell, .badge-buy, .badge-swap, .badge-give, .badge-take { background: var(--tint); }
.mcard-img .badges .badge { background: linear-gradient(var(--tint), var(--tint)), rgba(21, 24, 28, 0.85); }
@media (max-width: 640px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .mcard-body { padding: 0.5rem 0.55rem 0.6rem; }
  .mcard-price { font-size: 1rem; }
  .mcard-title { font-size: 0.85rem; }
}
/* Giełda listing page (F-FORUM-E, mockup B3 and C): gallery on the left, price, spec table and the
   contact card on the right (one column on a phone), the description and the comments under it.
   The contact values only arrive after "Pokaż kontakt" (forum/reveal.js) and may be long, so
   they wrap anywhere instead of widening the page. */
.market-ended-bar { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem; padding: 0.55rem 0.9rem; border-radius: var(--pico-border-radius); background: rgba(248, 81, 73, 0.16); color: #ff7b72; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.market-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.market-gallery { min-width: 0; }
.market-gallery > .photo-zoom { display: block; }
.market-gallery > .photo-zoom img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.8rem; background: #22272d; }
.market-gallery-ph { border-radius: 0.8rem; }
.market-gallery-ph .mcard-ph .icon { width: 4rem; height: 4rem; }
.market-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.market-thumbs li { margin: 0; padding: 0; list-style: none; }
.market-thumbs .photo-zoom { display: block; }
.market-thumbs img { display: block; width: 4.2rem; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid transparent; border-radius: 0.45rem; }
.market-thumbs li.on img { border-color: var(--pico-primary); }
.market-thumbs .zoom-badge { display: none; }
.market-side { min-width: 0; }
.market-price { margin: 0.1rem 0 0.3rem; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #ffb347; overflow-wrap: anywhere; }
.market-price small { font-size: 0.85rem; font-weight: 600; color: var(--pico-muted-color); }
.market-spec { width: 100%; margin: 0.6rem 0; }
.market-spec th, .market-spec td { padding: 0.3rem 0; border-bottom: 1px solid var(--portal-line); background: transparent; overflow-wrap: anywhere; }
.market-spec th { width: 38%; color: var(--pico-muted-color); font-weight: 500; text-align: left; }
.market-contact { margin-top: 0.8rem; padding: 0.8rem 1rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: #22272d; }
.market-contact form { margin: 0.2rem 0 0.4rem; }
.market-contact-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; }
.market-contact-row > span:first-child { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.market-contact-row > span:first-child .icon { margin: 0; }
.market-contact-value { min-width: 0; text-align: right; color: var(--pico-muted-color); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.market-contact-value a { letter-spacing: normal; }
.market-contact button { width: auto; margin: 0.4rem 0 0; }
.market-contact-error { margin: 0.4rem 0 0; color: #ff7b72; font-size: 0.9rem; }
.market-contact-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0 0 1rem; }
.market-contact-list dd { margin: 0; overflow-wrap: anywhere; }
.market-desc-title { margin-top: 1.2rem; }
.market-desc .forum-tools { margin-top: 0.5rem; }
.market-comments-title { margin: 1.25rem 0 0.75rem; font-size: 1.1rem; }
/* "Zakończ ogłoszenie": the forum menu look, but with its label (not a square) and opening to the
   right, so on a phone it never leaves the screen on the left */
details.dropdown.forum-menu.kebab.market-end-menu > summary { width: auto; height: auto; min-height: 2.75rem; padding: 0 0.9rem; gap: 6px; font-size: 0.9rem; font-weight: 600; line-height: 1; white-space: nowrap; }
details.dropdown.forum-menu.kebab.market-end-menu > summary .icon { width: 16px; height: 16px; margin: 0; }
details.dropdown.forum-menu.kebab.market-end-menu > summary + ul { left: 0; right: auto; }
main.forum .page-header .actions details.market-end-menu ul li .menu-btn { justify-content: flex-start; width: 100%; height: auto; min-height: 2.75rem; padding: 0 0.5rem; border: 0; border-radius: 0; background: none; color: inherit; font-weight: 400; text-align: left; }
@media (min-width: 641px) {
  details.dropdown.forum-menu.kebab.market-end-menu > summary { height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; border-radius: 0.5rem; }
  main.forum .page-header .actions details.market-end-menu ul li .menu-btn { min-height: 38px; font-size: 14.5px; }
}
@media (min-width: 761px) {
  .market-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .market-price { font-size: 1.5rem; }
  .f-check { padding-top: 0; }
  .contact-box { padding: 0.7rem 0.75rem; }
  .contact-box .src, .contact-box .own { margin-left: 0; }
  .seg.state-line label { padding: 0.4rem 0.6rem; }
}
.forum-react { margin: 0; }
.forum-react button, .forum-likes { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; width: auto; margin: 0; padding: 0 0.6rem; font-size: 0.85rem; }
.forum-likes { color: var(--pico-muted-color); padding: 0; }
.forum-react button[aria-pressed="true"] { color: var(--pico-primary); border-color: var(--pico-primary); }
.forum-react button[aria-pressed="true"] svg { fill: currentColor; }
.forum-tools details.dropdown.forum-menu { margin-left: auto; }
/* "Moderuj": Pico stretches a dropdown and opens it from the left; this one opens from its right edge. */
details.dropdown.forum-menu { margin: 0; width: auto; }
details.dropdown.forum-menu > summary { width: auto; }
details.dropdown.forum-menu > summary + ul { left: auto; right: 0; width: max-content; min-width: 12rem; max-width: calc(100vw - 2rem); }
/* Phone layout A (mockup "Forum na telefonie"): actions in one icon row, moderation and rare actions in
   one "..." menu (details.kebab), labels only from 641 px up (.sm-full). */
.head-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.head-row h1 { margin: 0; }
.ibtn-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; }
.ibtn-row form { margin: 0; }
.ibtn { position: relative; margin: 0; gap: 0.4rem; display: inline-flex; align-items: center; justify-content: center; width: auto; }
.ibtn .badge { margin: 0; }
details.dropdown.forum-menu.kebab > summary { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; }
details.dropdown.forum-menu.kebab > summary::after { display: none; }
details.dropdown.forum-menu.kebab > summary + ul { width: min(16rem, calc(100vw - 2rem)); min-width: 0; white-space: normal; }
details.forum-menu.kebab ul li a, details.forum-menu.kebab ul li .menu-btn { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; min-height: 2.5rem; width: 100%; margin: 0; padding: 0 0.5rem; border: 0; background: none; color: inherit; text-align: left; font-size: inherit; font-weight: inherit; }
details.forum-menu.kebab ul li form { margin: 0; }
details.forum-menu.kebab ul li .danger, details.forum-menu.kebab ul li a.danger { color: var(--portal-bad, #ff6b6b); }
.forum-thread-menu { flex: none; }
.forum-search button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
@media (max-width: 640px) {
  .ibtn { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; }
  .ibtn .badge { position: absolute; top: -0.3rem; right: -0.3rem; }
  .forum-search [role="group"] button { width: 2.75rem; min-width: 2.75rem; padding: 0; flex: none; }
  details.dropdown.forum-menu.kebab > summary { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  details.forum-menu.kebab ul li a, details.forum-menu.kebab ul li .menu-btn { min-height: 2.75rem; }
}
/* Desktop layout (mockup "Forum na komputerze"): compact 34 px buttons (px, not rem: Pico's root font grows to 20 px on wide screens) as one toolbar, a two-column header
   (title left, tools right) and a post in two columns (author left, text right). Phones keep layout A above. */
@media (min-width: 641px) {
  .forum-top .ibtn, .forum-thread-head .cbtn, .page-header .actions .cbtn { height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; font-weight: 600; line-height: 1; border-radius: 0.5rem; gap: 6px; white-space: nowrap; width: auto; margin: 0; display: inline-flex; align-items: center; }
  .forum-top .ibtn .icon, .cbtn .icon { width: 16px; height: 16px; }
  .forum-top .ibtn .badge { padding: 1px 7px; font-size: 12px; }
  .forum-top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title actions" "meta search"; align-items: end; column-gap: 1.5rem; row-gap: 0.5rem; margin-bottom: 1rem; }
  .forum-top .page-header, .forum-top .head-row { display: contents; }
  .forum-top h1 { grid-area: title; margin: 0; }
  .forum-top .ibtn-row { grid-area: actions; justify-self: end; }
  .forum-top .meta { grid-area: meta; margin: 0; align-self: start; }
  .forum-top .forum-search { grid-area: search; justify-self: end; width: 20rem; max-width: 100%; margin: 0; }
  .forum-search input { height: 34px; min-height: 0; font-size: 14px; padding: 0 13px; }
  .forum-search [role="group"] button { height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; }
  .forum-search [role="group"] button .icon { width: 16px; height: 16px; }
  /* thread header: title left, Odpowiedz and the moderation menu right, details below */
  .forum-thread-head { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "title reply menu" "meta meta meta"; align-items: center; column-gap: 0.5rem; }
  .forum-thread-head .head-row { display: contents; }
  .forum-thread-head h1 { grid-area: title; margin: 0; }
  .forum-thread-head .meta { grid-area: meta; margin: 0.15rem 0 0; }
  .forum-thread-head .actions { grid-area: reply; margin: 0; }
  .forum-thread-head .forum-thread-menu { grid-area: menu; }
  details.dropdown.forum-menu.kebab > summary { width: auto; min-width: 34px; height: 34px; min-height: 0; padding: 0 10px; gap: 6px; font-size: 14px; font-weight: 600; border-radius: 0.5rem; }
  details.dropdown.forum-menu.kebab > summary .icon { width: 16px; height: 16px; }
  details.forum-menu.kebab ul li a, details.forum-menu.kebab ul li .menu-btn { min-height: 38px; font-size: 14.5px; }
  /* post: author column left, text right */
  .forum-post { display: grid; grid-template-columns: 11rem minmax(0, 1fr); padding: 0; }
  .forum-post > .panel-head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 0.25rem; padding: 0.8rem 1rem; margin: 0; border-bottom: 0; border-right: 1px solid var(--portal-line); background: rgba(255, 255, 255, 0.02); border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius); }
  .forum-post > .panel-head small { font-size: 12.5px; line-height: 1.3; }
  .forum-post-main { padding: 0.8rem 1.1rem 0.5rem; min-width: 0; }
  .forum-post-main .rich > :last-child { margin-bottom: 0.4rem; }
  .forum-tools { margin-top: 0.3rem; font-size: 13px; gap: 0.2rem 0.9rem; }
  .forum-tools > a { min-height: 28px; }
  .forum-tools > a .icon { width: 15px; height: 15px; }
}
/* Pager with page numbers (the portal's other lists only have Nowsze / Starsze). */
.forum-pager { margin: 0 0 1rem; gap: 0.35rem; justify-content: flex-start; }
.forum-pager a[role="button"] { min-width: 2.5rem; }
.forum-pager a[aria-current="page"] { border-color: var(--pico-primary); color: var(--pico-primary); }
.forum-pager .gap { color: var(--pico-muted-color); padding: 0 0.2rem; }
/* Search results: one line between hits; <mark> takes the portal's mark colours. */
.forum-hits { list-style: none; padding: 0; margin: 0; }
.forum-hits > li { list-style: none; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--portal-line); }
.forum-hits > li:first-child { border-top: 0; padding-top: 0; }
.forum-hits p { margin: 0.3rem 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
/* Phone: every forum touch target is at least 44 px, also the small (.sm) moderator buttons. */
@media (max-width: 640px) {
  .forum-tools > a, .forum-tools .danger-link, .forum-tools button, .forum-tools .inline-form button.sm, .forum-tools summary, .forum-pager a[role="button"], .forum-mod .sm, .forum-mod .inline-form button.sm, .forum-mod .danger-link { min-height: 2.75rem; min-width: 2.75rem; }
  .forum-menu ul li a { min-height: 2.75rem; display: flex; align-items: center; }
  .forum-consents .mode-switch label { min-height: 2.75rem; }  /* the whole label toggles the switch */
}

/* ===== Czat (F-CHAT) ===== */
.chat { background: var(--portal-panel); border: 1px solid var(--portal-line); border-radius: .8rem .8rem 0 0; margin: 2rem 0 0; overflow: hidden; }
/* Pico redefines --pico-color on every button (dark "inverse" text for its orange fill), so the bar
   takes the page text colour with `inherit`, and drops Pico's outer focus ring (it showed as an orange
   arc under the bar after a click) for an inset ring that only appears for keyboard focus. */
.chat-head { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem 1rem; background: none; border: 0; border-radius: 0; color: inherit; text-align: left; cursor: pointer; }
.chat-head, .chat-head:hover, .chat-head:focus, .chat-head:active { box-shadow: none; }
.chat-head:hover { background: rgba(255, 255, 255, .04); }
.chat-head:focus-visible { box-shadow: inset 0 0 0 2px var(--pico-primary); }
.chat-head .chat-title { margin: 0; font-size: 1rem; font-weight: 700; }
.chat-head .grow { flex: 1; }
.chat-head .online, .dm-online { color: #7ee787; font-size: .8rem; }
.dm-online { font-weight: 400; white-space: nowrap; vertical-align: middle; }
.chat-head .online::before, .dm-online::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #3fb950; margin-right: .3rem; }
.chat-head .chev { transition: transform .15s; }
.chat.open .chev { transform: rotate(180deg); }
.chat-body { border-top: 1px solid var(--portal-line); }
.chat-body[hidden] { display: none; }
.chat-list { height: 20rem; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.chat-msg { max-width: 46rem; }
.chat-msg .meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-size: .78rem; color: var(--pico-muted-color); }
.chat-msg .who { font-weight: 650; color: #cdd3da; }
.chat-msg .txt { margin: .1rem 0 0; overflow-wrap: anywhere; }
.chat-msg.own .who { color: #ffb347; }
.chat-msg a { color: var(--pico-primary); }
.chat-new { align-self: center; }
.chat-new[hidden], .chat [data-chat-alert][hidden], .chat [data-chat-badge][hidden] { display: none; }
.chat-form { display: flex; gap: .5rem; align-items: stretch; padding: .6rem 1rem; border-top: 1px solid var(--portal-line); background: #181c20; position: relative; }
.chat-form textarea { margin: 0; flex: 1; resize: none; min-height: 2.6rem; max-height: 6rem; }
.chat-form button { margin: 0; width: auto; }
.chat-form .emoji-btn { padding: 0 .7rem; }
.emoji-pop { display: none; position: absolute; bottom: 100%; left: 1rem; background: var(--portal-panel); border: 1px solid var(--portal-line); border-radius: .6rem; padding: .4rem; gap: .2rem; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.emoji-pop.show { display: flex; }
.emoji-pop button { background: none; border: 0; font-size: 1.3rem; padding: .2rem .4rem; width: auto; margin: 0; cursor: pointer; }
.chat-online-list { padding: .4rem 1rem 0; font-size: .75rem; color: var(--pico-muted-color); background: #181c20; overflow-wrap: anywhere; }
.chat-foot { display: flex; justify-content: space-between; padding: 0 1rem .5rem; font-size: .75rem; color: var(--pico-muted-color); background: #181c20; }
.chat-actions { display: flex; gap: .75rem; font-size: .75rem; }
.chat-actions a { color: var(--pico-muted-color); }
.link-button { background: none; border: 0; padding: 0; width: auto; margin: 0; color: var(--pico-muted-color); font-size: .75rem; cursor: pointer; }
.chat-actions .link-button:hover, .chat-actions a:hover { text-decoration: underline; }
.chat-msg p.txt { white-space: pre-wrap; }
@media (max-width: 640px) { .chat.open { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; display: flex; flex-direction: column; } .chat.open .chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .chat.open .chat-list { flex: 1; height: auto; } }
dialog.chat-report article { max-width: 26rem; width: calc(100vw - 2rem); margin: 0; padding: 1.25rem; }
dialog.chat-report h3 { margin: 0 0 .8rem; font-size: 1.1rem; }
dialog.chat-report select, dialog.chat-report input { width: 100%; margin: 0 0 .8rem; }
dialog.chat-report .actions { margin-top: .4rem; }
/* Mentions (F-MENTION) */
.mention { color: #79c0ff; font-weight: 650; text-decoration: none; background: rgba(88, 166, 255, .12); border-radius: .3rem; padding: 0 .25rem; cursor: default; }
.mention:hover { background: rgba(88, 166, 255, .22); }
.mention.me { color: #ffb347; background: rgba(255, 159, 28, .16); }
.badge-mention { background: rgba(88, 166, 255, .16); color: #79c0ff; }
.badge-mention::before { content: "@"; font-weight: 800; }

/* F-MENTION: strona "Wzmianki" */
.mention-list { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.mention-item { display: grid; gap: .25rem; padding: .7rem .9rem; border: 1px solid var(--portal-line); border-radius: .7rem; background: #181c20; margin: 0; }
.mention-item.unread { border-left: 3px solid #58a6ff; }
.mention-item a.item-link { display: grid; gap: .25rem; color: inherit; text-decoration: none; }
.mention-item .top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .8rem; color: var(--pico-muted-color); }
.mention-item .top strong { color: #cdd3da; }
.mention-item .when { margin-left: auto; }
.mention-item p { margin: 0; overflow-wrap: anywhere; }

/* F-MENTION: nick suggestion list (forum/static/forum/mentions.js); chat: above the field inside the panel, forum editor: under the caret */
.suggest { list-style: none; margin: 0; padding: .3rem; width: min(22rem, 100%); background: var(--portal-panel); border: 1px solid var(--portal-line); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: .9rem; }
.suggest li { margin: 0; padding: 0; list-style: none; }
.suggest .grp { padding: .35rem .6rem .15rem; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pico-muted-color); }
.suggest .opt { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: .4rem; cursor: pointer; color: #cdd3da; }
.suggest .opt[aria-selected="true"], .suggest .opt:hover { background: rgba(255, 159, 28, .14); color: #fff; }
.suggest .opt b { color: #ffb347; font-weight: 700; }
.suggest .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3fb950; flex: none; }
.suggest .dot.off { background: transparent; border: 1px solid #5b6570; }
.suggest .hint { margin-left: auto; font-size: .72rem; color: var(--pico-muted-color); }
.suggest-foot { padding: .35rem .6rem .25rem; font-size: .72rem; color: var(--pico-muted-color); border-top: 1px solid var(--portal-line); margin-top: .2rem; }
.suggest .suggest-foot { position: sticky; bottom: 0; background: var(--portal-panel); }
.chat-form .suggest { position: absolute; left: 3.6rem; bottom: calc(100% + .35rem); z-index: 5; max-height: 17rem; overflow-y: auto; }
.suggest.suggest-float { position: fixed; z-index: 70; width: min(22rem, calc(100vw - 1rem)); max-height: min(18rem, 50vh); overflow-y: auto; }
@media (max-width: 640px) { .chat-form .suggest { left: .6rem; width: calc(100% - 1.2rem); } .suggest-foot { display: none; } }

/* Bulk entry add page (F-CMP-26): tick column and the selection bar */
.pick-col { width: 2.5rem; }
.pick-col input { margin: 0; }
.pick-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin: 0 0 1rem; }
.pick-bar .table-search { margin: 0; }
.pick-bar .count { font-weight: 700; }
.pick-bar [data-search-empty] { flex-basis: 100%; margin: 0; }

/* Import wizard (dataimport): steps, review rows, value mapping tables. */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.wizard-steps li { border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; padding: 0.15rem 0.75rem; font-size: 0.85rem; color: var(--pico-muted-color); list-style: none; margin: 0; }
.wizard-steps li.on { border-color: var(--pico-primary); color: var(--pico-primary); font-weight: 700; }
.wizard-steps li.done { color: #3fb950; }
.review-sum { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.review-row-off td { opacity: 0.55; }
.review-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--pico-primary); }
.review-row-err td:first-child { box-shadow: inset 3px 0 0 #f85149; }
.review-row-dup td:first-child { box-shadow: inset 4px 0 0 #f85149; }  /* the organizer has to decide (import step 4) */
.review-row-dup { background: rgba(255, 159, 28, 0.07); }
.substeps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0.5rem 0.7rem; list-style: none; border: 1px solid var(--pico-muted-border-color); border-radius: 0.6rem; }
.substeps li { margin: 0; padding: 0.15rem 0.6rem; border-radius: 1rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.substeps li + li::before { content: "\203A"; margin-right: 0.4rem; color: var(--pico-muted-border-color); }
.substeps li a { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.substeps .n { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px dashed var(--pico-muted-border-color); font-size: 0.75rem; }
.substeps li.on { color: var(--pico-primary); font-weight: 700; background: rgba(255, 159, 28, 0.1); }
.substeps li.on .n { border: 1px solid var(--pico-primary); }
.substeps li.done { color: #3fb950; }
.substeps li.done .n { border: 1px solid #3fb950; background: #3fb950; color: #0d1117; }
@media (max-width: 639px) {
  .substeps { gap: 0.2rem; padding: 0.4rem; }
  .substeps li { padding: 0.1rem 0.35rem; }
  .substeps li::before { display: none; }
  .substeps li:not(.on) .lbl, .substeps li:not(.on) .badge { display: none; }
}
.review-row select.needs-choice, .review-row-dup select { box-shadow: 0 0 0 2px var(--pico-primary); }
.review-row select { margin: 0.25rem 0 0; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.review-row small { color: var(--pico-muted-color); }
.review-row small:not(.sm-only) { display: block; }  /* .sm-only keeps its own display rule */
.map-table td select { margin: 0; }
.wizard-steps li a { color: inherit; text-decoration: none; }
.wizard-steps li a:hover { text-decoration: underline; }

/* Gallery camera next to a competition name (list cards, calendar rows) */
.gal-ico { display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem; font-size: .85rem; font-weight: 400; text-decoration: none; vertical-align: middle; color: var(--pico-muted-color); }
.gal-ico:hover { color: var(--pico-primary); }
.gal-ico svg { width: 1.1em; height: 1.1em; }
.disc-ico { display: inline-flex; align-items: center; margin-left: .5rem; text-decoration: none; vertical-align: middle; color: var(--pico-muted-color); }
.disc-ico:hover { color: var(--pico-primary); }
.disc-ico svg { width: 1.1em; height: 1.1em; }

/* Password rules under the password forms (core/static/core/password-rules.js). */
.password-rules { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.85em; color: var(--pico-muted-color); }
.password-rules li::before { content: "\25CB\00a0"; }
.password-rules li.ok { color: var(--portal-ok); }
.password-rules li.ok::before { content: "\2713\00a0"; }

/* ---- Shared rides (rides app): offer cards, seat dots, cost table, form grid ---- */
.ride-card { border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.8rem 1rem; margin: 0.8rem 0; }
.ride-card h3 { margin: 0 0 0.2rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.ride-route { margin: 0.2rem 0 0.5rem; overflow-wrap: anywhere; }
.ride-seats { display: inline-flex; gap: 0.25rem; vertical-align: middle; margin-left: 0.4rem; }
.ride-seats i { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--portal-ok); display: inline-block; }
.ride-seats i.on { background: var(--portal-ok); }
.ride-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; align-items: start; }
.ride-col > :first-child { margin-top: 0; }
.ride-cols.ride-cols-single { grid-template-columns: 1fr; }
@media (max-width: 800px) { .ride-cols { grid-template-columns: 1fr; } }
.ride-cost { width: 100%; font-size: 0.9rem; margin-bottom: 0.4rem; }
.ride-cost td, .ride-cost th { padding: 0.25rem 0.5rem; }
.ride-req { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--portal-line); flex-wrap: wrap; overflow-wrap: anywhere; }
.ride-requests { margin-top: 0.6rem; }
.ride-map .map-canvas { height: 18rem; border-radius: 0.5rem; }
.ride-map .map-canvas[hidden] { display: none; }
.ride-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
@media (max-width: 640px) { .ride-form-grid { grid-template-columns: 1fr; } }
.ride-field-error { display: block; color: var(--portal-bad); margin-top: -0.5rem; margin-bottom: 0.75rem; }
.range-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .range-grid { grid-template-columns: 1fr; } }
.range-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.range-photos img { width: 100%; height: 7rem; object-fit: cover; border-radius: 0.5rem; display: block; }
.range-facts { list-style: none; padding: 0; margin: 0.6rem 0; }
.range-facts li { padding: 0.3rem 0; border-top: 1px solid var(--portal-line); display: flex; justify-content: space-between; gap: 1rem; }
.range-ok { color: var(--portal-ok); }
.range-no { color: var(--pico-muted-color); }
.range-remove { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.range-remove label { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.range-remove img { width: 5rem; height: 4rem; object-fit: cover; border-radius: 0.4rem; }
.range-queue-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--portal-line); flex-wrap: wrap; }
.range-queue-item .actions { align-items: center; }
.range-queue-item input[name="reason"] { margin: 0; width: 14rem; max-width: 100%; }

/* Compact "+1" pill on range meetings (venues/_interest_button.html): icon and count on one line; filled when the viewer clicked. */
.range-meet { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem 0; }
.range-meet > span:first-child { min-width: 0; }
.range-count { display: inline-flex; align-items: center; gap: .4rem; flex: none; white-space: nowrap; }
.plus-one { display: inline-flex; align-items: center; gap: .3rem; width: auto; margin: 0; padding: .15rem .55rem .15rem .35rem; font-size: .85rem; line-height: 1.2; white-space: nowrap; background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); border-radius: 999px; }
.plus-one svg { width: 1.15rem; height: 1.15rem; }
.plus-one output { font-weight: 600; }
button.plus-one:hover { color: var(--pico-primary); border-color: var(--pico-primary); }
button.plus-one.is-on { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); }
/* Home "Ostatnie wyniki": row link plus the gallery icon beside it (no link inside a link). */
.mini-item { display: flex; align-items: center; }
.mini-item .mini-row { flex: 1; min-width: 0; }
.mini-item .gal-ico { margin: 0 .4rem; flex: none; }
.mini-item .disc-ico { margin: 0 .4rem; flex: none; }

/* Push notifications panel in the account settings (F-PUSH) */
.switch-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--portal-line); flex-wrap: wrap; }
.switch-line:first-of-type { border-top: 0; }
.switch-line small { display: block; color: var(--pico-muted-color); }
.switch-line label { margin: 0; }
.ios-note { background: var(--portal-panel); border: 1px dashed var(--tier-accent); border-radius: 0.6rem; padding: 0.7rem 0.9rem; font-size: 0.88rem; }
.ios-steps { margin: 0.4rem 0 0.4rem; padding-left: 1.2rem; }
.js .no-js-only { display: none; }
button.watching, button.secondary.outline.watching { color: #ffb347; border-color: #ffb347; background: rgba(255, 159, 28, 0.12); }
.watch-hint { align-self: center; }
.watch-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.watch-list li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; justify-content: space-between; padding: 0.25rem 0; }

/* Forum: every button next to a page title (header actions, "Oznacz wszystko", per-row "Oznacz jako nieprzeczytany") is
   as compact as "Nowy wątek" (.cbtn): Pico's full-size buttons did not fit the toolbar. 34 px from 641 px (px, not rem: Pico's
   root font grows to 20 px on wide screens), 44 px touch targets on a phone. */
main.forum :is(.page-header .actions, .page-header > .inline-form, .subnav-bar > .inline-form, .forum-table .inline-form) :is(button, a[role="button"]) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; min-height: 2.75rem; padding: 0 0.9rem; font-size: 0.9rem; font-weight: 600; line-height: 1; white-space: nowrap; }
main.forum :is(.page-header .actions, .page-header > .inline-form, .subnav-bar > .inline-form, .forum-table .inline-form) :is(button, a[role="button"]) .icon { width: 16px; height: 16px; }
main.forum .page-header .actions form { margin: 0; }
@media (min-width: 641px) {
  main.forum :is(.page-header .actions, .page-header > .inline-form, .subnav-bar > .inline-form, .forum-table .inline-form) :is(button, a[role="button"]) { height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; border-radius: 0.5rem; }
}

/* Summary sums (F-SCO-SUM): number field inside a table cell */
/* Pico styles `input:not([type=...])` with higher specificity, so the field is scoped to the table. */
.data-table .sum-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; white-space: nowrap; }
.data-table input.sum-input { width: 5rem; height: 2.75rem; margin: 0; padding: 0 0.5rem; text-align: right; }
.data-table .sum-cell small { margin: 0; line-height: 1; white-space: nowrap; }
.data-table small.field-error { display: block; color: var(--portal-bad); }
@media (max-width: 640px) { .data-table input.sum-input { width: 3.6rem; padding: 0 0.4rem; } .data-table .sum-cell { gap: 0.25rem; } }

/* Forum order editor (forum/_reorder.html, forum/static/forum/reorder.js). */
.reorder-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.reorder-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: 0.5rem; background: var(--pico-card-background-color); cursor: grab; }
.reorder-item.dragging { opacity: 0.5; }
.reorder-grip { color: var(--pico-muted-color); letter-spacing: -0.15em; user-select: none; }
.reorder-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reorder-moves { display: inline-flex; gap: 0.25rem; }
.reorder-moves button { width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.reorder .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* The logged-in athlete on the results page: target on the podium and in the table (variant D, mockup 2026-10-22). */
table.data-table tr.me td { background: rgba(88, 166, 255, 0.1); }
table.data-table tr.me .nm { color: var(--portal-info); font-weight: 700; }
table.data-table tr.me td:nth-child(2) .icon { color: var(--portal-info); }
.podium .step.me { --c: var(--portal-info); }
.podium .step.me .who b, .podium .step.me .who .here { color: var(--portal-info); }
.podium .who .here { font-size: 0.8rem; font-weight: 700; }
.podium .step.me .disc::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--portal-info); animation: podium-me 1.8s ease-out infinite; }
@keyframes podium-me { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .podium .step.me .disc::before { animation: none; opacity: 0.6; } }

/* Profile: achievements and stance form (F-STA, specs/2026-10-22-profil-wskazniki) */
.pf-ach-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .9rem; }
.pf-ach-tiles .pf-tile { text-align: center; padding: .6rem .3rem; }
.pf-ach-tiles .pf-big { font-size: 1.5rem; }
.pf-series { border-top: 1px solid var(--portal-line); padding-top: .75rem; display: grid; gap: .1rem; }
.pf-series p { margin: 0; }
.pf-dots { display: flex; flex-wrap: wrap; gap: 3px; margin: .25rem 0 .55rem; }
.pf-dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--pico-secondary-border); }
.pf-dots i.on { background: var(--pico-primary); }
.pf-more { margin-top: .6rem; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.st-tile { background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: .6rem; padding: .8rem; min-width: 0; }
.st-tile.thin { opacity: .7; border-style: dashed; }
.st-tile h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin: 0 0 .1rem; font-size: 1rem; }
.st-tile p { margin: 0; }
.st-tile .pf-big { font-size: 2rem; }
.st-change { margin-top: .3rem !important; }
.st-thin { display: inline-block; font-size: .72rem; color: var(--portal-warn); border: 1px solid var(--portal-warn); border-radius: 999px; padding: 0 .55rem; }
.st-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--c); }
.sc-K { --c: var(--pico-primary); } .sc-S { --c: var(--portal-info); } .sc-D { --c: var(--portal-ok); } .sc-W { --c: var(--portal-forced); }
.st-chart-box { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--portal-line); }
.st-svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: .6rem; }
.st-svg:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.st-grid-line { stroke: var(--portal-line); stroke-width: 1; }
.st-ax { fill: var(--pico-muted-color); font-size: 11px; }
.st-line { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; }
.st-dot { fill: var(--c); stroke: var(--c); stroke-width: 1.6; }
.st-dot.low { fill: var(--pico-card-sectioning-background-color); }
.st-now { fill: var(--c); stroke: var(--pico-card-sectioning-background-color); stroke-width: 2; }
.st-cursor { stroke: var(--pico-color); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.st-readout { margin-top: .6rem; background: var(--pico-card-sectioning-background-color); border: 1px solid var(--portal-line); border-radius: .6rem; padding: .6rem .8rem; display: grid; gap: .3rem; min-height: 4.2rem; }
.st-rd-head { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.st-rd { display: grid; grid-template-columns: 8rem 4.5rem 1fr; gap: .5rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.st-empty { color: var(--pico-muted-color); border: 1px dashed var(--pico-secondary-border); border-radius: .6rem; padding: 1.2rem; text-align: center; margin: 0; }
#stance-toggles .chip { cursor: pointer; background: none; font: inherit; font-size: .85rem; }
#stance-toggles .chip[aria-pressed="false"] { opacity: .55; }
@media (max-width: 720px) { .st-grid { grid-template-columns: 1fr; } .st-rd { grid-template-columns: 1fr auto; } .st-rd .meta { grid-column: 1 / -1; } }
.pf-chips { flex-wrap: wrap; }
.st-tile .legend { margin: 0 0 .2rem; font-size: .78rem; }
.st-trend { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .75; }
.st-place { font-weight: 600; color: var(--pico-primary); }
/* Direct messages (F-DM): the conversation list reuses .chat-msg; .dm-write is the forum post link. */
.dm-list { display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; }
.dm-list .chat-msg { max-width: none; }
.dm-list .chat-msg .meta a { margin-left: auto; }
.dm-write { margin-left: .4rem; font-size: .8rem; font-weight: 400; white-space: nowrap; }
.dm-write .icon { width: .9rem; height: .9rem; vertical-align: -.1rem; margin-right: .2rem; }

/* Universal import (F-IMP) stage 1: sheet cards and rounds. */
.found-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 1rem; }
.found-card { border: 1px solid var(--pico-muted-border-color); border-radius: 0.6rem; padding: 0.8rem 1rem; background: var(--pico-card-background-color); min-width: 0; overflow-wrap: anywhere; }
.found-card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.found-card .why { font-size: 0.8rem; color: var(--pico-muted-color); margin: 0.25rem 0 0; }
.found-card ul.why { padding-left: 1.1rem; }
.found-card .parts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0.5rem 0 0; padding: 0; border: 0; font-size: 0.85rem; }
.found-card .parts label { margin: 0; display: flex; gap: 0.35rem; align-items: center; }
.found-card .parts input { margin: 0; }
.found-card.off { opacity: 0.6; }
/* No `display` here: `.sm-only` keeps its own rule (hidden above 640 px); flex only on phones. */
.round-cards { flex-direction: column; gap: 0.75rem; }
@media (max-width: 640px) { .sm-only.round-cards { display: flex; } }
.found-scroll { overflow-x: auto; max-width: 100%; }

/* NOWE: import, etap 2 (F-IMP §12, ruling 16): a list of columns, not a grid, so it fits a phone */
ul.import-columns { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
ul.import-columns li { display: grid; gap: 0.25rem; padding: 0.5rem 0.75rem; border: 1px solid var(--portal-line); border-radius: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
ul.import-columns li select { margin: 0; }
ul.import-columns .col-head { min-width: 0; }
table.import-sheets td, table.import-sheets th { overflow-wrap: anywhere; }
.inline-check { display: inline-flex; margin: 0; }
.inline-check input { margin: 0; }

/* NOWE: import, etap 2 (F-IMP §12, ruling 16): the review table becomes cards on phones */
@media (max-width: 639.98px) {
  table.import-review thead { display: none; }
  table.import-review tr { display: grid; gap: .25rem; padding: .6rem .75rem; border: 1px solid var(--portal-line); border-radius: .5rem; margin-bottom: .5rem; }
  table.import-review td { display: flex; justify-content: space-between; gap: .5rem; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  table.import-review td[data-label]::before { content: attr(data-label); color: var(--pico-muted-color); }
}

/* NOWE: import, etap 3 (F-IMP §13, ruling 20): the shot grid wraps, never scrolls sideways */
.shot-grid { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.shot-grid .station { display: flex; gap: .15rem; padding-right: .5rem; border-right: 1px solid var(--portal-line); }
.shot-grid .shot { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.shot-grid .shot b { display: block; }
.shot-grid .shot.off { text-decoration: line-through; opacity: .6; }
.shot-grid .shot.edited { outline: 1px dashed var(--pico-primary); }
.shot-grid .shot.bad { color: var(--pico-del-color); }
ul.shot-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; list-style: none; padding: 0; }
@media (max-width: 639.98px) {
  table.import-review td:has(> details) { flex-wrap: wrap; }
  table.import-review td > details { flex: 1 1 100%; min-width: 0; }
  table.import-review td:has(select, input) { flex-wrap: wrap; }
  table.import-review td select, table.import-review td input { flex: 1 1 8rem; min-width: 0; max-width: 100%; }
}

/* NOWE: import, jeden kreator: the manual-setup preview shows only filled cells on phones */
table.import-review tr.caption-row td { color: var(--pico-muted-color); font-style: italic; }
@media (max-width: 639.98px) {
  table.import-review td.empty { display: none; }
}

/* NOWE: import, etap 5 */
pre.ai-request, pre.ai-system { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; font-size: .8rem; }
.ai-proposal dd ul { margin: 0; padding-left: 1.1rem; }

/* Cycle state on the cycle tiles: pulsing dot while in progress, thin progress bar */
.cycle-state { margin-top: 0.5rem; }
.progress { height: 0.35rem; border-radius: 99px; background: #2a3037; overflow: hidden; margin-top: 0.6rem; }
.progress > span { display: block; height: 100%; background: #79c0ff; border-radius: 99px; }
.progress.done > span { background: #5d6672; }
.live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #79c0ff; display: inline-block; animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(121, 192, 255, 0.6); } 100% { box-shadow: 0 0 0 0.5rem rgba(121, 192, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Cycle page: the buttons to the days of a collapsed cycle (F-CMP-31), a plain row (not a Pico nav). */
.season-parts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.season-parts a[role="button"] { width: auto; margin: 0; }

/* Rangi zawodów i hashtagi (F-CMP-32) */
:root { --t-ms: #f5c542; --t-me: #58a6ff; --t-mk: #ff9f1c; --t-lok: #8593a1; }
.rank { --c: var(--t-lok); display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.55rem; width: auto; min-height: 0; margin: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.rank i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); }
button.rank { cursor: pointer; }
button.rank:hover, a.rank.on { background: color-mix(in srgb, var(--c) 28%, transparent); }
.r-ms { --c: var(--t-ms); } .r-me { --c: var(--t-me); } .r-mk { --c: var(--t-mk); } .r-lok { --c: var(--t-lok); }
.cc { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0 0.4rem; border-radius: 0.3rem; background: var(--portal-line); color: var(--pico-color); }
.ht { font: inherit; font-size: 0.78rem; color: var(--pico-muted-color); background: none; border: 0; padding: 0.1rem 0.15rem; text-decoration: none; width: auto; margin: 0; }
.ht:hover { color: var(--pico-primary); }
.hts { display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; margin-top: 0.2rem; }
/* Chips of years and ranks on /zawody/: one line, a rank chip in the colour of its rank */
.year-rank-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.chip-sep { width: 1px; height: 1.2rem; background: var(--portal-line); margin: 0 0.2rem; }
.filter-chips .chip.rank { text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; font-size: 0.75rem; border-color: color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.filter-chips .chip.rank.on { background: color-mix(in srgb, var(--c) 28%, transparent); border-color: var(--c); }
.filter-chips .chip.rank i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); display: inline-block; }
.year-rank-chips .chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; box-sizing: border-box; }
.year-rank-chips .chip .n { min-width: 1.4rem; text-align: center; box-sizing: border-box; }
/* Cycle tiles: one size for all (a long name is cut with an ellipsis, the full one is in the title) */
/* auto-fill, not auto-fit: a lone tile keeps the width it has among many */
.season-tiles { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-auto-rows: 1fr; }
.season-tiles .tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.season-tiles .tile-pill { display: flex; align-items: center; gap: 0.3rem; max-width: 100%; min-width: 0; }
.season-tiles .tile-pill .cycle-pill { margin: 0.15rem 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-tiles .tile-pill .badge { flex: none; }
.season-tiles .tile .progress { width: 100%; }
.champ-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.6rem 0; margin: 0; border: 0; border-top: 1px solid var(--portal-line); border-radius: 0; background: transparent; box-shadow: none; }
.champ-row:first-of-type { border-top: 0; }
.champ-body h3 { margin: 0; font-size: 1rem; }

/* Mistrzostwa cards (2026-10-29, layout B): a coloured edge by rank, the days of a cycle as a list with their
   descriptions (SeasonPart.label); on a phone the list opens with the days button, without JavaScript it is open. */
.filter-group-label { margin: 0.2rem 0 0.3rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); }
.filter-panel .filter-chips { flex-wrap: wrap; overflow-x: visible; margin-bottom: 0.6rem; }
/* Tile grid (2026-10-30): like the cycle tiles, auto-fill; 19 rem fits the longest title in two lines, so 3 columns at 1130-1200 px, 4 at 1450 px. */
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.9rem; }
.champ-card { position: relative; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.85rem 3rem 0.8rem 1rem; margin: 0; border-top: 4px solid var(--c, var(--t-lok)); }
.champ-card h4 { margin: 0; font-size: 1.02rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0.2rem 0 0; }
.cc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem; margin-top: 0.3rem; font-size: 0.84rem; color: var(--pico-muted-color); }
.cc-sub .dot { opacity: 0.5; }
.icon-btn-sm { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--pico-secondary-border); border-radius: 0.5rem; background: none; color: var(--pico-muted-color); text-decoration: none; }
.icon-btn-sm::after { content: ""; position: absolute; inset: -0.4rem; }
.icon-btn-sm:hover, .icon-btn-sm:focus-visible { color: var(--pico-primary); border-color: var(--pico-primary); }
.cc-days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0.5rem 0 0; padding: 0.2rem 0 0; border-top: 1px solid var(--portal-line); list-style: none; }
.cc-days li { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 0.35rem 0; list-style: none; }
.cc-days a { font-weight: 650; }
.cc-dd { color: var(--pico-muted-color); font-size: 0.82rem; white-space: nowrap; }
.cc-dsc { display: inline-flex; gap: 0.25rem; } /* the discipline right after the date */
.cc-foot { margin-top: auto; padding-top: 0.45rem; }
.cc-days-toggle { display: none; }
@media (max-width: 640px) {
  .champ-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .champ-card { padding: 0.65rem 3rem 0.65rem 0.75rem; }
  .js .cc-days-toggle { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.1rem; margin: 0; width: auto; border: 0; background: none; box-shadow: none; color: var(--pico-primary); font-size: 0.86rem; font-weight: 650; }
  .champ-card.open .cc-days-toggle .icon { transform: rotate(180deg); }
  .js .champ-card:not(.open) .cc-days { display: none; }
  .cc-days li { min-height: 2.75rem; align-items: center; }
}

/* Target generator (targets app) */
.tgt-layout { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .tgt-layout { grid-template-columns: 1fr; } }
.dist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-bottom: 1rem; }
.dist-grid label { border: 1px solid var(--portal-line, #3a414a); border-radius: .4rem; padding: .35rem; text-align: center; font-size: .85rem; margin: 0; }
.dist-grid label:has(input:checked) { border-color: var(--pico-primary); background: rgba(255, 159, 28, .12); }
.dist-grid input { position: absolute; opacity: 0; pointer-events: none; }
.print-tip { border-left: 3px solid var(--pico-primary); padding: .5rem .8rem; font-size: .85rem; margin: 1rem 0; background: rgba(255, 159, 28, .08); border-radius: 0 .4rem .4rem 0; }
.print-tip strong { display: block; margin-bottom: .2rem; }
.tgt-preview svg { display: block; max-width: 100%; height: auto; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }

/* Dimension menu ("Grupuj: Typ"): a chip in the filter row that opens a short list. */
.dim-menu { position: relative; margin: 0; padding: 0; }
.filters-row.fchips > details { margin: 0; }
.dim-menu > summary.dim-chip { display: inline-flex; align-items: center; gap: 0.35rem; box-sizing: border-box; width: auto; margin: 0; min-height: calc(0.85rem * 1.5 + 0.4rem + 2px); padding: 0.2rem 0.75rem; font-size: 0.85rem; font-weight: 400; line-height: 1.5; border: 1px solid var(--pico-primary); border-radius: 999px; color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); cursor: pointer; list-style: none; white-space: nowrap; }
.dim-menu > summary.dim-chip::after, .dim-menu > summary.dim-chip::marker { display: none; content: none; }
.dim-menu > summary.dim-chip::-webkit-details-marker { display: none; }
.dim-menu > summary .caret { font-size: 0.7rem; opacity: 0.8; }
.dim-menu[open] > summary.dim-chip { background: rgba(255, 159, 28, 0.22); }
.dim-menu .menu { position: absolute; z-index: 10; left: 0; max-width: calc(100vw - 2rem); top: calc(100% + 0.3rem); min-width: 15rem; background: #1d2126; border: 1px solid #3a414a; border-radius: 0.6rem; padding: 0.3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.dim-menu .menu a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.7rem; border-radius: 0.4rem; color: var(--pico-color); text-decoration: none; font-size: 0.9rem; }
.dim-menu .menu a:hover { background: #2a3037; }
.dim-menu .menu a[aria-current] { color: var(--pico-primary); font-weight: 700; }
.dim-menu .menu hr { margin: 0.3rem 0; border-color: #2a3037; }
.dim-menu .menu small { display: block; padding: 0.3rem 0.7rem 0; font-size: 0.72rem; color: #8b949e; }

/* Strzelnice: rząd przycisków zawsze w jednej linii (także na telefonie 320 px) */
.actions.one-line { flex-wrap: nowrap; }
.actions.one-line :is(a[role="button"], button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; height: 34px; min-height: 0; padding: 0 13px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 0.5rem; }
.actions.one-line .grow { flex: 1 1 0; min-width: 0; }
@media (min-width: 640px) { .actions.one-line .grow { flex: 0 0 auto; } }
.count-pill { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; text-align: center; line-height: 1.3rem; }
.count-pill.hot { background: #ff9f1c; color: #15181c; }

/* Organization list: one "Add" menu on the heading line (details.dropdown, works without JS). */
.page-header.page-header-row { flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; }
.add-menu { position: relative; margin: 0; flex: none; }
.add-menu > summary, a[role="button"].add-single { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 34px; min-height: 0; margin: 0; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 0.5rem; list-style: none; }
.add-menu > summary::after { margin: 0 0 0 2px; }
.add-menu > ul { right: 0; left: auto; inset-inline: auto 0; min-width: 14rem; margin-top: 0.3rem; z-index: 20; }
/* Pico's `details.dropdown summary + ul` (left-aligned) is more specific: pin the list to the button's right edge. */
details.dropdown.add-menu > summary + ul { position: absolute; left: auto; right: 0; inset-inline: auto 0; width: max-content; min-width: 14rem; max-width: calc(100vw - 2rem); }
.add-menu > ul li a { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.add-menu > ul li a small { display: block; color: var(--pico-muted-color); font-size: 0.75rem; }
.ath-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ath-cell a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ath-cell .flag { width: 20px; height: 15px; border-radius: 2px; flex: none; }
/* Avatar next to a name ({% avatar %}): the picture or coloured initials, 32 px circle. */
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--portal-line); }
.avatar.ini { display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 700; line-height: 1; color: #0d1117; }
.av-c0 { background: #ff9f1c; }
.av-c1 { background: #7aa2f7; }
.av-c2 { background: #4ade80; }
.av-c3 { background: #f472b6; }
.av-c4 { background: #c4b5fd; }
.av-c5 { background: #fbbf24; }
/* No `display` on .ath-markers: `.sm-only` keeps its own rule (hidden above 640 px); flex only on phones. */
@media (max-width: 640px) { .ath-markers.sm-only { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; overflow-wrap: anywhere; } }
.ath-markers > span + span::before { content: "\b7"; margin: 0 0.35rem; }
/* The PFTA pill is a marker like the others: no separator dot inside it, compact padding, no extra margins. */
.ath-markers > .badge { margin: 0 0.1rem; padding: 0.05rem 0.4rem; line-height: 1.3; }
.ath-markers > .badge::before { content: none; margin: 0; }
.ath-markers > .badge + span::before { margin-left: 0.25rem; }


/* NOWE: import, porządki widoku (2026-10-31): two columns, the step 5 icons, the review switch */
.import-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.import-cols > .panel { margin: 0; }
.import-cols > .panel:only-child { grid-column: 1 / -1; }
.import-cols > table { margin: 0; }
@media (max-width: 1099.98px) { .import-cols { grid-template-columns: 1fr; } }
.row-ok { color: #3fb950; }
.row-warn { color: #e3b341; }
.row-ok .icon, .row-warn .icon { width: 1.1rem; height: 1.1rem; vertical-align: -0.2rem; }
.switch-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.switch-row input { margin: 0; }

/* NOWE: import, krok 2 (2026-10-31): sheets as rows, read-only chips, side column */
.found-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.found-cols > .panel, .found-cols .side > .panel { margin: 0; }
.found-cols .side { display: grid; gap: 1rem; }
@media (max-width: 899.98px) { .found-cols { grid-template-columns: 1fr; } }
.sheet-rows { display: grid; gap: 0.6rem; }
.found-card.sheet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.8rem; }
.sheet-row .head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.sheet-row .head h3 { margin: 0; }
.sheet-row .facts { color: var(--pico-muted-color); font-size: 0.85rem; margin: 0.25rem 0 0; }
.sheet-row .notes { color: var(--pico-muted-color); font-size: 0.8rem; margin: 0.25rem 0 0; padding-left: 1rem; }
.sheet-row .tools { display: flex; gap: 0.35rem; align-items: start; }
.sheet-row .tools a[role="button"], .sheet-row .tools button { margin: 0; width: 2.2rem; height: 2.2rem; padding: 0; display: inline-grid; place-items: center; }
.sheet-row .tools form { margin: 0; }
.sheet-row .chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.25rem 0 0; grid-column: 1 / -1; }
.sheet-row .chips .lbl { font-size: 0.75rem; color: var(--pico-muted-color); align-self: center; margin-right: 0.2rem; }
.sheet-chip { font-size: 0.75rem; padding: 0.1rem 0.55rem; border-radius: 1rem; border: 1px solid var(--portal-line); color: var(--pico-muted-color); opacity: 0.7; }
.sheet-chip.on { opacity: 1; color: var(--pico-primary); border-color: var(--pico-primary); background: rgba(255, 159, 28, 0.1); font-weight: 700; }

/* NOWE: import, krok 3 (2026-10-31): three columns, the name order and the results stacked */
.import-stack { display: grid; gap: 1rem; align-content: start; }
.import-stack > .panel { margin: 0; }
@media (min-width: 1200px) { .import-cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 800px) and (max-width: 1199.98px) { .import-cols.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
hr.import-sep { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--portal-line); }

/* Invitations (F-INV): owner screen */
.invite-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) { .invite-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.invite-grid > .panel { margin: 0; display: flex; flex-direction: column; }
.invite-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
.invite-row2 label { margin: 0; }
@media (max-width: 519.98px) { .invite-row2 { grid-template-columns: minmax(0, 1fr); } }
.invite-seg { border: 0; padding: 0; margin: 0.6rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.invite-seg legend { flex: 0 0 100%; padding: 0; margin: 0 0 0.3rem; font-size: 0.9rem; }
.invite-seg label { margin: 0; border: 1px solid var(--portal-line); border-radius: 0.6rem; padding: 0.45rem 0.8rem; display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.invite-seg label:has(input:checked) { border-color: #ff9f1c; background: rgba(255, 159, 28, 0.08); }
.invite-seg input { margin: 0; }
.invite-format { margin-top: 0; }
.invite-toggles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.8rem; margin: 0.2rem 0 1rem; }
.invite-toggles label { margin: 0; display: flex; gap: 0.6rem; align-items: center; }
.invite-toggles input { margin: 0; }
.invite-locked input, .invite-locked select { opacity: 0.6; }
.invite-locked .invite-seg label { opacity: 0.6; cursor: default; }
/* the preview grows to fill the free height of the (equal-height) panel: the biggest square that fits */
.invite-pv { flex: 1; min-height: 20rem; display: grid; place-items: center; container-type: size; }
.invite-frame { position: relative; overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); border-radius: 0.5rem; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); display: grid; place-items: center; }
/* portrait card: the largest 9:16 rectangle that fits the same wrapper; the panels keep their height */
.invite-pv[data-format="pion"] .invite-frame { height: min(100cqh, calc(100cqw * 16 / 9)); width: auto; aspect-ratio: 9 / 16; }
@media (max-width: 899.98px) { .invite-pv[data-format="pion"] { min-height: 28rem; } }
/* an outdated image of the other shape is cropped to the selected frame, never overflows it */
.invite-frame .invite-preview { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; object-position: center top; border-radius: 0.5rem; background: #161b22; }
.invite-preview[hidden], .invite-stamp[hidden] { display: none; }
.invite-stamp { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 1rem; border: 1px solid #ff9f1c; color: #ff9f1c; background: rgba(13, 17, 23, 0.7); }
.invite-nojs { text-align: center; }
.invite-nojs[hidden] { display: none; }
.invite-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; background: #161b22; border: 1px dashed var(--portal-line); border-radius: 0.5rem; }
.invite-ph p { margin: 0; }
.invite-ph[hidden], .invite-loader[hidden] { display: none; }
.invite-loader { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 17, 23, 0.6); border-radius: 0.5rem; }
.invite-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid rgba(255, 159, 28, 0.25); border-top-color: #ff9f1c; animation: invite-spin 0.8s linear infinite; }
@keyframes invite-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .invite-spinner { animation: none; border-style: dotted; border-color: #ff9f1c; } }
.invite-frame .invite-preview.is-outdated { opacity: 0.45; }
.invite-pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 0.8rem; }
.invite-pv-actions[hidden] { display: none; }
.invite-pv-actions button { margin: 0; width: auto; }
.invite-outdated { margin: 0; }
.invite-outdated[hidden] { display: block; visibility: hidden; }
.invite-switches { display: flex; flex-wrap: wrap; column-gap: 1.2rem; }
.invite-switches .invite-seg { margin-top: 0; }
.invite-card-panel .actions { margin-top: 1rem; }
.invite-card-panel .actions.invite-row { margin-top: 0.6rem; }
.invite-card-panel .actions.invite-row > * { margin-bottom: 0; }
.invite-summary { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; margin: 0 0 1rem; }
.invite-summary dt { color: #8b949e; }
.invite-summary dd { margin: 0; overflow-wrap: anywhere; }
.inv-table td, .inv-table th { vertical-align: middle; }
.inv-table .acts { white-space: nowrap; text-align: right; }
.inv-table .acts a, .inv-table .acts button { margin: 0; width: auto; }
.inv-table .acts form { display: inline; }
.inv-table .who small { display: block; color: #8b949e; }
.inv-lang { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.page-header-row > a.header-action { margin: 0; width: auto; }
@media (max-width: 639.98px) { .page-header.page-header-row > a.header-action { align-self: flex-start; } }
.inv-pill { font-size: 0.75rem; padding: 0.05rem 0.5rem; border: 1px solid #2a3037; border-radius: 1rem; color: #8b949e; white-space: nowrap; }
.inv-pill.warn { color: #ff9f1c; border-color: rgba(255, 159, 28, 0.5); }
.inv-cards { gap: 0.6rem; }
@media (max-width: 640px) { .sm-only.inv-cards { display: grid; } }
.inv-card-row { border: 1px solid #2a3037; border-radius: 0.6rem; padding: 0.7rem 0.9rem; display: grid; gap: 0.3rem; }
.inv-card-row .actions { margin-top: 0.3rem; }

/* Migracja: import checklist (tracker, F-TRK), compact table with one actions menu per cell */
.nt-table { font-size: 0.8rem; }
.nt-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.45rem; }
.nt-table td { padding: 0.15rem 0.45rem; vertical-align: middle; white-space: nowrap; line-height: 1.2; }
.nt-table td.nt-ok { background: color-mix(in srgb, #3fb950 16%, transparent); }
.nt-table td.nt-prog { background: color-mix(in srgb, #facc15 14%, transparent); }
.nt-table td.nt-none { color: var(--pico-muted-color); }
.nt-name { font-weight: 700; }
.nt-table .badge { font-size: 0.72rem; padding: 0 0.35rem; font-variant-numeric: tabular-nums; }
.nt-who { color: #7ee787; font-size: 0.72rem; }
.nt-cell { display: flex; align-items: center; gap: 0.35rem; }
.nt-sp { flex: 1; }
.nt-table input.nt-note { margin: 0 !important; height: 1.5rem !important; min-height: 0 !important; padding: 0 0.45rem !important; font-size: 0.78rem !important; min-width: 9rem; width: 100%; }
.nt-ib { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--portal-line, #2a3037); border-radius: 0.35rem; background: none; color: var(--pico-muted-color); cursor: pointer; box-shadow: none; list-style: none; }
.nt-ib::-webkit-details-marker { display: none; }
.nt-ib .icon { width: 0.9rem; height: 0.9rem; }
.nt-ib:hover, .nt-ib:focus-visible, details[open] > .nt-ib { color: var(--pico-primary); border-color: var(--pico-primary); }
details.nt-dd { position: relative; display: inline-block; margin: 0; }
/* fixed (placed by tracker/menu.js): an absolute menu inside .table-wrap would stretch the table */
details.nt-dd .nt-menu { position: fixed; z-index: 30; min-width: 11.5rem; padding: 0.25rem; background: #1b2026; border: 1px solid var(--portal-line, #2a3037); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); font-size: 0.78rem; white-space: normal; text-align: left; }
/* Pico daje <details> margines i summary odstęp po otwarciu: to przesuwało wiersz */
details.nt-dd { margin: 0 !important; padding: 0; }
details.nt-dd > summary { margin: 0 !important; }
details.nt-dd > summary::after { display: none !important; }
.nt-menu button.nt-it { justify-content: flex-start; width: 100%; height: auto; line-height: 1.2; }
.nt-menu button.nt-it { padding: 0.15rem 0.5rem !important; min-height: 0 !important; font-size: 0.75rem !important; font-weight: 500 !important; line-height: 1.2 !important; border-radius: 0.3rem !important; gap: 0.4rem; }
.nt-menu select { height: 1.5rem !important; min-height: 0 !important; padding: 0 1.4rem 0 0.4rem !important; font-size: 0.75rem !important; line-height: 1.2 !important; border-radius: 0.3rem !important; background-position: right 0.4rem center !important; background-size: 0.7rem auto !important; }
.nt-menu form { margin: 0; }
.nt-selrow { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem; }
.nt-menu .nt-selrow select { flex: 1 1 auto; margin: 0 !important; width: auto !important; min-width: 0; }
/* Pico stretches form buttons to 100% */
.nt-selrow .nt-ib { flex: 0 0 1.5rem; width: 1.5rem !important; height: 1.5rem !important; padding: 0 !important; }
.nt-menu .nt-info { padding: 0.3rem 0.5rem; color: #9aa4af; font-size: 0.72rem; border-bottom: 1px solid var(--portal-line, #2a3037); margin-bottom: 0.2rem; }
.nt-menu button.nt-it { display: flex; align-items: center; gap: 0.45rem; width: 100%; margin: 0; padding: 0.3rem 0.5rem; border: 0; border-radius: 0.3rem; background: none; box-shadow: none; color: #cdd3da; font-size: 0.78rem; text-align: left; cursor: pointer; }
.nt-menu button.nt-it .icon { width: 0.85rem; height: 0.85rem; color: var(--pico-muted-color); }
.nt-menu button.nt-it:hover { background: #2a3037; }
.nt-menu button.nt-it.nt-danger, .nt-menu button.nt-it.nt-danger .icon { color: #ff7b72; }
.nt-menu select { font-size: 0.76rem; height: 1.6rem; padding: 0 0.4rem; margin: 0.25rem 0.25rem 0.1rem; width: calc(100% - 0.5rem); }
.nt-menu .nt-hist { padding: 0.3rem 0.5rem; font-size: 0.72rem; color: #cdd3da; border-top: 1px solid var(--portal-line, #2a3037); margin-top: 0.2rem; }
.nt-menu .nt-hist div { margin-top: 0.2rem; }
.nt-menu .nt-hist s { color: var(--pico-muted-color); }
.nt-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.8rem; color: var(--pico-muted-color); margin: 0.6rem 0 0; }
.nt-sw { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; vertical-align: -1px; margin-right: 0.3rem; }
.nt-sw-ok { background: color-mix(in srgb, #3fb950 45%, transparent); }
.nt-sw-prog { background: color-mix(in srgb, #facc15 45%, transparent); }
.nt-sw-none { background: #2a3037; }
details.nt-add { margin: 0.6rem 0 0 !important; }
.nt-add > summary { display: inline-flex !important; align-items: center; gap: 0.35rem; width: auto !important; margin: 0 !important; padding: 0.15rem 0.6rem !important; font-size: 0.75rem; line-height: 1.2; }
.nt-add > summary::after { display: none !important; }
.nt-add > summary .icon { width: 0.85rem; height: 0.85rem; }
.nt-add form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.nt-add label { margin: 0; font-size: 0.72rem; color: var(--pico-muted-color); }
.nt-add input, .nt-add select { height: 1.5rem !important; min-height: 0 !important; padding: 0 0.45rem !important; font-size: 0.75rem !important; margin: 0.15rem 0 0 !important; width: auto !important; min-width: 9rem; }
.nt-add select { padding-right: 1.4rem !important; background-position: right 0.4rem center !important; background-size: 0.7rem auto !important; }

/* Footer: download icons of the mobile app (Android active, iPhone disabled for now). */
.site-footer .app-icons { display: inline-flex; gap: 0.5rem; margin-left: auto; align-items: center; }
.site-footer .app-icons a,
.site-footer .app-icons span { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--portal-line); border-radius: 999px; }
.site-footer .app-icons .icon { width: 1.35rem; height: 1.35rem; }
.site-footer .app-icons a:hover { border-color: var(--pico-primary); }
.site-footer .app-icons a .icon { color: var(--pico-primary); }
.site-footer .app-icons .is-disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 640px) { .site-footer .app-icons { margin-left: 0; width: 100%; } }

/* ---- Help 2.0 topic pages (core/templates/core/help/topic.html); content classes come from docs/instrukcja/template.html ---- */
.help-topic { display: grid; gap: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.help-topic > *, .help-topic > .help-fragment > * { margin: 0; min-width: 0; }
.help-topic .help-fragment { display: contents; }
.help-topic h2, .help-topic h3 { margin: 0.4rem 0 0.2rem; scroll-margin-top: 4.5rem; }
.help-topic h3 { font-size: 1.1rem; color: var(--pico-primary); }
.help-topic p, .help-topic ul, .help-topic ol { margin: 0; }
.help-topic ul, .help-topic ol { padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.help-topic .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pico-primary); margin: 0 0 0.4rem; }
.help-topic .intro { display: grid; gap: 0.6rem; }
.help-topic .muted { color: var(--pico-muted-color); }
.help-topic .feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.help-topic .feature .text { display: grid; gap: 0.5rem; min-width: 0; }
.help-topic figure { margin: 0; display: grid; gap: 0.4rem; min-width: 0; }
.help-topic figcaption { font-size: 0.85rem; color: var(--pico-muted-color); }
.help-topic .shot { border: 1px solid var(--portal-line); border-radius: 0.7rem; overflow: hidden; background: var(--portal-panel); }
.help-topic .shot img, .help-topic img { display: block; width: 100%; max-width: 100%; height: auto; }
.help-topic .film { border: 1px solid var(--portal-line); border-radius: 0.7rem; overflow: hidden; background: #000; }
.help-topic .film video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.help-topic .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.help-topic .pair[id] { scroll-margin-top: 4.5rem; }
.help-topic .phones { display: flex; flex-wrap: wrap; gap: 1rem; }
.help-topic .phones figure { width: min(100%, 15rem); }
.help-topic .phones .shot { border-radius: 1.2rem; border-width: 5px; }
.help-topic .note { background: rgba(255, 159, 28, 0.12); border-left: 3px solid var(--pico-primary); border-radius: 0 0.6rem 0.6rem 0; padding: 0.7rem 1rem; }
.help-topic .steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.help-topic .steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.help-topic .steps li::before { content: counter(step); font-weight: 800; text-align: center; line-height: 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pico-primary); color: var(--pico-primary-inverse); }
.help-topic .steps b { display: block; }
.help-topic .privacy, .help-topic .checklist, .help-topic .badges-list, .help-topic .roles { list-style: none; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.help-topic .privacy > *, .help-topic .checklist li, .help-topic .badges-list li, .help-topic .roles > * { display: grid; gap: 0.25rem; align-content: start; min-width: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); }
.help-topic .checklist b, .help-topic .badges-list b { color: var(--pico-primary); }
.help-topic .table-wrap { min-width: 0; }
.help-topic .table-wrap table { width: 100%; table-layout: fixed; font-size: 0.9rem; }
.help-topic .table-wrap th, .help-topic .table-wrap td { overflow-wrap: anywhere; word-break: break-word; padding: 0.4rem 0.5rem; }
.help-topic .changelog { font-size: 0.95rem; }
.help-topic .changelog h3 { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; margin: 1.4rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--portal-line); }
.help-topic .changelog ul { gap: 0.5rem; }
.help-topic .changelog-more > summary { cursor: pointer; display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--portal-line); border-radius: 6px; color: var(--pico-primary); font-weight: 700; }
.help-topic .calc-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.help-topic .calc { display: grid; gap: 0.6rem; align-content: start; min-width: 0; padding: 0.9rem 1rem; border: 1px solid var(--portal-line); border-radius: 0.7rem; background: var(--pico-background-color); }
.help-topic .calc-wide { grid-column: 1 / -1; }
.help-topic .calc h3 { margin: 0; }
.help-topic .calc-hint { color: var(--pico-muted-color); font-size: 0.9rem; }
.help-topic .calc label { display: grid; gap: 0.25rem; font-size: 0.9rem; margin: 0; }
.help-topic .calc input, .help-topic .calc select { min-width: 0; width: 100%; margin: 0; }
.help-topic .calc-row { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.help-topic .unit-pair { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem; gap: 0.4rem; }
.help-topic .calc-out { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: baseline; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: rgba(255, 159, 28, 0.12); }
.help-topic .out-val { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.help-topic .out-unit { margin-left: 0.3rem; color: var(--pico-primary); font-weight: 700; }
.help-topic .limit { margin: 0; padding: 0.35rem 0.7rem; border-radius: 0.5rem; font-size: 0.9rem; }
.help-topic .limit-ok { background: rgba(126, 231, 135, 0.12); color: #7ee787; }
.help-topic .limit-warn { background: rgba(255, 212, 59, 0.16); color: #ffd43b; }
.help-topic .limit-over { background: rgba(255, 107, 107, 0.16); color: #ff6b6b; }
/* Roadmap hearts (roadmap/static/roadmap/roadmap.js builds them): grey until given, red when given. */
.help-topic .heart { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.45rem 0.1rem 0.15rem; border: 1px solid transparent; border-radius: 999px; color: var(--pico-muted-color); font-size: 0.88rem; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: -0.2em; white-space: nowrap; }
.help-topic .heart svg { width: 1.15rem; height: 1.15rem; filter: grayscale(1) brightness(0.75); transition: transform .15s, filter .15s; }
.help-topic .heart:hover { border-color: var(--portal-line); color: var(--pico-color); }
.help-topic .heart:hover svg { filter: none; transform: scale(1.12); }
.help-topic .heart:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.help-topic .heart[aria-pressed="true"] { border-color: rgba(243, 62, 88, 0.55); background: rgba(243, 62, 88, 0.12); color: var(--pico-color); }
.help-topic .heart[aria-pressed="true"] svg { filter: none; }
.help-topic .heart:disabled { cursor: progress; }
.help-topic .heart.pop svg { animation: heart-pop .4s ease-out; }
@keyframes heart-pop { 35% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .help-topic .heart.pop svg, .help-topic .heart:hover svg { animation: none; transform: none; } }
.help-topic .tiles { margin: 0.5rem 0 0; }
.help-topic .tiles .tile { text-decoration: none; }
.help-topic .tiles .tile small { display: block; color: var(--pico-muted-color); }
@media (min-width: 900px) { .help-topic .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; } }
@media (max-width: 640px) { .help-topic .pair { grid-template-columns: minmax(0, 1fr); } .help-topic .phones figure { width: min(100%, 17rem); } }
#help-index .tile { text-decoration: none; display: grid; gap: 0.3rem; align-content: start; }
#help-index .tile .desc-line { color: var(--pico-muted-color); font-size: 0.9rem; font-weight: 400; }
#help-index .tile small { color: var(--pico-primary); }
/* ---- end Help 2.0 ---- */

/* Checkbox next to its label in generic forms (templates/django/forms/field.html) */
.check-line { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.8rem; }
.check-line:has(+ .check-help) { margin-bottom: 0.25rem; }
.check-line input[type="checkbox"] { flex: none; margin: 0; }
.helptext.check-help { margin: 0 0 0.75rem 2.1rem; }

/* History of a competition or a cycle (organizer and admin) */
details.history > summary { margin-bottom: 0.75rem; }
.history .who { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0 0 0.75rem; }
.history .who span { color: var(--pico-muted-color); }
.history .who b { color: var(--pico-color); font-weight: 600; }
.history ol { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 9.5rem 11rem 1fr; gap: 0.25rem 1rem; padding: 0.45rem 0; border-top: 1px solid var(--portal-line); }
.history li time, .history li .by { color: var(--pico-muted-color); font-size: 0.9rem; }
.history .more { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--pico-muted-color); }
@media (max-width: 640px) {
  .history li { grid-template-columns: 1fr; gap: 0; padding: 0.55rem 0; }
}

.cycle-link { text-decoration: none; }