/* ===========================================================================
   ui.css — fs-ongoo's redesigned components, built on tokens.css.
   Opt-in per app (fs-ongoo queues it in partials/head.php), like the tokens.
   Grouped lists (.fs-list/.fs-row) live in tokens.css with the chrome; this
   file holds what the screens are made of: segmented answer control, date
   tile, hero tile, dots, the Domů layout.
   =========================================================================== */

.fs-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-ink-muted); margin: 0; }

/* ── Answer control: Přídu ✓ · Možná ? · Nepřijdu ✗ ─────────────────────
   A segmented control whose segments are the form's submit buttons. The
   symbols carry the colour (the colour is the meaning); once answered, only
   the chosen one keeps it. */
.fs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--fs-radius-pill); background: rgba(118, 118, 128, .16); max-width: 26.25rem; }
.fs-seg-opt { border: 0; background: transparent; color: var(--fs-ink); border-radius: var(--fs-radius-pill); padding: .4rem .5rem; font-size: .875rem; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; transition: background-color .15s ease; }
.fs-seg-opt:hover { background: rgba(118, 118, 128, .14); }
.fs-seg-opt.is-on { background: var(--fs-surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.fs-seg-opt:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { .fs-seg-opt:active { transform: var(--fs-press); } }
.fs-seg.on-brand { background: rgba(255, 255, 255, .2); }
.fs-seg.on-brand .fs-seg-opt { color: #fff; }
.fs-seg.on-brand .fs-seg-opt.is-on { background: #fff; color: #1d1d1f; }

.fs-sym { font-style: normal; width: 1.05rem; height: 1.05rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .65rem; font-weight: 800; color: #fff; line-height: 1; }
.fs-sym.is-ok { background: #34c759; } .fs-sym.is-maybe { background: #ff9500; } .fs-sym.is-no { background: #ff3b30; }
.fs-seg:has(.is-on) .fs-seg-opt:not(.is-on) .fs-sym { background: rgba(118, 118, 128, .5); }
.fs-seg.on-brand:has(.is-on) .fs-seg-opt:not(.is-on) .fs-sym { background: rgba(255, 255, 255, .3); }

.fs-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: .1em; }
.fs-dot.is-ok { background: #34c759; } .fs-dot.is-maybe { background: #ff9500; } .fs-dot.is-no { background: #ff3b30; }

/* ── Date tile, like a calendar app icon ─────────────────────────────── */
.fs-datebox { width: 2.4rem; flex: none; align-self: flex-start; text-align: center; border-radius: 10px; background: var(--fs-recessed); padding: .2rem 0 .25rem; line-height: 1.05; }
.fs-datebox i { display: block; font-style: normal; font-size: .625rem; font-weight: 700; text-transform: uppercase; color: #ff3b30; }
.fs-datebox b { font-size: 1.05rem; font-weight: 600; }

/* ── Rows that carry an action under their text ──────────────────────── */
.fs-task { align-items: flex-start; }
.fs-task .fs-row-icon { margin-top: .1rem; }
.fs-row-text a { color: inherit; }
.fs-task-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.fs-row-value { color: var(--fs-ink-muted); font-size: .875rem; white-space: nowrap; }
.fs-empty { padding: 1rem; }

/* Pay with QR: a native disclosure, no script. */
.fs-pay { margin-top: .55rem; }
.fs-pay > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; }
.fs-pay > summary::-webkit-details-marker { display: none; }
.fs-pay > summary small { display: block; font-size: .8125rem; opacity: .8; }
.fs-pay[open] > summary .btn { opacity: .55; }
.fs-pay-qr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-top: .75rem; }
.fs-pay-qr img { width: 160px; max-width: 100%; border-radius: 10px; background: #fff; padding: 6px; }

/* ── Hero: the next event on our blue ───────────────────────────────── */
.fs-home-hero { position: relative; padding-top: 3rem; }
.fs-hero { position: relative; z-index: 1; background: var(--fs-accent-fill); color: #fff; border-radius: 22px; padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: .5rem; }
.fs-hero a { color: #fff; }
.fs-hero-when { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.fs-hero-title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
.fs-hero-sub { margin: 0 0 .25rem; color: rgba(255, 255, 255, .82); font-size: .9375rem; }
.fs-hero .fs-pay > summary { color: #fff; }
.fs-hero .fs-pay .btn-primary { background: #fff; border-color: #fff; color: #0058b0; }
.fs-hero .fs-pay-qr .text-muted { color: rgba(255, 255, 255, .82) !important; }
/* The event's photo: a banner across the top of the blue tile (desktop moves it to the left). */
.fs-hero.has-photo { padding-top: 11.25rem; }
.fs-hero.has-photo::before { content: ""; position: absolute; inset: 0 0 auto; height: 10rem; border-radius: 22px 22px 0 0; background: var(--fs-cover) var(--fs-cover-pos, center) / cover no-repeat; }
/* AVIF only where image-set() can pick by type: Safari < 16 can't, and keeps the JPEG. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fs-hero.has-photo::before { background-image: image-set(var(--fs-cover-avif) type("image/avif"), var(--fs-cover) type("image/jpeg")); }
}
/* The user's Fakin hra character peeks over the tile; the tile hides its legs. */
.fs-peek { position: absolute; z-index: 0; right: 1.5rem; top: 0; width: 72px; height: 104px; }
.fs-peek .fs-char { position: static; transform: none; height: 104px; width: auto; }

/* ── Domů layout: hero, tasks, upcoming. Phone stacks them; desktop puts the
   tasks in a column beside the hero and the upcoming list. ─────────── */
.fs-home { display: grid; gap: .25rem 2rem; grid-template-columns: minmax(0, 1fr); margin-inline: auto; }
.fs-home .fs-list { max-width: none; }
.fs-home .fs-list-header { margin-top: 1.25rem; }
@media (min-width: 992px) {
  .fs-home { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "hero tasks" "upcoming tasks"; align-items: start; }
  .fs-home-hero { grid-area: hero; }
  .fs-home-tasks { grid-area: tasks; }
  .fs-home-upcoming { grid-area: upcoming; }
  .fs-home-tasks .fs-list-header { margin-top: 1.75rem; }
  /* The event's photo fills the left of the blue tile. */
  .fs-hero.has-photo { padding-top: 1.25rem; padding-left: calc(45% + 1.5rem); min-height: 11rem; align-content: center; }
  .fs-hero.has-photo::before { inset: 0 55% 0 0; height: auto; border-radius: 22px 0 0 22px; }
}

/* ── Page furniture: large title with actions, back link, view switch ── */
.fs-page { max-width: 47.5rem; }
.fs-page .fs-list { max-width: none; }
.fs-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: .75rem; }
.fs-titlebar-actions .btn { white-space: nowrap; }
.fs-titlebar .fs-large-title { margin-bottom: .75rem; }
.fs-titlebar-actions { display: flex; align-items: center; gap: .5rem; }
.fs-icon-btn { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--fs-accent-subtle); color: var(--fs-accent); }
.fs-icon-btn .fs-icon { width: 1.05rem; height: 1.05rem; }
.fs-back { display: inline-block; margin-top: .25rem; color: var(--fs-accent); }
.fs-seg-nav { max-width: 20rem; margin-bottom: .5rem; }
@media (max-width: 575.98px) { .fs-seg-nav { max-width: none; } } /* phones: full width, like an iOS segmented control */
/* Správa akce tabs (fs_event_admin_tabs()): Nastavení | Zálohy | Připomenutí. */
.fs-admin-tabs { max-width: 30rem; margin-bottom: 1rem; }
.fs-admin-tabs .fs-count { min-width: 1.2rem; height: 1.2rem; font-size: .7rem; }
@media (max-width: 575.98px) { .fs-admin-tabs { grid-auto-columns: auto; } .fs-admin-tabs .fs-seg-opt { font-size: .8125rem; padding-inline: .35rem; } } /* four tabs fit a phone */
/* The Správa tabs' lists (event_components.php): Zálohy, Připomenutí, and Nápověda (partials/event_help.php). */
.fs-deposit-sum { margin: 0 0 .5rem; }
.fs-deposit-sum + .fs-stackbar { margin: 0 0 .25rem; }
.fs-row-action { color: var(--fs-accent); }
.fs-remind > form { margin: 0; }
.fs-remind > * + .fs-row::before { content: ""; display: block; position: absolute; top: 0; left: 1rem; right: 0; border-top: 1px solid var(--fs-hairline); }
.fs-help .fs-row { align-items: flex-start; }
.fs-help .fs-row-text small { display: block; -webkit-line-clamp: unset; }
.fs-sym.is-step { background: var(--fs-accent-fill); }
.fs-help-diagram { display: block; padding: 1rem; margin-bottom: 1rem; border-radius: var(--fs-radius-lg); background: var(--fs-surface); cursor: zoom-in; }
.fs-help-diagram img { display: block; width: 100%; height: auto; }
.fs-eform-help-body .fs-list, .fs-eform-help-body .fs-help-diagram { background: var(--fs-recessed); } /* the new-event form shows it inside a list */
/* Průběh (event_form.php): the stages as dots on a line, where the event is, then the actions as list rows. */
.fs-stage-steps { display: flex; list-style: none; margin: 0; padding: 1rem 1rem .9rem; }
.fs-stage-steps li { flex: 1; position: relative; padding-top: 1.5rem; text-align: center; font-size: .8125rem; color: var(--fs-ink-muted); }
.fs-stage-steps li::before { content: ""; position: absolute; z-index: 1; top: .25rem; left: 50%; width: .85rem; height: .85rem; margin-left: -.425rem; border-radius: 50%; background: var(--fs-surface); box-shadow: inset 0 0 0 2px var(--fs-hairline); }
.fs-stage-steps li + li::after { content: ""; position: absolute; top: .6rem; right: 50%; width: 100%; height: 2px; background: var(--fs-hairline); }
.fs-stage-steps .is-done::before, .fs-stage-steps .is-now::before { background: var(--fs-accent-fill); box-shadow: none; }
.fs-stage-steps .is-now::before { box-shadow: 0 0 0 4px var(--fs-accent-subtle); }
.fs-stage-steps .is-done::after, .fs-stage-steps .is-now::after { background: var(--fs-accent-fill); }
.fs-stage-steps .is-now { color: var(--fs-ink); font-weight: 600; }
.fs-stage-now { display: flex; flex-direction: column; margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--fs-hairline); }
.fs-stage-now small { color: var(--fs-ink-muted); font-size: .8125rem; }
.fs-stage-now + .fs-row { border-top: 1px solid var(--fs-hairline); }
a.fs-seg-opt { color: var(--fs-ink); }
a.fs-seg-opt:hover { text-decoration: none; color: var(--fs-ink); }
.fs-pill-ghost { flex: none; border-radius: var(--fs-radius-pill); padding: .25rem .75rem; font-size: .8125rem; font-weight: 600; background: var(--fs-accent-subtle); color: var(--fs-accent); }
/* A row can be a <button> (opens a dialog) and look exactly like a link row. */
button.fs-row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }
.fs-calendar-card { background: var(--fs-surface); border-radius: var(--fs-radius-lg); padding: .75rem; }
.fs-row-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-task .fs-row-text small { display: block; -webkit-line-clamp: unset; }

/* Bootstrap alerts on every page: soft tinted cards instead of bordered boxes. */
.alert { --bs-alert-border-color: transparent; border-radius: var(--fs-radius-lg); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, #ff9500 13%, var(--fs-surface)); --bs-alert-color: var(--fs-ink); }
.alert-danger  { --bs-alert-bg: color-mix(in srgb, #ff3b30 12%, var(--fs-surface)); --bs-alert-color: var(--fs-ink); }
.alert-success { --bs-alert-bg: color-mix(in srgb, #34c759 14%, var(--fs-surface)); --bs-alert-color: var(--fs-ink); }
.alert-info { --bs-alert-bg: var(--fs-surface); --bs-alert-color: var(--fs-ink); }
.alert .alert-link { color: var(--fs-accent); }

/* ── Event detail ─────────────────────────────────────────────────────── */
/* Hero: the album collage when there is one (darkened at the bottom so the
   title reads), else our blue. */
.fs-ehero { position: relative; border-radius: 22px; padding: 1.25rem; min-height: 9rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; color: #fff; background: var(--fs-accent-fill); max-width: 47.5rem; }
.fs-ehero.has-cover { min-height: 15rem; overflow: hidden; isolation: isolate; background: #1c1c1e; }
/* The photo (a <picture>, or the album collage <img>) under a darkening gradient, behind the title. */
.fs-ehero.has-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .7)); }
.fs-ehero-photo { position: absolute; inset: 0; z-index: -2; }
.fs-ehero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-ehero .fs-hero-when { color: rgba(255, 255, 255, .85); }
/* Fotka akce (event_form.php): the picture is the button, a glass ✕ (merch's pencil look) removes it.
   data-state: has (stored photo) · new (just picked, previewed) · picked (picked, no preview) · removed · none. */
.fs-cover-pick { position: relative; margin-bottom: 1rem; }
.fs-cover-tile { display: block; height: 9rem; margin: 0; overflow: hidden; border-radius: var(--fs-radius-lg); background: var(--fs-surface); cursor: pointer; }
.fs-cover-tile picture { display: block; height: 100%; }
.fs-cover-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-cover-empty, .fs-cover-picked { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; text-align: center; padding: 0 1rem; }
.fs-cover-empty { color: var(--fs-accent); border: 2px dashed var(--fs-hairline); border-radius: inherit; }
.fs-cover-empty small, .fs-cover-picked small { color: var(--fs-ink-muted); font-size: .8125rem; }
.fs-cover-empty .fs-icon, .fs-cover-picked .fs-icon { width: 26px; height: 26px; }
.fs-cover-pick:not([data-state="has"]):not([data-state="new"]) picture,
.fs-cover-pick:is([data-state="has"], [data-state="new"], [data-state="picked"]) .fs-cover-empty,
.fs-cover-pick:not([data-state="picked"]) .fs-cover-picked,
.fs-cover-pick:is([data-state="none"], [data-state="removed"]) .fs-cover-x,
.fs-cover-pick:not([data-state="has"]):not([data-state="new"]) .fs-cover-hint,
.fs-cover-pick:not([data-state="removed"]) .fs-cover-undo { display: none; }
.fs-cover-pick .fs-cover-note { margin: .45rem 1rem 0; } /* beats .fs-list-footer's negative top margin, which sits later in this file */
.fs-cover-pick[data-state="none"] .fs-cover-note { display: none; }
/* The ⌖ beside the ✕ opens Výřez fotky (the focal point every crop of the photo is placed around). */
.fs-cover-pick .fs-cover-focus { right: 3.1rem; }
.fs-cover-focus .fs-icon { width: 18px; height: 18px; }
.fs-cover-pick:not([data-state="has"]):not([data-state="new"]) .fs-cover-focus { display: none; }
/* Výřez fotky sheet: the whole photo (tap or drag sets the dot), then phone and desktop header previews. */
.fs-focus-pick { position: relative; display: flex; justify-content: center; margin-bottom: .5rem; overflow: hidden; border-radius: var(--fs-radius-lg); background: #000; cursor: crosshair; touch-action: none; user-select: none; }
.fs-focus-pick img { display: block; max-width: 100%; max-height: 50vh; pointer-events: none; -webkit-user-drag: none; }
.fs-focus-pick + .fs-list-footer { margin: .45rem 1rem .9rem; } /* .fs-list-footer pulls itself up into the list above */
.fs-focus-dot { position: absolute; width: 1.75rem; height: 1.75rem; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .45); pointer-events: none; }
.fs-focus-previews { display: grid; grid-template-columns: 2fr 3fr; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.fs-focus-previews figure { margin: 0; }
.fs-focus-previews figcaption { margin-top: .3rem; font-size: .75rem; text-align: center; color: var(--fs-ink-muted); }
.fs-focus-prev { display: block; overflow: hidden; border-radius: 10px; background: #1c1c1e; }
.fs-focus-prev.is-phone { aspect-ratio: 3 / 2; }
.fs-focus-prev.is-desktop { aspect-ratio: 9 / 2; }
.fs-focus-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A button that reads as an inline link ("Vrátit"). */
.fs-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--fs-accent); }
.fs-input::file-selector-button { border: 0; border-radius: var(--fs-radius-pill); padding: .3rem .85rem; margin-right: .5rem; font: inherit; font-weight: 600; color: var(--fs-accent); background: var(--fs-accent-subtle); }
.fs-ehero-title { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.fs-event-info { margin-bottom: 0; max-width: 47.5rem; }
.fs-desc { white-space: pre-wrap; background: var(--fs-surface); border-radius: var(--fs-radius-lg); padding: 1rem 1.1rem; max-width: 47.5rem; }

/* ── Event detail sections ─────────────────────────────────────────────
   Each section is a titled block on the page background; its content sits in
   grouped lists. No more border-top dividers: the white groups separate it. */
.fs-section { max-width: 47.5rem; }
.fs-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .5rem 0 .75rem; }
.fs-section-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.fs-att-answer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.fs-seg-lg { max-width: 28.75rem; width: 100%; }
.fs-seg-lg .fs-seg-opt { padding: .55rem .5rem; font-size: .9375rem; }
.fs-seg-opt:disabled { opacity: .45; cursor: not-allowed; }
.fs-seg-opt:disabled:hover { background: transparent; }
.fs-seg-opt.is-on:disabled { opacity: 1; }

.fs-stackbar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--fs-recessed); margin-top: 1rem; max-width: 28.75rem; }
.fs-stackbar i { display: block; height: 100%; }
.fs-stackbar .is-ok { background: #34c759; } .fs-stackbar .is-maybe { background: #ff9500; } .fs-stackbar .is-no { background: #ff3b30; }
.fs-stackbar .is-deposit { background: #30b0c7; } .fs-stackbar .is-wait { background: #8e8e93; }

.fs-att-groups { margin-top: 1rem; }
.fs-sym-lg { width: 1.9rem; height: 1.9rem; font-size: .95rem; flex: none; align-self: flex-start; margin-top: .1rem; }
.fs-sym.is-deposit { background: #30b0c7; } .fs-sym.is-wait { background: #8e8e93; }
.fs-att-groups .fs-row + .fs-row::before { left: 3.6rem; }
.fs-att-groups .fs-row-text small { display: block; -webkit-line-clamp: unset; } /* every name, never "Aničk…" */

/* A list row that opens a <details>: no browser triangle, the chevron turns
   down when open. Statistiky, the event form's Návod, Nová tabulka. */
summary.fs-row { list-style: none; cursor: pointer; }
summary.fs-row::-webkit-details-marker { display: none; }
details[open] > summary.fs-row .fs-row-chev { transform: rotate(90deg); }

/* Organiser rows: Správa akce, and close / pick the term under the vote and sign-up sections. */
.fs-admin-actions { max-width: none; }
.fs-admin-actions > form { margin: 0; }
.fs-admin-actions > * + * { border-top: 1px solid var(--fs-hairline); }
.fs-admin-actions .fs-row + .fs-row::before { display: none; }

/* Cards: Zálohy, Připomenutí, Nezpracovaná média, Nejlepší termíny. */
.fs-card { background: var(--fs-surface); border-radius: var(--fs-radius-lg); padding: 1rem 1.1rem; font-size: .9375rem; }
.fs-card-title { font-weight: 700; font-size: 1.05rem; }
.fs-card details > summary { color: var(--fs-accent); }

/* Per-person admin action: a small tinted pill instead of a bare text link. */
.fs-mini-btn { border: 0; border-radius: var(--fs-radius-pill); padding: .2rem .7rem; font-size: .8125rem; font-weight: 600; background: var(--fs-accent-subtle); color: var(--fs-accent); white-space: nowrap; }
.fs-mini-btn:hover { background: color-mix(in srgb, var(--fs-accent) 22%, transparent); }
.fs-mini-btn.is-fill { background: var(--fs-accent-fill); color: #fff; }
.fs-mini-btn.link-danger { background: color-mix(in srgb, #ff3b30 13%, transparent); color: #d70015; }
[data-bs-theme="dark"] .fs-mini-btn.link-danger { color: #ff6961; }
/* A per-row action that should not shout (Zálohy: Zrušit on every paid row); .is-danger still makes its confirm red. Not .link-danger: Bootstrap forces that red with !important. */
.fs-mini-btn.is-quiet { background: none; color: var(--fs-ink-muted); }
/* A data-fs-swap submit still on its way (ui.js): a spinner over the label, so a tap on a slow
   connection visibly landed. Bootstrap's own spinner keyframes; its badge stays visible. */
[type="submit"][aria-busy="true"] { position: relative; color: transparent !important; }
[type="submit"][aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1rem; height: 1.1rem; border: 2px solid var(--bs-btn-color, var(--fs-ink)); border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
.fs-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: var(--fs-radius-pill); background: var(--fs-recessed); font-size: .75rem; font-weight: 700; }
.fs-count.is-danger { background: #ff3b30; color: #fff; }
.fs-chip { border-radius: var(--fs-radius-pill); padding: .05rem .55rem; font-size: .75rem; font-weight: 600; }
.fs-chip.is-ok { background: color-mix(in srgb, #34c759 18%, transparent); color: #248a3d; }
.fs-chip.is-maybe { background: color-mix(in srgb, #ff9500 20%, transparent); color: #b25000; }
.fs-chip.is-wait { background: var(--fs-recessed); color: var(--fs-ink-muted); }
[data-bs-theme="dark"] .fs-chip.is-ok { color: #30d158; } [data-bs-theme="dark"] .fs-chip.is-maybe { color: #ff9f0a; }

/* ── Voting sections (multi-date table + calendar vote). The live-update JS
   writes Bootstrap progress bars and badges, so they are restyled here
   rather than replaced. ─────────────────────────────────────────────── */
.fs-vote { max-width: 68.75rem; }
.fs-vote .table { --bs-table-bg: var(--fs-surface); --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--fs-recessed); --bs-table-border-color: var(--fs-hairline); border-radius: var(--fs-radius-lg); overflow: hidden; }
/* Můžu / Možná / Nemůžu: a segmented control, symbols always in colour. */
.fs-vote .btn-group { background: rgba(118, 118, 128, .16); border-radius: var(--fs-radius-pill); padding: 2px; gap: 2px; }
.fs-vote .btn-group > .btn { border: 0 !important; border-radius: var(--fs-radius-pill) !important; background: transparent; color: var(--fs-ink); font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.fs-vote .btn-check:checked + .btn { background: var(--fs-surface); color: var(--fs-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.fs-vote .btn-check:focus-visible + .btn { outline: 2px solid var(--fs-accent); }
.fs-vote .progress { height: .9rem !important; border-radius: var(--fs-radius-pill); background: var(--fs-recessed); font-size: .65rem; }
.fs-vote .progress-bar.bg-success { background-color: #34c759 !important; }
.fs-vote .progress-bar.bg-warning { background-color: #ff9500 !important; }
.fs-vote .progress-bar.bg-danger  { background-color: #ff3b30 !important; }
.fs-vote .progress-bar.bg-secondary { background-color: var(--fs-recessed) !important; color: var(--fs-ink-muted); }
.fs-vote .badge.text-bg-success { background-color: #34c759 !important; } .fs-vote .badge.text-bg-warning { background-color: #ff9500 !important; color: #fff !important; } .fs-vote .badge.text-bg-danger { background-color: #ff3b30 !important; }
/* Nejlepší termíny (calendar vote): ranked runs of days, rows written by event-vote-calendar.js. */
.fs-best-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; margin-bottom: .25rem; }
.fs-best-list { list-style: none; margin: 0; padding: 0; }
.fs-best-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .6rem 0; }
.fs-best-list > li + li { border-top: 1px solid var(--fs-hairline); }
.fs-best-when { flex: 1 1 12rem; min-width: 0; }
.fs-best-when small { display: block; color: var(--fs-ink-muted); font-size: .8125rem; }
.fs-best-counts { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-best-counts .fs-sym:not(:first-child) { margin-left: .35rem; }
.fs-best-more { display: block; width: 100%; padding: .6rem 0 .1rem; border: 0; border-top: 1px solid var(--fs-hairline); background: none; font: inherit; font-weight: 500; color: var(--fs-accent); }

/* ── 💸 Výdaje: same section/card grammar; tables on white, settlement rows
   (paid debts) a soft green instead of Bootstrap's table-success. ──── */
.fs-expenses { max-width: 68.75rem; }
.fs-expenses .table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--fs-recessed); --bs-table-border-color: var(--fs-hairline); }
.fs-expenses > .table-responsive, .fs-expenses .expense-manager-table { background: var(--fs-surface); border-radius: var(--fs-radius-lg); }
.fs-expenses .table-success { --bs-table-bg: color-mix(in srgb, #34c759 9%, transparent); --bs-table-striped-bg: color-mix(in srgb, #34c759 9%, transparent); --bs-table-hover-bg: color-mix(in srgb, #34c759 16%, transparent); --bs-table-color: var(--fs-ink); --bs-table-striped-color: var(--fs-ink); --bs-table-border-color: var(--fs-hairline); }
.fs-expenses .text-success { color: #248a3d !important; } .fs-expenses .text-danger { color: #d70015 !important; }
[data-bs-theme="dark"] .fs-expenses .text-success { color: #30d158 !important; } [data-bs-theme="dark"] .fs-expenses .text-danger { color: #ff6961 !important; }

/* ── Fotky a videa: album covers, photography first ─────────────────── */
.fs-albums { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr)); }
.fs-album { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; border-radius: var(--fs-radius-lg); overflow: hidden; background: linear-gradient(135deg, #2c3e50, #1c1c1e); color: #fff; }
.fs-album:hover { text-decoration: none; color: #fff; }
.fs-album img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
@media (prefers-reduced-motion: no-preference) { a.fs-album:hover img { transform: scale(1.03); } }
.fs-album::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7)); }
.fs-album-cap { position: relative; z-index: 1; padding: .85rem 1rem; display: flex; flex-direction: column; }
.fs-album-cap b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.fs-album-cap small { opacity: .8; }
.fs-album-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; opacity: .35; }
.fs-gbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.fs-btn-glass { background: rgba(255, 255, 255, .12); color: var(--fs-ink); border: 0; }
.fs-btn-glass:hover { background: rgba(255, 255, 255, .2); color: var(--fs-ink); }

/* ── Every remaining Bootstrap card: a borderless white surface on the grey
   page (black on dark). */
.card { --bs-card-border-width: 0; }

/* ── Profil ──────────────────────────────────────────────────────────── */
.fs-profile-head { display: grid; justify-items: center; text-align: center; gap: .35rem; margin: .5rem 0 1.5rem; }
.fs-avatar-xl { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; position: relative; display: grid; place-items: center; background: var(--fs-accent-fill); color: #fff; font-size: 2.25rem; font-weight: 600; }
/* Label left, value right — a Settings-style read-only list inside a card. */
.fs-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--fs-hairline); }
.fs-kv > div:last-child { border-bottom: 0; }
.fs-kv span { color: var(--fs-ink-muted); flex: none; }
.fs-kv b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fs-kv > div.is-stack { flex-direction: column; align-items: flex-start; gap: .35rem; }

/* ── Login & registration: sunset over water, the brand, the three characters
   on the shore, the form where a thumb reaches. Always dark. ──────────── */
body.fs-auth { background: #000; color: #f5f5f7; min-height: 100dvh; }
.fs-auth-bg { position: fixed; inset: 0; z-index: 0; background:
  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.78) 52%, #000 66%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='xMidYMin slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7c27a'/%3E%3Cstop offset='1' stop-color='%23e0703f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='640' fill='url(%23s)'/%3E%3Ccircle cx='150' cy='212' r='54' fill='%23ffe2a8'/%3E%3Cpath d='M0 238 C60 228 120 246 180 236 C230 228 270 240 300 234 V640 H0Z' fill='%23233a4d'/%3E%3Cpath d='M210 248 L248 248 L242 256 L216 256Z' fill='%23111'/%3E%3Cpath d='M228 248 V230 L238 246Z' fill='%23111'/%3E%3Cpath d='M0 220 L40 200 L70 214 L100 196 L120 236 L0 240Z' fill='%23824a2e' opacity='.55'/%3E%3C/svg%3E") top center / cover no-repeat; }
.fs-auth-main { position: relative; z-index: 1; min-height: 100dvh; max-width: 26.25rem; margin: 0 auto; padding: 2.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.fs-auth-brand small { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fs-auth-brand h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: .15rem 0 0; text-shadow: 0 1px 14px rgba(120, 50, 0, .35); }
.fs-auth-trio { display: flex; justify-content: center; align-items: flex-end; gap: .25rem; margin: 2.5rem 0 0; }
.fs-auth-trio img { height: 112px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.fs-auth-trio img:nth-child(2) { height: 124px; }
.fs-auth-card { margin-top: auto; padding-top: 2rem; display: grid; gap: .6rem; }
.fs-auth-card form { display: grid; gap: .6rem; }
.fs-auth-note { text-align: center; color: rgba(255, 255, 255, .72); margin: 0 0 .25rem; }
.fs-auth .form-control { background: rgba(255, 255, 255, .12); border: 0; color: #fff; border-radius: 12px; padding: .8rem 1rem; }
.fs-auth .form-control::placeholder { color: rgba(255, 255, 255, .55); }
.fs-auth .form-control:focus { background: rgba(255, 255, 255, .18); color: #fff; }
.fs-auth-alt { text-align: center; color: rgba(255, 255, 255, .65); margin: .25rem 0 0; }
.fs-auth-alt a { color: #4da3ff; }
@media (min-width: 768px) { .fs-auth-card { margin-top: 2rem; } }

/* iOS switches: every Bootstrap form-switch is green when on. */
.form-switch .form-check-input { width: 2.6em; height: 1.45em; margin-top: .05em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: #34c759; border-color: #34c759; }

/* ── Merch: size and option pickers are pill chips; the chosen one is outlined
   in our blue rather than filled (configurator chips). The 2px outline is the 1px border every chip
   has plus a 1px ring, which takes no space: a thicker border grew the chip and re-wrapped the row. */
.merch-size-options .btn-check:checked + .btn, .merch-option-picker .btn-check:checked + .btn { background: var(--fs-surface) !important; color: var(--fs-ink) !important; border-color: var(--fs-accent-fill) !important; box-shadow: 0 0 0 1px var(--fs-accent-fill); }

/* Table headers everywhere: small muted caps, not a heavy band. */
.table > thead > tr > th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fs-ink-muted); }

/* ── Event detail layout: one reading column at every width, like the original
   page — deposit, the event's facts, its description, then everything else. ── */
.fs-detail { display: flex; flex-direction: column; gap: 1.5rem; }
.fs-detail-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.fs-detail-side { display: contents; }
.fs-deposit { order: 1; } .fs-detail-info { order: 2; } .fs-detail-desc { order: 3; } .fs-detail-main { order: 4; }
/* Desktop keeps that reading order but uses the width inside it: a ~1000px column, the
   facts beside the description, and the sign-up groups (Přijdu / Možná / …) as columns. */
.fs-main.is-narrow:has(.event-detail-page) { max-width: 70rem; } /* as wide as Domů: no big empty side bars */
@media (min-width: 992px) {
  .fs-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .fs-deposit, .fs-detail-main, .fs-detail:not(:has(.fs-desc)) .fs-detail-info { grid-column: 1 / -1; }
  .fs-detail-info > .fs-list, .fs-detail-desc > .fs-desc { height: 100%; }
  .fs-detail-desc:not(:has(.fs-desc)) { display: none; }
  .event-detail-page .fs-att-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .event-detail-page .fs-att-groups .fs-row { align-items: flex-start; }
  .event-detail-page .fs-att-groups .fs-row + .fs-row::before { inset: .75rem auto .75rem 0; border-top: 0; border-left: 1px solid var(--fs-hairline); }
}
/* Calm like Apple's own detail screens: plain grey glyphs, no coloured tiles. Colour stays
   only where it means something (✓ ? ✗, the money card, Profil's push/calendar status). */
.event-detail-page .fs-row-icon, .fs-profile .fs-row-icon, .fs-cal-sheet .fs-row-icon { background: none; color: var(--fs-ink-muted); }
.event-detail-page .fs-row-icon .fs-icon, .fs-profile .fs-row-icon .fs-icon, .fs-cal-sheet .fs-row-icon .fs-icon { width: 20px; height: 20px; }
.fs-deposit-amt { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: .1rem 0; }
.fs-deposit .fs-pay > summary { display: block; }
.fs-ehero-admin { position: absolute; top: .9rem; right: .9rem; padding: .3rem .8rem; border-radius: var(--fs-radius-pill); font-size: .8125rem; font-weight: 600; color: #fff; background: rgba(210, 210, 215, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fs-ehero-admin:hover { color: #fff; text-decoration: none; background: rgba(210, 210, 215, .45); }
a.fs-list.fs-row { max-width: 47.5rem; }

/* ── 🎒 Balení (overrides packing.css; fs-ongoo is its only user) ────────
   Section on the page background; each list a white group; checkboxes are
   iOS circles that turn green when packed / claimed. */
body .fs-main .packing-scope { --packing-accent: #34c759; --packing-accent-group: #ff9500; max-width: 47.5rem; }
.fs-main .packing-surface { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 0; }
.fs-main .packing-surface-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .75rem; }
.fs-main .packing-section-header { margin: 1rem 1rem .4rem; border: 0 !important; padding: 0 !important; }
.fs-main .packing-section-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fs-ink-muted); font-weight: 600; }
.fs-main .packing-progress-track { height: 6px; margin: .25rem 0 0; }
.fs-main .packing-list { background: var(--fs-surface); border-radius: var(--fs-radius-lg); padding: .25rem .5rem; margin-top: .6rem; }
.fs-main .packing-check-row { padding: .65rem .5rem; }
.fs-main .packing-checkbox { appearance: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid var(--fs-hairline); display: grid; place-items: center; margin: 0; background: transparent; }
.fs-main .packing-checkbox:checked { background: #34c759; border-color: #34c759; }
.fs-main .packing-checkbox:checked::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 800; line-height: 1; }
.fs-main .packing-checkbox-group:checked { background: #ff9500; border-color: #ff9500; }
.fs-main .packing-checkbox-other:checked { background: var(--fs-recessed); border-color: var(--fs-recessed); }
.fs-main .packing-checkbox-other:checked::after { color: var(--fs-ink-muted); }
.fs-main .packing-checkbox:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.fs-main .packing-pill { border-radius: var(--fs-radius-pill); }

/* ── Calendars (FullCalendar): glass pill toolbar, quiet grid, red holidays ── */
.fc.fs-calendar-card { --fc-border-color: var(--fs-hairline); --fc-today-bg-color: var(--fs-accent-subtle); --fc-page-bg-color: transparent; --fc-neutral-bg-color: transparent; }
.fc.fs-calendar-card .fc-toolbar-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.fc.fs-calendar-card .fc-button { border: 0 !important; border-radius: var(--fs-radius-pill) !important; background: var(--fs-accent-subtle) !important; color: var(--fs-accent) !important; font-size: .8125rem; font-weight: 600; padding: .3rem .8rem; box-shadow: none !important; margin-left: .25rem; }
.fc.fs-calendar-card .fc-button:disabled { opacity: .45; }
.fc.fs-calendar-card .fc-col-header-cell { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fs-ink-muted); font-weight: 600; border: 0; }
.fc.fs-calendar-card .fc-daygrid-day-number { font-size: .85rem; }
.fc.fs-calendar-card .fc-day-today .fc-daygrid-day-number { background: var(--fs-accent-fill); color: #fff; border-radius: 50%; min-width: 1.6rem; text-align: center; }
.fs-calendar-card .fc-day-holiday .fc-daygrid-day-number { color: #ff3b30; font-weight: 700; }
.fc.fs-calendar-card .fc-event { border-radius: 6px; font-size: .7rem; }
@media (max-width: 575.98px) { .fs-calendar-card { padding: .5rem .25rem; } .fc.fs-calendar-card .fc-toolbar { flex-wrap: wrap; gap: .5rem; } }
/* A segmented control made of radios (event form Délka akce, merch_item has its own). */
.fs-seg .btn-check:checked + .fs-seg-opt { background: var(--fs-surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.fs-seg .btn-check:focus-visible + .fs-seg-opt { outline: 2px solid var(--fs-accent); }

/* Month overview: a list on Akce, chips under the voting calendar. */
.fs-agenda { margin-top: .75rem; }
.fs-agenda-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; color: var(--fs-ink); position: relative; }
a.fs-agenda-item:hover { text-decoration: none; color: var(--fs-ink); background: var(--fs-recessed); }
.fs-agenda.fs-list .fs-agenda-item + .fs-agenda-item::before { content: ""; position: absolute; top: 0; left: 3.4rem; right: 0; border-top: 1px solid var(--fs-hairline); }
.fs-agenda-ico { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fs-recessed); }
.fs-agenda-ico.is-bar { background: transparent; }
.fs-agenda-ico.is-bar::before { content: ""; width: 1.2rem; height: .3rem; border-radius: 2px; background: var(--fs-accent); }
.fs-agenda-ico.is-pending::before { background: repeating-linear-gradient(90deg, var(--fs-accent) 0 4px, transparent 4px 7px); }
.fs-agenda-text { display: flex; flex-direction: column; min-width: 0; }
.fs-agenda-text b { font-weight: 500; }
.fs-agenda-text small { color: var(--fs-ink-muted); font-size: .8125rem; }
.fs-list-header:has(+ .fs-agenda[hidden]) { display: none; }
.fc.fs-calendar-card .fc-daygrid-day-frame { min-height: 3.4rem; } .fc.fs-calendar-card .fc-daygrid-day-top { justify-content: center; }
/* Phones: a birthday cell shows just the cake; the names are in the month list below. */
@media (max-width: 575.98px) {
  .fc.fs-calendar-card .fc-bday-label { font-size: 0; line-height: 1; text-align: center; }
  .fc.fs-calendar-card .fc-bday-label::before { content: "🎂"; font-size: .8rem; }
}
/* Výdaje summary: one blue card — your balance on top, the event's totals as tiles. */
.fs-exp-summary { display: grid; gap: .85rem; padding: 1rem; border-radius: 22px; background: var(--fs-accent-fill); color: #fff; }
.fs-exp-me { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: .25rem; }
.fs-exp-me .fs-eyebrow { margin: 0 0 .1rem; color: rgba(255, 255, 255, .82); }
.fs-exp-me small { font-size: .875rem; color: rgba(255, 255, 255, .82); }
.fs-exp-me b { display: grid; justify-items: end; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-exp-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.fs-exp-stats > div { flex: 1 1 0; min-width: max-content; display: grid; padding: .6rem .5rem; border-radius: var(--fs-radius); text-align: center; background: rgba(255, 255, 255, .14); } /* never cut a number: a tile that can't fit wraps */
.fs-exp-stats b { font-size: 1.15rem; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-exp-stats span { font-size: .7rem; color: rgba(255, 255, 255, .82); }
/* Tint the ROW, not each cell: on phones the expense table flattens into flex rows
   where every <td> shrinks to its content, so per-cell fills read as patchy chips. */
.fs-expenses tr.table-success { background-color: color-mix(in srgb, #34c759 10%, var(--fs-surface)) !important; }
.fs-expenses tr.table-success > * { background-color: transparent !important; box-shadow: none !important; }
.fs-nudge { position: relative; padding: 0; border: 0; color: var(--fs-ink); background: var(--fs-surface); }
.fs-nudge .fs-row { padding-right: 3rem; }
.fs-nudge .btn-close { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); padding: .5rem; }
.fs-game-tile { display: flex; align-items: center; gap: .75rem; max-width: 40rem; margin-bottom: 1rem; padding: .85rem 1rem; border-radius: var(--fs-radius-lg); background: var(--fs-accent-fill); color: #fff; }
.fs-game-tile:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.fs-game-tile .fs-row-text small { color: rgba(255, 255, 255, .82); }
.fs-game-trio { display: flex; align-items: flex-end; gap: 2px; }
.fs-game-trio img { height: 44px; image-rendering: pixelated; }
.fs-game-play { flex: none; background: #fff; color: #0058b0; border-radius: var(--fs-radius-pill); padding: .3rem .9rem; font-size: .875rem; font-weight: 600; }
.fs-auth-wait { text-align: center; display: grid; gap: .75rem; justify-items: center; }
.fs-auth-wait img { height: 150px; image-rendering: pixelated; }
.fs-auth-wait h2 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.fs-auth-wait p { color: rgba(255, 255, 255, .75); margin: 0 0 .5rem; }
/* Alko kalkulačka */
/* Numbers top-left, Jahoda top-right standing on the shopping list, which
   gets the full width so kegs + bottles fit on one line. */
.fs-calc-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "big char" "sub char" "buy buy"; column-gap: 1rem; background: var(--fs-accent-fill); color: #fff; border-radius: 22px; padding: 1.1rem 1.25rem; max-width: 40rem; }
.fs-calc-big { grid-area: big; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fs-calc-sub { grid-area: sub; align-self: start; margin: .2rem 0 0; color: rgba(255, 255, 255, .85); font-size: .875rem; }
.fs-calc-result img { grid-area: char; align-self: end; height: 92px; image-rendering: pixelated; }
/* What to buy: kegs at their size class standing on one floor, then bottles. */
.fs-calc-buy { grid-area: buy; list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.25rem; }
.fs-calc-buy:empty { display: none; }
.fs-calc-buy li { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.fs-calc-buy svg { aspect-ratio: 5 / 6; height: 2.2rem; margin-bottom: .35rem; }
.fs-calc-buy .is-k50 { height: 3.4rem; }
.fs-calc-buy .is-k30 { height: 2.8rem; }
.fs-calc-buy .is-bottle { aspect-ratio: 1 / 3; height: 1.9rem; }
.fs-calc-buy b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fs-calc-buy span { font-size: .75rem; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.fs-stepper { display: inline-flex; align-items: center; border-radius: 10px; background: var(--fs-recessed); flex: none; }
.fs-stepper button { border: 0; background: transparent; color: var(--fs-accent); width: 2.2rem; height: 2.2rem; font-size: 1.15rem; }
.fs-stepper input { width: 2.6rem; border: 0; background: transparent; color: var(--fs-ink); text-align: center; font-weight: 600; appearance: textfield; }
.fs-stepper input::-webkit-outer-spin-button, .fs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
label.fs-row { cursor: pointer; margin: 0; }
.fs-savebar { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; padding: .5rem .5rem .5rem 1rem; border-radius: var(--fs-radius-pill); background: var(--fs-glass); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid var(--fs-glass-edge); box-shadow: var(--fs-glass-shadow); }
@media (min-width: 992px) { .fs-savebar { bottom: 1rem; } }
/* Order progress: done steps green, the current one blue (Potvrzeno → Předáno). */
.fs-main .merch-step.is-done .merch-step-dot { background-color: #34c759; }
.fs-main .merch-step.is-current .merch-step-dot { background-color: var(--fs-accent-fill); }
/* Merch orders (admin): pipeline stage cells as white tiles, the active one outlined;
   the view switch as a segmented control. */
.fs-main .merch-stage { background: var(--fs-surface); border: 2px solid transparent; border-radius: var(--fs-radius); }
.fs-main .merch-stage.is-active { border-color: var(--fs-accent-fill); background: var(--fs-surface); color: var(--fs-ink); }
/* Admin tables (users, logs, diagnostics): white rounded surface, hairline rows. */
.fs-main .table-responsive:has(> .table) { background: var(--fs-surface); border-radius: var(--fs-radius-lg); }
.fs-main .table { --bs-table-bg: transparent; --bs-table-border-color: var(--fs-hairline); margin-bottom: 0; }

/* ── Desktop page width: content is centred, never pinned to the left edge.
   Wide pages (Domů, Fotky, Merch, Citáty, Profil, admin) up to 1120px; single-column
   pages (.is-narrow) a reading column whose blocks fill it edge to edge. ── */
.fs-main { max-width: 70rem; margin-inline: auto; }
.fs-main.is-narrow { max-width: 50rem; }
.fs-main.is-narrow .fs-page, .fs-main.is-narrow .fs-list, .fs-main.is-narrow .fs-section,
.fs-main.is-narrow .fs-ehero, .fs-main.is-narrow .fs-event-info, .fs-main.is-narrow .fs-desc,
.fs-main.is-narrow .packing-scope, .fs-main.is-narrow .fs-calc-result,
.fs-main.is-narrow .fs-game-tile, .fs-main.is-narrow .fs-seg-lg,
.fs-main.is-narrow .fs-stackbar, .fs-main.is-narrow .fs-vote, .fs-main.is-narrow .fs-expenses { max-width: none; }
.fs-main.is-wide { max-width: none; } /* admin tables (users, diagnostics) use the whole screen */

/* Big screens (1440p, 4K): the whole UI scales up with the window instead of
   floating small in the middle (rem-based sizes all follow the root), and wide
   pages use most of the width so grids gain columns. */
@media (min-width: 1600px) {
  html { font-size: clamp(16px, calc(6px + .62vw), 26px); }
  .fs-main { max-width: min(92vw, 110rem); }
  .fs-main.is-narrow { max-width: 56rem; }
  .fs-main.is-narrow:has(.event-detail-page) { max-width: min(92vw, 110rem); }
  .fs-main.is-wide { max-width: 94vw; }
  .fs-topbar { height: 3.4rem; padding-inline: 2rem; }
  .fs-topnav a { font-size: .9rem; }
  .fs-avatar { width: 2.2rem; height: 2.2rem; }
  .fs-brand img { width: 1.9rem; height: 1.9rem; }
}
/* Event detail: hero and Balení span the page like the two columns under the hero. */
.event-detail-page .fs-ehero, body .fs-main .event-detail-page .packing-scope { max-width: none; }

/* ── Akce: phones show the list or the calendar (Seznam | Kalendář); desktop shows
   both side by side and drops the switch. ───────────────────────────── */
@media (max-width: 991.98px) {
  .fs-akce[data-view="list"] .fs-akce-cal, .fs-akce[data-view="calendar"] .fs-akce-list { display: none; }
}
@media (min-width: 992px) {
  .fs-akce:not(.is-past) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.5rem; align-items: start; }
  .fs-akce-cal { position: sticky; top: 4.5rem; }
  .fs-page:has(.fs-akce:not(.is-past)) .fs-seg-nav { display: none; }
}

/* ── Desktop columns for pages that are one column on phones ───────────── */
.fs-cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fs-col > :first-child { margin-top: 0; }
@media (min-width: 992px) {
  .fs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-cols.is-aside-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .fs-cols .fs-list, .fs-cols .fs-game-tile { max-width: none; }
  .fs-cols .fs-col > .fs-list-header:first-child { margin-top: 0; }
  /* Alko kalkulačka: result (sticky) | participants | parameters. */
  .fs-calc { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
  .fs-calc-side { position: sticky; top: 4.5rem; }
  .fs-calc-result { max-width: none; }
  .fs-calc-result img { height: 140px; }
  .fs-calc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .fs-calc-form .fs-list { max-width: none; }
  .fs-calc .fs-list-header { margin-top: 0; }
  .fs-page:has(.fs-calc), .fs-page:has(.fs-akce) { max-width: none; }
  .fs-akce.is-past { max-width: 56rem; }
}

/* ===========================================================================
   Shared screen parts (2026-10 concept pass): nav bar, Settings-style form
   rows, bottom sheet. Pages add their own bits in their own section below.
   =========================================================================== */

/* Nav bar of a pushed/modal screen: back or Zrušit left, title centred, action right. */
.fs-navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; min-height: 44px; margin: 0 0 .75rem; }
.fs-navbar > :first-child { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "‹ Long event name…" */
.fs-navbar > :last-child { justify-self: end; }
.fs-navbar-title { margin: 0; font-size: 1.0625rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-navbar a, .fs-navbar-btn { color: var(--fs-accent); font-size: 1.0625rem; background: none; border: 0; padding: .25rem 0; }
.fs-navbar a:hover, .fs-navbar-btn:hover { text-decoration: none; color: var(--fs-accent-hover); }
.fs-navbar-btn.is-primary { font-weight: 600; }
.fs-navbar-btn:disabled { opacity: .4; }
/* Long forms keep Zrušit / Uložit in reach: the bar sticks to the top (under the desktop top bar). */
.fs-navbar.is-sticky { position: sticky; top: 0; z-index: 1020; margin-inline: -.75rem; padding: max(.25rem, env(safe-area-inset-top)) .75rem .25rem; background: color-mix(in srgb, var(--fs-page) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@media (min-width: 992px) { .fs-navbar.is-sticky { top: 52px; } }

/* Form rows (iOS Settings): a group is an .fs-list; each row has its label on the
   left and the value right-aligned in muted ink. .is-stack puts a textarea under it. */
.fs-field { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem 1rem; margin: 0; position: relative; color: var(--fs-ink); }
.fs-list .fs-field::before { content: ""; position: absolute; top: 0; left: 1rem; right: 0; border-top: 1px solid var(--fs-hairline); }
.fs-list > .fs-field:first-child::before, .fs-list > :first-child > .fs-field:first-child::before { display: none; }
.fs-field-label { flex: none; max-width: 62%; margin: 0; }
.fs-field-label small { display: block; color: var(--fs-ink-muted); font-size: .8125rem; line-height: 1.3; margin-top: .1rem; }
.fs-field-label.is-grow { flex: 1; }
.fs-input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--fs-ink-muted); text-align: right; font: inherit; padding: .2rem 0; outline: none; }
.fs-input::placeholder { color: var(--fs-ink-muted); opacity: .55; }
/* The optional time beside a date (event form): its own small box, not half the row. */
.fs-input.fs-input-time { flex: 0 0 auto; width: auto; min-width: 4.5rem; margin-left: .75rem; }
.fs-input.fs-input-time[hidden] { display: none; }
.fs-input:focus { color: var(--fs-ink); }
.fs-input::-webkit-date-and-time-value { text-align: right; }
.fs-input.is-invalid { color: #ff3b30; }
.fs-input:disabled { opacity: .5; }
select.fs-input { appearance: none; cursor: pointer; text-align-last: right; padding-right: 1.05rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") right center / .7rem no-repeat; }
.fs-field:has(.fs-input:focus-visible) { box-shadow: inset 0 0 0 2px var(--fs-focus-ring); }
.fs-field.is-stack { flex-direction: column; align-items: stretch; gap: .3rem; }
.fs-field.is-stack .fs-input { text-align: left; color: var(--fs-ink); }
/* Popis: a three-button rich-text editor (event_form.php) and its rendering (.fs-desc). */
/* Popis: the format buttons share the label's row, one segmented group; an active format is the selected segment. */
.fs-rte-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fs-rte-bar { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--fs-recessed); }
.fs-rte-bar button { display: grid; place-items: center; min-width: 2.25rem; height: 1.75rem; padding: 0 .5rem; border: 0; border-radius: 7px; font: inherit; color: var(--fs-ink); background: transparent; }
.fs-rte-bar button .fs-icon { width: 17px; height: 17px; }
.fs-rte-bar button[aria-pressed="true"] { color: var(--fs-accent); background: var(--fs-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.fs-rte { min-height: 6.5rem; white-space: pre-wrap; cursor: text; }
.fs-rte:empty::before { content: attr(data-placeholder); color: var(--fs-ink-muted); opacity: .55; }
.fs-rte ul, .fs-desc ul { margin: .2rem 0; padding-left: 1.4rem; white-space: normal; }
.fs-rte li, .fs-desc li { white-space: pre-wrap; }
textarea.fs-input { resize: vertical; min-height: 5.5rem; }
.fs-field .form-switch { margin: 0 0 0 auto; padding: 0; min-height: 0; flex: none; }
.fs-field .form-switch .form-check-input { margin: 0; float: none; }
.fs-list-footer { margin: -.6rem 1rem 1.1rem; font-size: .8125rem; color: var(--fs-ink-muted); }
.fs-list-footer .invalid-feedback { display: none; margin: .2rem 0 0; color: #ff3b30; }
.fs-list-footer .invalid-feedback:not(:empty) { display: block; }

/* Bottom sheet: a Bootstrap modal that rises from the bottom on phones (iOS sheet),
   a centred card on bigger screens. Teď ne / Zavřít sits top-left. */
.fs-sheet .modal-dialog { max-width: 26rem; }
.fs-sheet .modal-content { border: 0; border-radius: 22px; background: var(--fs-surface); color: var(--fs-ink); }
.fs-sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--fs-hairline); margin: .5rem auto 0; }
.fs-sheet-head { display: flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; }
.fs-sheet-head .fs-navbar-btn { padding: 0; }
.fs-sheet-body { display: grid; justify-items: center; gap: .6rem; padding: .25rem 1.5rem 1rem; text-align: center; }
.fs-sheet-body h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: .25rem 0 0; }
.fs-sheet-body p { color: var(--fs-ink-muted); margin: 0; }
.fs-sheet-icon { width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center; background: #ff3b30; color: #fff; }
.fs-sheet-icon .fs-icon { width: 30px; height: 30px; }
.fs-sheet-media { width: 100%; max-height: 42dvh; border-radius: 14px; background: #000; }
.fs-sheet-foot { display: grid; gap: .5rem; padding: .25rem 1.5rem 1.5rem; }
@media (max-width: 575.98px) {
  .fs-sheet .modal-dialog { margin: 0; max-width: none; min-height: 100%; align-items: flex-end; }
  .fs-sheet .modal-content { border-radius: 22px 22px 0 0; max-height: 94dvh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  .modal.fade.fs-sheet .modal-dialog { transform: translateY(100%); }
  .modal.show.fs-sheet .modal-dialog { transform: none; }
}
@media (min-width: 576px) { .fs-sheet-grab { display: none; } .fs-sheet-head { padding-top: .6rem; } .fs-sheet-grab + .fs-sheet-body { padding-top: 1.5rem; } }
/* Form sheet (.is-form): Zrušit · title · Uložit in an .fs-navbar, then grouped
   rows. Like iOS: grey sheet + white rows in light, elevated greys in dark. */
/* No .modal-body here, so the content itself scrolls (global.css caps every
   modal at the viewport and clips with overflow:hidden). */
.fs-sheet.is-form .modal-content { background: var(--fs-page); padding-inline: 1rem; overflow-y: auto; }
/* .modal-content is a flex column: once it scrolls, an overflow:hidden child
   (any .fs-list) would shrink to a sliver instead of making it scroll further. */
.fs-sheet.is-form .modal-content > * { flex-shrink: 0; }
/* Flex items don't collapse margins: a form's last group would add its gap to the next heading's. */
.fs-sheet.is-form .modal-content > form > :last-child { margin-bottom: 0; }
.fs-sheet.is-form .fs-navbar { margin: .35rem 0 .6rem; }
.fs-sheet.is-form .fs-list { max-width: none; margin-bottom: .9rem; }
[data-bs-theme="dark"] .fs-sheet.is-form .modal-content { background: var(--fs-surface); }
[data-bs-theme="dark"] .fs-sheet.is-form .fs-list { background: var(--fs-recessed); }
.fs-sheet-danger { display: block; width: 100%; border: 0; padding: .75rem 1rem; color: #ff3b30; font-weight: 500; }
[data-bs-theme="dark"] .fs-sheet-danger { color: #ff453a; }
/* Přidat do kalendáře (partials/calendar_subscribe_modal.php, Profil + Akce): one row per feed. */
.fs-cal-sheet .fs-row .fs-mini-btn { flex: none; }
.fs-cal-steps { margin: 0; padding: .75rem 1rem .75rem 2.25rem; font-size: .9375rem; }
.fs-cal-steps li + li { margin-top: .25rem; }
.fs-cal-more { padding: .25rem 1rem 1rem; border-top: 1px solid var(--fs-hairline); font-size: .875rem; }
.fs-cal-more p { color: var(--fs-ink-muted); margin: .6rem 0 0; }
.fs-cal-more h3 { font-size: .9375rem; font-weight: 600; margin: 1rem 0 .4rem; }
/* Registrace: a plain black form screen (no sunset), grouped rows, the button at the bottom. */
.fs-auth-main.is-form { padding-top: max(.75rem, env(safe-area-inset-top)); }
.fs-auth-form { display: flex; flex-direction: column; flex: 1; }
.fs-auth-form .fs-list { max-width: none; }
.fs-auth-submit { margin-top: auto; padding-top: 1rem; display: grid; gap: .5rem; }
.fs-field-sep { color: var(--fs-ink-muted); }
.fs-input-code { flex: 0 0 2.6rem; text-align: left; }
.fs-auth .fs-list-footer { color: rgba(255, 255, 255, .6); }
.fs-auth-main.is-form > .fs-auth-wait { margin-block: 18dvh auto; }

/* ── Nová akce / Upravit akci (concept pass) ── grouped rows, the three vote
   types as big cards with coloured tiles, Termín N groups for multi-date. */
.fs-eform, .fs-eform-help { max-width: 40rem; margin-inline: auto; }
.fs-eform .fs-list { max-width: none; }
.fs-eform textarea.fs-input { field-sizing: content; max-height: 22rem; } /* grows with the text where supported */
.fs-eform .fs-list-header:first-child { margin-top: .5rem; }
.fs-eform .vote-type-grid { margin-bottom: 1rem; }
/* Multi-date: every Termín N is its own group with a small caps title. */
.fs-main .fs-eform .fixed-date-card { border: 0; padding: 0; background: var(--fs-surface); border-radius: var(--fs-radius-lg); margin-bottom: 1rem; }
.fs-main .fs-eform .fixed-date-card-header { margin: 0; padding: .55rem 1rem .1rem; }
/* Termíny k výběru: a quiet round ✕ on each removable card (any beyond the minimum), and a full-width add row. */
.fs-x { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; font-size: .75rem; color: var(--fs-ink-muted); background: var(--fs-recessed); }
.fs-x[hidden] { display: none; }
.fs-add-row { display: block; width: 100%; border: 0; padding: .75rem 1rem; font: inherit; font-weight: 500; text-align: left; color: var(--fs-accent); }
.fs-add-row:disabled { opacity: .45; }
/* Event form dates (event-form.js enhanceDateInput): no browser 📅 / 🕐 icon — a tap anywhere opens the
   picker — and "datum" / "čas" over an empty field instead of dd.mm.rrrr / --:--. */
.fs-eform input[type="date"]::-webkit-calendar-picker-indicator, .fs-eform input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.fs-dt { position: relative; display: flex; flex: 1; min-width: 0; }
.fs-dt.is-time { flex: 0 0 auto; }
.fs-dt:has(> input[hidden]) { display: none; }
.fs-dt-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; color: var(--fs-ink-muted); opacity: .55; pointer-events: none; }
.fs-dt > input[data-empty]:not(:focus) { color: transparent; }
.fs-dt:not(:has(> input[data-empty])) .fs-dt-ph, .fs-dt:has(> input:focus) .fs-dt-ph { display: none; }
.fs-main .fs-eform .fixed-date-title { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fs-ink-muted); }
.fs-eform #primaryDateFields > .fs-field:first-child::before, .fs-eform .fixed-date-fields > .fs-field:first-child::before { display: none; }
.fs-eform .fixed-date-card #primaryDateFields > .fs-field:first-child::before, .fs-eform .fixed-date-card .fixed-date-fields > .fs-field:first-child::before { display: block; }
.fs-eform #fixedDatesSection { margin-bottom: 1rem; }
.fs-eform-qr img { width: 180px; max-width: 100%; align-self: center; border-radius: 10px; background: #fff; padding: 6px; }
.fs-eform-help-body { padding: .25rem 1rem 1rem; border-top: 1px solid var(--fs-hairline); }
.fs-eform-help-body h6 { margin-top: .75rem; }

/* ── Profil (concept pass) ── */
/* Podrobnosti uses the generic summary.fs-row rule; here its chevron turns smoothly. */
.fs-profile .fs-row-chev { transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .fs-profile .fs-row-chev { transition: none; } }
.fs-profile .fs-disclose-body { margin-left: 1rem; padding-right: 1rem; border-top: 1px solid var(--fs-hairline); font-size: .9375rem; }
.fs-profile .fs-disclose-body:not(.fs-kv) { padding-bottom: .9rem; }
/* Hairlines: a disclosure after another row has no icon, so it starts at the text; a row
   under an icon-less row likewise. */
.fs-profile .fs-list > * + .fs-disclose > summary::before { content: ""; position: absolute; top: 0; left: 1rem; right: 0; border-top: 1px solid var(--fs-hairline); }
.fs-profile .fs-row:not(:has(> .fs-row-icon)) + .fs-row::before { left: 1rem; }
/* This device's push problem (user.js): every word of the instructions, never clamped. */
.fs-profile #pushDeviceRow small { display: block; -webkit-line-clamp: unset; }
/* Osobní údaje, edited like Balení: values until Upravit, then inputs with Zrušit · Hotovo
   in the header (user.js toggles .is-editing). Inputs get a recessed fill so edit mode shows. */
/* The pills overhang the header line (negative margin), so the title sits exactly where every other
   .fs-list-header does and lines up with the other column's first header on desktop. */
.fs-profile-info .fs-section-head { flex-wrap: nowrap; align-items: center; margin: 1.25rem 1rem .6rem; }
.fs-col > .fs-profile-info:first-child .fs-section-head { margin-top: 0; }
.fs-profile-info .fs-section-head .fs-list-header { margin: 0 auto 0 0; }
.fs-profile-info .fs-section-head .fs-mini-btn { margin-block: -.3rem; }
.fs-profile-info:not(.is-editing) .fs-edit-only, .fs-profile-info.is-editing .fs-view-only { display: none; }
.fs-field-value { margin-left: auto; min-width: 0; color: var(--fs-ink-muted); text-align: right; overflow-wrap: anywhere; }
.fs-profile-info .fs-input { color: var(--fs-ink); background: var(--fs-recessed); border-radius: 8px; padding: .3rem .6rem; }
/* One label column so the filled boxes start on the same line; 6.5em fits "Bankovní účet" (6.3em). */
.fs-profile-info .fs-field-label { min-width: 6.5em; }
.fs-profile-info .fs-input-code { flex-basis: 3.9rem; } /* 2.6rem of digits + the fill's padding */
/* Phones: a prefixed account number (19-2000145399) needs the whole row, so the inputs wrap under the label. */
@media (max-width: 575.98px) {
  .fs-profile-info.is-editing .fs-field:has(.fs-input-code) { flex-wrap: wrap; row-gap: .4rem; }
  .fs-profile-info.is-editing .fs-field:has(.fs-input-code) > .fs-field-label { flex-basis: 100%; max-width: none; }
}
/* The push forms post back to #push: land below the desktop top bar. */
.fs-profile .fs-list-header { scroll-margin-top: 4.5rem; }
.fs-profile .fs-row-static > form { margin: 0; flex: none; }
.fs-profile .fs-row .form-switch { font-size: 1.2rem; flex: none; min-height: 0; }
.fs-profile .fs-push-state.is-broken { color: #ff3b30; }
.fs-profile .fs-row-danger, .fs-profile .fs-row-danger:hover { justify-content: center; color: #ff3b30; font-weight: 500; }
[data-bs-theme="dark"] .fs-profile .fs-push-state.is-broken, [data-bs-theme="dark"] .fs-profile .fs-row-danger { color: #ff453a; }
.fs-profile .fs-row .fs-chip { flex: none; }
/* Phones: the two .fs-cols columns stack; section spacing comes from the list margins, not the grid gap. */
@media (max-width: 991.98px) { .fs-profile.fs-cols { row-gap: .25rem; } }


/* ── Správa uživatelů (concept pass) ──
   pages/users.php: title + search/actions, one white table (Uživatel · Oprávnění ·
   Naposledy aktivní · Notifikace · Akcí letos), a detail row per user with every
   diagnostic, statistics in a disclosure. Under 992px the table becomes a list. */
.fs-users { margin-inline: auto; } /* full width (.fs-main.is-wide): the table has ten columns */
.fs-users .fs-titlebar { align-items: flex-end; row-gap: .75rem; margin-bottom: 1rem; }
.fs-users .fs-large-title { margin-bottom: .1rem; }
.fs-users-sub { margin: 0; color: var(--fs-ink-muted); }
.fs-users-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fs-users-search { width: 17rem; max-width: 100%; border: 0; border-radius: var(--fs-radius-pill); padding: .4rem .9rem .4rem 2.1rem; font-size: .9375rem; color: var(--fs-ink); background: var(--fs-recessed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") .8rem center / .95rem no-repeat; }
.fs-users-search::placeholder { color: var(--fs-ink-muted); }
.fs-users-search:focus { outline: 2px solid var(--fs-accent); outline-offset: 1px; }
.fs-users-pill { border: 0; border-radius: var(--fs-radius-pill); padding: .25rem .75rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; background: transparent; color: var(--fs-ink-muted); box-shadow: inset 0 0 0 1px var(--fs-hairline); }
.fs-users-pill:hover { color: var(--fs-ink); text-decoration: none; background: var(--fs-recessed); }
.fs-users-note { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; padding: .55rem .6rem .55rem 1rem; border-radius: var(--fs-radius-lg); background: var(--fs-surface); font-size: .9375rem; }
.fs-users-note .fs-mini-btn[aria-pressed="true"] { background: var(--fs-accent-fill); color: #fff; }

.fs-users-card { background: var(--fs-surface); border-radius: var(--fs-radius-lg); overflow: hidden; overflow-x: auto; } /* a narrow desktop scrolls the table, never clips it */
.fs-utable { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.fs-utable th { padding: .75rem .8rem .5rem; text-align: left; vertical-align: bottom; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fs-ink-muted); }
.fs-utable td { padding: .6rem .8rem; border-top: 1px solid var(--fs-hairline); vertical-align: middle; }
.fs-utable .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.fs-urow:not(.is-blocked) { cursor: pointer; } /* the Moc chybných hesel rows have no details to open */
.fs-urow:not(.is-blocked):hover > td { background: color-mix(in srgb, var(--fs-ink) 4%, transparent); }
.fs-urow.is-open > td, .fs-udetail > td { background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface)); }
.fs-uwho { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.fs-users .fs-uavatar { margin: 0; width: 36px; height: 36px; flex: none; font-size: .95rem; background: linear-gradient(180deg, #a5abb8, #858994); }
.fs-uname { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fs-uname b { font-weight: 600; }
.fs-uname small { color: var(--fs-ink-muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrower desktops: headers wrap to two lines and long e-mails ellipsize before the table has to scroll. */
.fs-uname b, .fs-uname small { max-width: 15rem; }
/* Group chip: --g is the group's original colour (users.php); tinted fill, text mixed toward the ink so
   yellow (Admin) stays readable on white and every colour stays readable in dark mode. */
.fs-chip.fs-urole { background: color-mix(in srgb, var(--g, #8e8e93) 18%, transparent); color: color-mix(in srgb, var(--g, #8e8e93) 70%, var(--fs-ink)); }
.fs-users .fs-chip { white-space: nowrap; }
.fs-users .fs-chip.is-no { background: color-mix(in srgb, #ff3b30 15%, transparent); color: #d70015; }
[data-bs-theme="dark"] .fs-users .fs-chip.is-no { color: #ff6961; }
.fs-ucell-seen, .fs-ucell-push, .fs-ucell-cal, .fs-ucell-pass { white-space: nowrap; }
.fs-ucell-push.is-off, .fs-ucell-cal.is-off, .fs-ucell-pass.is-off { color: var(--fs-ink-muted); }
/* Every cell: the value, then the detail in small grey under it (like the e-mail under the name). */
.fs-usub { display: block; margin-top: .1rem; font-size: .8125rem; line-height: 1.3; color: var(--fs-ink-muted); white-space: nowrap; }
.fs-ucell-push .fs-usub, .fs-ucell-cal .fs-usub { padding-left: .85rem; } /* under the text, past the dot */
.fs-ubad .fs-usub { color: var(--fs-ink-muted); }
/* Phone list's status dot (desktop has the columns instead); red + blinking = something to fix. */
.fs-uhealth { display: none; }
.fs-uhealth.is-alert { animation: fs-alert-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fs-uhealth.is-alert { animation: none; } }
.fs-ualert { display: flex; align-items: center; margin: .75rem 0 .1rem; font-size: .875rem; font-weight: 600; color: #d70015; }
[data-bs-theme="dark"] .fs-ualert { color: #ff6961; }
/* 992–1439px: tighter cells and no detail lines (the row's detail still has them), so the ten columns fit from ~1100px. */
@media (min-width: 992px) and (max-width: 1439.98px) { .fs-utable th, .fs-utable td { padding-inline: .4rem; } .fs-utable tr > :first-child { padding-left: 1rem; } .fs-uname b, .fs-uname small { max-width: 12.5rem; } .fs-utable .fs-usub { display: none; } }
.fs-users .fs-dot.is-off { display: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fs-ink-muted); }
.fs-ucell-actions { white-space: nowrap; text-align: right; }
.fs-ulink { border: 0; background: none; padding: 0; font: inherit; color: var(--fs-accent); }
.fs-ulink:hover { color: var(--fs-accent-hover); text-decoration: none; }
.fs-ulink.is-off { color: var(--fs-ink-muted); opacity: .6; cursor: not-allowed; }
.fs-usep { color: var(--fs-ink-muted); margin: 0 .4rem; }
.fs-utable .fs-ucell-chev { width: 2.75rem; padding-left: 0; text-align: right; }
.fs-utoggle { border: 0; background: none; padding: .35rem; display: inline-grid; place-items: center; border-radius: 50%; color: var(--fs-ink-muted); }
.fs-utoggle:focus-visible { outline: 2px solid var(--fs-accent); }
.fs-utoggle .fs-row-chev { transition: transform .15s ease; }
.fs-urow.is-open .fs-utoggle .fs-row-chev { transform: rotate(90deg); }
.fs-utable .fs-udetail > td { padding: 0 1rem 1rem; border-top: 0; cursor: default; }
.fs-urow[hidden] + .fs-udetail { display: none !important; } /* an open user's details leave with the filtered-out row */
.fs-udetail-grid { display: grid; gap: .25rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fs-udetail-grid h3.fs-eyebrow { margin: .6rem 0 .1rem; }
.fs-udetail .fs-kv { font-size: .875rem; }
.fs-udetail .fs-kv > div { padding: .35rem 0; }
.fs-udetail .fs-kv b { font-weight: 500; }
.fs-udetail .fs-kv small { font-size: .8125rem; }
.fs-udetail .fs-kv > div.is-stack b { text-align: left; }
.fs-ubad { color: #d70015; } [data-bs-theme="dark"] .fs-ubad { color: #ff6961; }
.fs-ureset { margin: .5rem 0 0; }
.fs-udetail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.fs-uempty { margin: 0; padding: 1.25rem 1rem; text-align: center; color: var(--fs-ink-muted); }
.fs-users-card:has(.fs-uempty:not([hidden])) thead { display: none; }

/* Statistika's Fakin hra leaderboard: place (medals for the podium), character, name, score. */
.fs-rank .fs-row { gap: .6rem; min-height: 0; padding-block: .5rem; }
.fs-rank .fs-row + .fs-row::before { left: 5rem; }
.fs-rank .fs-avatar { margin: 0; width: 36px; height: 36px; }
.fs-rank-place { flex: none; width: 1.6rem; text-align: center; font-weight: 600; color: var(--fs-ink-muted); font-variant-numeric: tabular-nums; }
.fs-rank-place.is-medal { font-size: 1.4rem; line-height: 1; }
.fs-rank .fs-row-value { color: var(--fs-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-rank .is-me { background: var(--fs-accent-subtle); }
/* Statistika: two cards a row, so each legend has room for its labels on one line. */
.fs-stat-charts.is-pairs, .fs-users-stats .fs-stat-charts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-bottom: 1rem; }
/* Pie cards (fs_render_stat_pie_card) in the grouped-list look: borderless surface. The legend
   row layout lives in global.css (Ongoo/Fly users admin renders the same card). */
.fs-stat-card { border: 0; border-radius: var(--fs-radius-lg); padding: 1rem 1.1rem; gap: 1.1rem; align-items: center; }

/* Správa uživatelů's Statistiky, always above the table: one row of cards on a wide screen,
   a swipeable strip on phones so the user list stays near the top. */
/* Five cards share one row: a smaller donut leaves the legend room for "Posledních 30 dní" / "Superadministrátor". */
.fs-users-stats .fs-stat-card { padding: .9rem 1rem; gap: .85rem; }
.fs-users-stats .fs-pie-wrap, .fs-users-stats .fs-pie-ring { width: 64px; height: 64px; }
.fs-users-stats .fs-pie-hole { inset: 13px; }
.fs-users-stats .fs-pie-row { gap: .4rem; font-size: .8125rem; }
.fs-users-stats .fs-pie-pct { width: 2.3rem; }
@media (max-width: 575.98px) {
  .fs-users-stats .fs-stat-charts { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; scroll-padding-inline: .75rem; } /* bleeds to the screen edge: .fs-main's .75rem gutter */
  .fs-users-stats .fs-stat-charts::-webkit-scrollbar { display: none; }
  .fs-users-stats .fs-stat-card { flex: 0 0 85%; scroll-snap-align: start; }
}

/* ── Diagnostika zpráv: the status tiles are the stats AND the filter (all-time totals, tap to filter
   the table), the limit is one small picker that applies on change. The table stays as it was. ── */
.fs-msg-head { align-items: flex-end; row-gap: .75rem; margin-bottom: 1rem; }
.fs-msg-head .fs-large-title { margin-bottom: .1rem; }
.fs-msg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.fs-msg-tiles { flex: 1 1 34rem; max-width: 52rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.fs-msg-tile { display: grid; gap: .2rem; padding: .7rem .95rem; border: 2px solid transparent; border-radius: var(--fs-radius-lg); background: var(--fs-surface); color: var(--fs-ink); }
.fs-msg-tile:hover { color: var(--fs-ink); text-decoration: none; border-color: var(--fs-hairline); }
.fs-msg-tile.is-active { border-color: var(--fs-accent-fill); }
.fs-msg-tile:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.fs-msg-tile-label { font-size: .8125rem; color: var(--fs-ink-muted); white-space: nowrap; }
.fs-msg-tile-count { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fs-msg-limit { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem auto; font-size: .875rem; color: var(--fs-ink-muted); white-space: nowrap; }
.fs-msg-limit label { margin: 0; }
.fs-msg-limit .form-select { width: auto; border: 0; border-radius: var(--fs-radius-pill); padding-block: .3rem; padding-left: .85rem; background-color: var(--fs-surface); color: var(--fs-ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .fs-msg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-msg-limit { margin-left: 0; }
}
/* The log table: desktop keeps the columns (widths that used to be inline styles)… */
.fs-msg-table .fs-mcell-msg { min-width: 18rem; max-width: 34rem; }
.fs-msg-table .fs-mcell-err { min-width: 14rem; max-width: 24rem; }
/* …phones and tablets get one card per message, read like a notification:
   when · status / title + text / recipient · type / error / OneSignal. Empty "—" cells drop out. */
@media (max-width: 991.98px) {
  .fs-msg-table thead { display: none; }
  .fs-msg-table, .fs-msg-table tbody { display: block; }
  .fs-msg-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when stav" "msg msg" "who type" "err err" "os os"; gap: .3rem .75rem; padding: .8rem 1rem; border-top: 1px solid var(--fs-hairline); }
  .fs-msg-table tbody tr:first-child { border-top: 0; }
  .fs-msg-table tbody td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  .fs-msg-table .fs-mcell-id { display: none; }
  .fs-msg-table .fs-mcell-when { grid-area: when; align-self: center; font-size: .8125rem; color: var(--fs-ink-muted); }
  .fs-msg-table .fs-mcell-when > div { display: inline; }
  .fs-msg-table .fs-mcell-when > div + div::before { content: " · "; }
  .fs-msg-table .fs-mcell-stav { grid-area: stav; justify-self: end; }
  .fs-msg-table .fs-mcell-msg { grid-area: msg; }
  .fs-msg-table .fs-mcell-who { grid-area: who; font-size: .875rem; }
  .fs-msg-table .fs-mcell-type { grid-area: type; align-self: center; font-size: .8125rem; color: var(--fs-ink-muted); text-align: right; }
  .fs-msg-table .fs-mcell-who .small, .fs-msg-table .fs-mcell-type .small { display: none; } /* the #ids; search still finds them */
  .fs-msg-table .fs-mcell-err { grid-area: err; font-size: .8125rem; color: var(--fs-ink-muted); }
  .fs-msg-table tr[data-state="failed"] .fs-mcell-err { color: #d70015; }
  [data-bs-theme="dark"] .fs-msg-table tr[data-state="failed"] .fs-mcell-err { color: #ff6961; }
  .fs-msg-table .fs-mcell-os { grid-area: os; font-size: .75rem; overflow-wrap: anywhere; }
  /* OneSignal stats on one line under the ID: Gateway · Kliknuto · ↻ Obnovit (the script joins them with <br>). */
  .fs-msg-table .fs-mcell-os br { display: none; }
  .fs-msg-table .fs-mcell-os code { display: block; margin-bottom: .15rem; }
  .fs-msg-table .fs-mcell-os .fs-notif-stats, .fs-msg-table .fs-mcell-os .fs-notif-stats + div { display: inline; }
  .fs-msg-table .fs-mcell-os .fs-notif-stats span { margin-right: .6rem; }
  .fs-msg-table .fs-mcell-err:has(> .text-muted:only-child), .fs-msg-table .fs-mcell-os:has(> .text-muted:only-child) { display: none; }
}

/* Phones and tablets: each user is one list row — avatar, name, role, dot, chevron. */
@media (max-width: 991.98px) {
  .fs-users .fs-titlebar > :first-child, .fs-users-tools, .fs-users-search { width: 100%; }
  .fs-users-search { flex: 1 1 100%; }
  .fs-utable thead { display: none; }
  .fs-utable, .fs-utable tbody { display: block; }
  .fs-utable { margin-top: -1px; } /* the card clips the first visible row's hairline, whichever row search leaves first */
  .fs-utable tr.fs-urow:not([hidden]) { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem .55rem 1rem; position: relative; }
  .fs-utable .fs-urow::before { content: ""; position: absolute; top: 0; right: 0; left: 4.15rem; border-top: 1px solid var(--fs-hairline); }
  .fs-utable .fs-urow > td { display: block; padding: 0; border: 0; background: none; }
  .fs-urow.is-open { background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface)); }
  .fs-utable .fs-ucell-user { flex: 1; min-width: 0; }
  .fs-uname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Phone row: avatar · name · last login + status dot · ›, a fresh registration gets Schválit instead. */
  .fs-utable .fs-urow > td.fs-ucell-role, .fs-utable .fs-urow > td.fs-ucell-push, .fs-utable .fs-urow > td.fs-ucell-events, .fs-utable .fs-urow > td.fs-ucell-pass, .fs-utable .fs-urow > td.fs-ucell-cal, .fs-utable .fs-urow:not(.is-waiting) > td.fs-ucell-actions, .fs-utable .fs-urow.is-waiting > td.fs-ucell-seen { display: none; }
  .fs-utable .fs-urow > td.fs-ucell-seen { display: flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--fs-ink-muted); }
  .fs-utable .fs-urow.is-blocked > td.fs-ucell-pass, .fs-utable .fs-urow.is-blocked > td.fs-ucell-actions { display: block; } /* Moc chybných hesel: the count and Odblokovat are the point */
  .fs-ucell-seen .fs-usub { display: none; }
  .fs-users .fs-uhealth.fs-dot { display: inline-block; margin: 0; } /* beats the desktop .fs-dot.is-off hiding */
  .fs-users-wide { display: none; }
  .fs-utable .fs-ucell-chev { width: auto; }
  .fs-utable tr.fs-udetail:not([hidden]) { display: block; }
  .fs-utable .fs-udetail > td { display: block; padding: 0 1rem 1rem; }
  .fs-udetail-actions .fs-usep { display: none; }
  .fs-udetail-actions .fs-ulink { padding: .35rem .95rem; border-radius: var(--fs-radius-pill); background: var(--fs-accent-subtle); font-size: .875rem; font-weight: 600; }
  .fs-udetail-actions .fs-ulink.is-off { background: var(--fs-recessed); }
}

/* ── Merch (concept pass) ── shop tiles + product sheet, Košík, Moje objednávky.
   merch.css and the pages' inline <style> load after this file, so rules that
   compete with them are scoped under .fs-main or .merch-card. */
/* Moje objednávky + Košík: icon pills; Košík goes solid once it holds something,
   its count a white bubble after the word. Phones keep just the round icons so the
   title fits, and the count becomes a red badge on the corner. */
.merch-titlebar .fs-titlebar-actions { gap: .5rem; }
.merch-action { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: var(--fs-radius-pill); background: var(--fs-accent-subtle); color: var(--fs-accent); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.merch-action:hover { color: var(--fs-accent-hover); text-decoration: none; }
.merch-action .fs-icon { width: 1.15rem; height: 1.15rem; }
.merch-action.is-full, .merch-action.is-full:hover { background: var(--fs-accent-fill); color: #fff; }
.merch-badge { min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: var(--fs-radius-pill); background: #fff; color: var(--fs-accent-fill); font-size: .75rem; font-weight: 700; line-height: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
/* On the light Moje objednávky pill the count is a blue bubble (Košík's is white on its solid pill). */
.merch-badge.is-accent { background: var(--fs-accent-fill); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .merch-action:active { transform: var(--fs-press); } }
@media (max-width: 575.98px) {
  .merch-action { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; }
  .merch-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .merch-badge { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; background: #ff3b30; color: #fff; box-shadow: 0 0 0 2px var(--fs-page); font-size: .6875rem; line-height: 1.15rem; }
}
/* Tiles: photo on a neutral square, name, price or status. Two up on phones. */
/* Shop: one card per product with its order form on it (a handful of products, so
   ordering straight from the card beats opening each one). 1 / 2 / 3 columns; the
   Do košíku row sits at the bottom, so it lines up across a row of cards. */
/* merch_picture_html()'s wrapper: the <img> inside lays out as if it stood alone. */
.merch-pic { display: contents; }
.merch-cards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .merch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .merch-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.merch-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--fs-radius-lg); background: var(--fs-surface); scroll-margin-top: 4.5rem; }
.merch-card.is-archived .merch-card-media, .merch-card.is-archived .merch-card-body { opacity: .55; }
/* The whole photo, uncropped (never cut a sleeve off), on white: product shots
   bring their own white background, so the bars beside a portrait one vanish. */
.merch-card-media { position: relative; aspect-ratio: 4 / 3; background: #fff; }
.merch-card-media .merch-gallery { border-radius: 0; }
.merch-card-empty { display: grid; place-items: center; height: 100%; background: var(--fs-recessed); color: var(--fs-ink-muted); }
.merch-card-empty .fs-icon { width: 2.5rem; height: 2.5rem; opacity: .45; }
.merch-card-body { display: flex; flex-direction: column; gap: .9rem; flex: 1; margin: 0; padding: 1rem 1.1rem 1.1rem; }
.merch-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.merch-card-name { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.merch-card-price { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.merch-card-info, .merch-card-desc { margin: -.5rem 0 0; font-size: .9375rem; color: var(--fs-ink-muted); }
.merch-card-info.is-blue { color: var(--fs-accent); }
.merch-card-info.is-orange { color: #b25000; }
[data-bs-theme="dark"] .merch-card-info.is-orange { color: #ff9f0a; }
.merch-card-info + .merch-card-desc, .merch-card-desc + .merch-card-desc { margin-top: -.75rem; }
/* Size chips: an available size is a solid pill with bold text; one you can't pick
   (sold out — also struck through — or all of it already in your basket) is a
   hollow ghost with a dashed outline, so the two read apart at a glance. */
.merch-card .merch-size-options .btn { border-radius: var(--fs-radius-pill) !important; min-width: 3.1rem; padding: .4rem .8rem; font-weight: 600; background: var(--fs-recessed); border: 1px solid transparent; color: var(--fs-ink); }
.merch-card .merch-size-options .btn:hover { border-color: var(--fs-accent); }
.merch-card .merch-size-options .btn-check:disabled + .btn { background: transparent; border: 1px dashed var(--fs-hairline); color: var(--fs-ink-muted); font-weight: 400; opacity: .6; }
.merch-card .merch-option-picker .btn { border-radius: var(--fs-radius) !important; border: 1px solid transparent; background: var(--fs-recessed); color: var(--fs-ink); }
.merch-card-buy { display: flex; align-items: center; gap: .6rem; margin-top: auto; }
.merch-card-buy .btn { flex: 1; border-radius: var(--fs-radius-pill); padding: .5rem 1rem; font-weight: 600; }
.merch-card-note { margin: -.45rem 0 0; font-size: .8125rem; color: var(--fs-ink-muted); text-align: center; }
.merch-card-note:empty { display: none; }
.merch-card-reason { margin: auto 0 0; padding: .55rem 1rem; border-radius: var(--fs-radius-pill); background: var(--fs-recessed); color: var(--fs-ink-muted); font-weight: 600; text-align: center; }
/* Everything left is already in the basket: the reason is a way there. */
a.merch-card-reason { color: var(--fs-accent); }
a.merch-card-reason:hover { background: var(--fs-accent-subtle); color: var(--fs-accent); text-decoration: none; }
/* Pieces of a size already in the basket: a count badge on the chip's corner, like the Košík one. */
.merch-card .merch-size-options .btn, .merch-card-buy .btn { position: relative; } /* anchors the 🛍 badge (a sizeless product's sits on Do košíku) */
.merch-size-badge { position: absolute; top: -.5rem; right: -.6rem; display: inline-flex; align-items: center; gap: .15rem; height: 1.3rem; padding: 0 .4rem 0 .3rem; border-radius: var(--fs-radius-pill); background: var(--fs-accent-fill); color: #fff; box-shadow: 0 0 0 2px var(--fs-surface); font-size: .7rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.merch-size-badge .fs-icon { width: .8rem; height: .8rem; }
/* Velikostní tabulky: "Nová tabulka" is a list row that folds the form open. */
.merch-chart-new { max-width: none; margin-bottom: 1.5rem; }
.merch-chart-new-body { padding: 1rem; border-top: 1px solid var(--fs-hairline); }
/* Upravit / Nové zboží (merch_item.php): the event form's layout (.fs-eform / .fs-esec). */
.merch-item-page .fs-field-label small code { font-size: .95em; }
.merch-mode { flex: 1; max-width: 17rem; margin-left: auto; }
.merch-mode .fs-seg-opt { margin: 0; cursor: pointer; }
[data-bs-theme="dark"] .merch-mode .btn-check:checked + .fs-seg-opt { background: #636366; }
.merch-mode .btn-check:focus-visible + .fs-seg-opt { outline: 2px solid var(--fs-accent); outline-offset: 1px; }
.merch-field-note { min-height: 0; padding-block: .55rem; font-size: .8125rem; color: var(--fs-ink-muted); display: block; }
/* Photo grids (item photos, option pictures): filled squares, so photos and the ＋
   tile line up as one grid. Every change is a form control and saves with Uložit. */
.merch-photos { padding: .75rem; }
.merch-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .75rem; }
.merch-photo-tile { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--fs-recessed); object-fit: cover; }
.merch-ph { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem; min-width: 0; }
.merch-ph-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--fs-ink-muted); }
/* ✕ on the corner = delete on save; the tile dims and outlines red until then. */
.merch-ph-del { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; cursor: pointer; }
.merch-ph-del:has(input:checked) { background: #ff3b30; }
.merch-ph:has(.merch-ph-del input:checked) .merch-photo-tile { opacity: .35; outline: 2px solid #ff3b30; outline-offset: -2px; }
.merch-ph:has(.merch-ph-del input:checked) .merch-ph-cover { visibility: hidden; }
/* Main photo: a radio; the chosen one reads "Hlavní", the others offer "Jako hlavní". */
.merch-ph-cover { margin: 0; cursor: pointer; }
.merch-ph-cover span { display: inline-block; padding: .1rem .6rem; border-radius: var(--fs-radius-pill); font-size: .75rem; font-weight: 600; color: var(--fs-accent); }
.merch-ph-cover .is-on, .merch-ph-cover:has(input:checked) .is-off { display: none; }
.merch-ph-cover:has(input:checked) .is-on { display: inline-block; background: var(--fs-accent-subtle); }
.merch-ph-del:has(input:focus-visible), .merch-ph-cover:has(input:focus-visible) span, .merch-opt-pick:focus-within .merch-photo-tile { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
/* The ＋ tile ends the photo grid; it is the label of a hidden multi-file input. */
.merch-photo-add { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin: 0; border-radius: 10px; background: var(--fs-accent-subtle); color: var(--fs-accent); font-size: 2rem; font-weight: 300; line-height: 1; cursor: pointer; }
.merch-photo-add:focus-within { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
/* Option picture: the tile is the file input's label; an empty one shows ＋. */
.merch-opt-pick { width: 100%; margin: 0; cursor: pointer; }
.merch-opt-empty { color: var(--fs-accent); font-size: 1.5rem; font-weight: 300; }
.fs-sheet-danger.is-restore { color: var(--fs-accent); }
/* Admin row under the title: Objednávky (with the count of orders waiting) and
   Velikostní tabulky. Přidat zboží is the grid's last, dashed card. */
.merch-admin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.25rem 0 1.25rem; }
.merch-admin-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: var(--fs-radius-pill); background: var(--fs-surface); color: var(--fs-ink); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.merch-admin-pill:hover { color: var(--fs-accent); text-decoration: none; }
.merch-admin-pill .fs-icon { width: 1rem; height: 1rem; color: var(--fs-ink-muted); }
.merch-admin-count { min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: var(--fs-radius-pill); background: #ff9500; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.merch-card-add { align-items: center; justify-content: center; gap: .4rem; min-height: 16rem; border: 2px dashed var(--fs-hairline); background: transparent; color: var(--fs-accent); font-weight: 600; }
.merch-card-add span { font-size: 2.5rem; font-weight: 300; line-height: 1; }
.merch-card-add:hover { background: var(--fs-accent-subtle); color: var(--fs-accent); text-decoration: none; }
/* One-column phones: the add card is a short row instead of a product-sized empty box. */
@media (max-width: 639.98px) {
  .merch-card-add { flex-direction: row; min-height: 4.5rem; }
  .merch-card-add span { font-size: 1.75rem; }
}
/* Admin: a pencil on the photo's corner (opens merch_item.php). */
.merch-card-edit, .fs-cover-x { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--fs-ink); background: var(--fs-glass); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: var(--fs-glass-shadow); }
.merch-card-edit .fs-icon { width: 1rem; height: 1rem; }
.merch-card-edit:hover, .merch-card-edit:focus-visible { color: var(--fs-accent); }
.merch-field { position: relative; display: grid; gap: .55rem; }
/* "Tabulka velikostí ›" is pinned to the Velikost header; the table opens under the chips. */
.merch-chart > summary { position: absolute; top: -.1rem; right: 0; list-style: none; cursor: pointer; color: var(--fs-accent); font-size: .875rem; }
.merch-chart > summary::-webkit-details-marker { display: none; }
.merch-chart:not([open]) { margin-top: -.55rem; }
.merch-chart .table { font-size: .875rem; }
/* Košík: grouped lines with a − n + stepper, a total row, Objednat in the glass bar. */
.merch-lines .fs-row + .fs-row::before { left: 4.75rem; }
.merch-lines form { margin: 0; flex: none; }
.fs-stepper button:disabled { color: var(--fs-ink-muted); opacity: .4; cursor: default; }
.merch-total > b { font-size: 1.0625rem; font-weight: 700; }
.merch-checkout .btn { flex: none; font-weight: 600; }
.fs-eform-save .btn { flex: none; font-weight: 600; padding-inline: 1.4rem; border-radius: var(--fs-radius-pill); } /* the event form's Uložit bar */
/* …shown only with unsaved changes: event_form.php's script sets .is-clean otherwise (without JS it just stays). */
.fs-eform-save { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.fs-eform-save.is-clean { visibility: hidden; opacity: 0; transform: translateY(.75rem); }
@media (prefers-reduced-motion: reduce) { .fs-eform-save { transition: none; } }
/* Moje objednávky: one card per order — number and date, the five-step bar,
   what is in it, the sum, the next step; an unpaid one gets an orange pay row. */
.merch-orders { display: grid; gap: .75rem; }
/* One order per row, full width of the page's narrow column: two side by side
   squeezed the payment table until names and the message wrapped. */
.merch-order { display: grid; gap: .6rem; }
.merch-order p { margin: 0; }
.merch-order > .fs-chip { justify-self: start; }
.merch-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.merch-order-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.merch-order-no { color: var(--fs-ink-muted); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.merch-order .merch-steps { margin: .15rem 0 .2rem; }
/* What was ordered: a row per line (thumb · name + details · line total), then Celkem. */
.merch-order-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.merch-order-lines li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--fs-hairline); }
.merch-order-lines li:first-child { border-top: 0; padding-top: .2rem; }
.merch-order-lines .merch-thumb { width: 2.5rem; height: 2.5rem; border-radius: 8px; }
.merch-order-line-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.merch-order-line-text b { font-weight: 600; }
.merch-order-line-text small { color: var(--fs-ink-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.merch-order-line-price { display: grid; flex: none; justify-items: end; font-weight: 600; line-height: 1.3; }
.merch-order-line-price small { color: var(--fs-ink-muted); font-size: .8125rem; font-weight: 400; white-space: nowrap; }
.merch-order-total { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding-top: .55rem; border-top: 1px solid var(--fs-hairline); font-weight: 700; }
.merch-paid { color: #248a3d; }
[data-bs-theme="dark"] .merch-paid { color: #30d158; }
.merch-order-next { color: var(--fs-ink-muted); font-size: .875rem; }
/* Unpaid order: the payment panel in the card — QR beside account, amount and
   message, Uložit QR under them; stacked on a narrow phone. Tap the QR to enlarge. */
.merch-pay { display: grid; gap: .75rem; padding: .75rem; margin: .1rem -.35rem 0; border-radius: var(--fs-radius); background: var(--fs-recessed); }
.merch-pay-head { display: flex; align-items: center; gap: .75rem; }
.merch-pay-head .fs-row-text b { font-weight: 600; }
.merch-pay-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.merch-pay-qr { display: block; width: 150px; border-radius: 12px; background: #fff; padding: 6px; }
.merch-pay-side { display: grid; gap: .6rem; }
.merch-pay-kv { font-size: .875rem; }
.merch-pay-kv > div { padding: .4rem 0; }
.merch-pay-kv code { color: var(--fs-ink); user-select: all; font-size: .8125rem; }
.merch-pay-side .btn { justify-self: start; padding: .4rem 1.1rem; font-weight: 600; }
.merch-pay-note { color: var(--fs-ink-muted); font-size: .875rem; }
@media (max-width: 459.98px) {
  .merch-pay-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .merch-pay-qr { width: 180px; }
  .merch-pay-side { width: 100%; }
  .merch-pay-side .btn { justify-self: stretch; }
}
.merch-order-total + .merch-order-next { margin-top: -.35rem; }
/* Sections (Akce · Účastníci · Termín · Peníze · Balení · Nápověda). Phones: the title is a
   list header, the hint is hidden. A section whose fields are all hidden by event-form.js
   (inline display:none — Peníze and Balení before there is one fixed date) disappears too. */
.fs-esec-head h2 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fs-ink-muted); margin: 1.25rem 1rem .4rem; }
.fs-esec-head p { display: none; }
.fs-esec:not(:has(> .fs-esec-body > :not([style*="none"]))) { display: none; }
.fs-esec-body > :last-child { margin-bottom: 0; }
.fs-esec + .fs-esec { margin-top: 1rem; }
/* Desktop: the concept's desktop form — large title left, Zrušit / Uložit pills right (pinned under
   the top bar); each section a row: title and hint on the left, its fields on the right. */
@media (min-width: 992px) {
  .fs-main .fs-eform { max-width: 64rem; }
  /* The page's own header only — a sheet inside the form (Nová šablona) keeps the sheet look. */
  .fs-eform .fs-navbar:not(.modal *) { display: flex; align-items: center; gap: .5rem; padding-block: .6rem; }
  .fs-eform .fs-navbar-title:not(.modal *) { order: -1; flex: 1; text-align: left; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
  .fs-eform .fs-navbar > a:not(.modal *), .fs-eform .fs-navbar-btn.is-primary:not(.modal *) { border-radius: var(--fs-radius-pill); padding: .4rem 1.1rem; font-size: .9375rem; font-weight: 600; }
  .fs-eform .fs-navbar > a:not(.modal *) { background: var(--fs-accent-subtle); }
  .fs-eform .fs-navbar-btn.is-primary:not(.modal *), .fs-eform .fs-navbar-btn.is-primary:not(.modal *):hover { background: var(--fs-accent-fill); color: #fff; }
  .fs-esec { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(0, 2.8fr); gap: 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--fs-hairline); }
  .fs-esec + .fs-esec { margin-top: 0; }
  .fs-esec:first-of-type { border-top: 0; padding-top: .5rem; }
  .fs-esec-head { position: sticky; top: 8.5rem; align-self: start; }
  .fs-esec-head h2 { font-size: 1.15rem; font-weight: 700; text-transform: none; letter-spacing: -.01em; color: var(--fs-ink); margin: .6rem 0 .3rem; }
  .fs-esec-head p { display: block; margin: 0; font-size: .875rem; color: var(--fs-ink-muted); }
  .fs-eform-qr img { width: 150px; }
}
.fs-esec-body > .fs-eform-help { max-width: none; margin: 0; }

/* Desktop avatar menu (partials/header.php): profile on top, then what the phone keeps under Více. */
.fs-me { margin-left: auto; flex: none; }
.fs-me > .fs-avatar { border: 0; padding: 0; }
.fs-me-menu { min-width: 16.5rem; padding: .35rem; border: 1px solid var(--fs-hairline); border-radius: 14px; box-shadow: var(--fs-glass-shadow); }
.fs-me-menu .fs-row { min-height: 0; padding: .5rem .6rem; border-radius: 10px; }
.fs-me-menu .dropdown-item { display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border-radius: 8px; }
.fs-me-menu .dropdown-item .fs-icon { width: 18px; height: 18px; color: var(--fs-ink-muted); }
.fs-me-menu .dropdown-item.active .fs-icon, .fs-me-menu .dropdown-item:active .fs-icon { color: inherit; }
.fs-me-menu .dropdown-header { padding: .6rem .6rem .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fs-ink-muted); }
.fs-me-menu .dropdown-divider { margin: .35rem .25rem; border-color: var(--fs-hairline); }
.fs-me-menu form { margin: 0; }
.fs-me-menu .is-danger { color: #ff3b30; font-weight: 500; }
[data-bs-theme="dark"] .fs-me-menu .is-danger { color: #ff453a; }

/* ── Log akcí (fs-ongoo pages/action_log.php): Změny = a day-grouped feed, each row a <details>
   whose body holds the raw params — two lines on phones ("Mára · Záloha zaplacena" / komu · akce),
   table columns on desktop (same markup: the line wrappers become display: contents). Využití =
   plain lists in columns. Area pills are the filter AND the counts (like the Diagnostika tiles). ── */
.fs-alog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .9rem; }
.fs-alog-bar .fs-seg { flex: 0 1 auto; }
.fs-alog-bar .fs-seg-opt { padding-inline: .9rem; }
.fs-alog-who { margin: 0 0 0 auto; }
.fs-alog-areas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.fs-alog-area { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .8rem; border-radius: var(--fs-radius-pill); background: var(--fs-surface); color: var(--fs-ink); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.fs-alog-area b { font-weight: 600; color: var(--fs-ink-muted); font-variant-numeric: tabular-nums; }
.fs-alog-area:hover { color: var(--fs-ink); text-decoration: none; background: var(--fs-recessed); }
.fs-alog-area.is-on { background: var(--fs-accent-fill); color: #fff; }
.fs-alog-area.is-on b { color: inherit; opacity: .8; }
.fs-alog-area:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.fs-chip.is-admin { background: var(--fs-accent-subtle); color: var(--fs-accent); vertical-align: .1em; }
.fs-alog-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: -.25rem 0 1rem; font-size: .875rem; }
.fs-alog-filter { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .35rem .2rem .75rem; border-radius: var(--fs-radius-pill); background: var(--fs-accent-subtle); color: var(--fs-accent); font-weight: 600; }
.fs-alog-filter a { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; color: inherit; text-decoration: none; }
.fs-alog-filter a:hover { background: color-mix(in srgb, var(--fs-accent) 18%, transparent); }
.fs-alog-empty { color: var(--fs-ink-muted); }
.fs-alog .fs-list { max-width: 48rem; }
.fs-alog-item { position: relative; }
.fs-alog-item + .fs-alog-item::before { content: ""; position: absolute; top: 0; right: 0; left: 3.75rem; border-top: 1px solid var(--fs-hairline); z-index: 1; }
.fs-alog-av { margin: 0; align-self: flex-start; margin-top: .1rem; }
.fs-alog-line { overflow-wrap: anywhere; }
.fs-alog-line b { font-weight: 600; }
.fs-alog-line .fs-count { height: 1.2rem; vertical-align: .05em; }
.fs-alog-what::before, .fs-alog-sub > * + *::before { content: " · "; font-weight: 400; }
.fs-alog-head > :not(:first-child) { display: none; }
.fs-alog-item .fs-row-value { font-variant-numeric: tabular-nums; align-self: flex-start; margin-top: .1rem; }
.fs-alog-item[open] > summary { background: var(--fs-recessed); }
.fs-alog-more { padding: .6rem 1rem .9rem 3.75rem; background: var(--fs-recessed); font-size: .8125rem; }
.fs-alog-more dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem .9rem; margin: 0; }
.fs-alog-more dt { font-weight: 500; color: var(--fs-ink-muted); }
.fs-alog-more dd { margin: 0; overflow-wrap: anywhere; }
.fs-alog-more-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.fs-alog-more-actions:empty { display: none; }
.fs-alog-pager { display: flex; justify-content: space-between; gap: .5rem; max-width: 48rem; margin: .5rem 0 1rem; }
.fs-alog-pager > :only-child { margin-left: auto; }
.fs-alog .fs-cols .fs-list { max-width: none; }
.fs-alog-cols .fs-row + .fs-row:not(:has(.fs-avatar))::before { left: 1rem; } /* no icon column to inset past */
.fs-alog-subday { margin-top: .75rem; }
@media (max-width: 575.98px) {
  .fs-alog-bar .fs-seg { flex: 1 1 100%; max-width: none; }
  .fs-alog-who { margin: 0; }
  /* One swipeable line of pills, bleeding to the screen edge, so the feed starts high. */
  .fs-alog-areas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
  .fs-alog-areas::-webkit-scrollbar { display: none; }
  .fs-alog-more { padding-left: 1rem; }
}
/* Desktop: every row is its own grid on the same tracks (fixed or fr only, never content-sized),
   so the columns line up with .fs-alog-head across rows and day groups. */
@media (min-width: 992px) {
  .fs-alog .fs-list, .fs-alog-pager { max-width: none; }
  .fs-alog-head, .fs-alog-row { display: grid; grid-template-columns: 5.5rem 32px minmax(6rem, .55fr) minmax(11rem, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); column-gap: .9rem; align-items: center; }
  .fs-alog-head { padding-inline: 1rem; margin-inline: 0; }
  .fs-alog-head > :not(:first-child) { display: block; }
  .fs-alog-head > :nth-child(2) { grid-column: 2 / 4; }
  .fs-alog-head > :nth-child(n+2) { font-weight: 500; }
  .fs-alog-row { min-height: 48px; padding-block: .45rem; }
  .fs-alog-row .fs-row-text, .fs-alog-row .fs-alog-line, .fs-alog-row .fs-alog-sub { display: contents; }
  .fs-alog-row .fs-alog-time { grid-area: 1 / 1; align-self: center; margin: 0; font-size: .8125rem; color: var(--fs-ink-muted); }
  .fs-alog-row .fs-alog-av { grid-area: 1 / 2; align-self: center; margin: 0; }
  .fs-alog-row .fs-alog-actor { grid-area: 1 / 3; }
  .fs-alog-row .fs-alog-what { grid-area: 1 / 4; }
  .fs-alog-row .fs-alog-obj { grid-area: 1 / 5; color: var(--fs-ink); }
  .fs-alog-row .fs-alog-ev { grid-area: 1 / 6; }
  .fs-alog-row .fs-alog-actor, .fs-alog-row .fs-alog-obj, .fs-alog-row .fs-alog-ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fs-alog-row .fs-alog-sub > * { font-size: .875rem; }
  .fs-alog-what::before, .fs-alog-sub > * + *::before { content: none; }
  .fs-alog-item + .fs-alog-item::before { left: 1rem; }
  .fs-alog-more { padding-left: calc(1rem + 5.5rem + 32px + 1.8rem); }
}
@media (min-width: 1200px) {
  .fs-alog-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}