/* MASEST component library — reusable UI primitives built on the css/style.css
   token system (:root --ink/--accent/--line/--surface/--shadow-*/--r-*/--space-*).
   Load AFTER style.css. Components are additive; nothing here overrides existing
   page styles. See DESIGN.md for usage. Every motion respects prefers-reduced-motion. */

/* ----------------------------------------------------------------------------
   Accessibility — baseline keyboard focus ring (specificity 0 via :where, so
   component-specific focus styles still win) + screen-reader / skip-link helpers
---------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #0e7c86);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1100;
  background: var(--accent, #0e7c86); color: #fff; padding: 8px 14px;
  border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600;
  transition: top .15s var(--ease-out, ease);
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ----------------------------------------------------------------------------
   Skeleton loader — placeholder shimmer while async data (catalog, orders) loads
---------------------------------------------------------------------------- */
.skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--panel, #f1f3f4);
  border-radius: var(--r-input, 10px);
  min-height: 1em;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: skeleton-sweep 1.25s var(--ease-out-soft, ease) infinite;
}
.skeleton-text { height: .72em; margin: .35em 0; border-radius: 6px; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-line { height: 1.05em; }
.skeleton-block { height: 120px; border-radius: var(--r-card, 16px); }
@keyframes skeleton-sweep { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ----------------------------------------------------------------------------
   Badge — compact status / metadata label
---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  border-radius: var(--r-pill, 999px);
  background: var(--panel, #f1f3f4);
  color: var(--ink-soft, #393d44);
  white-space: nowrap;
}
.badge-accent  { background: var(--accent-soft, #e3f0f1); color: var(--accent-ink, #0a5b62); }
.badge-success { background: var(--status-success-bg); color: var(--status-success-ink); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-ink); }
.badge-danger  { background: var(--status-danger-bg); color: var(--status-danger-ink); }
.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* NET aging chip (#10) — open-balance age in the admin order list; overdue
   buckets escalate amber → red so finance can triage at a glance. */
.net-age {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--r-pill, 999px);
  background: var(--panel, #f1f3f4);
  color: var(--muted, #5f656d);
  white-space: nowrap;
}
.net-age--over30 { background: var(--status-warning-bg); color: var(--status-warning-ink); }
.net-age--over60 { background: var(--status-warning-strong-bg); color: var(--status-warning-strong-ink); }
.net-age--over90 { background: var(--status-danger-bg); color: var(--status-danger-ink); }

/* ----------------------------------------------------------------------------
   Tabs — canonical tab strip (adopt incrementally; dashboard/admin keep theirs
   until refactored). role="tablist" on the container, role="tab" on buttons.
---------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #e4e6e9);
  margin-bottom: 20px;
}
.tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--muted, #5f656d);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .18s var(--ease-out, ease), border-color .18s var(--ease-out, ease);
}
.tab:hover { color: var(--ink, #15171c); }
.tab[aria-selected="true"], .tab.active {
  color: var(--accent-ink, #0a5b62);
  border-bottom-color: var(--accent, #0e7c86);
}
.tab:focus-visible { outline: 2px solid var(--accent, #0e7c86); outline-offset: 2px; border-radius: 6px; }

/* ----------------------------------------------------------------------------
   Empty state — no-results / zero-data placeholder
---------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 24px;
  border: 1px dashed var(--line, #e4e6e9);
  border-radius: var(--r-card, 16px);
  background: var(--surface, #fff);
  color: var(--muted, #5f656d);
}
.empty-state .empty-icon { font-size: 1.9rem; color: var(--accent, #0e7c86); line-height: 1; }
.empty-state .empty-title { font-weight: 700; color: var(--ink, #15171c); font-size: 1.25rem; }
.empty-state .empty-body { max-width: 38ch; font-size: 1rem; line-height: 1.5; }
.empty-state[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   Pagination
---------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}
.pagination button {
  appearance: none;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line, #e4e6e9);
  border-radius: var(--r-input, 10px);
  background: var(--surface, #fff);
  color: var(--ink-soft, #393d44);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--ease-out, ease), background .16s var(--ease-out, ease);
}
.pagination button:hover:not(:disabled) { border-color: var(--accent, #0e7c86); }
.pagination button[aria-current="page"] {
  background: var(--accent, #0e7c86);
  border-color: var(--accent, #0e7c86);
  color: #fff;
}
.pagination button:disabled { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------------------
   Modal / dialog — overlay with focus-trap (JS adds .open; Esc + backdrop close)
---------------------------------------------------------------------------- */
/* Native <dialog> detail modal (admin order drill-down) — sizing only; rest is UA default. */
.detail-dialog {
  width: min(640px, 94vw);
  max-height: 86vh;
  overflow: auto;
  border: 0;
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-lg, 0 28px 64px -16px rgba(20, 24, 32, .16));
  padding: 24px;
}
.detail-dialog::backdrop { background: rgba(20, 24, 32, .46); }
.detail-dialog-actions { margin: 18px 0 0; text-align: right; }
.detail-dialog > h3:first-child { margin: 0 0 14px; }
.dialog-btn-row { display: flex; gap: 10px; justify-content: flex-end; margin: 16px 0 0; padding: 0; list-style: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 32, .46);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease-out, ease), visibility .2s var(--ease-out, ease);
  z-index: 1000;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-lg, 0 28px 64px -16px rgba(20, 24, 32, .16));
  padding: 26px;
  transform: translateY(8px) scale(.99);
  transition: transform .2s var(--ease-out, ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--ink, #15171c); }
.modal-close {
  appearance: none;
  border: 0;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted, #5f656d);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.modal-close:focus-visible { outline: 2px solid var(--accent, #0e7c86); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { transition: none; }
  .modal { transform: none; }
}

/* ----------------------------------------------------------------------------
   Search field — labelled input with leading icon (Phosphor)
---------------------------------------------------------------------------- */
.search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
}
.search-field .ph {
  position: absolute;
  left: 12px;
  color: var(--muted, #5f656d);
  pointer-events: none;
  font-size: 1.05rem;
}
.search-field input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--line, #e4e6e9);
  border-radius: var(--r-pill, 999px);
  background: var(--surface, #fff);
  font: inherit;
  font-size: .92rem;
  color: var(--ink, #15171c);
  transition: border-color .16s var(--ease-out, ease), box-shadow .16s var(--ease-out, ease);
}
.search-field input::placeholder { color: var(--muted, #5f656d); }
.search-field input:focus-visible {
  outline: none;
  border-color: var(--accent, #0e7c86);
  box-shadow: 0 0 0 3px var(--accent-soft, #e3f0f1);
}

/* ----------------------------------------------------------------------------
   Recommended-products grid (industry pages) — auto-fit so a 4-product set
   fills one clean row instead of a 3+1 orphan. Scoped: never touches the
   catalog .prod-grid. Responsive on its own via minmax (no media query).
---------------------------------------------------------------------------- */
.prod-grid.prod-grid-rec { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
/* A 5-product set reads cleaner as 3+2 than the auto-fit 4+1 orphan. Tablet+
   only; below that the auto-fit minmax above keeps stacking. :has matches the
   sole 5-product grid; 3- and 4-product grids fall through to auto-fit. */
@media (min-width: 760px) {
  .prod-grid.prod-grid-rec:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------------------
   Interior hero clearance + rhythm. The site header is a fixed ~76px bar.
   Base style.css gave .page-hero only ~58px top (title tucked under the nav)
   and .hero-split ~92px (tight) — so interior heroes were inconsistent. Unify
   both to one rhythm that clears the nav with steady breathing room. Loaded
   after style.css, so these win at equal specificity. The h1 is already a
   consistent 80px (.display) and left-aligned, so only top spacing needs it.
---------------------------------------------------------------------------- */
body .page-hero,
body .hero-split {
  padding-top: 84px;
  padding-bottom: 112px;
}

body:has(#pMediaSection) .page-hero { padding-top: 72px; }
body .product-detail-hero { padding-bottom: 42px; }
body:has(#pMediaSection) .product-detail-hero { padding-bottom: 112px; }
body:has(.about-router) .page-hero { padding-bottom: 112px; }
@media (max-width: 680px) {
  body .page-hero,
  body .hero-split {
    padding-top: 72px;
    padding-bottom: 96px;
  }
  body:has(#pMediaSection) .page-hero { padding-top: 82px; }
  body:has(#pMediaSection) .product-detail-hero { padding-bottom: 108px; }
  body:has(.about-router) .page-hero { padding-bottom: 96px; }
}

/* Programs pricing: the cadence label sits on its own line so the widest tier
   ($5,000-15,000+) never wraps "/ mo" awkwardly while narrower tiers stay inline. */
.tier-price small { display: block; margin-top: 2px; }

/* CRM contact panel (admin company drawer) — slice 1 */
.crm-ws { display: grid; gap: 14px; }
.crm-ws-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.crm-ws-head h2,
.crm-section-head h3,
.crm-panel-head h3 { margin: 0; line-height: 1.2; }
.crm-ws-head p.muted,
.crm-section-head p.muted { margin: 5px 0 0; }
.crm-ws-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.crm-panel { margin-top: 16px; border-top: 1px solid var(--border, #e5e7eb); padding-top: 12px; display: grid; gap: 10px; }
.crm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; padding: 3px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface-2, #eef2f7); }
.crm-tabs .btn { border-color: transparent; }
.crm-tabs .is-active { background: var(--surface, #fff); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.crm-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.crm-quick-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.crm-quick-stats span { min-width: 86px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); color: var(--muted, #6b7280); font-size: .75rem; font-weight: 700; }
.crm-quick-stats b { color: var(--ink, #1a1a1a); font-size: .95rem; font-variant-numeric: tabular-nums; }
.crm-inbox-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.crm-inbox-tools .crm-tabs { margin-bottom: 0; }
.crm-feed, .crm-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-feed-item { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); }
.crm-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); }
.crm-feed-title { font-weight: 700; }
.crm-feed-detail { font-size: .85rem; color: var(--muted, #6b7280); white-space: pre-wrap; }
.crm-feed-at { font-size: .75rem; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.crm-task.is-done .crm-feed-title { text-decoration: line-through; opacity: .6; }
.crm-note-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .35fr) auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.crm-task-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-bottom: 10px; }
.crm-field { display: grid; gap: 5px; min-width: 0; color: var(--muted, #6b7280); font-size: .78rem; font-weight: 700; }
.crm-field .adm-input,
.crm-field .adm-select { max-width: none; }
.crm-note-form textarea,
.crm-task-form input { min-width: 0; }
.crm-mini-options { grid-column: 1 / -1; color: var(--muted, #6b7280); font-size: .82rem; }
.crm-mini-options summary { cursor: pointer; font-weight: 700; }
.crm-mini-options .adm-select { margin-top: 8px; max-width: 220px; }
.crm-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.adm-tools.crm-contact-search { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, .45fr) auto; align-items: end; margin-bottom: 10px; }
.adm-tools.crm-contact-search .adm-search,
.adm-tools.crm-contact-search .adm-select { max-width: none; }
.crm-dir-heading { margin: 18px 0 8px; font-size: .95rem; }
.crm-dir-heading .muted { font-weight: 400; }
@media (max-width: 640px) {
  .crm-ws-head,
  .crm-section-head { grid-template-columns: 1fr; }
  .crm-ws-shortcuts,
  .crm-quick-stats { justify-content: flex-start; }
  .crm-note-form,
  .crm-task-form { grid-template-columns: 1fr; }
  .adm-tools.crm-contact-search { grid-template-columns: 1fr; }
  .crm-inline-fields { grid-template-columns: 1fr; }
  .crm-task { grid-template-columns: auto minmax(0, 1fr); }
  .crm-task .badge,
  .crm-task [data-inbox-open] { grid-column: 2; justify-self: start; }
}

/* CRM contacts (company drawer) — slice 4 */
.crm-contact-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, .75fr) minmax(160px, 1fr) auto auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.crm-contact-options { grid-column: 1 / -1; }
.crm-contact-import { margin: 0 0 10px; color: var(--muted, #6b7280); font-size: .82rem; }
.crm-contact-import summary { cursor: pointer; font-weight: 700; }
.crm-contact-import div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.crm-contact-import-trigger { cursor: pointer; }
.crm-contact-import-help { font-size: .78rem; }
.crm-contact-form input { min-width: 0; }
.crm-contact-primary-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--muted, #6b7280); white-space: nowrap; }
.crm-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-contact { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); }
.crm-contact.is-primary { border-color: var(--accent, #0e7c86); background: var(--surface-2, #eef2f7); }
.crm-contact-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-contact-star { color: var(--accent, #0e7c86); }
.crm-contact-role { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.crm-contact-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex-shrink: 0; }
.crm-row-menu { position: relative; }
.crm-row-menu > summary { list-style: none; cursor: pointer; }
.crm-row-menu > summary::-webkit-details-marker { display: none; }
.crm-row-menu > span { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-contact-drawer-head { justify-content: space-between; align-items: start; }
.crm-contact-drawer-title { margin: 0; }
.crm-contact-drawer-meta { margin: 2px 0 0; }
@media (max-width: 820px) {
  .crm-contact-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .crm-contact { flex-direction: column; }
  .crm-contact-actions { justify-content: flex-start; }
}

/* CRM deal pipeline (admin Quotes board + deal drawer) — slice 2 */
.pipe-toggle { display: inline-flex; gap: 4px; margin: 0 0 12px; }
.saved-views { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.saved-views .adm-input { max-width: 160px; }
.pipe-toggle .is-active { background: var(--surface-2, #eef2f7); font-weight: 600; }
.pipe-forecast { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.pipe-forecast b { font-size: 1.1rem; }
.pipe-forecast .pipe-chip { font-size: .8rem; color: var(--muted, #6b7280); }
.pipe-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.pipe-col { flex: 0 0 240px; background: var(--surface-2, #f4f7f8); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 8px; min-height: 120px; }
.pipe-col.is-over { outline: 2px dashed var(--accent, #0e7c86); outline-offset: -2px; }
.pipe-col-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; padding: 4px 6px 8px; }
.pipe-col-head .muted { font-weight: 400; font-size: .8rem; }
.pipe-card { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; display: grid; gap: 6px; }
.pipe-card:focus-visible { outline: 2px solid var(--accent, #0e7c86); outline-offset: 1px; }
.pipe-card.is-dragging { opacity: .5; }
.pipe-card.is-stale { border-color: var(--status-warning-ink); background: var(--status-warning-bg); }
.pipe-card-title { font-weight: 600; }
.pipe-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted, #6b7280); }
.pipe-card select { font-size: .75rem; width: 100%; }
.adm-drawer { border: none; border-radius: 12px 0 0 12px; padding: 0; width: min(560px, 94vw); max-width: 94vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; background: var(--surface, #fff); color: var(--ink, #1a1a1a); }
.adm-drawer::backdrop { background: rgba(0, 0, 0, .4); }
.adm-drawer-inner { padding: 20px; display: grid; gap: 12px; }
.adm-drawer-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 8px; }
.adm-drawer-tabs .is-active { background: var(--surface-2, #eef2f7); font-weight: 600; }
.drawer-details { display: grid; gap: 8px; }
.drawer-details label { display: grid; gap: 2px; font-size: .85rem; }
@media (max-width: 900px) { .pipe-col { flex-basis: 200px; } }

/* CRM pipeline reports (slice 3) */
.pipe-report { display: grid; gap: 16px; }
.pipe-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pipe-kpi { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.pipe-kpi b { font-size: 1.2rem; }
.pipe-report-block { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.pipe-report-block h3 { margin: 0 0 10px; font-size: .95rem; }
.pipe-funnel-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.pipe-funnel-label { font-size: .85rem; }
.pipe-funnel-val { font-size: .8rem; color: var(--muted, #6b7280); white-space: nowrap; }
.pipe-bar { display: block; height: 14px; border-radius: 7px; background: var(--surface-2, #eef2f7); overflow: hidden; }
.pipe-bar-fill { display: block; height: 100%; background: var(--accent, #0e7c86); border-radius: 7px; }
.pipe-loss { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-loss .pipe-chip { padding: 4px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; font-size: .8rem; }

/* Toast notifications (non-blocking alert replacement — js/util.js toast()) */
.toast-region {
  position: fixed;
  z-index: 1000;
  right: clamp(12px, 4vw, 28px);
  bottom: clamp(12px, 4vh, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line, #e4e6e9);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-md, 0 18px 42px -20px rgba(16, 74, 80, .28));
  color: var(--ink, #15171c);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-shown { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-msg { margin: 0; font-size: .9rem; line-height: 1.4; white-space: pre-line; }
.toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  font-size: 1.15rem;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.toast-error { border-color: var(--status-danger-ink); background: var(--status-danger-bg); color: var(--status-danger-ink); }
.toast-warning { border-color: var(--status-warning-ink); background: var(--status-warning-bg); color: var(--status-warning-ink); }
.toast-success { border-color: var(--status-success-ink); background: var(--status-success-bg); color: var(--status-success-ink); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .22s ease; transform: none; }
  .toast.is-shown, .toast.is-leaving { transform: none; }
}

/* Admin: live Markdown preview for CMS blog body (js/admin/content.js). */
.adm-md-preview { margin-top: 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; overflow: hidden; }
.adm-md-preview-label { display: block; padding: 6px 12px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #777); background: rgba(0,0,0,.03); border-bottom: 1px solid var(--line, #e5e7eb); }
.adm-md-preview-body { padding: 12px 16px; font-size: .95rem; line-height: 1.65; }
.adm-md-preview-body:empty::after { content: "Start typing Markdown to preview…"; color: var(--muted, #999); font-style: italic; }
.adm-md-preview-body h1, .adm-md-preview-body h2, .adm-md-preview-body h3, .adm-md-preview-body h4 { margin: 14px 0 6px; line-height: 1.25; }
.adm-md-preview-body p { margin: 10px 0; }
.adm-md-preview-body ul, .adm-md-preview-body ol { margin: 10px 0; padding-left: 22px; }
.adm-md-preview-body blockquote { margin: 10px 0; padding: 2px 16px; border-left: 4px solid var(--brand, #0e7c86); color: var(--muted, #555); font-style: italic; }
.adm-md-preview-body pre { background: #1e1e2e; color: #e5e7eb; padding: 12px; border-radius: 8px; overflow-x: auto; }
.adm-md-preview-body :not(pre) > code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.adm-md-preview-body img { max-width: 100%; height: auto; border-radius: 6px; }
.adm-md-preview-body hr { border: 0; border-top: 1px solid var(--line, #e5e7eb); margin: 14px 0; }

/* Admin: tag chip editor for CMS list fields with widget:"chips". */
.adm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }
.adm-chips-list { display: contents; }
.adm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--brand, #3b2a6b); color: #fff; font-size: .82rem; line-height: 1.4; }
.adm-chip-x { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 4px; border-radius: 999px; }
.adm-chip-x:hover { background: rgba(255,255,255,.2); }

/* ----------------------------------------------------------------------------
   Reviews — star summary, review list, write form (js/reviews.js). Full mode on
   product.html; compact star-badge mode on the services.html line-item grid.
---------------------------------------------------------------------------- */
.rv-title { margin: 0 0 4px; }
.rv-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: .95rem; }
.rv-summary.rv-empty { color: var(--muted, #5f656d); font-size: .9rem; }
.rv-stars { color: var(--rating-star, #e3a008); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.rv-count { color: var(--muted, #5f656d); font-size: .86rem; }
.rv-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill, 999px); background: var(--accent-soft, #e3f0f1); color: var(--accent-ink, #0a5b62); font-size: .72rem; font-weight: 700; }
.rv-list { display: flex; flex-direction: column; }
.rv-card { border-top: 1px solid var(--line, #e4e6e9); padding: 14px 0; }
.rv-card:first-child { border-top: 0; padding-top: 0; }
.rv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rv-card h4 { margin: 2px 0; font-size: .96rem; }
.rv-card p { margin: 4px 0; color: var(--ink-soft, #393d44); font-size: .92rem; line-height: 1.55; }
/* Reset the global dark site-footer style (style.css `footer{background:var(--ink)…}`)
   that otherwise bleeds into this card's inner <footer>, painting a dark band + 72px pad. */
.rv-card footer { background: none; padding: 0; color: var(--muted, #5f656d); font-size: .78rem; }
.rv-form { display: grid; gap: 12px; margin-top: 18px; max-width: 32rem; }
.rv-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--ink-soft, #393d44); }
.rv-field input, .rv-field select, .rv-field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line, #e4e6e9); border-radius: var(--r-input, 10px); color: var(--ink, #15171c); background: var(--surface, #fff); }
.rv-form button { justify-self: start; }
.rv-msg { font-size: .84rem; color: var(--muted, #5f656d); }
.rv-gate { color: var(--muted, #5f656d); font-size: .9rem; }
.rv-gate a { color: var(--accent-ink, #0a5b62); font-weight: 600; }

/* Compact star badge inline in the services.html catalog grid — hidden by
   default (see js/main/service-catalog.js markup) until js/reviews.js confirms
   the sku has at least one approved review. */
.rv-compact { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .82rem; color: var(--muted, #5f656d); }
.rv-compact .rv-stars { font-size: .92rem; letter-spacing: 1px; }
.rv-compact b { color: var(--ink, #15171c); }
.adm-chip-input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font: inherit; padding: 4px; color: inherit; }

/* Admin: Markdown body toolbar (Insert image + syntax hint). */
.adm-md-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.adm-md-hint { font-size: .78rem; color: var(--muted, #777); }

/* Admin newsletter: body editor + live preview side-by-side on wide screens. */
.nl-edit-grid { display: grid; gap: 14px; }
.nl-edit-grid > label { display: flex; flex-direction: column; }
.nl-edit-grid .adm-md-preview { min-height: 260px; }
@media (min-width: 900px) { .nl-edit-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* Admin: shared native dialog layout and Newsletter image-library picker. */
.confirm-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); margin: auto; padding: 0; border: 0; border-radius: 24px; color: var(--ink, #15171c); background: var(--surface, #fff); box-shadow: 0 24px 80px rgba(20, 24, 32, .28); }
.confirm-dialog::backdrop { background: rgba(20, 24, 32, .48); }
.confirm-dialog-body { display: grid; gap: 16px; margin: 0; padding: 32px; }
.confirm-dialog-msg { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.confirm-dialog-field { display: grid; gap: 8px; font-weight: 700; color: var(--ink, #15171c); }
.confirm-dialog-field .adm-input { box-sizing: border-box; width: 100%; margin: 0; }
.confirm-dialog-library { display: grid; gap: 10px; }
.confirm-dialog-library-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.confirm-dialog-library-head p { margin: 4px 0 0; font-size: .86rem; line-height: 1.4; }
.confirm-dialog-image-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; max-height: 280px; overflow: auto; padding: 4px; }
.confirm-dialog-image-library[hidden] { display: none; }
.confirm-dialog-image-library > p { grid-column: 1 / -1; margin: 4px 0; }
.nl-image-library-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-height: 72px; padding: 8px; border: 1px solid var(--line, #e4e6e9); border-radius: 12px; color: inherit; background: var(--surface, #fff); font: inherit; text-align: left; cursor: pointer; }
.nl-image-library-item:hover { border-color: var(--accent, #0e7c86); background: var(--accent-soft, #e3f0f1); }
.nl-image-library-item:focus-visible { outline: 3px solid var(--accent, #0e7c86); outline-offset: 2px; }
.nl-image-library-item img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--line, #e4e6e9); }
.nl-image-library-item span { display: grid; gap: 3px; min-width: 0; }
.nl-image-library-item b, .nl-image-library-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-image-library-item small { color: var(--muted, #5f656d); }
.confirm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }

/* Shared Blog + Newsletter image flow: compact, paged library, no dialog scrolling. */
.shared-image-picker { width: min(660px, calc(100vw - 32px)); max-width: min(660px, calc(100vw - 32px)); }
.shared-image-picker .confirm-dialog-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; }
.shared-image-picker-head h2 { margin: 0; font-size: 1.45rem; }
.shared-image-picker-head .adm-eyebrow { margin: 0 0 4px; }
.shared-image-picker-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shared-image-picker-actions .btn { min-height: 52px; justify-content: center; }
.shared-image-upload, .shared-image-library { display: grid; gap: 12px; }
.shared-image-library { padding-block: 0; }
.shared-image-upload { padding-bottom: 6px; }
.shared-image-upload[hidden], .shared-image-library[hidden], .shared-image-library-pager[hidden] { display: none; }
.shared-image-upload > p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-image-upload > .btn { justify-self: start; }
.shared-image-picker .adm-status:empty { display: none; }
.shared-image-picker .confirm-dialog-actions { margin: 0; }
.shared-image-library-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.shared-image-library-head strong { display: inline-flex; align-items: baseline; gap: 8px; }
.shared-image-library-head small, .shared-image-library-head span { color: var(--muted, #5f656d); font-size: .82rem; }
.shared-image-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shared-image-library-grid > p { grid-column: 1 / -1; margin: 0; }
.shared-image-library-card { display: grid; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--line, #e4e6e9); border-radius: 14px; background: var(--surface, #fff); }
.shared-image-library-card img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; background: var(--line, #e4e6e9); }
.shared-image-library-card b, .shared-image-library-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-image-library-card small { margin-top: 3px; color: var(--muted, #5f656d); font-size: .76rem; }
.shared-image-library-card-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; }
.shared-image-library-card-actions .btn:first-child { flex: 1; justify-content: center; }
.shared-image-library-card-actions .btn:last-child { min-width: 42px; padding-inline: 10px; justify-content: center; }
.shared-image-library-card:only-child { grid-column: 1 / -1; grid-template-columns: minmax(142px, 190px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: start; }
.shared-image-library-card:only-child img { grid-row: 1 / -1; height: 120px; aspect-ratio: auto; }
.shared-image-library-card:only-child .shared-image-library-card-actions { align-self: end; }
.shared-image-library-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.shared-image-library-pager span { color: var(--muted, #5f656d); font-size: .82rem; }
@media (max-width: 560px) {
  .confirm-dialog-body { padding: 24px; }
  .confirm-dialog-library-head { align-items: stretch; flex-direction: column; }
  .confirm-dialog-library-head .btn { width: 100%; justify-content: center; }
  .confirm-dialog-actions .btn { flex: 1; justify-content: center; }
  .shared-image-picker .confirm-dialog-body { padding: 20px; }
  .shared-image-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-image-library-card:only-child { grid-template-columns: 112px minmax(0, 1fr); }
  .shared-image-library-card:only-child img { height: 100px; }
}