/*
 * SalvageFlow UI Components
 * -------------------------
 * Semantic component classes built on top of design-system.css tokens.
 * These are plain CSS (no Tailwind @apply) so they can be used outside
 * the Tailwind pipeline and are predictable in specificity.
 *
 * Tailwind utility classes in templates still work alongside these.
 * This file adds: sf-btn-*, sf-card, sf-table, sf-input, sf-badge-*,
 *                 sf-nav-header, sf-logo-mark, sf-mono
 */

/* ── Base page ──────────────────────────────────────────────────────── */

body {
  font-family: var(--sf-font-ui);
  background-color: var(--sf-bg-app);
  color: var(--sf-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ── Monospace: VINs, part numbers, prices, structured values ───────── */

.sf-mono,
.vin,
.part-number,
[data-mono] {
  font-family: var(--sf-font-mono);
  font-size: 0.875em;
  letter-spacing: 0.01em;
}

/* ── Navigation header ──────────────────────────────────────────────── */

.sf-nav-header {
  background: var(--sf-bg-card);
  border-bottom: 1px solid var(--sf-border-subtle);
  height: 56px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
}

.sf-nav-header .sf-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sf-space-lg);
  gap: var(--sf-space-md);
}

.sf-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.sf-logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.sf-logo-wordmark {
  font-family: var(--sf-font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--sf-text-primary);
  white-space: nowrap;
}

.sf-logo-wordmark span {
  color: var(--sf-accent);
}

/* ── Navigation links ───────────────────────────────────────────────── */

.sf-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sf-nav-link {
  padding: 6px 12px;
  border-radius: var(--sf-radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sf-text-muted);
  text-decoration: none;
  transition: background var(--sf-duration-fast) var(--sf-ease),
              color var(--sf-duration-fast) var(--sf-ease);
  white-space: nowrap;
}

.sf-nav-link:hover {
  background: var(--sf-bg-subtle);
  color: var(--sf-text-primary);
}

.sf-nav-link.active {
  background: var(--sf-accent-dim);
  color: var(--sf-accent-active);
}

/* ── Inputs ─────────────────────────────────────────────────────────── */

.sf-input,
.sf-textarea,
.sf-select {
  display: block;
  width: 100%;
  font-family: var(--sf-font-ui);
  font-size: 13.5px;
  color: var(--sf-text-primary);
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border-subtle);
  border-radius: var(--sf-radius);
  padding: 8px 10px;
  line-height: 1.5;
  transition: border-color var(--sf-duration-fast) var(--sf-ease),
              box-shadow var(--sf-duration-fast) var(--sf-ease);
}

.sf-input::placeholder,
.sf-textarea::placeholder {
  color: var(--sf-text-faint);
}

.sf-input:focus,
.sf-textarea:focus,
.sf-select:focus {
  outline: none;
  border-color: var(--sf-accent);
  /* C-13: match the app-wide 3px focus ring (.form-input, .btn-primary). */
  box-shadow: 0 0 0 3px var(--sf-accent-ring);
}

.sf-input:disabled,
.sf-textarea:disabled,
.sf-select:disabled {
  background: var(--sf-bg-subtle);
  color: var(--sf-text-faint);
  cursor: not-allowed;
}

/* Mono input — VINs, part numbers */
.sf-input-mono {
  font-family: var(--sf-font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.sf-textarea {
  resize: vertical;
  min-height: 80px;
}

.sf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: right 9px center;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.sf-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sf-text-primary);
  margin-bottom: 4px;
}

.sf-field-help {
  margin-top: 3px;
  font-size: 12px;
  color: var(--sf-text-muted);
}

.sf-field-error {
  margin-top: 3px;
  font-size: 12px;
  color: var(--sf-danger);
}

/* ── Section label (kept: dashboard uses it) ───────────────────────── */

.sf-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sf-text-muted);
  margin-bottom: var(--sf-space-sm);
}

/* ── Alert / message panels ─────────────────────────────────────────── */

.sf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-sm);
  padding: 12px var(--sf-space-md);
  border-radius: var(--sf-radius-md);
  font-size: 13.5px;
  border: 1px solid transparent;
}

.sf-alert-success { background: var(--sf-success-bg); border-color: var(--sf-success-border); color: #065f46; }
.sf-alert-warning { background: var(--sf-warning-bg); border-color: var(--sf-warning-border); color: #78350f; }
.sf-alert-danger  { background: var(--sf-danger-bg);  border-color: var(--sf-danger-border);  color: #991b1b; }
.sf-alert-info    { background: var(--sf-info-bg);    border-color: var(--sf-info-border);    color: #1e40af; }
.sf-alert-accent  {
  background: var(--sf-accent-dim);
  border-color: rgba(39,224,215,0.28);
  color: var(--sf-accent-active);
}

/* ── Outline danger button ──────────────────────────────────────────── */
/* A destructive SECONDARY: red outline + red text on the card surface,  */
/* filling solid red on hover. More visible than a muted text link,      */
/* lighter than the filled `.btn-danger`. Colors ONLY — compose with     */
/* `.btn` (+ the optional `.btn-sm` size modifier) for layout, exactly   */
/* like `.btn-danger` / `.btn-ghost`. Loaded after app.css so the colors */
/* win. Uses the canonical destructive token `--sf-danger-text` (the ONE */
/* destructive-action red per the design-system contract, C-14) — not a  */
/* raw hex. Shared by the Prospect "Your decision" archive action and    */
/* the Donor workspace archive action so both read identically. */
.btn-outline-danger {
  background: var(--sf-bg-card);
  color: var(--sf-danger-text);
  border: 1px solid var(--sf-danger-text);
}
.btn-outline-danger:hover:not(:disabled) {
  background: var(--sf-danger-text);
  color: #fff;
  border-color: var(--sf-danger-text);
}
/* Keyboard focus: the shared `.btn` rule clears the normal outline, so   */
/* restore a clearly visible, token-based destructive focus ring here     */
/* (do not rely on the generic teal focus rule). */
.btn-outline-danger:focus-visible {
  outline: 2px solid var(--sf-danger-text);
  outline-offset: 2px;
}

/* ── Loading shimmer ────────────────────────────────────────────────── */

@keyframes sf-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.sf-shimmer {
  background: linear-gradient(
    90deg,
    var(--sf-bg-subtle) 25%,
    #ffffff 50%,
    var(--sf-bg-subtle) 75%
  );
  background-size: 800px 100%;
  animation: sf-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--sf-radius);
}

/* ── Dropdown ───────────────────────────────────────────────────────── */

.sf-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border-subtle);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-md);
  padding: 4px;
  z-index: 50;
}

.sf-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--sf-text-primary);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: background var(--sf-duration-fast) var(--sf-ease);
}

.sf-dropdown-item:hover {
  background: var(--sf-bg-subtle);
}

.sf-dropdown-item.active {
  background: var(--sf-accent-dim);
  color: var(--sf-accent-active);
}

/* ── Divider ────────────────────────────────────────────────────────── */

.sf-divider {
  border: none;
  border-top: 1px solid var(--sf-border-subtle);
  margin: var(--sf-space-md) 0;
}

/* ── Focus ring (global) ────────────────────────────────────────────── */

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

/* ── Accessible text link (WCAG AA) ─────────────────────────────────────
 * The brand accent is a light teal: brand-500 (#27E0D7) sits at ~1.3:1 on the
 * light app/card backgrounds and brand-700 (#12A8A1) at ~2.8:1 — BOTH fail the
 * 4.5:1 text minimum. `.sf-link` uses brand-800 (#0d7a75 ≈ 4.86:1 on the app bg
 * #f6f8fa and 5.17:1 on white), underlined by default so a link is never
 * distinguished by colour alone, darkening on hover and keeping a visible
 * keyboard-focus ring. Visited is pinned to the same accessible colour so the
 * browser-default purple can never drop below contrast. Use this for inline /
 * text links instead of raw text-brand-* utilities. */
.sf-link {
  color: #0d7a75;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 2px;
}
.sf-link:hover { color: #0d5c59; }        /* brand-900 — ~7.3:1, still teal */
.sf-link:visited { color: #0d7a75; }
.sf-link:focus-visible {
  outline: 2px solid #0d7a75;             /* ≥3:1 non-text indicator */
  outline-offset: 2px;
}

/* Damage-summary note columns. Tailwind `sm:columns-2` / `break-inside-avoid`
   are NOT emitted into the compiled bundle, so they silently no-op — this
   hand-written rule (served directly via components.css) is the reliable
   equivalent: one column on mobile, two balanced columns from the `sm`
   breakpoint (640px), each note kept whole. Reading order stays top-down
   left-then-right (CSS multi-column), which is correct for a short bullet list. */
.sf-note-cols > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (min-width: 640px) {
  .sf-note-cols { column-count: 2; column-gap: 2rem; }
}

/* =============================================================
 * APP SHELL — Sidebar layout
 * ============================================================= */

/* ── Body / layout frame ─────────────────────────────────────── */
.app-body {
  display: flex;
  min-height: 100vh;
  background: var(--sf-bg-app);
  font-family: var(--sf-font-ui);
  color: var(--sf-text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Single source of truth for the sidebar width (the "width contract").
     The sidebar itself and any fixed element that must start at the sidebar's
     right edge (e.g. the shared bulk-action drawer) read this var, so nothing
     hardcodes a separate offset. Flipped to the collapsed width below when the
     body carries `.sidebar-collapsed` (toggled in lockstep with the sidebar's
     own `.collapsed` class by toggleSidebar() in base.html). */
  --sf-sidebar-w: 224px;
}
.app-body.sidebar-collapsed { --sf-sidebar-w: 56px; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.app-sidebar {
  width: var(--sf-sidebar-w);
  flex-shrink: 0;
  background: #0B1216;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
  transition: width 200ms cubic-bezier(0.16,1,0.3,1);
}

/* ── Collapsed state ─────────────────────────────────────────── */
/* Width comes from --sf-sidebar-w (driven by `.app-body.sidebar-collapsed`);
   the `.collapsed` class on the sidebar only drives the label/icon styling. */
.app-sidebar.collapsed .app-logo-text,
.app-sidebar.collapsed .app-plan-badge,
.app-sidebar.collapsed .app-nav-label,
.app-sidebar.collapsed .app-org-name,
.app-sidebar.collapsed .app-org-caret,
.app-sidebar.collapsed .app-user-name,
.app-sidebar.collapsed .app-nav-divider { display: none; }
.app-sidebar.collapsed .app-sidebar-logo { padding: 18px 0 14px; justify-content: center; }
.app-sidebar.collapsed .app-logo-link { justify-content: center; }
.app-sidebar.collapsed .app-sidebar-plan { display: none; }
.app-sidebar.collapsed .app-sidebar-nav { padding: 10px 4px; }
.app-sidebar.collapsed .app-nav-link { justify-content: center; padding: 9px 0; gap: 0; }
.app-sidebar.collapsed .app-nav-link svg { width: 18px; height: 18px; }
.app-sidebar.collapsed .app-sidebar-footer { padding: 8px 4px 12px; }
.app-sidebar.collapsed .app-org-btn { justify-content: center; padding: 7px 0; }
.app-sidebar.collapsed .app-user-row { justify-content: center; padding: 5px 0; }
.app-sidebar.collapsed .app-logout-btn { display: none; }
.app-sidebar.collapsed .app-collapse-btn svg { transform: rotate(180deg); }

/* ── Collapse toggle button ──────────────────────────────────── */
.app-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 8px 0; margin-top: 2px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.25); transition: color 120ms;
}
.app-collapse-btn:hover { color: rgba(255,255,255,0.55); }
.app-collapse-btn svg { width: 14px; height: 14px; transition: transform 200ms ease; }

/* ── Tour help button ────────────────────────────────────────── */
.app-tour-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.25); transition: color 120ms;
}
.app-tour-btn:hover { color: rgba(255,255,255,0.55); }
.app-tour-btn svg { width: 14px; height: 14px; }

/* ── Mobile hamburger ────────────────────────────────────────── */
.app-mobile-header {
  display: none;
  position: sticky; top: 0; z-index: 45;
  background: #0B1216;
  padding: 10px 16px;
  align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.65);
}
.app-hamburger svg { width: 20px; height: 20px; }
.app-mobile-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.app-mobile-logo-mark { width: 24px; height: 24px; }
.app-mobile-logo-text { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.app-mobile-logo-text span { color: #27E0D7; }
.app-sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39;
}

/* ── Shared bulk-action drawer ───────────────────────────────────
   Fixed to the bottom, covering only `.app-main` — its left edge reads the
   sidebar width contract (--sf-sidebar-w) so it starts at the sidebar's right
   edge and slides with the collapse animation, never covering the nav. Sits at
   z-45: above page content (z ≤ 40) but below the sidebar's mobile fixed layer
   (z-50) and all dialogs/toasts (z ≥ 9999), so a confirm opened from the drawer
   stacks over it. Hidden until JS reveals it (≥1 row selected). */
.bulk-drawer {
  position: fixed;
  bottom: 0;
  left: var(--sf-sidebar-w);
  right: 0;
  z-index: 45;
  background: #fff;
  border-top: 1px solid var(--sf-border, #e2e8f0);
  box-shadow: 0 -4px 16px rgba(2, 6, 23, 0.08);
  transition: left 200ms cubic-bezier(0.16,1,0.3,1);
}
.bulk-drawer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
/* Reserves space so the last row/card is never hidden behind the fixed drawer. */
.bulk-drawer-spacer { height: 64px; }
/* Subtle selected-state background on the row/card the checkbox belongs to. */
.is-bulk-selected { background: var(--sf-brand-50, #eef4ff); }
tr.is-bulk-selected > td { background: var(--sf-brand-50, #eef4ff); }

@media (max-width: 768px) {
  .app-body { flex-direction: column; }
  /* Phones: the drawer spans the full width (sidebar is off-canvas) and drops
     BELOW the mobile-nav dim overlay (z-39) so opening the sidebar covers it;
     the mobile sidebar itself stays at z-50. */
  .bulk-drawer { left: 0; right: 0; z-index: 38; }
  .app-sidebar {
    position: fixed; left: -224px; top: 0; bottom: 0;
    width: 224px !important;
    transition: left 250ms cubic-bezier(0.16,1,0.3,1);
    z-index: 50;
  }
  .app-sidebar.mobile-open { left: 0; }
  .app-sidebar-overlay.visible { display: block; }
  .app-mobile-header { display: flex; }
  .app-collapse-btn { display: none; }
  .app-tour-btn { display: none; }
  .app-content { padding: 20px 16px; }
  .app-banner-inner { padding: 9px 16px; }
  .app-messages { padding: 12px 16px 0; }
}

/* ── Logo ────────────────────────────────────────────────────── */
.app-sidebar-logo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.app-logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-logo-text {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}
.app-logo-text span {
  color: #27E0D7;
}

/* ── Plan badge in sidebar ───────────────────────────────────── */
.app-sidebar-plan {
  padding: 10px 16px 4px;
}
.app-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
}
.app-plan-beta    { background: rgba(245,158,11,0.15); color: #fbbf24; border-color: rgba(245,158,11,0.25); }
.app-plan-starter { background: rgba(39,224,215,0.10); color: #27E0D7; border-color: rgba(39,224,215,0.20); }
.app-plan-pro     { background: rgba(16,185,129,0.12); color: #34d399; border-color: rgba(16,185,129,0.20); }

/* ── Nav links ───────────────────────────────────────────────── */
.app-sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.48);
  text-decoration: none;
  transition: color 120ms, background 120ms;
  white-space: nowrap;
}
.app-nav-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.app-nav-link:hover {
  color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.06);
}
.app-nav-link.active {
  color: #27E0D7;
  background: rgba(39,224,215,0.08);
}
.app-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 10px;
}

/* Unread count pill on the "Messages" sidebar link. */
.app-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #27E0D7;
  color: #0B1216;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}
/* Collapsed sidebar shows icons only — hide the numeric label. */
.app-sidebar.collapsed .app-nav-badge { display: none; }

/* Unread count pill on a conversation row in the DM inbox (light content area). */
.dm-unread-pill {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--sf-action);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ── Sidebar footer ──────────────────────────────────────────── */
.app-sidebar-footer {
  padding: 8px 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Org switcher ────────────────────────────────────────────── */
.app-org-switcher { position: relative; }
.app-org-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.60);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  transition: background 120ms, color 120ms;
}
.app-org-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.app-org-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #27E0D7;
  flex-shrink: 0;
}
.app-org-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-org-caret {
  width: 12px; height: 12px;
  flex-shrink: 0;
  opacity: 0.40;
}
.app-org-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0; right: 0;
  background: #1a2430;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.40);
  z-index: 50;
}
.app-org-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  font-size: 0.8125rem;
  text-align: left;
  transition: background 100ms;
}
.app-org-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.90); }
.app-org-item.active { color: #27E0D7; }
.app-org-role { font-size: 0.6875rem; color: rgba(255,255,255,0.30); }

/* ── User row ────────────────────────────────────────────────── */
.app-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}
.app-user-avatar {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(39,224,215,0.15);
  color: #27E0D7;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-user-name {
  flex: 1;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Community forum: author identity avatar (light content area) ── */
.forum-avatar {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: rgba(39, 224, 215, 0.16);
  color: #0B6E68;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
}
.forum-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-avatar--muted { background: #e2e8f0; color: #64748b; }

.app-logout-btn {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.25);
  transition: color 120ms;
  flex-shrink: 0;
}
.app-logout-btn svg { width: 13px; height: 13px; }
.app-logout-btn:hover { color: rgba(255,255,255,0.65); }

/* ── Main area ───────────────────────────────────────────────── */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-content {
  flex: 1;
  padding: 32px 36px;
}

/* ── Banners ─────────────────────────────────────────────────── */
.app-banner {
  border-bottom: 1px solid transparent;
}
.app-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 36px;
  font-size: 0.8125rem;
  text-decoration: none;
}
.app-banner-onboarding {
  background: linear-gradient(90deg, #f0fdfa, #ecfdf5);
  border-bottom-color: var(--sf-accent-ring);
}
.app-banner-onboarding .app-banner-inner { color: #134e4a; }
.app-banner-onboarding .app-banner-sub { color: #5f9ea0; }
.app-banner-ai {
  background: rgba(39,224,215,0.06);
  border-bottom-color: rgba(39,224,215,0.15);
}
.app-banner-ai .app-banner-inner { color: var(--sf-text-muted); }
.app-banner-icon { flex-shrink: 0; display: flex; align-items: center; }
.app-banner-icon svg { width: 16px; height: 16px; }
.app-banner-sub  { color: var(--sf-text-faint); }
.app-banner-cta  {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--sf-accent-active);
  padding: 4px 12px;
  border-radius: var(--sf-radius);
  white-space: nowrap;
  text-decoration: none;
  transition: background 120ms;
}
.app-banner-cta:hover { background: var(--sf-accent-hover); }
.app-banner-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--sf-text-faint); font-size: 0.75rem;
  padding: 2px 4px; line-height: 1;
  transition: color 120ms;
}
.app-banner-dismiss:hover { color: var(--sf-text-muted); }

/* ── Messages ────────────────────────────────────────────────── */
.app-messages {
  padding: 12px 36px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: var(--sf-radius);
  border: 1px solid transparent;
  font-size: 0.875rem;
  gap: 12px;
}
.app-message-success { background: var(--sf-success-bg); border-color: var(--sf-success-border); color: #065f46; }
.app-message-error   { background: var(--sf-danger-bg);  border-color: var(--sf-danger-border);  color: #991b1b; }
.app-message-info    { background: var(--sf-info-bg);    border-color: var(--sf-info-border);    color: #1e40af; }
.app-message-close {
  background: none; border: none; cursor: pointer;
  color: currentColor; opacity: 0.45; font-size: 0.75rem;
  flex-shrink: 0; line-height: 1; padding: 2px;
  /* WCAG 2.5.8 target size (quality sweep W-4): the glyph stays small,
     the hit area does not. */
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 120ms;
}
.app-message-close:hover { opacity: 0.85; }


/* ============================================================
 * Perceived-speed: HTMX loading indicators + skeletons
 * ------------------------------------------------------------
 * Goal: a tab/view click must visibly react immediately. HTMX
 * adds `.htmx-request` to the element that initiated a request
 * (and, with hx-indicator, to the indicator target) for the
 * duration of the request. We use that to: reveal a skeleton
 * overlay, dim the stale content, and suppress repeat clicks.
 * No JS framework; pure CSS driven by HTMX state classes.
 * ============================================================ */

/* Indicator elements are hidden by default and revealed only
 * while an associated request is in flight. HTMX toggles
 * `.htmx-request` on the element referenced by hx-indicator. */
.sf-indicator { opacity: 0; transition: opacity 120ms ease; pointer-events: none; }
.htmx-request.sf-indicator,
.htmx-request .sf-indicator { opacity: 1; }

/* A panel that should dim + go busy while its swap is in flight.
 * Put `.sf-swap-target` on the swap container; when it (or an
 * element it contains) is in an HTMX request, the stale content
 * fades and the overlay skeleton shows. */
.sf-swap-target { position: relative; }
.sf-swap-target.htmx-request > .sf-swap-content,
.htmx-request > .sf-swap-content {
  opacity: 0.4;
  transition: opacity 140ms ease;
  pointer-events: none;
}

/* Overlay skeleton — absolutely positioned over the swap target,
 * shown only during the request. Lives inside the swap container
 * as a sibling of `.sf-swap-content`. */
.sf-skeleton-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: none;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: inherit;
}
.htmx-request > .sf-skeleton-overlay,
.sf-swap-target.htmx-request > .sf-skeleton-overlay { display: block; }

/* Skeleton lines / blocks with a left-to-right shimmer. */
.sf-skel {
  background: linear-gradient(
    90deg,
    var(--sf-bg-subtle, #f0f3f6) 25%,
    var(--sf-border-subtle, #e3e8ec) 37%,
    var(--sf-bg-subtle, #f0f3f6) 63%
  );
  background-size: 400% 100%;
  animation: sf-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.sf-skel-line { height: 0.85rem; margin-bottom: 0.6rem; width: 100%; }
.sf-skel-line.sf-skel-half { width: 50%; }
.sf-skel-line.sf-skel-2-3 { width: 66%; }
.sf-skel-line.sf-skel-3-4 { width: 75%; }
.sf-skel-row { height: 2.5rem; margin-bottom: 0.5rem; border-radius: 8px; }

@keyframes sf-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Reduced-motion: drop the shimmer animation, keep a static tint. */
@media (prefers-reduced-motion: reduce) {
  .sf-skel { animation: none; }
}

/* Inline spinner (e.g. next to a tab label or in a chip). */
.sf-spinner {
  display: inline-block; width: 0.85rem; height: 0.85rem;
  border: 2px solid var(--sf-border-medium, #cbd2d9);
  border-top-color: var(--sf-accent-active, #12a8a1);
  border-radius: 50%;
  animation: sf-spin 0.6s linear infinite;
  vertical-align: -2px;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sf-spinner { animation-duration: 1.4s; }
}

/* Suppress repeat clicks on the in-flight initiator (tab/chip/
 * view pill) and show it as busy. Applies to links/buttons that
 * triggered an HTMX request. */
a.htmx-request[hx-get],
button.htmx-request[hx-get],
a.htmx-request[hx-post],
button.htmx-request[hx-post] {
  pointer-events: none;
  cursor: progress;
  opacity: 0.7;
}

/* Optimistic active state applied client-side the instant a tab/
 * pill is clicked, before the swap lands. Mirrors the server-
 * rendered active styles closely enough to feel instant; the
 * real active state arrives with the swap. */
.sf-tab-pending {
  color: var(--sf-accent-active, #12a8a1) !important;
  border-color: var(--sf-accent-active, #12a8a1) !important;
}

/* Segmented pill (board view switcher) optimistic active look. */
.sf-pill-pending {
  background: #fff !important;
  color: var(--sf-text-primary, #0b1216) !important;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px 0 rgba(11,18,22,0.06)) !important;
}

/* ============================================================================
 * Review Price modal  (.rm)  — row-level pricing decision tool
 * ----------------------------------------------------------------------------
 * Self-contained, namespaced component. Design tokens are SCOPED to .rm so they
 * never leak into the rest of the app; values mirror the Price Modal design
 * packet exactly (teal #0d9488, AI violet, slate neutrals). Plain CSS so it
 * works without the Tailwind build; single-class selectors (low specificity),
 * no !important, base + modifier classes (DRY), accessible focus + reduced
 * motion. Layout utilities (flex/gap/margins) stay as Tailwind in the template;
 * everything VISUAL (color, type, radius, padding, borders) lives here.
 * ========================================================================== */
.rm {
  /* neutrals (slate) */
  --rm-ink:#0f172a; --rm-body:#475569; --rm-muted:#4e5d6d; --rm-faint:#5f6e80;
  /* WCAG AA: muted/faint darkened (were #64748b / #94a3b8 — faint sat at
     ~2.5:1 on the pale card, failing even large-text AA; it colors the
     SRS helper notes, 'Not priced yet', and the strip labels). Hierarchy
     is carried by size/weight/casing, not unreadable color. Decorative
     marks may use --rm-decor; never body/helper text. */
  --rm-decor:#94a3b8;
  --rm-line:#eef0f2; --rm-line-card:#e6e8eb; --rm-surface:#fafbfc;
  --rm-chip:#f1f5f9; --rm-chip-hover:#e2e8f0; --rm-outline:#cbd5e1;
  /* teal (primary / trusted) */
  --rm-teal:#0d9488; --rm-teal-press:#0c857a; --rm-teal-ink:#0f766e;
  --rm-teal-card:#f1faf8; --rm-teal-border:#c4ece5;
  /* violet (AI) */
  --rm-violet:#7c3aed; --rm-violet-700:#6d28d9; --rm-violet-900:#5b21b6;
  --rm-violet-soft:#8b5cf6; --rm-violet-chip:#ede9fe; --rm-violet-border:#e0dbff;
  --rm-ai-grad:linear-gradient(180deg,#f6f4ff,#fbfaff);
  /* status */
  --rm-amber-chip:#fef3c7; --rm-amber-ink:#b45309;
  --rm-danger:var(--sf-danger-text); --rm-danger-border:var(--sf-danger-border);
  --rm-fit-bg:#dcfce7; --rm-fit-ink:#166534;
  /* radii */
  --rm-r-modal:16px; --rm-r-card:14px; --rm-r-row:12px; --rm-r-soft:11px;
  --rm-r-btn:9px; --rm-r-chip:6px; --rm-r-tag:7px;

  position:relative; width:min(640px,100%); background:#fff;
  border-radius:var(--rm-r-modal); box-shadow:0 24px 64px rgba(15,23,42,.28);
  font-family:var(--sf-font-ui,"Inter",system-ui,sans-serif);
  color:var(--rm-ink); font-size:14px; line-height:1.5;
  max-height:90vh; overflow-y:auto; padding:0;
}
.rm *{box-sizing:border-box;}

/* ── shared type ─────────────────────────────────────────────────────────── */
.rm-eyebrow{font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rm-faint);}
.rm-pad{padding-inline:28px;}

/* ── header ──────────────────────────────────────────────────────────────── */
.rm-header{padding:24px 28px 0;}
.rm-title{font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--rm-ink);
  overflow-wrap:anywhere;}
.rm-pill{display:inline-flex; align-items:center; padding:3px 10px;
  background:var(--rm-chip); border-radius:var(--rm-r-chip);
  font-size:12px; font-weight:500; color:var(--rm-body);}
.rm-close{position:absolute; top:20px; right:22px; width:30px; height:30px;
  border:none; background:var(--rm-chip); border-radius:8px; color:var(--rm-muted);
  display:grid; place-items:center; cursor:pointer; line-height:1;
  transition:background-color .15s ease, color .15s ease;}
.rm-close:hover{background:var(--rm-chip-hover); color:var(--rm-ink);}
.rm-purpose{padding:8px 28px 0; font-size:12.5px; color:var(--rm-muted); line-height:1.6;}

/* ── status strip ────────────────────────────────────────────────────────── */
.rm-strip{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:18px; padding:18px 28px 20px;
  border-top:1px solid var(--rm-line); border-bottom:1px solid var(--rm-line);}
.rm-strip-label{font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rm-faint);}
.rm-price{font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:4px;
  color:var(--rm-ink);}
.rm-price--empty{color:var(--rm-faint);}
.rm-counted{font-size:12.5px; font-weight:600; color:var(--rm-faint);}
.rm-counted--yes{color:var(--rm-teal);}

/* ── decision area + cards ───────────────────────────────────────────────── */
.rm-decision{padding:22px 28px 4px;}
/* Gated states (SRS/damage/needs-confirmation/excluded) hide the drawer +
 * supporting sections, so the decision area ends the card — give it real
 * bottom breathing room (the template emits .rm-endpad only then). */
.rm-endpad{height:24px;}
.rm-card{border:1px solid var(--rm-line-card); border-radius:var(--rm-r-card);
  padding:22px; background:var(--rm-surface);}
.rm-card--ai{border-color:var(--rm-violet-border); background:var(--rm-ai-grad);}
.rm-card--trusted{border-color:var(--rm-teal-border); background:var(--rm-teal-card);
  padding:20px 22px;}
.rm-kicker{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rm-muted); display:flex; align-items:center; gap:7px;}
.rm-kicker--ai{color:var(--rm-violet-700);}
.rm-hd{font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--rm-ink);}
.rm-hd--sm{font-size:16px;}
.rm-text{font-size:14px; line-height:1.6; color:var(--rm-body);}
.rm-text strong{font-weight:700; color:var(--rm-ink);}
.rm-note{font-size:12.5px; color:var(--rm-faint);}
.rm-advisory{font-size:12.5px; font-weight:500; color:var(--rm-violet-700);}

/* ── badges & tags ───────────────────────────────────────────────────────── */
.rm-badge{display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:var(--rm-r-chip); font-size:12px; font-weight:600;}
.rm-badge--high{background:#ccfbf1; color:var(--rm-teal-ink);}
.rm-badge--medium,.rm-badge--neutral{background:#e2e8f0; color:#475569;}
.rm-badge--low{background:#fef9c3; color:#a16207;}
.rm-badge--ai{background:var(--rm-violet-chip); color:var(--rm-violet-700);}
.rm-badge--optional{background:var(--rm-amber-chip); color:var(--rm-amber-ink);
  font-size:11.5px; padding:2px 9px;}
/* Damage / SRS hero status badges — were inline styles in the modal template;
   one class each so every gated state reads from the same palette. */
.rm-badge--danger{background:#fee2e2; color:#991b1b;}
.rm-badge--warn{background:#fffbeb; color:#92400e;}
.rm-badge--indigo{background:#eef2ff; color:#3730a3;}
.rm-tag{display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--rm-r-tag);
  font-size:12px; font-weight:500; background:var(--rm-violet-chip); color:var(--rm-violet-700);}
.rm-tag--amber{background:var(--rm-amber-chip); color:var(--rm-amber-ink);}

/* ── buttons (base + modifiers) ──────────────────────────────────────────── */
.rm-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--rm-r-btn);
  padding:11px 20px; font-family:inherit; font-size:14px; font-weight:600;
  line-height:1; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;}
.rm-btn:focus-visible{outline:2px solid var(--rm-teal); outline-offset:2px;}
.rm-btn--primary{background:var(--rm-teal); color:#fff;}
.rm-btn--primary:hover{background:var(--rm-teal-press);}
.rm-btn--lg{padding:12px 24px; font-size:15px; font-weight:700;}
.rm-btn--secondary{background:#fff; color:var(--rm-ink); border-color:var(--rm-outline);}
.rm-btn--secondary:hover{background:#f8fafc;}
.rm-btn--tertiary{background:none; border:none; color:var(--rm-muted); font-weight:500; padding:11px 8px;}
.rm-btn--tertiary:hover{color:var(--rm-ink);}
.rm-btn--ai{background:#fff; color:var(--rm-violet-700); border-color:#ddd6fe;}
.rm-btn--ai:hover{background:#faf8ff;}
.rm-btn--violet{background:var(--rm-violet); color:#fff;}
.rm-btn--violet:hover{background:var(--rm-violet-700);}
.rm-btn--dark{background:var(--rm-ink); color:#fff;}
.rm-btn--dark:hover{background:#1e293b;}
.rm-btn--danger{background:#fff; color:var(--rm-danger); border-color:var(--rm-danger-border);}
.rm-btn--danger:hover{background:#fff5f5;}
.rm-btn--block{width:100%;}

/* ── AI research: price, spinner, shimmer ────────────────────────────────── */
.rm-ai-price{font-size:42px; font-weight:800; letter-spacing:-.02em; color:var(--rm-violet-900);}
.rm-ai-range{font-size:14px; font-weight:500; color:var(--rm-violet);}
.rm-spinner{width:26px; height:26px; flex:none; border-radius:50%;
  border:3px solid #ddd6fe; border-top-color:var(--rm-violet);
  animation:rm-spin .8s linear infinite;}
.rm-shimmer{height:11px; border-radius:6px; background:#ece8fb;
  animation:rm-shimmer 1.4s ease-in-out infinite;}
@keyframes rm-spin{to{transform:rotate(360deg);}}
@keyframes rm-shimmer{0%,100%{opacity:.5} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rm-spinner,.rm-shimmer{animation:none;}
}

/* ── AI price review: current → suggested compare ────────────────────────── */
.rm-compare{display:flex; align-items:center; gap:16px;}
.rm-compare-cap{font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rm-faint);}
.rm-compare-cap--ai{color:var(--rm-violet-700);}
.rm-compare-old{font-size:22px; font-weight:700; color:var(--rm-faint);
  text-decoration:line-through; margin-top:2px;}
.rm-compare-new{font-size:28px; font-weight:800; color:var(--rm-violet-900); margin-top:2px;}
.rm-arrow{font-size:18px; color:#a78bfa;}

/* ── blocked (out of credits) notice ─────────────────────────────────────── */
.rm-alert{display:flex; align-items:flex-start; gap:11px; padding:14px 16px;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--rm-r-soft);}
.rm-alert-dot{flex:none; width:8px; height:8px; border-radius:50%; background:#ea580c; margin-top:6px;}
.rm-alert-title{font-size:13.5px; font-weight:600; color:#9a3412;}
.rm-alert-body{font-size:13px; color:#9a3412; opacity:.85; margin-top:3px;}

/* ── no-trusted-price option rows ────────────────────────────────────────── */
.rm-option{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 18px; border:1px solid var(--rm-line-card); border-radius:var(--rm-r-row);
  background:#fff; cursor:pointer; transition:border-color .15s ease, background-color .15s ease;}
.rm-option:hover{border-color:var(--rm-outline);}
.rm-option--ai{border-color:var(--rm-violet-border); background:var(--rm-ai-grad);}
.rm-option--ai:hover{border-color:#c9bdfb;}
.rm-option-main{flex:1; min-width:0;}
.rm-option-title{font-size:14.5px; font-weight:700; color:var(--rm-ink);}
.rm-option-title--ai{color:var(--rm-violet-900);}
.rm-option-sub{font-size:13px; color:var(--rm-muted); margin-top:3px;}
.rm-option-sub--ai{color:var(--rm-violet-700); opacity:.8;}

/* ── trusted check ───────────────────────────────────────────────────────── */
.rm-check{width:20px; height:20px; flex:none; border-radius:50%; background:var(--rm-teal);
  color:#fff; display:grid; place-items:center; font-size:12px;}

/* ── find-better-comps preview + listings ────────────────────────────────── */
.rm-input{flex:1; min-width:0; padding:11px 14px; border:1px solid var(--rm-outline);
  border-radius:var(--rm-r-btn); font-family:inherit; font-size:14px; color:var(--rm-ink); outline:none;}
.rm-input:focus-visible{outline:2px solid var(--rm-teal); outline-offset:1px;}
.rm-preview{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:var(--rm-r-soft);}
.rm-preview-label{font-size:13.5px; color:#3730a3;}
.rm-preview-price{font-size:22px; font-weight:800; color:#3730a3;}
.rm-listing{display:flex; gap:12px; align-items:center; padding:11px;
  border:1px solid var(--rm-line-card); border-radius:var(--rm-r-soft);}
.rm-thumb{width:54px; height:54px; flex:none; border-radius:8px;
  background:repeating-linear-gradient(45deg,#eef0f2,#eef0f2 6px,#e2e6ea 6px,#e2e6ea 12px);}
.rm-thumb--sm{width:50px; height:50px;}
.rm-listing-title{font-size:13.5px; font-weight:600; line-height:1.4; color:var(--rm-teal);}
.rm-fit{display:inline-block; margin-top:5px; padding:1px 8px; border-radius:5px;
  font-size:10.5px; font-weight:600; background:var(--rm-fit-bg); color:var(--rm-fit-ink);}
.rm-listing-price{flex:none; font-size:15px; font-weight:700; color:var(--rm-ink);}

/* ── collapsible drawers (More options / Supporting details) ─────────────── */
.rm-drawer{padding:8px 28px 4px;}
.rm-supporting{padding:14px 28px 24px; background:var(--rm-surface);
  border-top:1px solid var(--rm-line);}
.rm-summary{display:flex; align-items:center; gap:8px; padding:13px 0;
  border-top:1px solid var(--rm-line); font-size:13.5px; font-weight:600;
  color:var(--rm-body); cursor:pointer; list-style:none;}
.rm-summary::-webkit-details-marker{display:none;}
.rm-summary:focus-visible{outline:2px solid var(--rm-teal); outline-offset:2px; border-radius:4px;}
.rm-summary--ctx{color:#334155;}
.rm-chev{display:inline-block; flex:none; color:var(--rm-faint); transition:transform .15s ease;}
details[open] > .rm-summary .rm-chev{transform:rotate(90deg);}
.rm-drawer-body{padding:0 0 16px 22px;}
.rm-help{font-size:13px; color:var(--rm-muted);}

/* original-search key/value list */
.rm-kv{display:flex; justify-content:space-between; gap:16px; max-width:380px;
  font-size:13px; color:var(--rm-muted); line-height:1.9;}
.rm-kv-val{color:#334155; font-weight:500;}
.rm-mono{font-family:var(--sf-font-mono,"JetBrains Mono",monospace); font-size:11.5px;}

/* ── manual price + leave-out fields ─────────────────────────────────────── */
.rm-field{display:flex; gap:9px;}
.rm-money{display:flex; align-items:center; flex:1; min-width:0; overflow:hidden;
  border:1px solid var(--rm-outline); border-radius:var(--rm-r-btn);}
.rm-money:focus-within{outline:2px solid var(--rm-teal); outline-offset:1px;}
.rm-money-prefix{align-self:stretch; display:grid; place-items:center; padding:0 12px;
  background:#f8fafc; color:var(--rm-faint); font-size:15px;}
.rm-money input{flex:1; min-width:0; border:none; padding:11px 12px; font-family:inherit;
  font-size:15px; outline:none; color:var(--rm-ink);}
.rm-select{flex:1; min-width:0; padding:11px 12px; border:1px solid var(--rm-outline);
  border-radius:var(--rm-r-btn); font-family:inherit; font-size:14px; background:#fff; color:var(--rm-ink);}

/* quiet inline notices (review message / errors) */
.rm-msg{font-size:13px; line-height:1.5; padding:10px 14px; border-radius:var(--rm-r-soft);}
.rm-msg--warn{background:#fffbeb; color:#92400e;}
.rm-msg--quiet{background:var(--rm-surface); color:var(--rm-muted);}
.rm-msg--error{background:var(--sf-danger-bg); color:var(--sf-danger-text);}

/* ── overlay + mobile bottom-sheet ───────────────────────────────────────────
 * Desktop: centered dialog. Mobile (≤640px): a bottom sheet anchored to the
 * bottom with a drag-handle pill, top-rounded corners, its own scroll, and 44px
 * minimum hit targets — per the design packet's mobile notes. {% endcomment %}
 */
/* z-index 10000: the review modal opens OVER the canonical drawer
 * (drawer shell = inline z-index:9999, a production hotfix) from the
 * drawer's own "Review / edit comps" — at z-index:50 the drawer painted
 * over the modal wherever they overlapped and the backdrop never dimmed
 * it (behavioral proof: tests/e2e/test_drawer_modal_stacking.py). The
 * photo lightbox is INSIDE this element, so its z-[60] stays a LOCAL
 * stacking level above the card — nesting from #1135 is unaffected. */
.rm-overlay{position:fixed; inset:0; z-index:10000; display:flex;
  align-items:center; justify-content:center; padding:16px;}
.rm-grip{display:none;}
/* The card is its own scroll container; keep its scroll from chaining into the
 * page behind (iOS Safari rubber-banding scrolls the document otherwise). */
.rm{overscroll-behavior:contain;}
/* Sticky mobile close bar — hidden on desktop (the corner X is always visible
 * in a centered dialog there). See the mobile block for the sticky treatment. */
.rm-mclose{display:none;}
@media (max-width:640px){
  .rm-overlay{align-items:flex-end; padding:0;}
  .rm{width:100%; max-width:100%; max-height:92vh; border-radius:22px 22px 0 0;}
  .rm-grip{display:block; width:38px; height:4px; border-radius:2px;
    background:#e2e8f0; margin:9px auto 2px;}
  .rm-header{padding-top:8px;}
  .rm-btn{min-height:44px;}
  /* The corner X is absolutely positioned INSIDE the scrolling card, so it
   * scrolls out of view — and reaching back up for it fights iPhone Safari's
   * expanding URL bar (reported: the browser chrome covers the X). Give it a
   * full 44px tap target and safe-area clearance for the sheet's top edge... */
  .rm-close{width:44px; height:44px; top:calc(10px + env(safe-area-inset-top));
    right:12px; z-index:6;}
  /* ...and make the BOTTOM bar the primary close path: sticky inside the
   * card's scrollport (always visible while the content scrolls), thumb-zone
   * placed, 48px target, padded past the home-indicator safe area. The bottom
   * edge never collides with browser chrome, unlike the top. */
  .rm-mclose{display:block; position:sticky; bottom:0; z-index:6;
    margin-top:16px; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, #fff 72%, rgba(255,255,255,0));}
  .rm-mclose .rm-btn{width:100%; min-height:48px;}
  /* roomy thumb zone: stack the row actions full-width */
  .rm-stack-mobile{flex-direction:column; align-items:stretch;}
  .rm-stack-mobile > form,.rm-stack-mobile > .rm-btn{width:100%;}
  .rm-stack-mobile > form > .rm-btn{width:100%;}
  /* Action-option cards (Needs-pricing hero) join the same stacked language:
   * text on top, full-width button below — matching every other hero's
   * mobile action row instead of squeezing text + button side-by-side. */
  .rm-option{flex-direction:column; align-items:stretch; gap:10px;}
  .rm-option .rm-btn{width:100%;}
}

/* ── Org Settings → Profile: two-column layout + upload tiles ──────── */
.org-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 20px;
  align-items: start;
  max-width: 920px;
}
@media (max-width: 860px) {
  .org-profile-grid { grid-template-columns: 1fr; }
}
.org-upload-rail { display: flex; flex-direction: column; gap: 16px; }
.org-upload-tile {
  background: var(--sf-bg-card, #ffffff);
  border: 1px solid var(--sf-border-subtle, #e2e8f0);
  border-radius: var(--sf-radius-lg, 10px);
  padding: 16px;
}
.org-upload-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-text-primary, #1e293b);
  margin-bottom: 12px;
}
.org-upload-body { display: flex; align-items: center; gap: 14px; }
.org-upload-preview {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--sf-bg-subtle, #f1f5f9);
  border: 1px solid var(--sf-border-subtle, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.org-upload-preview.is-round { border-radius: 9999px; }
.org-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.org-upload-preview .ph-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sf-text-faint, #94a3b8);
}
.org-upload-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.org-upload-tile input[type="file"] { display: none; }
.org-upload-btn {
  display: inline-block;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sf-action);
  background: #ffffff;
  border: 1px solid var(--sf-border-medium, #cbd5e1);
  border-radius: var(--sf-radius, 6px);
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.org-upload-btn:hover { border-color: var(--sf-action); background: #f0fdfa; }
.org-upload-filename {
  font-size: 11.5px;
  color: var(--sf-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.org-upload-hint {
  font-size: 11.5px;
  color: var(--sf-text-faint, #94a3b8);
  margin-top: 10px;
  line-height: 1.45;
}