/* SolarConcept Cebu - Landing Page
   Stack: vanilla CSS + Bootstrap 5 (utilities only)
   Dial: VARIANCE 6 / MOTION 4 / DENSITY 4
   No build step. No framework. No nonsense. */

/* ---------- Design tokens ----------
   Palette: derived directly from the official SolarConcept Cebu logo.
   Three brand colors (amber / cobalt / green) + warm paper + deep navy ink.
   Accent system is BUDGETED across the page, not single-color: amber is primary,
   cobalt is secondary, green is reserved for trust / eco signals only. */

:root {
  /* Brand primaries - extracted from logo at 500x500 */
  --amber:        #F2B53C;   /* sun, SCC letterforms */
  --amber-deep:   #D9961A;   /* hover / deeper amber */
  --amber-soft:   #FBE0A0;   /* light tinted bg */

  --cobalt:       #0A6CC7;   /* solar panel main blue */
  --cobalt-deep:  #004F94;   /* deeper cobalt */
  --cobalt-soft:  #DCE9F6;   /* light tinted bg */

  --leaf:         #3F9D2E;   /* leaf + bolt accent */
  --leaf-deep:    #2E7B1F;
  --leaf-soft:    #DCEFCB;

  /* Lead-gen redesign palette - new tokens layered on top of existing.
     The hero is a dark navy gradient with sky-blue halo accents and a
     strong yellow CTA. The trust strip and following white sections
     reuse the brand amber for the pill CTAs. */
  --sun:           #FFC727;   /* primary CTA yellow (hero / trust / installment) */
  --sun-deep:      #F5A800;   /* hover for sun */
  --sun-soft:      #FFF4D1;   /* tinted bg for sun blocks */

  --sky:           #2BA3FF;   /* accent blue (hero halo / icons / pills) */
  --sky-deep:      #1B7FCC;
  --sky-soft:      #D8ECFB;

  --hero-deep:     #0B2545;   /* hero gradient base */
  --hero-mid:      #134074;   /* hero gradient mid */
  --hero-near:     #1B5E97;   /* hero gradient near edge */

  --script:        'Caveat', 'Brush Script MT', cursive;

  /* Neutrals - slightly warmer than the prior cool palette to harmonize */
  --ink-950:      #0F1722;   /* deep navy ink (close to logo wave-bottom) */
  --ink-900:      #18202C;
  --ink-800:      #232C3A;
  --ink-700:      #303A4A;
  --ink-500:      #5E6878;
  --ink-300:      #97A0AE;
  --paper:        #FAF6EE;   /* warm off-white */
  --paper-2:      #F1EADB;
  --hairline:     #E0D9C7;

  /* Type */
  --font-display: 'Space Grotesk', 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Shape: one scale, all-sharp-ish with 2px radius */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-950);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-deep); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); }
h3 { font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); }

p  { margin: 0 0 1rem; }

/* ---------- Layout helpers ---------- */
.container-x {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

.section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.section--ink { background: var(--ink-950); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }

/* ---------- Top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.topbar .row-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar a { color: var(--ink-700); }
.topbar a:hover { color: var(--amber-deep); }

/* Topbar icon links (icon + text on desktop, icon-only on mobile) */
.topbar-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-700);
  text-decoration: none;
  transition: color 160ms ease;
}
.topbar-icon svg { flex-shrink: 0; }
.topbar-icon:hover { color: var(--amber-deep); }
.topbar-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (max-width: 820px) {
  .topbar-tagline { display: none; }
  /* Hide text labels on about page topbar (phone/email/fb) — show icons only */
  .util-left .topbar-text,
  .util-right .topbar-text { display: none; }
  /* Center the row + the icon group on mobile */
  .topbar .row-mini { justify-content: center; }
  .topbar-links { gap: 24px; justify-content: center; }
  .util-row { justify-content: center !important; gap: 32px; }
  .util-left, .util-right { display: flex; align-items: center; gap: 24px; justify-content: center; }
  .topbar-text { display: none; }
  .topbar-icon svg { width: 18px; height: 18px; }
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); }
}
.nav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand .logo-mark {
  border-radius: var(--r-1);
  object-fit: contain;
}
.brand .brand-text {
  white-space: nowrap;
}
.brand .brand-sub {
  color: var(--ink-500);
  font-weight: 400;
}
.footer .brand .brand-sub { color: var(--ink-300); }
.nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}
.nav ul a { color: var(--ink-700); }
.nav ul a:hover { color: var(--ink-950); }
.nav .cta { padding: 9px 16px; }

/* Hamburger toggle: hidden on desktop, shown at <=820px */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: stretch;
  transition: border-color 200ms ease;
}
.nav-toggle:hover { border-color: var(--ink-500); }
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--ink-950);
  border-radius: 1px;
  transition: transform 240ms var(--ease-out), opacity 160ms ease;
  transform-origin: center;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer: hidden on desktop, slides down on mobile when open */
.nav-drawer {
  display: none;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease-out);
}
.nav-drawer[hidden] { display: none !important; }
.nav-drawer nav { padding: 8px 0 16px; }
.nav-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-drawer li { border-bottom: 1px solid var(--hairline); }
.nav-drawer li:last-child { border-bottom: 0; }
.nav-drawer a {
  display: block;
  padding: 16px 24px;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.nav-drawer a:hover { color: var(--amber); }
.nav-drawer-cta { padding: 16px 24px; }
.nav-drawer-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
}

/* Lock body scroll when drawer is open (mobile only) */
body.nav-open { overflow: hidden; }

/* Lock body scroll when lightbox is open (all viewports) */
body.lb-open { overflow: hidden; }

@media (max-width: 820px) {
  .nav-primary { display: none; }
  .nav .cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: block; }
  .nav-drawer.is-open { max-height: 80vh; overflow-y: auto; }
}

/* ---------- Buttons (single shape system) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink-950);
  color: var(--paper);
}
.btn-primary:hover { background: var(--amber-deep); color: var(--paper); }

.btn-secondary {
  background: transparent;
  color: var(--ink-950);
  border-color: var(--ink-950);
}
.btn-secondary:hover { background: var(--ink-950); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244, 241, 236, 0.4);
}
.btn-ghost:hover { background: var(--paper); color: var(--ink-950); }

.btn-amber {
  background: var(--amber);
  color: var(--ink-950);
}
.btn-amber:hover { background: var(--amber-deep); color: var(--ink-950); }

.btn-cobalt {
  background: var(--cobalt);
  color: var(--paper);
}
.btn-cobalt:hover { background: var(--cobalt-deep); color: var(--paper); }

.btn-leaf {
  background: var(--leaf);
  color: var(--paper);
}
.btn-leaf:hover { background: var(--leaf-deep); color: var(--paper); }

/* ---------- Trust / brand strip (logo + tagline, single allowed use) ---------- */
.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;  /* Session 2: logo removed, center the tagline text */
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 2.5rem 0 0;
}
.brand-strip .logo {
  height: 56px;
  width: auto;
}
.brand-strip .words {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Session 2: logo removed, center both lines of text */
  gap: 4px;
  text-align: center;
}
.brand-strip .words .top {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink-950);
}
.brand-strip .words .bot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.brand-strip .words .bot .sep { color: var(--leaf); margin: 0 8px; }

/* Word-by-word fade animation for the tagline row.
   JS toggles .is-in on .w elements; CSS handles the transition.
   Default state (no .is-in) = invisible, so the first frame of the
   page doesn't show all words pre-rendered before JS runs. */
.bot[data-anim="words"] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.bot[data-anim="words"] .w.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Once the whole row has finished its first cycle, leave all words visible
   if the user has prefers-reduced-motion. JS also bails on reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .bot[data-anim="words"] .w { opacity: 1; transform: none; transition: none; }
}

/* ---------- Trust eco-badges (3 small leaf-styled pills) ---------- */
.eco-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--leaf);
  color: var(--leaf-deep);
  background: var(--leaf-soft);
  border-radius: var(--r-1);
}
.eco-pill::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--leaf);
  border-radius: 50%;
}

/* ---------- Hero (asymmetric split) ---------- */
.hero {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--hairline);
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
@media (max-width: 880px) {
  .hero .grid { grid-template-columns: 1fr; }
}

.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 1.25rem;
}
.hero .eyebrow .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--amber);
  border-radius: 50%;
  margin-right: 10px;
  transform: translateY(-1px);
}

.hero h1 .strike {
  color: var(--ink-300);
  text-decoration: line-through;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  margin-right: 4px;
}
.hero h1 .to {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--amber-deep);
}
.hero h1 .arrow {
  display: inline-block;
  margin: 0 0.2em;
  color: var(--amber);
  font-weight: 400;
}

.hero .sub {
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.15rem);
  color: var(--ink-700);
  max-width: 36ch;
  margin-top: 1.5rem;
}

.hero .ctas {
  display: flex;
  gap: 12px;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero .meta {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Hero right: stat panel */
.stat-panel {
  background: var(--ink-950);
  color: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-2);
  position: relative;
  overflow: hidden;
}
.stat-panel::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(232, 163, 61, 0.25), transparent 60%);
  pointer-events: none;
}
.stat-panel .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.stat-panel .before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}
.stat-panel .figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-panel .figure.before { color: var(--ink-300); text-decoration: line-through; text-decoration-color: var(--amber); }
.stat-panel .figure.after  { color: var(--amber); }
.stat-panel .figure small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); margin-left: 6px; font-weight: 400; }
.stat-panel .sep {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--amber);
}
.stat-panel .caption {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--ink-300);
  border-top: 1px solid var(--ink-700);
  padding-top: 14px;
}
.stat-panel .caption strong { color: var(--paper); font-weight: 600; }

/* ---------- Section header (no eyebrows, vertical stack) ---------- */
.sec-head {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 60ch;
}
.sec-head .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 14px;
}
.sec-head h2 { color: var(--ink-950); }
.sec-head p  { color: var(--ink-700); margin-top: 1rem; font-size: 1.05rem; max-width: 55ch; }

/* ---------- Projects (asymmetric grid, not 3-equal) ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.project {
  background: var(--ink-950);
  color: var(--paper);
  border-radius: var(--r-2);
  overflow: hidden;
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  isolation: isolate;
}
.project .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition: transform 600ms var(--ease-out);
}
.project:hover .bg { transform: scale(1.04); }
.project .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(14, 17, 22, 0.85) 100%);
}
.project .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 8px;
}
.project h3 { color: var(--paper); margin-bottom: 4px; }
.project .meta-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}

/* asymmetric project sizes */
.project.p-lg { grid-column: span 7; min-height: 440px; }
.project.p-md { grid-column: span 5; min-height: 280px; }
.project.p-sm { grid-column: span 4; min-height: 260px; }
.project.p-md2 { grid-column: span 8; min-height: 260px; }
@media (max-width: 880px) {
  .project.p-lg, .project.p-md, .project.p-sm, .project.p-md2 {
    grid-column: span 12;
    min-height: 240px;
  }
}

/* ---------- Project detail gallery (featured install, photo grid) ---------- */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.pg-tile {
  position: relative;
  margin: 0;
  grid-column: span 2;
  border-radius: 2px;
  overflow: hidden;
  background: #0e1116;
  border: 1px solid var(--ink-800);
}
.pg-tile.pg-wide { grid-column: span 3; }
.pg-tile.pg-spec { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.pg-tile img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.pg-tile:hover img { transform: scale(1.04); }
.pg-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(14,17,22,0.92) 80%);
  color: var(--paper);
}
.pg-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 4px;
}
.pg-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-200);
}
.pg-spec-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.pg-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-800);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.pg-spec-row span:first-child { color: var(--ink-300); }
.pg-spec-row span:last-child { color: var(--paper); font-weight: 500; }
.pg-spec-row.pg-spec-foot span:last-child { color: var(--leaf); }
.pg-cta {
  text-align: center;
  margin-top: 48px;
}
@media (max-width: 880px) {
  .project-gallery { grid-template-columns: repeat(2, 1fr); }
  .pg-tile, .pg-tile.pg-wide { grid-column: span 1; }
  .pg-tile.pg-spec { grid-column: span 2; }
  .pg-tile img { height: 220px; }
}

/* ---------- Services (zig-zag split, max 2 in a row) ---------- */
.service {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.service:last-child { border-bottom: 1px solid var(--hairline); }
.service .icon-mark {
  width: 56px; height: 56px;
  background: var(--ink-950);
  position: relative;
}
.service .icon-mark::after {
  content: "";
  position: absolute;
  inset: 14px;
  background: var(--amber);
}
.service:nth-child(odd) .icon-mark::after { border-radius: 50%; }
.service:nth-child(even) .icon-mark::after { border-radius: 0; }
.service .icon-mark.s2::after { background: var(--amber-deep); border-radius: 0; transform: rotate(45deg); }
.service .icon-mark.s3::after { background: var(--ink-950); border-radius: 50%; border: 4px solid var(--amber); inset: 10px; }
.service .icon-mark.s4::after { background: var(--amber); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }

.service h3 { margin-bottom: 6px; }
.service p { color: var(--ink-700); margin: 0; max-width: 60ch; }
.service .tags {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.service .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  color: var(--ink-700);
}

/* ---------- Packages (4 tiers, NOT border-everywhere spec sheet) ---------- */
.packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .packages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .packages { grid-template-columns: 1fr; } }

.pkg {
  background: var(--paper-2);
  padding: 24px;
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.pkg.featured {
  background: var(--ink-950);
  color: var(--paper);
}
.pkg.featured h3 { color: var(--paper); }
.pkg .tier {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber-deep);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pkg.featured .tier { color: var(--amber); }
.pkg .size {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--ink-950);
}
.pkg.featured .size { color: var(--paper); }
.pkg .segment {
  font-size: 0.85rem;
  color: var(--ink-700);
  min-height: 2.5em;
}
.pkg.featured .segment { color: var(--ink-300); }
.pkg .seg-bill {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 4px;
}
.pkg.featured .seg-bill { color: var(--amber); }
.pkg .cuts {
  margin: 18px 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkg .cuts .row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-950); }
.pkg .cuts .row .k { color: var(--ink-500); }
.pkg.featured .cuts .row { color: var(--paper); }
.pkg.featured .cuts .row .k { color: var(--ink-300); }
.pkg .includes {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--ink-700);
}
.pkg.featured .includes { color: var(--ink-300); }
.pkg .includes li {
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.pkg.featured .includes li { border-top-color: var(--ink-700); }
.pkg .price {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink-950);
}
.pkg.featured .price { color: var(--paper); border-top-color: var(--ink-700); }
.pkg .price small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-500);
  display: block;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.pkg.featured .price small { color: var(--ink-300); }

.pkg-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}

/* ---------- Calculator (bill input → size + savings) ---------- */
.calc {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

.calc .panel {
  background: var(--paper-2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-2);
}
.calc label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 8px;
}
.calc .input-wrap {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  padding: 4px 4px 4px 14px;
}
.calc .input-wrap .currency {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink-500);
  margin-right: 10px;
}
.calc input[type="number"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  padding: 12px 8px;
  outline: none;
  -moz-appearance: textfield;
}
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc input[type="number"]:focus { background: transparent; }
.calc .helper {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 10px;
  letter-spacing: 0.04em;
}

.calc .result {
  background: var(--cobalt-deep);
  color: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-2);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc .panel { position: relative; }
.calc .panel::after {
  content: "";
  position: absolute;
  top: -10px; right: -10px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(242, 181, 60, 0.18), transparent 70%);
  pointer-events: none;
  border-radius: var(--r-2);
}
.calc .result .placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cobalt-soft);
}
.calc .result .placeholder .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  margin-right: 8px;
  transform: translateY(-1px);
}
.calc .result .ro-system {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 18px 0 8px;
}
.calc .result .ro-system small {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--amber);
  margin-left: 6px;
  font-weight: 400;
}
.calc .result .ro-savings {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 18px;
}

/* Hero tiles (Recommended System / Monthly Savings / Annual Savings).
   Session 2: 3-up grid sits at the top of the result panel. The Annual
   Savings tile is highlighted with --sun (yellow) so it reads as the
   "money saved" payoff. */
.calc .result .ro-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .calc .result .ro-hero-grid { grid-template-columns: 1fr; }
}
.calc .result .ro-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-2);
  padding: 16px 18px;
  min-width: 0; /* allow grid items to shrink */
}
.calc .result .ro-tile-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt-soft);
  opacity: 0.85;
  margin-bottom: 8px;
}
.calc .result .ro-tile-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw + 0.4rem, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.1;
  margin-bottom: 6px;
  word-wrap: break-word;
  /* Keep the value on a single line; let the /mo /yr sit inline via white-space */
  white-space: nowrap;
}
.calc .result .ro-tile-value small {
  font-family: var(--font-mono);
  font-size: 0.55em;
  color: var(--cobalt-soft);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.calc .result .ro-tile-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cobalt-soft);
  opacity: 0.75;
  line-height: 1.4;
}
/* Highlighted annual savings tile --sun accent + dark text for AA */
.calc .result .ro-tile--accent {
  background: var(--sun);
  border-color: var(--sun);
}
.calc .result .ro-tile--accent .ro-tile-label {
  color: rgba(11, 37, 69, 0.85);
}
.calc .result .ro-tile--accent .ro-tile-value {
  color: var(--hero-deep);
}
.calc .result .ro-tile--accent .ro-tile-value small {
  color: rgba(11, 37, 69, 0.78);
}
.calc .result .ro-tile--accent .ro-tile-sub {
  color: rgba(11, 37, 69, 0.78);
  opacity: 1;
}

.calc .result .ro-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cobalt-soft);
  border-top: 1px solid rgba(220, 233, 246, 0.25);
  padding-top: 14px;
}
.calc .result .ro-meta strong {
  color: var(--paper);
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.calc .result .ro-range {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cobalt-soft);
  opacity: 0.75;
}
.calc .result .ro-savings-range {
  margin: -8px 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cobalt-soft);
  opacity: 0.85;
}
.calc .result .cta-row { margin-top: 22px; }

.calc .result .ro-note {
  margin-top: 14px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--amber-deep);
  background: rgba(196, 130, 60, 0.10);
  border-left: 2px solid var(--amber);
  border-radius: 2px;
}

/* ---------- Calculator section: dark navy gradient wrap ----------
   Session 2: matches the hero's dark navy gradient. Section header text
   switches to paper color; the input panel stays light to read as the
   "form" against the dark section bg. */
.calc-section {
  position: relative;
  color: var(--paper);
  background:
    radial-gradient(900px 500px at 88% 20%, rgba(43, 163, 255, 0.14), transparent 60%),
    radial-gradient(800px 600px at 8% 100%, rgba(255, 199, 39, 0.08), transparent 60%),
    linear-gradient(165deg, var(--hero-deep) 0%, var(--hero-mid) 60%, var(--hero-near) 100%);
  overflow: hidden;
  isolation: isolate;
}
.calc-section::before {
  /* Subtle sky-blue halo behind the heading */
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(43, 163, 255, 0.18), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.calc-section .sec-head { color: var(--paper); }
.calc-section .sec-head h2 { color: var(--paper); }
.calc-section .sec-head p { color: rgba(250, 246, 238, 0.78); }
.calc-section .sec-head .kicker {
  /* Override existing kicker (mono amber). For dark section, use sun yellow. */
  color: var(--sun);
}
/* Input panel: keep light so it stands out against the dark section bg */
.calc-section .calc .panel {
  background: var(--paper);
  color: var(--ink-950);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
}
.calc-section .calc .panel label { color: var(--ink-700); }
.calc-section .calc .input-wrap { background: var(--paper); border-color: var(--hairline); }
.calc-section .calc .input-wrap .currency { color: var(--ink-500); }
.calc-section .calc input[type="number"] { color: var(--ink-950); }
.calc-section .calc .helper { color: var(--ink-500); }
/* Result panel: keep the dark cobalt-deep, drop the panel-corner amber halo
   from the input side (it would clash against the dark gradient) */
.calc-section .calc .panel::after { display: none; }

/* ---------- Process (4 numbered steps with circular badges + arrows) ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 880px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 32px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: var(--paper);
}
@media (max-width: 880px) {
  .step:nth-child(2n) { /* keep all cards with full border on tablet */ }
}
@media (max-width: 540px) {
  .step { padding: 28px 22px; }
}

.step .num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink-950);
}
.step p {
  color: var(--ink-700);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Amber arrow between steps (desktop only) */
.step::after {
  content: "\2192";
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amber);
  font-size: 22px;
  font-weight: 700;
  z-index: 2;
  background: var(--paper);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step:last-child::after { display: none; }
@media (max-width: 880px) {
  .step::after { display: none; }
}

/* ---------- About / Engineer story ---------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

.about .portrait {
  aspect-ratio: 4 / 5;
  background: var(--ink-800);
  border-radius: var(--r-2);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.about .portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 17, 22, 0.5));
}

.about h2 { margin-bottom: 1.25rem; }
.about .lede {
  font-size: 1.15rem;
  color: var(--ink-700);
  max-width: 55ch;
  margin-bottom: 1.5rem;
}
.about .pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink-950);
  border-left: 3px solid var(--amber);
  padding-left: 18px;
  margin: 1.5rem 0;
  max-width: 40ch;
}
.about .signature {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.about .signature strong { color: var(--ink-950); display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 2px; }

/* ---------- FAQ (clean accordions, not endless border table) ---------- */
.faq-list { max-width: 800px; }
.faq-item {
  border-top: 1px solid var(--hairline);
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-950);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--amber-deep);
  transition: transform 200ms var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}
.faq-item .answer {
  padding: 0 0 22px;
  color: var(--ink-700);
  max-width: 65ch;
}

/* ---------- Contact / Lead form (ink section) ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info .item {
  padding: 14px 0;
  border-top: 1px solid var(--ink-700);
}
.contact-info .item:last-child { border-bottom: 1px solid var(--ink-700); }
.contact-info .item .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-300);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-info .item .value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--paper);
}
.contact-info .item .value a { color: var(--amber); }

form.lead {
  display: grid;
  gap: 16px;
}
form.lead label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-300);
  text-transform: uppercase;
  margin-bottom: 6px;
}
form.lead input,
form.lead select,
form.lead textarea {
  width: 100%;
  background: var(--ink-900);
  color: var(--paper);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-1);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 160ms var(--ease-out);
}
form.lead input::placeholder,
form.lead textarea::placeholder { color: var(--ink-500); }
form.lead input:focus,
form.lead select:focus,
form.lead textarea:focus { border-color: var(--amber); }
form.lead textarea { min-height: 100px; resize: vertical; }
form.lead .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { form.lead .row-2 { grid-template-columns: 1fr; } }
form.lead .actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
form.lead .actions .spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink-700);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
form.lead.is-loading .actions .spinner { display: inline-block; }
form.lead .actions .spinner-label {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-300);
  letter-spacing: 0.04em;
}
form.lead.is-loading .actions .spinner-label { display: inline; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  form.lead .actions .spinner { animation: none; border-top-color: var(--ink-500); }
}

/* Per-field error states */
form.lead .field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #ffb1a0;
  letter-spacing: 0.02em;
}
form.lead .field-error::before {
  content: "x ";
  color: #ff8a7a;
  font-weight: 600;
  margin-right: 4px;
}
form.lead .field.invalid input,
form.lead .field.invalid select,
form.lead .field.invalid textarea {
  border-color: #ff8a7a;
  background: rgba(255, 138, 122, 0.06);
}
form.lead .field.invalid .field-error { display: block; }
form.lead .field.invalid label { color: #ffb1a0; }

/* Top-line + ack / err blocks */
form.lead .ack,
form.lead .err {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 14px;
  border-radius: var(--r-1);
}
form.lead .ack {
  color: var(--amber);
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
}
form.lead .err {
  color: #ff8a7a;
  border: 1px solid rgba(255, 138, 122, 0.35);
  background: rgba(255, 138, 122, 0.06);
}

/* Success card - replaces the form after a successful submission */
.lead-success {
  display: none;
  border: 1px solid var(--leaf);
  background: rgba(63, 157, 46, 0.08);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-2);
}
.lead-success.show { display: block; animation: fade-in 360ms var(--ease-out); }
.lead-success .check {
  width: 44px;
  height: 44px;
  background: var(--leaf);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.lead-success .check svg { stroke: var(--paper); }
.lead-success h3 {
  color: var(--paper);
  margin-bottom: 8px;
}
.lead-success p {
  color: var(--ink-300);
  margin: 0 0 16px;
  font-size: 0.95rem;
}
.lead-success .next {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 8px;
}
.lead-success .actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-success.show { animation: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-950);
  color: var(--paper);
  padding: clamp(3rem, 5vw, 4rem) 0 1.5rem;
  border-top: 1px solid var(--ink-700);
}
.footer .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 880px) { .footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer .grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 14px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul li { padding: 4px 0; font-size: 0.95rem; }
.footer ul a { color: var(--paper); }
.footer ul a:hover { color: var(--amber); }
.footer .legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Floating Messenger circle (Facebook) ---------- */
.messenger-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-950);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.messenger-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  color: var(--ink-950);
}
.messenger-fab svg { display: block; }
@media (max-width: 540px) {
  .messenger-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .messenger-fab svg { width: 22px; height: 22px; }
}

/* ---------- Scroll reveal (CSS-only, no window-scroll listeners) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Visually hidden ---------- */
.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;
}

/* ---------- Trust strip (homepage, between project-detail and packages) ---------- */
.trust-strip {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}
.trust-strip .trust-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-strip .t-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.trust-strip .t-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--amber-deep);
  letter-spacing: -0.02em;
}
.trust-strip .t-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.trust-strip .t-cta { margin-left: auto; }
.trust-strip .t-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-950);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
}
.trust-strip .t-link:hover { color: var(--amber-deep); }
@media (max-width: 880px) {
  .trust-strip .trust-stats { justify-content: flex-start; gap: 18px 22px; }
  .trust-strip .t-cta { margin-left: 0; width: 100%; }
}

/* ---------- Brand strip (homepage, between packages and calculator) ---------- */
/* Scoped to section.brand-strip so the footer tagline row (div.brand-strip)
   doesn't accidentally inherit the dark navy background. */
section.brand-strip {
  background: var(--ink-950);
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-800);
}
section.brand-strip .brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
section.brand-strip .bs-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-right: 6px;
}
section.brand-strip .bs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.brand-strip .bs-tag {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-200);
  letter-spacing: -0.005em;
}
.brand-strip .bs-divider { color: var(--ink-700); }
/* Pill CTA — sits inline with the brand tags, but reads as a real button.
   Outlined amber on the navy strip, fills amber on hover, arrow nudges right. */
.brand-strip .bs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  background: transparent;
  border: 1px solid var(--amber);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.brand-strip .bs-link .bs-arrow {
  display: inline-block;
  transition: transform .18s ease;
}
.brand-strip .bs-link:hover,
.brand-strip .bs-link:focus-visible {
  background: var(--amber);
  color: var(--ink-950);
  box-shadow: 0 0 0 4px rgba(242, 181, 60, 0.18);
  outline: none;
}
.brand-strip .bs-link:hover .bs-arrow,
.brand-strip .bs-link:focus-visible .bs-arrow { transform: translateX(3px); }
.brand-strip .bs-link:active { transform: translateY(1px); }
@media (max-width: 880px) {
  .brand-strip .bs-link { margin-left: 0; align-self: flex-start; }
}
@media (max-width: 880px) {
  .brand-strip .brand-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand-strip .bs-label { margin-right: 0; }
}

/* ---------- Clickable project card (opens lightbox) ---------- */
.project.is-clickable { cursor: pointer; }
.project.is-clickable:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}
.project.is-clickable:hover .bg { transform: scale(1.04); }
.project .view-hint {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(14, 17, 22, 0.7);
  color: var(--paper);
  border: 1px solid rgba(242, 181, 60, 0.4);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.project.is-clickable:hover .view-hint,
.project.is-clickable:focus-visible .view-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Lightbox (carousel) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox[hidden] { display: none !important; }
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.lb-frame {
  position: relative;
  width: 100%;
  max-width: min(1100px, calc((100vh - 200px) * 16 / 9));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1;
}
.lb-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-950);
  border: 1px solid var(--hairline);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 160ms var(--ease-out), background 160ms ease;
}
.lb-close:hover { background: var(--amber); transform: scale(1.05); }
.lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
  overflow: hidden;
  border-radius: var(--r-1);
  background: var(--ink-950);
  border: 1px solid var(--ink-800);
}
.lb-track {
  display: flex;
  height: 100%;
  transition: transform 420ms var(--ease-out);
}
.lb-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-950);
}
.lb-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 17, 22, 0.7);
  color: var(--paper);
  border: 1px solid rgba(250, 246, 238, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, transform 160ms var(--ease-out);
  z-index: 2;
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-prev:hover, .lb-next:hover { background: var(--amber); color: var(--ink-950); transform: translateY(-50%) scale(1.05); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
.lb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--paper);
}
.lb-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}
.lb-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-300);
}
.lb-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 64px;
  overflow-x: auto;
  overflow-y: hidden;
}
.lb-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.is-active { border-color: var(--amber); opacity: 1; }

@media (max-width: 880px) {
  .lightbox { padding: 16px; }
  .lb-close { top: 4px; right: 4px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-prev, .lb-next { width: 38px; height: 38px; }
  .lb-stage { height: auto; max-height: none; }
  .lb-frame { max-width: 100%; }
}
/* ---------- Lead-gen redesign: Hero + Trust strip ----------
   Adds the marketing-style above-the-fold stack from the screenshot.
   Existing sections below are unchanged. */

/* Hero */
.hero {
  position: relative;
  color: var(--paper);
  background:
    radial-gradient(1100px 600px at 92% 12%, rgba(43, 163, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at 8% 100%, rgba(255, 199, 39, 0.10), transparent 60%),
    linear-gradient(160deg, var(--hero-deep) 0%, var(--hero-mid) 55%, var(--hero-near) 100%);
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero::before {
  /* Coastal solar array photo (project detail-05): rooftop PV on a coastal
     cliff with ocean / sky. Deep blue panels harmonize with --hero-deep/-mid
     and stay visible at low opacity without competing with the headline. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/projects/detail-05.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 28%, #000 52%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 28%, #000 52%);
  z-index: -1;
}
.hero::after {
  /* Soft cyan halo behind headline */
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(43, 163, 255, 0.22), transparent 65%);
  z-index: -1;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
  align-items: end;
  position: relative;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun);
  background: rgba(255, 199, 39, 0.10);
  border: 1px solid rgba(255, 199, 39, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 1.25rem;
}
.hero-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(255, 199, 39, 0.18);
}

.hero h1 {
  color: var(--paper);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(1.875rem, 2.8vw + 0.9rem, 3rem);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--sun); }

.hero-sub {
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.15rem);
  line-height: 1.55;
  color: rgba(250, 246, 238, 0.82);
  max-width: 52ch;
  margin: 0 0 1.75rem;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 2rem;
}

.btn-sun {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--sun);
  color: var(--hero-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  box-shadow: 0 10px 24px -10px rgba(255, 199, 39, 0.55), 0 0 0 1px rgba(11, 37, 69, 0.04);
}
.btn-sun:hover {
  background: var(--sun-deep);
  color: var(--hero-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(255, 199, 39, 0.7);
}
.btn-sun .arrow {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  background: var(--hero-deep);
  color: var(--sun);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.btn-ghost-sun {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: transparent;
  color: var(--paper);
  border: 1.5px solid rgba(250, 246, 238, 0.45);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  transition: border-color 160ms, background 160ms;
}
.btn-ghost-sun:hover {
  border-color: var(--sun);
  color: var(--sun);
  background: rgba(255, 199, 39, 0.06);
}

.hero-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  max-width: 720px;
}
.hero-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-pill .ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(43, 163, 255, 0.18);
  color: var(--sky);
}
.hero-pill .label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--paper);
}

/* Hero right column: handwritten overlay card */
.hero-script-card {
  position: relative;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px;
  /* Solid navy with a touch of transparency so the photo's panel grid
     doesn't compete with the handwritten text behind the glass. */
  background: rgba(11, 37, 69, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  max-width: 360px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.4);
}
.hero-script-card .quote {
  font-family: var(--script);
  color: var(--sun);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}
.hero-script-card .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.7);
}
@media (max-width: 979px) {
  .hero-script-card { display: none; }
}

/* Trust strip */
.trust-strip {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.trust-item .ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sky-soft);     /* pale blue gives AA contrast vs dark icon */
  color: var(--hero-deep);          /* dark navy on sky-soft = ~13:1 */
}
.trust-item .head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-950);
  line-height: 1.2;
}
.trust-item .sub {
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.trust-item .stars {
  display: inline-flex;
  gap: 1px;
  color: var(--amber-deep);
  font-size: 14px;
  letter-spacing: 1px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ============================================================
   BLOG — listing + article styles (added 2026-09-08)
   Reuses existing tokens (--paper, --ink-*, --amber, etc).
   ============================================================ */

/* ---- Blog listing page ---- */
.blog-hero {
  padding: 5rem 0 2rem;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
}
.blog-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
}
.blog-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--ink-950);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.blog-hero .lede {
  font-size: 1.05rem;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 0;
}
.blog-list-wrap {
  padding: 3rem 0 5rem;
  background: var(--paper);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  border-color: var(--amber, #f5b400);
  transform: translateY(-2px);
}
.blog-card .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.5rem;
}
.blog-card .meta .dot { color: var(--ink-300, #b8bcc4); }
.blog-card h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink-950);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.blog-card .excerpt {
  color: var(--ink-700);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1;
}
.blog-card .read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-950);
}
.blog-card .read .arrow { transition: transform 0.15s ease; }
.blog-card:hover .read .arrow { transform: translateX(2px); }

/* ---- Blog article ---- */
.article-header {
  padding: 4rem 0 2rem;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
}
.article-header .crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 1rem;
}
.article-header .crumbs a { color: inherit; text-decoration: none; }
.article-header .crumbs a:hover { color: var(--amber-deep); }
.article-header .crumbs .sep { margin: 0 6px; color: var(--ink-300, #b8bcc4); }
.article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink-950);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  max-width: 28ch;
}
.article-header .lede {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 0 0 1.5rem;
}
.article-header .byline {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.article-header .byline .dot { color: var(--ink-300, #b8bcc4); }

.article-wrap {
  padding: 3rem 0 4rem;
  background: var(--paper);
}
.article-prose {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-800);
}
.article-prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink-950);
  margin: 2.25rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.article-prose h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink-950);
  margin: 1.75rem 0 0.5rem;
}
.article-prose p { margin: 0 0 1.1rem; }
.article-prose ul,
.article-prose ol { margin: 0 0 1.1rem 1.25rem; }
.article-prose li { margin-bottom: 0.4rem; }
.article-prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--amber, #f5b400);
  background: var(--ink-50, #f5f6f8);
  border-radius: 0 8px 8px 0;
  color: var(--ink-800);
  font-style: italic;
}
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-50, #f5f6f8);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--ink-950);
}
.article-prose a {
  color: var(--cobalt, #1f4ad6);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-prose a:hover { color: var(--amber-deep); }
.article-prose .callout {
  background: linear-gradient(135deg, var(--ink-50, #f5f6f8) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-left: 3px solid var(--leaf, #2c7a4b);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--ink-800);
}
.article-prose .callout strong { color: var(--ink-950); }

.article-cta {
  max-width: 70ch;
  margin: 2.5rem auto 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, var(--ink-950) 0%, #1a2030 100%);
  color: var(--paper);
  border-radius: 14px;
}
.article-cta h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  color: var(--paper);
}
.article-cta p {
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}
.article-cta .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.article-cta .btn-amber {
  background: var(--amber, #f5b400);
  color: var(--ink-950);
  border: 0;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
}
.article-cta .btn-amber:hover { background: var(--amber-deep, #d99a00); color: var(--ink-950); }
.article-cta .btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
}
.article-cta .btn-ghost:hover { border-color: var(--paper); color: var(--paper); }

.article-related {
  max-width: 70ch;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-100, #e7e9ee);
}
.article-related h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 1rem;
}
.article-related ul { list-style: none; padding: 0; margin: 0; }
.article-related li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
}
.article-related li:last-child { border-bottom: 0; }
.article-related a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-950);
  text-decoration: none;
  font-weight: 500;
}
.article-related a:hover { color: var(--amber-deep); }
.article-related a .arrow { color: var(--ink-300, #b8bcc4); }

/* Mobile tweaks */
@media (max-width: 720px) {
  .article-prose { font-size: 1rem; }
  .article-cta { padding: 1.25rem; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AUTH + DASHBOARD (added 2026-09-09)
   Login page + admin dashboard styling. Reuses existing tokens.
   ============================================================ */

/* ---- Login icon (top-bar utility, dual-purpose: login -> dashboard) ---- */
.util-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.util-login:hover { opacity: 1; color: var(--amber-deep, #d99a00); }
.util-login svg { display: block; }

/* ---- Login page ---- */
.auth-body { background: var(--paper); }
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 14px;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.auth-card-header { margin-bottom: 1.25rem; }
.auth-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
  padding: 4px 10px;
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 999px;
}
.auth-card h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ink-950);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.auth-card-header p {
  color: var(--ink-700);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}
.auth-error {
  background: #fef3f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.auth-notice {
  /* Sibling to .auth-error — used for the "password updated, please
     sign in" message after a self-served password change. Same shape
     so the card layout doesn't shift between error and notice. */
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.auth-notice strong { color: #064E3B; }
.auth-form .field { margin-bottom: 1rem; }
.auth-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 0.4rem;
}
.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink-950);
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--cobalt, #1f4ad6);
  box-shadow: 0 0 0 3px rgba(31, 74, 214, 0.12);
}
.auth-form .actions { margin-top: 1.25rem; }
.auth-form .btn-amber {
  width: 100%;
  background: var(--amber, #f5b400);
  color: var(--ink-950);
  border: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-form .btn-amber:hover { background: var(--amber-deep, #d99a00); }
.auth-card-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-100, #e7e9ee);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.auth-back {
  color: var(--ink-500);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}
.auth-back:hover { color: var(--ink-950); }
.auth-forgot {
  color: var(--ink-700, #475569);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.auth-forgot:hover { color: var(--amber, #f59e0b); text-decoration: underline; }

/* Forgot-password / reset flow feedback banners (uses site tokens). */
.auth-feedback {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}
.auth-feedback-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}
.auth-feedback-success strong { display: block; margin-bottom: 4px; font-size: 0.95rem; }

/* ---- Logout button in utility bar ---- */
.util-logout {
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.util-logout:hover { opacity: 1; color: var(--amber-deep, #d99a00); }
.logout-form { display: inline; margin: 0; padding: 0; }

/* ============================================================
   DASHBOARD + INBOX (sidebar layout, 2026-09-09 rewrite)
   Two-column layout: dark sidebar (left) + sticky header + content.
   Reuses existing tokens. Sidebar slides in from left on page load.
   ============================================================ */

/* Shell */
.dash-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
  background: var(--ink-50, #f5f6f8);
}
.dash-shell.is-loading { grid-template-columns: 0 1fr; }   /* collapse during slide-in */

/* ---- Sidebar (fixed left, full height) ---- */
.dash-sidebar {
  grid-area: sidebar;
  background: var(--ink-950, #0F1722);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.75rem 0.75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
  animation: dash-sidebar-in 220ms ease-out 80ms both;
}
@keyframes dash-sidebar-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.dash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.25rem 0.5rem 1.5rem;
  color: var(--paper);
  text-decoration: none;
}
.dash-brand:hover { opacity: 0.92; }

/* Logo image — sized to match the badge height of the previous SC monogram,
   but the actual aspect ratio of logo.webp is ~1:1 so 36x36 looks balanced. */
.dash-brand-logo {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 6px;
  flex-shrink: 0;
}

.dash-brand-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: var(--ink-300, #97A0AE);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
}
.dash-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.dash-nav-item.is-active {
  background: var(--cobalt, #0A6CC7);
  color: var(--paper);
}
.dash-nav-item.is-active svg { opacity: 1; }

.dash-nav-badge {
  margin-left: auto;
  background: var(--cobalt, #0A6CC7);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.dash-nav-item.is-active .dash-nav-badge { background: var(--paper); color: var(--cobalt-deep, #004F94); }

.dash-sidebar-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-collapse-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: var(--ink-300, #97A0AE);
  background: transparent;
  border: 0;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.dash-collapse-btn:hover { color: var(--paper); background: rgba(255, 255, 255, 0.04); }

/* ---- Top header (sticky, white) ---- */
.dash-header {
  grid-area: header;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
}
.dash-burger {
    background: transparent;
    border: 0;
    color: var(--ink-700);
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44×44 minimum tap target for mobile — same fix as .prod-action-btn
       and .sc-modal-close. Without these mobile taps drop or get the
       300ms double-tap delay. */
    min-width: 44px; min-height: 44px;
    touch-action: manipulation;
    /* Transparent padding extension so the 44×44 is always hit-testable
       even if visually the icon sits at the default size. */
    margin: -2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dash-burger:hover { background: var(--ink-50, #f5f6f8); color: var(--ink-950); }
.dash-burger:active { background: var(--ink-100, #e7e9ee); }
.dash-burger:focus-visible { outline: 2px solid var(--cobalt, #0A6CC7); outline-offset: 2px; }

.dash-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.dash-search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink-950);
  background: var(--ink-50, #f5f6f8);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dash-search input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.12);
}
.dash-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
  width: 14px;
  height: 14px;
}

.dash-header-spacer { flex: 1; }

.dash-icon-btn {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--ink-700);
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-icon-btn:hover { background: var(--ink-50, #f5f6f8); color: var(--ink-950); }
.dash-icon-dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
}

.dash-user {
  position: relative;
}
.dash-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-950);
  transition: background 0.15s ease;
}
.dash-user-btn:hover { background: var(--ink-50, #f5f6f8); }
.dash-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cobalt, #0A6CC7) 0%, var(--cobalt-deep, #004F94) 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.dash-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.dash-user-name { font-size: 0.85rem; font-weight: 600; color: var(--ink-950); }
.dash-user-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); }

.dash-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 34, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}
.dash-user-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dash-user-dropdown a,
.dash-user-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--ink-800);
  background: transparent;
  border: 0;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.dash-user-dropdown a:hover,
.dash-user-dropdown button:hover { background: var(--ink-50, #f5f6f8); color: var(--ink-950); }
.dash-user-dropdown svg { width: 14px; height: 14px; opacity: 0.7; }
.dash-user-dropdown .logout-row { color: #991b1b; }
.dash-user-dropdown .logout-row:hover { background: #fef3f2; color: #991b1b; }

/* ---- Main content area ---- */
.dash-main {
  grid-area: main;
  padding: 1.75rem 1.75rem 3rem;
  overflow-y: auto;
}
.dash-page-head {
  margin-bottom: 1.5rem;
}
.dash-page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.4rem;
}
.dash-page-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink-950);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.dash-page-sub {
  color: var(--ink-700);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* Stat cards (kept from previous design, restyled to match mockup proportions) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.25rem;
}
.stat-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}
.stat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stat-icon.icon-visitors { background: var(--cobalt-soft, #DCE9F6); color: var(--cobalt-deep, #004F94); }
.stat-icon.icon-leads    { background: var(--amber-soft, #FBE0A0); color: var(--amber-deep, #D9961A); }
.stat-icon svg { width: 18px; height: 18px; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.stat-value {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink-950);
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0.75rem;
}
.stat-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-700);
}
.stat-sub strong { color: var(--ink-950); font-weight: 600; }
.stat-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin-top: 0.75rem;
}
.spark-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--cobalt, #0A6CC7) 0%, var(--cobalt-deep, #004F94) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.15s ease;
}
.spark-bar:hover { opacity: 0.7; }

/* Inbox list (compact card list, mirrors mockup table style) */
/* Inbox row — labeled contact-card layout */
.inbox-card {
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1rem;
}
.inbox-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
}
.inbox-card-head h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  color: var(--ink-950);
  margin: 0;
  letter-spacing: -0.01em;
}
.inbox-card-head a {
  color: var(--cobalt, #0A6CC7);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.inbox-card-head a:hover { color: var(--cobalt-deep, #004F94); text-decoration: underline; }

/* Stack of inbox rows */
.inbox-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each row: [checkbox] [main content + action buttons stacked below it].
   The action buttons used to live in a third grid column (right side) —
   now they sit below the notes inside the main column, full-width and
   centered on desktop, stacked on mobile. */
.inbox-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 10px;
  background: var(--paper);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.inbox-row:hover {
  border-color: var(--amber, #f5b400);
  background: #fffdf7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.inbox-row.lead-spam  { background: #fef6f6; border-color: #fecaca; opacity: 0.85; }
.inbox-row.lead-dup   { background: #fefce8; border-color: #fde68a; }

/* Checkbox column */
.inbox-row-check {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  cursor: pointer;
  user-select: none;
}
.inbox-row-check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cobalt, #0A6CC7);
}

/* Main content area */
.inbox-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* Header: name + badges + timestamp, side by side */
.inbox-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.inbox-row-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-950);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.inbox-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
  white-space: nowrap;
}

/* Definition list: labeled fields, responsive grid */
.inbox-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
}
.inbox-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.inbox-field dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  margin: 0;
}
.inbox-field dd {
  font-size: 0.92rem;
  color: var(--ink-950);
  margin: 0;
  word-break: break-word;
  line-height: 1.35;
}
.inbox-field-notes {
  grid-column: 1 / -1;
}
.inbox-field-notes dd {
  background: var(--ink-50, #f5f6f8);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  border-left: 3px solid var(--cobalt-soft, #DCE9F6);
  color: var(--ink-800);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 2px;
}

/* Action buttons (full-width row, centered inside the main column on
   desktop). Previously a right-side column; moved below the notes so
   the action row reads as "after the lead details".
   width: 100% + box-sizing ensures the row spans the full width of
   .inbox-row-main regardless of how the parent flex container sizes
   its children — without this, the row can shrink to fit just the
   buttons and justify-content: center has nothing to center. */
.inbox-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
  cursor: pointer;
}
.btn-cta svg { flex-shrink: 0; }
.btn-call {
  background: var(--leaf, #3F9D2E);
  color: var(--paper);
}
.btn-call:hover { background: #236039; color: var(--paper); }
.btn-mail {
  background: var(--paper);
  color: var(--ink-950);
  border-color: var(--ink-100, #e7e9ee);
}
.btn-mail:hover { background: var(--ink-50, #f5f6f8); }
.btn-delete {
  background: var(--paper);
  color: #991b1b;
  border-color: #fecaca;
}
.btn-delete:hover { background: #fef3f2; color: #7f1d1d; }
.btn-delete svg { opacity: 0.85; }

/* Inline delete form: let the button participate in the .inbox-actions flex layout */
.inbox-delete-form { display: contents; }
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-call {
  background: var(--leaf, #3F9D2E);
  color: var(--paper);
}
.btn-call:hover { background: var(--leaf-deep, #2E7B1F); color: var(--paper); }
.btn-mail {
  background: var(--paper);
  color: var(--ink-950);
  border-color: var(--ink-100, #e7e9ee);
}
.btn-mail:hover { background: var(--ink-50, #f5f6f8); }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.badge-spam { background: #fecaca; color: #991b1b; }
.badge-dup  { background: #fde68a; color: #92400e; }
.badge-new  { background: var(--cobalt-soft, #DCE9F6); color: var(--cobalt-deep, #004F94); }

/* Empty state */
.inbox-empty {
  text-align: center;
  color: var(--ink-500);
  font-style: italic;
  padding: 2rem 1rem;
}

/* Page-specific: inbox page (full list, filter chips) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.filter-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { border-color: var(--ink-300); color: var(--ink-950); }
.filter-chip.is-active {
  background: var(--cobalt, #0A6CC7);
  border-color: var(--cobalt, #0A6CC7);
  color: var(--paper);
}

/* Pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.25rem;
  flex-wrap: wrap;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 8px;
  color: var(--ink-800);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.pag-btn:hover {
  border-color: var(--cobalt, #0A6CC7);
  color: var(--cobalt, #0A6CC7);
}
.pag-btn.is-disabled,
.pag-btn.is-disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--ink-100, #e7e9ee);
  color: var(--ink-500);
  pointer-events: none;
}
.pag-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.pag-num {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.5rem;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  color: var(--ink-800);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--font-mono);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pag-num:hover {
  border-color: var(--cobalt, #0A6CC7);
  color: var(--cobalt, #0A6CC7);
}
.pag-num.is-active {
  background: var(--cobalt, #0A6CC7);
  border-color: var(--cobalt, #0A6CC7);
  color: var(--paper);
  cursor: default;
}
.pag-ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 34px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Delete button + two-step confirmation */
.btn-delete {
  background: var(--paper);
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-delete:hover {
  background: #fef3f2;
  border-color: #fca5a5;
  color: #7f1d1d;
}
.btn-delete svg { opacity: 0.85; }

/* Delete confirmation modal */
.dash-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 34, 0.45);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: dash-modal-fade 160ms ease-out;
}
.dash-modal-backdrop.is-open { display: flex; }
@keyframes dash-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.dash-modal {
  background: var(--paper);
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 34, 0.35);
  animation: dash-modal-pop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes dash-modal-pop { from { transform: translateY(8px) scale(0.96); } to { transform: translateY(0) scale(1); } }

.dash-modal-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fef3f2;
  color: #dc2626;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.dash-modal-icon svg { width: 22px; height: 22px; }

.dash-modal h3 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.15rem;
  color: var(--ink-950);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.dash-modal-body {
  color: var(--ink-700);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.dash-modal-body strong { color: var(--ink-950); font-weight: 600; }
.dash-modal-warning {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fef3f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.82rem;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.dash-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.dash-modal-btn {
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.dash-modal-btn-cancel {
  background: var(--paper);
  color: var(--ink-800);
  border-color: var(--ink-100, #e7e9ee);
}
.dash-modal-btn-cancel:hover { background: var(--ink-50, #f5f6f8); color: var(--ink-950); }
.dash-modal-btn-proceed {
  background: #dc2626;
  color: var(--paper);
  border-color: #dc2626;
}
.dash-modal-btn-proceed:hover { background: #b91c1c; border-color: #b91c1c; }
.dash-modal-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}
.dash-modal-btn-cancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 34, 0.15);
}

/* Row checkbox + header checkbox */
.inbox-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.inbox-row-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cobalt, #0A6CC7);
}
.inbox-row.is-selected {
  background: rgba(10, 108, 199, 0.05);
  outline: 1px solid var(--cobalt-soft, #DCE9F6);
  outline-offset: -1px;
}

.inbox-table-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.5rem 0.5rem;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
  margin-bottom: 0.5rem;
}
.inbox-table-head-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Sticky bulk-action bar */
.bulk-action-bar {
  position: sticky;
  bottom: 1rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--ink-950, #0F1722);
  color: var(--paper);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 34, 0.35);
  animation: dash-bulk-bar-in 180ms ease-out;
}
.bulk-action-bar[hidden] { display: none !important; }
@keyframes dash-bulk-bar-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.bulk-action-count {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.95rem;
}
.bulk-action-count strong {
  color: var(--amber, #F2B53C);
  font-weight: 700;
  margin-right: 4px;
}
.bulk-action-buttons {
  display: flex;
  gap: 0.5rem;
}
.bulk-btn-clear,
.bulk-btn-delete {
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.bulk-btn-clear {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.2);
}
.bulk-btn-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.bulk-btn-delete {
  background: #dc2626;
  color: var(--paper);
  border-color: #dc2626;
}
.bulk-btn-delete:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}
.bulk-btn-delete:disabled,
.bulk-btn-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile: hide checkbox label text, keep the box */
@media (max-width: 720px) {
  .inbox-table-head-label { display: none; }
  .bulk-action-bar { flex-wrap: wrap; }
}

/* Flash banner (post-delete redirect) */
.dash-flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.dash-flash--ok {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}
.dash-flash--err {
  background: #fef3f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* Responsive — off-canvas drawer at <=720px, collapsed icons at <=900px */

/* Tablet — slightly narrower sidebar */
@media (max-width: 1024px) {
  .dash-shell { grid-template-columns: 220px 1fr; }
}

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 64px 1fr; }
  .dash-brand-name,
  .dash-nav-item > span:not(.dash-nav-badge),
  .dash-collapse-btn > span,
  .dash-collapse-btn { display: none; }
  .dash-nav-item { justify-content: center; padding: 0.65rem 0.5rem; }
  .dash-nav-badge { margin-left: 0; position: absolute; top: 4px; right: 4px; min-width: 16px; font-size: 9px; padding: 0 4px; }
  .dash-user-meta { display: none; }
  .dash-search { max-width: 240px; }
}

/* Mobile — off-canvas drawer pattern */
@media (max-width: 720px) {
  /* Switch shell to single-column; sidebar leaves the flow. */
  .dash-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }

  /* Sidebar becomes an off-canvas drawer */
  .dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 86vw;
    height: 100dvh;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 240ms ease-out, box-shadow 240ms ease-out;
    box-shadow: none;
    padding: 1.25rem 0.75rem 0.75rem;
    overflow-y: auto;
    animation: none;
  }
  .dash-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.4);
  }

  /* Restore brand text + nav labels — collapsed-icon mode was only <=900px */
  .dash-brand-name,
  .dash-nav-item > span:not(.dash-nav-badge),
  .dash-collapse-btn { display: revert; }
  .dash-nav-item { justify-content: flex-start; padding: 0.75rem; }
  .dash-nav-badge {
    margin-left: auto;
    position: static;
    min-width: 22px;
    font-size: 11px;
    padding: 1px 7px;
  }
  .dash-user-meta { display: flex; }

  /* X close button — mobile only */
  .dash-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--ink-300, #97A0AE);
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
  }
  .dash-sidebar-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--paper); }

  /* Backdrop overlay behind the drawer */
  .dash-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 34, 0.45);
    backdrop-filter: blur(2px);
    z-index: 150;
  }
  .dash-sidebar-overlay.is-open {
    display: block;
    animation: dash-overlay-in 180ms ease-out;
  }
  @keyframes dash-overlay-in { from { opacity: 0; } to { opacity: 1; } }

  /* Lock body scroll when drawer is open */
  body.dash-drawer-open { overflow: hidden; }

  /* Top header — keep all elements but tighter */
  .dash-header {
    padding: 0 0.75rem;
    gap: 0.5rem;
    height: 60px;
  }
  /* Mobile search pattern: collapsed = 🔍 icon button only. Tapping it
     expands the search to fill the entire header (other icons slide off)
     so the user has the full width to type into. This replaces the
     previous "always-shown-too-narrow" approach that truncated the
     placeholder to "Sear..." and made typing inputs hard to read.

     On desktop the trigger + close buttons are hidden; the search is
     always shown inline (controlled by the absence of these rules). */
  .dash-search-trigger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ink-700);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
  }
  .dash-search-trigger:hover {
    background: var(--ink-50, #f5f6f8);
    color: var(--ink-950);
  }
  .dash-search-trigger svg { width: 18px; height: 18px; }
  /* Close button (X) — sits at the right edge of the expanded input */
  .dash-search-close {
    display: none;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ink-500);
    cursor: pointer;
  }
  .dash-search-close:hover { color: var(--ink-950); background: var(--ink-50, #f5f6f8); }
  .dash-search-close svg { width: 14px; height: 14px; }
  /* The big left search icon inside the input is moved to the right when
     expanded so it doesn't crowd the cursor; on desktop it stays left. */
  /* 44px touch targets for burger + icon buttons */
  .dash-burger { width: 44px; height: 44px; }
  .dash-icon-btn { width: 44px; height: 44px; }
  /* User button: avatar only on mobile */
  .dash-user-btn { padding: 4px; }
  .dash-user-name,
  .dash-user-role { display: none; }
  .dash-user-meta { display: none; }
  .dash-user-btn svg:last-child { display: none; }
  .dash-user-dropdown { right: 0; }

  /* Mobile search collapsed/expanded pattern.
     ----------------------------------------------------------------
     Default (collapsed) state on mobile: the .dash-search box is hidden,
     only the 🔍 trigger button is visible. Header layout reads:
       [burger] [🔍 trigger] [theme] [🔔] [avatar]
     When the trigger is tapped, JS adds .is-search-open to .dash-header
     which swaps the layout to:
       [burger] [search input filling the rest with an X close button]
     All other header icons hide so the input gets the full width. */
  .dash-search { display: none; }
  .dash-search-trigger { display: flex; }
  .dash-search-close { display: flex; }

  .dash-header.is-search-open .dash-search-trigger,
  .dash-header.is-search-open .dash-icon-btn,
  .dash-header.is-search-open .dash-user {
    display: none;
  }
  .dash-header.is-search-open .dash-search {
    display: block;          /* override the display:none above */
    flex: 1;
    max-width: none;
    position: relative;
  }
  .dash-header.is-search-open .dash-search input {
    padding: 0.5rem 2.25rem 0.5rem 2rem;  /* room for X close on the right */
    font-size: 1rem;                       /* match inbox search size */
  }
  .dash-header.is-search-open .dash-search > svg {
    left: 12px;                             /* nudged in for breathing room */
  }

  /* Main content — tighter padding, single-column stats */
  .dash-main { padding: 1rem 0.875rem 2rem; }
  .dash-page-title { font-size: 1.4rem; }

  /* Stat cards: single column, smaller icons */
  .stat-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .stat-card { padding: 1rem 1.125rem; }
  .stat-icon { width: 32px; height: 32px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-value { font-size: 1.75rem; }
  .stat-spark { display: none; }
  .stat-sub { font-size: 0.75rem; gap: 0.5rem; }

  /* Inbox header: hide label, keep just checkbox */
  .inbox-table-head-label { display: none; }
  .inbox-table-head { padding-bottom: 0.25rem; margin-bottom: 0.5rem; }

  /* Inbox row: stack to single column, full-width actions */
  .inbox-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
  }
  .inbox-row-main { min-width: 0; }
  .inbox-row-head { flex-wrap: wrap; }
  .inbox-time {
    text-align: left;
    order: 99;
    font-size: 0.7rem;
  }
  .inbox-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  /* Mobile: stack each button to its own row for big touch targets. The
     desktop layout already uses flex-wrap so on narrow screens the
     buttons wrap naturally — but explicit flex-direction:column makes
     the wrap behaviour predictable on small phones. */
  .inbox-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  .btn-cta { flex: 0 0 auto; min-height: 38px; }
  .btn-delete { min-height: 38px; }

  /* Bulk action bar: stack, respect safe area */
  .bulk-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    bottom: 0.5rem;
    margin: 1rem 0.5rem;
    width: auto;
    border-radius: 12px;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .bulk-action-buttons { justify-content: stretch; }
  .bulk-btn-clear,
  .bulk-btn-delete {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }

  /* Filter bar — wrap, smaller chips */
  .filter-bar { gap: 6px; }
  .filter-chip { padding: 0.4rem 0.7rem; font-size: 0.78rem; }

  /* Pagination — stack for easier tapping */
  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .pag-btn,
  .pag-pages { justify-content: center; }
  .pag-pages { flex-wrap: wrap; }
  .pag-btn { min-height: 44px; }

  /* Modal — near-full-width with safe area */
  .dash-modal {
    max-width: none;
    width: 100%;
    margin: 0.5rem;
    padding: 1.25rem 1.25rem 1rem;
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
  }
  .dash-modal-actions { flex-direction: column-reverse; gap: 0.5rem; }
  .dash-modal-btn {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
  }

  /* Prevent iOS zoom on input focus (font-size >= 16px) */
  .auth-form input,
  .dash-search input { font-size: 16px; }
}

/* X close button: hidden on desktop, shown on mobile */
@media (min-width: 721px) {
  .dash-sidebar-close { display: none; }
}

/* Very small phones (iPhone SE etc.) — tighter still */
@media (max-width: 380px) {
  .dash-header { padding: 0 0.5rem; gap: 0.25rem; }
  .dash-icon-btn { width: 36px; height: 36px; }
  .dash-main { padding: 0.875rem 0.625rem 1.5rem; }
  .stat-value { font-size: 1.5rem; }
  .inbox-row-name { font-size: 0.9rem; }
  /* On the smallest phones the trigger button itself stays at the standard
     44px size (touch target); when expanded, the search input fills all
     remaining space via flex:1 — no max-width cap needed since the icon
     row above already collapsed to make room. */
}

/* Old single-column dashboard classes kept for back-compat (login page uses .auth-body) */
.auth-body { background: var(--paper); }

/* Mobile tweaks */
@media (max-width: 720px) {
  .auth-card { padding: 1.5rem 1.25rem 1.25rem; }
  .stat-value { font-size: 2rem; }
  .inbox-row { flex-direction: column; }
  .inbox-row-actions { flex-direction: row; min-width: 0; }
  .btn-cta { flex: 1; }
  .stat-spark { display: none; }
}

/* ========================================================================
   Product gallery (/products.php)
   - Filter chip row
   - Photo grid + cards
   - Stock badge
   - Detail drawer (off-canvas right)
   ======================================================================== */

/* Filter chip row — reuses inbox-card as the surface so it inherits paper bg */
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 999px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  line-height: 1;
}
.filter-chip:hover {
  border-color: var(--cobalt, #0A6CC7);
  color: var(--cobalt-deep, #004F94);
}
.filter-chip.is-active {
  background: var(--cobalt-deep, #004F94);
  border-color: var(--cobalt-deep, #004F94);
  color: var(--paper);
}
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink-100, #e7e9ee);
  color: var(--ink-700);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.filter-chip.is-active .chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--paper);
}

/* Product grid */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* Product card */
.prod-card {
  background: var(--paper);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
/* IMPORTANT: the [hidden] attribute would normally hide the element via the
   user-agent stylesheet, but .prod-card's `display: flex` rule above has
   the same specificity and wins the cascade. So we explicitly hide cards
   when the JS sets card.hidden = true (used by the search + category-chip
   filter). Without this rule, search appears to "not work" because cards
   keep showing even when matched=false. Same pattern as .prod-empty[hidden],
   .nav-drawer[hidden], etc. */
.prod-card[hidden] { display: none !important; }
.prod-card:hover,
.prod-card:focus-visible {
  border-color: var(--cobalt, #0A6CC7);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 108, 199, 0.08);
}
.prod-card:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

/* Photo block (square, scales nicely) */
.prod-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ink-50, #f5f6f8);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.prod-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prod-photo-empty {
  color: var(--ink-500);
  opacity: 0.6;
}

/* Stock badge on photo */
.prod-stock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  line-height: 1.3;
}
.prod-stock-badge.stock-in-stock {
  background: rgba(16, 185, 129, 0.92);
  color: #fff;
}
.prod-stock-badge.stock-low {
  background: rgba(245, 180, 0, 0.95);
  color: #4a3500;
}
.prod-stock-badge.stock-out {
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
}

/* Card body */
.prod-body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.prod-cat {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.prod-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-950);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* Two-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-sku {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-top: 0.1rem;
}
.prod-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink-100, #e7e9ee);
}
.prod-price {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cobalt-deep, #004F94);
  letter-spacing: -0.01em;
}
.prod-cost {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
}

/* Empty placeholder when filter/search returns no rows */
.prod-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--ink-500);
  font-size: 0.9rem;
}
.prod-empty[hidden] { display: none; }
.prod-empty svg { opacity: 0.5; }

/* ----- Detail drawer (off-canvas right) ----- */
.prod-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 17, 22, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  z-index: 80;
}
.prod-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
.prod-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--paper);
  border-left: 1px solid var(--ink-100, #e7e9ee);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.prod-drawer.is-open {
  transform: translateX(0);
}
.prod-drawer[hidden] { display: none; }

.prod-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
  position: relative;
}
.prod-drawer-eyebrow {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.25rem;
}
.prod-drawer-title {
  flex: 1;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-950);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-right: 2rem;  /* room for the X button */
}
.prod-drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.prod-drawer-close:hover {
  background: var(--ink-50, #f5f6f8);
  color: var(--ink-950);
  border-color: var(--ink-100, #e7e9ee);
}

.prod-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

/* Hero photo */
.prod-drawer-hero {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ink-50, #f5f6f8);
  border-radius: 10px;
  border: 1px solid var(--ink-100, #e7e9ee);
  display: block;
}
.prod-drawer-hero-empty {
  display: grid;
  place-items: center;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Meta strip: SKU + stock badge */
.prod-drawer-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.prod-drawer-sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-700);
  background: var(--ink-50, #f5f6f8);
  padding: 3px 8px;
  border-radius: 6px;
}
.prod-drawer-stock {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}
.prod-drawer-stock-in-stock { background: rgba(16, 185, 129, 0.12); color: #047857; }
.prod-drawer-stock-low      { background: rgba(245, 180, 0, 0.18); color: #92590a; }
.prod-drawer-stock-out      { background: rgba(220, 38, 38, 0.12); color: #991b1b; }

/* Description */
.prod-drawer-desc {
  font-size: 0.875rem;
  color: var(--ink-700);
  margin: 1rem 0 0;
  line-height: 1.55;
}

/* Price grid */
.prod-drawer-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.prod-drawer-price {
  background: var(--ink-50, #f5f6f8);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.prod-drawer-price-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.prod-drawer-price-val {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-950);
  margin-top: 0.15rem;
}

/* Inline row (e.g. supplier) */
.prod-drawer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
}
.prod-drawer-row-key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  min-width: 80px;
}
.prod-drawer-row > span:last-child {
  color: var(--ink-950);
}

/* Section headings inside drawer */
.prod-drawer-h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 1.25rem 0 0.6rem;
  font-weight: 600;
}

/* Attributes */
.prod-drawer-attrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}
.prod-drawer-attr {
  background: var(--ink-50, #f5f6f8);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.prod-drawer-attr-key {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.prod-drawer-attr-val {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-950);
  margin-top: 0.15rem;
  word-break: break-word;
}
/* Tappable value inside an attribute chip (email, phone, external links).
   Inherits color so it sits naturally inside the grey chip card; the
   underline is reserved for hover so the resting state still feels like
   a chip and not a button. */
.prod-drawer-attr-val-link,
.prod-drawer-row-link {
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}
.prod-drawer-attr-val-link:hover,
.prod-drawer-row-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--cobalt, #0A6CC7);
  text-underline-offset: 2px;
}

/* Optional one-line note shown beneath an attribute value (currently
   unused but reserved for future "tap to call" hints etc.). */
.prod-drawer-attr-note {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--ink-400, #9ca3af);
}

/* Inline "Supplier" row at the top of the drawer — same look as the
   price/cost/reorder rows but the value is a clickable link to the
   Suppliers admin page. */
.prod-drawer-row-link { font-weight: 500; }

/* Supplier section under Attributes.
   The section has a small company-name heading (linked to the Suppliers
   admin page) followed by the same chip grid used by Attributes. We
   reuse .prod-drawer-attrs but with a tighter minmax so phone/email
   chips fit on a phone screen without overflow. */
.prod-drawer-supplier {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.prod-drawer-supplier-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prod-drawer-supplier-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
}
.prod-drawer-supplier-name:hover {
  border-bottom-color: var(--cobalt, #0A6CC7);
}
.prod-drawer-attrs-supplier {
  /* Tighter than the attributes grid — phone/email are short, so we can
     afford 2-up on phones without crowding the labels. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.prod-drawer-muted {
  font-size: 0.85rem;
  color: var(--ink-500);
  font-style: italic;
}

/* Stock-by-location table */
.prod-drawer-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 8px;
}
.prod-drawer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.prod-drawer-table th,
.prod-drawer-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
}
.prod-drawer-table th {
  background: var(--ink-50, #f5f6f8);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.prod-drawer-table td.num,
.prod-drawer-table th.num {
  text-align: right;
  font-family: var(--font-mono);
}
.prod-drawer-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Extra photos */
.prod-drawer-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.4rem;
}
.prod-drawer-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ink-100, #e7e9ee);
  background: var(--ink-50, #f5f6f8);
  transition: border-color 0.12s ease;
}
.prod-drawer-thumb:hover {
  border-color: var(--cobalt, #0A6CC7);
}
.prod-drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lock body scroll when drawer is open */
body.prod-drawer-open {
  overflow: hidden;
}

/* Mobile tweaks for gallery */
@media (max-width: 720px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .prod-card { border-radius: 10px; }
  .prod-body { padding: 0.6rem 0.75rem 0.75rem; }
  .prod-name { font-size: 0.85rem; }
  .prod-price { font-size: 0.95rem; }
  .prod-stock-badge { font-size: 0.6rem; padding: 2px 6px; top: 6px; right: 6px; }

  .prod-drawer {
    width: 100vw;
    border-left: 0;
  }
  .prod-drawer-head { padding: 1rem 1rem 0.75rem; }
  .prod-drawer-body { padding: 1rem; }
}

@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr; }
  .prod-drawer-prices { grid-template-columns: 1fr; }
  .prod-drawer-attrs { grid-template-columns: 1fr; }
}

/* ========================================================================
   Inventory "Live" pill + bumped-counter animation
   Used by the dashboard's real-time inventory section.
   ======================================================================== */

/* Section header inside a .stat-grid: title + Live indicator */
.stat-grid-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: -0.5rem;  /* pull cards up to align with the heading */
}
.stat-grid-head h2 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  margin: 0;
}

/* Live status pill */
.stat-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--ink-50, #f5f6f8);
  border: 1px solid var(--ink-100, #e7e9ee);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}
.stat-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-500, #5E6878);
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* States driven by JS (data-state attribute) */
.stat-live-pill[data-state="idle"]      .stat-live-dot { background: #10b981; }
.stat-live-pill[data-state="refreshing"] .stat-live-dot { background: #f5b400; animation: livePulse 0.9s ease-in-out infinite; }
.stat-live-pill[data-state="updated"]   .stat-live-dot { background: #10b981; }
.stat-live-pill[data-state="error"]     .stat-live-dot { background: #dc2626; }
.stat-live-pill[data-state="paused"]    .stat-live-dot { background: var(--ink-500); }

.stat-live-pill[data-state="refreshing"] {
  background: #fff8e3;
  border-color: #f5b400;
  color: #92590a;
}
.stat-live-pill[data-state="error"] {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.stat-live-pill[data-state="updated"] {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #047857;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Counter bump animation - quick highlight when the value changes */
.stat-value-bumped {
  animation: statBump 0.7s ease-out;
}
@keyframes statBump {
  0%   { color: var(--ink-950); }
  20%  { color: var(--cobalt, #0A6CC7); }
  100% { color: var(--ink-950); }
}
/* ============================================================
   Stock In / Stock Out — card action buttons + adjust modal
   ============================================================ */

/* ---- Card action buttons ----
   Always visible. Stacked full-width on mobile (priority viewport),
   inline on tablet+. The buttons sit BELOW the price row inside
   .prod-body, so they push the card height a bit on desktop —
   intentional: the affordance should be obvious. */
.prod-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.prod-action-btn {
    /* Reset button defaults */
    appearance: none;
    border: 1px solid transparent;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    /* `manipulation` disables the 300ms double-tap-to-zoom delay that
       older mobile browsers add to button taps. Critical for the Card
       button on Android Chrome — without this, taps register ~300ms
       later than expected and intermittent taps drop. */
    touch-action: manipulation;
    /* Inherit nothing — keep our own colors */
    color: #fff;
    background: var(--ink-700, #2A313B);
    border-color: var(--ink-700, #2A313B);
    min-height: 38px;        /* touch-friendly on mobile */
}
.prod-action-btn:hover { transform: translateY(-1px); }
.prod-action-btn:active { transform: translateY(0); }
.prod-action-btn:disabled,
.prod-action-btn[aria-disabled="true"] {
  /* View-only state for accounts without products.stock_in_out. The
     browser's native :disabled styling varies by OS — lock it to a
     consistent muted look so it matches the rest of the admin palette.
     Still keyboard-focusable so screen readers announce the disabled
     state correctly. */
  cursor: not-allowed;
  background: var(--ink-100, #f3f4f6);
  border-color: var(--ink-200, #e5e7eb);
  color: var(--ink-400, #9ca3af);
  transform: none;
  box-shadow: none;
}
.prod-action-btn:disabled:hover,
.prod-action-btn[aria-disabled="true"]:hover {
  transform: none;
  background: var(--ink-100, #f3f4f6);
}
.prod-action-btn:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.prod-action-btn svg { flex-shrink: 0; }

/* Stock In = green (positive) */
.prod-action-in {
  background: #047857;
  border-color: #047857;
}
.prod-action-in:hover {
  background: #065F46;
  border-color: #065F46;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.25);
}

/* Stock Out = red (caution) */
.prod-action-out {
  background: #B91C1C;
  border-color: #B91C1C;
}
.prod-action-out:hover {
  background: #991B1B;
  border-color: #991B1B;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
}

/* ≥560px: side-by-side buttons. Same breakpoint the cards use to drop
   to a 2-column grid — keeps the buttons readable without making each
   card too tall. */
@media (min-width: 560px) {
  .prod-actions {
    flex-direction: row;
    gap: 0.5rem;
  }
  .prod-action-btn {
    flex: 1 1 0;
    font-size: 0.78rem;
    padding: 0.5rem 0.6rem;
  }
  .prod-action-btn span {
    /* Hide text on wider screens — the icon + tooltip (title) are enough.
       Wait: that hurts accessibility. Keep the text; the buttons still fit
       two-up at this breakpoint. */
  }
}

/* ============================================================
   Stock adjust modal
   ============================================================ */
.stock-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.55);
  z-index: 1050;            /* above prod-drawer (~1040) */
  opacity: 0;
  pointer-events: none;     /* invisible → click-through; .is-open flips on */
  transition: opacity 0.18s ease;
}
.stock-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.stock-modal-overlay[hidden] { display: none !important; }

/* The modal itself. Mobile-first: bottom-sheet style. ≥560px it becomes
   a centered card. */
.stock-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  background: var(--paper, #ffffff);
  color: var(--ink-950, #0E1116);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  padding: 1.1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.stock-modal.is-open { transform: translateY(0); }
.stock-modal[hidden] { display: none !important; }

/* ≥560px: floating centered card */
@media (min-width: 560px) {
  .stock-modal {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(440px, calc(100vw - 2rem));
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    transform: translate(-50%, -45%);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.18s ease;
  }
  .stock-modal.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.stock-modal-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1rem;
  position: relative;
}
.stock-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  font-weight: 600;
}
.stock-modal-eyebrow.is-out { color: #B91C1C; }
.stock-modal-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-right: 2rem;      /* leave space for the close button */
}
.stock-modal-close {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500, #6B7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.stock-modal-close:hover {
  background: var(--ink-100, #e7e9ee);
  color: var(--ink-950, #0E1116);
}
.stock-modal-close:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

.stock-modal-product {
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.85rem;
  background: var(--ink-50, #f4f6f9);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 8px;
}
.stock-modal-product-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-950, #0E1116);
}

.stock-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.stock-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stock-modal-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: 0.01em;
}
.stock-modal-input {
  appearance: none;
  border: 1px solid var(--ink-200, #d4d8df);
  background: #fff;
  color: var(--ink-950, #0E1116);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  width: 100%;
  min-height: 44px;          /* iOS-friendly touch target */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
}
.stock-modal-input:focus {
  outline: none;
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.18);
}
.stock-modal-input::placeholder {
  color: var(--ink-400, #9CA3AF);
}
.stock-modal-hint {
  font-size: 0.74rem;
  color: var(--ink-500, #6B7280);
}

.stock-modal-feedback {
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1.35;
}
.stock-modal-feedback-error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.stock-modal-feedback-success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.stock-modal-feedback[hidden] { display: none !important; }

.stock-modal-foot {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.stock-modal-btn {
  flex: 1 1 0;
  appearance: none;
  border: 1px solid transparent;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.stock-modal-btn:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.stock-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.stock-modal-btn-cancel {
  background: transparent;
  border-color: var(--ink-200, #d4d8df);
  color: var(--ink-950, #0E1116);
}
.stock-modal-btn-cancel:hover { background: var(--ink-100, #e7e9ee); }

.stock-modal-btn-update {
  background: #047857;
  border-color: #047857;
  color: #fff;
}
.stock-modal-btn-update:hover {
  background: #065F46;
  border-color: #065F46;
}
.stock-modal-btn-update.is-out {
  background: #B91C1C;
  border-color: #B91C1C;
}
.stock-modal-btn-update.is-out:hover {
  background: #991B1B;
  border-color: #991B1B;
}

/* Loading spinner inside the Update button — sits on top of the label */
.stock-modal-btn-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.stock-modal-btn-spinner::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: stockSpin 0.7s linear infinite;
}
.stock-modal-btn-update.is-loading .stock-modal-btn-label { visibility: hidden; }
.stock-modal-btn-update.is-loading .stock-modal-btn-spinner { display: inline-flex; }

@keyframes stockSpin {
  to { transform: rotate(360deg); }
}

/* Lock background scroll while the modal is open (Android/iOS need it
   because the bottom sheet can still bleed scroll to the page underneath). */
body.stock-modal-open {
  overflow: hidden;
  /* Sticky header / footer offsets — not used here since the page has none,
     but keeping the pattern documented. */
}

/* ============================================================
   Server-side search results banner
   ============================================================
   Visible only while a search query is active. Stacked vertically
   on mobile, inline on wider screens. The clear button sits on
   its own row on mobile so the text doesn't wrap awkwardly. */
.prod-results-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--cobalt-50, #EEF4FC);
  border: 1px solid var(--cobalt-100, #D6E5F7);
  border-radius: 10px;
  color: var(--cobalt-deep, #004F94);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
}
.prod-results-banner[hidden] { display: none !important; }
.prod-results-text {
  flex: 1 1 auto;
  line-height: 1.35;
}
.prod-results-clear {
  appearance: none;
  background: #fff;
  border: 1px solid var(--cobalt-100, #D6E5F7);
  color: var(--cobalt-deep, #004F94);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  align-self: flex-start;
}
.prod-results-clear:hover {
  background: var(--cobalt-100, #D6E5F7);
  border-color: var(--cobalt, #0A6CC7);
}
.prod-results-clear:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

/* ≥640px: put the text and the clear button on the same row */
@media (min-width: 640px) {
  .prod-results-banner {
    flex-direction: row;
    align-items: center;
  }
  .prod-results-clear { align-self: center; }
}

/* ============================================================
   Drawer Edit button + Cost edit modal
   ============================================================ */

/* Drawer action group (Edit + Close side by side at top-right) */
.prod-drawer-actions {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.prod-drawer-edit {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink-200, #d4d8df);
  border-radius: 8px;
  width: auto;
  height: 36px;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--ink-700, #2A313B);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.prod-drawer-edit:hover {
  background: var(--cobalt-50, #EEF4FC);
  color: var(--cobalt-deep, #004F94);
  border-color: var(--cobalt, #0A6CC7);
}
.prod-drawer-edit:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
/* Mobile: shrink to icon-only so the drawer title gets more room */
@media (max-width: 480px) {
  .prod-drawer-edit { padding: 0; width: 36px; }
  .prod-drawer-edit span { display: none; }
}

/* ---- Cost modal — same shape/behavior as the stock modal ----
   The two share the .stock-modal-* positioning rules? No — kept
   independent so they can diverge if needed. Mobile-first, same
   bottom-sheet → centered-card progression. */
.cost-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.55);
  z-index: 1070;            /* above stock-modal (1060) so it stacks correctly */
  opacity: 0;
  pointer-events: none;     /* invisible → click-through; .is-open flips on */
  transition: opacity 0.18s ease;
}
.cost-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.cost-modal-overlay[hidden] { display: none !important; }

.cost-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: var(--paper, #ffffff);
  color: var(--ink-950, #0E1116);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  padding: 1.1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.cost-modal.is-open { transform: translateY(0); }
.cost-modal[hidden] { display: none !important; }

@media (min-width: 560px) {
  .cost-modal {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(440px, calc(100vw - 2rem));
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    transform: translate(-50%, -45%);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.18s ease;
  }
  .cost-modal.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.cost-modal-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1rem;
  position: relative;
  padding-right: 2rem;
}
.cost-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt-deep, #004F94);
  font-weight: 600;
}
.cost-modal-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cost-modal-close {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500, #6B7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cost-modal-close:hover {
  background: var(--ink-100, #e7e9ee);
  color: var(--ink-950, #0E1116);
}
.cost-modal-close:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

.cost-modal-product {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--ink-50, #f4f6f9);
  border: 1px solid var(--ink-100, #e7e9ee);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cost-modal-product-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-950, #0E1116);
}
.cost-modal-product-sku {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-500, #6B7280);
}

.cost-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cost-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cost-modal-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  letter-spacing: 0.01em;
}

/* Input wrapper with PHP prefix prefix-styled like a chip */
.cost-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink-200, #d4d8df);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cost-modal-input-wrap:focus-within {
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.18);
}
.cost-modal-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--ink-50, #f4f6f9);
  color: var(--ink-700, #2A313B);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  border-right: 1px solid var(--ink-200, #d4d8df);
}
.cost-modal-input {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-950, #0E1116);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  width: 100%;
  min-height: 44px;
  outline: none;
}
.cost-modal-input::placeholder {
  color: var(--ink-400, #9CA3AF);
}
.cost-modal-hint {
  font-size: 0.74rem;
  color: var(--ink-500, #6B7280);
}

.cost-modal-feedback {
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1.35;
}
.cost-modal-feedback-error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.cost-modal-feedback-success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.cost-modal-feedback[hidden] { display: none !important; }

.cost-modal-foot {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.cost-modal-btn {
  flex: 1 1 0;
  appearance: none;
  border: 1px solid transparent;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.cost-modal-btn:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.cost-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cost-modal-btn-cancel {
  background: transparent;
  border-color: var(--ink-200, #d4d8df);
  color: var(--ink-950, #0E1116);
}
.cost-modal-btn-cancel:hover { background: var(--ink-100, #e7e9ee); }

.cost-modal-btn-update {
  background: var(--cobalt-deep, #004F94);
  border-color: var(--cobalt-deep, #004F94);
  color: #fff;
}
.cost-modal-btn-update:hover {
  background: var(--cobalt, #0A6CC7);
  border-color: var(--cobalt, #0A6CC7);
}

.cost-modal-btn-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.cost-modal-btn-spinner::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: costSpin 0.7s linear infinite;
}
.cost-modal-btn-update.is-loading .cost-modal-btn-label { visibility: hidden; }
.cost-modal-btn-update.is-loading .cost-modal-btn-spinner { display: inline-flex; }

@keyframes costSpin {
  to { transform: rotate(360deg); }
}

body.cost-modal-open { overflow: hidden; }

/* ============================================================
   Drawer Edit button — new position (below photo, right-aligned)
   + Cost/Markup modal additions
   ============================================================ */

/* Edit button placement INSIDE the drawer body, between photo and
   the SKU/meta row. Right-aligned, sits in a slim row that doesn't
   steal vertical space. */
.prod-drawer-editbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: -0.35rem;     /* tuck up under the photo */
  margin-bottom: 0.65rem;
}
.prod-drawer-edit-inline,
.prod-drawer-delete {
  appearance: none;
  background: var(--paper, #ffffff);
  border: 1px solid var(--ink-200, #d4d8df);
  border-radius: 999px;
  height: 32px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-700, #2A313B);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.prod-drawer-edit-inline:hover {
  background: var(--cobalt-50, #EEF4FC);
  color: var(--cobalt-deep, #004F94);
  border-color: var(--cobalt, #0A6CC7);
}

/* Delete button — red tint to flag destructive action. Same pill shape
   so the two stay visually balanced in the bar. */
.prod-drawer-delete {
  color: #B91C1C;
  border-color: #FCA5A5;
  background: #FEF2F2;
}
.prod-drawer-delete:hover {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #F87171;
}
.prod-drawer-delete:focus-visible {
  outline: 2px solid #DC2626;
  outline-offset: 2px;
}
.prod-drawer-delete:active {
  background: #FECACA;
}

/* Icon-only variant — same red pill, just shrunk to a square so the
   trash button doesn't compete with the pencil for visual weight in
   the edit affordance row. */
.prod-drawer-delete--icon {
  width: 32px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.prod-drawer-delete--icon svg {
  width: 15px;
  height: 15px;
}

.prod-drawer-edit-inline:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
/* ≤480px: icon-only pill so the drawer doesn't waste width */
@media (max-width: 480px) {
  .prod-drawer-edit-inline { padding: 0; width: 32px; }
  .prod-drawer-edit-inline span { display: none; }
}

/* Percent input wrap (suffix instead of prefix) */
.cost-modal-input-wrap-percent .cost-modal-input {
  text-align: right;
}
.cost-modal-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--ink-50, #f4f6f9);
  color: var(--ink-700, #2A313B);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  border-left: 1px solid var(--ink-200, #d4d8df);
}

/* "(optional)" eyebrow next to a label — same pattern the New Product
   modal uses so the visual language stays consistent. */
.cost-modal-optional {
  color: var(--ink-400, #9ca3af);
  font-weight: 400;
  margin-left: 0.25rem;
  font-size: 0.72rem;
  text-transform: lowercase;
}

/* Native <select> styled to match the cost-modal input border + focus
   ring. The base .cost-modal-input rule sets appearance:none, which would
   strip the dropdown arrow, so we re-add a custom chevron here. */
select.cost-modal-select,
select.cost-modal-input {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  cursor: pointer;
  font-family: inherit;
}

/* Preview row — "New selling price" callout in the modal so the
   operator sees the result of their markup before they commit. */
.cost-modal-preview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(0deg, var(--cobalt-50, #EEF4FC), var(--cobalt-50, #EEF4FC));
  border: 1px dashed var(--cobalt, #0A6CC7);
  border-radius: 8px;
}
.cost-modal-preview-label {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cobalt-deep, #004F94);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cost-modal-preview-val {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cobalt-deep, #004F94);
  letter-spacing: -0.01em;
}

/* ============================================================
   Page-head with action (right-aligned button next to title)
   ============================================================
   The .dash-page-head is normally a block container with eyebrow /
   title / sub stacked vertically. When the page needs a primary
   action button on the right (e.g. "New product" on /products.php),
   add .dash-page-head-with-action and we lay it out as a flex row.
   On mobile (<640px) the action stacks below the title text.
*/
.dash-page-head-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dash-page-head-with-action .dash-page-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.dash-page-head-with-action .dash-page-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Push to top so it aligns with the eyebrow / title */
  margin-top: 0.25rem;
}

/* The "New product" button. Sits at the top of the right column so
   it visually pairs with the title rather than the sub paragraph. */
.btn-new-product {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  background: var(--cobalt-deep, #004F94);
  border: 1px solid var(--cobalt-deep, #004F94);
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.05s ease, box-shadow 0.15s ease;
}
.btn-new-product:hover {
  background: var(--cobalt, #0A6CC7);
  border-color: var(--cobalt, #0A6CC7);
}
.btn-new-product:active { transform: translateY(1px); }
.btn-new-product:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.btn-new-product svg { display: block; }

@media (max-width: 640px) {
  /* On phones, push the button below the title and stretch it to
     full width so it's an easy thumb target. */
  .dash-page-head-with-action { flex-direction: column; align-items: stretch; }
  .dash-page-head-with-action .dash-page-head-actions { margin-top: 0.5rem; }
  .btn-new-product { width: 100%; justify-content: center; }
}

/* ----- Page-header hamburger (mobile sidebar trigger) -----
   Pages that don't use the global .dash-header chrome (e.g.
   categories.php, suppliers.php) render their own .dash-page-head
   instead. On mobile they still need to reach the sidebar, so the
   same #dash-burger button is inlined inside .dash-page-head.
   Hidden on desktop (where the sidebar is already visible by default). */
.dash-page-burger {
    flex: 0 0 auto;
    background: transparent; border: 0; padding: 12px;
    margin: -4px -4px 0 0;
    color: var(--ink-700, #374151); cursor: pointer;
    border-radius: 8px;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation; /* kill 300ms double-tap delay on Android */
    transition: background 0.15s ease, color 0.15s ease;
    align-self: flex-start;
}
.dash-page-burger:hover { background: var(--ink-50, #f5f6f8); color: var(--ink-950); }
.dash-page-burger:active { background: var(--ink-100, #e7e9ee); }
.dash-page-burger:focus-visible { outline: 2px solid var(--cobalt, #0A6CC7); outline-offset: 2px; }
@media (min-width: 721px) {
    /* Desktop: sidebar always visible, no trigger needed. */
    .dash-page-burger { display: none !important; }
}

/* ============================================================
   New Product modal (.np-modal-*)
   ============================================================
   Same mobile-first bottom-sheet → centered-card progression as
   .cost-modal and .stock-modal, but independent class names so
   the cost modal's specific styles (preview row, etc.) don't leak.
   z-index sits below cost (1080) and stock (1060) but above the
   page body — 1050 keeps it visually consistent with the others.
*/
.np-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.55);
  z-index: 1050;
  opacity: 0;
  /* CRITICAL: opacity:0 alone does NOT block clicks. Without this, an
     invisible modal overlay would sit on top of the whole page and eat
     taps meant for the rest of the admin (e.g. hamburger button).
     When the modal opens, the .is-open class adds the interactivity. */
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.np-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.np-modal-overlay[hidden] { display: none !important; }

.np-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  background: var(--paper, #ffffff);
  color: var(--ink-950, #0E1116);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  padding: 1.1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.np-modal.is-open { transform: translateY(0); }
.np-modal[hidden] { display: none !important; }

@media (min-width: 560px) {
  .np-modal {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(460px, calc(100vw - 2rem));
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    transform: translate(-50%, -45%);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.18s ease;
  }
  .np-modal.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.np-modal-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.np-modal-eyebrow {
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7280);
}
.np-modal-title {
  grid-column: 1 / 2;
  margin: 0.15rem 0 0;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-950, #0E1116);
}
.np-modal-close {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: transparent;
  border: 0;
  padding: 0.35rem;
  margin: -0.25rem -0.25rem 0 0;
  border-radius: 8px;
  color: var(--ink-500, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.np-modal-close:hover { background: var(--ink-100, #e7e9ee); color: var(--ink-950, #0E1116); }
.np-modal-close:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

.np-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.np-modal-field { display: flex; flex-direction: column; gap: 0.35rem; }

/* Two-column row (Category + Supplier) on desktop, stacks on narrow screens. */
.np-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) {
  .np-modal-row { grid-template-columns: 1fr; }
}
/* Textarea shares the input look but stays a real textarea (resizable vertically). */
.np-modal-textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.45;
  font-family: inherit;
}
/* Native select arrow polish — keep it consistent with the input look. */
select.np-modal-input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

.np-modal-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-800, #1f2937);
}
.np-modal-req {
  color: #DC2626;
  margin-left: 0.15rem;
}
.np-modal-optional {
  color: var(--ink-500, #6b7280);
  font-weight: 400;
  margin-left: 0.25rem;
  font-size: 0.8rem;
}

.np-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--ink-200, #d1d5db);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-modal-input-wrap:focus-within {
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.18);
}
.np-modal-input-wrap .np-modal-input {
  /* Override the standalone-input border so the wrap carries it. */
  border: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}
.np-modal-input-wrap .np-modal-input:focus { box-shadow: none; }

.np-modal-prefix,
.np-modal-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-500, #6b7280);
  background: var(--ink-50, #f3f4f6);
  border-right: 1px solid var(--ink-200, #d1d5db);
  font-family: var(--font-mono);
}
.np-modal-suffix {
  border-right: 0;
  border-left: 1px solid var(--ink-200, #d1d5db);
}

.np-modal-input {
  width: 100%;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ink-200, #d1d5db);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink-950, #0E1116);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-modal-input:focus {
  outline: none;
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.18);
}
.np-modal-input::placeholder { color: var(--ink-400, #9ca3af); }

/* Hide spinners on number inputs so the modal stays clean across browsers */
.np-modal-input[type="number"]::-webkit-outer-spin-button,
.np-modal-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.np-modal-input[type="number"] { -moz-appearance: textfield; }

.np-modal-hint {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  line-height: 1.35;
}

.np-modal-feedback {
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1.35;
}
.np-modal-feedback-error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.np-modal-feedback-success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.np-modal-feedback[hidden] { display: none; }

.np-modal-foot {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.np-modal-btn {
  flex: 1 1 0;
  padding: 0.7rem 1rem;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
.np-modal-btn:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.np-modal-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.np-modal-btn-cancel {
  background: transparent;
  color: var(--ink-800, #1f2937);
  border-color: var(--ink-200, #d1d5db);
}
.np-modal-btn-cancel:hover { background: var(--ink-100, #e7e9ee); }

.np-modal-btn-add {
  background: var(--cobalt-deep, #004F94);
  color: #ffffff;
  border-color: var(--cobalt-deep, #004F94);
  position: relative;
}
.np-modal-btn-add:hover {
  background: var(--cobalt, #0A6CC7);
  border-color: var(--cobalt, #0A6CC7);
}
.np-modal-btn-spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.np-modal-btn-spinner::after {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: np-btn-spin 0.7s linear infinite;
}
.np-modal-btn-add.is-loading .np-modal-btn-label { visibility: hidden; }
.np-modal-btn-add.is-loading .np-modal-btn-spinner { display: inline-flex; }

@keyframes np-btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   New Product modal — photo dropzone (.np-photo-*)
   ============================================================ */
.np-photo-zone {
  position: relative;
  border: 1.5px dashed var(--ink-200, #d1d5db);
  border-radius: 10px;
  background: #ffffff;
  min-height: 96px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.np-photo-zone:hover {
  border-color: var(--cobalt, #0A6CC7);
}
.np-photo-zone:focus-visible {
  outline: none;
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.18);
}
.np-photo-zone.is-dragover {
  border-color: var(--cobalt, #0A6CC7);
  background: rgba(10, 108, 199, 0.04);
}
.np-photo-zone.is-uploading {
  cursor: progress;
  opacity: 0.85;
}
.np-photo-zone.has-error {
  border-color: #DC2626;
}

.np-photo-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 1rem;
  text-align: center;
  color: var(--ink-500, #6b7280);
}
.np-photo-prompt svg {
  color: var(--ink-400, #9ca3af);
}
.np-photo-prompt-text {
  font-size: 0.88rem;
  color: var(--ink-800, #1f2937);
}
.np-photo-prompt-text strong {
  color: var(--cobalt, #0A6CC7);
  font-weight: 600;
}
.np-photo-prompt-hint {
  font-size: 0.75rem;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono);
}

.np-photo-preview {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
  min-height: 96px;
}
.np-photo-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ink-100, #e7e9ee);
  border: 1px solid var(--ink-200, #d1d5db);
}
.np-photo-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.np-photo-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-950, #0E1116);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.np-photo-size {
  font-size: 0.72rem;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono);
}
.np-photo-remove {
  background: var(--ink-50, #f3f4f6);
  border: 1px solid var(--ink-200, #d1d5db);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.np-photo-remove:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #B91C1C;
}
.np-photo-remove:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}

.np-photo-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.25rem;
  width: 100%;
}
.np-photo-progress-bar {
  height: 6px;
  background: var(--ink-100, #e7e9ee);
  border-radius: 999px;
  overflow: hidden;
}
.np-photo-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cobalt, #0A6CC7);
  border-radius: inherit;
  transition: width 0.18s ease;
}
.np-photo-progress-text {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono);
}

.np-photo-error {
  font-size: 0.78rem;
  color: #B91C1C;
  background: #FEE2E2;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  margin-top: 0.25rem;
}

/* ============================================================
   Edit Product modal (.ep-modal-*)
   ============================================================
   Shape-identical to the New Product modal so the operator gets a
   familiar modal for the same fields. We re-use every .np-modal-*
   and .np-photo-* rule by adding .ep-modal-* / .ep-photo-* to each
   selector list below. No need to duplicate ~60 rules — the grouped
   selectors keep both modals in lockstep when the design changes. */

.ep-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.62);
  z-index: 1070;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ep-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.ep-modal-overlay[hidden] { display: none !important; }

.ep-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--paper, #fff);
  color: var(--ink-950, #0E1116);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -22px 60px -20px rgba(0,0,0,0.45);
  padding: 1.25rem 1.4rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}
.ep-modal.is-open { transform: translateY(0); }
.ep-modal[hidden] { display: none !important; }

@media (min-width: 720px) {
  .ep-modal {
    left: 50%; right: auto; bottom: auto;
    top: 50%;
    transform: translate(-50%, 48%);
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
    border-radius: 14px;
    padding: 1.4rem 1.6rem 1.6rem;
  }
  .ep-modal.is-open { transform: translate(-50%, -50%); }
}

.ep-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.ep-modal-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
}
.ep-modal-title {
  margin: 0.15rem 0 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
}
.ep-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-500, #6b7280);
  cursor: pointer;
  border-radius: 8px;
  padding: 6px;
  line-height: 0;
  transition: background 0.14s ease, color 0.14s ease;
}
.ep-modal-close:hover { background: var(--ink-100, #e7e9ee); color: var(--ink-950, #0E1116); }
.ep-modal-close:focus-visible { outline: 2px solid var(--accent, #F5A623); outline-offset: 2px; }

.ep-modal-form { display: flex; flex-direction: column; gap: 0.95rem; margin-top: 0.25rem; }
.ep-modal-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ep-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 600px) {
  .ep-modal-row { grid-template-columns: 1fr; }
}
.ep-modal-textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
  line-height: 1.45;
}
select.ep-modal-input {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500, #6b7280) 50%),
    linear-gradient(135deg, var(--ink-500, #6b7280) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.ep-modal-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
}
.ep-modal-req  { color: #B91C1C; margin-left: 2px; }
.ep-modal-optional {
  color: var(--ink-500, #6b7280);
  font-weight: 400;
  margin-left: 4px;
  font-size: 0.78rem;
}

.ep-modal-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink-200, #d1d5db);
  border-radius: 10px;
  background: var(--paper, #fff);
  overflow: hidden;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.ep-modal-input-wrap:focus-within {
  border-color: var(--accent, #F5A623);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.ep-modal-input-wrap .ep-modal-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.ep-modal-input-wrap .ep-modal-input:focus { box-shadow: none; }

.ep-modal-prefix,
.ep-modal-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-500, #6b7280);
  background: var(--ink-100, #e7e9ee);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ep-modal-suffix { border-left: 1px solid var(--ink-200, #d1d5db); }
.ep-modal-prefix { border-right: 1px solid var(--ink-200, #d1d5db); }

.ep-modal-input {
  appearance: none;
  width: 100%;
  border: 1px solid var(--ink-200, #d1d5db);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink-950, #0E1116);
  background: var(--paper, #fff);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.ep-modal-input:focus {
  outline: none;
  border-color: var(--accent, #F5A623);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.ep-modal-input::placeholder { color: var(--ink-400, #9ca3af); }
.ep-modal-input[type="number"]::-webkit-outer-spin-button,
.ep-modal-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ep-modal-input[type="number"] { -moz-appearance: textfield; }
.ep-modal-input:disabled { background: var(--ink-100, #e7e9ee); color: var(--ink-500, #6b7280); cursor: not-allowed; }

.ep-modal-hint {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  line-height: 1.45;
}

.ep-modal-feedback {
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.ep-modal-feedback-error {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}
.ep-modal-feedback-success {
  background: #ECFDF5;
  color: #065F46;
  border-color: #6EE7B7;
}
.ep-modal-feedback[hidden] { display: none; }

.ep-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink-100, #e7e9ee);
}
.ep-modal-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  transition: background 0.14s ease, transform 0.08s ease, border-color 0.14s ease;
}
.ep-modal-btn:focus-visible { outline: 2px solid var(--accent, #F5A623); outline-offset: 2px; }
.ep-modal-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ep-modal-btn-cancel {
  background: transparent;
  color: var(--ink-700, #374151);
  border-color: var(--ink-200, #d1d5db);
}
.ep-modal-btn-cancel:hover { background: var(--ink-100, #e7e9ee); }
.ep-modal-btn-save {
  background: var(--ink-950, #0E1116);
  color: var(--paper, #fff);
  border-color: var(--ink-950, #0E1116);
}
.ep-modal-btn-save:hover { background: #1f242c; }
.ep-modal-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ep-modal-spin 0.7s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
}
.ep-modal-btn-spinner::after { content: ''; }
@keyframes ep-modal-spin {
  to { transform: rotate(360deg); }
}
.ep-modal-btn-save.is-loading .ep-modal-btn-label { visibility: hidden; }
.ep-modal-btn-save.is-loading .ep-modal-btn-spinner { display: inline-flex; }

body.ep-modal-open { overflow: hidden; }

/* Edit modal hero: photo first, larger, sits at the top of the form
   so the operator sees what they're replacing without scrolling. */
.ep-modal-hero {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink-100, #e7e9ee);
  margin-bottom: 0.2rem;
}

/* Photo dropzone (edit) — same UX as .np-photo-zone. */
.ep-photo-zone {
  position: relative;
  border: 1.5px dashed var(--ink-200, #d1d5db);
  border-radius: 12px;
  background: var(--ink-100, #e7e9ee);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
  outline: none;
}
.ep-photo-zone:hover { border-color: var(--accent, #F5A623); background: #fff7e6; }
.ep-photo-zone:focus-visible { border-color: var(--accent, #F5A623); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18); }
.ep-photo-zone.is-dragover { border-color: var(--accent, #F5A623); background: #fff3d6; }
.ep-photo-zone.is-uploading { border-style: solid; border-color: var(--ink-300, #cbd5e1); }
.ep-photo-zone.has-error { border-color: #B91C1C; background: #FEE2E2; }

.ep-photo-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-500, #6b7280);
  padding: 1rem 1.4rem;
  text-align: center;
}
.ep-photo-prompt svg { color: var(--ink-500, #6b7280); }
.ep-photo-prompt-text { font-size: 0.92rem; color: var(--ink-700, #374151); }
.ep-photo-prompt-text strong { color: var(--ink-950, #0E1116); font-weight: 600; }
.ep-photo-prompt-hint { font-size: 0.78rem; color: var(--ink-500, #6b7280); font-family: var(--font-mono, ui-monospace, monospace); }

.ep-photo-preview {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  width: 100%;
}
.ep-photo-preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--ink-100, #e7e9ee);
  flex: 0 0 auto;
}
.ep-photo-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ep-photo-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-950, #0E1116);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-photo-size {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ep-photo-remove {
  appearance: none;
  border: 0;
  background: var(--paper, #fff);
  color: var(--ink-700, #374151);
  cursor: pointer;
  border-radius: 8px;
  padding: 6px;
  line-height: 0;
  box-shadow: 0 0 0 1px var(--ink-200, #d1d5db);
  transition: background 0.14s ease, color 0.14s ease;
}
.ep-photo-remove:hover { background: #FEE2E2; color: #B91C1C; }
.ep-photo-remove:focus-visible { outline: 2px solid var(--accent, #F5A623); outline-offset: 2px; }

.ep-photo-progress {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: rgba(255,255,255,0.96);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-photo-progress-bar {
  height: 4px;
  background: var(--ink-100, #e7e9ee);
  border-radius: 99px;
  overflow: hidden;
}
.ep-photo-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent, #F5A623);
  transition: width 0.15s ease;
}
.ep-photo-progress-text {
  font-size: 0.75rem;
  color: var(--ink-500, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ep-photo-error {
  font-size: 0.78rem;
  color: #B91C1C;
  background: #FEE2E2;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}

/* ============================================================
   Delete confirmation modal (.del-modal-*)
   ============================================================
   Reuses the same shape as the other modals (slide-up sheet on mobile,
   centered card on desktop) so the operator learns one pattern. The
   differentiating piece is the destructive-action button on the right,
   which is solid red — the only red CTA in the admin shell. */
.del-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.62);
  z-index: 1070;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.del-modal-overlay.is-open { opacity: 1; }
.del-modal-overlay[hidden] { display: none !important; }

.del-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  background: var(--paper, #ffffff);
  color: var(--ink-950, #0E1116);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  padding: 1.1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.del-modal.is-open { transform: translateY(0); }
.del-modal[hidden] { display: none !important; }

@media (min-width: 560px) {
  .del-modal {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(460px, calc(100vw - 2rem));
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    transform: translate(-50%, -45%);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.18s ease;
  }
  .del-modal.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.del-modal-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
}
.del-modal-eyebrow {
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B91C1C;
}
.del-modal-title {
  grid-column: 1 / 2;
  margin: 0.15rem 0 0;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-950, #0E1116);
}
.del-modal-close {
  grid-column: 2 / 3; grid-row: 1 / 3;
  background: transparent;
  border: 0;
  padding: 0.35rem;
  margin: -0.25rem -0.25rem 0 0;
  border-radius: 8px;
  color: var(--ink-500, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.del-modal-close:hover { background: var(--ink-100, #e7e9ee); color: var(--ink-950, #0E1116); }
.del-modal-close:focus-visible {
  outline: 2px solid #DC2626;
  outline-offset: 2px;
}

.del-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.del-modal-product {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.del-modal-product-name {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: #0E1116;
  word-break: break-word;
}
.del-modal-product-sku {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #991B1B;
  margin-top: 0.15rem;
}

.del-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.del-modal-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.6rem;
  align-items: baseline;
  border-bottom: 1px dashed var(--ink-200, #d4d8df);
  padding: 0.4rem 0;
}
.del-modal-item:last-child { border-bottom: 0; }
.del-modal-item-key {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7280);
}
.del-modal-item-val {
  font-size: 0.92rem;
  color: var(--ink-800, #1f2937);
  word-break: break-word;
}
.del-modal-item-warn .del-modal-item-val {
  color: #B91C1C;
  font-weight: 600;
}

.del-modal-warning {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #991B1B;
  background: #FEF2F2;
  border-left: 3px solid #DC2626;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}

.del-modal-feedback {
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.del-modal-feedback-error {
  color: #991B1B;
  background: #FEE2E2;
}
.del-modal-feedback-success {
  color: #14532D;
  background: #DCFCE7;
}
.del-modal-feedback[hidden] { display: none !important; }

/* Blocker list: shown when the API returns error=in_use. Each blocker
   is a POR / supplier PO / quotation that still references this product.
   We render them as cards with a "Open" link so the operator can jump
   straight to the offending record and clean it up. */
.del-modal-blockers {
  margin-top: 0.6rem;
  border-radius: 8px;
  border: 1px solid #FECACA;
  background: #FFF7F7;
  padding: 0.65rem 0.75rem;
}
.del-modal-blockers[hidden] { display: none !important; }
.del-modal-blockers-head {
  font-size: 0.85rem;
  font-weight: 600;
  color: #991B1B;
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.del-modal-blockers-head-hint {
  display: block;
  font-weight: 400;
  color: #6B7280;
  margin-top: 2px;
}
.del-modal-blocker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px dashed #FCA5A5;
}
.del-modal-blocker:first-child { border-top: 0; }
.del-modal-blocker-main {
  min-width: 0;
  flex: 1 1 auto;
}
.del-modal-blocker-kind {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7F1D1D;
  background: #FECACA;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: 1px;
}
.del-modal-blocker-no {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 0.82rem;
  font-weight: 600;
  color: #111827;
}
.del-modal-blocker-status {
  display: inline-block;
  font-size: 0.7rem;
  color: #6B7280;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.del-modal-blocker-title {
  display: block;
  font-size: 0.8rem;
  color: #4B5563;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.del-modal-blocker-qty {
  display: block;
  font-size: 0.75rem;
  color: #6B7280;
  margin-top: 1px;
}
.del-modal-blocker-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #991B1B;
  background: #FFFFFF;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  transition: background 120ms ease;
}
.del-modal-blocker-link:hover { background: #FEE2E2; }
.del-modal-blocker-link::after {
  content: "→";
  font-weight: 700;
}

.del-modal-foot {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.1rem;
}
.del-modal-btn {
  appearance: none;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.del-modal-btn:disabled { opacity: 0.6; cursor: progress; }
.del-modal-btn-cancel {
  background: var(--paper, #ffffff);
  color: var(--ink-800, #1f2937);
  border: 1px solid var(--ink-200, #d4d8df);
}
.del-modal-btn-cancel:hover {
  background: var(--ink-50, #f3f4f6);
  border-color: var(--ink-300, #b8bdc6);
}
.del-modal-btn-cancel:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: 2px;
}
.del-modal-btn-proceed {
  background: #DC2626;
  color: #ffffff;
  border: 1px solid #B91C1C;
  position: relative;
  min-width: 175px;
}
.del-modal-btn-proceed:hover {
  background: #B91C1C;
  border-color: #991B1B;
}
.del-modal-btn-proceed:focus-visible {
  outline: 2px solid #DC2626;
  outline-offset: 2px;
}
.del-modal-btn-proceed:active {
  background: #991B1B;
}
.del-modal-btn-spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.del-modal-btn-spinner::after {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: np-btn-spin 0.7s linear infinite;
}
.del-modal-btn-proceed.is-loading .del-modal-btn-label { visibility: hidden; }
.del-modal-btn-proceed.is-loading .del-modal-btn-spinner { display: inline-flex; }

/* ============================================================
   In-page toast (.scc-toast-*)
   ============================================================
   Bottom-of-screen snackbar used for success/error notifications
   (e.g. "Deleted successfully"). Stacks vertically so multiple
   consecutive actions stay visible. Fixed position so it survives
   drawer/modal transitions. */
.scc-toast-host {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.scc-toast {
  pointer-events: auto;
  background: #0E1116;
  color: #ffffff;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.10);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.20s ease, transform 0.20s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Tap-and-go: full click on the toast dismisses it for big fingers. */
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}
.scc-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scc-toast--success {
  background: #14532D;
  color: #DCFCE7;
}
.scc-toast--error {
  background: #7F1D1D;
  color: #FEE2E2;
}
.scc-toast--info {
  background: #0E1116;
  color: #ffffff;
}
.scc-toast:hover {
  filter: brightness(1.05);
}

/* ============================================================
   Suppliers page (.sup-*)
   ============================================================
   Reuses .prod-drawer-* and .np-modal-* classes from the products
   page so the visual language stays consistent. New classes here
   cover only what the suppliers page adds:
     - search form (top of page)
     - table (replaces the products card grid — suppliers are
       list-shaped, not card-shaped)
     - empty state + product-count pills
   ============================================================ */

.sup-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}
.sup-search-form .sup-search-icon {
  position: absolute;
  left: 0.85rem;
  width: 16px;
  height: 16px;
  color: var(--ink-400, #9ca3af);
  pointer-events: none;
}
.sup-search-form input[type="search"] {
  flex: 1;
  width: 100%;
  padding: 0.65rem 2.25rem 0.65rem 2.35rem;
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 10px;
  font-size: 0.92rem;
  background: #fff;
  color: var(--ink-950, #0E1116);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sup-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--cobalt, #0A6CC7);
  box-shadow: 0 0 0 3px rgba(10, 108, 199, 0.12);
}
.sup-search-form input[type="search"]::placeholder {
  color: var(--ink-400, #9ca3af);
}
.sup-search-clear {
  position: absolute;
  right: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink-100, #f3f4f6);
  color: var(--ink-700, #374151);
  text-decoration: none;
}
.sup-search-clear:hover { background: var(--ink-200, #e5e7eb); color: var(--ink-950, #0E1116); }

/* ----- Empty state ----- */
.sup-empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--ink-700, #374151);
}
.sup-empty-state svg {
  color: var(--ink-400, #9ca3af);
  margin-bottom: 0.85rem;
}
.sup-empty-state h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
  color: var(--ink-950, #0E1116);
}
.sup-empty-state p {
  max-width: 38ch;
  margin: 0 auto 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ----- Table ----- */
.sup-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.sup-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7280);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink-200, #e5e7eb);
  background: var(--paper, #fafaf7);
  white-space: nowrap;
}
.sup-table thead th.num,
.sup-table tbody td.num { text-align: right; }
.sup-table tbody tr {
  transition: background 0.12s ease;
  cursor: pointer;
}
.sup-table tbody tr:hover { background: var(--paper, #fafaf7); }
.sup-table tbody tr:focus-visible {
  outline: 2px solid var(--cobalt, #0A6CC7);
  outline-offset: -2px;
  background: var(--paper, #fafaf7);
}
.sup-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink-100, #f3f4f6);
  vertical-align: middle;
  color: var(--ink-800, #1f2937);
}
.sup-table tbody tr:last-child td { border-bottom: none; }

.sup-cell-name {
  font-weight: 500;
  color: var(--ink-950, #0E1116);
}
.sup-cell-sub {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  margin-top: 0.15rem;
}

.sup-muted { color: var(--ink-400, #9ca3af); }
.sup-email-link {
  color: var(--cobalt, #0A6CC7);
  text-decoration: none;
}
.sup-email-link:hover { text-decoration: underline; }

.sup-products-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.6rem;
  padding: 0 0.55rem;
  background: var(--cobalt-soft, #DCE9F6);
  color: var(--cobalt-deep, #004F94);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  text-decoration: none;
  transition: filter 0.12s ease;
}
.sup-products-pill:hover { filter: brightness(0.95); }

.sup-cell-actions { text-align: right; width: 1%; }
.sup-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-700, #374151);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sup-row-btn:hover {
  background: var(--ink-100, #f3f4f6);
  border-color: var(--ink-200, #e5e7eb);
  color: var(--ink-950, #0E1116);
}

/* ----- Reassign picklist (delete modal) ----- */
.del-modal-reassign {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.del-modal-reassign .del-modal-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-700, #374151);
}
.del-modal-reassign .del-modal-hint {
  font-size: 0.78rem;
  color: var(--ink-500, #6b7280);
  line-height: 1.4;
}

/* ====================================================================
   Stock Card modal
   ====================================================================
   Read-only running ledger for a single product. Opened from the
   "Card" button on each product card. Mirror the existing modal
   pattern: overlay + centered modal, opacity-gated via .is-open.
*/
.sc-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.sc-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
body.sc-modal-open { overflow: hidden; }

/* IMPORTANT: without these [hidden] overrides, .sc-modal and its
   overlay keep their display:flex / position:fixed even when the
   `hidden` attribute is set. The user-agent stylesheet has
   [hidden] { display: none } but our .sc-modal rule (display:flex)
   is the same specificity and wins the cascade. The result on mobile
   was a permanently-on-screen invisible modal that intercepted taps
   on product buttons. The same pattern is documented for .prod-card
   elsewhere in this file. */
.sc-modal[hidden],
.sc-modal-overlay[hidden] { display: none !important; }

.sc-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.28), 0 0 0 1px rgba(15,23,42,0.06);
    display: flex;
    flex-direction: column;
    z-index: 81;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.sc-modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.sc-modal-head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.sc-modal-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500, #6b7280);
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 999px;
}
.sc-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink-950, #0E1116);
    flex: 1;
    margin: 0;
}
.sc-modal-close {
    /* Big touch target for mobile — was 6px padding (way below 44px tap
       standard). Also bumped the inline SVG to 24px via CSS width on the
       svg descendent selector for consistency. */
    background: transparent; border: 0; padding: 12px;
    margin: -4px -4px 0 0;
    color: var(--ink-500, #6b7280); cursor: pointer;
    border-radius: 8px;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation; /* kill 300ms double-tap delay */
    transition: background 0.15s ease, color 0.15s ease;
}
.sc-modal-close svg { width: 22px; height: 22px; }
.sc-modal-close:hover { background: #f1f5f9; color: var(--ink-950, #0E1116); }
.sc-modal-close:active { background: #e2e8f0; }

.sc-modal-body {
    padding: 16px 22px 22px;
    overflow-y: auto;
    flex: 1;
}

.sc-modal-product {
    margin-bottom: 14px;
}
.sc-modal-product-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-950, #0E1116);
}
.sc-modal-product-meta {
    font-size: 0.82rem;
    color: var(--ink-500, #6b7280);
    margin-top: 3px;
}
.sc-modal-product-meta code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.sc-modal-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .sc-modal-tiles { grid-template-columns: repeat(2, 1fr); }
}
.sc-tile {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}
.sc-tile-out    { background: #fef2f2; border-color: #fecaca; }
.sc-tile-return { background: #ecfdf5; border-color: #a7f3d0; }
.sc-tile-balance {
    background: var(--ink-950, #0E1116);
    border-color: var(--ink-950, #0E1116);
}
.sc-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500, #6b7280);
    margin-bottom: 4px;
}
.sc-tile-out .sc-tile-label    { color: #b91c1c; }
.sc-tile-return .sc-tile-label { color: #047857; }
.sc-tile-balance .sc-tile-label { color: rgba(255,255,255,0.65); }
.sc-tile-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink-950, #0E1116);
    font-variant-numeric: tabular-nums;
}
.sc-tile-out .sc-tile-value    { color: #b91c1c; }
.sc-tile-return .sc-tile-value { color: #047857; }
.sc-tile-balance .sc-tile-value { color: #fff; font-size: 1.3rem; }

.sc-modal-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0 10px;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}
.sc-modal-count {
    font-size: 0.82rem;
    color: var(--ink-500, #6b7280);
}
.sc-modal-export {
    font-size: 0.82rem;
    color: #2563eb;
    text-decoration: none;
    border: 1px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 6px;
    background: #eff6ff;
}
.sc-modal-export:hover { background: #dbeafe; }

.sc-modal-tablewrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: auto;
    max-height: 50vh;
}
.sc-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.sc-modal-table thead th {
    position: sticky; top: 0;
    background: #f8fafc;
    text-align: left;
    font-weight: 600;
    color: var(--ink-700, #374151);
    padding: 9px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sc-modal-table thead th.sc-num { text-align: right; }
.sc-modal-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--ink-950, #0E1116);
    vertical-align: top;
}
.sc-modal-table td.sc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sc-modal-table td.sc-balance {
    font-weight: 600;
}
.sc-modal-table tbody tr:hover { background: #fafbfc; }

.sc-type-chip {
    display: inline-block;
    padding: 2px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.sc-type-in     { background: #ecfdf5; color: #047857; }
.sc-type-out    { background: #fef2f2; color: #b91c1c; }
.sc-type-return { background: #eff6ff; color: #1d4ed8; }
.sc-type-adj    { background: #fefce8; color: #854d0e; }

.sc-por-link {
    color: #2563eb; text-decoration: none;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
}
.sc-por-link:hover { text-decoration: underline; }

.sc-ref {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.sc-notes {
    color: var(--ink-500, #6b7280);
    font-size: 0.78rem;
}
.sc-muted { color: var(--ink-500, #6b7280); }

.sc-modal-loading td,
.sc-modal-empty td {
    text-align: center;
    padding: 18px;
    color: var(--ink-500, #6b7280);
    font-style: italic;
}

.sc-modal-feedback {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.sc-modal-feedback.is-error {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}

/* "Card" button on the product card sits next to Stock In/Out. */
.prod-action-card {
    background: #fff;
    color: var(--ink-700, #374151);
    border: 1px solid #e5e7eb;
}
.prod-action-card:hover {
    background: #f1f5f9;
    color: var(--ink-950, #0E1116);
    border-color: #cbd5e1;
}

/* ====================================================================
   Stat card link variant (dashboard Low Stock card → /low_stock.php)
   ====================================================================
*/
.stat-card-link { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.stat-card-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
    border-color: #cbd5e1;
}
.stat-card-link:active { transform: translateY(0); }

/* ============================================================
   User dropdown — profile actions
   ----------------------------------------------------------------
   Two new items under the username dropdown (Edit profile /
   Change password) plus a thin separator above them. They are
   <button>s instead of <a>s so they don't navigate; the JS
   controller opens the matching modal.
   ============================================================ */
.dash-user-divider {
    height: 1px;
    background: var(--ink-100, #e7e9ee);
    margin: 0.25rem 0;
}
.dash-user-dropdown .dash-user-action {
    /* <button> reset — match the link rows above for visual parity */
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
}
.dash-user-dropdown .dash-user-action:hover {
    background: var(--ink-50, #f5f6f8);
    color: var(--ink-950);
}

/* ============================================================
   Profile banner
   ----------------------------------------------------------------
   Top-of-main toast used to surface a "password updated" message
   without forcing a redirect. Created on demand by the JS in
   the dashboard shell so we don't need a server-side render
   spot for it.
   ============================================================ */
.profile-banner {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    line-height: 1.35;
}
.profile-banner[hidden] { display: none; }
.profile-banner-success {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}
.profile-banner-error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}