/* Artdigg — app shell: header + navigation.
   Mobile: sticky header on top, tab bar at the bottom.
   Desktop (>= 1024px): header across the top, navigation becomes a left rail. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
/* Never pan sideways: nothing may widen the page (off-screen panels, carousels), and no sideways bounce */
/* Clip sideways overflow on the content, never on html/body: iOS Safari detaches fixed bars (the tab bar)
   when the root element clips. The root only switches off the browser's own bounce / pull-to-refresh. */
html { overscroll-behavior: none; }
.app-main, .screen, .app-header { max-width: 100%; overflow-x: clip; }

/* App feel: no double-tap zoom, no text inflation, no selection, no image callouts */
/* pan-y: the page itself never moves sideways under a finger (our tab swipe still gets every touch);
   anything that scrolls sideways (tabs, chips, carousels) is its own scroll container and keeps pan-x */
html {
  touch-action: pan-y pinch-zoom;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img, svg { -webkit-user-drag: none; }

a { color: inherit; }

/* Avatar: image, or initials when the image file is missing */
.avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-field);
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--initials {
  background: var(--color-field);
  color: var(--color-ink-2);
  font-weight: 700;
  letter-spacing: 0.02em;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; flex: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- Header ---------- */

.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  background: var(--color-surface);
  box-shadow: var(--shadow-bar);
  padding-top: env(safe-area-inset-top, 0px);
}

.app-header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}

.icon-btn {
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-md);
  display: inline-grid;
  place-items: center;
  color: var(--color-ink);
  transition: background-color .15s ease;
}
.icon-btn svg { width: var(--icon); height: var(--icon); }
/* Icons inside content, buttons, rows and sheets draw at 70% of their box (UIcons fill the whole 24-grid; the old hand-drawn set sat inset).
   Header, bottom bar and sidebar are sized on their own. */
:root { --ico-scale: .85; }
.app-main svg > use, #screens svg > use, .fsheet svg > use, .sel-pop svg > use, .sel-sheet svg > use, .cf svg > use, .dsheet svg > use, .toast svg > use, .popover svg > use {
  transform: scale(var(--ico-scale)); transform-origin: 50% 50%; transform-box: view-box; }
.app-main .nav-item svg > use, .vchk svg > use, .avatar svg > use { transform: none; }
/* every header icon on the same 24-grid: one size, one colour */
.app-header .icon-btn svg { width: 22px; height: 22px; }

.avatar-btn {
  width: var(--tap);
  height: var(--tap);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
}
.avatar-btn .avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-notif { position: relative; }
.app-header .icon-btn { color: var(--nav-icon-hover); }

/* Unread badge: a dot on phones, a count on the desktop bell */
.badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-badge);
  color: var(--color-on-badge);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-surface);
  pointer-events: none;
}
.badge--dot { top: 8px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; }
.badge[hidden] { display: none; }
.brand { margin-left: 4px; }

/* ---------- Navigation (tab bar on mobile, rail on desktop) ---------- */

.app-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  background: var(--color-surface);
  box-shadow: var(--shadow-bar-up);
  padding-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.app-nav__list {
  list-style: none;
  margin: 0 auto;
  padding: 0 12px;
  max-width: 420px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 0 2px;
  min-height: 44px;
  text-decoration: none;
  color: var(--nav-text);
  font-size: var(--fs-nav);
  line-height: 12px;
  border-radius: var(--radius-md);
}
.nav-item svg { width: var(--icon); height: var(--icon); color: var(--nav-icon); transition: color .15s ease; }
.nav-item .icon-on { display: none; }
.nav-item[aria-current="page"] { color: var(--nav-text-active); font-weight: 700; }
.nav-item[aria-current="page"] svg { color: var(--nav-icon-active); }
/* selected tab keeps the outline icon: ink colour + bold label say "you are here" (no filled variants) */
.nav-item[aria-current="page"] .icon-on { display: none; }
.nav-item[aria-current="page"] .icon-off { display: block; }
.nav-av { display: block; box-sizing: border-box; width: var(--icon); height: var(--icon); border-radius: 50%; overflow: hidden; background: var(--color-field); transition: box-shadow .15s ease; }
.nav-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nav-av[hidden] { display: none; }
.nav-item.has-av .icon-off, .nav-item.has-av .icon-on { display: none; }
.nav-item.has-av[aria-current="page"] .nav-av { box-shadow: 0 0 0 1.5px var(--color-surface), 0 0 0 3px var(--nav-icon-active); }

/* ---------- Content ---------- */

.app-main {
  min-height: 100%;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Hover (pointer devices only) ---------- */

@media (hover: hover) {
  .icon-btn:hover { background: var(--color-hover); }
  .avatar-btn:hover .avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-line-strong); }
  .nav-item:hover { color: var(--nav-text-hover); }
  .nav-item:hover svg { color: var(--nav-icon-hover); }
  .nav-item[aria-current="page"]:hover svg { color: var(--nav-icon-active); }
}

/* ---------- Tablet ---------- */

@media (min-width: 640px) {
  .app-header__bar { padding-left: 16px; padding-right: 16px; gap: 8px; }
}

/* ---------- Brand (logo) ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.brand__logo {
  display: block;
  height: 29px;
  width: auto;
  color: var(--color-logo);      /* wordmark follows the theme, mark follows the accent */
}

/* ---------- Desktop shell ----------
   No top bar. Full-height sidebar (logo on top, Menu at the bottom),
   active-profile avatar floating in the top-right corner.
   1280px+: full sidebar with labels. 1024–1279px: compact icon rail. */

.app-sidebar { display: none; }
.popover[hidden] { display: none; }

@media (min-width: 1024px) {
  :root {
    --header-h: 0px;
    --rail-w: 276px;
  }

  /* Header collapses to the avatar alone, pinned to the corner */
  .app-header {
    inset: 0 0 auto auto;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    z-index: 25;
  }
  .app-header__bar {
    height: auto;
    padding: 16px 24px 0 0;
  }
  .brand,
  .icon-btn--menu,
  .header-search,
  .header-notif { display: none; }
  .header-actions { margin-left: 0; }
  .avatar-btn { display: none; }          /* Profile is a sidebar entry on desktop */
  .app-header { display: none; }
  .avatar-btn .avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
    box-shadow: 0 0 0 2px var(--color-surface), 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .avatar-btn[aria-current="page"] .avatar,
  .avatar-btn[aria-expanded="true"] .avatar {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--nav-icon);
  }

  /* Bottom tab bar is replaced by the sidebar */
  .app-nav { display: none; }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: var(--rail-w);
    padding: env(safe-area-inset-top, 0px) 18px max(18px, env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-right: 0;
  }
  /* 24 Oct (owner): the menu keeps its white, its edge is the same glowing line as Tasks, Crew, Offers and Calendar */
  .app-sidebar::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 18%, var(--color-line)), color-mix(in srgb, var(--color-accent) 70%, transparent) 22%, color-mix(in srgb, var(--color-accent) 70%, transparent) 78%, color-mix(in srgb, var(--color-accent) 18%, var(--color-line)));
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }

  .side-top {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 88px;
    margin-bottom: 14px;
    flex: none;
  }
  .side-brand {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    color: var(--color-logo);
    border-radius: var(--radius-md);
  }
  .side-brand .brand__logo { height: 36px; width: auto; display: block; }
  .side-brand__icon { display: none; width: 32px; height: 32px; }

  .side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  /* Search stands a step apart from the content tabs */
  .side-list > li:last-child { margin-top: 12px; padding-top: 12px; border-top: var(--hairline) solid var(--color-line); }
  .side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    color: var(--nav-text);
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
  }
  .side-link svg { width: 22px; height: 22px; flex: none; color: var(--nav-icon); transition: color .15s ease; }
  .side-link .icon-on { display: none; }
  .side-link[aria-current="page"],
  .side-link[aria-expanded="true"] {
    background: var(--nav-bg-active);
    color: var(--nav-text-active);
    font-weight: 700;
  }
  .side-link[aria-current="page"] svg,
  .side-link[aria-expanded="true"] svg { color: var(--nav-icon-active); }
  .side-link[aria-current="page"] .icon-on { display: none; }
  .side-link[aria-current="page"] .icon-off { display: block; }

  .side-bell {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--nav-icon);
    transition: background-color .15s ease, color .15s ease;
  }
  .side-bell svg { width: 22px; height: 22px; }
  .side-bell .icon-on { display: none; }
  .side-bell[aria-expanded="true"] { background: var(--nav-bg-active); color: var(--nav-icon-active); }
  .side-bell[aria-expanded="true"] .icon-on { display: block; }
  .side-bell[aria-expanded="true"] .icon-off { display: none; }
  .side-bell .badge { top: 5px; right: 4px; }

  .side-link__icon { position: relative; display: inline-grid; }
  .side-link__icon .dot {
    position: absolute;
    top: -1px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-surface);
  }

  .side-menu { margin-top: auto; position: relative; padding-top: 14px; border-top: var(--hairline) solid var(--color-line); }
  .side-card {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 62px;
    padding: 9px 10px 9px 9px;
    border-radius: 16px;
    text-align: left;
    color: var(--color-ink);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong);
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  .side-card__av { width: 40px; height: 40px; flex: none; font-size: 14px; }
  .side-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .side-card__txt b { font-size: 14px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-card__txt small { font-size: 12px; line-height: 16px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-card__menu { flex: none; width: 20px; height: 20px; padding: 2px; color: var(--color-ink-muted); }
  .side-card[aria-expanded="true"] { background: var(--nav-bg-active); box-shadow: inset 0 0 0 var(--hairline) transparent; }
  .side-link__menu-icon { padding: 3px; }
  /* Invisible bridge over the gap so hover isn't lost between button and panel */
  .side-menu:has([aria-expanded="true"])::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px;
  }

  /* Profile switcher panel (positioned by JS next to its trigger) */
  .popover {
    position: fixed;
    width: 300px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 8px 0;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
    transform-origin: bottom left;
    animation: popover-in .14s ease-out both;
    z-index: 70;
  }
  .popover--down { transform-origin: top right; animation-name: popover-down; }
  .popover__label {
    margin: 8px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-ink-muted);
  }
  /* Notifications panel */
  .popover--notif {
    width: 400px;
    max-height: min(640px, calc(100vh - 120px));
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top left;
    animation-name: popover-down;
  }
  .popover--notif[hidden] { display: none; }
  .notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px 8px 16px;
  }
  .notif-panel__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; }
  .notif-panel__list { overflow-y: auto; padding: 0 0 8px; }
  .notif-panel__all {
    display: grid;
    place-items: center;
    height: 48px;
    flex: none;
    border-top: var(--hairline) solid var(--color-line);
    color: var(--color-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .popover__divider { height: var(--hairline); margin: 8px 0; background: var(--color-line); }
  .popover .row + .row::before { display: none; }

  .app-main {
    padding-top: 24px;
    padding-left: var(--rail-w);
    padding-right: 24px;
    padding-bottom: 0;
  }
}

/* Compact rail: icons only */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --rail-w: 80px; }
  .app-sidebar { padding-left: 12px; padding-right: 12px; }
  .side-top { flex-direction: column; height: auto; padding: 18px 0 10px; gap: 10px; }
  .side-brand { justify-content: center; padding: 0; height: 40px; flex: none; width: 100%; }
  .side-brand .brand__logo { display: none; }
  .side-brand__icon { display: block; }
  .side-link { justify-content: center; padding: 0; }
  .side-link > span:not(.side-link__icon) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .side-card { justify-content: center; min-height: 56px; padding: 8px 0; box-shadow: none; }
  .side-card__txt, .side-card__menu { display: none; }
}

@keyframes popover-in   { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popover-down { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) and (hover: hover) {
  .side-link:hover { background: var(--nav-bg-hover); color: var(--nav-text-hover); }
  .side-link:hover svg, .side-bell:hover { color: var(--nav-icon-hover); }
  .side-bell:hover { background: var(--nav-bg-hover); }
  .side-bell[aria-expanded="true"]:hover { background: var(--nav-bg-active); color: var(--nav-icon-active); }
  .notif-panel__all:hover { background: var(--color-hover); }
  .side-link[aria-current="page"]:hover,
  .side-link[aria-expanded="true"]:hover { background: var(--nav-bg-active); color: var(--nav-text-active); }
  .side-link[aria-current="page"]:hover svg,
  .side-link[aria-expanded="true"]:hover svg { color: var(--nav-icon-active); }
  .side-card:hover { background: var(--nav-bg-hover); }
  .side-card[aria-expanded="true"]:hover { background: var(--nav-bg-active); }
  .avatar-btn:hover .avatar { transform: scale(1.04); }
}

/* Instant tap feedback */
.icon-btn:active,
.avatar-btn:active,
.nav-item:active,
.side-link:active,
.brand:active,
.menu-link:active,
.project:active { opacity: 0.6; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: 14px;
  line-height: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Own profile open: same quiet ring on phones */
.avatar-btn[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--nav-icon); }

/* ---------- Navigation follows the active profile ----------
   Fan: Feed · Chat · Discover · Calendar · Profile.  Artist / venue: Feed · Calendar · Offerbox · Discover · Tasks (· Crew on desktop). */
body.is-fan [data-nav-pro], body:not(.is-fan) [data-nav-fan] { display: none; }
body.is-fan .app-nav__list li, body.is-fan .side-list li { order: 10; }
/* Fan: Feed · Chat · Calendar · Discover (= Search) · Profile */
body.is-fan .app-nav__list li:has([data-tab="feed"]), body.is-fan .side-list li:has([data-tab="feed"]) { order: 1; }
body.is-fan .app-nav__list li:has([data-tab="chat"]), body.is-fan .side-list li:has([data-tab="chat"]) { order: 3; }
body.is-fan .app-nav__list li:has([data-tab="calendar"]), body.is-fan .side-list li:has([data-tab="calendar"]) { order: 2; }
body.is-fan .app-nav__list li[data-nav-fandx], body.is-fan .side-list li[data-nav-fandx] { order: 4; }
body.is-fan .app-nav__list li:has([data-nav-profile]), body.is-fan .side-list li:has([data-nav-profile]) { order: 5; }
/* Fan on phones: Profile lives in the tab bar, so the header avatar goes */
/* 23 Oct (owner): the fan's profile sits where the artist's and venue's does — the avatar top right; the last tab is Marketplace */
body.is-fan .app-nav__list li:has([data-nav-profile]) { display: none; }
body.is-fan .app-nav__list li[data-nav-mp] { order: 6; }
/* Artists / venues on phones: Feed · Offerbox · Discover · Search · Tasks */
body:not(.is-fan) .app-nav__list li { order: 10; }
body:not(.is-fan) .app-nav__list li:has([data-tab="feed"]) { order: 1; }
body:not(.is-fan) .app-nav__list li:has([data-ob-parent]) { order: 2; }
body:not(.is-fan) .app-nav__list li:has([data-tab="discover"]) { order: 3; }
body:not(.is-fan) .app-nav__list li[data-nav-search] { order: 6; }
body:not(.is-fan) .app-nav__list li:has([data-tab="tasks"]) { order: 4; }
.app-nav__list { max-width: 480px; }
.nav-item span { white-space: nowrap; }
body.is-fan .side-list li[data-nav-search] { order: 6; }
body.is-fan .side-list > li:last-child { margin-top: 0; padding-top: 0; border-top: 0; }


/* ---------- Offerbox = Calendar + Offers (artists and venues) ---------- */
.ob-seg { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 4; }
body.has-pwa-banner .ob-seg { top: calc(var(--header-h) + 60px + env(safe-area-inset-top, 0px)); }
.side-sub { display: none; }
@media (min-width: 1024px) {
  .ob-seg.utabs { display: none !important; }
  body:not(.is-fan) .side-sub { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 4px 0 6px; padding: 0 0 0 30px; }
  .side-sublink { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px 0 22px; border-radius: 12px; color: var(--nav-text); font-size: 14px; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
  .side-sublink::before { content: ''; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--color-line-strong); }
  .side-sublink[aria-current="page"] { color: var(--nav-text-active); font-weight: 700; }
  .side-sublink[aria-current="page"]::before { background: var(--nav-text-active); }
  .side-link--parent[aria-current="page"] { background: transparent; }
}
@media (min-width: 1024px) and (hover: hover) { .side-sublink:hover { background: var(--nav-bg-hover); color: var(--nav-text-hover); } }
@media (min-width: 1024px) and (max-width: 1279px) { body:not(.is-fan) .side-sub { display: none; } .side-link--parent[aria-current="page"] { background: var(--nav-bg-active); } }

/* ---------- Bottom sheets: grab handle + softer corners on phones ---------- */
@media (max-width: 767px) {
  .dsheet .fsheet__panel { border-radius: 22px 22px 16px 16px; }
  .dsheet:not(.tk-center) .fsheet__panel::before {
    content: ''; flex: none; width: 36px; height: 4px; border-radius: 99px;
    background: var(--color-line-strong); margin: 8px auto 2px;
  }
}

/* ---------- Install Torro: the banner above everything (phones and tablets) ---------- */
.pwa-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 21;
  display: flex; align-items: stretch;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-surface);
  box-shadow: 0 var(--hairline) 0 var(--color-line), 0 6px 20px rgba(17, 17, 28, 0.06);
}
.pwa-banner__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 4px 0 14px; text-align: left; color: var(--color-ink); }
.pwa-banner__main img { flex: none; border-radius: 9px; box-shadow: 0 0 0 var(--hairline) var(--color-line-strong), 0 3px 10px rgba(17, 17, 28, 0.14); }
.pwa-banner__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pwa-banner__txt b { font-size: 14px; line-height: 19px; }
.pwa-banner__txt small { font-size: 12px; line-height: 16px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-banner__get { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); }
.pwa-banner__get svg { width: 17px; height: 17px; }
.pwa-banner__x { flex: none; width: 44px; display: grid; place-items: center; color: var(--color-ink-muted); }
.pwa-banner__x svg { width: 16px; height: 16px; }
/* The whole app slides down under the banner */
@media (max-width: 1023px) {
  body.has-pwa-banner .app-header { top: 60px; }
  body.has-pwa-banner .app-main { padding-top: calc(var(--header-h) + 60px + env(safe-area-inset-top, 0px)); }
  body.has-pwa-banner .screen { top: 0; }
}
@media (min-width: 1024px) { .pwa-banner { display: none; } body.has-pwa-banner .app-header { top: auto; } }

/* ---------- Install Torro (PWA): the guide sheet with the animated how-to ---------- */
.fsheet__panel.dsheet__panel.pwa-guide { padding: 6px 22px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 0; }
.pwa-guide__head { display: flex; align-items: center; gap: 14px; padding: 14px 0 16px; }
.pwa-guide__head img { border-radius: 12px; box-shadow: 0 0 0 var(--hairline) var(--color-line-strong), 0 4px 14px rgba(17, 17, 28, 0.12); }
.pwa-guide__head h2 { margin: 0; font-size: 18px; line-height: 23px; }
.pwa-guide__stage { border-radius: 18px; background: var(--color-bg); box-shadow: inset 0 0 0 var(--hairline) var(--color-line); padding: 14px 10px 8px; }
.pw-stage { display: block; width: 100%; max-height: 240px; }
.pwa-guide__steps { list-style: none; margin: 18px 0 20px; padding: 0 2px; display: flex; flex-direction: column; gap: 12px; }
.pwa-guide__steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 21px; color: var(--color-ink-2); }
.pwa-guide__steps b { color: var(--color-ink); }
.pwa-guide__n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: 13px; font-weight: 700; }
.pwa-guide__ok { width: 100%; }

/* The scene inherits the theme */
.pw-card { fill: var(--color-surface); stroke: var(--color-line-strong); stroke-width: 1.4; }
.pw-tile { fill: var(--color-field); }
.pw-bar { fill: var(--color-field); }
.pw-ln { fill: none; stroke: var(--color-ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-dot { fill: var(--color-ink-2); }
.pw-panel { fill: var(--color-surface); stroke: var(--color-line-strong); stroke-width: 1.2; }
.pw-lbl { fill: var(--color-field); }
.pw-plus rect, .pw-plus path { fill: none; stroke: var(--color-accent); stroke-width: 1.7; stroke-linecap: round; }
.pw-ring { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1.5; }
.pw-tip { fill: var(--color-ink); fill-opacity: 0.2; stroke: var(--color-ink); stroke-opacity: 0.55; stroke-width: 1.4; }
.pw-rip { fill: none; stroke: var(--color-ink); stroke-width: 1.5; }
.pw-new { fill: #FF5B5D; }
.pw-chk { fill: var(--color-positive); }
.pw-tick { fill: none; stroke: var(--color-on-positive); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* One 7.5s loop: tap the trigger → panel opens → tap the row → panel closes → the icon pops in.
   Base states = the finished still, so with animations off the scene reads as a static diagram. */
.pw-stage [class*="pw-a-"] { transform-box: fill-box; animation-duration: 7.5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); animation-fill-mode: both; }
.pw-a-fin, .pw-a-rip1, .pw-a-rip2 { opacity: 0; }
.pw-a-fin--ios { animation-name: pw-fin-ios; }
.pw-a-fin--and { animation-name: pw-fin-and; }
.pw-a-rip1 { animation-name: pw-rip1; }
.pw-a-rip2 { animation-name: pw-rip2; }
.pw-a-share { animation-name: pw-share; }
.pw-a-sheet { animation-name: pw-sheet; }
.pw-a-menu { animation-name: pw-menu; }
.pw-a-row { animation-name: pw-row; }
.pw-a-new { animation-name: pw-new; }
.pw-a-chk { animation-name: pw-chk; }
@keyframes pw-fin-ios {
  0% { transform: translate(16px, 24px); opacity: 0; }
  7% { transform: translate(0, 0); opacity: 1; }
  11% { transform: translate(0, 0) scale(0.78); }
  15%, 28% { transform: translate(0, 0) scale(1); opacity: 1; }
  38% { transform: translate(0, -64px) scale(1); }
  43% { transform: translate(0, -64px) scale(0.78); }
  48%, 55% { transform: translate(0, -64px) scale(1); opacity: 1; }
  62%, 100% { transform: translate(0, -64px); opacity: 0; }
}
@keyframes pw-fin-and {
  0% { transform: translate(-16px, 26px); opacity: 0; }
  7% { transform: translate(0, 0); opacity: 1; }
  11% { transform: translate(0, 0) scale(0.78); }
  15%, 28% { transform: translate(0, 0) scale(1); opacity: 1; }
  38% { transform: translate(-52px, 59px) scale(1); }
  43% { transform: translate(-52px, 59px) scale(0.78); }
  48%, 55% { transform: translate(-52px, 59px) scale(1); opacity: 1; }
  62%, 100% { transform: translate(-52px, 59px); opacity: 0; }
}
@keyframes pw-rip1 { 0%, 10% { transform: scale(0.3); opacity: 0; } 12% { opacity: 0.5; } 22%, 100% { transform: scale(2); opacity: 0; } }
@keyframes pw-rip2 { 0%, 42% { transform: scale(0.3); opacity: 0; } 44% { opacity: 0.5; } 54%, 100% { transform: scale(2); opacity: 0; } }
@keyframes pw-share { 0%, 10% { transform: scale(1); } 12% { transform: scale(0.84); } 18%, 100% { transform: scale(1); } }
@keyframes pw-sheet {
  0%, 15% { transform: translateY(96px); opacity: 0; }
  24%, 58% { transform: translateY(0); opacity: 1; }
  66%, 100% { transform: translateY(96px); opacity: 0; }
}
@keyframes pw-menu {
  0%, 15% { transform: scale(0.5); opacity: 0; }
  24%, 58% { transform: scale(1); opacity: 1; }
  66%, 100% { transform: scale(0.5); opacity: 0; }
}
@keyframes pw-row { 0%, 30% { opacity: 0; } 36%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes pw-new {
  0%, 64% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.18); opacity: 1; }
  74% { transform: scale(0.95); }
  78%, 93% { transform: scale(1); opacity: 1; }
  99%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes pw-chk {
  0%, 71% { transform: scale(0); opacity: 0; }
  77% { transform: scale(1.25); opacity: 1; }
  81%, 93% { transform: scale(1); opacity: 1; }
  99%, 100% { transform: scale(1); opacity: 0; }
}

/* ---------- Page refresh on desktop (index.html #boot) ---------- */
.boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--color-bg, #F4F4F6); color: #414141; transition: opacity .3s ease; }
.boot.is-dark { color: #E4E4E0; background: var(--color-bg, #111114); }
.boot.is-out { opacity: 0; pointer-events: none; }
/* 27 Oct (owner): the version under the splash */
.boot__ver { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; opacity: .45; font-variant-numeric: tabular-nums; }
.boot__mark { width: 76px; height: 66px; overflow: visible; }
.boot__g { transform-origin: 500px 422px; transform-box: view-box; animation: ptr-breathe 850ms .6s ease-in-out infinite; }
.boot__base { fill: currentColor; opacity: .13; }
.boot__solid { fill: currentColor; }
.boot__line { fill: none; stroke: currentColor; stroke-width: 13px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: boot-draw .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes boot-draw { to { stroke-dashoffset: 0; } }
.boot.is-done .boot__g { animation: ptr-confirm 360ms ease-out both; }
.boot--switch { animation: boot-in .18s ease both; }
@keyframes boot-in { from { opacity: 0; } }
:root[data-theme="dark"] .boot--switch { color: #E4E4E0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boot--switch { color: #E4E4E0; } }
@media (prefers-reduced-motion: reduce) { .boot__g, .boot__line { animation: none !important; } .boot__line { stroke-dashoffset: 0; } }

/* ---------- Refresh: the Torro bull (app.js pullToRefresh) ----------
   The mark is #414141 on a light disc in both themes (brand). Phones: slingshot · desktop: fill + breathe. */
.ptr { --bull: #414141; --disc: #F5F5F3; position: fixed; z-index: 15; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 4px); left: 50%; width: 220px; margin-left: -110px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; opacity: 0; }
.ptr.on-screen { z-index: 45; }
.ptr__disc { display: none; place-items: center; color: var(--bull); }
:root[data-theme="dark"] .ptr { --bull: #E4E4E0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptr { --bull: #E4E4E0; } }
.ptr:not(.is-web) .ptr__disc--sling { display: grid; width: 156px; height: 78px; border-radius: 26px; }
.ptr.is-web .ptr__disc--fill { display: grid; width: 56px; height: 56px; border-radius: 50%; }
/* slingshot (phones) */
.ptr__sling { width: 150px; height: 75px; overflow: visible; }
.ptr__sling use { fill: currentColor; }
.ptr__bull { transform-origin: 100px 45px; transform-box: view-box; }
.ptr__tether { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .48; transform-origin: 100px 28px; transform-box: view-box; }
.ptr__ground { fill: currentColor; opacity: .12; transform-origin: 100px 78px; transform-box: view-box; }
.ptr__impact { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0; transform-origin: 100px 78px; transform-box: view-box; }
.ptr__dust { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0; transform-origin: 100px 78px; transform-box: view-box; }
.ptr[data-phase="launch"] .ptr__bull { animation: ptr-leap 420ms cubic-bezier(.2, .7, .3, 1) both; }
.ptr[data-phase="launch"] .ptr__tether { animation: ptr-release 360ms ease-out both; }
.ptr[data-phase="loading"] .ptr__bull { animation: ptr-gallop 680ms ease-in-out infinite; }
.ptr[data-phase="loading"] .ptr__ground { animation: ptr-footprint 680ms ease-in-out infinite; }
.ptr[data-phase="loading"] .ptr__dust { animation: ptr-dust 680ms ease-out infinite; }
.ptr:is([data-phase="loading"], [data-phase="success"], [data-phase="error"], [data-phase="settling"]) .ptr__tether { opacity: 0; }
.ptr[data-phase="success"] .ptr__bull { animation: ptr-land 480ms ease-out both; }
.ptr[data-phase="success"] .ptr__impact { animation: ptr-impact 520ms 80ms ease-out both; }
.ptr[data-phase="error"] .ptr__bull { animation: ptr-shake 280ms ease-out both; }
@keyframes ptr-leap { 0% { transform: translateY(16px) scale(1.1, .85) rotate(-4deg); } 38% { transform: translateY(-16px) scale(.9, 1.12) rotate(11deg); } 72% { transform: translateY(-7px) scale(1.02, .98) rotate(-6deg); } 100% { transform: none; } }
@keyframes ptr-release { 0% { transform: scaleY(1); opacity: .48; } 35% { transform: scaleY(-.5); opacity: .35; } 70% { transform: scaleY(.2); opacity: .15; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes ptr-gallop { 0%, 100% { transform: translateY(3px) scale(1.05, .94) rotate(-4deg); } 30% { transform: translateY(-9px) scale(.96, 1.05) rotate(5deg); } 55% { transform: translateY(3px) scale(1.06, .93) rotate(3deg); } 78% { transform: translateY(-5px) scale(.98, 1.02) rotate(-3deg); } }
@keyframes ptr-footprint { 0%, 55%, 100% { transform: scaleX(1); opacity: .16; } 30%, 78% { transform: scaleX(.65); opacity: .08; } }
@keyframes ptr-dust { 0%, 52% { transform: translateY(0) scale(.7); opacity: 0; } 60% { opacity: .55; } 96%, 100% { transform: translateY(-7px) scale(1.45); opacity: 0; } }
@keyframes ptr-land { 0% { transform: translateY(-7px) scale(.97, 1.04); } 24% { transform: translateY(9px) scale(1.18, .78); } 55% { transform: translateY(-3px) scale(.96, 1.07); } 100% { transform: none; } }
@keyframes ptr-impact { 0% { transform: scale(.5); opacity: .65; } 100% { transform: scale(2.5, 1.4); opacity: 0; } }
@keyframes ptr-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* fill + breathe (desktop) */
.ptr__fill { width: 34px; height: 30px; overflow: visible; }
.ptr__mark { transform-origin: 500px 422px; transform-box: view-box; }
.ptr__base { fill: currentColor; opacity: .13; }
.ptr__solid { fill: currentColor; }
.ptr__line { fill: none; stroke: currentColor; stroke-width: 13px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ptr.is-web[data-phase="loading"] .ptr__mark { animation: ptr-breathe 850ms ease-in-out infinite; }
.ptr.is-web[data-phase="success"] .ptr__mark { animation: ptr-confirm 360ms ease-out both; }
.ptr.is-web[data-phase="error"] .ptr__mark { animation: ptr-shake-w 280ms ease-out both; }
@keyframes ptr-breathe { 0%, 100% { transform: translateY(0) scale(.96); } 50% { transform: translateY(-35px) scale(1.04); } }
@keyframes ptr-confirm { 0% { transform: scale(1); } 40% { transform: scale(1.12, .9); } 75% { transform: scale(.98, 1.04); } 100% { transform: scale(1); } }
@keyframes ptr-shake-w { 25% { transform: translateX(-45px); } 75% { transform: translateX(45px); } }
@media (min-width: 1024px) { .ptr { top: calc(env(safe-area-inset-top, 0px) + 14px); } }
@media (prefers-reduced-motion: reduce) { .ptr * { animation: none !important; } .ptr__tether, .ptr__dust, .ptr__impact { display: none; } }

/* Logo in the middle of the top bar on phones (all profiles) */
@media (max-width: 1023px) {
  .app-header__bar { position: relative; }
  .app-header .brand { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
  /* 24 Oct (owner): the full logo when the app opens, then (5 s) it folds into the word "torro" for the rest of the visit.
     The svg keeps its height; its width narrows and the tile slides out on the left (preserveAspectRatio xMaxYMid slice). */
  .app-header .brand__logo { width: 90.8px; transition: width .7s cubic-bezier(.65, 0, .35, 1); }
  .app-header .brand__logo .brand-tile, .app-header .brand__logo .brand-mark { transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .6s cubic-bezier(.65, 0, .35, 1); }
  .app-header .brand.is-word .brand__logo { width: 56.6px; }
  .app-header .brand.is-word .brand__logo .brand-tile, .app-header .brand.is-word .brand__logo .brand-mark { opacity: 0; transform: scale(.55) rotate(-8deg); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .app-header .brand__logo, .app-header .brand__logo .brand-tile, .app-header .brand__logo .brand-mark { transition: none; } }

/* ---------- Auto-hiding top bar (phones) ---------- */
@media (max-width: 1023px) {
  .app-header { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; will-change: transform; }
  body.header-hidden .app-header { transform: translateY(calc(-1 * var(--header-h))); box-shadow: none; }
  .ob-seg, .dx__tabs { transition: top .3s cubic-bezier(.2, .8, .2, 1); }
  body.header-hidden .ob-seg, body.header-hidden .dx__tabs { top: env(safe-area-inset-top, 0px); }
  body.header-hidden .ptr:not(.on-screen) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-header, .ob-seg, .dx__tabs { transition: none !important; } }

/* ---------- Top bar only on Feed (phones): other pages start at the top, with room ---------- */
@media (max-width: 1023px) {
  body.no-header .app-header { transform: translateY(-100%); box-shadow: none; pointer-events: none; }
  body.no-header .app-main { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
  body.no-header .ob-seg, body.no-header .dx__tabs, body.no-header .tk-tabs { top: env(safe-area-inset-top, 0px); }
  body.no-header .ob-seg, body.no-header .dx__tabs { margin-top: -14px; }
  body.no-header::before { content: ''; position: fixed; z-index: 19; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--color-surface); }
  body.no-header .ptr { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  body.no-header.has-pwa-banner .app-main { padding-top: calc(env(safe-area-inset-top, 0px) + 74px); }
}

/* ---------- Tab content eases in when you switch ---------- */
.app-main.tab-in > * { animation: tab-in .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Skeletons ---------- */
.sk, .sk-shim {
  background: linear-gradient(100deg, var(--color-field) 30%, color-mix(in srgb, var(--color-field) 55%, var(--color-surface)) 50%, var(--color-field) 70%);
  background-size: 300% 100%;
  animation: sk-shine 1.3s ease-in-out infinite;
}
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk { display: block; border-radius: 8px; }
.sk-overlay { position: fixed; z-index: 14; bottom: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s ease; background: var(--color-bg); }
.sk-overlay.is-on { opacity: 1; }
.sk-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; padding: 8px 0; }
.sk-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--color-surface); }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk--av { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk--l1 { width: 46%; height: 13px; }
.sk--l2 { width: 28%; height: 11px; }
.sk--media { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; }
.sk--txt { width: 100%; height: 12px; }
.sk--short { width: 62%; }
img.img-wait { opacity: 0; }
img.img-in { opacity: 1; transition: opacity .38s ease; }
@media (prefers-reduced-motion: reduce) { .sk, .sk-shim { animation: none; } .app-main.tab-in > * { animation: none; } }
/* Same guarantee for every round avatar: the photo can never set the shape */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- Bell: outline at rest, filled when its page/panel is open, swings when something new arrives ---------- */
.app-header .icon-btn { color: var(--color-ink); }
.header-notif .icon-on, .side-bell .icon-on { display: none; }
.header-notif[aria-current="page"] .icon-on, .side-bell[aria-expanded="true"] .icon-on { display: block; }
.header-notif[aria-current="page"] .icon-off, .side-bell[aria-expanded="true"] .icon-off { display: none; }
.header-notif:active svg, .side-bell:active svg { transform: scale(.9); }
[data-notif-trigger] svg { transform-origin: 50% 12%; transition: transform .12s ease; }
[data-notif-trigger].is-ringing svg { animation: bell-ring 1s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes bell-ring {
  0% { transform: rotate(0); } 12% { transform: rotate(16deg); } 24% { transform: rotate(-14deg); } 36% { transform: rotate(10deg); }
  48% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } 72% { transform: rotate(-3deg); } 84%, 100% { transform: rotate(0); }
}

/* ---------- "Good to know" line: one quiet sentence under a tab, a bulb in front, room around it ---------- */
.page-tip { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 20px 16px 14px; font-size: 14px; line-height: 20px; color: var(--color-ink-2); }
.page-tip > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--color-accent-text); }
.page-tip a { color: var(--color-ink); font-weight: 700; text-decoration: none; }
@media (min-width: 640px) { .page-tip { padding: 16px 0 14px; } }
/* Under the Calendar | Offers bar the page name is already on the tab: no repeated title on phones */
@media (max-width: 1023px) {
  .ob-seg ~ .calv .calv__title, .ob-seg ~ .ob .ob__title { display: none; }
  .ob-seg ~ .calv .calv__head { padding-top: 8px; align-items: flex-start; flex-wrap: nowrap; }
  .ob-seg ~ .calv .calv__head .page-tip { flex: 1; padding: 12px 0 6px; }
  .ob-seg ~ .calv .cal-mode { margin-top: 8px; }
  .ob-seg ~ .ob .ob__head { padding-top: 4px; }
  .ob-seg ~ .ob .page-tip { padding: 16px 0 12px; }
}
@media (max-width: 1023px) {
  .ob-seg ~ .calv .calv__head .page-tip { order: -1; flex: 1 1 auto; }
  .ob-seg ~ .calv .cal-mode { flex: none; }
}

/* ---------- Desktop menu: Offers, Calendar, Gig Match and Gig Radar are their own items; Discover is Search ---------- */
.dx-title { display: none; }
@media (min-width: 1024px) {
  /* groups: Feed · Search | booking tools | crew — a clear line between them, and under the logo */
  .side-top { margin-bottom: 12px; border-bottom: 1px solid var(--color-line-strong); }
  .side-list > li.side-gap { margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--color-line-strong); }
  /* selected = the row is highlighted; the icon keeps its outline (no filled variant on desktop) */
  .side-link[aria-current="page"] .icon-on { display: none; }
  .side-link[aria-current="page"] .icon-off { display: block; }
  body:not(.is-fan) .dx__tabs, body:not(.is-fan) .dx-search { display: none !important; }
  body:not(.is-fan) .dx-title { display: block; margin: 8px 0 2px; padding: 0 4px; font-size: 22px; line-height: 28px; font-weight: 700; }
}

/* ---------- Sideways rows on desktop: round arrows on hover, like Stories (carousels.js) ---------- */
.hsc-host { position: relative; }
.hsc-btn { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hsc-btn:not([hidden]) { position: absolute; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
    background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-float); opacity: 0; transform: scale(.92); transition: opacity .15s ease, transform .15s ease; }
  .hsc-btn svg { width: 16px; height: 16px; }
  .hsc-host:hover > .hsc-btn:not([hidden]) { opacity: 1; transform: none; }
  .hsc-btn:hover { background: var(--color-hover); }
  .hsc-btn:active { transform: scale(.94); }
}

/* ---------- Confirm: one calm question, consequences spelled out ---------- */
.cf { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(10, 10, 14, 0); transition: background-color .18s ease; }
.cf.is-open { background: rgba(10, 10, 14, .5); }
.cf__panel { width: 100%; max-width: 420px; padding: 22px 20px 16px; border-radius: 22px; background: var(--color-surface); color: var(--color-ink);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3); transform: translateY(16px); opacity: 0; transition: transform .22s cubic-bezier(.16, 1, .3, 1), opacity .18s ease; }
.cf.is-open .cf__panel { transform: none; opacity: 1; }
.cf__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--color-field); color: var(--color-ink); }
.cf__panel.is-danger .cf__ic { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.cf__ic svg { width: 22px; height: 22px; }
.cf__title { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.cf__text { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--color-ink-muted); }
.cf__points { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 10px; }
.cf__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.cf__points svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--color-ink-muted); }
.cf__btns { display: flex; gap: 10px; margin-top: 20px; }
.cf__btn { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--color-field); color: var(--color-ink); font-size: 15px; font-weight: 600; }
.cf__btn--ok { background: var(--color-ink); color: var(--color-surface); }
.cf__btn--ok.is-danger { background: var(--color-danger); color: #FFFFFF; }
:root[data-theme="dark"] .cf__btn--ok.is-danger { color: #1A0705; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf__btn--ok.is-danger { color: #1A0705; } }
.cf__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cf__btn:active { transform: scale(.98); }
@media (min-width: 640px) { .cf { align-items: center; } .cf__panel { padding: 26px 24px 20px; } }
@media (hover: hover) and (pointer: fine) { .cf__btn:hover { filter: brightness(.96); } .cf__btn--ok:hover { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .cf, .cf__panel { transition-duration: .01s; } }
.cf__btn--ok.btn-positive { background: var(--color-positive); color: var(--color-on-positive); }
:root[data-theme="dark"] .cf__panel { box-shadow: 0 0 0 1px var(--color-line-strong), 0 18px 60px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf__panel { box-shadow: 0 0 0 1px var(--color-line-strong), 0 18px 60px rgba(0, 0, 0, .5); } }

/* Settings → your @name */
.set-handle { display: flex; flex-direction: column; }
.ed-row__form .set-handle__hint { margin-top: -6px; }
.set-handle__box { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--color-field); transition: box-shadow .15s ease, background-color .15s ease; }
.set-handle__box:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.set-handle__at { font-size: 16px; font-weight: 700; color: var(--color-ink-muted); }
.set-handle__in { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 2px; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: 16px; outline: none; -webkit-user-select: text; user-select: text; }
.set-handle__in[aria-invalid="true"] { color: var(--color-danger); }
.set-handle__hint { font-size: 12.5px; line-height: 17px; color: var(--color-ink-muted); }
.set-handle__err { font-size: 12.5px; color: var(--color-danger); }
.set-handle__go { align-self: flex-start; }

/* ---------- Scrollbars, 22 Oct: Torro's own, and they never move the page ----------
   The space for the bar is always kept (scrollbar-gutter: stable), so content stays put when a page grows long enough
   to scroll. The bar itself is a thin rounded pill on a clear track — it gets stronger only when you reach for it.
   Phones keep their own overlay bars (they never take space). */
html { scrollbar-gutter: stable; }
.screen-body, .tk__main .ob-chat__list, .ch__main .ob-chat__list { scrollbar-gutter: stable; }
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-ink) 22%, transparent) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--color-ink) 20%, transparent) padding-box; min-height: 40px; }
  ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-ink) 38%, transparent); }
  ::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
  ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; width: 0; height: 0; background: transparent; }
  /* sideways rails (stories, cards) stay without a bar, as before */
  .fx-scroll::-webkit-scrollbar, .pf-strip::-webkit-scrollbar, .sr-cards::-webkit-scrollbar { display: none; }
}

/* Media (media.js): a video is its poster until it is on screen; the <video> fades in over it once it plays */
.mv { position: absolute; inset: 0; display: block; overflow: hidden; }
.mv > img, .mv > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mv > video { opacity: 0; transition: opacity .2s ease; }
.mv.is-playing > video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mv > video { transition: none; } }

/* Gig pictures (media.js): the gig's own colour under / instead of its picture; a poster shown whole over its blurred copy */
.gig-hue { background:
    radial-gradient(110% 85% at 0% 0%, hsl(var(--h, 250) 72% 56% / .62), transparent 62%),
    radial-gradient(90% 80% at 100% 100%, hsl(calc(var(--h, 250) + 70) 70% 48% / .50), transparent 64%),
    #101016 !important; color: #FFFFFF; }
.pfit__blur { position: absolute; inset: -14%; background-size: cover; background-position: center; filter: blur(26px) saturate(1.15) brightness(.62); transform: translateZ(0); pointer-events: none; }
img.pfit__img[data-fit] { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* Picture placeholders (media.js, phase 2): the picture's blurhash (a CSS class per hash: --mm-bh) on its dominant colour
   (--mm-dc), drawn as the <img>'s own background so no wrapper changes any layout. Once the picture is in, the
   background goes and a copy of the placeholder fades out over it (only where the picture fills its box). */
img.mm { background-color: var(--mm-dc, var(--color-field)); background-image: var(--mm-bh, none); background-size: 100% 100%; background-repeat: no-repeat; }
img.mm.mm--in { background: none; }
.mm-fade { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-color: var(--mm-dc, transparent); background-image: var(--mm-bh, none); background-size: 100% 100%; background-repeat: no-repeat;
  animation: mm-out .36s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes mm-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-fade { display: none; } }

/* ---------- Sidebar (owner 23 Oct): avatar top right · Notifications in the list · Settings at the bottom · ⓘ on the tools ---------- */
@media (min-width: 1024px) {
  .side-av { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; transition: background-color .15s ease; }
  .side-av__img { width: 36px; height: 36px; font-size: 13px; transition: box-shadow .15s ease, transform .15s ease; }
  .side-av[aria-expanded="true"] .side-av__img, .side-av:focus-visible .side-av__img { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--nav-icon-active); }
  .side-list > li { position: relative; }
  .side-list > li:last-child { margin-top: 0; padding-top: 0; border-top: 0; }
  button.side-link { font: inherit; font-size: 15px; background: transparent; cursor: pointer; }
  .side-link .side-link__icon svg { width: 22px; height: 22px; }
  .side-link .side-badge { top: -7px; right: -10px; }
  .side-link[aria-expanded="true"] .side-link__icon .icon-on { display: block; }
  .side-link[aria-expanded="true"] .side-link__icon .icon-off { display: none; }
  .side-info { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 50%;
    color: var(--nav-icon); opacity: .45; transition: opacity .15s ease, background-color .15s ease; }
  .side-info svg { width: 14px; height: 14px; }
  .side-list > li:hover .side-info, .side-info:focus-visible, .side-info[aria-describedby] { opacity: 1; }
  .side-info:hover, .side-info[aria-describedby] { background: var(--nav-bg-hover); color: var(--nav-icon-hover); }
  .side-tip { position: fixed; z-index: 75; max-width: 270px; padding: 10px 13px; border-radius: 12px; background: var(--color-surface); color: var(--color-ink);
    font-size: 13px; line-height: 18px; box-shadow: var(--shadow-float); transform: translateY(-50%); pointer-events: none; animation: popover-in .12s ease-out both; }
  .side-foot { margin-top: auto; padding-top: 12px; border-top: var(--hairline) solid var(--color-line); }
  .popover--side { transform-origin: top left; animation-name: popover-down; }
}
@media (min-width: 1024px) and (hover: hover) { .side-av:hover { background: var(--nav-bg-hover); } .side-av:hover .side-av__img { transform: scale(1.04); } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .side-info { display: none; }
  .side-av { margin: 0 auto; }
}
.side-tip[hidden] { display: none; }
@media (max-width: 1023px) { .side-tip { display: none !important; } }
@media (min-width: 1024px) {
  body.is-fan .side-list li[data-nav-notif] { order: 1; }
  .side-list > li:has(.side-info) .side-link { padding-right: 44px; }
  .side-info { margin-top: 0; line-height: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .side-list > li:has(.side-info) .side-link { padding-right: 0; } }
@media (min-width: 1024px) { .side-list > li.side-gap .side-info { top: calc(50% + 6px); } }
/* 23 Oct (owner): no Profile row in the sidebar — the avatar top right is the way in; it shows a ring while your profile is open */
@media (min-width: 1024px) { .side-av[aria-current="page"] .side-av__img { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--nav-icon-active); } }

/* ---------- Long forms in steps on phones (steps.js, owner 23 Oct) ---------- */
.fst-head { position: sticky; top: -1px; z-index: 3; display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 2px 0 12px; background: var(--color-surface); box-shadow: 0 -28px 0 var(--color-surface); }
.fst-bar { display: flex; gap: 6px; }
.fst-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--color-line-strong); transition: background-color .25s ease, box-shadow .25s ease; }
.fst-bar i.is-done { background: var(--color-accent); }
.fst-bar i.is-on { background: var(--color-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.fst-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.fst-lab b { font-size: 18px; line-height: 24px; font-weight: 800; }
.fst-lab small { flex: none; font-size: 13px; color: var(--color-ink-muted); }
.fstep { display: flex; flex-direction: column; gap: 10px; }
.fstep[hidden] { display: none !important; }
.fstep:not([hidden]) { animation: fst-in .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fst-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fstep:not([hidden]) { animation: none; } }
.fst-foot.is-stepping { display: flex !important; align-items: center; gap: 10px; }
.fst-foot.is-stepping > * { margin: 0; }
.fst-foot.is-stepping > .fst-next, .fst-foot.is-stepping > [type="submit"], .fst-foot.is-stepping > .dx-cta:not(.fst-back), .fst-foot.is-stepping > .pf-btn--primary { flex: 1; min-width: 0; }
.fst-back { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 48px; padding: 0 16px 0 12px; border-radius: 24px; }
.fst-back svg { width: 16px; height: 16px; }
.fst-next { height: 48px; border-radius: 24px; }
.fst-foot [hidden] { display: none !important; }

/* Quick select of a page's upcoming gigs (Prilike forms) */
.mk-gigs { display: flex; flex-direction: column; gap: 6px; }
.mk-gig { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; text-align: left; color: inherit; font: inherit;
  background: transparent; box-shadow: inset 0 0 0 1px var(--color-line); transition: box-shadow .15s ease, background-color .15s ease; }
.mk-gig[aria-checked="true"] { background: color-mix(in srgb, var(--color-accent) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--color-accent), 0 0 16px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.mk-gig__d { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; color: #FFFFFF; }
.mk-gig__d b { font-size: 17px; }
.mk-gig__d small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mk-gig__d--none { background: var(--color-field); color: var(--color-ink-2); }
.mk-gig__d--none svg { width: 18px; height: 18px; }
.mk-gig__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-gig__t b { font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-gig__t small { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-gig__ok { flex: none; width: 18px; height: 18px; color: var(--color-accent); opacity: 0; transition: opacity .15s ease; }
.mk-gig[aria-checked="true"] .mk-gig__ok { opacity: 1; }
.mk-gig[hidden] { display: none; }
.mk-gigs__more { align-self: flex-start; padding: 6px 4px; font: inherit; font-size: 14px; font-weight: 700; color: var(--color-accent-text, var(--color-accent)); }
@media (hover: hover) { .mk-gig:not([aria-checked="true"]):hover { background: var(--color-hover, var(--color-field)); } }
/* while stepping: the step title already says it, and the sheet keeps one height so it doesn't jump between steps */
@media (max-width: 1023px) {
  .fsheet__panel:has(.fst-foot.is-stepping), .fsheet__panel:has(.fst-head) { min-height: min(86vh, 760px); }
  .fsheet__panel:has(.fst-head) .fst-dup { display: none; }
}

/* ---------- One page-title scale everywhere (owner, 23 Oct: "mora biti unificirano") ----------
   Every page's own title — tab pages (Offers, Calendar, Gig Match, Tasks, Crew, Chat) and pages that open over them
   (Opportunities, Marketplace, Notifications, Settings…) — is the same size, weight and height on the screen.
   A phone's centred top bar (16/700) is navigation, not a page title, and keeps its own size. */
:root { --page-title-size: 22px; --page-title-lh: 28px; --page-title-w: 800; --page-title-ls: -.01em; }
.tk-head h1, .ob__title, .calv__title, .ch__title, .dx-title, .page-title, .mp-head h1 {
  font-size: var(--page-title-size) !important; line-height: var(--page-title-lh) !important; font-weight: var(--page-title-w) !important; letter-spacing: var(--page-title-ls) !important; }
@media (min-width: 1024px) {
  .screen:not(.screen--root) > .screen-bar .screen-bar__title {
    font-size: var(--page-title-size) !important; line-height: var(--page-title-lh) !important; font-weight: var(--page-title-w) !important; letter-spacing: var(--page-title-ls) !important; }
}
.settings-pane__title { font-size: var(--page-title-size) !important; line-height: var(--page-title-lh) !important; font-weight: var(--page-title-w) !important; letter-spacing: var(--page-title-ls) !important; }
/* …and at the same height: a page that opens over a tab puts its title where the tab's title is */
@media (min-width: 1024px) {
  .screen:not(.screen--root) > .screen-bar { padding-top: 54px !important; }
  .screen:not(.screen--root) .screen-inner { padding-top: 12px !important; }
}
/* typed e-signature inside a confirm (deal memo): the OK button wakes up when the full name matches */
.cf__sign { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.cf__sign > span { font-size: 13px; font-weight: 700; color: var(--color-ink-2); }
.cf__sign input { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--color-field); font: inherit; font-size: 17px; font-style: italic; color: var(--color-ink); }
.cf__sign input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); background: var(--color-surface); }
.cf__sign small { font-size: 12px; line-height: 16px; color: var(--color-ink-muted); }
.cf__btn--ok:disabled { opacity: .45; }

/* Switched off for launch (flags.js) — hidden, not deleted */
.off-prilike [data-flag="prilike"], .off-pro [data-pro-tag], .off-pro [data-flag="pro"] { display: none !important; }
@media (min-width: 1024px) {
  .off-prilike .side-list > li[data-flag="prilike"] + li { margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--color-line-strong); }
  .off-prilike .side-list > li[data-flag="prilike"] + li .side-info { top: calc(50% + 6px); }
}

/* app.js: a sheet or viewer is open — the page under it stays still */
/* (no overflow:hidden here: on phones it throws the page back to the top — the touch/wheel guard in app.js holds it) */
html.is-scroll-locked, html.is-scroll-locked body { overscroll-behavior: none; }
.fsheet, .lbx, .wv, .flm, .cmp { overscroll-behavior: contain; }

/* Overlay scrollbar inside boxes (app.js): no native bar, no lost width — a thin thumb floats over the content */
.oscroll { scrollbar-width: none; scrollbar-gutter: auto !important; }
.oscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.oscroll__bar { position: absolute; right: 2px; top: 0; width: 10px; z-index: 5; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.oscroll__bar[hidden] { display: none; }
.oscroll__bar.is-on, .oscroll:hover > .oscroll__bar { opacity: 1; pointer-events: auto; }
.oscroll__thumb { position: absolute; left: 3px; right: 3px; top: 0; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 24%, transparent); transition: left .15s ease, right .15s ease, background-color .15s ease; cursor: default; }
.oscroll__bar:hover .oscroll__thumb, .oscroll__bar.is-drag .oscroll__thumb { left: 1px; right: 1px; background: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.oscroll__bar.is-drag .oscroll__thumb { background: color-mix(in srgb, var(--color-accent) 70%, transparent); }

/* 24 Oct: iPhone Safari — a full-screen layer pinned top + bottom is as tall as the screen WITHOUT the browser bars,
   so its bottom (Send / Next, the composer, a bottom sheet) slid under Safari's toolbar. On phones these layers are exactly
   as tall as what's visible (100dvh), so whatever sits at their bottom always stays above the toolbar. */
@supports (height: 100dvh) {
  @media (max-width: 1023px) {
    /* not .screen: pages scroll the document, Safari's bars shrink and grow while you scroll, and a page that changed height
       with them jumped under your finger (24 Oct) */
    .fsheet, .cf, .sel-sheet, .gn-gate, .crop, .cmp, .story-sheet, .lbx, .wv, .sv, .flm { bottom: auto; height: 100dvh; }
  }
}

/* 27 Oct (owner): on phones every bottom sheet closes the way a drag-down closes it —
   ✕, Cancel, the backdrop, Back and Esc all slide the panel off the bottom edge (no fade-and-shrink) */
@media (max-width: 767px) {
  .fsheet:not(.fsheet--anchored):not(.dsheet--offer):not(.tk-center) .fsheet__panel,
  .fsheet--comments .cm-panel, .sel-sheet .sel-sheet__panel, .story-sheet .story-sheet__panel {
    transform: translateY(calc(100% + 24px)); opacity: 1;
    transition: transform .2s cubic-bezier(.4, 0, 1, 1);
  }
  .fsheet.is-open:not(.fsheet--anchored):not(.dsheet--offer):not(.tk-center) .fsheet__panel,
  .fsheet--comments.is-open .cm-panel, .sel-sheet.is-open .sel-sheet__panel, .story-sheet.is-open .story-sheet__panel {
    transform: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .fsheet__panel.is-dragging, .cm-panel.is-dragging, .sel-sheet__panel.is-dragging, .story-sheet__panel.is-dragging { transition: none !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fsheet .fsheet__panel, .fsheet--comments .cm-panel, .sel-sheet__panel, .story-sheet__panel { transition-duration: .01s !important; }
}

/* 27 Oct (owner): initials in an avatar are never underlined (header, menus, lists — any link that holds an avatar) */
.avatar-btn, a:has(> .avatar), a:has(> .av), a.avatar, a .avatar, a .av { text-decoration: none; }

/* 27 Oct (owner): iPhone Safari — the keyboard covers the page instead of shrinking it, so while it is up an open
   sheet takes the height of what is still visible (app.js sets it) and its panel fits inside */
.is-kb { bottom: auto !important; }
.is-kb > .fsheet__panel, .is-kb > .sel-sheet__panel, .is-kb .cm-panel { min-height: 0 !important; max-height: calc(100% - 8px) !important; }