/**
 * Parlormind Design System v2.1
 * Generated from Figma Variables — source of truth: design_tokens.json
 *
 * v2.1 changes (2026-04-22):
 *   - All color values re-synced from Figma Variables (muted/correct values)
 *   - Neutral ramp renamed from --color-grey-* to --color-surface-*
 *     (--color-grey-* kept as deprecated alias for back-compat)
 *   - System color shades now use 700/800/900 naming (was 500/600/700)
 *     to match brand ramps. Old 500/600/700 kept as deprecated aliases.
 *   - All brand, system, and surface ramps now have true Figma values
 *
 * DO NOT edit individual values. Update design_tokens.json and regenerate.
 */

/* ================================================================
 * FONTS
 * ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Rubik:wght@400;500;700;800&display=swap');

/* ================================================================
 * TOKENS — CSS Custom Properties
 * ================================================================ */
:root {
  /* ---- Primary (Turquoise) ---- */
  --color-primary-50:   #E5FAFB;
  --color-primary-100:  #C0EEF2;
  --color-primary-200:  #97DFE5;
  --color-primary-300:  #6FCFD7;
  --color-primary-main: #45B5BC;
  --color-primary-700:  #318C92;
  --color-primary-800:  #226569;
  --color-primary-900:  #154043;
  --color-primary: var(--color-primary-main);

  /* ---- Secondary (Cream) ---- */
  --color-secondary-50:   #FFFCF5;
  --color-secondary-100:  #FEF9E6;
  --color-secondary-200:  #FDF3D1;
  --color-secondary-300:  #FCECAE;
  --color-secondary-main: #FAF4DF;
  --color-secondary-700:  #D4C08D;
  --color-secondary-800:  #AD9B6C;
  --color-secondary-900:  #857650;
  --color-secondary: var(--color-secondary-main);

  /* ---- Tertiary (Plum) ---- */
  --color-tertiary-50:   #FAEDF3;
  --color-tertiary-100:  #F0D1DF;
  --color-tertiary-200:  #E1AECD;
  --color-tertiary-300:  #D088B8;
  --color-tertiary-main: #592A3F;
  /* Figma plum darks. With the new darker surface ramp (anchor 900 at
     OKLab L≈0.133), each tertiary dark sits above its surface peer. */
  --color-tertiary-700:  #421D2D;   /* OKLab L≈0.289 (above surface-700 0.294 — note: about even, may need tightening) */
  --color-tertiary-800:  #2D121D;   /* OKLab L≈0.227 (above surface-800 0.212) */
  --color-tertiary-900:  #1A0910;   /* OKLab L≈0.170 (above surface-900 0.133) */
  --color-tertiary: var(--color-tertiary-main);

  /* ---- System — Success (Green) ---- */
  --color-success-main: #23A469;
  --color-success-50:   #E5F5EC;
  --color-success-100:  #BCE6CF;
  --color-success-200:  #8BD4B0;
  --color-success-300:  #58C28F;
  --color-success-700:  #197C4F;
  --color-success-800:  #125737;
  --color-success-900:  #0A311F;
  --color-success: var(--color-success-main);

  /* ---- System — Warning (Orange) ---- */
  --color-warning-main: #E07D2C;
  --color-warning-50:   #FDF1E7;
  --color-warning-100:  #F8DAC1;
  --color-warning-200:  #F1BE92;
  --color-warning-300:  #EAA061;
  --color-warning-700:  #B46221;
  --color-warning-800:  #844818;
  --color-warning-900:  #512B0E;
  --color-warning: var(--color-warning-main);

  /* ---- System — Danger (Red) ---- */
  --color-danger-main: #D32B3A;
  --color-danger-50:   #FBEAEB;
  --color-danger-100:  #F4C9CD;
  --color-danger-200:  #ECA2A9;
  --color-danger-300:  #E17782;
  --color-danger-700:  #A11E2A;
  --color-danger-800:  #74151D;
  --color-danger-900:  #460B10;
  --color-danger: var(--color-danger-main);

  /* ---- Surface (neutral ramp — renamed from "grey") ----
     Surface ramp v6 — sourced from Figma node 27-126 (Ty's hand-tuned ramp).
     Even ~0x1A R-channel spacing across 100→800 with intentionally larger
     800→900 jump to give surface-900 floor punch. This is the "flat gradient"
     ramp Ty designed by hand after the algorithmic attempts (linear / hump /
     OKLab-spaced) all read as exponential to his eye.
     Anchors: 50 = #F6F4F5, 900 = #070204 (unchanged from v5). */
  --color-surface-50:  #F6F4F5;   /* anchor top */
  --color-surface-100: #E0D8DC;
  --color-surface-200: #C6BCC1;
  --color-surface-300: #ACA1A6;
  --color-surface-400: #92868C;
  --color-surface-500: #786B71;
  --color-surface-600: #5D5056;
  --color-surface-700: #43363C;
  --color-surface-800: #281B21;
  --color-surface-900: #070204;   /* anchor bottom */

  /* Deprecated aliases (--color-grey-* → use --color-surface-* instead) */
  --color-grey-50:  var(--color-surface-50);
  --color-grey-100: var(--color-surface-100);
  --color-grey-200: var(--color-surface-200);
  --color-grey-300: var(--color-surface-300);
  --color-grey-400: var(--color-surface-400);
  --color-grey-500: var(--color-surface-500);
  --color-grey-600: var(--color-surface-600);
  --color-grey-700: var(--color-surface-700);
  --color-grey-800: var(--color-surface-800);
  --color-grey-900: var(--color-surface-900);

  /* Deprecated aliases for system color shades that used to be 500/600/700 */
  --color-success-500: var(--color-success-700);
  --color-success-600: var(--color-success-800);
  --color-warning-500: var(--color-warning-700);
  --color-warning-600: var(--color-warning-800);
  --color-danger-500:  var(--color-danger-700);
  --color-danger-600:  var(--color-danger-800);

  /* ---- Light — DEPRECATED, use --color-surface-50 directly.
     Kept as alias so existing components don't break. ---- */
  --color-light: var(--color-surface-50);

  /* ---- Semantic Theme Aliases — DARK THEME DEFAULT ----
     Hex comments below reflect the live v6 ramp. */
  --color-bg:               var(--color-surface-900);   /* #070204 — app background */
  --color-bg-surface:       var(--color-surface-800);   /* #281B21 — raised surface */
  --color-bg-surface-hover: var(--color-surface-700);   /* #43363C */
  --color-text:             var(--color-light);         /* #F9F9F9 */
  --color-text-muted:       var(--color-surface-300);   /* #ACA1A6 */
  --color-text-subtle:      var(--color-surface-500);   /* #786B71 */
  --color-border:           var(--color-surface-600);   /* #5D5056 */
  --color-border-subtle:    var(--color-surface-800);   /* #281B21 */

  /* ---- Typography: Families ---- */
  --font-family-heading: 'Rubik', sans-serif;
  --font-family-body:    'Inter', sans-serif;

  /* ---- Typography: Sizes ---- */
  --font-size-h1:     3rem;     /* 48px */
  --font-size-h2:     2.5rem;   /* 40px */
  --font-size-h3:     2rem;     /* 32px */
  --font-size-h4:     1.5rem;   /* 24px */
  --font-size-h5:     1rem;     /* 16px — Rubik Bold, for inline section titles */
  --font-size-body-1: 1rem;
  --font-size-body-2: 0.875rem;
  --font-size-body-3: 0.75rem;

  /* ---- Typography: Weights ---- */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  /* ---- Typography: Line heights ---- */
  --line-height-body:    1.45;
  --line-height-heading: 1.1;

  /* ---- Typography: Letter spacing ---- */
  --letter-spacing-h1: -0.015em;
  --letter-spacing-h2: -0.0125em;
  --letter-spacing-h3: -0.0025em;
  --letter-spacing-h4: -0.0025em;
  --letter-spacing-h5: -0.0025em;

  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;

  /* ---- Border radius ---- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   19px;
  --radius-2xl:  32px;

  /* ---- Elevation / shadows ---- */
  --shadow-xs: 0 0 4px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.15);
  --shadow-md: 1.5px 2px 8px rgba(0, 0, 0, 0.1), -1px 0 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 2.25px 3px 10px rgba(0, 0, 0, 0.1), -2px -1px 12px rgba(0, 0, 0, 0.1);
}

/* ================================================================
 * BASE — Reset + body defaults (dark theme)
 * ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ================================================================
 * TYPOGRAPHY — Utility classes
 * ================================================================ */
.pm-h1, h1.pm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-h1);
  line-height: var(--line-height-heading);
  margin: 0;
}

.pm-h2, h2.pm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-heading);
  margin: 0;
}

.pm-h3, h3.pm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h3);
  line-height: var(--line-height-heading);
  margin: 0;
}

.pm-h4, h4.pm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h4);
  line-height: var(--line-height-heading);
  margin: 0;
}

/* H5 — 16px Rubik Bold. For inline section titles inside cards/modals
   where pm-h4 (24px) is too prominent. Per Figma typography frame. */
.pm-h5, h5.pm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h5);
  line-height: var(--line-height-heading);
  margin: 0;
}

/* Caps variant — uppercase + extra letter-spacing for "PLATFORM STATUS"
   style eyebrow labels. Stacks on top of .pm-h5. */
.pm-h5--caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pm-body-1 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body);
}

.pm-body-2 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body);
}

.pm-body-3 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body);
}

/* ================================================================
 * COMPONENTS
 * Button, Badge, Input, Tooltip, Card, Modal, Date Picker
 * These sections reference the tokens above. If a component value
 * looks wrong, fix the token — not the component.
 * ================================================================ */
/* ================================================================
 * BUTTONS — .pm-btn
 * 3 types (primary / secondary / tertiary) × 5 states × 4 icon configs
 * ================================================================ */

/* ---- Base ---- */
.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Icon configurations ---- */
.pm-btn--icon-leading,
.pm-btn--icon-trailing {
  gap: 8px;
}

.pm-btn--icon-only {
  width: 42px;
  padding: 10px;
}

.pm-btn svg,
.pm-btn img.pm-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---- Type: Primary ---- */
.pm-btn--primary {
  background: var(--color-primary-300);
  color: var(--color-primary-900);
}

.pm-btn--primary:hover {
  background: var(--color-primary-700);
  color: var(--color-primary-900);
}

.pm-btn--primary:active {
  background: var(--color-primary-800);
  color: var(--color-primary-50);
}

.pm-btn--primary:focus-visible {
  background: var(--color-primary-300);
  color: var(--color-primary-900);
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}

.pm-btn--primary[disabled],
.pm-btn--primary[aria-disabled="true"] {
  background: var(--color-grey-200);
  color: var(--color-grey-500);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Type: Secondary (outlined) ---- */
.pm-btn--secondary {
  background: transparent;
  color: var(--color-primary-300);
  border: 1px solid var(--color-primary-300);
}

.pm-btn--secondary:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

.pm-btn--secondary:active {
  background: var(--color-primary-900);
  color: var(--color-primary-300);
  border-color: var(--color-primary-300);
}

.pm-btn--secondary:focus-visible {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}

.pm-btn--secondary[disabled],
.pm-btn--secondary[aria-disabled="true"] {
  background: transparent;
  color: var(--color-grey-500);
  border-color: var(--color-grey-500);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Type: Tertiary (subtle, fills only on hover/pressed) ---- */
.pm-btn--tertiary {
  background: transparent;
  color: var(--color-primary-300);
}

.pm-btn--tertiary:hover,
.pm-btn--tertiary[data-state="hover"] {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.pm-btn--tertiary:active,
.pm-btn--tertiary[data-state="pressed"] {
  background: var(--color-primary-200);
  color: var(--color-primary-50);
}

.pm-btn--tertiary:focus-visible,
.pm-btn--tertiary[data-state="focus"] {
  background: transparent;
  color: var(--color-primary-300);
  outline: 1px solid var(--color-primary-300);
  outline-offset: 2px;
}

.pm-btn--tertiary[disabled],
.pm-btn--tertiary[aria-disabled="true"] {
  background: transparent;
  color: var(--color-surface-500);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Type: Danger ---- */
.pm-btn--danger {
  background: var(--color-danger-main);
  color: var(--color-light);
}
.pm-btn--danger:hover {
  opacity: 0.88;
}

/* ---- Size: Small ---- */
.pm-btn--sm {
  height: 34px;
  padding: 8px 12px;
  font-size: var(--font-size-body-2);
}

/* ---- Size: Large ---- */
.pm-btn--lg {
  height: 48px;
  padding: 14px 24px;
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-bold);
}

/* ---- Width: Full ---- */
.pm-btn--full {
  width: 100%;
}

/* ================================================================
 * BADGES — .pm-badge
 * 6 colors × Fill/Outline × 5 content configs
 * ================================================================ */

/* Base */
.pm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-xl);
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.pm-badge svg,
.pm-badge img,
.pm-badge .pm-badge__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Content: icon-only — square pill */
.pm-badge--icon-only {
  padding: 10px;
  gap: 0;
}

/* Content: number — tight pill */
.pm-badge--number {
  padding: 10px 14px;
  min-width: 38px;
}

/* ---- Fill variants (default) ---- */

/* Primary — Fill */
.pm-badge--primary,
.pm-badge--primary.pm-badge--fill {
  background: var(--color-primary-300);
  color: var(--color-primary-900);
}

/* Secondary — Fill */
.pm-badge--secondary,
.pm-badge--secondary.pm-badge--fill {
  background: var(--color-secondary-main);
  color: var(--color-secondary-900);
}

/* Tertiary — Fill */
.pm-badge--tertiary,
.pm-badge--tertiary.pm-badge--fill {
  background: var(--color-tertiary-main);
  color: var(--color-tertiary-200);
}

/* Success — Fill */
.pm-badge--success,
.pm-badge--success.pm-badge--fill {
  background: var(--color-success-main);
  color: var(--color-light);
}

/* Warning — Fill */
.pm-badge--warning,
.pm-badge--warning.pm-badge--fill {
  background: var(--color-warning-main);
  color: var(--color-light);
}

/* Danger — Fill */
.pm-badge--danger,
.pm-badge--danger.pm-badge--fill {
  background: var(--color-danger-main);
  color: var(--color-light);
}

/* ---- Outline variants ---- */

.pm-badge--primary.pm-badge--outline {
  background: transparent;
  border-color: var(--color-primary-300);
  color: var(--color-primary-300);
}

.pm-badge--secondary.pm-badge--outline {
  background: transparent;
  border-color: var(--color-secondary-main);
  color: var(--color-secondary-main);
}

.pm-badge--tertiary.pm-badge--outline {
  background: transparent;
  border-color: var(--color-tertiary-200);
  color: var(--color-tertiary-200);
}

.pm-badge--success.pm-badge--outline {
  background: transparent;
  border-color: var(--color-success-main);
  color: var(--color-success-main);
}

.pm-badge--warning.pm-badge--outline {
  background: transparent;
  border-color: var(--color-warning-main);
  color: var(--color-warning-main);
}

.pm-badge--danger.pm-badge--outline {
  background: transparent;
  border-color: var(--color-danger-main);
  color: var(--color-danger-main);
}

/* ================================================================
 * INPUTS — .pm-field / .pm-input
 * 5 types (text / select / phone / search / password) × 4 states
 * ================================================================ */

/* ---- Field wrapper (label + input + error) ---- */
.pm-field {
  display: flex;
  flex-direction: column;
}

.pm-field__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.pm-field__sublabel {
  font-size: var(--font-size-body-3);
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-regular);
}

.pm-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-grey-800);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-1);
  outline: none;
  transition: border-color 0.2s;
}
.pm-input::placeholder {
  color: var(--color-text-subtle);
}
.pm-input:focus {
  border-color: var(--color-primary-main);
}

.pm-input--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2397DFE5' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

textarea.pm-input {
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-body);
}

.pm-field__error {
  font-size: var(--font-size-body-3);
  color: var(--color-danger-main);
}

/* ── Badges ───────────────────────────────────────────────────── */
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  line-height: 1.4;
  white-space: nowrap;
}

.pm-badge--fill.pm-badge--primary { background: var(--color-primary-main); color: var(--color-grey-900); }
.pm-badge--fill.pm-badge--secondary { background: var(--color-secondary-main); color: var(--color-grey-900); }
.pm-badge--fill.pm-badge--success { background: var(--color-success-main); color: var(--color-light); }
.pm-badge--fill.pm-badge--warning { background: var(--color-warning-main); color: var(--color-grey-900); }
.pm-badge--fill.pm-badge--danger { background: var(--color-danger-main); color: var(--color-light); }
.pm-badge--fill.pm-badge--neutral { background: var(--color-grey-600); color: var(--color-light); }

.pm-badge--outline.pm-badge--primary { border: 1px solid var(--color-primary-main); color: var(--color-primary-main); }
.pm-badge--outline.pm-badge--secondary { border: 1px solid var(--color-secondary-main); color: var(--color-secondary-main); }
.pm-badge--outline.pm-badge--success { border: 1px solid var(--color-success-main); color: var(--color-success-main); }
.pm-badge--outline.pm-badge--warning { border: 1px solid var(--color-warning-main); color: var(--color-warning-main); }
.pm-badge--outline.pm-badge--danger { border: 1px solid var(--color-danger-main); color: var(--color-danger-main); }
.pm-badge--outline.pm-badge--neutral { border: 1px solid var(--color-grey-400); color: var(--color-grey-300); }

/* ── Cards ────────────────────────────────────────────────────── */
.pm-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.pm-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.pm-card__body {
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

  margin-bottom: var(--space-2);
}

.pm-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  color: var(--color-danger-main);
  margin-top: var(--space-2);
}

.pm-field__error::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-danger-main);
  background-image:
    linear-gradient(var(--color-light), var(--color-light)),
    linear-gradient(var(--color-light), var(--color-light));
  background-size: 1.5px 6px, 1.5px 1.5px;
  background-position: center 2.5px, center 10px;
  background-repeat: no-repeat;
}

/* ---- Base input ---- */
.pm-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-light);
  caret-color: var(--color-primary-300);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.pm-input::placeholder {
  color: var(--color-text-subtle);
}

/* ---- State: Focused ---- */
.pm-input:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 2px var(--color-primary-300);
}

/* ---- State: Error ---- */
.pm-field--error .pm-input,
.pm-input--error {
  border-color: var(--color-danger-main);
}

.pm-field--error .pm-input:focus,
.pm-input--error:focus {
  border-color: var(--color-danger-main);
  box-shadow: 0 0 0 2px var(--color-danger-main);
}

/* ---- State: Disabled ---- */
.pm-input:disabled,
.pm-input[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Type: Select (.pm-input--select) ---- */
.pm-input--select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23877A81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  cursor: pointer;
}

.pm-input--select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236FCFD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- Type: Search (.pm-input--search) ---- */
.pm-input--search {
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23877A81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 18px;
}

.pm-input--search:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236FCFD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* ---- Type: Phone (.pm-input--phone) ---- */
.pm-input-phone-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pm-input-phone-wrap:focus-within {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 2px var(--color-primary-300);
}

.pm-field--error .pm-input-phone-wrap {
  border-color: var(--color-danger-main);
}

.pm-field--error .pm-input-phone-wrap:focus-within {
  border-color: var(--color-danger-main);
  box-shadow: 0 0 0 2px var(--color-danger-main);
}

.pm-input-phone-wrap__prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 16px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-1);
  color: var(--color-text-subtle);
  white-space: nowrap;
  border-right: 1px solid var(--color-border-subtle);
  height: 100%;
  user-select: none;
}

.pm-input-phone-wrap__prefix .flag {
  font-size: 18px;
  line-height: 1;
}

.pm-input-phone-wrap .pm-input--phone {
  border: none;
  border-radius: 0;
  background: transparent;
  height: 100%;
  flex: 1;
  min-width: 0;
}

.pm-input-phone-wrap .pm-input--phone:focus {
  box-shadow: none;
}

/* ---- Type: Password (.pm-input--password) ---- */
.pm-input-password-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.pm-input-password-wrap .pm-input--password {
  padding-right: 48px;
  width: 100%;
}

.pm-input-password-wrap__toggle {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: color 0.15s;
}

.pm-input-password-wrap__toggle:hover {
  color: var(--color-text);
}

.pm-input-password-wrap__toggle svg {
  width: 18px;
  height: 18px;
}

textarea.pm-input {
  resize: vertical;
  min-height: 80px;
  height: auto;
  line-height: var(--line-height-body);
}

/* ================================================================
 * MODALS — .pm-modal
 * Base modal + auth flow variants (Login, Forgot, Reset, Success)
 * ================================================================ */

/* Overlay — full-screen backdrop */
.pm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: var(--space-4);
}
.pm-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Base modal container */
.pm-modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 480px;
  width: calc(100% - var(--space-6));
  box-shadow: var(--shadow-lg);
  transform: translateY(12px);
  transition: transform 0.25s ease;
  position: relative;
}
.pm-modal-overlay.active .pm-modal {
  transform: translateY(0);
}

/* Header */
.pm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.pm-modal__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h4);
  line-height: var(--line-height-heading);
  margin: 0;
  flex: 1;
}
.pm-modal__back {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-1);
  margin-right: var(--space-3);
  line-height: 1;
  transition: color 0.2s;
}
.pm-modal__back:hover {
  color: var(--color-primary);
}

/* Close button */
.pm-modal__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
  margin-left: auto;
  transition: color 0.2s;
}
.pm-modal__close:hover {
  color: var(--color-text);
}

/* Body */
.pm-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pm-modal__desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  margin: 0;
}

/* Input group (label + input) */
.pm-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pm-modal__label {
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Footer */
.pm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.pm-modal__footer--split {
  justify-content: space-between;
}

/* Footer links row (e.g., Create account / Forgot password) */
.pm-modal__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
}

/* ---- Size variants ---- */
.pm-modal--sm {
  max-width: 360px;
  padding: var(--space-4);
}
.pm-modal--tall .pm-modal__body {
  max-height: 60vh;
  overflow-y: auto;
}

/* ---- Auth variant: Login ---- */
.pm-modal--login {
  max-width: 420px;
}

/* ---- Auth variant: Forgot password ---- */
.pm-modal--forgot {
  max-width: 420px;
}

/* ---- Auth variant: Reset password ---- */
.pm-modal--reset {
  max-width: 420px;
}

/* ---- Auth variant: Reset success ---- */
.pm-modal--reset-success {
  max-width: 400px;
  text-align: center;
}
.pm-modal__success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.pm-modal__success-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================================================
 * DATE PICKER — .pm-datepicker
 * Full 12-month calendar widget with year selector
 * ================================================================ */

/* ---- Main container ---- */
.pm-datepicker {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-family: var(--font-family-body);
  color: var(--color-light);
}

/* ---- Top inline inputs row ---- */
.pm-datepicker__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pm-datepicker__input-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  background: var(--color-grey-900);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
}

/* ---- Year chip ---- */
.pm-datepicker__year {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 14px;
  background: var(--color-primary-main);
  color: var(--color-primary-900);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: var(--space-5);
}

.pm-datepicker__year:hover {
  background: var(--color-primary-300);
}

.pm-datepicker__year-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--color-primary-900);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: var(--radius-xs);
  transition: background 0.15s;
}

.pm-datepicker__year-nav:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* ---- 12-month calendar grid ---- */
.pm-datepicker__calendar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}

/* ---- Single month block ---- */
.pm-datepicker__month {
  min-width: 0;
}

.pm-datepicker__month-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-bold);
  color: var(--color-light);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

/* ---- Day grid (header + days) ---- */
.pm-datepicker__grid {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  gap: 0;
}

/* Week-of-year column */
.pm-datepicker__week-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--color-text-subtle);
  height: 24px;
  user-select: none;
}

/* Weekday headers */
.pm-datepicker__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  height: 22px;
  text-transform: uppercase;
  user-select: none;
}

.pm-datepicker__weekday.is-weekend {
  color: var(--color-primary-300);
}

/* ---- Individual day cell ---- */
.pm-datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: var(--color-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-family-body);
  line-height: 1;
}

.pm-datepicker__day:hover {
  background: var(--color-grey-800);
}

/* Weekend days — teal text */
.pm-datepicker__day.is-weekend {
  color: var(--color-primary-300);
}

/* Today — filled teal background */
.pm-datepicker__day.is-today {
  background: var(--color-primary-main);
  color: var(--color-primary-900);
  font-weight: var(--font-weight-bold);
}

.pm-datepicker__day.is-today:hover {
  background: var(--color-primary-300);
}

/* Selected — teal background */
.pm-datepicker__day.is-selected {
  background: var(--color-primary-300);
  color: var(--color-primary-900);
  font-weight: var(--font-weight-bold);
}

/* Other month days — very muted */
.pm-datepicker__day.is-other-month {
  color: var(--color-grey-700);
}

.pm-datepicker__day.is-other-month:hover {
  background: var(--color-grey-800);
  color: var(--color-grey-500);
}

/* Empty spacer cell (no number) */
.pm-datepicker__day--empty {
  cursor: default;
}

.pm-datepicker__day--empty:hover {
  background: none;
}

/* ---- Week-num header spacer (top-left corner) ---- */
.pm-datepicker__grid-corner {
  height: 22px;
}

/* ---- Responsive: stack months on smaller screens ---- */
@media (max-width: 1100px) {
  .pm-datepicker__calendar {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 720px) {
  .pm-datepicker__calendar {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .pm-datepicker__calendar {
    grid-template-columns: repeat(2, 1fr);
  }
  .pm-datepicker {
    padding: var(--space-4);
  }
}

/* ================================================================
 * TOOLTIPS
 * ================================================================ */

/* -- Base -- */
.pm-tooltip {
  position: relative;
  display: inline-block;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  max-width: 320px;
  word-wrap: break-word;
}

/* -- Tail (pointing down, bottom-left) --
 * Uses clip-path to create a solid triangle. Color comes from variant classes
 * below. No dark "cover" overlay — that caused black-square artifacts when the
 * tooltip sat on a surface whose background didn't match --color-bg.
 */
.pm-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 20px;
  width: 14px;
  height: 7px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* -- Fill variant (default) -- */
.pm-tooltip--fill.pm-tooltip--primary {
  background: var(--color-primary-main);
  color: var(--color-primary-900);
}
.pm-tooltip--fill.pm-tooltip--primary::after { background: var(--color-primary-main); }

.pm-tooltip--fill.pm-tooltip--secondary {
  background: var(--color-secondary-main);
  color: var(--color-secondary-900);
}
.pm-tooltip--fill.pm-tooltip--secondary::after { background: var(--color-secondary-main); }

.pm-tooltip--fill.pm-tooltip--tertiary {
  background: var(--color-tertiary-main);
  color: var(--color-tertiary-200);
}
.pm-tooltip--fill.pm-tooltip--tertiary::after { background: var(--color-tertiary-main); }

.pm-tooltip--fill.pm-tooltip--success {
  background: var(--color-success-main);
  color: var(--color-light);
}
.pm-tooltip--fill.pm-tooltip--success::after { background: var(--color-success-main); }

.pm-tooltip--fill.pm-tooltip--warning {
  background: var(--color-warning-main);
  color: var(--color-light);
}
.pm-tooltip--fill.pm-tooltip--warning::after { background: var(--color-warning-main); }

.pm-tooltip--fill.pm-tooltip--danger {
  background: var(--color-danger-main);
  color: var(--color-light);
}
.pm-tooltip--fill.pm-tooltip--danger::after { background: var(--color-danger-main); }

/* -- Outline variant — border only, colored tail matching border -- */
.pm-tooltip--outline {
  background: transparent;
  border-width: 1px;
  border-style: solid;
}

.pm-tooltip--outline.pm-tooltip--primary   { border-color: var(--color-primary-300);   color: var(--color-primary-200); }
.pm-tooltip--outline.pm-tooltip--primary::after   { background: var(--color-primary-300); }

.pm-tooltip--outline.pm-tooltip--secondary { border-color: var(--color-secondary-main); color: var(--color-secondary-main); }
.pm-tooltip--outline.pm-tooltip--secondary::after { background: var(--color-secondary-main); }

.pm-tooltip--outline.pm-tooltip--tertiary  { border-color: var(--color-tertiary-200);  color: var(--color-tertiary-200); }
.pm-tooltip--outline.pm-tooltip--tertiary::after  { background: var(--color-tertiary-200); }

.pm-tooltip--outline.pm-tooltip--success   { border-color: var(--color-success-main);  color: var(--color-success-main); }
.pm-tooltip--outline.pm-tooltip--success::after   { background: var(--color-success-main); }

.pm-tooltip--outline.pm-tooltip--warning   { border-color: var(--color-warning-main);  color: var(--color-warning-main); }
.pm-tooltip--outline.pm-tooltip--warning::after   { background: var(--color-warning-main); }

.pm-tooltip--outline.pm-tooltip--danger    { border-color: var(--color-danger-main);   color: var(--color-danger-main); }
.pm-tooltip--outline.pm-tooltip--danger::after    { background: var(--color-danger-main); }


/* ================================================================
 * CARDS
 * ================================================================ */

/* Rewritten 2026-04-24 to match Figma 1:1 — see node 27:9015 for source */

/* ──────────────────────────────────────────────────────────────
 * Shared avatar helper (used inside cards)
 * ────────────────────────────────────────────────────────────── */
.pm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-600);
  color: var(--color-light);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  flex-shrink: 0;
}
.pm-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════════════════════
 * 1. FILE PREVIEW CARD — .pm-card-file-preview
 * Dark grayscale card, 620×~472 in Figma, chunky 32px radius,
 * thick 2px border. Used as a file/document preview with avatars
 * and an Edit CTA.
 * ══════════════════════════════════════════════════════════════ */
.pm-card-file-preview {
  background: var(--color-surface-800);
  border: 2px solid var(--color-surface-700);
  border-radius: var(--radius-2xl);   /* 32px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 4px;
  width: 100%;
  max-width: 620px;
  color: var(--color-surface-50);
  font-family: var(--font-family-body);
}

/* Header */
.pm-card-file-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 22px 22px 26px;
  border-bottom: 1.75px solid var(--color-surface-700);
}
.pm-card-file-preview__title {
  font-size: 20px;
  font-weight: 600;             /* Inter Semi Bold */
  line-height: 1.2;
  color: var(--color-surface-50);
  margin: 0;
}
.pm-card-file-preview__more {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-surface-50);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pm-card-file-preview__more:hover {
  background: var(--color-surface-700);
}
.pm-card-file-preview__more svg { width: 24px; height: 24px; }

/* Image area */
.pm-card-file-preview__image {
  margin: 0 24px;
  height: 264px;
  border-radius: var(--radius-lg);  /* 16px */
  overflow: hidden;
  background: var(--color-surface-50);  /* fallback; illustration fills */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-card-file-preview__image img,
.pm-card-file-preview__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer */
.pm-card-file-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 26px;
}
.pm-card-file-preview__avatars {
  display: inline-flex;
  align-items: center;
}
.pm-card-file-preview__avatar-stack {
  display: inline-flex;
  align-items: center;
}
.pm-card-file-preview__avatar-stack .pm-avatar {
  width: 36px;
  height: 36px;
  border: 2.4px solid var(--color-surface-50);
  box-shadow: 0 0 0 1px var(--color-surface-800); /* tiny contrast halo */
  font-size: 13px;
}
.pm-card-file-preview__avatar-stack .pm-avatar + .pm-avatar {
  margin-left: -14px;
}
.pm-card-file-preview__avatar-text {
  margin-left: 12px;
  font-size: 15px;
  color: var(--color-surface-500);
  letter-spacing: -0.0075em;
}
.pm-card-file-preview__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 9px 16px;
  background: var(--color-primary-300);
  color: var(--color-primary-900);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family-heading);   /* Rubik Medium in Figma */
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pm-card-file-preview__action:hover { background: var(--color-primary-main); }
.pm-card-file-preview__action svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════
 * 2. NOTIFICATION CARD — .pm-card-notification
 * "Unread" uses dark teal bg (primary-900 + primary-700 border) to
 * draw attention. "Read" uses neutral surface-800.
 * ══════════════════════════════════════════════════════════════ */
.pm-card-notification {
  position: relative;
  width: 100%;
  max-width: 468px;
  min-height: 101px;
  background: var(--color-surface-800);
  border: 1.5px solid var(--color-surface-700);
  border-radius: var(--radius-lg);
  padding: 13.5px 19.5px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--color-surface-50);
  font-family: var(--font-family-body);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pm-card-notification--unread {
  background: var(--color-primary-900);
  border-color: var(--color-primary-700);
}

.pm-card-notification__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.pm-card-notification__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-card-notification__text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-surface-50);
  margin: 0;
}
.pm-card-notification__text strong {
  font-weight: 600;
}
.pm-card-notification__time {
  font-size: 14px;
  color: var(--color-surface-300);
  line-height: 1.4;
  margin-top: 4px;
}
.pm-card-notification__thumb {
  width: 54px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-surface-700);
}
.pm-card-notification__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════
 * 3. EVENT CARD — .pm-card-event
 * Same dark-teal / neutral split as notification. Compact row.
 * ══════════════════════════════════════════════════════════════ */
.pm-card-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 376px;
  padding: 20px 16px 20px 20px;
  background: var(--color-surface-800);
  border: 1px solid var(--color-surface-700);
  border-radius: var(--radius-lg);
  color: var(--color-surface-50);
  font-family: var(--font-family-body);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pm-card-event--unread {
  background: var(--color-primary-900);
  border-color: var(--color-primary-700);
}

.pm-card-event__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.pm-card-event__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-surface-500);
}
.pm-card-event--unread .pm-card-event__dot {
  background: var(--color-primary-main);
}
.pm-card-event__text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-surface-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-card-event__text strong { font-weight: 600; }

/* Right-side action button (Dismiss / tertiary style) */
.pm-card-event__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-primary-300);
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.pm-card-event__action:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}
.pm-card-event__more {
  width: 42px;
  height: 42px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-surface-50);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.pm-card-event__more:hover { background: var(--color-surface-700); }
.pm-card-event__more svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════
 * 4. FILE UPLOAD CARD — .pm-card-upload
 * Three states: default (empty/dropzone), success (green), error (red).
 * ══════════════════════════════════════════════════════════════ */
.pm-card-upload {
  width: 100%;
  max-width: 284px;
  min-height: 108px;
  padding: 20px 24px;
  background: var(--color-surface-800);
  border: 1px solid var(--color-surface-700);
  border-radius: var(--radius-sm);    /* 8px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--color-surface-50);
  font-family: var(--font-family-body);
}
.pm-card-upload__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-surface-50);
}
.pm-card-upload__icon svg { width: 100%; height: 100%; }
.pm-card-upload__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-surface-50);
  margin: 0;
}

/* Success state — solid green */
.pm-card-upload--success {
  background: var(--color-success-900);
  border-color: var(--color-success-800);
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px 16px 18px;
  text-align: left;
}
.pm-card-upload--success .pm-card-upload__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-success-main);
  color: var(--color-light);
  font-size: 12px;
}
.pm-card-upload--success .pm-card-upload__text { flex: 1; }

/* Error state — solid red with danger text */
.pm-card-upload--error {
  background: var(--color-danger-900);
  border-color: var(--color-danger-800);
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px 16px 18px;
  text-align: left;
  gap: 10px;
}
.pm-card-upload--error .pm-card-upload__icon { color: var(--color-danger-100); }
.pm-card-upload--error .pm-card-upload__text {
  color: var(--color-danger-100);
  flex: 1;
}
.pm-card-upload__retry {
  background: transparent;
  border: none;
  color: var(--color-danger-100);
  font-family: var(--font-family-heading);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.pm-card-upload__retry:hover { background: rgba(244, 201, 205, 0.1); }

/* ================================================================
 * GENERIC CARD — .pm-card
 * Per Figma "Surface" frame (file 4L55gRjak5vlN1kussVcGm node 2062:1087):
 *   bg surface-800, 1px solid surface-600, 24px radius, 24px padding.
 * Use this as the base container for any "panel on the dark surface"
 * — stat boxes, conversation list, intake panel, settings groups, etc.
 * ================================================================ */
.pm-card {
  background: var(--color-surface-800);
  border: 1px solid var(--color-surface-600);
  border-radius: 24px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Variants */
.pm-card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.pm-card--flush {
  padding: 0;
}

.pm-card--selected {
  background: var(--color-tertiary-main);
  border-color: var(--color-tertiary-300);
}

/* Sub-elements (optional — caller can also use raw markup) */
.pm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pm-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h5);
  color: var(--color-text);
  margin: 0;
}

.pm-card__meta {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  color: var(--color-text-muted);
}

/* ================================================================
 * STAT CARD — .pm-stat-card
 * Specialization of .pm-card: small caps eyebrow + huge number + meta.
 * Used for "TOTAL TESTERS / 1" style summary cards.
 * ================================================================ */
.pm-stat-card {
  background: var(--color-surface-800);
  border: 1px solid var(--color-surface-600);
  border-radius: 24px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pm-stat-card__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.pm-stat-card__value {
  font-family: var(--font-family-heading);
  font-size: 40px;
  font-weight: var(--font-weight-heavy);
  line-height: 1.05;
  color: var(--color-text);
  margin: 0;
}
.pm-stat-card__meta {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  color: var(--color-text-subtle);
  margin: 0;
}

/* ================================================================
 * KEY-VALUE PAIR — .pm-key-value
 * Caps eyebrow label above a recessed value container with a left
 * accent border. Used in the intake-progress panel: DESIGN CONCEPT
 * → "i want a tattoo today", with optional check icon prefix.
 * ================================================================ */
.pm-key-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pm-key-value__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pm-key-value__icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-success-main);
  color: var(--color-light);
}
.pm-key-value__icon svg { width: 10px; height: 10px; }
.pm-key-value__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pm-key-value__value {
  background: var(--color-surface-700);
  border-left: 3px solid var(--color-primary-300);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  color: var(--color-text);
}
.pm-key-value--empty .pm-key-value__value {
  border-left-color: var(--color-surface-500);
  border-style: dashed;
  border-width: 1px 1px 1px 3px;
  color: var(--color-text-subtle);
  font-style: italic;
}

/* ================================================================
 * TOGGLE SWITCH — .pm-toggle
 * Per Figma 2057:459 (Toggle component set, file 4L55gRjak5vlN1kussVcGm).
 * 58×32 track, 8px radius. Knob 24px circle, 4px inset.
 *   ON  default = primary-800,  hover = primary-700,  disabled = primary-900
 *   OFF default = surface-800,  hover = surface-700,  disabled = surface-800 + X
 * ================================================================ */
.pm-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 58px;
  height: 32px;
  flex-shrink: 0;
}
.pm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.pm-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--color-surface-800);
  transition: background 0.18s ease;
}
.pm-toggle__knob {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface-200);
  transform: translateY(-50%);
  transition: left 0.2s ease, background 0.18s ease;
}
.pm-toggle:hover input:not(:checked):not(:disabled) ~ .pm-toggle__track {
  background: var(--color-surface-700);
}
.pm-toggle input:checked ~ .pm-toggle__track {
  background: var(--color-primary-800);
}
.pm-toggle:hover input:checked:not(:disabled) ~ .pm-toggle__track {
  background: var(--color-primary-700);
}
.pm-toggle input:checked ~ .pm-toggle__knob {
  left: calc(100% - 4px - 24px);
  background: var(--color-primary-300);
}
.pm-toggle input:disabled ~ .pm-toggle__track {
  background: var(--color-primary-900);
}
.pm-toggle input:disabled:not(:checked) ~ .pm-toggle__track {
  background: var(--color-surface-800);
}
.pm-toggle input:disabled ~ .pm-toggle__knob {
  background: var(--color-surface-500);
  opacity: 0.85;
}
.pm-toggle input:focus-visible ~ .pm-toggle__track {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}
.pm-toggle input:disabled { cursor: not-allowed; }
.pm-toggle:has(input:disabled) { cursor: not-allowed; }
/* X mark on the disabled knob — pure CSS so we don't need an SVG asset */
.pm-toggle input:disabled ~ .pm-toggle__knob::before,
.pm-toggle input:disabled ~ .pm-toggle__knob::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--color-surface-200);
  transform-origin: center;
}
.pm-toggle input:disabled ~ .pm-toggle__knob::before { transform: translate(-50%, -50%) rotate(45deg); }
.pm-toggle input:disabled ~ .pm-toggle__knob::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ================================================================
 * STATUS DOT — .pm-status-dot
 * 8px solid dot with optional soft glow halo. Used for live platform
 * connection / send / receive indicators.
 * ================================================================ */
.pm-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-surface-500);   /* idle / unknown */
  flex-shrink: 0;
}
.pm-status-dot--ok      { background: var(--color-success-main); box-shadow: 0 0 6px rgba(35, 164, 105, 0.45); }
.pm-status-dot--warn    { background: var(--color-warning-main); box-shadow: 0 0 6px rgba(224, 125, 44, 0.45); }
.pm-status-dot--error   { background: var(--color-danger-main);  box-shadow: 0 0 6px rgba(211, 43, 58, 0.45); }
.pm-status-dot--pulse {
  animation: pm-status-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pm-status-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ================================================================
 * PROGRESS BAR — .pm-progress
 * Rounded track + fill segment. Used for the intake completion bar.
 * ================================================================ */
.pm-progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-surface-700);
  border-radius: 999px;
  overflow: hidden;
}
.pm-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0;                                  /* set inline with style="width: X%" */
  background: var(--color-primary-300);
  border-radius: inherit;
  transition: width 0.3s ease;
}
.pm-progress--success  .pm-progress__fill { background: var(--color-success-main); }
.pm-progress--warning  .pm-progress__fill { background: var(--color-warning-main); }
.pm-progress--danger   .pm-progress__fill { background: var(--color-danger-main); }
.pm-progress--thick    { height: 12px; }

/* ================================================================
 * TABS — .pm-tabs
 * Per Figma 2058:540 (Tabs page). Underline-active indicator,
 * supports an optional emoji/icon before the label and a trailing
 * slot for filter actions.
 * ================================================================ */
.pm-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  position: relative;
}
.pm-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;                       /* overlap the bottom border */
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.pm-tabs__tab:hover {
  color: var(--color-text);
}
.pm-tabs__tab--active,
.pm-tabs__tab[aria-selected="true"] {
  color: var(--color-primary-300);
  border-bottom-color: var(--color-primary-300);
}
.pm-tabs__tab[disabled],
.pm-tabs__tab[aria-disabled="true"] {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.pm-tabs__trailing {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ================================================================
 * SMALL VARIANTS — .pm-input--sm and .pm-badge--sm
 * Compact sizing for inline filters (selects, search) and tight
 * metadata badges (chat-message intent labels).
 * ================================================================ */

/* Input small — ~32px tall, 13–14px font, used for inline filter
   dropdowns and small text fields. Layered onto .pm-input base. */
.pm-input--sm {
  height: 32px;
  padding: 6px 12px;
  font-size: var(--font-size-body-2);
  border-radius: var(--radius-md);
}
.pm-input--sm.pm-input--select {
  padding-right: 32px;
  background-position: right 10px center;
  background-size: 14px;
}
.pm-input--sm.pm-input--search {
  padding-left: 32px;
  background-position: left 10px center;
  background-size: 14px;
}
.pm-input--pill {
  border-radius: 999px;
}

/* Badge small — 10–11px font, tight padding. Used inline in chat
   message metadata for intent labels. */
.pm-badge--sm {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  gap: 4px;
}
.pm-badge--sm svg,
.pm-badge--sm img,
.pm-badge--sm .pm-badge__icon {
  width: 10px;
  height: 10px;
}

/* ── Utility: Links ───────────────────────────────────────────── */
a.pm-link {
  color: var(--color-primary-300);
  text-decoration: none;
  transition: opacity 0.2s;
}
a.pm-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ── Utility: Sections ────────────────────────────────────────── */
.pm-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ── Utility: Divider ─────────────────────────────────────────── */
.pm-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-subtle);
  border: none;
}

/* ================================================================
 * SITE TOPBAR — .pm-site-topbar
 * Fixed top bar with logo + hamburger. Logo is visible by default;
 * marketing-page-only modifier `.pm-site-topbar--hide-logo` hides
 * it until the page-level JS adds `is-scrolled`.
 * ================================================================ */
.pm-site-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.pm-site-topbar__logo-link {
  display: flex;
  transition: opacity 200ms ease;
}
.pm-site-topbar__logo {
  height: 32px;
  width: auto;
  display: block;
}
/* Marketing page: keep the big hero logo unique by hiding the topbar
   logo until the user scrolls past the hero. */
.pm-site-topbar--hide-logo .pm-site-topbar__logo-link {
  opacity: 0;
  pointer-events: none;
}
.pm-site-topbar--hide-logo.is-scrolled .pm-site-topbar__logo-link {
  opacity: 1;
  pointer-events: auto;
}

/* ================================================================
 * SITE DRAWER — .pm-site-drawer
 * Mobile-style nav drawer that slides in from the right when the
 * hamburger in .pm-site-topbar is clicked. Page-agnostic links.
 * ================================================================ */
.pm-site-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 320px);
  background: var(--color-surface-800);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 240ms ease;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 8px;
}
.pm-site-drawer.is-open {
  transform: translateX(0);
}
.pm-site-drawer__close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
}
.pm-site-drawer__link {
  color: var(--color-text);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 500;
}
.pm-site-drawer__link:hover {
  background: var(--color-bg-surface-hover);
}
.pm-site-drawer__cta {
  margin-top: 12px;
}
.pm-site-drawer__social {
  margin-top: auto;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding-top: 24px;
}
.pm-site-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.pm-site-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ================================================================
 * SITE FOOTER — .pm-site-footer
 * Shared across the marketing page and any standalone pages
 * (privacy, legal, health). Tertiary-button links + centered
 * copyright line.
 * ================================================================ */
.pm-site-footer {
  padding: 32px 24px;
  background: var(--color-surface-800);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.pm-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-bottom: 16px;
}
.pm-site-footer__meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  line-height: 1.6;
}