/*!
 * ProMach Design System — promach-ds-1.2.0.css
 * ------------------------------------------------------------------
 * Shared visual identity for the ProMach internal tool suite.
 * Source of truth: PM_BrandGuidelines_singlepages_Rd15_0718.pdf (v2, Jul 2018)
 *   §3.3 Brand Colors (p31) · §3.4 Brand Typography (p32-34).
 *
 * Master corporate palette (NOT a product sub-brand):
 *   ProMach Green  #009A76  PMS 3278  — THE primary (preserve exact RGB)
 *   ProMach Blue   #171B60  PMS 2757
 *   Dark Gray      #333F48  PMS 432   — body text dark
 *   Light Blue     #83B6CC  PMS 7695  — secondary, sparingly
 *   Light Gray     #D7D8D6  Cool Gray 2
 *
 * ------------------------------------------------------------------
 * 1.2.0 — FILLED DANGER VARIANT (approved by Nancy, 2026-09-09)
 * ------------------------------------------------------------------
 * Additive, backwards-compatible (every 1.1.0 class/token unchanged; the
 * refresh below still stands). ONE new component variant + its hover token:
 *
 *   .pm-btn-danger-solid — a FILLED danger button (solid ProMach danger red,
 *   white text, bold). The default .pm-btn-danger stays the tonal outline and
 *   remains the norm; "tonal, not solid" is still the house rule. This variant
 *   is the DELIBERATE, narrow exception for the rare case where a DESTRUCTIVE
 *   action is the primary action of a view and must be found at a glance — the
 *   outline recedes there and gets missed (Lead Submission Tool: "Remove all
 *   test scans"). Treat it exactly like the green primary: reserved, at most
 *   one per view, and only when the destructive action IS the main action. For
 *   an incidental/secondary delete, keep .pm-btn-danger (outline).
 *
 *   New token --pm-danger-hover (#8f1e17, a darker #B3261E) mirrors
 *   --pm-brand-hover so the filled state darkens on hover like the green does.
 *
 * ------------------------------------------------------------------
 * 1.1.0 — VISUAL REFRESH (approved by Nancy, 2026-07-07)
 * ------------------------------------------------------------------
 * Three deliberate changes over 1.0.0, all brand-safe (ProMach Green
 * #009A76 unchanged, whole --pm-* vocabulary preserved):
 *
 *  1. TYPEFACE. The UI face moves from Tahoma (the guideline-sanctioned
 *     license-free web substitute for Azo Sans) to MANROPE — a free,
 *     OFL, geometric sans that reads far closer to Azo Sans in feel.
 *     It is SELF-HOSTED as .woff2 (see @font-face below): NO runtime
 *     CDN, per SECURITY.md — the tool holds prospect PII. Azo Sans
 *     itself stays ruled out (paid, Adobe-CDN, no self-host license).
 *     If ProMach ever licenses Azo Sans for self-host, revisit here.
 *     Font files ship beside the tool at assets/fonts/ (latin +
 *     latin-ext subsets so accents — São Paulo, Sütaş, Querétaro — and
 *     Turkish/Polish glyphs in real lead data render correctly).
 *
 *  2. "FRESHENED" SHAPE/SPACE. Softer hairlines, a touch more air,
 *     slightly larger radius, gentler + cooler shadows — the calm, flat
 *     aesthetic of the prototype widgets. Nothing structural moves.
 *
 *  3. TONAL PRIMARY BUTTON + RESERVED GREEN. The solid green button
 *     read too harsh once everything around it calmed down, so the
 *     primary action is now a soft green TINT with green text (see
 *     .pm-btn-primary). Green is reserved for the main action + genuine
 *     success; incidental chrome (e.g. the save pill) goes neutral so
 *     green means "click here", not background noise.
 *
 * Semantic status colors are NOT in the brand guidelines. The set below
 * is the "on-brand harmonized" palette signed off by Nancy 2026-07-06:
 *   success ties back to ProMach Green, info to the Light Blue secondary.
 *
 * Distribution: vendored per-tool (copied in, versioned) like
 * vendor/papaparse-*.js — never a runtime <link> to a shared host.
 * Link this file BEFORE a tool's own stylesheet.
 * ------------------------------------------------------------------
 */

/* ================================================================
 * Self-hosted Manrope (OFL). latin + latin-ext subsets, weights
 * 400/600/700. Paths are relative to this file in vendor/ →
 * assets/fonts/. No fonts.googleapis.com / gstatic — files are
 * vendored, like every other dependency in this tool.
 * ================================================================ */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/manrope-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/manrope-400-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/manrope-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/manrope-600-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/manrope-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/manrope-700-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ---------- Brand ---------- */
  --pm-brand:            #009A76;   /* ProMach Green — primary (unchanged) */
  --pm-brand-hover:      #007E60;   /* darkened for hover/active */
  --pm-brand-blue:       #171B60;   /* ProMach Blue — primary */
  --pm-accent:           #83B6CC;   /* Light Blue — secondary accent */

  /* ---------- Surfaces (1.1.0: softer, slightly cooler) ---------- */
  --pm-bg:               #f6f7f9;   /* app background */
  --pm-surface:          #ffffff;   /* cards, inputs, table cells */
  --pm-surface-2:        #f4f6f8;   /* table header, muted fills */

  /* ---------- Text ---------- */
  --pm-text:             #333F48;   /* Dark Gray — body text */
  --pm-text-muted:       #6b7280;   /* secondary/hint text */
  --pm-text-on-brand:    #ffffff;   /* text on brand/dark fills */

  /* ---------- Semantic: danger ---------- */
  --pm-danger:           #B3261E;
  --pm-danger-tint:      #fdecea;
  --pm-danger-border:    #f3c0c0;
  --pm-on-danger:        #ffffff;
  --pm-danger-hover:     #8f1e17;   /* 1.2.0 — darkened for the filled variant */

  /* ---------- Semantic: warning ---------- */
  --pm-warn:             #B7791F;
  --pm-warn-tint:        #fff7ed;
  --pm-warn-border:      #fde68a;
  --pm-warn-text:        #7c2d12;

  /* ---------- Semantic: success (ProMach Green family) ---------- */
  --pm-success:          #009A76;
  --pm-success-tint:     #e6f6f1;
  --pm-success-text:     #046a52;
  --pm-success-border:   #a7e3d3;
  --pm-success-tint-hi:  #d5efe6;   /* 1.1.0: deeper tint for tonal-button hover */

  /* ---------- Semantic: info (Light Blue family) ---------- */
  --pm-info:             #2A6E8F;
  --pm-info-tint:        #eaf3f7;
  --pm-info-text:        #1f5a76;
  --pm-info-border:      #bcdcea;

  /* ---------- Neutral chip (1.1.0: reserved-green chrome) ---------- */
  --pm-neutral-tint:     #eef1f4;
  --pm-neutral-text:     #5b6673;
  --pm-neutral-border:   #e2e6ea;

  /* ---------- Lines & shape (1.1.0: gentler hairline, larger radius) ---------- */
  --pm-border:           #eceef2;
  --pm-border-strong:    #D7D8D6;   /* brand Light Gray */
  --pm-radius:           12px;
  --pm-radius-lg:        16px;
  --pm-radius-pill:      999px;

  /* ---------- Spacing rhythm (1.1.0: a touch more air) ---------- */
  --pm-space-1:          4px;
  --pm-space-2:          8px;
  --pm-space-3:          12px;
  --pm-space-4:          16px;
  --pm-space-5:          24px;
  --pm-space-6:          32px;
  --pm-card-gap:         22px;

  /* ---------- Typography (1.1.0: Manrope) ---------- */
  --pm-font-sans:        "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pm-font-serif:       Cambria, Georgia, "Times New Roman", serif;
  --pm-fs-1:             0.75rem;
  --pm-fs-2:             0.85rem;
  --pm-fs-3:             0.92rem;
  --pm-fs-4:             1rem;
  --pm-fs-5:             1.25rem;
  --pm-fs-6:             1.6rem;
  --pm-weight-normal:    400;
  --pm-weight-medium:    600;
  --pm-weight-bold:      700;
  --pm-tracking-head:    -0.01em;   /* 1.1.0: tighten headings slightly */

  /* ---------- Effects (1.1.0: softer, cooler shadows) ---------- */
  --pm-shadow-card:      0 1px 3px rgba(16,24,40,.06);
  --pm-shadow-pop:       0 10px 28px rgba(16,24,40,.12);
  --pm-shadow-modal:     0 16px 40px rgba(16,24,40,.18);
  --pm-focus-ring:       0 0 0 3px rgba(0,154,118,.35);

  /* ---------- Layering ---------- */
  --pm-z-sticky:         11;
  --pm-z-menu:           1200;
  --pm-z-modal:          6000;
  --pm-z-toast:          99999;
}

/* ================================================================
 * Base component classes — the shared widget set. Every tool that
 * vendors this file gets these for free. Prefixed .pm-* so they never
 * collide with a tool's own selectors.
 * ================================================================ */

.pm-app{
  margin:0;
  background:var(--pm-bg);
  color:var(--pm-text);
  font-family:var(--pm-font-sans);
}

/* ---------- Buttons ---------- */
.pm-btn{
  font-family:inherit;
  border:1px solid var(--pm-border-strong);
  background:var(--pm-surface);
  color:var(--pm-text);
  padding:9px 15px;
  border-radius:var(--pm-radius);
  cursor:pointer;
  font-size:var(--pm-fs-3);
  font-weight:var(--pm-weight-medium);
  transition:background .15s, border-color .15s, filter .15s;
}
.pm-btn:hover{ background:var(--pm-surface-2) }
.pm-btn:focus-visible{ outline:none; box-shadow:var(--pm-focus-ring) }
/* 1.1.0 TONAL primary — soft green tint + green text, not a solid slab.
   Firmer border + medium weight keep it reading clearly as the main action
   and distinct from the flatter success pills/bars around it. */
.pm-btn-primary{
  background:var(--pm-success-tint);
  border-color:var(--pm-success-border);
  color:var(--pm-success-text);
  font-weight:var(--pm-weight-bold);
}
.pm-btn-primary:hover{
  background:var(--pm-success-tint-hi);
  border-color:var(--pm-brand);
  color:var(--pm-success-text);
  filter:none;
}
.pm-btn-danger{ color:var(--pm-danger); border-color:var(--pm-danger-border) }
.pm-btn-danger:hover{ background:var(--pm-danger-tint); filter:none }
/* 1.2.0 FILLED danger — the narrow exception to "tonal, not solid": a
   destructive action that is the PRIMARY action of a view and must be found at
   a glance (the outline .pm-btn-danger recedes and gets missed there). Reserved
   and rare — one per view, like the green primary; keep .pm-btn-danger for
   incidental/secondary deletes. */
.pm-btn-danger-solid{
  background:var(--pm-danger);
  border-color:var(--pm-danger);
  color:var(--pm-on-danger);
  font-weight:var(--pm-weight-bold);
}
.pm-btn-danger-solid:hover{
  background:var(--pm-danger-hover);
  border-color:var(--pm-danger-hover);
  filter:none;
}
.pm-btn-icon{ height:28px; width:28px; border-radius:8px; display:inline-grid; place-items:center; padding:0 }
.pm-btn[disabled]{ opacity:.5; cursor:not-allowed; filter:grayscale(20%) }

/* ---------- Cards ---------- */
.pm-card{
  background:var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius-lg);
  box-shadow:var(--pm-shadow-card);
  padding:var(--pm-space-5);
}

/* ---------- Step badge / section marker ---------- */
.pm-stepbadge{
  display:inline-grid; place-items:center;
  min-width:34px; height:34px; border-radius:var(--pm-radius-pill);
  background:var(--pm-success-tint); color:var(--pm-success-text);
  border:1px solid var(--pm-success-border); font-weight:var(--pm-weight-bold);
}

/* ---------- Inputs & selects ---------- */
.pm-input, .pm-select, .pm-textarea{
  width:100%; font-family:inherit; font-size:var(--pm-fs-3);
  padding:8px; border:1px solid var(--pm-border-strong);
  border-radius:10px; background:var(--pm-surface); color:var(--pm-text);
}
.pm-input:focus-visible, .pm-select:focus-visible, .pm-textarea:focus-visible{
  outline:none; border-color:var(--pm-brand); box-shadow:var(--pm-focus-ring);
}
.pm-input.is-invalid, .pm-select.is-invalid, .pm-textarea.is-invalid{
  border-color:var(--pm-danger); background:var(--pm-danger-tint);
}

/* ---------- Status pills ---------- */
.pm-status{ display:inline-block; padding:2px 8px; border-radius:var(--pm-radius-pill); font-size:var(--pm-fs-1); font-weight:var(--pm-weight-medium) }
.pm-status-valid{ background:var(--pm-success-tint); color:var(--pm-success-text) }
.pm-status-issues{ background:var(--pm-warn-tint); color:var(--pm-warn-text) }

/* ---------- Save pill (1.1.0: reserved green — neutral chip, green dot only) ---------- */
.pm-save-pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--pm-radius-pill); padding:4px 12px;
  font-size:var(--pm-fs-2); font-weight:var(--pm-weight-medium); line-height:1;
  border:1px solid var(--pm-border); white-space:nowrap;
}
.pm-save-pill::before{ content:""; width:8px; height:8px; border-radius:var(--pm-radius-pill); background:currentColor; opacity:.7 }
.pm-save-pill[data-state="saved"]{ background:var(--pm-neutral-tint); color:var(--pm-neutral-text); border-color:var(--pm-neutral-border) }
.pm-save-pill[data-state="saved"]::before{ background:var(--pm-success); opacity:1 }
.pm-save-pill[data-state="unsaved"]{ background:var(--pm-surface-2); color:var(--pm-text-muted) }

/* ---------- Badges / chips / tags ---------- */
.pm-badge{ font-size:var(--pm-fs-1); font-weight:var(--pm-weight-medium); background:var(--pm-info-tint); color:var(--pm-info-text); padding:2px 8px; border-radius:var(--pm-radius-pill) }
.pm-tag{ display:inline-flex; align-items:center; gap:8px; background:var(--pm-info-tint); color:var(--pm-info-text); border-radius:var(--pm-radius-pill); padding:6px 12px; font-size:var(--pm-fs-2); font-weight:var(--pm-weight-medium); line-height:1 }
.pm-tag-soft{ background:var(--pm-surface-2); color:var(--pm-text) }
.pm-tag-success{ background:var(--pm-success-tint); color:var(--pm-success-text) }

/* ---------- Data tables ---------- */
.pm-table{ width:100%; border-collapse:separate; border-spacing:0 }
.pm-table th, .pm-table td{ border-bottom:1px solid var(--pm-border); padding:10px 8px; font-size:var(--pm-fs-3); vertical-align:top; background:var(--pm-surface) }
.pm-table thead th{ position:sticky; top:0; z-index:var(--pm-z-sticky); background:var(--pm-surface-2) }
.pm-table td.is-bad{ outline:2px solid rgba(179,38,30,.4); background:var(--pm-danger-tint) }

/* ---------- Modal + backdrop ---------- */
.pm-backdrop{ position:fixed; inset:0; background:rgba(23,27,96,.42); display:grid; place-items:center; z-index:var(--pm-z-modal) }
.pm-modal{ background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:var(--pm-radius-lg); box-shadow:var(--pm-shadow-modal); max-width:600px; width:92vw }

/* ---------- Toast ---------- */
.pm-toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,12px);
  max-width:min(92vw,560px); width:max-content; text-align:center;
  z-index:var(--pm-z-toast); background:var(--pm-brand-blue); color:#fff;
  padding:12px 16px; border-radius:var(--pm-radius); box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.pm-toast.show{ opacity:1; transform:translate(-50%,0) }

/* ---------- Help popover ---------- */
.pm-help-dot{ width:18px; height:18px; border:0; border-radius:var(--pm-radius-pill); background:var(--pm-info-tint); color:var(--pm-info-text); font:inherit; font-weight:var(--pm-weight-bold); display:inline-grid; place-items:center; cursor:help }
.pm-help-popover{ background:var(--pm-brand-blue); color:#fff; padding:10px 12px; border-radius:var(--pm-radius); box-shadow:var(--pm-shadow-pop); max-width:46ch }

/* ---------- Brand bar / titlebar ---------- */
.pm-brandbar{ display:flex; justify-content:center; align-items:center; padding:20px 0 8px }
.pm-brandbar img{ max-height:44px; width:auto }
.pm-titlebar{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap }