/* ==========================================================
     Reusable animation system - durations/easing are centralized
     here so every component pulls from the same scale instead of
     picking its own numbers. See script.js for the JS-side half
     (usePrefersReducedMotion, AnimatedModal, AnimatedSheet,
     PageSlide) that reads these same custom properties.
     ========================================================== */
  :root {
    --dur-tap: 120ms;
    --dur-menu: 180ms;
    --dur-modal: 260ms;
    --dur-page: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-tap: 1ms;
      --dur-menu: 1ms;
      --dur-modal: 80ms;
      --dur-page: 1ms;
    }
  }

  /* Tap feedback - every button/card gets a quick, subtle press
     scale for free. Purely visual, never affects layout (transform
     only), so it's safe to apply globally. */
  button, .tap-scale {
    transition: transform var(--dur-tap) var(--ease-out);
  }
  button:active, .tap-scale:active {
    transform: scale(0.96);
    transition-duration: 60ms;
  }
  @media (prefers-reduced-motion: reduce) {
    button:active, .tap-scale:active { transform: none; }
  }

  @keyframes rleafModalIn {
    from { opacity: 0; transform: scale(var(--modal-from-scale, 0.92)) translate(var(--modal-from-x, 0), var(--modal-from-y, 0)); }
    to { opacity: 1; transform: scale(1) translate(0, 0); }
  }
  @keyframes rleafModalOut {
    from { opacity: 1; transform: scale(1) translate(0, 0); }
    to { opacity: 0; transform: scale(var(--modal-from-scale, 0.92)) translate(var(--modal-from-x, 0), var(--modal-from-y, 0)); }
  }
  @keyframes rleafBackdropIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rleafBackdropOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes rleafSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes rleafSheetOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
  @keyframes rleafPageInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes rleafPageOutToRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
  @keyframes rleafPageOldOutSubtle { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-18%); opacity: 0.6; } }
  @keyframes rleafPageOldInSubtle { from { transform: translateX(-18%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
  @keyframes rleafMenuIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.96); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
  @keyframes rleafMenuOut { from { opacity: 1; transform: translateY(0) scaleY(1); } to { opacity: 0; transform: translateY(-4px) scaleY(0.96); } }
  @media (prefers-reduced-motion: reduce) {
    @keyframes rleafModalIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes rleafModalOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes rleafSheetIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes rleafSheetOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes rleafPageInFromRight { from { opacity: 0; } to { opacity: 1; } }
    @keyframes rleafPageOutToRight { from { opacity: 1; } to { opacity: 0; } }
  }

  .rleaf-collapsible {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur-menu) var(--ease-out), opacity var(--dur-menu) var(--ease-out);
  }
  .rleaf-collapsible.open {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .rleaf-collapsible > div {
    overflow: hidden;
    min-height: 0;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  /* CCTV demo-mode placeholder tile (script.js: renderCctvTile) - a
     slow, subtle glow, never meant to look like real video. */
  @keyframes cctvPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  @keyframes rleafCircleDraw {
    from { stroke-dashoffset: 201; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes rleafTickDraw {
    from { stroke-dashoffset: 40; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes smokeDriftA {
    0% { transform: translate(-10vw, 15vh) scale(0.8); opacity: 0; }
    20% { opacity: 0.16; }
    50% { transform: translate(20vw, -20vh) scale(1.15); opacity: 0.12; }
    80% { opacity: 0.08; }
    100% { transform: translate(60vw, -55vh) scale(1.4); opacity: 0; }
  }
  @keyframes smokeDriftB {
    0% { transform: translate(110vw, 20vh) scale(1.1); opacity: 0; }
    20% { opacity: 0.14; }
    50% { transform: translate(70vw, -15vh) scale(0.9); opacity: 0.1; }
    80% { opacity: 0.06; }
    100% { transform: translate(20vw, -60vh) scale(1.3); opacity: 0; }
  }
  @keyframes smokeDriftC {
    0% { transform: translate(30vw, 110vh) scale(0.9); opacity: 0; }
    20% { opacity: 0.15; }
    55% { transform: translate(55vw, 45vh) scale(1.2); opacity: 0.1; }
    100% { transform: translate(80vw, -30vh) scale(1.5); opacity: 0; }
  }
  @keyframes smokeDriftD {
    0% { transform: translate(90vw, 100vh) scale(1); opacity: 0; }
    25% { opacity: 0.13; }
    60% { transform: translate(40vw, 40vh) scale(1.25); opacity: 0.08; }
    100% { transform: translate(-10vw, -20vh) scale(1.5); opacity: 0; }
  }
  @keyframes smokeDriftE {
    0% { transform: translate(50vw, -20vh) scale(0.85); opacity: 0; }
    20% { opacity: 0.12; }
    50% { transform: translate(10vw, 30vh) scale(1.1); opacity: 0.09; }
    100% { transform: translate(-40vw, 90vh) scale(1.4); opacity: 0; }
  }

  /* ---- Mobile-friendly baseline ---- */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    touch-action: manipulation;
  }
  .admin-bubble:hover, .admin-bubble:active {
    opacity: 1 !important;
  }

  /* Members list: table on wide screens, cards on narrow ones */
  .members-table-view { display: block; }
  .members-cards-view { display: none; }

  @media (max-width: 720px) {
    .members-table-view { display: none; }
    .members-cards-view { display: block; }
  }

  /* Branch admin view (kiosk member lookup) - stack its top bar and
     panel padding down on narrow screens. Not used by the main Admin
     dashboard, which now has its own mobile-first bottom-nav shell. */
  @media (max-width: 640px) {
    .admin-topbar {
      flex-direction: column;
      align-items: stretch !important;
      gap: 14px;
    }
    .admin-tab-panel {
      padding-left: 16px !important;
      padding-right: 16px !important;
      padding-top: 20px !important;
    }
  }

  @media (max-width: 480px) {
    .kiosk-center {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
    .kiosk-card {
      padding: 24px 20px !important;
    }
  }

  /* iOS Safari renders type="date" at its own intrinsic width and
     ignores width:100% unless appearance is reset */
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
  }

  /* ==========================================================
     Staff assistant (Staff Hub + Point of Sale) - same feel as
     TraumaSync's: messages rise in, typing dots, a pulsing record
     dot and a live voice wave. Motion is off for reduced-motion.
     ========================================================== */
  @keyframes raRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes raDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  @keyframes raRing { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.5); } 100% { box-shadow: 0 0 0 8px rgba(255,59,48,0); } }
  @keyframes raTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(18deg); } }
  @keyframes raPop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
  .ra-typing { display: inline-flex; gap: 3px; }
  .ra-typing i { width: 6px; height: 6px; border-radius: 99px; background: #0F766E; opacity: .3; }
  .ra-input, .ra-input:focus, .ra-input:focus-visible { outline: none; box-shadow: none; border: none; background: transparent; }
  .ra-input::placeholder { color: #8E8E93; }
  .ra-composer { transition: border-color .25s ease, box-shadow .25s ease; }
  .ra-composer:focus-within { border-color: rgba(15,118,110,.55) !important; box-shadow: 0 10px 40px rgba(15,118,110,.18) !important; }
  .ra-send { transition: transform .2s var(--ease-out), opacity .2s ease, background .2s ease; }
  .ra-chip { transition: background .15s ease, color .15s ease; }
  .ra-chip:hover { background: rgba(15,118,110,.1) !important; color: #0F766E !important; }
  .ra-bar { display: block; width: 3px; height: 100%; flex-shrink: 0; border-radius: 99px; background: linear-gradient(180deg, rgba(255,59,48,.95), rgba(255,59,48,.5)); transform: scaleY(.16); transform-origin: center; transition: transform 75ms linear; }
  @media (prefers-reduced-motion: no-preference) {
    .ra-msg { animation: raRise .3s var(--ease-out) both; }
    .ra-pop { animation: raPop .35s var(--ease-out) both; }
    .ra-typing i { animation: raDot 1.1s infinite ease-in-out; }
    .ra-typing i:nth-child(2) { animation-delay: .15s; }
    .ra-typing i:nth-child(3) { animation-delay: .3s; }
    .ra-rec { animation: raRing 1.2s infinite; }
    .ra-sparkle { display: inline-block; animation: raTwinkle 2.4s infinite ease-in-out; }
  }

  /* ==========================================================
     Staff app (Staff Hub + Point of Sale in one): bottom bar,
     menu section labels, landing link.
     ========================================================== */
  .rs-nav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; gap: 2px; padding: 5px; border-radius: 26px; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(16,24,40,0.14); max-width: 720px; margin: 0 auto; }
  .rs-nav-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px 8px; border: none; border-radius: 20px; background: transparent; color: #3A3A3C; cursor: pointer; font: inherit; transition: background .2s ease, color .2s ease, transform var(--dur-tap) var(--ease-out); }
  .rs-nav-btn span { font-size: 10px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
  .rs-nav-btn.is-on { background: rgba(15,118,110,0.1); color: #0F766E; }
  .rs-nav-btn.is-on span { font-weight: 700; }
  @media (prefers-reduced-motion: no-preference) { .rs-nav-btn.is-on svg { animation: raPop .35s var(--ease-out); } }
  .rs-menu-label { font-size: 12px; font-weight: 700; color: #6E6E73; text-transform: uppercase; letter-spacing: .06em; margin: 22px 6px 8px; }
  .rs-landing-link { display: block; margin: 16px auto 0; border: none; background: none; color: rgba(236,234,228,0.6); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

  /* Staff screens: one sticky glass header (the round Back button sits in it). */
  .rs-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 16px 10px 64px; background: rgba(245,245,247,0.82); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); box-sizing: border-box; }
  .rs-header-text { min-width: 0; }
  .rs-header-title { font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: #1D1D1F; line-height: 1.15; }
  .rs-header-sub { font-size: 12.5px; color: #6E6E73; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (prefers-reduced-motion: no-preference) { .rs-header-title { animation: raRise .3s var(--ease-out) both; } }

  /* The app-wide round Back button: light glass on the app, dark on the kiosk screens. */
  .rs-back { position: fixed; top: 11px; left: 12px; z-index: 9999; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.9); color: #1D1D1F; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 4px 12px rgba(16,24,40,0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .rs-back.is-dark { background: rgba(0,0,0,0.62); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); box-shadow: 0 2px 10px rgba(0,0,0,0.35); }

  /* Fields: a clear teal focus ring instead of the browser outline. */
  input:not(.ra-input):not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:not(.ra-input):focus { border-color: rgba(15,118,110,0.7) !important; box-shadow: 0 0 0 3px rgba(15,118,110,0.15) !important; outline: none; }
  html { -webkit-tap-highlight-color: transparent; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .rs-header-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); background: #fff; color: #1D1D1F; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,0.06); }

  /* ==========================================================
     Menu maker (story menus)
     ========================================================== */
  .mm-wrap { display: flex; gap: 18px; align-items: flex-start; max-width: 980px; margin: 0 auto; }
  .mm-side { flex: 1 1 360px; min-width: 0; }
  .mm-preview { flex: 0 0 300px; position: sticky; top: 76px; }
  @media (max-width: 760px) { .mm-wrap { flex-direction: column-reverse; } .mm-preview { position: static; width: 62%; max-width: 280px; margin: 0 auto; flex: none; } }
  .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .mm-tpl { border: none; background: #fff; border-radius: 16px; padding: 10px; cursor: pointer; text-align: center; font-family: inherit; color: #1D1D1F; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06); transition: transform .15s ease; }
  .mm-tpl:active { transform: scale(0.98); }
  .mm-item { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .mm-mini { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); background: #fff; border-radius: 10px; cursor: pointer; font-size: 14px; color: #3A3A3C; font-family: inherit; }
  .mm-btn { border: 1px solid rgba(0,0,0,0.1); background: #fff; color: #1D1D1F; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
  .mm-btn-go { background: rgba(31,138,76,0.12); color: #1F8A4C; border-color: transparent; }
  .mm-btn-warn { background: rgba(194,65,12,0.1); color: #C2410C; border-color: transparent; }
  .mm-btn:disabled, .mm-mini:disabled { opacity: .45; cursor: default; }
  .mm-badge { display: inline-block; font-size: 11px; font-weight: 750; border-radius: 99px; padding: 3px 8px; }
  .mm-banner { background: rgba(255,149,0,0.12); border: 1px solid rgba(255,149,0,0.35); color: #8A4B00; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
  .mm-picker { margin-top: 10px; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 10px; max-height: 320px; overflow-y: auto; background: #FAFAFB; }
  .mm-pick { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: none; background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; font-size: 14px; cursor: pointer; font-family: inherit; color: #1D1D1F; text-align: left; }
  .mm-pick.is-on { opacity: .5; }
  .mm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; position: sticky; bottom: 96px; background: linear-gradient(transparent, #F5F5F7 24%); padding-top: 14px; }

  /* Menu maker: phone or TV */
  .mm-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mm-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: #fff; border-radius: 18px; padding: 22px 12px; cursor: pointer; font-family: inherit; color: #1D1D1F; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06); }
  .mm-choice b { font-size: 18px; }
  .mm-choice span:last-child { font-size: 13px; color: #6E6E73; text-align: center; }
  .mm-choice-icon { font-size: 40px; line-height: 1; }
  .mm-grid.is-tv { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .mm-wrap.is-tv { flex-direction: column-reverse; align-items: stretch; }
  .mm-wrap.is-tv .mm-preview { position: static; flex: none; width: 100%; max-width: 820px; margin: 0 auto; }
  .mm-full { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .mm-full img { width: 100%; height: 100%; object-fit: contain; }
  .mm-full-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.55); font-size: 13px; }

  /* Menu maker: saved menus (library) */
  .mm-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .mm-saved.is-tv { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .mm-saved-card { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 18px rgba(16,24,40,0.06); min-width: 0; }
  .mm-savebar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .mm-savebar .mm-btn { flex: 1 1 140px; padding: 11px 12px; font-size: 14px; }

  /* Menu maker: library on the first screen, drafts in the picker */
  .mm-empty { background: #fff; border: 1px dashed rgba(0,0,0,0.15); border-radius: 14px; padding: 16px; font-size: 13.5px; color: #6E6E73; text-align: center; }
  .mm-tpl-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .mm-draft-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }