@charset "UTF-8";
#debug {
  background: red;
  position: absolute;
  top: 0px;
  z-index: 100000;
}

/* ============================================================================
   TOKENS — the single source of truth. See referralApp/DESIGN.md.
   Layer 1 (palette) holds raw values and is never referenced by components.
   Layer 2 (semantic) is the only thing components may use.
   Layer 3 (legacy aliases) keeps existing component styles working while they
   are migrated; delete an alias once its call-sites are gone.
   ========================================================================= */
:root {
  /* ---- Layer 1: palette. Do not use directly in components. ---- */
  --blue-50: #eff8fe;
  --blue-100: #d8eefc;
  --blue-200: #b4dff9;
  --blue-300: #7fc9f5;
  --blue-400: #45a9f0; /* brand */
  --blue-500: #2b93df;
  --blue-600: #1d76bd;
  --blue-700: #1a5e97;
  /* One neutral family (gray). The slate values scattered through components
     (#cbd5e1 / #e2e8f0 / #f1f5f9) are a different hue — migrate them to these. */
  --gray-0: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2a37;
  --gray-900: #111827;
  --red-500: #dc2626;
  --amber-500: #d97706;
  --green-500: #059669;
  /* ---- Layer 2: semantic. Use these. ---- */
  --surface: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-raised: var(--gray-0);
  --surface-overlay: rgb(255 255 255 / .72);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-400);
  --text-on-accent: var(--gray-0);
  /* Brand blue: tints, icons, borders, links on white, large display type.
     NEVER a background behind white text — #fff on #45a9f0 is 2.57:1 and fails
     WCAG AA (4.5:1) and even the large-text floor (3:1). */
  --accent: var(--blue-400);
  /* The only token permitted as a background under white text: 4.80:1. */
  --accent-solid: var(--blue-600);
  --accent-solid-hover: var(--blue-700);
  --accent-subtle: var(--blue-50);
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --focus-ring: var(--blue-600);
  --danger: var(--red-500);
  --warning: var(--amber-500);
  --success: var(--green-500);
  /* Rating stars are their own semantic: amber here means "quality", not "warning". */
  --rating: #f59e0b;
  /* ---- Spacing: 4px base. Use instead of arbitrary margins. ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  /* ---- Type ---- */
  --font: system-ui,-apple-system,Roboto, Segoe UI,Helvetica,Arial,sans-serif;
  --fs-caption: clamp(11px, 1.0vw, 12px);
  --fs-sm: clamp(12px, 1.1vw, 13px);
  --fs-md: clamp(15px, 1.4vw, 16px);
  --fs-lg: clamp(18px, 2vw, 22px);
  --fs-xl: clamp(20px, 2.6vw, 28px);
  --fs-display: clamp(26px, 3.4vw, 34px);
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* ---- Radius: 5 steps. ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;
  /* ---- Elevation: 3 levels. More than 3 reads as noise. ---- */
  --elev-1: 0 1px 2px rgb(16 24 40 / .05);
  --elev-2: 0 4px 14px rgb(16 24 40 / .07);
  --elev-3: 0 12px 32px rgb(16 24 40 / .12);
  /* ---- Motion. transform/opacity only — see DESIGN.md §5. ---- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* ---- Touch ---- */
  --tap-min: 44px;
  /* ---- Layout ---- */
  --gutter: clamp(12px, 2vw, 24px);
  --rail-w: 84px; /* desktop left rail width */
  --reveal: 88px;
  --kb: 0px;
  --topbar-height: 50px;
  /* The fixed .modal-topbar used by full-page forms. Content below it must reserve
     this much space — never a hand-written number, which is how NewPost ended up
     reserving 42px for a 50px header and overlapping its first label. */
  --modal-topbar-height: 50px;
  --modal-topbar-offset: calc(var(--modal-topbar-height) + env(safe-area-inset-top, 0px) + var(--space-3));
  --bottomnav-height: 60px;
  --mobile-max: 900px;
  /* ---- Layer 3: legacy aliases. Migrate call-sites, then delete. ---- */
  --bg: var(--surface);
  --blue: var(--accent);
  --bg-selected-light: #DCE7F2;
  --text: var(--gray-800);
  --bottom-nav-text: #1f1f1f;
  --sub-text: var(--text-tertiary);
  --sub-text2: var(--text-secondary); /* was #6C6363, a warm grey among cool ones */
  --muted: var(--text-secondary);
  --ink: var(--text-primary);
  --brand: var(--accent);
  --brand2: #B36BFF;
  --card: var(--surface-raised);
  --border: var(--border-subtle);
  --small-shadow: var(--elev-2);
  --medium-shadow: var(--elev-2);
  --shadow: var(--elev-2);
  --radius: var(--radius-lg);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, #app {
  height: 100%;
  margin: 0;
}

/* ============================================================================
   GLOBAL BEHAVIOUR — applies app-wide, no per-screen opt-in.
   ========================================================================= */
/* Keyboard/switch-control users must always see where they are. Mouse and touch
   users never see this (:focus-visible, not :focus). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Native-app feel in a WebView: no grey flash on tap, no accidental text
   selection on controls, no double-tap zoom lag. */
a, button, [role=button], .navitem, .pill, .tab-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* Interactive feedback. transform/opacity/colour only — never layout. */
a, button, [role=button] {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

/* A tap with no response inside ~100ms reads as a failure.
   .navitem.plus is excluded: its anchor box is only ~60x12 while the visible circle
   overflows far above it, so scaling the anchor moves the circle relative to the bar
   instead of pressing it. BottomNav scales the circle itself instead. */
button:active, [role=button]:active, .navitem:not(.plus):active, .pill:active {
  transform: scale(0.97);
}

button:disabled, [role=button][aria-disabled=true] {
  opacity: 0.55;
  transform: none;
}

/* ---- Screen transitions ------------------------------------------------
   MainLayout swaps a class on the wrapper around @Body on every navigation.
   Alternating -a/-b names is what re-triggers the animation when the user
   navigates twice in the same direction. Only the class attribute changes, so
   Blazor Server patches one attribute rather than re-rendering the subtree.  */
@keyframes screen-fwd-a {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.screen--fwd-a {
  /* `backwards`, NOT `both`. `both` retains the final keyframe forever, and a
     retained transform — even the identity matrix — makes this element a
     stacking context AND the containing block for every position:fixed
     descendant. That traps full-screen sheets (z-index 1000) inside .screen,
     so the fixed .topbar (z-index 10) paints over them and their back button
     becomes unclickable. `backwards` drops the transform once the animation
     ends, restoring normal layering. */
  animation: screen-fwd-a var(--dur-base) var(--ease-out) backwards;
}

@keyframes screen-fwd-b {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.screen--fwd-b {
  /* `backwards`, NOT `both`. `both` retains the final keyframe forever, and a
     retained transform — even the identity matrix — makes this element a
     stacking context AND the containing block for every position:fixed
     descendant. That traps full-screen sheets (z-index 1000) inside .screen,
     so the fixed .topbar (z-index 10) paints over them and their back button
     becomes unclickable. `backwards` drops the transform once the animation
     ends, restoring normal layering. */
  animation: screen-fwd-b var(--dur-base) var(--ease-out) backwards;
}

@keyframes screen-back-a {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.screen--back-a {
  /* `backwards`, NOT `both`. `both` retains the final keyframe forever, and a
     retained transform — even the identity matrix — makes this element a
     stacking context AND the containing block for every position:fixed
     descendant. That traps full-screen sheets (z-index 1000) inside .screen,
     so the fixed .topbar (z-index 10) paints over them and their back button
     becomes unclickable. `backwards` drops the transform once the animation
     ends, restoring normal layering. */
  animation: screen-back-a var(--dur-base) var(--ease-out) backwards;
}

@keyframes screen-back-b {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.screen--back-b {
  /* `backwards`, NOT `both`. `both` retains the final keyframe forever, and a
     retained transform — even the identity matrix — makes this element a
     stacking context AND the containing block for every position:fixed
     descendant. That traps full-screen sheets (z-index 1000) inside .screen,
     so the fixed .topbar (z-index 10) paints over them and their back button
     becomes unclickable. `backwards` drops the transform once the animation
     ends, restoring normal layering. */
  animation: screen-back-b var(--dur-base) var(--ease-out) backwards;
}

.screen {
  display: block;
  /* NOTE: deliberately no overflow/transform/opacity/filter/contain here. Any of
     those would make .screen a containing block for position:fixed descendants,
     which breaks every full-screen sheet, modal and bottom nav rendered inside a
     page. The 14px slide is contained by .page-container's overflow-x instead. */
}

/* Horizontal rails (category chips, filter pills, tab strips) scroll by swipe on
   touch. A visible scrollbar track under them reads as a desktop artifact and
   makes the app feel like a web page. Hide the bar, keep the scrolling. */
.pc-cats, .chips, .chip-row, .filter-row, .rail, .scroll-x {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  overscroll-behavior-x: contain; /* don't chain to page/back-swipe */
}
.pc-cats::-webkit-scrollbar, .chips::-webkit-scrollbar, .chip-row::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .rail::-webkit-scrollbar, .scroll-x::-webkit-scrollbar {
  display: none; /* WebKit + Chromium, incl. both mobile WebViews */
  width: 0;
  height: 0;
}

/* ---- Pinned-header pane -------------------------------------------------
   For any sheet where a search box, filter chips or an action must stay put while a
   long list scrolls. Put .pane on the container and .pane__scroll on the ONE child
   that should scroll; every other child pins and sizes to its content.

   Flex rather than grid so the number of pinned rows doesn't have to be declared —
   NewGroup pins three (name, selected chips, search), the provider picker pins two.

   The container must not scroll itself, or everything moves together. That was the
   original bug on both screens. */
.pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Pinned rows must never be squashed to make room for the scroller — flex items
   default to flex-shrink:1, which silently compresses a search box or chip row and
   clips its content. */
.pane > * {
  flex-shrink: 0;
}

/* A pinned row sits above scrolling content, so it needs an opaque background (or
   clipped rows show through) and a divider marking where the scroll region starts.
   Both are scoped to .pane deliberately: the same chip row used free-standing on a
   page (e.g. the profile Providers tab) must stay transparent and borderless, or the
   background reads as a white band and the border as a stray inset line. */
.pane > .pc-cats,
.pane > .chips,
.pane > .chip-row,
.pane > .filter-row {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 1;
}

.pane__scroll {
  flex: 1 1 auto;
  /* Without min-height:0 a flex item refuses to shrink below its content and the
     scroll never engages — the single most common cause of "overflow:auto does
     nothing" in a flex column. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* don't chain to the sheet behind */
  -webkit-overflow-scrolling: touch;
}

/* Sheets and modals rise rather than slide, so they read as a layer on top. */
@keyframes sheet-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Accessibility: honour the OS "reduce motion" setting. Required on iOS, where
   a meaningful share of users enable it. Must stay last so it wins. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:active, [role=button]:active, .navitem:active, .pill:active {
    transform: none;
  }
}
form {
  margin: 0 auto;
  width: 100%;
}

.hide {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.link {
  margin-top: -4px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

/* ===== Global Style ===== */
.page {
  padding-top: calc(45px + (env(safe-area-inset-top)) * 0.8) !important;
  padding-bottom: calc(50px + (env(safe-area-inset-bottom)) * 0.8) !important;
  background: linear-gradient(#fff, var(--bg-selected-light));
  min-height: 100vh;
}

.hide-top-bar .page {
  padding-top: 0px !important;
}

.hide-bottom-nav .page {
  padding-bottom: 0px !important;
}

.avatar {
  padding: 0px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-profile-initials, .avatar-profile {
  /* 1. Necessary to respect width/height and centering */
  display: flex;
  /* 2. Horizontal centering */
  justify-content: center;
  /* 3. Vertical centering */
  align-items: center;
  /* Existing properties: */
  width: 48px;
  height: 48px;
  border-radius: 999px; /* Makes it a circle */
  /* You may want to set background/text color for visibility */
  background-color: #4bb53f; /* Example background */
  color: white; /* Example text color */
  font-size: 18px; /* Example font size */
  /* Retained original properties: */
  object-fit: cover; /* Not applicable to text, but harmless */
  border: 0px;
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.2588235294);
}

.search-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid #e5e7eb; /* gray-200 */
  padding: 4px 14px;
  font-size: var(--fs-md);
  outline: none;
}

.search-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.icon {
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--accent);
  flex: 1;
  text-align: center;
  border: none;
  background: none;
  padding: 0;
}
.icon path {
  fill: var(--accent);
}
.icon:active {
  transform: scale(0.97);
}

/* Add button */
.add-btn {
  margin: 8px 2px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.add-btn:hover {
  text-decoration: underline;
}
.add-btn .add-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}

.modal-topbar {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  align-items: center;
  gap: 8px;
  /* Height is declared so content below can reserve exactly this much.
     The top inset keeps it clear of the iOS status bar / notch. */
  /* border-box (set globally by the * reset), so this is the total height. */
  min-height: var(--modal-topbar-height);
  padding: 11px 0;
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--medium-shadow);
  z-index: 11;
  background-color: white;
}
.modal-topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.modal-topbar .back {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.hint {
  font-size: var(--fs-md);
  color: #6B7280;
}

/* ===== Main content ===== */
/* Constrain super-wide viewports */
.feed {
  padding: var(--gutter);
  margin: 0 auto;
  max-width: 1200px; /* desktop clamp */
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: clamp(10px, 1.6vw, 18px);
}

/* =========================
Breakpoints
========================= */
/* ≥600px: small tablets — give the feed some columns when space allows */
@media (min-width: 600px) {
  .feed {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
  .postcard {
    padding: 14px;
  }
  .avatar {
    width: 48px;
    height: 48px;
  }
}
/* ===== Bottom Sheet ===== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35); /* slate-900/35 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 60;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  z-index: 61;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: #fff;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.18);
}

.sheet--open .sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.sheet--open .sheet {
  transform: translateY(0);
}

.sheet__grab {
  display: grid;
  place-items: center;
  padding: 8px 0 6px;
}
.sheet__grab::before {
  content: "";
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
}

.sheet__header {
  padding: 6px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
}

.sheet__title {
  font-weight: 700;
  font-size: 16px;
}

.sheet__close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.sheet__body {
  padding: 12px 16px;
  overflow: auto;
  flex: 1; /* scrollable list */
}

.comment {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.comment .avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.comment .bubble {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 10px;
}

.comment .name {
  font-weight: 600;
  font-size: 13px;
}

.comment .time {
  color: #6b7280;
  font-size: 12px;
  margin-left: 6px;
}

.sheet__footer {
  border-top: 1px solid #e5e7eb;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
}

.sheet__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 12px;
}

.sheet__textbox {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
}

.sheet__btn, .sheet__iconbtn {
  border: none;
  cursor: pointer;
  border-radius: 999px;
}

.sheet__iconbtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #eef2ff;
}

.sheet__btn {
  padding: 9px 14px;
  background: #45A9F0;
  color: #fff;
  font-weight: 700;
}

/* --- Tab Slide ---*/
.tab-slide {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
  min-width: 0;
}

/* ensure the sheet never hides the system keyboard area on iOS */
@supports (padding: max(0px)) {
  .sheet__footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}
/* ≥1200px: desktop — comfortable 3-column feed and larger typography */
@media (min-width: 1200px) {
  .feed {
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    max-width: 1200px;
  }
  .topbar-title {
    font-size: clamp(22px, 1.8vw, 28px);
  }
  .postcard {
    padding: 16px;
  }
  .reply {
    padding: 12px 22px;
  }
}
.page-top {
  overflow: auto;
  display: inline-block;
  height: calc(100vh - 55px); /* remove the header height*/
  width: 100%;
}

/*****************************
Form Controls
*****************************/
select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  color: #111;
  font-size: 14px;
  appearance: none; /* hide native arrow */
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.textarea {
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #F3F4F6;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

.primary {
  width: 100%;
  padding: 6px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--accent-solid);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile-friendly tweaks */
@media (max-width: 360px) {
  .primary {
    font-size: 16px;
  }
}
.collapsible {
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Remove default marker, make row clickable */
}
.collapsible .collapsible-summary {
  background: var(--accent-solid);
  color: #fff;
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collapsible .collapsible-summary::-webkit-details-marker {
  display: none;
}
.collapsible .summary-left {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.collapsible .summary-title {
  font-weight: 600;
}
.collapsible .badge {
  font-size: 12px;
  color: var(--muted);
  background: #f3f4f6;
  border-radius: 9999px;
  padding: 2px 8px;
}
.collapsible {
  /* Chevron rotates when opened */
}
.collapsible .chevron {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: #fff;
  transition: transform 0.2s ease;
}
.collapsible {
  /* Content area */
}
.collapsible .collapsible-content {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 12px 14px 16px;
}

.collapsible[open] .chevron {
  transform: rotate(180deg);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% / 50% */
  column-gap: 24px;
  row-gap: 12px;
}
.two-col div {
  width: 100%;
  align-items: center;
  justify-content: space-between; /* label left, switch right */
  gap: 0.75rem;
  cursor: pointer;
}
.two-col div label {
  display: block;
}

/* two columns = each item 50% width */
.toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% / 50% */
  column-gap: 24px;
  row-gap: 12px;
  /* make each toggle fill its grid cell and space label vs switch */
}
.toggle-grid .toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* label left, switch right */
  gap: 0.75rem;
  cursor: pointer;
}
.toggle-grid .toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.toggle-grid .track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 9999px;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-grid .thumb {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}
.toggle-grid .toggle input:checked + .track {
  background: #22c55e;
  border-color: #22c55e;
}
.toggle-grid .toggle input:checked + .track .thumb {
  transform: translateX(18px);
}
.toggle-grid .toggle input:focus-visible + .track {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.toggle-grid .toggle-label {
  user-select: none;
}

.input-label-wrapper {
  position: relative;
  margin: 5px 0;
}
.input-label-wrapper select, .input-label-wrapper input, .input-label-wrapper textarea {
  width: 100%;
  padding: 8px 14px 8px 14px;
  background: transparent;
}
.input-label-wrapper .floating-label {
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 16px;
  color: var(--muted);
  background-color: var(--bg);
  padding: 0 4px;
  pointer-events: none;
  transition: all 0.15s ease;
}
.input-label-wrapper.active .floating-label {
  top: -8px;
  font-size: 12px;
  color: #9FA2B2;
}

.validation-message {
  font-size: 12px;
  color: darkred;
}

/******************************
        Custom Overrides
    **************************/
@media (min-width: 900px) {
  .page-container:not(.hide-bottom-nav) {
    /* leave room for the left rail */
    padding-left: var(--rail-w);
  }
  .page-container:not(.hide-bottom-nav) .topbar {
    padding-left: var(--rail-w);
  }
}

/*# sourceMappingURL=app.css.map */