/* Single source for every page in public/ (index.html, home.js, my-cibus/automations/account.html).
   Mirrors docs/design/design-system.html; keep the two in sync by hand. */

:root {
  --rb-coral:        #F16C5C;
  --rb-coral-600:    #E3583F;
  --rb-coral-100:    #FBDDD6;
  --rb-teal:         #123A36;
  --rb-cream:        #F5F1E8;
  --rb-cream-200:    #EFEADD;
  --rb-white:        #FFFFFF;
  --rb-ink:          #16302C;
  --rb-muted:        #8B928D;
  --rb-line:         #E7E2D6;
  --rb-success:      #2E9E7B;
  --rb-warning:      #E2A32B;
  --rb-danger:       #E8574B;
  --rb-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rb-space-sm: 8px;
  --rb-space-md: 16px;
  --rb-space-lg: 24px;
  --rb-space-xl: 32px;
  --rb-r-sm:   8px;
  --rb-r-card: 16px;
  --rb-r-pill: 999px;
  --rb-shadow-card: 0 4px 14px rgba(18,58,54,.08);
  --rb-shadow-floating: 0 8px 24px rgba(241,108,92,.30);
}

* { box-sizing: border-box; }

body {
  font-family: var(--rb-font);
  margin: 0;
  padding: 0 var(--rb-space-md) calc(var(--rb-space-xl) + 72px); /* leaves room above the fixed bottom nav */
  color: var(--rb-ink);
  background: var(--rb-cream);
  max-width: 480px;
  margin-inline: auto;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain; /* suppresses the browser's own pull-to-refresh (a full reload) */
}

.hidden { display: none !important; }
.muted { color: var(--rb-muted); font-size: 0.85rem; }

/* App top bar — see "App Top Bar" in the design system. */
.topbar { display: flex; align-items: center; gap: 12px; padding: var(--rb-space-md) 4px; }
.topbar-logo {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--rb-teal);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.topbar-logo img { width: 24px; height: 27px; }
.topbar-word { font-size: 20px; font-weight: 700; color: var(--rb-teal); letter-spacing: -.3px; }

/* Bottom nav — a single floating pill, inset from the screen edges. Icon-over-label items, all the
   same size regardless of label length, so it reads as symmetric — active state is a color change
   only (no per-item background chip, which made items look uneven width). */
.bottomnav {
  position: fixed; left: var(--rb-space-md); right: var(--rb-space-md); bottom: var(--rb-space-md);
  max-width: 448px; margin-inline: auto;
  display: flex;
  padding: 8px 4px;
  background: var(--rb-white);
  border-radius: var(--rb-r-pill);
  box-shadow: var(--rb-shadow-card);
}
.bottomnav-item {
  flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 60px; border-radius: var(--rb-r-sm);
  font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap;
  color: var(--rb-muted); text-decoration: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; outline: none;
}
.bottomnav-item svg { width: 26px; height: 26px; flex: none; }
.bottomnav-item.active { color: var(--rb-coral); }
.bottomnav-item:focus-visible { outline: 2px solid var(--rb-coral); outline-offset: 2px; }

/* Buttons/inputs — see "Buttons" / "Form Elements" in the design system. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--rb-space-lg); height: 48px; margin-top: 0;
  border-radius: var(--rb-r-pill); font-weight: 600; font-size: 15px;
  cursor: pointer; border: 1px solid transparent; width: 100%;
  font-family: var(--rb-font);
}
.btn-primary { background: var(--rb-coral); color: var(--rb-white); box-shadow: var(--rb-shadow-floating); }
.btn-primary:hover { background: var(--rb-coral-600); }
.btn-primary:disabled { background: var(--rb-line); color: var(--rb-muted); box-shadow: none; cursor: not-allowed; }

/* Ghost — low-emphasis action that shouldn't compete with a screen's primary button (e.g. "Log Out"). */
.btn-ghost { background: transparent; color: var(--rb-muted); border-color: var(--rb-line); }
.btn-ghost:hover { background: var(--rb-cream-200); color: var(--rb-ink); }

/* Small, auto-width variant — for a compact action next to other content (e.g. "Revoke" in a list row). */
.btn-sm { width: auto; height: 36px; padding: 0 var(--rb-space-md); font-size: 13px; flex: none; }

.input-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: var(--rb-space-md); }
.input-label { font-size: 14px; font-weight: 500; color: var(--rb-teal); }
.input {
  height: 52px; border-radius: var(--rb-r-card); border: 2px solid var(--rb-line);
  background: var(--rb-white); padding: 0 16px; font-size: 15px; color: var(--rb-ink);
  width: 100%; margin-top: 0; font-family: var(--rb-font);
}
.input:focus { border-color: var(--rb-coral); box-shadow: 0 0 0 4px var(--rb-coral-100); outline: none; }
.input:disabled { background: var(--rb-cream-200); color: var(--rb-muted); }

/* Cards — see "Get Payment Code" mock in the design system's mobile-first section. */
.card {
  background: var(--rb-white); border: 1px solid var(--rb-line); border-radius: var(--rb-r-card);
  padding: 20px; box-shadow: var(--rb-shadow-card); margin-bottom: var(--rb-space-md);
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: var(--rb-space-sm); }
.card-title { font-size: 17px; font-weight: 700; color: var(--rb-teal); margin: 0; }
.card-subtitle { font-size: 13px; color: var(--rb-muted); margin: 2px 0 0; }

.card-close-btn {
  flex: none; width: 28px; height: 28px; padding: 0; margin: 0;
  border: none; border-radius: 50%; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--rb-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.card-close-btn svg { width: 18px; height: 18px; }
.card-close-btn:hover { background: var(--rb-cream-200); color: var(--rb-ink); }
.card-close-btn:focus-visible { outline: 2px solid var(--rb-coral); outline-offset: 2px; }

.badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px 8px; border-radius: var(--rb-r-pill);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  line-height: 1;
}
.badge-success { background: #D4EFE5; color: var(--rb-success); }
.badge-warning { background: #FBEBD2; color: var(--rb-warning); }
.badge-danger { background: var(--rb-coral-100); color: var(--rb-danger); }

.text-link {
  background: none; border: none; padding: 0; margin: 0; width: auto;
  font-size: 13px; font-weight: 500; color: var(--rb-muted); cursor: pointer;
  text-decoration: underline; font-family: var(--rb-font);
}
.text-link:hover { color: var(--rb-ink); }

/* Screens for signed-out / waitlist / empty states — plain, no card, centered mid-page. */
.screen { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.screen-heading { font-size: 22px; font-weight: 700; color: var(--rb-teal); margin: 0 0 var(--rb-space-md); text-align: center; }
.screen-message { font-size: 17px; font-weight: 600; color: var(--rb-teal); text-align: center; }

.section-label { font-size: 14px; font-weight: 600; color: var(--rb-teal); margin: var(--rb-space-lg) 0 var(--rb-space-sm); }

/* Post-sign-in page greeting ("Hi Yonatan") — matches .card-title's size/weight, not a named
   type-scale token (nothing in the scale is 17px). */
.greeting {
  font-size: 17px; line-height: 24px; font-weight: 700;
  color: var(--rb-teal); margin: 0 0 var(--rb-space-md);
}

/* Page title — H1 per the design system's type scale (26/32/700). Left-aligned page-level heading
   below the shared chrome (e.g. "Account", "My Cibus") — unlike .screen-heading, which is centered
   and only used pre-approval. */
.page-title { font-size: var(--rb-fs-h1); line-height: var(--rb-lh-h1); font-weight: var(--rb-fw-h1); color: var(--rb-teal); margin: 0 0 var(--rb-space-lg); }

/* Account screen's name/email/phone block — plain stacked text, no card. */
.account-name { font-size: 17px; font-weight: 700; color: var(--rb-teal); margin: 0 0 4px; }
.account-detail { font-size: 14px; color: var(--rb-muted); margin: 2px 0; }

/* A plain (cardless) label + value row, e.g. "Current Balance: 1000" + a Connected badge. */
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rb-space-lg); }
.summary-row p { margin: 0; font-size: 15px; color: var(--rb-ink); }

/* Shared-with list row (My Cibus) — bordered, not a full .card, so a list of them doesn't stack
   shadows. */
.share-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--rb-line); border-radius: var(--rb-r-card);
  padding: 12px 16px; margin-bottom: var(--rb-space-sm); background: var(--rb-white);
}
.share-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--rb-cream-200); color: var(--rb-muted);
  display: flex; align-items: center; justify-content: center;
}
.share-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-avatar svg { width: 22px; height: 22px; }
.share-info { flex: 1 1 auto; min-width: 0; }
.share-name { font-size: 15px; font-weight: 600; color: var(--rb-ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-detail { font-size: 13px; color: var(--rb-muted); margin: 2px 0 0; }

/* Payment-code display — replaces the "Get Payment Code" button once a code is issued; the
   countdown footer is updated on a 1s interval in home.js, not just set once. */
.paycode-box { border: 2px solid var(--rb-line); border-radius: var(--rb-r-card); padding: 20px; text-align: center; }
.paycode-value { font-size: 32px; font-weight: 700; letter-spacing: 3px; color: var(--rb-teal); margin: 0; }
.paycode-timer { font-size: 13px; color: var(--rb-muted); margin: 6px 0 0; }

/* Spinner — indeterminate activity, e.g. a Home card while its Cibus session is being refreshed.
   Reduced-motion slows it rather than stopping it: a frozen spinner reads as a broken screen. */
.spinner {
  display: inline-block; flex: none; width: 18px; height: 18px;
  border: 2px solid var(--rb-line); border-top-color: var(--rb-coral);
  border-radius: 50%;
  animation: rb-spin 700ms linear infinite;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Spinner + explanatory line, sized to sit where a card's balance/button normally is, so the card
   doesn't change height when the real content replaces it. */
.card-loading { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.card-loading p { margin: 0; }

/* Inline add-row (input + button side by side) — e.g. "Share with someone" on My Cibus. */
.inline-form { display: flex; gap: 8px; margin-top: var(--rb-space-md); }
.inline-form .input { margin-top: 0; }
.inline-form .btn { width: auto; padding: 0 var(--rb-space-lg); flex: none; }

/* Drawer — slides open/closed via the grid-rows 0fr/1fr trick, so it animates to its natural height
   without hardcoding a max-height. */
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; }
.drawer.open { grid-template-rows: 1fr; }
.drawer-inner { overflow: hidden; padding-top: var(--rb-space-md); }

/* Tab-switch cross-fade (client-side router) — named so only #view fades, never the fixed
   topbar/bottom nav. Firefox (no View Transitions API) just gets an instant swap. */
#view { view-transition-name: page; }
::view-transition-old(page), ::view-transition-new(page) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { #view { view-transition-name: none; } }

/* Pull-to-refresh indicator (shared/pull-refresh.js) — a floating circle that tracks the finger
   down from under the topbar via the --pull-distance custom property, then spins in place once
   released past threshold. Only armed on views that export refresh() (Home, My Cibus). */
#pullRefreshIndicator {
  position: fixed; top: 0; left: 50%; z-index: 20;
  width: 40px; height: 40px; margin-left: -20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rb-white); border-radius: 50%; box-shadow: var(--rb-shadow-card);
  transform: translateY(calc(-100% + var(--pull-distance, 0px)));
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease;
}
#pullRefreshIndicator.visible { opacity: 1; }
.pull-refresh-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--rb-line); border-top-color: var(--rb-muted);
}
#pullRefreshIndicator.ready .pull-refresh-spinner { border-top-color: var(--rb-coral); }
#pullRefreshIndicator.spinning .pull-refresh-spinner { animation: pull-refresh-spin 700ms linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }