/*!
* ProMach Design System — promach-ds-1.3.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.3.0 — WHITE-PAGE "EDGED" LOOK (approved by Nancy, 2026-10-05)
* ------------------------------------------------------------------
* Codifies the look first built for Team-WRAP and tuned in the Campaign
* Advisor (2026-10-02), so every tool gets it from this file instead of
* re-deriving it by hand. Brand palette, type, and the --pm-* vocabulary
* are unchanged; every 1.2.0 class still exists.
*
* 1. WHITE PAGE. --pm-bg is now #ffffff (was the #f6f7f9 off-white).
* Separation comes from edges and shadow, not from a tinted page.
*
* 2. DEFINED EDGE. New --pm-edge (#BCC1C7), darker than brand Light Gray
* #D7D8D6, so panes and cards still read as distinct on white. Cards,
* modals, buttons, inputs, the top bar and table wrappers use it.
* Row hairlines inside tables and lists stay the soft --pm-border.
*
* 3. PANE SHADOW. New --pm-shadow-pane (soft two-layer) for cards and
* panels, and --pm-shadow-side for a sidebar casting onto the main pane.
* --pm-shadow-card is kept (now equal to the pane shadow).
*
* 4. HERO CTA. New .pm-btn-hero: SOLID ProMach Green, white text. The one
* sanctioned solid green button: the single "start something" action on
* a landing/home screen (e.g. "+ New campaign", "Start a new session").
* At most one per screen. Every other primary stays tonal .pm-btn-primary.
*
* 5. NEW CHROME. .pm-topbar (slim full-width header: 20px logo + app name,
* edge underline), .pm-page-title (navy), .pm-side (sidebar pane),
* .pm-seg (segmented filter), .pm-table-wrap, and status accents for
* cards (.pm-card-ready / .pm-card-draft).
*
* Upgrading from 1.2.0: drop the file in and bump the . A tool that
* hardcoded the off-white page or #D7D8D6 borders in its own CSS should
* re-point those at --pm-bg / --pm-edge.
*
* ------------------------------------------------------------------
* 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 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: #ffffff; /* app background (1.3.0: white page; was #f6f7f9) */
--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-edge: #BCC1C7; /* 1.3.0: defined edge for panes, cards, controls on white */
--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-pane: 0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.05); /* 1.3.0 */
--pm-shadow-side: 2px 0 8px rgba(16,24,40,.06); /* 1.3.0: sidebar onto main pane */
--pm-shadow-card: var(--pm-shadow-pane); /* 1.3.0: was 0 1px 3px rgba(16,24,40,.06) */
--pm-pane-shadow: var(--pm-shadow-pane); /* alias: the name the Campaign Advisor used */
--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-edge);
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;
}
/* 1.3.0 HERO CTA — the one sanctioned SOLID green button: the single
"start something" action on a landing/home screen. At most one per screen;
every other primary stays the tonal .pm-btn-primary above. */
.pm-btn-hero{
background:var(--pm-brand);
border-color:var(--pm-brand);
color:var(--pm-text-on-brand);
font-weight:var(--pm-weight-bold);
font-size:var(--pm-fs-4);
padding:11px 20px;
box-shadow:var(--pm-shadow-pane);
}
.pm-btn-hero:hover{
background:var(--pm-brand-hover);
border-color:var(--pm-brand-hover);
color:var(--pm-text-on-brand);
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-edge);
border-radius:var(--pm-radius-lg);
box-shadow:var(--pm-shadow-pane);
padding:var(--pm-space-5);
}
/* 1.3.0 status accents: a 3px top rule says "ready" (green) or "in progress" (amber). */
.pm-card-ready{ border-top:3px solid var(--pm-brand) }
.pm-card-draft{ border-top:3px solid var(--pm-warn) }
/* ---------- 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-edge);
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) }
/* 1.3.0: the edged, shadowed frame around a table; row hairlines inside stay soft. */
.pm-table-wrap{ overflow-x:auto; border:1px solid var(--pm-edge); border-radius:var(--pm-radius); box-shadow:var(--pm-shadow-pane); background:var(--pm-surface) }
/* ---------- 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-edge); 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 }
/* ================================================================
* 1.3.0 chrome — the white-page "edged" layout pieces.
* ================================================================ */
/* Slim full-width top bar: small logo + app name on the left, actions right.
Replaces the big centered .pm-brandbar on working screens (keep the
brandbar for a sign-in or splash page if you want the large logo). */
.pm-topbar{
display:flex; align-items:center; gap:var(--pm-space-3); flex-wrap:wrap;
padding:var(--pm-space-3) var(--pm-space-5);
background:var(--pm-surface); border-bottom:1px solid var(--pm-edge);
}
.pm-topbar-brand{
display:inline-flex; align-items:center; gap:var(--pm-space-2);
font-weight:var(--pm-weight-bold); font-size:0.875rem; color:var(--pm-text); white-space:nowrap;
}
.pm-topbar-brand img{ height:20px; width:auto; display:block }
.pm-topbar-spacer{ flex:1 }
/* Page title: navy, bold, slightly tight. Subtitle muted beneath it. */
.pm-page-title{
margin:0; font-size:1.5rem; font-weight:var(--pm-weight-bold);
color:var(--pm-brand-blue); letter-spacing:var(--pm-tracking-head);
}
.pm-page-sub{ margin:2px 0 0; font-size:0.875rem; color:var(--pm-text-muted) }
/* Sidebar pane: white, edged on the right, casting a soft shadow onto the main pane. */
.pm-side{
background:var(--pm-surface); border-right:1px solid var(--pm-edge);
box-shadow:var(--pm-shadow-side); position:relative; z-index:3;
}
/* Section label inside panes and lists (e.g. "BRIEFS READY 3"). */
.pm-group-label{
font-size:11px; font-weight:var(--pm-weight-bold); letter-spacing:.06em; text-transform:uppercase;
color:var(--pm-text-muted); display:flex; gap:6px; align-items:center;
}
.pm-count{
font-size:11px; font-weight:var(--pm-weight-medium); letter-spacing:0;
background:var(--pm-surface-2); border:1px solid var(--pm-border);
border-radius:var(--pm-radius-pill); padding:0 7px; color:var(--pm-text-muted);
}
/* Segmented filter: joined buttons, the active one in the success tint. */
.pm-seg{ display:inline-flex; border:1px solid var(--pm-edge); border-radius:10px; overflow:hidden; background:var(--pm-surface) }
.pm-seg button{
font-family:inherit; background:var(--pm-surface); border:0; border-left:1px solid var(--pm-edge);
padding:7px 12px; font-size:0.78rem; font-weight:var(--pm-weight-bold); color:var(--pm-text-muted); cursor:pointer;
}
.pm-seg button:first-child{ border-left:0 }
.pm-seg button:hover{ background:var(--pm-surface-2) }
.pm-seg button[aria-pressed="true"]{ background:var(--pm-success-tint); color:var(--pm-success-text) }
.pm-seg button:focus-visible{ outline:none; box-shadow:inset var(--pm-focus-ring) }