/* ─────────────────────────────────────────────────────────────
   SIDE MENU — tournament pages (data-sidebar on <html>, layouts.tournament) on top of whistline.css.
   Only Domov, Program, Poradie and O turnaji carry .hdr[data-tab].
   ───────────────────────────────────────────────────────────── */

/* the scrollbar always has its space — otherwise a short page without one shifts sideways */
:root[data-sidebar]{scrollbar-gutter:stable}

/* ── Side menu: header, menu on the left in a glass panel (from 1024 px) ── */
.vside{display:none}
/* panel width as a length so it can animate: on collapse and expand both the panel and the content beside it follow it */
@property --side-w{syntax:"<length>";inherits:true;initial-value:0px}
/* below 1024 px Domov has the heading „Domov“ in the bar like the other tabs, without the tournament picker pill */
@media (max-width:1023px){
  :root[data-sidebar] .hdr[data-tab="home"] #brand{display:none}
}
@media (min-width:1024px){
  :root[data-sidebar]{--side-w:232px}
  :root[data-sidebar] body{padding-inline-start:calc(var(--side-w) + 8px)}
  /* the header and its blur run full width under the panel, its column sits over the content */
  :root[data-sidebar] .hdr{padding-inline-start:calc(var(--side-w) + 8px)}
  :root[data-sidebar] :is(.navhold,.navfade){display:none}
  :root[data-sidebar] main.view{padding-bottom:72px}

  /* panel */
  /* collapsed panel: 10 px padding as when open and 32 × 32 rows, so the icon stays 8 px from the row edge (1 + 10 + 32 + 10 + 1) */
  :root[data-sidebar][data-side="collapsed"]{--side-w:54px}
  /* collapse and expand like the admin sidebar (app.css, --sidebar-*; step order in whistline.js, wireSideToggle):
     on collapse the labels fade out (150 ms), then the panel narrows (250 ms); on expand it widens first and the labels
     appear only after (the width animates only during the move, data-side-busy, not on load). Rows keep their left edge, so the icons, the tournament crest and the highlight stay in place. */
  :root[data-sidebar][data-side-busy]{transition:--side-w .25s var(--ease-out)}
  :is(.vside-name,.vside-link > span:not(.vside-mode,.vside-mark),.vside-mode > span,.vside-powered span){
    transition:opacity .15s var(--ease-out)}
  :root:is([data-side="collapsed"],[data-side-folding],[data-side-unfolding]) :is(.vside-name,.vside-link > span:not(.vside-mode,.vside-mark),.vside-mode > span,.vside-powered span){
    opacity:0}
  @media (prefers-reduced-motion: reduce){:root[data-sidebar][data-side-busy]{transition:none}}
  /* panel glass without backdrop blur: content never goes under the panel (body is offset by --side-w), only the canvas is beneath it */
  :root[data-sidebar] .vside{display:flex;flex-direction:column;gap:14px;position:fixed;z-index:35;top:8px;bottom:8px;left:8px;
    width:var(--side-w);padding:10px;border-radius:20px;overflow:hidden auto;scrollbar-width:none;
    background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
  /* panel rows like admin sidebar items (app.css, [data-flux-sidebar-item]): 32 px, 8 px on the sides, radius 10,
     14 px / 500 also when selected, dark text (ink), 16 px muted icon (ink-3); on hover a highlight (fill) and the icon
     darkens to ink; selected is highlighted (fill-2) with the icon in ink. */
  /* tournament above the tabs: logo (40 px, radius 10) always on top, its left edge on the tab icons' axis (8 px), logo on
     white, otherwise initials; name 14 px / 500 below it, at most 4 lines. Not clickable, hence no hover.
     The row has a fixed width as in the open panel (232 − 2 × 1 − 2 × 10), so it does not rewrap while collapsing and
     expanding. */
  .vside-brand{display:grid;grid-template-rows:auto 1fr;justify-items:start;row-gap:10px;flex:none;width:210px;padding:4px 8px 2px;
    color:var(--ink);font-size:var(--fs-ui);font-weight:500;line-height:20px;cursor:default}
  .vside-tile{display:grid;place-items:center;flex:none;width:40px;height:40px;overflow:hidden;border-radius:10px;
    background:var(--fill-2);color:var(--ink-2);font-size:14px;line-height:1;font-weight:600}
  .vside-tile > img{width:100%;height:100%;object-fit:contain;background:#fff}
  .vside-name{min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;
    overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}
  /* collapsed: 32 px logo at the width of the icon column, the name row closes (0fr), so the tabs move up together with
     the panel narrowing, not in a jump */
  :root[data-side="collapsed"] .vside-brand{grid-template-rows:auto 0fr;row-gap:0;padding:0}
  :root[data-side="collapsed"] .vside-tile{width:32px;height:32px;border-radius:9px;font-size:12px}
  :root[data-side-busy] .vside-brand{transition:grid-template-rows .25s var(--ease-out),row-gap .25s var(--ease-out),padding .25s var(--ease-out)}
  :root[data-side-busy] .vside-tile{transition:width .25s var(--ease-out),height .25s var(--ease-out),border-radius .25s var(--ease-out),font-size .25s var(--ease-out)}
  @media (prefers-reduced-motion: reduce){:root[data-side-busy] :is(.vside-brand,.vside-tile){transition:none}}
  .vside-nav{display:flex;flex-direction:column;gap:2px}
  .vside-link{display:flex;align-items:center;gap:8px;min-height:32px;width:100%;padding:0 8px;border:0;border-radius:10px;
    background:none;color:var(--ink);text-decoration:none;text-align:start;cursor:pointer;white-space:nowrap;
    font:inherit;font-size:var(--fs-ui);font-weight:500;line-height:20px;transition:background-color .15s ease-out,color .15s ease-out,scale var(--press)}
  .vside-link span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .vside-link svg:not(.crest-svg){width:16px;height:16px;flex:none;stroke-width:2;color:var(--ink-3);transition:color .15s ease-out}
  .vside-collapse svg path{stroke-width:1.5}
  /* Môj tím's row carries the followed team's crest in place of an icon */
  .vside-link > .crest-svg{width:18px;height:auto;flex:none;margin-inline:-1px}
  .vside-link[hidden]{display:none}
  /* the selected highlight is its own layer under the row content (like data-nav-mark in the admin): on switching to another
     tab whistline.js (markMain) moves it from the old row to the new one, 250 ms; on a full load the page transition
     (@view-transition in whistline.css) */
  .vside-link{position:relative;isolation:isolate}
  .vside-mark{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill-2);pointer-events:none}
  .vside-mark[data-mark="tab"]{view-transition-name:side-tab}
  .vside-link[aria-current="page"] svg:not(.crest-svg){color:var(--ink)}
  @media (hover: hover){
    .vside-link:not([aria-current]):hover{background:var(--fill)}
    .vside-link:hover svg:not(.crest-svg){color:var(--ink)}
  }
  .vside-link:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  /* press like admin sidebar rows (--press-scale) */
  .vside-link:active{scale:.97}
  @media (prefers-reduced-motion: reduce){.vside-link:active{scale:none}}

  /* bottom: mode and collapse */
  .vside-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
  .vside-mode{display:flex;align-items:center;gap:8px;min-width:0}
  /* below the divider: the Whistline mark and „Powered by“, quiet like a subrow */
  .vside-powered{display:flex;align-items:center;gap:8px;margin-top:10px;padding:14px 8px 4px;border-top:1px solid var(--line);
    font-size:var(--fs-meta);line-height:18px;color:var(--ink-3);white-space:nowrap}
  .vside-powered svg{flex:none;color:var(--ink-2)}
  .vside-powered span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .vside-powered b{font-weight:600;color:var(--ink-2)}
  .vside .ico-sun{display:none}
  :root[data-theme="dark"] .vside .ico-moon{display:none}
  :root[data-theme="dark"] .vside .ico-sun{display:flex}

  /* collapsed: icons only, a tooltip shows the label */
  /* labels are hidden only visually so they remain the names of links and buttons; the selected highlight (.vside-mark) stays */
  :root[data-side="collapsed"] :is(.vside-link span:not(.vside-mode,.vside-mark),.vside-powered span){
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* collapsed panel tooltip as in the admin (app.css, [data-flux-tooltip-content]): primary button look, 32 px,
     radius 10, 13 / 500; right of the row 8 px into the content, in after a short delay, out at once (whistline.js, wireSideTips) */
  .vside-tip{position:fixed;z-index:60;top:0;left:0;display:flex;align-items:center;min-height:32px;padding:8px 10px;
    border-radius:10px;pointer-events:none;white-space:nowrap;
    background:radial-gradient(50% 50% at 50% 0%,rgb(255 255 255 / 20%) 0%,rgb(255 255 255 / 0%) 100%),
      radial-gradient(49.59% 37.11% at 50.41% 101.56%,rgb(255 255 255 / 15%) 0%,rgb(255 255 255 / 0%) 66.46%),var(--ink);
    box-shadow:0 1px .5px -.5px rgb(0 0 0 / 13%),0 1px 2px -.5px rgb(0 0 0 / 13%),0 4px 6px -2px rgb(0 0 0 / 13%),
      0 2px 3px -1.5px rgb(0 0 0 / 13%),inset 0 0 4px 1px var(--ink),inset 0 0 4px 2px rgb(255 255 255 / 10%),
      inset 0 0 12px -6px rgb(255 255 255 / 75%);
    color:var(--surface);font-size:var(--fs-meta);line-height:16px;font-weight:500;
    transform-origin:left center;opacity:0;scale:.98;transition:opacity 50ms ease-out,scale 50ms ease-out}
  .vside-tip[data-open]{opacity:1;scale:none;transition:opacity .15s var(--ease-out) 80ms,scale .15s var(--ease-out) 80ms}
  @media (prefers-reduced-motion: reduce){.vside-tip,.vside-tip[data-open]{scale:none}}
  :root[data-theme="dark"] .vside-tip{background:var(--ink);box-shadow:inset 0 -1px 0 rgb(0 0 0 / 22%),inset 0 1px 0 rgb(255 255 255 / 60%)}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .vside-tip{background:var(--ink);box-shadow:inset 0 -1px 0 rgb(0 0 0 / 22%),inset 0 1px 0 rgb(255 255 255 / 60%)}
  }

  /* modals (game and team detail, day picker) and the toast are centred on the content, not the whole window; the backdrop covers the whole page */
  :root[data-sidebar] :is(.msheet,.sheet){padding-inline-start:calc(var(--side-w) + 8px + 16px)}
  :root[data-sidebar] .toast{left:calc(50% + (var(--side-w) + 8px) / 2)}

  /* the live games highlight on Domov runs the full window width, under the panel to the left edge */
  :root[data-sidebar] .homehero::before{transform:translateX(calc(-50% - (var(--side-w) + 8px) / 2))}

  /* header: 40 px from the top as everywhere (whistline.css, --hdr-top), title on the left; the tournament pill and the mode switch are in the panel */
  :root[data-sidebar] .hdr[data-tab] :is(#brand,#btnTheme){display:none}
  :root[data-sidebar] .hdr[data-tab] .ggroup > #btnShare{width:42px;margin:0}
  :root[data-sidebar] .hdr[data-tab] .hdr-title{flex:1 1 auto}

  /* O turnaji: no title in the bar — the tournament crest and share are both 40 px from the top (whistline.css, .hdr-float) */
  :root[data-sidebar] .hdr[data-tab="about"] .hdr-title{display:none}
}

/* ── Side menu: days and phases are the first content row at every width (layouts.public), not the bar's second row — from the heading
   to them 24 px as to Domov's content, from them to the content 16 px (2 px padding + 14) ── */
:root[data-sidebar]:has(#hdr:is([data-tab="home"],[data-tab="schedule"],[data-tab="standings"])){--view-gap:16px}
:root[data-sidebar] .vtabs{margin-bottom:14px}
/* the tab row (days, phases) scrolls sideways on a phone and so clips: 8 px inside gives room to the selected tab's shadow
   and its growth on press; the negative margin cancels it, so the layout does not change (still 2 px above and below) */
:root[data-sidebar] .vtabs .hdr-tabs{margin:-6px -8px;padding:8px}
@media (min-width:1024px) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vside .ico-moon{display:none}
  :root:not([data-theme="light"]) .vside .ico-sun{display:flex}
}

/* ── Side menu: podium at the prototype's size (whistline.css: 78 / 58 / 44 px, crest 38–54 px, number in the middle),
   just metal with a sheen on the edge, fading toward the floor ── */
:root[data-sidebar] .ped-block{--m:var(--medal-1);position:relative;
  background:linear-gradient(180deg,rgb(var(--m) / 46%) 0%,rgb(var(--m) / 18%) 60%,rgb(var(--m) / 4%) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 60%),inset 1px 0 0 rgb(var(--m) / 16%),inset -1px 0 0 rgb(var(--m) / 16%)}
:root[data-sidebar] .ped-block::before{content:'';position:absolute;inset:0 0 auto;height:42%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255 / 34%),rgb(255 255 255 / 0%))}
:root[data-sidebar] .ped.p2 .ped-block{--m:var(--medal-2)}
:root[data-sidebar] .ped.p3 .ped-block{--m:var(--medal-3)}
:root[data-sidebar][data-theme="dark"] .ped-block{box-shadow:inset 0 1px 0 rgb(255 255 255 / 16%),inset 1px 0 0 rgb(var(--m) / 18%),inset -1px 0 0 rgb(var(--m) / 18%)}
:root[data-sidebar][data-theme="dark"] .ped-block::before{background:linear-gradient(180deg,rgb(255 255 255 / 8%),rgb(255 255 255 / 0%))}
@media (prefers-color-scheme: dark){
  :root[data-sidebar]:not([data-theme="light"]) .ped-block{box-shadow:inset 0 1px 0 rgb(255 255 255 / 16%),inset 1px 0 0 rgb(var(--m) / 18%),inset -1px 0 0 rgb(var(--m) / 18%)}
  :root[data-sidebar]:not([data-theme="light"]) .ped-block::before{background:linear-gradient(180deg,rgb(255 255 255 / 8%),rgb(255 255 255 / 0%))}
}

/* ── Side menu: Stravovanie by place — the place is the card header, its time slots below it ── */
.meal-h{align-items:center;gap:12px;padding-bottom:4px}
.meal-hd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.meal-addr{font-size:var(--fs-meta);line-height:18px;color:var(--ink-3);text-wrap:pretty}
/* a long name or address without spaces breaks even mid-word and does not overflow the card toward the pin */
.meal-hd > :is(h2,.meal-addr){overflow-wrap:anywhere}
/* day and team pickers on the right of the O turnaji / Stravovanie row; on mobile below the switch */
.aboutbar-picks{display:flex;flex-wrap:wrap;gap:6px}
.aboutbar-picks .hmenu-btn > span{max-width:180px;overflow:hidden;text-overflow:ellipsis}
/* a slot's teams stacked like group table rows: 26 px crest and name; the selected team as the “mine” row */
.mrows{display:flex;flex-direction:column;padding:0 8px}
.mrow{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 8px;border-radius:10px;
  font-size:var(--fs-ui);color:var(--ink);text-decoration:none}
.mrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.mine{background:var(--mine-fill);color:var(--mine)}
@media (hover: hover){.mrow:not(.mine):hover{background:var(--fill)}}
/* press like admin rows (--press-scale-row): slot team rows and picker menu options to .99 */
.mrow,.pick-opt{transition:scale var(--press)}
:is(.mrow,.pick-opt):active{scale:.99}
@media (prefers-reduced-motion: reduce){:is(.mrow,.pick-opt):active{scale:none}}
/* picker menu: the admin's filter popover (Harmonogram, Všetky skupiny) — 6 px edge, 32 px rows, selected with a check at the end */
.pick{position:relative}
.pick .hmenu-btn[aria-expanded="true"]{background:var(--fill-2)}
.pick-menu{position:absolute;z-index:30;top:calc(100% + 4px);inset-inline-start:0;display:flex;flex-direction:column;
  min-width:180px;max-width:min(300px,calc(100vw - 32px));max-height:min(60dvh,420px);overflow:hidden;
  border-radius:16px;background:var(--surface);box-shadow:var(--shadow-pop);
  transform-origin:top left;transition:opacity .15s ease-out,scale .15s ease-out,display .15s allow-discrete}
.pick-menu[hidden]{display:none;opacity:0;scale:.96}
@starting-style{.pick-menu:not([hidden]){opacity:0;scale:.96}}
/* menu rows scroll inside (edges fade like the admin lists, whistline.css), the menu's frame and shadow stay */
.pick-list{display:flex;flex-direction:column;min-height:0;padding:6px;overflow-y:auto;overscroll-behavior:contain}
/* the pickers are on the right (on phone and desktop), the menu opens from their right edge */
.pick-menu{inset-inline:auto 0;transform-origin:top right}
.pick-opt{display:flex;align-items:center;gap:8px;min-height:32px;padding:6px 8px;border-radius:10px;
  color:var(--ink);font-size:var(--fs-ui);font-weight:400;line-height:20px;text-decoration:none;white-space:nowrap}
.pick-opt .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pick-opt > .crest-svg{flex:none}
.pick-opt > svg:last-child{flex:none;width:16px;height:16px;margin-inline-start:auto;padding-inline-start:0;visibility:hidden}
.pick-opt[aria-current] > svg:last-child{visibility:visible}
@media (hover: hover){.pick-opt:hover{background:var(--fill-2)}}
.pick-opt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* … on a phone in the bottom sheet (meal-picks): rows like the day picker in Program, team with a 24 px crest */
.pick-sheet .opt .crest-svg{flex:none;width:24px;height:auto}
@media (prefers-reduced-motion: reduce){.pick-menu{transition:none}}

/* ── Side menu: tabs like admin buttons (32 px, 13 px, 500, 14 px on the sides),
   picker buttons like the admin grey button (btn-2, no border) ── */
:root[data-sidebar] :is(.htab,.aboutbar .segb,.hmenu-btn){min-height:32px;padding:8px 14px;font-size:13px;line-height:16px}
:root[data-sidebar] :is(.htab,.aboutbar .segb):is([aria-current="page"],[aria-selected="true"]){font-weight:500}
:root[data-sidebar] .hmenu-btn{gap:4px;padding-inline:14px 10px;font-weight:500;background:var(--btn-2);box-shadow:none;transition:background-color .15s ease-out,scale var(--press)}
:root[data-sidebar] .hmenu-btn svg{color:var(--ink-2)}
@media (hover: hover){:root[data-sidebar] .hmenu-btn:hover{background:var(--btn-2-hover)}}
:root[data-sidebar] .hmenu-btn[aria-expanded="true"]{background:var(--btn-2-hover)}
/* … O turnaji / Stravovanie on a phone too, as on desktop (whistline.css from 720 px): tabs from the left without icons and without a track,
   the selected one highlighted; day and team pickers on the right in the same row. When they do not fit, their part of the row scrolls
   sideways (no scrollbar) and the edge fades where there is more, like the admin lists (data-scrolled / data-more,
   whistline.js wireScrollFade; 16 px along the admin's curve); the picker
   opens in a bottom sheet, not in a menu under the button, so the row does not clip it */
@media (max-width:719px){
  :root[data-sidebar] .aboutbar{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}
  :root[data-sidebar] .aboutbar > .aboutbar-picks{flex:1 1 auto;min-width:0;flex-wrap:nowrap;
    margin:-2px;padding:2px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right,transparent,rgb(0 0 0 / 30%) calc(var(--edge-start) * .25),rgb(0 0 0 / 82%) calc(var(--edge-start) * .55),#000 var(--edge-start),
      #000 calc(100% - var(--edge-end)),rgb(0 0 0 / 82%) calc(100% - var(--edge-end) * .55),rgb(0 0 0 / 30%) calc(100% - var(--edge-end) * .25),transparent);
    mask-image:linear-gradient(to right,transparent,rgb(0 0 0 / 30%) calc(var(--edge-start) * .25),rgb(0 0 0 / 82%) calc(var(--edge-start) * .55),#000 var(--edge-start),
      #000 calc(100% - var(--edge-end)),rgb(0 0 0 / 82%) calc(100% - var(--edge-end) * .55),rgb(0 0 0 / 30%) calc(100% - var(--edge-end) * .25),transparent);
    transition:--edge-start var(--fade),--edge-end var(--fade)}
  :root[data-sidebar] .aboutbar > .aboutbar-picks::-webkit-scrollbar{display:none}
  :root[data-sidebar] .aboutbar > .aboutbar-picks[data-scrolled]{--edge-start:16px}
  :root[data-sidebar] .aboutbar > .aboutbar-picks[data-more]{--edge-end:16px}
  :root[data-sidebar] .aboutbar-picks > .pick{flex:none}
  :root[data-sidebar] .aboutbar-picks > .pick:first-child{margin-inline-start:auto}
  :root[data-sidebar] .aboutbar > .seg.big{flex:none;align-self:auto;width:auto;max-width:none;margin:0;padding:0;gap:2px;background:none}
  :root[data-sidebar] .aboutbar > .seg.big .segb{flex:none;color:var(--ink-3)}
  :root[data-sidebar] .aboutbar > .seg.big .segb[aria-current="page"]{color:var(--ink)}
  :root[data-sidebar] .aboutbar > .seg.big .segb svg{display:none}
}
/* … on a phone like the tabs in a sheet (segments Odohrané, Poradie): 36 px, 8 × 14 px, 14 px text (500); pickers in the same
   row equally tall */
@media (max-width:719px){
  :root[data-sidebar] :is(.htab,.aboutbar .segb,.hmenu-btn){min-height:36px;padding:8px 14px;font-size:var(--fs-ui);line-height:20px}
  :root[data-sidebar] .hmenu-btn{padding-inline:14px 10px}
}
/* … an unselected tab in the unselected segment's colour (ink-2), at every width */
:root[data-sidebar] .htab:not([aria-current="page"],[aria-selected="true"]),
:root[data-sidebar] .aboutbar > .seg.big .segb:not([aria-current="page"]){color:var(--ink-2)}
@media (hover: hover){
  :root[data-sidebar] .htab:not([aria-current="page"],[aria-selected="true"]):hover,
  :root[data-sidebar] .aboutbar > .seg.big .segb:not([aria-current="page"]):hover{color:var(--ink)}
}

/* ── Side menu, desktop: Zdieľať like the admin's white button (Verejná stránka) — icon and text, 32 px; no glass pill.
   On mobile and in the game sheet (the button's copy in .scr-bar) it stays a round glass icon-only button. ── */
.gbtn-label{display:none}
@media (min-width:720px){
  :root[data-sidebar] .hdr .gbtn-label{display:inline}
  :root[data-sidebar] .hdr .ggroup{height:auto;gap:6px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-sidebar] .hdr .ggroup > .gbtn{width:32px;height:32px;margin:0;border-radius:999px;background:var(--seg);box-shadow:var(--shadow-in);transition:background-color .15s ease-out,scale var(--press)}
  :root[data-sidebar] .hdr .ggroup > .gbtn#btnShare{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 14px 0 12px;
    color:var(--ink);font-size:13px;line-height:16px;font-weight:500;white-space:nowrap}
  :root[data-sidebar] .hdr .ggroup > .gbtn svg:not(.crest-svg){width:16px;height:16px}
  @media (hover: hover){:root[data-sidebar] .hdr .ggroup > .gbtn:hover{background:color-mix(in srgb,var(--seg) 94%,var(--ink))}}
}

/* ── Side menu, desktop: Späť on the game and team page as a round button beside Zdieľať — 32 px, 16 px icon ── */
@media (min-width:720px){
  :root[data-sidebar] .hdr #btnBack{width:32px;height:32px;border:0;border-radius:999px;background:var(--seg);box-shadow:var(--shadow-in);
    color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .15s ease-out,scale var(--press)}
  :root[data-sidebar] .hdr #btnBack svg:not(.crest-svg){width:16px;height:16px}
  @media (hover: hover){:root[data-sidebar] .hdr #btnBack:hover{background:color-mix(in srgb,var(--seg) 94%,var(--ink))}}
}

/* ── Side menu: the description under a card heading as tight as the address under a place in Stravovanie (2 px) ── */
:root[data-sidebar] .cs-h:has(+ .cs-lede){padding-bottom:2px}

/* ── Side menu, desktop: game and team sheet 640 px (narrower than the content column, edges like the page --gutter) and rounder ── */
@media (min-width:720px){
  :root[data-sidebar] .msheet{padding-inline:var(--gutter)}
  :root[data-sidebar] .msheet-panel{width:min(640px,100%);border-radius:28px}
}
@media (min-width:1024px){
  :root[data-sidebar] .msheet{padding-inline-start:calc(var(--side-w) + 8px + var(--gutter))}
}

/* ── Side menu, desktop: sheet scrollbar as a thin line without a background (whistline.js, wireSheetThumb) instead of the system track ── */
.scr-thumb{display:none}
@media (min-width:720px){
  :root[data-sidebar] .msheet .scr-body{scrollbar-width:none}
  :root[data-sidebar] .msheet .scr-body::-webkit-scrollbar{display:none}
  :root[data-sidebar] .scr-thumb{display:block;position:absolute;z-index:6;top:12px;right:4px;width:4px;border-radius:2px;
    background:var(--line-2);pointer-events:none}
  :root[data-sidebar] .scr-thumb[hidden]{display:none}
}

/* ── Side menu: no club colour tint — Domov (live games), the game header and the team hero (also in the sheet) ── */
:root[data-sidebar] :is(.homehero,.matchview .matchtop,.gphero)::before{content:none}

/* ── Side menu, desktop: a deeper link in the sheet like a modal over a modal in the admin (app.css and sheet.js, stacked sheet, --sheet-*):
   each screen is its own card. Those under the top one step back one level per screen in front of them (--depth,
   whistline.js markDepth): 0.94 and a touch darker (--dim) per level, each peeks 12 px above the one in front of it; two
   show, deeper ones vanish (.under-gone). A new one rises 24 px (250 ms) with a cross-fade (150 ms), the top one leaves the same
   way back. The sheet starts 24 px lower (40 px from the top of the window) so the two cards under it have room to peek. ── */
@media (min-width:720px){
  :root[data-sidebar] .msheet{padding-top:40px}
  :root[data-sidebar] .msheet-panel{background:none;box-shadow:none;overflow:visible;border-radius:0}
  :root[data-sidebar] .msheet .scr{--dim:.96;border-radius:28px;box-shadow:var(--shadow-modal,0 24px 70px rgb(0 0 0 / 28%));transform-origin:50% 0;
    transition:opacity 150ms var(--ease-out),transform 250ms var(--ease-out),filter 250ms var(--ease-out)}
  /* the top one leaves the way it came: drops 24 px and fades (150 ms) */
  :root[data-sidebar] .msheet .scr.leave{transform:translateY(24px);
    transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
  :root[data-sidebar] .msheet .scr.under{opacity:1;visibility:visible;pointer-events:none;
    transform:translateY(calc(-12px * var(--depth,1))) scale(pow(.94,var(--depth,1)));filter:brightness(pow(var(--dim),var(--depth,1)))}
  /* the bar of a card under the top one has the sheet colour: content scrolled under it does not show through in the strip that peeks out */
  :root[data-sidebar] .msheet .scr.under > .scr-bar{background:var(--canvas)}
  /* a card returning from depth shows at once (the visibility delay belongs only to leaving) */
  :root[data-sidebar] .msheet .scr.under-far{
    transition:opacity 150ms var(--ease-out),transform 250ms var(--ease-out),filter 250ms var(--ease-out),visibility 0s}
  :root[data-sidebar] .msheet .scr.under-gone{opacity:0;visibility:hidden;
    transition:opacity 150ms var(--ease-out),transform 250ms var(--ease-out),filter 250ms var(--ease-out),visibility 0s linear 150ms}
  :root[data-sidebar][data-theme="dark"] .msheet .scr{--dim:.72}
}
@media (min-width:720px) and (prefers-color-scheme: dark){
  :root[data-sidebar]:not([data-theme="light"]) .msheet .scr{--dim:.72}
}
@media (min-width:720px) and (prefers-reduced-motion: reduce){
  :root[data-sidebar] .msheet .scr:is(.under,.leave){transform:none}
}

/* ── Side menu, desktop: Zdieľať in the game and team sheet as a floating button centred near the bottom — shaped like Zdieľať on the page
   (13/500, 16 px icon with stroke 2, gap 6), only 48 px tall; fill like the admin's primary button (app.css, --pri-bg and
   --shadow-pri: black with a soft sheen, light in the dark theme) plus a shadow, since it floats over the content. ── */
.scr-foot{display:none}
@media (min-width:720px){
  :root[data-sidebar] .msheet .scr-view{flex:1 0 auto;padding-bottom:8px}
  :root[data-sidebar] .scr-bar [data-share-url]{display:none}
  :root[data-sidebar] .scr-foot{display:flex;justify-content:center;position:sticky;bottom:0;z-index:5;padding:16px 16px 20px;pointer-events:none}
  :root[data-sidebar] .scr-share{
    --pri:#101010;--pri-hover:#0a0a0a;--pri-ink:#fff;
    --pri-bg:radial-gradient(50% 50% at 50% 0%,rgb(255 255 255 / 20%) 0%,rgb(255 255 255 / 0%) 100%),
      radial-gradient(49.59% 37.11% at 50.41% 101.56%,rgb(255 255 255 / 15%) 0%,rgb(255 255 255 / 0%) 66.46%);
    --pri-shadow:0 1px .5px -.5px rgb(0 0 0 / 13%),0 1px 2px -.5px rgb(0 0 0 / 13%),0 4px 6px -2px rgb(0 0 0 / 13%),
      0 2px 3px -1.5px rgb(0 0 0 / 13%),inset 0 0 4px 1px #101010,inset 0 0 4px 2px rgb(255 255 255 / 10%),
      inset 0 0 12px -6px rgb(255 255 255 / 75%);
    display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:48px;padding:0 22px 0 20px;
    border:0;border-radius:999px;background:var(--pri-bg),var(--pri);color:var(--pri-ink);
    box-shadow:var(--pri-shadow),0 10px 28px rgb(0 0 0 / 16%);pointer-events:auto;cursor:pointer;
    font:inherit;font-size:var(--fs-meta);font-weight:500;line-height:16px;transition:background-color .15s ease-out,scale var(--press)}
  :root[data-sidebar] .scr-share svg:not(.crest-svg){width:16px;height:16px;flex:none;stroke-width:2}
  :root[data-sidebar] .scr-share .gbtn-label{display:inline}
  @media (hover: hover){:root[data-sidebar] .scr-share:hover{background:var(--pri-bg),var(--pri-hover)}}
  :root[data-sidebar] .scr-share:active{scale:.97}
  :root[data-sidebar] .scr-share:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  :root[data-sidebar][data-theme="dark"] .scr-share{--pri:#f2f2f2;--pri-hover:#fff;--pri-ink:#111;--pri-bg:none;
    --pri-shadow:inset 0 -1px 0 rgb(0 0 0 / 22%),inset 0 1px 0 rgb(255 255 255 / 60%)}
}
@media (min-width:720px) and (prefers-color-scheme: dark){
  :root[data-sidebar]:not([data-theme="light"]) .scr-share{--pri:#f2f2f2;--pri-hover:#fff;--pri-ink:#111;--pri-bg:none;
    --pri-shadow:inset 0 -1px 0 rgb(0 0 0 / 22%),inset 0 1px 0 rgb(255 255 255 / 60%)}
}
@media (min-width:720px) and (prefers-reduced-motion: reduce){
  :root[data-sidebar] .scr-share{transition:none}
}
/* while the popover is open (aria-expanded, whistline.js markShareOpen) the sheet footer closes it: an icon swap (the share icon
   and × in one cell, the leaving one blurs 2 px and shrinks to .25, the arriving one the reverse, 250 ms ease-in-out) and beside
   it the text (the label and „Zavrieť“ in one cell, only a cross-fade with blur). The shown text sets the cell's width, the leaving one
   is out of flow; the button catches up to the new width (whistline.js markShareOpen). × stands where the share icon is. With reduced
   motion, no transition. */
@media (min-width:720px){
  /* content from the left edge: at rest the button is as wide as its content, when the width changes the icon moves with the edge and does not jump */
  :root[data-sidebar] .scr-share{justify-content:flex-start}
  :root[data-sidebar] .ss-swap{display:inline-grid}
  :root[data-sidebar] .ss-icons{place-items:center}
  :root[data-sidebar] .ss-labels{position:relative;justify-items:start}
  :root[data-sidebar] .ss-labels > *{white-space:nowrap}
  :root[data-sidebar] .scr-share:not([aria-expanded="true"]) .ss-labels > .ss-b,
  :root[data-sidebar] .scr-share[aria-expanded="true"] .ss-labels > .ss-a{position:absolute;left:0;top:0}
  :root[data-sidebar] .ss-swap > *{grid-area:1/1;display:flex;
    transition:opacity 250ms ease-in-out,filter 250ms ease-in-out,scale 250ms ease-in-out}
  :root[data-sidebar] .scr-share:not([aria-expanded="true"]) .ss-b,
  :root[data-sidebar] .scr-share[aria-expanded="true"] .ss-a{opacity:0;filter:blur(2px)}
  :root[data-sidebar] .scr-share:not([aria-expanded="true"]) .ss-icons > .ss-b,
  :root[data-sidebar] .scr-share[aria-expanded="true"] .ss-icons > .ss-a{scale:.25}
}
@media (min-width:720px) and (prefers-reduced-motion: reduce){
  :root[data-sidebar] .ss-swap > *{transition:none}
}

/* ── Side menu, phone: O turnaji — the tournament crest in a tile as on desktop (whistline.css: fill-2, radius in the ratio
   30 / 96), only smaller: 80 px with radius 25, crest 60 px, empty cup 30 px; centred above the name ── */
@media (max-width:719px){
  :root[data-sidebar] .about-page .gp-crest{display:grid;place-items:center;width:80px;height:80px;margin-inline:auto;
    border-radius:25px;background:var(--fill-2)}
  :root[data-sidebar] .about-page :is(.gp-crest .crest-svg,.gp-badge){width:60px;height:60px;margin:0}
  :root[data-sidebar] .about-page .gp-badge svg:not(.crest-svg){width:30px;height:30px}
}

/* ── Side menu, desktop: O turnaji — 24 px from the crest tile to the tournament name ── */
@media (min-width:720px){
  :root[data-sidebar] .about-page .gp-crest{margin-bottom:24px}
}

/* ── Side menu: O turnaji — each group is its own card like the group table in Poradie (group name, teams as its rows);
   from 720 px two side by side, an odd last one (or a single one) full width ── */
.tgroups{gap:4px}
.tgroups .mrows{padding-bottom:8px}
@media (min-width:720px){
  .tgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tgroups > .cardsect:nth-child(odd):last-child{grid-column:1 / -1}
}

/* ── Side menu, desktop: game and team sheet content on the bar's grid — 16 px from the edge like × and the Zdieľať footer; the game header
   reaches the sheet edges (not 40 px further like the page) and its teams have the same 16 px (4 + 12) ── */
@media (min-width:720px){
  :root[data-sidebar] .msheet .scr-view{padding-inline:16px}
  :root[data-sidebar] .msheet .scr-view .matchview .matchtop{margin-inline:-16px}
  :root[data-sidebar] .msheet .scr-view .matchview .matchtop .lsb{padding-inline:12px}
}

/* ── Side menu, desktop: Zdieľať as a popover by the button (whistline.js, openShareMenu): the share sheet's preview on a card,
   below it the targets as the sheet's round buttons (.dests), only smaller: 40 px circle with an 18 px icon, 12 px label; Facebook
   and Instagram in brand colours, the rest grey. The transparent edge of the preview
   image (room for tilt and shadow, posterBlob) is evened out by negative margins so the preview has equal room around it.
   Ticket: 880 wide, edge 90 top, 120 sides, 140 bottom; standings card: 40, 90, 160. ── */
.share-menu{--canvas:var(--surface);position:fixed;inset:auto;margin:0;overflow:visible;display:flex;flex-direction:column;
  width:300px;max-width:calc(100vw - 16px);padding:6px;border:0;border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);
  opacity:1;scale:1;transition:opacity .15s ease-out,scale .15s ease-out,overlay .15s allow-discrete,display .15s allow-discrete}
.share-menu:not(:popover-open){display:none;opacity:0;scale:.96}
@starting-style{.share-menu:popover-open{opacity:0;scale:.96}}
.share-menu .pvbox{margin:0 -6px;padding:18px 24px 14px}
.share-menu .pvbox:has(.pvstrip){overflow:hidden}
/* the image's transparent edge (shadow) overlaps the buttons: the mouse passes through it to the button */
.share-menu .pv{pointer-events:none}
.share-menu .pvwrap{width:min(190px,calc(40dvh * 9 / 16));margin:0 auto}
.share-menu .pvwrap.bare{display:flow-root;width:min(204px,calc(39dvh * 880 / 1420));margin:0 auto}
.share-menu .pvwrap.bare .pv{width:calc(100% * 1120 / 880);max-width:none;min-height:0;max-height:none;
  margin:calc(100% * -90 / 880) calc(100% * -120 / 880) calc(100% * -140 / 880)}
.share-menu .pvwrap.bare[data-kind="table"]{width:100%}
.share-menu :is(.pvwrap.bare[data-kind="table"],.pvstrip .pvwrap) .pv{width:calc(100% * 1060 / 880);max-width:none;max-height:none;
  margin:calc(100% * -40 / 880) calc(100% * -90 / 880) calc(100% * -160 / 880)}
.share-menu .pvstrip{margin:-14px -24px;padding:14px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.share-menu .pvstrip::before,.share-menu .pvstrip::after{flex-basis:calc(12% - 16px)}
.share-menu .pvstrip .pvwrap{display:flow-root;flex-basis:76%;cursor:pointer}
.share-menu .pvdots{margin:14px 0 -6px}
.share-menu .dests{margin:0;padding:2px 4px 8px;gap:2px;overflow:visible;-webkit-mask-image:none;mask-image:none}
.share-menu .dest{flex:1 1 0;gap:6px;padding:6px 0;border:0;border-radius:12px;background:none;font:inherit;color:inherit}
.share-menu .d-ico{width:40px;height:40px}
.share-menu .d-ico svg{width:18px;height:18px}
/* hover without a highlight: the icon circle grows a little (scale; transform holds the press) */
.share-menu .d-ico{transition:transform var(--press),scale .2s var(--ease-out,ease-out)}
@media (hover: hover) and (prefers-reduced-motion: no-preference){.share-menu .dest:hover .d-ico{scale:1.1}}
.share-menu .dest:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){.share-menu{transition:none}}

/* ── Side menu: results in the admin green (--color-ok; in dark it is already the same) and Predzápasová forma as tinted cells:
   the letter in the result's colour on its soft background, played cells left to right; empty ones quiet, this game
   (?) outlined ── */
:root[data-sidebar]{--win:oklch(0.5753 0.1926 136.74);--win-f:oklch(0.5753 0.1926 136.74 / 15%)}
:root[data-sidebar][data-theme="dark"]{--win:#4CC873;--win-f:rgb(76 200 115 / 16%)}
@media (prefers-color-scheme: dark){
  :root[data-sidebar]:not([data-theme="light"]){--win:#4CC873;--win-f:rgb(76 200 115 / 16%)}
}
:root[data-sidebar] .pgf-bar{gap:3px}
:root[data-sidebar] .fseg{height:26px;border-radius:8px;font-size:var(--fs-small);font-weight:600;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
:root[data-sidebar] .fseg:first-child{border-radius:13px 8px 8px 13px}
:root[data-sidebar] .fseg:last-child{border-radius:8px 13px 13px 8px}
:root[data-sidebar] .fseg.none{background:var(--fill)}
:root[data-sidebar] .fseg.V{background:var(--win-f);color:var(--win)}
:root[data-sidebar] .fseg.P{background:rgb(var(--live-rgb) / 14%);color:var(--loss)}
:root[data-sidebar] .fseg.R{background:var(--btn-2);color:var(--ink-2)}
:root[data-sidebar] .fseg.now:not(.V):not(.P):not(.R){background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}

/* ── Side menu: Forma tímu (results above opponents) and the form in the Poradie table tinted like Predzápasová forma — the result
   in its colour on its soft background, a draw grey; an unplayed game quiet ── */
:root[data-sidebar] :is(.fm-sc,.fbox){letter-spacing:.02em}
:root[data-sidebar] .fm-sc{border-radius:8px}
:root[data-sidebar] :is(.fm-sc,.fbox).V{background:var(--win-f);color:var(--win)}
:root[data-sidebar] :is(.fm-sc,.fbox).P{background:rgb(var(--live-rgb) / 14%);color:var(--loss)}
:root[data-sidebar] :is(.fm-sc,.fbox).R{background:var(--btn-2);color:var(--ink-2)}
:root[data-sidebar] .fm-sc.next{background:var(--fill);color:var(--ink-3);font-weight:500}

/* ── Side menu, desktop: team detail hero centred, at the game header's scale — crest without a tile 64 px, 12 px above the name;
   stats stay (value 18 px, label in capitals) ── */
@media (min-width:720px){
  :root[data-sidebar] .team-page .gp-crest{margin:0 auto 12px}
  :root[data-sidebar] .team-page :is(.gp-crest .crest-svg,.gp-badge){width:64px;height:64px;margin-inline:auto}
}
/* ── Side menu, at every width: the name in the hero is no larger than page headings — team 20 px (700) as on desktop, tournament
   in O turnaji 24 px (700) like the Program or Poradie heading (on desktop whistline.css) ── */
:root[data-sidebar] .team-page .gp-h1{font-size:var(--fs-score);line-height:1.2}
:root[data-sidebar] .about-page .gp-h1{font-size:var(--fs-title);line-height:1.15}

/* ── Side menu, desktop: O turnaji stats as in the team detail — value 18 px (600), label below it in capitals (whistline.css,
   .gp-stat) instead of a number at the name's size ── */
@media (min-width:720px){
  :root[data-sidebar] .about-page .gp-stat b{font-size:var(--fs-value);font-weight:600;letter-spacing:-.01em;line-height:normal}
  :root[data-sidebar] .about-page .gp-stat span{margin-top:3px;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.04em}
}

/* ── Side menu: a running game in the team detail as in Program and on Domov — with a breathing red frame (whistline.css .ntile.now),
   not the card frame (.noring) ── */
:root[data-sidebar] .noring .ntile.now{border-color:transparent}
:root[data-sidebar] .noring .ntile.now::after{content:""}

/* ── Side menu: the score in a game tile 1:1 with the start time in it — 18 px (--fs-value), same letter spacing ── */
:root[data-sidebar] .ntile .nmid b.sc{font-size:var(--fs-value);letter-spacing:-.01em}

/* ── Side menu: the game detail header one step above the live games on Domov, on phone and desktop — crests without a tile
   64 px, team name 15 px (600) 8 px below the crest, score 30 px, group and time stay ── */
:root[data-sidebar] .matchview .matchtop .lsb-team .crest-svg{width:64px}
:root[data-sidebar] .matchview .matchtop .lsb-link,:root[data-sidebar] .matchview .matchtop .lsb-team.ph{gap:8px}
:root[data-sidebar] .matchview .matchtop .lsb-full{font-size:var(--fs-control);font-weight:600;letter-spacing:-.012em;line-height:1.25}
:root[data-sidebar] .matchview .matchtop .lsb-final{font-size:30px;line-height:34px}

/* ── Side menu: a small header in the game and team sheet bar (whistline.js, wireScreenMini) — when the big one scrolls away, in the middle of the bar
   crest · score · crest and under the score the red running clock (or the state), for a team the crest and name; cross-fades like the name in the page bar ── */
.scr-mini{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 200px);
  display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .18s ease;pointer-events:none;
  font-size:var(--fs-control);font-weight:600;letter-spacing:-.014em}
.scr-mini > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-mini .crest-svg{width:24px;height:auto;flex:none}
.scr-mini.mb-mini{gap:28px}
.scr-mini.mb-mini .mb-sc{font-size:var(--fs-value)}
.scr-mini .mb-st.live{color:var(--live);font-weight:600;font-variant-numeric:tabular-nums}
.scr.mini .scr-mini{opacity:1}
@media (prefers-reduced-motion: reduce){.scr-mini{transition:none}}

/* ── Side menu: the small header in the sheet bar larger, to match the 44 px buttons — crests without a tile as in the big header
   (40 px), score 20 px, time 13 px, team name 18 px ── */
.scr-mini .crest-svg{width:40px;height:40px}
.scr-mini{gap:12px;font-size:var(--fs-value)}
.scr-mini.mb-mini{gap:20px}
.scr-mini.mb-mini .mb-sc{font-size:var(--fs-score)}
.scr-mini .mb-st{font-size:var(--fs-meta)}

/* ── Side menu: team names too in the small game header in the sheet bar — home before its crest, away after it (18 px, 600);
   a long name is ellipsized, the score stays in the middle. The page bar (on a phone) has no names, they do not fit. ── */
.mb-nm{display:none}
.scr-mini.mb-mini{width:calc(100% - 200px);max-width:none}
.scr-mini .mb-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px}
.scr-mini .mb-side:first-child{justify-content:flex-end}
.scr-mini .mb-nm{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-mini .mb-core{flex:none}

/* ── Side menu: the small header in the sheet bar one step smaller — crest without a tile 28 px,
   names 15 px ── */
.scr-mini .crest-svg{width:28px;height:28px}
.scr-mini{font-size:var(--fs-control)}
.scr-mini .mb-side{gap:8px}

/* ── Side menu: live games on Domov stay on the background, one step above the Nasleduje tiles —
   crest 54 px, names 13/500, group 12 px, score 26 px, time 13 px ── */
:root[data-sidebar] .boards .lsb.stack{grid-template-columns:minmax(0,1fr) clamp(100px,28cqw,140px) minmax(0,1fr);column-gap:6px;padding:20px 8px 6px}
:root[data-sidebar] .boards .lsb.stack > .lsb-team{gap:5px}
:root[data-sidebar] .boards .lsb.stack .lsb-team .crest-svg{width:54px}
:root[data-sidebar] .boards .lsb.stack .lsb-full{gap:4px;font-size:var(--fs-meta);font-weight:500}
:root[data-sidebar] .boards .lsb.stack .lsb-full .sqj{width:15px;height:15px}
:root[data-sidebar] .boards .lsb.stack .lsb-mid{gap:2px;padding-inline:0}
:root[data-sidebar] .boards .lsb.stack .lsb-top{min-height:18px;line-height:18px;font-size:var(--fs-small);font-weight:500}
:root[data-sidebar] .boards .lsb.stack .lsb-final{font-size:26px;letter-spacing:-.025em;line-height:30px}
:root[data-sidebar] .boards .lsb.stack .lsb-rink{min-height:18px;line-height:18px}
:root[data-sidebar] .boards .lsb.stack .lsb-rink .lsb-now{font-size:var(--fs-meta)}
:root[data-sidebar] :is(.boards,.boards.swipe){gap:8px}

/* ── Side menu: a segment in a card sits on the card's grid — track 16 px from the edge like the card heading (.cs-h), so the selected option
   does not stick out before the text ── */
:root[data-sidebar] .cardsect > .seg{margin-inline:16px}

/* ── Side menu, desktop: segments (Odohrané zápasy, Poradie and Zápasy tímu, Tímy) sized like the admin segment (app.css,
   [data-seg]: track 2 px, gap 2 px, option 28 px, 12 px on the sides, 13/16, 500 also when selected); the look stays — track
   --band, selected option --seg with --shadow-in ── */
@media (min-width:720px){
  :root[data-sidebar] .seg:not(.aboutbar > .seg){gap:2px;padding:2px}
  :root[data-sidebar] .seg:not(.aboutbar > .seg) .segb{min-height:28px;padding:6px 12px;font-size:13px;line-height:16px}
  :root[data-sidebar] .seg:not(.aboutbar > .seg) .segb:is([aria-selected="true"],[aria-current="page"]){font-weight:500}
}
/* … on a phone (also in the team and game sheet) the height stays, text as in the tabs: 14 px, selected 500 */
@media (max-width:719px){
  :root[data-sidebar] .seg:not(.aboutbar > .seg) .segb{font-size:var(--fs-ui)}
  :root[data-sidebar] .seg:not(.aboutbar > .seg) .segb:is([aria-selected="true"],[aria-current="page"]){font-weight:500}
}

/* ── Side menu: Konečné poradie as a group table card (partials/final-table) — alone at full width; the first
   three places with a 20 × 24 medal icon (partials/medal: ribbon, gold / silver / bronze with a number), the other numbers
   centred in the same 20 px width ── */
.medal{display:inline-grid;place-items:center;width:20px;min-height:20px;vertical-align:middle;line-height:1}
.medal-ico{display:block;margin-top:-4px}
.medal-ico text{font-family:inherit;font-variant-numeric:tabular-nums}

/* ── Side menu: the group name in the table header on one line, a long one ellipsized (a tap expands it, data-clamp) ── */
:root[data-sidebar] :is(table.tbl th.gname,.tbl-head .subhead) [data-clamp]{-webkit-line-clamp:1;line-clamp:1;overflow-wrap:normal;word-break:break-all}
/* … the group heading above the teams in O turnaji too; the full name in title */
:root[data-sidebar] .tgroups .cs-h h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Side menu: Stravovanie — teams in a time slot two per row like the teams on Domov (.teamgrid), one per row on the narrowest display;
   the card ends 8 px below the last row like the other cards ── */
[data-meals] .lslot .mrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px}
@media (max-width:339px){[data-meals] .lslot .mrows{grid-template-columns:minmax(0,1fr)}}
[data-meals] .lgrid{padding-bottom:8px}

/* ── Side menu: moving the panel highlight on a page transition (.vside-mark) — like --nav-move-duration in the admin ── */
::view-transition-group(side-tab){animation-duration:250ms;animation-timing-function:var(--ease-out)}
::view-transition-old(side-tab):only-child,::view-transition-new(side-tab):only-child{animation:none}
::view-transition-old(side-tab):only-child{display:none}

/* ── Side menu: Konečné poradie from 720 px as the card with medals (partials/final-table), on a phone the podium card like
   Prehľad in the admin (partials/final-admin) — both are on the page, each shows at its own width ── */
@media (min-width:720px){
  :root[data-sidebar] [data-final-admin]{display:none}
  /* the hidden podium is another item in the tables grid (.mid.standings), so the card would stay in one column */
  :root[data-sidebar] .mid.standings > [data-final-table]{grid-column:1 / -1}
}
@media (max-width:719px){:root[data-sidebar] [data-final-table]{display:none}}

/* ── Side menu, phone: Konečné poradie as the card on Prehľad in the admin (partials/final-admin): the heading in the card
   header, podium 2 · 1 · 3 above the floor line (crest 40 px, name 14 px in full, steps 70 / 52 / 40 px
   with the number 18 / 600 in the metal colour), below it places from 4th as group table rows (table.tbl) ── */
:root[data-sidebar] .mid.standings > .afin{grid-column:1 / -1}
.afin-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;padding:16px 16px 0;border-bottom:1px solid var(--line)}
.afin-step{display:flex;flex-direction:column;align-items:center;min-width:0}
.afin-team{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:100%;padding-bottom:10px;color:var(--ink);text-decoration:none}
.afin-team .crest-svg{flex:none}
.afin-team .nm{overflow-wrap:anywhere;max-width:100%;font-size:var(--fs-ui);line-height:20px;text-align:center;text-wrap:balance}
.afin-step.mine .nm{color:var(--mine)}
.afin-step.ph .afin-team{opacity:.55}
.afin-block{display:grid;place-items:center;width:100%;border-radius:12px 12px 0 0;
  font-size:18px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.014em}
.afin-step.p1 .afin-block{height:70px;color:var(--medal-1-ink);background:linear-gradient(180deg,rgb(var(--medal-1) / 38%),rgb(var(--medal-1) / 10%))}
.afin-step.p2 .afin-block{height:52px;color:var(--medal-2-ink);background:linear-gradient(180deg,rgb(var(--medal-2) / 34%),rgb(var(--medal-2) / 9%))}
.afin-step.p3 .afin-block{height:40px;color:var(--medal-3-ink);background:linear-gradient(180deg,rgb(var(--medal-3) / 34%),rgb(var(--medal-3) / 9%))}
.afin-rest{padding-top:6px}

/* ── Side menu on a phone: live games on Domov switch only by swiping, under the panel only the dots remain, without
   „Predošlý / Ďalší zápas“ ── */
@media (max-width:719px){:root[data-sidebar] #live .swipehint{display:none}}

/* ── Side menu: a card with tabs (Poradie and Zápasy tímu, Odohrané zápasy) has the selected panel's height, not the tallest one's —
   a hidden panel holds no space; whistline.js (wireSeg) smoothly evens out the height after a switch ── */
:root[data-sidebar] .segps > .segp[hidden]{display:none}

/* ── Side menu, at every width: the selected tab's highlight in the bottom navbar is its own layer (.nav-mark) — whistline.js
   (markMain) moves it from the old tab to the new one, on press along a spring (wirePress); on a full load the page
   transition ── */
.nav-mark{display:none}
:root[data-sidebar] .navlink[aria-current="page"]{background:none}
/* the tab does not clip (the highlight is wholly inside it, the text truncates itself) and the highlight has a constant layer: so at the end of the move
   nothing on the new tab repaints — in Safari the icon would shift by a fraction of a pixel */
:root[data-sidebar] .navlink{isolation:isolate;overflow:visible}
:root[data-sidebar] .nav-mark{display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill-2);
  pointer-events:none;view-transition-name:nav-tab;will-change:transform}
::view-transition-group(nav-tab){animation-duration:250ms;animation-timing-function:var(--ease-out)}
::view-transition-old(nav-tab),::view-transition-new(nav-tab){animation:none;height:100%}
::view-transition-old(nav-tab){display:none}

/* ── Side menu: O turnaji — when the hero scrolls under the bar, the bar shows on the left by Zdieľať the tournament crest (22 px, the cup
   without a logo) and its name at the size of scrolled page headings (18 / 700) on one line, a long one ellipsized 12 px before Zdieľať;
   on phone and desktop ── */
.hdr-badge{display:none}
:root[data-sidebar] .hdr[data-tab="about"] .hdr-name{display:flex;position:static;transform:none;flex:1 1 0;min-width:0;
  max-width:none;justify-content:flex-start;gap:8px;margin-inline-end:12px;font-size:var(--fs-value);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  white-space:nowrap}
:root[data-sidebar] .hdr[data-tab="about"] .hdr-name .crest-svg{width:22px}
:root[data-sidebar] .hdr[data-tab="about"] .hdr-badge{display:grid;place-items:center;flex:none;width:22px;height:22px;color:var(--ink-3)}
:root[data-sidebar] .hdr[data-tab="about"] .hdr-badge svg{width:18px;height:18px}
@media (min-width:720px){:root[data-sidebar] .hdr[data-tab="about"] .hdr-name{order:2}}

/* ── Side menu: the empty list of a team's games (partials/empty-games) like the admin empty states (Skupiny, Stravovanie): two
   tilted game cards — time above a line, two empty crests and „– : –“ —, the second over the first; below them a heading (15 / 600)
   and one sentence (14, ink-2), all centred; from the tabs to the top of the cards as much as from the text to the end of the card (31 px) ── */
.gempty{display:grid;justify-items:center;gap:6px;padding:21px 16px 28px;text-align:center}
.gempty h3{margin:0;font-size:var(--fs-control);line-height:20px;font-weight:600;color:var(--ink);text-wrap:balance}
.gempty p{margin:0;max-width:300px;font-size:var(--fs-ui);line-height:20px;color:var(--ink-2);text-wrap:pretty}
.gempty-art{display:flex;justify-content:center;padding-block:8px 4px;margin-bottom:14px}
.gempty-card{display:grid;gap:8px;width:136px;padding:9px 10px 11px;border-radius:12px;background:var(--surface);
  box-shadow:0 0 0 1px var(--line-2),0 4px 10px -6px rgb(0 0 0 / 18%);text-align:start}
.gempty-card:first-child{rotate:-7deg;translate:0 6px}
.gempty-card:last-child{z-index:1;margin-inline-start:-40px;rotate:5deg;translate:0 -2px;
  box-shadow:0 0 0 1px var(--line-2),0 14px 24px -12px rgb(0 0 0 / 28%)}
.gempty-card > b{padding-bottom:7px;border-bottom:1px solid var(--line);font-size:12px;line-height:16px;font-weight:500;color:var(--ink)}
.gempty-vs{display:flex;align-items:center;justify-content:space-between;gap:4px}
.gempty-side{display:grid;justify-items:center;gap:5px}
.gempty-side .crest-svg{width:18px;height:auto;color:var(--ink-3)}
.gempty-side i{width:var(--w);height:5px;border-radius:3px;background:var(--fill-2)}
.gempty-sc{display:flex;gap:3px;font-size:var(--fs-ui);line-height:18px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gempty-sc span{opacity:.6}
/* … team form: crest and name in a row, below them five empty form cells and this game's „?“ (like Predzápasová forma) */
.gempty-side.gempty-row{display:flex;align-items:center;gap:6px}
.gempty-form{display:flex;gap:3px}
.gempty-form i{flex:1;height:14px;border-radius:4px;background:var(--fill-2);font-style:normal}
.gempty-form i.now{display:grid;place-items:center;background:none;box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:9px;line-height:1;font-weight:600;color:var(--ink-3)}

/* ── Side menu, desktop: the game and team modal has its content's height — at most the window minus 56 px (16 bottom, 40 top, where the cards
   under it peek) and at most 860, at least 440 px, so a game with little data is not a narrow strip. The top screen is in flow
   and gives the panel its height, those under it (and the leaving one) lie on it and fill it (whistline.css, .scr). On a phone the
   sheet always reaches the top. ── */
@media (min-width:720px){
  :root[data-sidebar] .msheet{--panel-max:min(calc(100dvh - 56px),860px)}
  :root[data-sidebar] .msheet-panel{height:auto;max-height:var(--panel-max)}
  :root[data-sidebar] .msheet .scr{min-height:min(440px,var(--panel-max))}
  :root[data-sidebar] .msheet .scr:not(.under,.leave){position:relative;max-height:var(--panel-max)}
}

/* ── Side menu, phone and desktop: the switch with a track (.seg as tabs; Odohrané zápasy, Poradie and Zápasy tímu, Tímy)
   and the page tabs (days, phases: .htabs; O turnaji / Stravovanie: .aboutbar .seg) — the selected option's highlight
   moves to the new one on switching like the admin segment (app.css [data-seg-pill], 250 ms, --ease-out); its position comes from
   whistline.js (wireSegPill). ── */
:root[data-sidebar] :is(.seg[role="tablist"],.aboutbar > .seg,.htabs){position:relative;isolation:isolate}
:root[data-sidebar] .htabs[data-seg-pill]::before,
:root[data-sidebar] .seg[data-seg-pill]::before{content:"";position:absolute;top:0;left:0;z-index:-1;
  width:var(--seg-w);height:var(--seg-h);translate:var(--seg-x) var(--seg-y);border-radius:999px;
  background:var(--seg);box-shadow:var(--shadow-in);transition:translate 250ms var(--ease-out),width 250ms var(--ease-out),height 250ms var(--ease-out)}
:root[data-sidebar] :is(.seg,.htabs)[data-seg-still]::before{transition:none}
:root[data-sidebar] .seg[data-seg-pill] > .segb:is([aria-selected="true"],[aria-current="page"]),
:root[data-sidebar] .htabs[data-seg-pill] > .htab[aria-current="page"]{background:transparent;box-shadow:none}
:root[data-sidebar] .seg[data-seg-pill] > .segb,:root[data-sidebar] .htabs[data-seg-pill] > .htab{transition:color 250ms var(--ease-out),scale var(--press)}
@media (prefers-reduced-motion: reduce){:root[data-sidebar] :is(.seg,.htabs)[data-seg-pill]::before{transition:none}}

/* ── Side menu, phone: the small game header in the sheet bar smaller — on the first screen (× on the left, Zdieľať on the right) crests 24 px,
   names 13 / 600 ellipsized, score 18 px and the time in the middle, between the buttons (16 + 44 + 8 px from each side); on a deeper
   screen (‹ on the left, Zdieľať and × on the right) only crests, score and time — the names would not fit beside three buttons ── */
@media (max-width:719px){
  .scr-mini.mb-mini{width:calc(100% - 136px);gap:10px}
  .scr-mini.mb-mini .mb-side{gap:6px}
  .scr-mini.mb-mini .crest-svg{width:24px;height:24px}
  .scr-mini.mb-mini .mb-nm{font-size:var(--fs-meta)}
  .scr-mini.mb-mini .mb-sc{font-size:var(--fs-value)}
  .scr-bar:has([data-sheet-back]) .scr-mini.mb-mini{width:auto;gap:12px}
  .scr-bar:has([data-sheet-back]) .scr-mini.mb-mini .mb-side{flex:none}
  .scr-bar:has([data-sheet-back]) .scr-mini.mb-mini .mb-nm{display:none}
  /* a team on a deeper screen: two buttons on the right, the crest and name stay between them (16 + 44 + 6 + 44 + 8 px from each
     side, since the header stands in the middle), a long name ellipsized */
  .scr-bar:has([data-sheet-back]) .scr-mini:not(.mb-mini){max-width:calc(100% - 236px)}
}

/* ── Side menu, phone: Tímy on Domov as in the prototype (.swipe with .tsq) — a strip of 104 px square cards (crest 50 px, name
   12 / 500) to swipe sideways across the full screen width; from 720 px one card with teams two per row stays ── */
@media (max-width:719px){
  .teamgrid{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * clamp(16px,4vw,40px));padding:0 clamp(16px,4vw,40px);scroll-padding-inline:clamp(16px,4vw,40px);
    background:none;border:0;border-radius:0}
  .teamgrid::-webkit-scrollbar{display:none}
  .teamcell{flex:none;flex-direction:column;justify-content:center;gap:7px;width:104px;aspect-ratio:1;padding:10px;border-radius:20px;
    scroll-snap-align:start;text-align:center;
    background-color:var(--card);border:1px solid var(--card-line)}
  .teamcell .crest-svg{width:50px;height:50px}
  .teamcell .nm{max-width:100%;font-size:var(--fs-small);font-weight:500;line-height:1.2}
}

/* ── Side menu: in Konečné poradie with medals (partials/final-table) the name of the first three wraps and shows in full — who
   won must be readable; from 4th place one line as in the group table ── */
[data-final-table] tbody tr:nth-child(-n+3) .tcell .nm{white-space:normal;overflow-wrap:anywhere}

/* ── Side menu, desktop: the game page (a live game opens as a page from 720 px) — when the game header scrolls under the
   bar, the middle of the bar shows a small header as in the modal bar: home name and crest, score with time, crest and away
   (crests 28 px, names 15 / 600 ellipsized, score 20 px, running clock red). It stands in the middle of the column between ‹ and Zdieľať
   zápas (whistline.js, watchTitle → data-scrolled). ── */
@media (min-width:720px){
  :root[data-sidebar] .hdr-name.mb-mini{display:flex;width:calc(100% - 2 * var(--gutter) - 340px);max-width:none;gap:20px;
    transform:translate(-50%,-50%);font-size:var(--fs-control)}
  :root[data-sidebar] .hdr-name.mb-mini .mb-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px}
  :root[data-sidebar] .hdr-name.mb-mini .mb-side:first-child{justify-content:flex-end}
  :root[data-sidebar] .hdr-name.mb-mini .mb-nm{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :root[data-sidebar] .hdr-name.mb-mini .crest-svg{width:28px;height:28px}
  :root[data-sidebar] .hdr-name.mb-mini .mb-core{flex:none}
  :root[data-sidebar] .hdr-name.mb-mini .mb-sc{font-size:var(--fs-score)}
  :root[data-sidebar] .hdr-name.mb-mini .mb-st{font-size:var(--fs-meta)}
  :root[data-sidebar] .hdr-name.mb-mini .mb-st.live{color:var(--live);font-weight:600;font-variant-numeric:tabular-nums}
}

/* ── Sharing: popover (.share-menu.flat) and on a phone a sheet (.flat-share) with tickets and cards drawn
   flat (whistline.js posterBlob). The image has a transparent edge around the paper, 90 top, 120 sides, 140 bottom
   (at width 880), negative margins even it out; the paper's height is --ph (whistline.js). In the popover it tilts after the
   cursor. ── */
.share-menu.flat .pvwrap.bare,.flat-share .pvwrap.bare{--ph:1240;display:flow-root}
/* popover 340, ticket 276 with as much room above it as at the sides (32 px), standings card at the
   popover's width (24 px from the side and top); 24 px below the card to the targets, targets 16 px from the bottom and sides */
.share-menu.flat{width:340px}
.share-menu.flat .pvbox{padding-bottom:24px}
.share-menu.flat .pvbox:has(> .pvwrap[data-kind="ticket"]){padding-top:26px}
.share-menu.flat .pvwrap.bare[data-kind="ticket"]{width:min(276px,calc(48dvh * 880 / var(--ph)))}
.share-menu.flat .pvwrap.bare[data-kind="table"]{width:min(100%,calc(44dvh * 880 / var(--ph)))}
.share-menu.flat .dests{margin:0 10px 10px;padding:0}
.share-menu.flat :is(.pvwrap.bare,.pvstrip .pvwrap) .pv,.flat-share :is(.pvwrap.bare,.pvstrip .pvwrap) .pv{
  position:static;display:block;width:calc(100% * 1120 / 880);max-width:none;height:auto;min-height:0;max-height:none;
  aspect-ratio:1120/calc(var(--ph,1240) + 230);object-fit:fill;
  margin:calc(100% * -90 / 880) calc(100% * -120 / 880) calc(100% * -140 / 880)}
.share-menu.flat .pvstrip .pvwrap,.flat-share .pvstrip .pvwrap{--ph:1240;display:flow-root;transform:none}
/* ticket and cards rotated -2.5° like the preview in the prototype; via rotate, since the strip's transform holds the scale and .pv the tilt */
:is(.share-menu.flat,.flat-share) :is(.pvbox > .pvwrap,.pvstrip .pvwrap){rotate:-2.5deg}
/* tilt: the image is always on its own 3D layer (will-change) so the browser draws it the same at rest and tilted
   and the card neither jumps nor stays blurred when the cursor arrives */
.share-menu.flat :is(.pvbox > .pvwrap,.pvstrip .pvwrap) :is(.pv,.pvholo){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
/* the standings card strip can be dragged with the mouse (whistline.js), no snap and no text selection while dragging */
.share-menu.flat .pvstrip{cursor:grab}
.share-menu.flat .pvstrip.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.share-menu.flat .pvstrip.dragging .pvwrap{cursor:grabbing}
.share-menu.flat .pvbox > .pvwrap .pv{transition:opacity .25s ease}
/* phone: the card strip scrolls only sideways; above and below it has room for the card shadow (negative margins even it out, spacings
   stay as in the sheet: 14 px top, 20 px to the dots) */
.flat-share .pvstrip{overflow-y:hidden;margin:-10px -22px -40px;padding:24px 0 60px}
/* phone: full-height sheet, ticket and card larger than the popover preview; in the strip a card at 80 % width, the neighbours peek */
.flat-share .pvwrap.bare[data-kind="ticket"]{width:min(88%,340px,calc(60dvh * 880 / var(--ph)))}
.flat-share .pvwrap.bare[data-kind="table"]{width:min(92%,360px,calc(54dvh * 880 / var(--ph)))}
.flat-share .pvstrip .pvwrap{flex-basis:min(80%,360px)}
.flat-share .pvstrip::before,.flat-share .pvstrip::after{flex-basis:calc(50% - min(40%,180px) - 8px)}
/* targets with a taller cell under the mouse; with several tables, 20 px below the card, ‹ dots › side by side in the middle
   (whistline.js .pvnav), ‹ › switch tables like a drag; round 32 px like Späť in the game detail, at an end the respective one
   is disabled. Only in the popover (from 720 px); on a phone the strip moves by dragging. The strip does not clip the card shadow: above and below it has room
   for the shadow. */
.share-menu.flat .dest{padding:10px 0}
.pvnav{display:contents}
.pvstep{display:none}
.share-menu.flat .pvbox:has(.pvstrip){overflow:visible}
.share-menu.flat .pvstrip{margin:-18px -24px -56px;padding:18px 0 56px}
/* the masked strip is its own layer and its shadow room reaches under ‹ ›: they stand above it; a double click selects nothing */
.share-menu.flat .pvnav{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 -4px}
.share-menu.flat .pvbox{user-select:none;-webkit-user-select:none}
.share-menu.flat .pvnav .pvdots{margin:0}
.share-menu.flat .pvstep{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:var(--seg);box-shadow:var(--shadow-in);color:var(--ink);cursor:pointer;
  transition:background-color .15s ease-out,opacity .15s ease-out,scale var(--press)}
.share-menu.flat .pvstep svg{width:16px;height:16px}
@media (hover: hover){.share-menu.flat .pvstep:hover:not(:disabled){background:color-mix(in srgb,var(--seg) 94%,var(--ink))}}
.share-menu.flat .pvstep:active:not(:disabled){scale:.97}
.share-menu.flat .pvstep:disabled{opacity:.4;cursor:default}
.share-menu.flat .pvstep:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Side menu, desktop: the game page has its cards on the page grid like the other pages — edge to edge of the content, where
   ‹ and Zdieľať above them are too (without the body's 24 px inset). In the game and team sheet the bar buttons (×, ‹, Zdieľať) are round
   32 px with a 16 px icon like Späť on the game page. ── */
@media (min-width:720px){
  :root[data-sidebar] .matchview .mbody{padding-inline:0}
  :root[data-sidebar] .msheet .scr-bar .gbtn{width:32px;height:32px;border:0;border-radius:999px;background:var(--seg);box-shadow:var(--shadow-in);
    color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .15s ease-out,scale var(--press)}
  :root[data-sidebar] .msheet .scr-bar .gbtn svg:not(.crest-svg){width:16px;height:16px}
  /* the followed team's star stays amber in the sheet's bar too */
  :root[data-sidebar] .msheet .scr-bar .gbtn.on{color:var(--mine)}
  @media (hover: hover){:root[data-sidebar] .msheet .scr-bar .gbtn:hover{background:color-mix(in srgb,var(--seg) 94%,var(--ink))}}
}

/* ── The ticket or card (in the strip the middle one) tilts by --rx and --ry on the frame, set under a mouse by
   whistline.js (stepTilt), which also handles smoothness; transform has no transition here ── */
.flat-share .pvbox .pvwrap :is(.pv,.pvholo){transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.flat-share .pvbox .pvwrap .pv{transition:opacity .25s ease}

/* ── Ticket holography (whistline.js .pvholo over the image, mask from posterBlob holoMask): a layer the size of the paper
   (the .pvwrap frame has the paper's size, the image's transparent edge hangs outside it). The cursor (on a phone where the ticket
   tilts to; tiltTicket: --hx, --hy) is the light's centre: colours go around it (conic, turning with movement, --ha),
   a light glint at it; the mask lets them through only the engraving: very faintly across the whole paper, stronger around the light
   (--holo-spot, to half the paper width, a circle: height equal to the paper width). Strength comes from the cursor's approach (--holo, whistline.js stepTilt), without it the layer is hidden. On white paper it multiplies (richer colours), on dark it lightens. It rotates with the image around the same centre: the image's centre is 25 (at width 880) lower than the paper's. ── */
.pvholo{--holo-glint:rgb(201 206 214 / 70%);
  --h1:#ff4791;--h2:#ffa940;--h3:#cfe347;--h4:#47dd8a;--h5:#47ceff;--h6:#5c84ff;--h7:#9a5cff;
  position:absolute;inset:0;pointer-events:none;opacity:var(--holo,0);
  --holo-spot:radial-gradient(50% 37% at var(--hx,50%) var(--hy,50%),rgb(0 0 0 / 55%),rgb(0 0 0 / 26%) 45%,rgb(0 0 0 / 9%));
  -webkit-mask:var(--holo-mask) 0 0 / 100% 100% no-repeat,var(--holo-spot);
  -webkit-mask-composite:source-in;
  mask:var(--holo-mask) 0 0 / 100% 100% no-repeat,var(--holo-spot);
  mask-composite:intersect;
  background:
    radial-gradient(circle at var(--hx,50%) var(--hy,50%),var(--holo-glint),transparent 14%),
    conic-gradient(from var(--ha,0deg) at var(--hx,50%) var(--hy,50%),
      var(--h1),var(--h2),var(--h3),var(--h4),var(--h5),var(--h6),var(--h7),var(--h1));
  mix-blend-mode:multiply;
  transform-origin:50% calc(50% + 2500% / var(--ph,1240))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pvholo{mix-blend-mode:screen;--holo-glint:rgb(232 236 242 / 55%);
  --h1:#ff5fa2;--h2:#ffb45f;--h3:#d8f06a;--h4:#6ff2a8;--h5:#5fd8ff;--h6:#6f8bff;--h7:#b06bff}}
:root[data-theme="dark"] .pvholo{mix-blend-mode:screen;--holo-glint:rgb(232 236 242 / 55%);
  --h1:#ff5fa2;--h2:#ffb45f;--h3:#d8f06a;--h4:#6ff2a8;--h5:#5fd8ff;--h6:#6f8bff;--h7:#b06bff}
/* a flattened card (no data-tilt, whistline.js stepTilt) draws no holography: the mix-blend-mode layer would leave it
   blurred */
.pvwrap:not([data-tilt]) .pvholo{display:none}

/* ── Side menu: press grows (whistline.js, wirePress) — a bar button grows along a spring and follows the finger a little,
   the tab row grows whole and its highlight moves under the finger. The shrink on press (.97) stays only with
   reduced motion. ── */
@media (prefers-reduced-motion: no-preference){
  /* buttons grow only on a phone; from 720 px they press as usual (.97) */
  @media (max-width:719px){:root[data-sidebar] :is(.gbtn,.gpill):active{transform:none}}
  /* a tab does not shrink by itself on press: its whole row grows, otherwise the icon and text would shift on release */
  :root[data-sidebar] :is(.navlink,.htab,.segb):active{scale:none}
}
/* from 720 px the bottom navbar has the icon beside the text and a tab is as wide as its content: the selected text (600) would widen the tab and the icon
   would jump after a click — so the tab always has the width of the bold text (a hidden bold copy, data-label) */
@media (min-width:720px){
  :root[data-sidebar] .navlink > span[data-label]{display:inline-grid}
  :root[data-sidebar] .navlink > span[data-label]::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none}
}
/* the tab row highlight (::before) takes its timing from wirePress on press: fast behind a dragging finger, on
   landing a spring overshooting at most 4 px (--seg-dur, --seg-ease); otherwise 250 ms along --ease-out */
:root[data-sidebar] :is(.seg,.htabs)[data-seg-pill]:not([data-seg-still])::before{
  transition-duration:var(--seg-dur,250ms);transition-timing-function:var(--seg-ease,var(--ease-out))}