/* RaidCall — bento design (app/design.py).

   Loaded only when <html data-design="bento">. Two layers:

   1. the --raidcall-* tokens re-tuned (ground, type, radii), so anything still
      drawn with the shared Tailwind utilities sits on the bento ground in the
      bento face;
   2. the .bn-* components the bento templates are built from: tiles in a grid,
      one fact and one tap per tile.

   Light and dark follow data-theme like the rest of the app: "classic" is the
   light bento, "modern" the dark one. Colours are --bn-* (whole colours, not
   channel triplets - nothing here needs Tailwind's /opacity modifiers). Every
   text/ground pair below is ≥ 4.5:1. */

/* ------------------------------------------------------------- tokens */

[data-design="bento"] {
  --bn-ground: #EEF0F3;
  --bn-tile: #FFFFFF;
  --bn-tile-2: #F5F6F8;
  --bn-line: #E4E7EC;
  --bn-ink: #1D2939;
  --bn-muted: #475467;          /* 7.9:1 on tile */
  --bn-faint: #667085;          /* 4.8:1 on tile - hints only */

  --bn-navy: #1D2939;           /* dark tile */
  --bn-navy-ink: #FFFFFF;
  --bn-navy-muted: #C7CFDA;
  --bn-navy-2: #344054;

  --bn-fire: #B42318;           /* filled, white label 6.5:1 */
  --bn-fire-hover: #912018;
  --bn-fire-tint: #FEE4E2;
  --bn-fire-ink: #912018;       /* on tint 6.6:1 */
  --bn-fire-soft-ink: #FFE4E1;  /* secondary text on fire */

  --bn-sand: #F4EBDD;
  --bn-sand-ink: #3D2E14;

  --bn-green: #0B6B4C;
  --bn-green-tint: #DCFAE6;
  --bn-green-ink: #085D3A;
  --bn-green-soft-ink: #C6F0DC;

  --bn-blue-tint: #E0EAFF;
  --bn-blue-ink: #2D4FB3;
  --bn-amber-tint: #FEF0C7;
  --bn-amber-ink: #93370D;
  --bn-kiko-tint: #EFEAFD;
  --bn-kiko-ink: #5B3CC4;

  --bn-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --bn-shadow-lift: 0 12px 30px rgba(29, 41, 57, 0.18);
  --bn-focus: #2D4FB3;

  --bn-r-tile: 28px;
  --bn-r-inner: 16px;
  --bn-r-btn: 16px;

  /* the shared tokens, so un-redrawn markup inherits the look */
  --raidcall-bg: 238 240 243;
  --raidcall-font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --raidcall-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --raidcall-radius-xl: 1rem;
  --raidcall-radius-2xl: 1.5rem;
  --raidcall-radius-3xl: 1.75rem;
}

[data-design="bento"][data-theme="modern"] {
  --bn-ground: #0B0F14;
  --bn-tile: #151B23;
  --bn-tile-2: #1C242E;
  --bn-line: #263040;
  --bn-ink: #E6EDF3;
  --bn-muted: #A3AEBD;          /* 7.6:1 on tile */
  --bn-faint: #8B97A8;          /* 5.4:1 */

  --bn-navy: #233042;
  --bn-navy-ink: #F2F5F9;
  --bn-navy-muted: #B9C4D3;
  --bn-navy-2: #34455C;

  --bn-fire: #D92D20;           /* white label 4.9:1 */
  --bn-fire-hover: #B42318;
  --bn-fire-tint: #3A1715;
  --bn-fire-ink: #FDA29B;
  --bn-fire-soft-ink: #FFE4E1;

  --bn-sand: #2B2418;
  --bn-sand-ink: #F1E3CB;

  --bn-green: #0E7A57;
  --bn-green-tint: #0F2A1F;
  --bn-green-ink: #75E0A7;
  --bn-green-soft-ink: #D1F5E4;

  --bn-blue-tint: #172447;
  --bn-blue-ink: #A4BCFD;
  --bn-amber-tint: #2E2310;
  --bn-amber-ink: #FEC84B;
  --bn-kiko-tint: #231D3D;
  --bn-kiko-ink: #C3B5FD;

  --bn-shadow: 0 0 0 1px #1F2834;
  --bn-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.5);
  --bn-focus: #A4BCFD;

  --raidcall-bg: 11 15 20;
}

/* ------------------------------------------------------------- ground */

[data-design="bento"] body {
  background: var(--bn-ground);
  color: var(--bn-ink);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-design="bento"] :focus-visible {
  outline: 2px solid var(--bn-focus);
  outline-offset: 2px;
}

/* the page column (bento/base.html's <main>): a phone column that widens into
   a dashboard; the bottom padding keeps the last tile clear of the floating bar */
.bn-main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 14px calc(120px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  box-sizing: border-box;
}
/* forms and reading pages: one phone-wide column even on a laptop */
.bn-narrow { max-width: 640px; margin: 0 auto; }
.bn-medium { max-width: 820px; margin: 0 auto; }

/* one navigation on every screen size: the floating bar and its Viac sheet,
   no sidebar (the shared sheet is md:hidden in the original design) */
[data-design="bento"] body.rc-has-sidebar { padding-left: 0 !important; }
[data-design="bento"] body.rc-tabs { padding-bottom: 0; }
@media (min-width: 768px) {
  [data-design="bento"] .rc-sheet:not([hidden]),
  [data-design="bento"] .rc-sheet-backdrop:not([hidden]) { display: block !important; }
  [data-design="bento"] .rc-sheet:not(.rc-drawer) { left: 50%; right: auto; width: 520px; margin-left: -260px; }
}

/* ------------------------------------------------------------- top bar */

.bn-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bn-ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}
.bn-topbar-in {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--bn-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.bn-brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bn-fire);
  color: #fff;
  display: grid;
  place-items: center;
}
.bn-brand-mark svg { width: 26px; height: 26px; }
.bn-brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.bn-brand-text small { font-size: 12px; font-weight: 500; color: var(--bn-muted); }
.bn-brand-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bn-chipbtn {
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 0;
  background: var(--bn-tile);
  box-shadow: var(--bn-shadow);
  color: var(--bn-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.bn-chipbtn svg { width: 18px; height: 18px; }
.bn-dot { width: 9px; height: 9px; border-radius: 50%; background: #12B76A; }
/* the theme toggle reuses the shared JS (.rc-theme-toggle) */
[data-design="bento"] .bn-chipbtn.rc-theme-toggle { width: 40px; padding: 0; }
.bn-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 112px;
  padding: 6px;
  border-radius: 18px;
  background: var(--bn-tile);
  box-shadow: var(--bn-shadow-lift);
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.bn-menu a {
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--bn-ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.bn-menu a:hover { background: var(--bn-tile-2); }

/* ------------------------------------------------------------- floating tab bar */

.bn-tabbar {
  position: fixed;
  left: 50%;
  bottom: max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%);
  z-index: 45;
  width: min(calc(100% - 28px), 520px);
  height: 66px;
  box-sizing: border-box;
  padding: 0 7px;
  border-radius: 33px;
  background: var(--bn-navy);
  color: var(--bn-navy-muted);
  box-shadow: var(--bn-shadow-lift);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  transition: transform 0.22s ease;
}
.bn-tabbar.rc-bar-hidden { transform: translate(-50%, 140%); visibility: hidden;
                          transition: transform 0.22s ease, visibility 0s linear 0.22s; }
/* hidden for real once it has slid away: Safari (iOS 26) would otherwise
   still tint its address bar with the bar's colour (see .bn-edge-tint) */
.bn-tabbar--incident { box-shadow: 0 0 0 2px var(--bn-fire), var(--bn-shadow-lift); }
.bn-tab {
  height: 54px;
  border-radius: 27px;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
}
.bn-tab svg { width: 21px; height: 21px; }
.bn-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
/* the icon's wrapper carries the badge: the label's clipping must not cut it */
.bn-tab .bn-tab-ic { position: relative; display: inline-flex; overflow: visible; max-width: none; padding: 0; }
.bn-tab:hover { color: var(--bn-navy-ink); }
.bn-tab[aria-current="page"] {
  background: var(--bn-tile);
  color: var(--bn-ink);
}
.bn-tab--alarm[aria-current="page"],
.bn-tab--alarm:hover { color: var(--bn-ink); }
.bn-tab-badge {
  position: absolute;
  top: -4px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--bn-fire);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* the Viac sheet is shared markup; bento rounds and recolours it */
[data-design="bento"] .rc-sheet {
  background: var(--bn-tile) !important;
  border-radius: 28px 28px 0 0;
}
[data-design="bento"] .rc-sheet a.rounded-xl:hover { background: var(--bn-tile-2); }
[data-design="bento"] .rc-sheet .bg-fire-light { background: var(--bn-fire-tint); color: var(--bn-fire-ink); }
[data-design="bento"] .rc-sheet a.bg-fire { background: var(--bn-fire); border-radius: var(--bn-r-btn); }
/* Viac lives behind the ☰ in the top bar: the shared sheet becomes a drawer
   from the left, full height, with the pages as tiles */
[data-design="bento"] .rc-sheet.rc-drawer {
  inset: 0 auto 0 0;
  width: min(88vw, 380px);
  height: 100dvh;
  max-height: none;
  border-radius: 0 28px 28px 0;
  /* the bottom keeps clear of a phone's gesture or button bar even where
     the WebView reports no inset (Android edge-to-edge), so the last rows -
     Moje konto, Odhlásiť - can always be scrolled into view (2026-10-25) */
  padding: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 14px calc(56px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 18px 0 40px -12px rgb(9 11 15 / 0.35);
  transform: translateX(-104%);
}
[data-design="bento"] .rc-sheet.rc-drawer.rc-open { transform: translateX(0); }
.bn-burger { padding: 0; }
.bn-burger svg { width: 22px; height: 22px; }
.bn-mhead { display: flex; align-items: center; gap: 12px; padding: 4px 2px 12px; }
.bn-mhead .bn-chipbtn { margin-left: auto; }
.bn-mhead .bn-chipbtn svg { width: 18px; height: 18px; }
.bn-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bn-mtile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 86px;
  border-radius: 18px;
  background: var(--bn-tile-2);
  color: var(--bn-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.bn-mtile:active { transform: scale(0.97); }
.bn-mgroup { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-muted); padding: 16px 4px 6px; }
.bn-mrow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 14px; color: var(--bn-ink); text-decoration: none; }
.bn-mrow:hover { background: var(--bn-tile-2); }
.bn-mrow .bn-row-end { color: var(--bn-muted); }
.bn-mlogout { margin-top: 14px; }
.bn-mall { margin-top: 10px; gap: 8px; }
/* the menu editor (/clen/konto/menu) */
.bn-smenu .bn-mgroup:first-of-type { padding-top: 4px; }
.bn-smenu-row { scroll-margin-top: 90px; }
.bn-smenu-btns { flex-shrink: 0; display: flex; gap: 6px; }
.bn-smenu-btn {
  width: 36px; height: 36px; border-radius: 12px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bn-tile-2); color: var(--bn-ink); cursor: pointer; flex-shrink: 0;
}
.bn-smenu-btn svg { width: 18px; height: 18px; }
.bn-smenu-btn:disabled { opacity: 0.35; cursor: default; }
.bn-smenu-btn--remove { color: var(--bn-fire); }
.bn-smenu-btn--add { background: var(--bn-fire); color: #fff; }
/* the alarm button sits above the floating bar, not on it */
[data-design="bento"] #rc-alarm-fab { bottom: calc(max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) + 80px) !important; }

/* ------------------------------------------------------------- headings */

.bn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
}
.bn-head-text { min-width: 0; }
.bn-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bn-muted);
}
.bn-h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-ink);
}
.bn-h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--bn-ink);
}
.bn-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 4px 8px;
}
.bn-section a { font-size: 13px; font-weight: 700; color: var(--bn-fire-ink); text-decoration: none; }
[data-design="bento"][data-theme="classic"] .bn-section a { color: var(--bn-fire); }
.bn-muted { color: var(--bn-muted); }
.bn-faint { color: var(--bn-faint); }
.bn-small { font-size: 13px; }
.bn-tiny { font-size: 12px; }
.bn-num {
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bn-num small { font-size: 0.5em; opacity: 0.7; letter-spacing: 0; }
.bn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px 0 8px;
  margin: 0 0 6px;
  border-radius: 12px;
  color: var(--bn-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bn-back:hover { background: var(--bn-tile); color: var(--bn-ink); }
.bn-back svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- grid + tiles */

.bn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* before the breakpoint, so a .bn-md-span-* on the same tile wins there */
.bn-span-2 { grid-column: span 2; }
.bn-full { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .bn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .bn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bn-md-span-2 { grid-column: span 2; }
  .bn-md-span-4 { grid-column: span 4; }
  .bn-md-row-2 { grid-row: span 2; }
  .bn-md-span-1 { grid-column: span 1; }
}
.bn-stack { display: flex; flex-direction: column; gap: 10px; }

.bn-tile {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--bn-r-tile);
  background: var(--bn-tile);
  color: var(--bn-ink);
  box-shadow: var(--bn-shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
a.bn-tile, button.bn-tile { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
a.bn-tile:hover, button.bn-tile:hover { box-shadow: var(--bn-shadow-lift); }
a.bn-tile:active, button.bn-tile:active { transform: scale(0.985); }
button.bn-tile { border: 0; text-align: left; font: inherit; }
.bn-tile--between { justify-content: space-between; }
.bn-tile--row { flex-direction: row; align-items: center; gap: 14px; }
.bn-tile--tall { min-height: 164px; }
.bn-tile--mid { min-height: 116px; }
.bn-tile--pad-lg { padding: 20px; }

.bn-tile--fire { background: var(--bn-fire); color: #fff; }
.bn-tile--fire .bn-muted, .bn-tile--fire .bn-eyebrow { color: var(--bn-fire-soft-ink); }
.bn-tile--navy { background: var(--bn-navy); color: var(--bn-navy-ink); }
.bn-tile--navy .bn-muted, .bn-tile--navy .bn-eyebrow { color: var(--bn-navy-muted); }
.bn-tile--sand { background: var(--bn-sand); color: var(--bn-sand-ink); }
.bn-tile--sand .bn-muted, .bn-tile--sand .bn-eyebrow { color: var(--bn-sand-ink); opacity: 0.85; }
.bn-tile--green { background: var(--bn-green); color: #fff; }
.bn-tile--green .bn-muted, .bn-tile--green .bn-eyebrow { color: var(--bn-green-soft-ink); }
.bn-tile--soft { background: var(--bn-tile-2); box-shadow: none; }
.bn-tile--alert { box-shadow: 0 0 0 2px var(--bn-fire), var(--bn-shadow-lift); }
.bn-tile--warn { background: var(--bn-amber-tint); color: var(--bn-amber-ink); box-shadow: none; }
.bn-tile--warn .bn-muted { color: var(--bn-amber-ink); }
.bn-tile--danger { background: var(--bn-fire-tint); color: var(--bn-fire-ink); box-shadow: none; }
.bn-tile--danger .bn-muted { color: var(--bn-fire-ink); }
.bn-tile--ok { background: var(--bn-green-tint); color: var(--bn-green-ink); box-shadow: none; }
.bn-tile--ok .bn-muted { color: var(--bn-green-ink); }
.bn-tile-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.bn-tile-sub { font-size: 12px; color: var(--bn-muted); line-height: 1.35; }
.bn-tile-big { font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; }
.bn-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* the alert tile pulses in its own type colour (--bn-pulse) */
@keyframes bn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--bn-pulse, rgba(180, 35, 24, 0.5)); }
  50% { box-shadow: 0 0 0 14px transparent; }
}
.bn-pulse { animation: bn-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .bn-pulse { animation: none; } }

/* the running alert (2026-11-07): rings spread from the tile's right edge,
   behind the text and clipped to the tile, and the tile gives a small push
   with each one; nothing reaches past its corners, so the tiles around it
   stay still */
.bn-alive { overflow: hidden; isolation: isolate; animation: bn-push 2.4s ease-out infinite; }
.bn-alive::before,
.bn-alive::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 34px;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px -60px 0 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: bn-wave 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.bn-alive::after { animation-delay: 1.2s; }
@keyframes bn-wave {
  0% { transform: scale(0.3); opacity: 0; }
  15% { opacity: 0.32; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes bn-push {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.012); }
  22% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-alive, .bn-alive::before, .bn-alive::after { animation: none; }
  .bn-alive::before, .bn-alive::after { opacity: 0; }
}

/* ------------------------------------------------------------- icon bubbles */

.bn-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--bn-tile-2);
  color: var(--bn-ink);
}
.bn-ic svg { width: 18px; height: 18px; }
.bn-ic--lg { width: 52px; height: 52px; border-radius: 18px; }
.bn-ic--lg svg { width: 26px; height: 26px; }
.bn-ic--fire { background: var(--bn-fire-tint); color: var(--bn-fire-ink); }
.bn-ic--green { background: var(--bn-green-tint); color: var(--bn-green-ink); }
.bn-ic--blue { background: var(--bn-blue-tint); color: var(--bn-blue-ink); }
.bn-ic--amber { background: var(--bn-amber-tint); color: var(--bn-amber-ink); }
.bn-ic--kiko { background: var(--bn-kiko-tint); color: var(--bn-kiko-ink); }
.bn-ic--glass { background: rgba(255, 255, 255, 0.16); color: inherit; }
.bn-ic--solid { background: var(--bn-fire); color: #fff; }

/* date badge (STR / 22) */
.bn-date {
  width: 52px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--bn-tile-2);
  color: var(--bn-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bn-date b { font-size: 11px; font-weight: 700; color: var(--bn-fire-ink); text-transform: uppercase; }
[data-design="bento"][data-theme="classic"] .bn-date b { color: var(--bn-fire); }
.bn-date span { font-size: 24px; font-weight: 700; }

/* ------------------------------------------------------------- buttons */

.bn-btn {
  height: 48px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: var(--bn-r-btn);
  border: 0;
  background: var(--bn-tile-2);
  color: var(--bn-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.08s ease;
  white-space: nowrap;
}
.bn-btn:active { transform: scale(0.98); }
.bn-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.bn-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bn-btn--block { width: 100%; }
.bn-btn--sm { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 13px; }
.bn-btn--lg { height: 64px; font-size: 18px; border-radius: 20px; }
.bn-btn--xl { height: 76px; font-size: 22px; border-radius: 24px; letter-spacing: 0.03em; }
.bn-btn--fire { background: var(--bn-fire); color: #fff; }
.bn-btn--fire:hover { background: var(--bn-fire-hover); }
.bn-btn--dark { background: var(--bn-navy); color: var(--bn-navy-ink); }
.bn-btn--blue { background: #2E5BFF; color: #fff; }
.bn-btn--dark:hover { background: var(--bn-navy-2); }
.bn-btn--white { background: #fff; color: #912018; }
.bn-btn--glass { background: rgba(255, 255, 255, 0.16); color: inherit; }
.bn-btn--glass:hover { background: rgba(255, 255, 255, 0.24); }
.bn-btn--line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bn-line); }
.bn-btn--line:hover { background: var(--bn-tile-2); }
.bn-btn--ok { background: var(--bn-green); color: #fff; }
.bn-btn--danger-soft { background: var(--bn-fire-tint); color: var(--bn-fire-ink); }
.bn-btn--sand { background: var(--bn-sand-ink); color: var(--bn-sand); }
.bn-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* shared scripts that colour a button with utility classes (the push card) */
.bn-btn.bg-fire { background: var(--bn-fire); color: #fff; }
.bn-btn.bg-green-600 { background: var(--bn-green); color: #fff; }
.bn-btns > * { flex: 1 1 0; }

/* ------------------------------------------------------------- pills + chips */

.bn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bn-tile-2);
  color: var(--bn-muted);
  white-space: nowrap;
}
.bn-pill svg { width: 13px; height: 13px; }
.bn-pill--ok { background: var(--bn-green-tint); color: var(--bn-green-ink); }
.bn-pill--no { background: var(--bn-fire-tint); color: var(--bn-fire-ink); }
.bn-pill--warn { background: var(--bn-amber-tint); color: var(--bn-amber-ink); }
.bn-pill--info { background: var(--bn-blue-tint); color: var(--bn-blue-ink); }
.bn-pill--fire { background: var(--bn-fire); color: #fff; }
.bn-pill--glass { background: rgba(255, 255, 255, 0.16); color: inherit; }
.bn-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------- lists */

.bn-list {
  border-radius: var(--bn-r-tile);
  background: var(--bn-tile);
  box-shadow: var(--bn-shadow);
  overflow: hidden;
}
.bn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 16px;
  box-sizing: border-box;
  color: var(--bn-ink);
  text-decoration: none;
}
.bn-row + .bn-row { border-top: 1px solid var(--bn-line); }
a.bn-row:hover, button.bn-row:hover { background: var(--bn-tile-2); }
button.bn-row { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.bn-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bn-row-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-row-title--wrap { white-space: normal; }
.bn-row-sub { font-size: 12px; color: var(--bn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-row-sub--wrap { white-space: normal; }
.bn-row-end { flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--bn-faint); }
.bn-row-end svg { width: 18px; height: 18px; }
.bn-row--stripe { box-shadow: inset 4px 0 0 var(--bn-fire); }
.bn-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--bn-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------- avatars + bars */

/* ---------------------------------------------------------- chat list rows
   Every conversation is its own row, as in a messenger: a big round avatar,
   the name and the last message, the time on the right. Unread rows are bold
   with a count; nothing is boxed, the rows breathe. */
.bn-cls { display: flex; flex-direction: column; margin: 0 -8px; }
.bn-cl { display: flex; align-items: center; gap: 14px; padding: 9px 8px; border-radius: 18px; color: inherit; text-decoration: none; }
a.bn-cl:hover, a.bn-cl:active { background: var(--bn-tile-2); }
.bn-cl-av { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
              background: var(--bn-navy); color: var(--bn-navy-ink); font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.bn-cl-av svg { width: 26px; height: 26px; }
.bn-cl-av--fire { background: var(--bn-fire-tint); color: var(--bn-fire-ink); }
.bn-cl-av--green { background: var(--bn-green-tint); color: var(--bn-green-ink); }
.bn-cl-av--blue { background: var(--bn-blue-tint); color: var(--bn-blue-ink); }
.bn-cl-av--amber { background: var(--bn-amber-tint); color: var(--bn-amber-ink); }
.bn-cl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bn-cl-name { font-weight: 600; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-cl-name small { font-weight: 500; font-size: 13px; color: var(--bn-muted); }
.bn-cl-name small svg { display: inline; width: 14px; height: 14px; vertical-align: -2px; }
.bn-cl-last { font-size: 14px; line-height: 1.3; color: var(--bn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-cl-end { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 40px; }
.bn-cl-when { font-size: 12px; color: var(--bn-muted); white-space: nowrap; }
.bn-cl-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
             background: var(--bn-fire); color: #fff; font-size: 11px; font-weight: 800; }
.bn-cl--unread .bn-cl-name, .bn-cl--unread .bn-cl-last { color: var(--bn-ink); font-weight: 700; }
.bn-cl--unread .bn-cl-when { color: var(--bn-fire-ink); font-weight: 700; }
.bn-cl--muted .bn-cl-n { background: var(--bn-muted); }
.bn-cls-title { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-faint); margin: 14px 0 2px; }

.bn-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bn-navy);
  color: var(--bn-navy-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;
}
.bn-avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.bn-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.bn-avatars { display: flex; }
.bn-avatars > * { box-shadow: 0 0 0 2px var(--bn-navy); }
.bn-avatars > * + * { margin-left: -4px; }
.bn-avatars--light > * { box-shadow: 0 0 0 2px var(--bn-tile); background: var(--bn-tile-2); color: var(--bn-ink); }

.bn-bar { height: 8px; border-radius: 4px; background: var(--bn-tile-2); overflow: hidden; display: flex; gap: 2px; }
.bn-bar > span { display: block; height: 100%; }
.bn-bar-ok { background: #12B76A; }
.bn-bar-no { background: #F04438; }
.bn-bar-wait { background: var(--bn-line); }
.bn-bar-ink { background: var(--bn-navy); }
.bn-tile--navy .bn-bar { background: var(--bn-navy-2); }
.bn-tile--navy .bn-bar-ink { background: var(--bn-navy-ink); }
.bn-spark { display: flex; align-items: flex-end; gap: 5px; height: 30px; }
.bn-spark span { flex: 1; border-radius: 3px; background: var(--bn-navy-2); min-height: 3px; }
.bn-spark span.on { background: var(--bn-navy-ink); }

/* ------------------------------------------------------------- forms */

.bn-form { display: flex; flex-direction: column; gap: 14px; }
.bn-label {
  display: block;
  margin: 0 0 6px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bn-muted);
}
.bn-hint { margin: 6px 0 0 4px; font-size: 12px; color: var(--bn-faint); }
.bn-input,
[data-design="bento"] .bn-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.bn-raw),
[data-design="bento"] .bn-form select,
[data-design="bento"] .bn-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: var(--bn-r-inner);
  border: 1.5px solid var(--bn-line);
  background: var(--bn-tile);
  color: var(--bn-ink);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-design="bento"] .bn-form textarea { min-height: 96px; resize: vertical; }
.bn-input:focus,
[data-design="bento"] .bn-form input:focus,
[data-design="bento"] .bn-form select:focus,
[data-design="bento"] .bn-form textarea:focus {
  border-color: var(--bn-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-focus) 22%, transparent);
}
[data-design="bento"] .bn-form input::placeholder,
[data-design="bento"] .bn-form textarea::placeholder { color: var(--bn-faint); }
.bn-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--bn-r-inner);
  background: var(--bn-tile-2);
  cursor: pointer;
  font-size: 14px;
}
.bn-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bn-fire); flex-shrink: 0; }

/* segmented choice: radio inputs inside labels */
.bn-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: var(--bn-tile-2);
}
.bn-seg label {
  position: relative;
  min-height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--bn-muted);
  cursor: pointer;
}
.bn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bn-seg label:has(input:checked) { background: var(--bn-tile); color: var(--bn-ink); box-shadow: var(--bn-shadow); }
.bn-seg label:has(input:focus-visible) { outline: 2px solid var(--bn-focus); }

/* chip toggles (vehicles, groups): checkbox inside label */
.bn-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-toggle {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--bn-tile-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.bn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bn-toggle svg { width: 16px; height: 16px; display: none; }
.bn-toggle:has(input:checked) { background: var(--bn-navy); color: var(--bn-navy-ink); }
.bn-toggle:has(input:checked) svg { display: block; }
.bn-toggle:has(input:focus-visible) { outline: 2px solid var(--bn-focus); }

/* switch (role=switch button, or a checkbox styled as one) */
.bn-switch {
  position: relative;
  width: 60px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 18px;
  border: 0;
  padding: 0;
  background: var(--bn-line);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bn-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.bn-switch[aria-checked="true"] { background: var(--bn-green); }
.bn-switch[aria-checked="true"]::after { transform: translateX(24px); }
.bn-tile--green .bn-switch[aria-checked="true"] { background: #fff; }
.bn-tile--green .bn-switch[aria-checked="true"]::after { background: var(--bn-green); }
.bn-tile--navy .bn-switch:not([aria-checked="true"]) { background: var(--bn-navy-2); }

/* alert-type tiles on the chooser */
.bn-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .bn-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bn-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bn-type {
  position: relative;
  min-height: 108px;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 24px;
  background: var(--bn-tile);
  box-shadow: var(--bn-shadow);
  color: var(--bn-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bn-type:hover { box-shadow: var(--bn-shadow-lift); }
.bn-type:active { transform: scale(0.98); }
.bn-type-ic {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  background: var(--bn-type-tint, var(--bn-tile-2));
}
.bn-type-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.bn-type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--bn-type-color, var(--bn-fire));
}
.bn-type--quick { background: var(--bn-navy); color: var(--bn-navy-ink); text-align: left; border: 0; font: inherit; cursor: pointer; }
.bn-type--quick .bn-muted { color: var(--bn-navy-muted); }
.bn-type--quick::after { display: none; }

/* the selected type, worn on the form page */
.bn-chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--bn-r-tile);
  color: #fff;
}

/* the one-screen declare form: types as one radio group, compact enough
   that eight of them and the address both fit a phone */
.bn-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .bn-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bn-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 18px;
  background: var(--bn-tile-2);
  color: var(--bn-ink);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s ease;
}
.bn-pick:active { transform: scale(0.98); }
.bn-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bn-pick-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--bn-type-tint); flex-shrink: 0; }
.bn-pick-name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bn-pick:has(input:checked) { background: var(--bn-type-color); color: var(--bn-type-ink, #fff); box-shadow: 0 8px 20px -8px var(--bn-type-color); }
.bn-pick:has(input:checked) .bn-pick-ic { background: rgba(255, 255, 255, 0.2); }
.bn-pick:has(input:focus-visible) { border-color: var(--bn-focus); }
.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--bn-tile-2); color: var(--bn-ink);
  border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bn-chip svg { width: 14px; height: 14px; opacity: 0.7; }
.bn-chip:active { transform: scale(0.97); }
.bn-pick[hidden], .bn-chips[hidden], .bn-btn[hidden], .bn-hint[hidden] { display: none; }

/* ------------------------------------------------------------- confirm / alarm screen */

.bn-alarm {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: calc(22px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 18px calc(22px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
}
.bn-alarm-in { width: 100%; max-width: 520px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.bn-alarm-ring {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.07), 0 0 0 32px rgba(255, 255, 255, 0.04);
  font-size: 46px;
}

/* ------------------------------------------------------------- incident console */

.bn-console-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
}
.bn-console-tabs button {
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.bn-console-tabs button svg { width: 17px; height: 17px; }
.bn-console-tabs button[data-active="1"] { background: #fff; color: #1D2939; }

/* the NAVIGOVAŤ pill floats above the tab bar */
.bn-navgo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) + 78px);
  z-index: 44;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bn-standalone .bn-navgo { bottom: calc(max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))); }
.bn-navgo-btns { display: flex; border-radius: 28px; overflow: hidden; box-shadow: var(--bn-shadow-lift); }
.bn-navgo-btns a,
.bn-navgo-btns button {
  height: 54px;
  border: 0;
  background: var(--bn-fire);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}
.bn-navgo-btns a { padding: 0 18px 0 22px; }
.bn-navgo-btns button { padding: 0 14px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25); }
.bn-navgo-btns a:hover, .bn-navgo-btns button:hover { background: var(--bn-fire-hover); }
.bn-navgo-btns svg { width: 20px; height: 20px; }

/* the chat: the shared chat.js draws bubbles with the shared utility classes;
   here they get the bento ground, radius and colours */
.bn-chat {
  display: flex;
  flex-direction: column;
  height: min(70vh, 640px);
  border-radius: var(--bn-r-tile);
  overflow: hidden;
  background: var(--bn-tile);
  box-shadow: var(--bn-shadow);
}
.bn-chat.hidden { display: none; }
.bn-chat .rc-chat-list { background: var(--bn-ground) !important; }
.bn-chat .rc-chat-list .rounded-2xl { border-radius: 20px; }
.bn-chat .rc-chat-list .bg-white { background: var(--bn-tile) !important; border: 0 !important; }
.bn-chat .rc-chat-list .bg-fire { background: var(--bn-fire) !important; }
.bn-chat .rc-chat-list .bg-gray-800 { background: var(--bn-navy) !important; }
.bn-chat-announce {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 23px;
  border: 0;
  background: var(--bn-tile-2);
  color: var(--bn-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bn-chat-announce svg { width: 18px; height: 18px; }
.bn-chat-announce[data-on="1"] { background: var(--bn-amber-tint); color: var(--bn-amber-ink); }

/* ------------------------------------------------------------- flash + notices */

[data-design="bento"] .flash-msg {
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: var(--bn-shadow-lift) !important;
  font-weight: 600 !important;
}
[data-design="bento"] .flash-msg[data-category="success"] { background: var(--bn-green-tint) !important; color: var(--bn-green-ink) !important; }
[data-design="bento"] .flash-msg:not([data-category="success"]) { background: var(--bn-fire-tint) !important; color: var(--bn-fire-ink) !important; }
[data-design="bento"] .rc-notice,
[data-design="bento"] .rc-rsvp,
[data-design="bento"] #rc-push-nudge { border: 0 !important; }

/* ------------------------------------------------------------- modal sheet */

.bn-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(16, 24, 40, 0.55);
  padding: 12px;
}
@media (min-width: 640px) { .bn-modal { align-items: center; } }
.bn-modal-card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 30px;
  background: var(--bn-tile);
  color: var(--bn-ink);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--bn-shadow-lift);
}

/* a bento element the shared scripts hide with Tailwind's .hidden (the
   offline note, the map picker): its own display must not win over it */
[class*="bn-"].hidden { display: none; }

/* the "prídem / neprídem" strip above every page, as a tile */
[data-design="bento"] .rc-rsvp {
  background: var(--bn-tile) !important;
  margin: 6px 14px 4px;
  border-radius: 22px;
  box-shadow: var(--bn-shadow);
}
[data-design="bento"] .rc-rsvp button { border-radius: 12px !important; padding: 8px 14px !important; }

/* the shared <dialog class="rc-dialog"> (prevention, …) as a bento sheet */
[data-design="bento"] .rc-dialog-body { background: var(--bn-tile); color: var(--bn-ink); border-radius: 28px; }
@media (max-width: 639.98px) { [data-design="bento"] .rc-dialog-body { border-radius: 28px 28px 0 0; } }
[data-design="bento"] .rc-result-option { border-radius: 18px; }

/* ------------------------------------------------------------- the board: pinned post, poll
   (board/index.html, board/_poll.html) - an answer's background fills to its
   share of the votes, the viewer's own answer gets the dark edge */
.bn-pinned { display: inline-flex; align-items: center; gap: 3px; color: var(--bn-fire-ink); font-weight: 700; }
.bn-pinned svg { width: 12px; height: 12px; }
.bn-post--pinned { box-shadow: 0 0 0 1.5px var(--bn-navy), var(--bn-shadow); }
.bn-poll { display: flex; flex-direction: column; gap: 6px; }
.bn-poll form { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-poll-opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 12px; overflow: hidden; text-align: left;
  border: 1.5px solid var(--bn-line); border-radius: 12px; background: var(--bn-tile-2); color: var(--bn-ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bn-poll-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--bn-blue-tint); transition: width .35s ease; }
.bn-poll-opt.is-mine { border-color: var(--bn-navy); }
.bn-poll-opt.is-mine .bn-poll-fill { background: var(--bn-blue-ink); opacity: .22; }
.bn-poll-text, .bn-poll-pct { position: relative; }
.bn-poll-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.bn-poll-text svg { width: 16px; height: 16px; flex-shrink: 0; }
.bn-poll-pct { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--bn-muted); }
.bn-poll-names { font-size: 12px; color: var(--bn-muted); padding: 0 4px; }

/* ------------------------------------------------------------- photos from a call-out
   on the board: three thumbs on the post (board/index.html), the full grid on
   the alert's page (board/alert.html) */
.bn-post-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bn-post-strip a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bn-ground); }
.bn-post-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-post-strip-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff; font-weight: 800; font-size: 20px;
}
.bn-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bn-photo-grid a { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--bn-ground); }
.bn-photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------- pull to refresh
   (pull_refresh.js) - a round badge that rides out from under the top bar as
   the finger pulls; the arrow turns with the pull, spins once let go. */
.rc-ptr {
  position: fixed; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 54px); left: 50%; z-index: 45;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bn-tile); color: var(--bn-muted); box-shadow: var(--bn-shadow-lift);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -56px); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.rc-ptr.is-on { opacity: 1; transition: opacity .1s ease; }
.rc-ptr.is-ready { color: var(--bn-fire); }
.rc-ptr svg { width: 20px; height: 20px; transform: rotate(var(--rc-ptr-rot, 0deg)); }
.rc-ptr.is-busy svg { animation: rc-ptr-spin .8s linear infinite; }
@keyframes rc-ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- misc helpers */

.bn-row-flex { display: flex; align-items: center; gap: 10px; }
.bn-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bn-wrap { flex-wrap: wrap; }
.bn-grow { flex: 1; min-width: 0; }
.bn-mt { margin-top: 10px; }
.bn-mt-lg { margin-top: 18px; }
.bn-center { text-align: center; }
.bn-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-divider { height: 1px; background: var(--bn-line); border: 0; margin: 4px 0; }
.bn-kbd { font-variant-numeric: tabular-nums; }
.bn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bn-prose { font-size: 15px; line-height: 1.55; }
.bn-prose p { margin: 0 0 10px; }
.bn-prose a { color: var(--bn-blue-ink); }
.bn-map {
  border-radius: var(--bn-r-tile);
  overflow: hidden;
  background: var(--bn-tile-2);
  min-height: 220px;
}
.bn-table-wrap { overflow-x: auto; border-radius: var(--bn-r-tile); background: var(--bn-tile); box-shadow: var(--bn-shadow); }
.bn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bn-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--bn-muted); padding: 12px 14px; border-bottom: 1px solid var(--bn-line); white-space: nowrap; }
.bn-table td { padding: 12px 14px; border-bottom: 1px solid var(--bn-line); vertical-align: top; }
.bn-table tr:last-child td { border-bottom: 0; }

/* Nástenka and Chaty in the top bar: a count on the chip. On a narrow phone
   the status dot makes room for them (it is in the Viac sheet too). */
.bn-chipbtn--badge { position: relative; }
.bn-chipbtn--badge .bn-tab-badge { position: absolute; top: -4px; right: -4px; }
@media (max-width: 430px) { .bn-status-chip { display: none; } }

/* ------------------------------------------------------------- admin skin
   The admin pages are the original templates (Tailwind classes); this layer
   dresses them in the bento look without rewriting forty pages: the page on
   the bento ground, cards as tiles, softer inputs and buttons, the sidebar as
   a list of pills. One menu: the sidebar on lg+, the bar's Menu sheet below. */
[data-design="bento"] body.rc-admin { background: var(--bn-bg); }
[data-design="bento"] .rc-admin aside { background: transparent; border-right: 0; }
[data-design="bento"] .rc-admin aside nav { padding: 12px 10px; }
[data-design="bento"] .rc-admin aside nav a { border-left: 0 !important; border-radius: 12px; margin: 1px 0; padding: 8px 12px; color: var(--bn-ink); }
[data-design="bento"] .rc-admin aside nav a:hover { background: var(--bn-tile); }
[data-design="bento"] .rc-admin aside nav a.text-fire { background: var(--bn-tile); color: var(--bn-fire) !important; box-shadow: var(--bn-shadow); font-weight: 700; }
[data-design="bento"] .rc-admin main h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
[data-design="bento"] .rc-admin main .bg-white.border,
[data-design="bento"] .rc-admin main .bg-white.shadow-sm,
[data-design="bento"] .rc-admin main .bg-white.rounded-2xl,
[data-design="bento"] .rc-admin main .bg-white.rounded-xl {
  background: var(--bn-tile) !important;
  border-color: transparent !important;
  border-radius: 22px !important;
  box-shadow: var(--bn-shadow) !important;
}
[data-design="bento"] .rc-admin main .bg-gray-50 { background: var(--bn-tile-2) !important; }
[data-design="bento"] .rc-admin main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
[data-design="bento"] .rc-admin main select,
[data-design="bento"] .rc-admin main textarea {
  background: var(--bn-tile-2);
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--bn-ink);
}
[data-design="bento"] .rc-admin main input:focus,
[data-design="bento"] .rc-admin main select:focus,
[data-design="bento"] .rc-admin main textarea:focus { border-color: var(--bn-focus) !important; outline: none; background: var(--bn-tile); }
[data-design="bento"] .rc-admin main .bg-fire { background: var(--bn-fire) !important; }
[data-design="bento"] .rc-admin main a.bg-fire, [data-design="bento"] .rc-admin main button.bg-fire { border-radius: 14px !important; }
[data-design="bento"] .rc-admin main thead th { color: var(--bn-muted); }
[data-design="bento"] .rc-admin main .border-gray-100, [data-design="bento"] .rc-admin main .border-gray-200 { border-color: var(--bn-line) !important; }
[data-design="bento"] .rc-admin main .text-gray-500, [data-design="bento"] .rc-admin main .text-gray-400 { color: var(--bn-muted) !important; }
[data-design="bento"] .rc-admin .rc-bottom-bar { background: var(--bn-tile); }

/* ---- Admin hub tabs (admin/_hub_tabs.html, nav.py) ---------------------------
   The pages of one hub as a segmented strip at the top of the page. One row
   that scrolls sideways on a phone (no wrap: a second row reads as a second
   level), the current tab a raised tile in fire, like the sidebar entry.
   Centred, as wide as its tabs: the pages below it are of different widths
   (bn-narrow, max-w-3xl, full), so no left edge would line up with all. */
.rc-hub-tabs {
  display: flex; gap: 4px; margin: 0 auto 18px; padding: 4px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--bn-tile-2, #F5F6F8); border: 1px solid var(--bn-line, #E4E7EC); border-radius: 16px;
}
.rc-hub-tabs::-webkit-scrollbar { display: none; }
.rc-hub-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 7px 12px; border-radius: 12px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--bn-muted, #475467); text-decoration: none;
}
.rc-hub-tab svg { opacity: .75; }
.rc-hub-tab:hover { color: var(--bn-ink, #1D2939); background: var(--bn-tile, #fff); }
.rc-hub-tab:focus-visible { outline: 2px solid var(--bn-focus, #2D4FB3); outline-offset: 1px; }
.rc-hub-tab--on, .rc-hub-tab--on:hover {
  background: var(--bn-tile, #fff); color: var(--bn-fire, #B42318); font-weight: 700; box-shadow: var(--bn-shadow);
}
.rc-hub-tab--on svg { opacity: 1; }
@media (max-width: 640px) {
  .rc-hub-tabs { width: auto; max-width: none; margin: 0 -16px 14px; border-radius: 0; border-left: 0; border-right: 0; padding: 4px 12px; }
}

/* ---- Prehľad z widgetov (bento/dash, dash_edit.js) ----------------------------
   A widget sits in a frame (.bn-w) that spans one column (s), two (m: the
   whole phone, half a desktop row) or the whole row (l). In edit mode the
   frames wiggle, carry a remove / resize / settings badge and can be dragged;
   what is inside them cannot be tapped then. */
.bn-dash { align-items: stretch; }
.bn-w { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--bn-r-tile); }
.bn-w > * { flex: 1 1 auto; }
.bn-w--xs, .bn-w--s { grid-column: span 1; }
.bn-w--m { grid-column: span 2; }
.bn-w--l { grid-column: 1 / -1; }
.bn-w--xs .bn-w-x, .bn-w--s .bn-w-x { display: none !important; }
.bn-w--xs .bn-tile--row, .bn-w--s .bn-tile--row { flex-direction: column; align-items: flex-start; }
/* more columns where there is room (2026-11-07). The grid asks its own
   width, not the window's, so the desktop sidebar is already subtracted.
   Below 640px (every phone) it stays the two columns of .bn-grid and Mini
   is the same as Malý. Tablet: 12 tracks - Mini 1/6, Malý 1/4, Stredný 1/2.
   Wide desktop: 24 tracks - Mini 1/8, Malý 1/6, Stredný 1/3. Veľký (and so
   Vyhlásiť poplach, which has no Mini) is always the whole row. */
.bn-dash-cq { container-type: inline-size; }
@container (min-width: 640px) {
  .bn-dash-cq > .bn-dash { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .bn-dash-cq > .bn-dash > .bn-w--xs { grid-column: span 2; }
  .bn-dash-cq > .bn-dash > .bn-w--s { grid-column: span 3; }
  .bn-dash-cq > .bn-dash > .bn-w--m { grid-column: span 6; }
  /* Mini on a tablet or desktop: the Malý design, tightened to fit */
  .bn-dash-cq .bn-w--xs > .bn-tile, .bn-dash-cq .bn-w--xs .bn-w-sq { min-height: 124px; padding: 14px; gap: 6px; }
  .bn-dash-cq .bn-w--xs .bn-num { font-size: 30px; }
  .bn-dash-cq .bn-w--xs .bn-ic--lg { width: 36px; height: 36px; }
  .bn-dash-cq .bn-w--xs .bn-tile-title { font-size: 15px !important; }
  .bn-dash-cq .bn-w--xs .bn-tile-sub, .bn-dash-cq .bn-w--xs .bn-tiny { font-size: 11px; }
}
@container (min-width: 1000px) {
  .bn-dash-cq > .bn-dash { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .bn-dash-cq > .bn-dash > .bn-w--xs { grid-column: span 3; }
  .bn-dash-cq > .bn-dash > .bn-w--s { grid-column: span 4; }
  .bn-dash-cq > .bn-dash > .bn-w--m { grid-column: span 8; }
}
.bn-w-none { display: none; }
.bn-w:has(> .bn-w-none) { display: none; }
.bn-wsec { display: flex; flex-direction: column; }
.bn-wsec > .bn-section { padding-top: 8px; }
.bn-dash-editbtn { width: auto; padding: 0 14px; gap: 6px; font-weight: 700; }
.bn-dash-empty { margin-top: 10px; }

.bn-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.bn-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px;
          border-radius: var(--bn-r-inner); background: var(--bn-tile); color: var(--bn-ink);
          text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }
.bn-act[hidden] { display: none; }
.bn-act:active { transform: scale(0.97); }
.bn-act--fire .bn-ic { background: var(--bn-fire); color: #fff; }
.bn-addbadge { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
               background: var(--bn-tile-2); color: var(--bn-ink); }
.bn-addbadge svg { width: 15px; height: 15px; }

.bn-tile--map { gap: 10px; }
.bn-dash-map { height: 190px; border-radius: var(--bn-r-inner); overflow: hidden; background: var(--bn-tile-2); }
.bn-w--l .bn-dash-map { height: 240px; }
.bn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; }
.bn-dot--water { background: #2E90FA; }
.bn-dot--aed { background: #D92D20; }
.bn-map-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.bn-map-home { width: 18px; height: 18px; border-radius: 6px; background: var(--bn-navy); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }

/* edit mode */
.bn-dash.is-editing .bn-w { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
                            animation: bn-wiggle 0.3s ease-in-out infinite alternate; }
.bn-dash.is-editing .bn-w:nth-child(2n) { animation-delay: -0.15s; }
.bn-dash.is-editing .bn-w > :not(.bn-w-ctl) { pointer-events: none; }
.bn-dash.is-editing .bn-w:has(> .bn-w-none) { display: flex; }
.bn-dash.is-editing .bn-w-none, .bn-gal-preview .bn-w-none {
  display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 14px;
  border-radius: var(--bn-r-tile); border: 2px dashed var(--bn-line); color: var(--bn-muted);
  font-size: 13px; text-align: center; background: var(--bn-tile); }
.bn-gal-preview .bn-w:has(> .bn-w-none) { display: flex; }
@keyframes bn-wiggle { from { transform: rotate(-0.5deg); } to { transform: rotate(0.5deg); } }
@media (prefers-reduced-motion: reduce) { .bn-dash.is-editing .bn-w { animation: none; } }
.bn-w.is-dragging { animation: none !important; z-index: 30; cursor: grabbing;
                    box-shadow: var(--bn-shadow-lift); transition: box-shadow 0.15s; }
.bn-w.is-dragging > * { transform: scale(1.03); transition: transform 0.15s; }
.bn-w-ctl { position: absolute; z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 0;
            display: grid; place-items: center; cursor: pointer; padding: 0;
            box-shadow: 0 2px 8px rgba(16, 24, 40, 0.28); }
.bn-w-ctl svg { width: 16px; height: 16px; }
.bn-w-rm { top: -8px; left: -8px; background: #D92D20; color: #fff; }
.bn-w-sz { bottom: -8px; right: -8px; width: auto; min-width: 30px; padding: 0 9px; border-radius: 15px;
           background: var(--bn-navy); color: var(--bn-navy-ink); font-size: 12px; font-weight: 700; line-height: 1; gap: 4px;
           display: inline-flex; align-items: center; }
.bn-w-opt { top: -8px; right: -8px; background: var(--bn-tile); color: var(--bn-ink); }
/* three buttons that always fit: the bar spans the screen, the two main
   ones share the room, "Predvolený" shrinks to its icon on a phone */
.bn-dash-bar { position: fixed; left: 12px; right: 12px; max-width: 520px; margin: 0 auto; z-index: 60;
               bottom: calc(max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) + 76px);
               display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px;
               border-radius: 999px; background: var(--bn-tile); box-shadow: var(--bn-shadow-lift); }
.bn-dash-bar[hidden] { display: none; }
.bn-dash-bar .bn-btn { white-space: nowrap; min-width: 0; padding: 0 12px; border-radius: 999px; }
.bn-dash-bar .bn-btn span { overflow: hidden; text-overflow: ellipsis; }
.bn-dash-bar [data-dash-reset][hidden] { display: none; }
@media (max-width: 520px) { .bn-dash-bar [data-dash-reset] span { display: none; } }
.bn-dash-bar:not(:has([data-dash-reset]:not([hidden]))) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.rc-dash-editing .bn-tabbar { transform: translate(-50%, 140%); visibility: hidden; }
body.rc-dash-editing #rc-help-tab { display: none !important; }
body.rc-dash-editing .bn-dash-bar { bottom: max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
body.rc-dash-editing main { padding-bottom: 120px; }

/* the sheets of the editor: gallery, Rýchle akcie */
.bn-dsheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 90dvh;
             border-radius: 28px 28px 0 0; background: var(--bn-ground); color: var(--bn-ink); overflow: auto; }
.bn-dsheet::backdrop { background: rgba(16, 24, 40, 0.5); }
@media (min-width: 640px) { .bn-dsheet { margin: auto; border-radius: 28px; } }
.bn-dsheet-in { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px calc(18px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.bn-dsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding: 4px 4px 6px; font-size: 19px; position: sticky; top: -14px; z-index: 2;
                  background: var(--bn-ground); }
.bn-gal { padding: 12px; border-radius: 24px; background: var(--bn-tile-2); }
.bn-gal + .bn-gal { margin-top: 10px; }
.bn-gal-head { display: flex; align-items: center; gap: 10px; }
.bn-gal-head .bn-btn { flex-shrink: 0; }
.bn-gal-preview { margin-top: 10px; pointer-events: none; }
.bn-gal-preview .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.bn-gal-preview .bn-w--m, .bn-gal-preview .bn-w--l { grid-column: 1 / -1; }
.bn-gal.is-added { opacity: 0.5; }

/* Safari's toolbar tint (see bento/base.html): one pixel on the bottom edge,
   in the page colour */
.bn-edge-tint { position: fixed; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
                background: var(--bn-ground); pointer-events: none; }

/* Prehľad widgets in three sizes (bento/dash): a small one is a square of
   one fact, a medium one the same with context, a large one the full thing */
.bn-w--xs > .bn-tile, .bn-w--s > .bn-tile { min-height: 150px; }
.bn-w-sq { min-height: 150px; }
.bn-num--soft { opacity: .62; }
.bn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.bn-trio > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-trio .bn-num { font-size: 34px; }
.bn-trio small { font-size: 11px; color: var(--bn-navy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 74px; align-items: end; }
.bn-bars-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bn-bars-bar { width: 100%; max-width: 26px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.bn-bars-bar.on { background: #fff; }
.bn-bars-col small { font-size: 10px; color: var(--bn-navy-muted); }
.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 13px;
           font-weight: 600; background: var(--bn-tile-2); color: var(--bn-ink); text-decoration: none; }
.bn-chip svg { width: 15px; height: 15px; }
.bn-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-acts--s { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
.bn-acts--s .bn-act { padding: 8px 4px; font-size: 11px; gap: 4px; }
.bn-acts--s .bn-act .bn-ic { width: 30px; height: 30px; }
.bn-acts--m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bn-dash-map { display: block; }
.bn-dash-map--s { height: 92px; }
.bn-dash-map--m { height: 150px; }
.bn-dash-map--l { height: 240px; }

/* the siren dot in a pill (landing badge): its rings grow ~10px past the dot,
   so it keeps that much room on both sides - off the first letter and the edge */
.bn-pill .rc-siren { margin: 0 9px 0 7px; }

/* the extra-large button on a phone: smaller type, no letter spacing, never
   wider than its tile - "Zaregistrovať zbor zadarmo →" ran past both edges */
.bn-btn--xl { max-width: 100%; }
@media (max-width: 520px) {
  .bn-btn--xl { height: auto; min-height: 60px; padding: 12px 18px; font-size: 18px; letter-spacing: 0;
                white-space: normal; text-align: center; line-height: 1.2; }
}

/* ------------------------------------------------------------- alert console, map first (2026-10-23) */

/* variant B: two tiles under the alert header - our route, the phone's navigation */
.bn-navtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; position: relative; }
.bn-navtile {
  min-height: 68px; box-sizing: border-box; border-radius: 20px; padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  text-decoration: none; box-shadow: var(--bn-shadow);
}
.bn-navtile--dark { background: var(--bn-navy); color: #fff; }
.bn-navtile--fire { background: var(--bn-fire); color: #fff; }
.bn-navtile-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.bn-navtile-title svg { width: 18px; height: 18px; }
.bn-navtile-sub { font-size: 12px; opacity: 0.8; }
.bn-navtile-pick {
  position: absolute; right: 10px; bottom: 9px; border: 0; background: rgba(255, 255, 255, 0.2); color: #fff;
  border-radius: 10px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.bn-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--bn-tile-2); }
.bn-seg button { height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--bn-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bn-seg button[data-active="1"] { background: var(--bn-tile); color: var(--bn-ink); font-weight: 700; box-shadow: var(--bn-shadow); }
.bn-row--person { align-items: center; gap: 10px; }
.bn-avatar--sm { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; }
.bn-chipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bn-chipbtn-lg {
  min-height: 48px; box-sizing: border-box; border-radius: 14px; background: var(--bn-tile); color: var(--bn-ink);
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none; font-size: 13px; font-weight: 600;
  box-shadow: var(--bn-shadow);
}
.bn-chipbtn-lg svg { width: 18px; height: 18px; color: var(--bn-fire); flex-shrink: 0; }

/* the tactical bar: the alert in the middle, locked - inside the bar, in
   red, not raised above it (2026-10-23) */
.bn-tab--alert { color: #fff; }
.bn-tab--alert .bn-tab-ic {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--bn-fire); color: #fff;
  align-items: center; justify-content: center;
}
.bn-tab--alert .bn-tab-ic svg { width: 19px; height: 19px; }
.bn-tab.bn-tab--alert[aria-current="page"] { background: transparent; color: #fff; }
.bn-tab--alert[aria-current] .bn-tab-ic { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }

/* every other page during an alert: a thin strip back to it */
.bn-alertstrip {
  position: sticky; top: calc(60px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); z-index: 30;
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 18px;
  background: var(--bn-fire); color: #fff; text-decoration: none; box-shadow: var(--bn-shadow-lift);
}
.bn-alertstrip-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.bn-alertstrip-text { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.bn-alertstrip-text b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-alertstrip-text span { font-size: 12px; opacity: 0.9; }
.bn-alertstrip-go { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 6px 10px; flex-shrink: 0; }
/* the strip replaces the floating siren in the corner */
.rc-bento #rc-alarm-fab { display: none !important; }
.bn-navtile--one { position: relative; min-height: 58px; padding-right: 44px; }
.bn-navtile-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; }
.bn-navtile-go svg { width: 20px; height: 20px; }
/* the console's compact header and the two buttons under its map */
.bn-console-head { padding: 12px 16px; gap: 2px; }
.bn-console-title { font-size: 20px; font-weight: 800; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bn-console-count { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.bn-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bn-mapbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.bn-mapbar .bn-btn { width: 100%; justify-content: center; }


/* a hidden tile stays hidden (.bn-tile sets display) */
.bn-tile[hidden] { display: none !important; }

/* Správa o zásahu: the times as rows - label, date, time - on a PC, stacked
   on a phone (2026-10-23) */
.bn-times { display: flex; flex-direction: column; gap: 10px; }
.bn-times-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 120px; gap: 10px; align-items: center; }
.bn-times-row .bn-label { margin: 0; }
@media (max-width: 640px) {
  .bn-times-row { grid-template-columns: 3fr 2fr; gap: 6px 8px; }
  .bn-times-row .bn-label { grid-column: 1 / -1; }
}
/* fields filled in from the alert: tinted so they are checked, not skipped */
[data-design="bento"] .bn-form :is(label, .bn-times-row):has(.bn-pf) :is(input, select, textarea) {
  border-color: color-mix(in srgb, var(--bn-fire) 45%, transparent) !important;
  background: color-mix(in srgb, var(--bn-fire) 7%, var(--bn-tile)) !important;
}
[data-design="bento"] .bn-form .bn-times-row:has(.bn-pill--ok.bn-pf) :is(input, select) {
  border-color: color-mix(in srgb, #12B76A 50%, transparent) !important;
  background: color-mix(in srgb, #12B76A 8%, var(--bn-tile)) !important;
}


/* the console map: the drive's time and length, and the obstacles on it */
.bn-mapchip {
  position: absolute; left: 10px; top: 10px; z-index: 2; padding: 6px 10px; border-radius: 12px;
  background: var(--bn-tile); color: var(--bn-ink); font-size: 12px; font-weight: 800; box-shadow: var(--bn-shadow-lift);
}
.bn-mapchip[hidden] { display: none; }
.rc-map-badge {
  width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35);
}

/* a row of chips that scrolls sideways by swipe, without a scrollbar */
.bn-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.bn-noscrollbar::-webkit-scrollbar { display: none; }

/* the console map: a phone gets half the screen; a tablet or a PC, whose
   screen is wide and comparatively short, gets most of its height */
/* capped so the two buttons under it stay above the floating bar: the top
   bar, the alert header, a warning pill, the buttons and the bar take ~370px */
.bn-consolemap { height: min(52vh, 420px); height: clamp(220px, calc(100dvh - 370px), 420px); }
@media (min-width: 768px) { .bn-consolemap { height: max(300px, calc(100dvh - 370px)); } }
/* the obstacle warning above the map takes another ~80px */
@media (max-width: 767px) { .bn-console:has(#rc-route-warn:not([hidden])) .bn-consolemap { height: clamp(220px, calc(100dvh - 450px), 420px); } }
@media (min-width: 768px) and (max-width: 1099px) { .bn-console:has(#rc-route-warn:not([hidden])) .bn-consolemap { height: max(300px, calc(100dvh - 450px)); } }
.rc-map-sign { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(16, 24, 40, 0.4)); cursor: default; }

/* chat composer: a rounded box that grows with the text (2026-10-24) */
.bn-chat-compose { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: var(--bn-tile); border: 1px solid var(--bn-line); border-radius: 23px; padding: 4px 6px; }
.bn-chat-compose:focus-within { border-color: var(--bn-fire); }
.bn-chat-compose textarea { width: 100%; min-height: 36px; max-height: 132px; resize: none; border: 0; outline: none;
  background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1.4; padding: 8px 8px;
  overflow-wrap: anywhere; box-shadow: none; }
.bn-chat-compose textarea:focus, .bn-chat-compose textarea:focus-visible { outline: none !important; box-shadow: none !important; }
.bn-chat-editing { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--bn-fire); padding: 4px 8px 0; }
.bn-chat-editing[hidden] { display: none; }
.bn-chat-editing button { margin-left: auto; border: 0; background: none; color: var(--bn-muted); cursor: pointer; }
/* a reaction as in Messenger (2026-11-05): a small round chip on the
   bubble's bottom-right corner */
.rc-has-like { position: relative; margin-bottom: 9px; }
.rc-chat-like { position: absolute; right: -4px; bottom: -11px; display: inline-flex; align-items: center; gap: 1px; margin: 0;
  height: 22px; min-width: 22px; padding: 0 4px; border-radius: 11px; border: 2px solid var(--bn-ground, #fff);
  background: var(--bn-tile, #fff); color: var(--bn-ink, #101828); font: inherit; font-size: 13px; line-height: 1;
  box-shadow: var(--bn-shadow); cursor: pointer; z-index: 1; }
.rc-chat-like.is-mine { box-shadow: 0 0 0 1px #D92D20, var(--bn-shadow); }
.rc-chat-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; min-width: 190px; padding: 6px;
  background: var(--bn-tile, #fff); color: var(--bn-ink, #101828); border-radius: 16px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.25); }
.rc-chat-menu[hidden] { display: none; }
.rc-chat-menu button { min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-weight: 600;
  color: inherit; text-align: left; border-radius: 12px; cursor: pointer; }
.rc-chat-menu button[hidden] { display: none; }
.rc-chat-menu button:hover { background: var(--bn-tile-2, #f2f4f7); }

/* reactions in the incident chat menu: 👍 ❤️ 😂 😮 (2026-10-23) */
.rc-chat-reacts { display: flex; justify-content: space-between; gap: 4px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--bn-line, #eaecf0); }
.rc-chat-menu .rc-chat-reacts button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; text-align: center; font-size: 24px; border-radius: 50%; }
.rc-chat-menu .rc-chat-reacts button.is-mine { background: var(--bn-tile-2, #f2f4f7); box-shadow: inset 0 0 0 2px var(--bn-fire, #D92D20); }
.rc-chat-menu .rc-chat-reacts button[data-react-more] { background: var(--bn-tile-2, #f2f4f7); font-size: 22px; font-weight: 700; }
.rc-chat-menu .rc-chat-reacts--more { display: grid; grid-template-columns: repeat(5, 1fr); }
.rc-chat-menu .rc-chat-reacts--more[hidden] { display: none; }

/* a message held down opens our menu (reactions, edit, copy), not the
   phone's text selection and callout - in the apps and mobile browsers */
@media (pointer: coarse) {
  .rc-holdable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* the report's scene maps: as large as the screen allows (2026-10-23) */
.rc-scene-map { width: 100%; height: min(72vh, 560px); min-height: 300px; background: #F2F4F7; }

/* the report maps' folded legend (2026-10-23): members' tracks as toggles,
   then the marks */
.rc-legend { border-top: 1px solid var(--bn-line); margin-top: 8px; }
.rc-legend > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--bn-muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.rc-legend > summary::-webkit-details-marker { display: none; }
.rc-legend > summary::before { content: '▸'; transition: transform .15s; }
.rc-legend[open] > summary::before { transform: rotate(90deg); }
.rc-legend-body { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
.rc-leg-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bn-faint, var(--bn-muted)); margin-top: 4px; }
.rc-leg-hint { font-size: 12px; color: var(--bn-muted); }
.rc-leg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.rc-leg-item, .rc-leg-track { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.rc-leg-track { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; padding: 4px 0; cursor: pointer; text-align: left; }
.rc-leg-track[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.rc-leg-line { flex: none; width: 22px; height: 5px; border-radius: 3px; }
.rc-leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-leg-sw { flex: none; width: 22px; height: 16px; border-radius: 4px; }
.rc-leg-wide { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.rc-leg-scalerow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bn-muted); }
.rc-leg-scale { flex: 1; max-width: 260px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #FEF0C7, #FEC84B, #F79009, #E5372B, #912018); }

/* the movement's speed, compact beside the time (2026-10-23) */
.rc-speed { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--bn-line); border-radius: 999px; overflow: hidden; }
.rc-speed button { width: 28px; height: 30px; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.rc-speed button:hover { background: var(--bn-tile-2); }
.rc-speed b { min-width: 36px; text-align: center; font-size: 12px; }

/* the showcase's six points: two columns on a phone, three on a computer -
   never five and one left alone (2026-10-23) */
.rc-sample-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .rc-sample-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------- desktop sidebar (2026-10-24)
   From 1100px the navigation is a fixed panel on the left (bento/_side.html):
   the floating bar, the ☰ drawer and the brand in the top bar step aside,
   the page column widens and sits next to the panel. Below that width the
   panel does not exist - the phone keeps the bar and the drawer. */
.bn-side { display: none; }
@media (min-width: 1100px) {
  :root { --bn-side-w: 264px; }
  .bn-side {
    position: fixed; inset: 0 auto 0 0; width: var(--bn-side-w); z-index: 46;
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: 14px 12px calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    background: var(--bn-tile); border-right: 1px solid var(--bn-line); color: var(--bn-ink);
  }
  .bn-side-brand { padding: 4px 8px 14px; }
  .bn-side-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  .bn-side-group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-muted); padding: 14px 10px 6px; display: flex; align-items: center; justify-content: space-between; }
  .bn-side-edit {
    width: 26px; height: 26px; margin: -6px -4px -6px 0; display: grid; place-items: center; border-radius: 8px;
    color: var(--bn-muted); text-decoration: none; transition: background .12s, color .12s;
  }
  .bn-side-edit svg { width: 15px; height: 15px; }
  .bn-side-edit:hover, .bn-side-edit:focus-visible, .bn-side-edit[aria-current="page"] { background: var(--bn-tile-2); color: var(--bn-ink); }
  .bn-side-row {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 12px;
    color: var(--bn-ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s;
  }
  .bn-side-row:hover { background: var(--bn-tile-2); }
  .bn-side-row[aria-current="page"] { background: var(--bn-fire); color: #fff; }
  .bn-side-row[aria-current="page"] .bn-side-ic { color: #fff; }
  .bn-side-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--bn-muted); flex: none; }
  .bn-side-ic svg { width: 19px; height: 19px; }
  .bn-side-row--kiko .bn-side-ic { color: var(--bn-kiko-ink, #7A5AF8); }
  .bn-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bn-side-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bn-fire); color: #fff;
    font-size: 11px; font-weight: 800; display: grid; place-items: center; }
  .bn-side-row[aria-current="page"] .bn-side-badge { background: #fff; color: var(--bn-fire); }
  .bn-side-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; margin: 0 0 4px;
    background: var(--bn-fire); color: #fff; text-decoration: none; box-shadow: var(--bn-shadow-lift); }
  .bn-side-alert[aria-current="page"] { box-shadow: 0 0 0 2px var(--bn-ink), var(--bn-shadow-lift); }
  .bn-side-alert-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); flex: none; }
  .bn-side-alert-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .bn-side-alert-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bn-side-alert-text span { font-size: 12px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bn-side-foot { border-top: 1px solid var(--bn-line); padding-top: 8px; margin-top: 8px; }
  .bn-side-tools { display: flex; gap: 6px; padding: 8px 4px 0; }
  .bn-side-tools .bn-chipbtn { flex: 1; min-width: 0; background: var(--bn-tile-2); box-shadow: none; }
  .bn-side-tools details { flex: 1; min-width: 0; }
  .bn-side-tools details > summary { width: 100%; }
  .bn-menu--up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

  /* the page next to the panel */
  /* only where the panel is drawn: the public pages (the landing, the
     price list) in the bento look have none and must not be pushed right */
  [data-design="bento"] body:has(.bn-side) { padding-left: var(--bn-side-w) !important; }
  .bn-topbar-in { max-width: 1320px; padding: 10px 28px; }
  .bn-topbar .bn-burger, .bn-topbar .bn-brand, .bn-topbar .bn-topbar-tools, .bn-topbar .rc-prof { display: none; }
  .bn-topbar { position: static; padding: 0; height: 0; overflow: hidden; }
  .bn-main { max-width: 1320px; padding: 24px 28px 48px; }
  .bn-tabbar, .bn-edge-tint { display: none !important; }
  [data-design="bento"] .rc-sheet.rc-drawer, [data-design="bento"] #rc-more-backdrop { display: none !important; }
  .bn-alertstrip { top: 10px; }
  /* the alert console and the maps breathe: a wider column than a reading page */
  .bn-medium { max-width: 1040px; }
}

/* ---- page head: on a phone the buttons go under the title, never over it (2026-10-24) ---- */
.bn-head { flex-wrap: wrap; }
.bn-head-text { flex: 1 1 240px; }
.bn-head > .bn-row-flex { flex: 0 1 auto; flex-wrap: wrap; }

/* ---- Záznamy + Štatistiky zboru (2026-10-24) ---- */
.rc-stats-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-stats-filter label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-stats-filter > span { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .rc-stats-filter { grid-template-columns: 170px 170px 1fr auto; align-items: end; }
  .rc-stats-filter > span { grid-column: auto; }
}
/* one page in three parts (2026-10-25): presets in one line with the Filter
   button, the form behind it, the segmented switch, compact numbers */
.rc-period { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rc-presets { display: flex; gap: 6px; align-items: center; }
.rc-presets-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; flex: 1 1 auto; min-width: 0; }
.rc-preset { height: 34px; width: auto; padding: 0 13px; border-radius: 17px; font-size: 12px; font-weight: 700; text-transform: uppercase;
             display: inline-flex; align-items: center; gap: 5px; text-decoration: none; flex: none; border: 0; cursor: pointer;
             font-family: inherit; background: var(--bn-tile); color: var(--bn-ink); box-shadow: var(--bn-shadow); }
.rc-preset svg { width: 15px; height: 15px; }
.rc-preset--on { background: var(--bn-fire); color: #fff; }
.rc-preset--filter { margin-left: auto; padding: 0 11px; }
.rc-preset--filter[aria-expanded="true"] { background: var(--bn-navy, #1f2937); color: #fff; }
.rc-stats-filter { padding: 12px; gap: 8px; }
.rc-stats-filter .bn-label { font-size: 11px; }
.rc-seg { margin-bottom: 4px; }
.rc-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rc-seg-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--bn-tile-2); color: var(--bn-muted); }
.rc-seg button[data-active="1"] .rc-seg-n { background: var(--bn-fire); color: #fff; }
.rc-section { padding-top: 14px; }
.rc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.rc-kpi { min-height: 78px; padding: 10px 12px; gap: 4px; }
.rc-kpi .bn-tiny { font-size: 11px; line-height: 1.2; }
.rc-kpi .bn-num { font-size: 24px; }
@media (min-width: 768px) {
  .rc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .rc-kpi { min-height: 92px; }
  .rc-kpi .bn-num { font-size: 28px; }
}
.rc-two .bn-tile { min-width: 0; }
@media (max-width: 767px) { .rc-two > .bn-tile { grid-column: 1 / -1; } }
.rc-bars { display: flex; align-items: flex-end; gap: 6px; }
.rc-bars--tight { gap: 2px; }
.rc-bar-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center;
              justify-content: flex-end; gap: 4px; }
.rc-bar-col > .bn-tiny { line-height: 1; white-space: nowrap; min-height: 10px; }
.rc-bar-lbl { font-size: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-bar-lbl small { font-size: 9px; opacity: .8; }
.rc-bar { width: 100%; max-width: 40px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--bn-fire); }
.rc-bar--navy { background: #3B82F6; }
.rc-type { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; }
.rc-type-bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; }
.rc-heat { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.rc-heat-h { text-align: center; font-size: 10px; }
.rc-heat-cell { position: relative; display: block; aspect-ratio: 1; min-height: 10px; border-radius: 3px; background: var(--bn-tile-2); }
.rc-heat-cell::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--bn-fire); opacity: var(--v, 0); }
.rc-r { text-align: right; }
.rc-table-dense th, .rc-table-dense td { padding: 8px 10px; font-size: 13px; }
.rc-table-dense td:first-child { white-space: nowrap; }
.rc-history td { vertical-align: middle; }
/* documents: a row per file, the buttons on the right */
.rc-docs { padding: 4px 12px; gap: 0; }
.rc-doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bn-line); }
.rc-doc-row:last-child { border-bottom: 0; }
.rc-doc-row .bn-ic { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.rc-doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-doc-title { font-size: 14px; font-weight: 700; }
.rc-doc-links { display: flex; align-items: center; gap: 6px; flex: none; }
.rc-doc-links .bn-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 11px; }
.rc-year { width: 74px; height: 34px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--bn-line); background: var(--bn-tile-2); color: var(--bn-ink); font: inherit; font-size: 14px; }
@media (max-width: 480px) {
  .rc-doc-row { flex-wrap: wrap; }
  .rc-doc-row .bn-tiny { display: none; }
}

/* ---- adding a water source or an AED, the photo first (2026-10-25) ---- */
.rc-start { align-items: stretch; gap: 10px; padding: 22px 18px; }
.rc-start-ic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 22px; display: grid; place-items: center; background: var(--bn-blue-tint); color: var(--bn-blue-ink); }
.rc-start-ic svg { width: 30px; height: 30px; }
.rc-start-ic--aed { background: var(--bn-green-tint); color: var(--bn-green-ink); }
.rc-skip { align-self: center; margin-top: 6px; font-size: 12px; color: var(--bn-muted); text-decoration: underline; text-underline-offset: 3px; }
.rc-photo-prev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--bn-tile); box-shadow: var(--bn-shadow); }
.rc-photo-prev img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; background: var(--bn-tile-2); }
.rc-photo-prev--ai { background: var(--bn-kiko-tint); color: var(--bn-kiko-ink); box-shadow: none; }
.rc-photo-prev b svg { display: inline-block; vertical-align: -3px; margin-right: 2px; }
.rc-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--bn-fire-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the running alert on a computer (2026-10-24): two columns, the map stays ---- */
@media (min-width: 1100px) {
  .rc-alert-page { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
                   column-gap: 16px; row-gap: 0; align-items: start; grid-auto-flow: row dense; }
  .rc-alert-page > .bn-console, .rc-alert-page #rc-console-main { display: contents; }
  .rc-alert-page > *, .rc-alert-page .bn-console > *, .rc-alert-page #rc-console-main > * { grid-column: 2; margin-bottom: 10px; }
  .rc-alert-page > #navrat { grid-column: 1 / -1; }
  .rc-alert-page .bn-console-head { grid-column: 1; }
  .rc-alert-page .bn-seg { align-self: end; }
  .rc-alert-page #panel-map { grid-column: 1; grid-row: span 60; position: sticky !important; top: 12px; align-self: start; margin-bottom: 0; }
  /* the header above it and the two buttons under it stay on the screen */
  .rc-alert-page #panel-map .bn-consolemap { height: max(320px, calc(100dvh - 200px)); }
  .rc-alert-page #rc-route-warn { margin-top: 0 !important; }
  .rc-alert-page > form[action*="ukoncit"], .rc-alert-page > form[style*="margin-top"] { margin-top: 0 !important; }
}

/* ---- Členovia on a computer: the search and the three filters on one line (2026-10-24) ---- */
@media (min-width: 1100px) {
  #filter-form { grid-template-columns: 2fr 1fr 1fr 1fr !important; }
  #filter-form input[name="q"] { grid-column: auto !important; }
}

/* ---- layout review fixes (2026-10-25) ---- */

/* the incident chat as its own view (console.js: body.rc-chatview): the
   console header and the chat, nothing under the composer; console.js sizes
   the chat down to the floating bar. On a computer the map stays on the
   left, the chat takes the right column. */
body.rc-chatview .rc-alert-page > :not(.bn-console):not(#rc-nav-sheet):not(script):not(link):not(style) { display: none !important; }
body.rc-chatview .bn-main { padding-bottom: 0; }
body.rc-chatview .rc-alert-page .bn-seg { display: none; }
.bn-chat #chat-messages:empty::before {
  content: attr(data-empty); display: block; padding: 40px 12px; text-align: center;
  color: var(--bn-muted); font-size: 14px;
}

/* the console's flash ("Poplach vyhlásený…") floats instead of pushing the
   console down and letting it jump back up when it fades (2026-10-25) */
[data-design="bento"] .bn-main:has(.rc-alert-page) > div.space-y-2.mb-5:first-child {
  position: fixed; z-index: 55; top: calc(66px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 28px), 520px); margin: 0;
}
@media (min-width: 1100px) {
  [data-design="bento"] .bn-main:has(.rc-alert-page) > div.space-y-2.mb-5:first-child { top: 16px; left: calc(50% + var(--bn-side-w) / 2); }
}

/* a section head with a long description: the title above it, not beside */
.bn-section--stack { flex-direction: column; align-items: flex-start; gap: 4px; }

/* white text on a light alert-type colour (ink_on keeps white up to a
   mid-light orange): the ground is darkened to a lightness white reads on
   (≥ 4.5:1); darker colours are left as they are */
/* only where relative colour works: an older WebView (Android 14 and
   earlier phones) cannot compute it and would drop the background entirely,
   leaving white text on nothing - there the inline colour stays */
@supports (color: oklch(from red l c h)) {
  .bn-typebg[style*="color: #ffffff"] { background: oklch(from var(--bn-c) min(l, 0.54) c h) !important; }
  .bn-pick[style*="--bn-type-ink: #ffffff"]:has(input:checked) { background: oklch(from var(--bn-type-color) min(l, 0.54) c h); }
}
/* the small pills on a coloured tile: a darker glass, so white stays readable */
.bn-console-count { background: rgba(0, 0, 0, 0.24); }
.bn-pill--glass { background: rgba(0, 0, 0, 0.2); }
.bn-tile--navy .bn-pill--glass { background: rgba(255, 255, 255, 0.16); }

/* Nástenka's filter chips run edge to edge of the 14px page gutter */
[data-design="bento"] .bn-filter-line { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }

/* a row that scrolls sideways fades where there is more (scroll_hint.js) */
[data-more-end]:not(.bn-table-wrap) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
[data-more-start]:not(.bn-table-wrap) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
[data-more-start][data-more-end]:not(.bn-table-wrap) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* a wide table: a shadow on the edge that has more columns */
.bn-table-wrap { --bn-edge: rgba(16, 24, 40, 0.32); }
[data-theme="modern"] .bn-table-wrap { --bn-edge: rgba(0, 0, 0, 0.75); }
.bn-table-wrap[data-more-end] { box-shadow: inset -22px 0 18px -16px var(--bn-edge), var(--bn-shadow); }
.bn-table-wrap[data-more-start] { box-shadow: inset 22px 0 18px -16px var(--bn-edge), var(--bn-shadow); }
.bn-table-wrap[data-more-start][data-more-end] { box-shadow: inset -22px 0 18px -16px var(--bn-edge), inset 22px 0 18px -16px var(--bn-edge), var(--bn-shadow); }

/* a form table of numbers (Správa o zásahu): headers wrap instead of
   running into each other on a phone */
@media (max-width: 520px) {
  .bn-table[style*="table-layout: fixed"] th {
    white-space: normal; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
    padding: 8px 3px; font-size: 11px; line-height: 1.2; vertical-align: bottom;
  }
  .bn-table[style*="table-layout: fixed"] td:first-child { padding-left: 6px; padding-right: 2px; font-size: 12px; }
}

/* Členovia on a phone: the buttons on their own row under the person */
@media (max-width: 480px) {
  .rc-member-row { flex-wrap: wrap; }
  .rc-member-row > .bn-row-main { flex: 1 1 calc(100% - 56px); }
  .rc-member-row > .bn-row-end { flex: 1 1 100%; flex-direction: row !important; flex-wrap: wrap; align-items: center !important;
                                 justify-content: flex-end; }
}

/* the report: six numbers in three columns, two on a narrow phone; the
   members' table gives the name the room */
.rc-report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 399px) { .rc-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-mcol { flex: none; width: 86px; text-align: right; }
.rc-mcol--km { width: 48px; }
@media (max-width: 480px) {
  .rc-report-members .bn-row { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .rc-mcol { width: 56px; }
  .rc-mcol--km { width: 34px; }
  .rc-mname { white-space: normal; overflow-wrap: anywhere; }
}

/* Kiko on a phone: the composer stays above the floating bar while the
   conversation scrolls under it */
@media (max-width: 767px) {
  [data-design="bento"] #rc-ai { overflow: visible !important; }
  [data-design="bento"] #rc-ai > div:has(> #rc-ai-form) {
    position: sticky; bottom: calc(max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) + 76px); z-index: 3;
    background: var(--bn-tile); border-radius: 0 0 var(--bn-r-tile) var(--bn-r-tile);
  }
  body:has(.bn-tabbar.rc-bar-hidden) #rc-ai > div:has(> #rc-ai-form) { bottom: max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
}

/* declare: the group choice stays on one line per option */
.bn-seg[role="radiogroup"] { grid-template-columns: none; } /* as many columns as options, not the console's three */
.bn-seg[role="radiogroup"] label { white-space: nowrap; overflow: hidden; font-size: 13px; padding: 4px 6px; }
/* the test-alarm switch reads as a checkbox, and as on when it is */
#bn-test-toggle svg { display: block; flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 2px; box-sizing: border-box;
                      border-radius: 6px; color: transparent; box-shadow: inset 0 0 0 2px var(--bn-faint); }
#bn-test-toggle:has(input:checked) { background: var(--bn-amber-tint); color: var(--bn-amber-ink); box-shadow: inset 0 0 0 2px var(--bn-amber-ink); }
#bn-test-toggle:has(input:checked) svg { background: var(--bn-amber-ink); color: var(--bn-amber-tint); box-shadow: none; }

/* "Upraviť posádku" and other small folds: no browser triangle */
[data-design="bento"] details > summary.bn-tiny { list-style: none; }
[data-design="bento"] details > summary.bn-tiny::-webkit-details-marker { display: none; }

/* a narrow phone: the status dot gives the zbor's name its room */
@media (max-width: 379px) { .bn-chip-status { display: none; } }

/* the admin pages: the Kiko button must not sit on the last card */
[data-design="bento"] body.rc-admin main { padding-bottom: 150px; }

/* Pokročilá analýza poplachu (report): the AI's four lists as cards, the
   server-drawn charts (inline SVG - text and grid follow --bn-*), the AI
   illustration with its label always on it */
.rc-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .rc-ai-grid { grid-template-columns: minmax(0, 1fr); } }
.rc-ai-card { gap: 6px; border-left: 4px solid var(--bn-line); }
.rc-ai-card--good { border-left-color: var(--bn-green); }
.rc-ai-card--warn { border-left-color: var(--bn-amber-ink); }
.rc-ai-card--info { border-left-color: var(--bn-blue-ink); }
.rc-ai-card--fire { border-left-color: var(--bn-fire); }
.rc-ai-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--bn-ink); }
.rc-ai-figure { gap: 8px; }
.rc-ai-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-ai-chart-wrap svg { min-width: 480px; }
.rc-ai-illu { position: relative; display: block; }
.rc-ai-illu img { width: 100%; height: 110px; object-fit: cover; border-radius: 14px; display: block; }
.rc-ai-illu-label { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px;
                    background: var(--bn-navy); color: var(--bn-navy-ink); font-size: 11px; font-weight: 700; }

/* Záznamy · Poplachy on a phone: compact cards instead of the wide table
   that slid sideways (2026-10-25); the table stays from 760 px up */
.rc-hcards { display: none; flex-direction: column; gap: 10px; }
.rc-hcard { gap: 6px; padding: 14px 16px; }
.rc-hcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rc-hcard-title { font-weight: 800; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-hcard-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-hcard-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rc-hcard-btns .bn-btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 759px) {
  .rc-hcards { display: flex; }
  .rc-history { display: none; }
}

/* Pokročilý report a trackovanie (premium_service, 2026-10-25): a report the
   zbor has not paid for is greyed with a lock; a tap opens what it is, the
   free try and the way to buy (bento/_premium.html) */
.rc-premium-pop { position: relative; display: inline-block; }
.rc-premium-pop > summary { list-style: none; cursor: pointer; }
.rc-premium-pop > summary::-webkit-details-marker { display: none; }
.rc-premium-locked { opacity: 0.55; filter: grayscale(1); display: inline-flex; align-items: center; gap: 4px; }
.rc-premium-locked svg { width: 13px; height: 13px; }
.rc-premium-pop[open] > .rc-premium-locked { opacity: 0.85; }
.rc-premium-pop-body { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(100% + 6px);
  width: min(280px, calc(100vw - 32px));
  gap: 8px; box-shadow: var(--bn-shadow-lift); text-align: left; white-space: normal; }
.rc-report-link { font-weight: 700; color: var(--bn-fire-ink); }
.rc-premium-tile { opacity: 0.8; }
.rc-premium-tile .bn-ic { filter: grayscale(1); }

/* Povolenia a upozornenia (2026-10-25): what is still off is red, what is on
   is green, so the page says by itself what is left to switch on */
.rc-perm { border-left: 5px solid transparent; transition: background-color .2s, border-color .2s; }
.rc-perm--off { background: var(--bn-fire-tint); border-left-color: var(--bn-fire); }
.rc-perm--off .bn-tile-title { color: var(--bn-fire-ink); }
.rc-perm--on { background: var(--bn-green-tint); border-left-color: var(--bn-green, #12B76A); }
.rc-perm--on .bn-tile-title { color: var(--bn-green-ink); }
.rc-perm .bn-muted, .rc-perm .bn-faint { color: inherit; opacity: 0.8; }
/* in the history table the Report link is in the last column: open leftwards */
.rc-history .rc-premium-pop-body { left: auto; right: 0; transform: none; }

/* The intro after signing in (onboarding/intro.html, 2026-10-25): one full
   screen at a time over everything else, the app's own tiles and buttons */
.rc-uvod { position: fixed; inset: 0; z-index: 2000; background: var(--bn-tile); color: var(--bn-ink); overflow-y: auto; text-align: left;
  padding: calc(14px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) max(18px, env(safe-area-inset-right, 0px))
           0 max(18px, env(safe-area-inset-left, 0px)); }
.rc-uvod-top { max-width: 520px; margin: 0 auto 6px; display: flex; align-items: center; gap: 10px; }
.rc-uvod-top .rc-uvod-bar { flex: 1; }
.rc-uvod-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: var(--bn-tile-2); color: var(--bn-ink);
  border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex: none; }
.rc-uvod-back svg { width: 18px; height: 18px; }
.rc-uvod-back[hidden] { display: none; }
.rc-uvod-bar { height: 5px; border-radius: 5px; background: var(--bn-tile-2); overflow: hidden; }
.rc-uvod-bar span { display: block; height: 100%; width: 0; background: var(--bn-fire); border-radius: 5px; transition: width .3s; }
.rc-uvod-s { max-width: 520px; margin: 0 auto; min-height: calc(100% - 20px); display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.rc-uvod-s[data-tone="fire"] { --rc-t-bg: var(--bn-fire-tint); --rc-t-ink: var(--bn-fire-ink); }
.rc-uvod-s[data-tone="green"] { --rc-t-bg: var(--bn-green-tint); --rc-t-ink: var(--bn-green-ink); }
.rc-uvod-s[data-tone="blue"] { --rc-t-bg: var(--bn-blue-tint); --rc-t-ink: var(--bn-blue-ink); }
.rc-uvod-s[data-tone="amber"] { --rc-t-bg: var(--bn-amber-tint); --rc-t-ink: var(--bn-amber-ink); }
.rc-uvod-s[data-tone="kiko"] { --rc-t-bg: var(--bn-kiko-tint); --rc-t-ink: var(--bn-kiko-ink); }
.rc-uvod-s[data-tone="navy"] { --rc-t-bg: var(--bn-tile-2); --rc-t-ink: var(--bn-ink); }
.rc-uvod-art { flex: 1 1 auto; min-height: 150px; max-height: 300px; display: grid; place-items: center; position: relative; }
@media (max-height: 780px) {
  .rc-uvod-art { min-height: 110px; max-height: 150px; }
  .rc-uvod-art::before { width: 120px; height: 120px; }
  .rc-uvod-art::after { width: 86px; height: 86px; }
  .rc-uvod-glyph { width: 64px; height: 64px; border-radius: 20px; }
  .rc-uvod-glyph svg { width: 32px; height: 32px; }
  .rc-uvod-h { font-size: 24px; }
}
.rc-uvod-art::before, .rc-uvod-art::after { content: ""; position: absolute; border-radius: 50%; background: var(--rc-t-bg); }
.rc-uvod-art::before { width: 170px; height: 170px; opacity: .55; }
.rc-uvod-art::after { width: 118px; height: 118px; }
.rc-uvod-glyph { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center;
  background: var(--bn-tile); color: var(--rc-t-ink); box-shadow: var(--bn-shadow-lift); }
.rc-uvod-glyph svg { width: 42px; height: 42px; }
.rc-uvod-eyebrow { margin: 0; font: 700 12px/1.2 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-t-ink);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-uvod-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--bn-amber-tint);
  color: var(--bn-amber-ink); letter-spacing: .02em; text-transform: none; font-size: 12px; }
.rc-uvod-badge svg { width: 13px; height: 13px; }
.rc-uvod-h { margin: 0; font: 700 28px/1.12 'Space Grotesk', sans-serif; letter-spacing: -0.01em; text-wrap: balance; }
.rc-uvod-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bn-muted); }
.rc-uvod-big { margin: 0; font: 700 20px/1.3 'Space Grotesk', sans-serif; color: var(--rc-t-ink); background: var(--rc-t-bg);
  border-radius: 18px; padding: 12px 14px; }
.rc-uvod-small { margin: 0; font-size: 13.5px; color: var(--bn-muted); }
.rc-uvod-num { color: var(--bn-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-uvod-warnbox { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 16px;
  background: var(--bn-amber-tint); color: var(--bn-amber-ink); font-weight: 700; font-size: 14.5px; }
.rc-uvod-warnbox svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.rc-uvod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc-uvod-list li { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.rc-uvod-list svg { width: 18px; height: 18px; color: var(--bn-green-ink); flex: none; }
.rc-uvod-kinds { display: grid; gap: 8px; }
.rc-uvod-kind { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--bn-tile-2);
  cursor: pointer; border: 2px solid transparent; }
.rc-uvod-kind:has(input:checked) { border-color: var(--bn-fire); background: var(--bn-fire-tint); }
.rc-uvod-kind input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bn-fire); flex: none; }
.rc-uvod-kind span { display: grid; gap: 2px; }
.rc-uvod-kind small { color: var(--bn-muted); font-size: 13px; }
.rc-uvod-how { background: var(--bn-tile-2); border-radius: 16px; padding: 10px 14px; font-size: 14px; }
.rc-uvod-how summary { font-weight: 700; cursor: pointer; }
.rc-uvod-how ol { margin: 8px 0 2px; padding-left: 20px; color: var(--bn-muted); display: grid; gap: 4px; }
.rc-uvod-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-uvod-stores a { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bn-ink);
  color: var(--bn-tile); font-weight: 700; text-decoration: none; }
.rc-uvod-stores svg { width: 16px; height: 16px; }
.rc-uvod-search { position: relative; }
.rc-uvod-search input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--bn-line, #D0D5DD); background: var(--bn-tile); color: var(--bn-ink); font: inherit; font-size: 16px; }
.rc-uvod-hits { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--bn-tile); border-radius: 14px;
  box-shadow: var(--bn-shadow-lift); padding: 6px; display: grid; gap: 2px; }
.rc-uvod-hits[hidden] { display: none; }
.rc-uvod-hits button { text-align: left; border: 0; background: none; padding: 10px; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; }
.rc-uvod-hits button:hover { background: var(--bn-tile-2); }
.rc-uvod-hits p { margin: 0; padding: 10px; color: var(--bn-muted); font-size: 13px; }
.rc-uvod-map { width: 100%; flex: 1 1 260px; min-height: 260px; border-radius: 18px; overflow: hidden; background: var(--bn-tile-2); }
/* the buttons stay at the bottom of the screen however long the text: a
   short window or a big zoom never hides "Pokračovať" (2026-10-25) */
.rc-uvod-actions { display: grid; gap: 6px; margin-top: auto; position: sticky; bottom: 0; z-index: 3;
  padding: 14px 0 calc(4px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  background: linear-gradient(to bottom, transparent, var(--bn-tile) 14px); }
.rc-uvod-primary, .rc-uvod-yellow { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 0;
  border-radius: 18px; padding: 10px 16px; font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; cursor: pointer;
  text-decoration: none; text-align: center; }
.rc-uvod-primary { background: var(--bn-fire); color: #fff; }
.rc-uvod-primary:hover { background: var(--bn-fire-hover); }
.rc-uvod-primary:disabled { opacity: .45; cursor: default; }
.rc-uvod-primary.is-done { background: var(--bn-green); }
.rc-uvod-yellow { background: #FDB022; color: #3D2E14; }
.rc-uvod-yellow svg, .rc-uvod-primary svg { width: 20px; height: 20px; }
.rc-uvod-skip { border: 0; background: none; color: var(--bn-muted); text-decoration: underline; font-size: 14px; padding: 10px; cursor: pointer; }
.rc-uvod-skip[hidden] { display: none; }
.rc-uvod-sheet { position: fixed; inset: 0; z-index: 2010; background: rgba(9, 11, 15, .55); display: flex; align-items: flex-end; justify-content: center;
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) max(12px, env(safe-area-inset-left, 0px)); }
.rc-uvod-sheet[hidden] { display: none; }
.rc-uvod-sheet-card { width: 100%; max-width: 480px; background: var(--bn-tile); border-radius: 28px; padding: 22px 18px 14px; display: grid; gap: 10px;
  text-align: center; justify-items: center; box-sizing: border-box; }
.rc-uvod-sheet-card .rc-uvod-primary { width: 100%; }
.rc-uvod-sheet-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--bn-amber-tint); color: var(--bn-amber-ink); }
.rc-uvod-sheet-card h2 { margin: 0; font: 700 21px/1.2 'Space Grotesk', sans-serif; }
.rc-uvod-sheet-card p { margin: 0; color: var(--bn-muted); font-size: 15px; }
.rc-uvod-s[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rc-uvod-bar span { transition: none; } }

/* Povolenia a upozornenia behind one button on Moje konto (2026-10-25) */
.rc-perm-wrap > summary { list-style: none; cursor: pointer; }
.rc-perm-wrap > summary::-webkit-details-marker { display: none; }
.rc-perm-chev { display: inline-flex; transition: transform .2s; }
.rc-perm-wrap[open] .rc-perm-chev { transform: rotate(180deg); }

/* ---------------------------------------------- one person, several zbory (0126) */
/* the arrow by the zbor's name: the person's other zbory and invitations */
.rc-prof { flex: none; }
.rc-prof-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: -4px; border-radius: 10px; cursor: pointer;
  color: var(--bn-ink); background: var(--bn-tile-2);
}
.rc-prof-btn svg { width: 18px; height: 18px; }
.rc-prof[open] .rc-prof-btn svg { transform: rotate(180deg); }
.rc-prof-dot {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bn-fire); box-shadow: 0 0 0 2px var(--bn-tile);
}
.rc-prof-menu { left: 0; right: auto; min-width: 240px; max-width: min(320px, calc(100vw - 32px)); gap: 2px; }
/* on a phone the arrow sits mid-bar and a menu opened from it ran off the
   right edge (2026-11-07): there it hangs from the whole top bar instead,
   one gutter in from both sides */
@media (max-width: 640px) {
  .bn-topbar .rc-prof { position: static; }
  .bn-topbar .rc-prof-menu { left: 14px; right: 14px; top: calc(100% - 2px); min-width: 0; max-width: none; }
}
.rc-prof-head {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bn-muted);
}
.rc-prof-menu form { margin: 0; }
.rc-prof-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0;
  border-radius: 12px; background: none; color: var(--bn-ink); font: inherit; text-align: left; cursor: pointer;
}
button.rc-prof-row:hover { background: var(--bn-tile-2); }
.rc-prof-row small { color: var(--bn-muted); font-size: 12px; }
.rc-prof-row svg { width: 16px; height: 16px; margin-left: auto; color: #12B76A; }
.rc-prof-row.is-current { font-weight: 700; }
.rc-prof-row.is-wait { color: var(--bn-muted); }
.rc-prof-sep { display: block; height: 1px; margin: 4px 6px; background: var(--bn-line); }
.rc-prof-link { text-decoration: none; color: inherit; }
.rc-prof-link:hover { background: var(--bn-tile-2); }
.rc-prof-link svg { margin-left: 0; color: var(--bn-muted); }
.rc-prof-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-prof-invite { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--bn-tile-2); }
.rc-prof-actions { display: flex; gap: 6px; }
/* in the side panel the arrow sits by the brand, top right */
.bn-side > .rc-prof { position: absolute; top: 20px; right: 12px; }
.bn-side > .rc-prof .rc-prof-menu { left: auto; right: 0; }

/* ------------------------------------------------------------- Hlásenie: the recorder
   (bento/_voice_record.html, js/voice_record.js) - the round red button, the
   pulsing ring while it records, the review with the player */
.rc-voice-picks .bn-pick { position: relative; }
.rc-voice-play { position: absolute; right: 6px; top: 6px; }
.rc-rec { display: flex; align-items: center; gap: 12px; }
.rc-rec-btn {
  position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: var(--bn-fire); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 20px rgba(180, 35, 24, 0.35);
}
.rc-rec-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* on the declare screen and in Rýchly poplach the block is one of many:
   tighter gaps, a small button, the picks as a row of chips */
.rc-voice--pick { gap: 8px; }
.rc-voice--pick .rc-rec { gap: 10px; }
.rc-voice--pick .rc-rec-btn { width: 40px; height: 40px; box-shadow: 0 4px 12px rgba(180, 35, 24, 0.3); }
.rc-voice--pick .rc-rec-btn svg { width: 18px; height: 18px; }
.rc-voice--pick .rc-rec.is-recording .rc-rec-dot { width: 16px; height: 16px; }
.rc-voice--pick .rc-rec-status { font-size: 13px; }
.rc-voice--pick .rc-rec-time { font-size: 16px; }
.rc-voice--pick .rc-voice-picks { display: flex; flex-wrap: wrap; gap: 6px; }
/* the chosen hlásenie stands out, the others are outlined (2026-11-05: the
   checked tile borrowed the alert type's colour, which the picks have none of) */
.rc-voice--pick .rc-voice-picks .bn-pick { --bn-type-color: var(--bn-fire); --bn-type-ink: #fff; --bn-type-tint: var(--bn-fire-tint); flex: 0 1 auto; min-height: 0; padding: 7px 34px 7px 10px; flex-direction: row; align-items: center; gap: 6px; background: transparent; border-color: var(--bn-line); }
.rc-voice--pick .rc-voice-picks .bn-pick:has(input:checked) { background: var(--bn-fire); color: #fff; border-color: var(--bn-fire); box-shadow: 0 6px 16px -8px var(--bn-fire); }
.rc-voice--pick .rc-voice-picks .bn-pick:has(input:checked) .rc-voice-play { color: #fff; }
.rc-voice--pick .rc-voice-picks .bn-pick-ic { width: 22px; height: 22px; border-radius: 7px; }
.rc-voice--pick .rc-voice-picks .bn-pick-ic svg { width: 13px; height: 13px; }
.rc-voice--pick .rc-voice-picks .bn-pick-name { font-size: 13px; }
.rc-voice--pick .rc-voice-picks .bn-pick:not(:has(.rc-voice-play)) { padding-right: 10px; }
.rc-voice--pick .rc-voice-play { right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; }
.rc-rec-btn svg { width: 26px; height: 26px; }
.rc-rec-btn .rc-rec-dot { display: none; }
.rc-rec.is-recording .rc-rec-btn { background: var(--bn-tile); color: var(--bn-fire); border: 2px solid var(--bn-fire); }
.rc-rec.is-recording .rc-rec-btn svg { display: none; }
.rc-rec.is-recording .rc-rec-dot { display: block; width: 22px; height: 22px; border-radius: 5px; background: var(--bn-fire); }
.rc-rec.is-recording .rc-rec-btn::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--bn-fire);
  animation: rc-rec-ring 1.2s ease-out infinite;
}
@keyframes rc-rec-ring { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
.rc-rec-status { font-weight: 700; font-size: 14px; }
.rc-rec-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; color: var(--bn-fire-ink); }
.rc-rec-review { display: flex; flex-direction: column; gap: 8px; }

/* a link under a post's body (the zbor's badges): text, not a chip */
.bn-post-more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; margin: -4px 0 2px;
                font-size: 13px; font-weight: 700; color: var(--bn-fire); text-decoration: none; }
.bn-post-more svg { width: 15px; height: 15px; }

/* Pomoc k stránke (bento/_page_help.html): a slim tab on the right edge,
   below the middle so it clears the header and the floating bar; the hit
   area is wider than the 7px that shows. Kiko's violet: help, not alarm. */
.rc-help-tab { position: fixed; right: 0; top: 58%; transform: translateY(-50%); z-index: 44;
               width: 22px; height: 68px; padding: 0; border: 0; background: transparent; cursor: pointer;
               display: flex; align-items: center; justify-content: flex-end; -webkit-tap-highlight-color: transparent; }
.rc-help-tab span { display: block; width: 7px; height: 52px; border-radius: 7px 0 0 7px; background: var(--bn-kiko-ink);
                    box-shadow: 0 0 0 1.5px var(--bn-tile), -2px 2px 8px rgba(16, 24, 40, .22); transition: width .15s ease; }
.rc-help-tab:hover span, .rc-help-tab:focus-visible span { width: 11px; }
.rc-help-tab:focus-visible { outline: none; }
.rc-help-tab:focus-visible span { box-shadow: 0 0 0 2px var(--bn-tile), 0 0 0 4px var(--bn-kiko-ink); }
.rc-help-backdrop { position: fixed; inset: 0; z-index: 1990; background: rgba(9, 11, 15, .45); opacity: 0; transition: opacity .2s ease; }
.rc-help-backdrop.rc-open { opacity: 1; }
.rc-help-backdrop[hidden], .rc-help-sheet[hidden] { display: none; }
.rc-help-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1991; width: min(380px, 88vw); overflow-y: auto;
                 background: var(--bn-tile); color: var(--bn-ink); box-shadow: var(--bn-shadow-lift);
                 border-radius: 24px 0 0 24px; display: flex; flex-direction: column; gap: 10px;
                 padding: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) calc(20px + env(safe-area-inset-right, 0px))
                          calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) 20px;
                 transform: translateX(104%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); outline: none; }
.rc-help-sheet.rc-open { transform: none; }
.rc-help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-help-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bn-kiko-ink); }
.rc-help-x { width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 50%; background: transparent;
             color: var(--bn-muted); display: grid; place-items: center; cursor: pointer; }
.rc-help-x:hover { background: var(--bn-tile-2); }
.rc-help-x svg { width: 22px; height: 22px; }
.rc-help-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--bn-ink); }
.rc-help-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bn-muted); }
.rc-help-sub { margin: 8px 0 0; font-size: 13px; font-weight: 800; color: var(--bn-ink); }
.rc-help-tips { margin: 0; padding: 0; list-style: none; counter-reset: rc-tip; display: flex; flex-direction: column; gap: 8px; }
.rc-help-tips li { counter-increment: rc-tip; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
                   border-radius: 14px; background: var(--bn-tile-2); font-size: 14px; line-height: 1.45; color: var(--bn-ink); }
.rc-help-tips li::before { content: counter(rc-tip); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
                           font-size: 12px; font-weight: 800; background: var(--bn-kiko-tint); color: var(--bn-kiko-ink); }
.rc-help-actions { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.rc-help-guide, .rc-help-kiko { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 14px;
                                font-weight: 800; font-size: 15px; text-decoration: none; }
.rc-help-guide { box-shadow: inset 0 0 0 1.5px var(--bn-line); color: var(--bn-ink); }
.rc-help-guide span { flex: 1; }
.rc-help-kiko { justify-content: center; background: var(--bn-kiko-ink); color: var(--bn-tile); }
.rc-help-guide svg, .rc-help-kiko svg { width: 18px; height: 18px; flex: none; }
@media print { .rc-help-tab { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rc-help-sheet, .rc-help-backdrop, .rc-help-tab span { transition: none; }
}