/* ════════════════════════════════════════════════════════════════════
   PUBLIC VIEWS — editorial palette, theme-aware
   ────────────────────────────────────────────────────────────────────
   Loaded last in index.html so it wins over the older equipment-public-*
   stylesheets without their needing to be edited.

   Scope: any DOM whose body has the `public-view` class. The main app
   adds it via `document.body.classList.add('public-view')` inside the
   public scan render. The PM logger modal lives inside the same body
   so its styles inherit the same theme tokens.

   Token contract (defined in nx-system.css):
     --nx-bg, --nx-surface-1, --nx-surface-2
     --nx-text, --nx-muted, --nx-faint
     --nx-gold, --nx-gold-deep, --nx-gold-line, --nx-gold-line-2
     --nx-green (olive bronze), --nx-amber (brand gold), --nx-red (oxblood)
     --nx-gold-soft, --nx-gold-on
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   TOKEN REDEFINITION — the critical layer
   ────────────────────────────────────────────────────────────────────
   The legacy `equipment-public-pm-system.css` defines a complete
   light-mode palette via `--pm-*` tokens at `:root` scope. Those
   tokens are NOT theme-aware: `--pm-bg` is hardcoded `#faf7f0`
   (cream linen), `--pm-surface` is `var(--elevated)` (white), etc. So even
   when the rest of the app flips to dark theme, the PM logger modal
   stayed cream — the inputs went dark (those use `--nx-*`) but the
   surrounding card stayed light.

   Rather than rewrite the legacy stylesheet OR write hundreds of
   override rules with higher specificity, we redefine what the
   `--pm-*` tokens MEAN inside the public-view scope. The legacy CSS
   reads the same token names but now gets values from the live
   theme. Net effect: the entire legacy stylesheet becomes theme-
   aware automatically, by changing what 7 variables resolve to.

   This also fixes the "detached cards" look: the four sections that
   appeared to float separately (header / equipment banner / mass
   toggle / form) all use different `--pm-*` surfaces. When those
   surfaces all resolve to the same theme value, the sections
   visually unify and the gap-revealed-as-background goes away.   */
body.public-view {
  --pm-bg:           var(--nx-surface-1);
  --pm-surface:      var(--nx-surface-1);   /* card surface = bg = no banding */
  --pm-surface-2:    var(--nx-surface-1);   /* mass toggle row */
  --pm-surface-3:    var(--nx-surface-1);   /* equipment banner — same as card; tint comes from a CSS overlay below */
  --pm-border:       var(--nx-gold-line);
  --pm-border-2:     var(--nx-gold-line-2, var(--nx-gold-line));
  --pm-gold:         var(--nx-gold);
  --pm-gold-on:      var(--nx-gold-on, #101626);
  --pm-gold-soft:    var(--nx-gold-soft, var(--nx-gold-faint));
  --pm-gold-line:    var(--nx-gold-line);
  --pm-text:         var(--nx-text);
  --pm-text-muted:   var(--nx-muted);
  --pm-text-faint:   var(--nx-faint);
  --pm-red:          var(--nx-red, var(--red));
  --pm-red-soft:     var(--nx-red-faint);
  --pm-green:        var(--nx-green, var(--green));
}

/* Light-theme override — when the coin is flipped to Trajan, the
   default --nx-surface-1 is rgba(255, 253, 247, 0.65) — translucent
   white. Stacked over the modal backdrop blur it produced a muddy
   washed-out look, with inputs reading as bright opaque white against
   a cream-gray modal surface (the screenshot you sent showed exactly
   this). For light theme we need OPAQUE values so the modal reads as
   a clean parchment sheet with inputs that blend into it.
   
   Multiple selector forms below to ensure match regardless of whether
   data-theme is on html or body. Also covers the case where v5 sets
   classes on documentElement while body has public-view. */
html[data-theme="light"] body.public-view,
html[data-theme="light"].public-view body,
html[data-theme="light"] .public-view,
body.public-view[data-theme="light"],
[data-theme="light"].public-view,
[data-theme="light"] body.public-view,
[data-theme="light"] .pm-logger-modal,
[data-theme="light"] .pm-logger-card {
  --pm-bg:           var(--bg) !important;            /* opaque parchment */
  --pm-surface:      #FAF6EC !important;            /* slightly lighter than bg — the form sheet */
  --pm-surface-2:    var(--bg) !important;            /* mass toggle = bg */
  --pm-surface-3:    #F8F2DD !important;            /* equipment highlight — opaque gold-cream, no translucency */
  --pm-border:       rgba(139, 105, 20, 0.18) !important;
  --pm-border-2:     rgba(139, 105, 20, 0.30) !important;
  --pm-gold:         var(--accent) !important;            /* deep gold for cream contrast */
  --pm-gold-soft:    #F8F2DD !important;
  --pm-gold-line:    rgba(139, 105, 20, 0.20) !important;
  --pm-text:         #101626 !important;            /* warm near-black */
  --pm-text-muted:   #5a4a2a !important;
  --pm-text-faint:   #7a6a4a !important;
}

/* ─── Container & masthead ───────────────────────────────────────── */
body.public-view {
  background: var(--nx-bg) !important;
  color: var(--nx-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  margin: 0; padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.public-view * { box-sizing: border-box; }

.public-scan-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The masthead is the band at the top: coin on left, NEXUS wordmark
   on right. Mirrors the post-login pinned masthead but stripped down —
   no time, no menu, just identity + theme. */
.public-scan-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px 16px;
  border-bottom: 1px solid var(--nx-gold-line);
  margin-bottom: 18px;
}

.public-scan-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--nx-gold);
  text-transform: uppercase;
}

/* ─── The coin button ──────────────────────────────────────────────
   Same physical metaphor as the post-login coin: a 56px circular face
   with the persona portrait, plus a small label below. Tapping flips
   it (rotateY animation), which our JS uses as the cue to flip
   persona+theme. The drop shadow + idle-bob animation give it weight. */
.public-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.public-coin img {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  animation: public-coin-bob 6s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
[data-theme="light"] .public-coin img {
  filter: drop-shadow(0 4px 10px rgba(70, 50, 18, 0.25));
}
.public-coin:hover img { animation-play-state: paused; }
.public-coin.public-coin-flipped img {
  transform: rotateY(360deg);
  animation: none;
}
.public-coin-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nx-gold);
}
@keyframes public-coin-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .public-coin img { animation: none; transition: none; }
}

/* ─── Loading state ──────────────────────────────────────────────── */
.public-scan-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.public-scan-loader {
  width: 32px; height: 32px;
  border: 2px solid var(--nx-gold-line);
  border-top-color: var(--nx-gold);
  border-radius: 50%;
  animation: public-spin 0.9s linear infinite;
}
@keyframes public-spin { to { transform: rotate(360deg); } }

/* ─── Main equipment card ────────────────────────────────────────── */
.public-scan-card {
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-gold-line);
  border-radius: 20px;
  padding: 20px 18px 24px !important;
  margin: 0 0 24px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .public-scan-card {
  box-shadow: 0 6px 18px rgba(70, 50, 18, 0.08) !important;
}

.public-scan-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px;
  background: var(--nx-bg);
  margin-bottom: 18px !important;
}

.public-scan-name {
  font-family: 'Outfit', sans-serif;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--nx-text) !important;
  margin: 0 0 6px !important;
}

.public-scan-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--nx-muted) !important;
  margin: 0 0 14px !important;
}
.public-scan-loc svg { color: var(--nx-gold); flex-shrink: 0; }

/* ─── Status pill — uses --pill-c CSS var set inline by JS ───────── */
.public-scan-status {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--pill-c, var(--nx-gold)) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pill-c, var(--nx-gold)) 35%, transparent) !important;
  margin: 0 0 18px !important;
}
.public-scan-status-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pill-c, var(--nx-gold));
}
.public-scan-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pill-c, var(--nx-gold)) !important;
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--pill-c, var(--nx-gold)) 50%, transparent);
}

/* ─── Spec grid ───────────────────────────────────────────────────── */
.public-scan-fields {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px !important;
  padding: 16px !important;
  background: var(--nx-bg) !important;
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  margin-bottom: 18px;
}
.public-scan-fields > div { min-width: 0; }
.public-scan-fields label {
  display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint) !important;
  margin-bottom: 3px !important;
}
.public-scan-fields > div > div {
  font-size: 13.5px;
  color: var(--nx-text) !important;
  word-break: break-word;
}
.public-scan-overdue { color: var(--nx-red, var(--red)) !important; font-weight: 600; }

/* ─── Section heading ────────────────────────────────────────────── */
.public-scan-section h3 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nx-gold) !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--nx-gold-line);
}

/* ─── History timeline ───────────────────────────────────────────── */
.public-scan-history {
  display: grid !important;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--nx-gold-line);
}
.public-scan-history:last-child { border-bottom: none; }
.public-scan-hist-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--nx-faint);
}
.public-scan-hist-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--nx-gold);
  margin-bottom: 2px;
}
.public-scan-hist-desc {
  font-size: 13px;
  color: var(--nx-text);
  line-height: 1.4;
}
.public-scan-hist-who {
  font-size: 11px;
  color: var(--nx-muted);
  margin-top: 2px;
}

/* ─── Actions row ────────────────────────────────────────────────── */
.public-scan-actions {
  display: flex !important;
  gap: 10px !important;
  margin: 22px 0 12px !important;
  flex-wrap: wrap;
}
.public-scan-btn {
  flex: 1 1 0 !important;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px !important;
  min-height: 44px;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  border: 1px solid var(--nx-gold-line) !important;
  background: transparent !important;
  color: var(--nx-text) !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s !important;
  -webkit-tap-highlight-color: transparent;
}
.public-scan-btn:hover { border-color: var(--nx-gold) !important; }
.public-scan-btn:active { transform: scale(.97); }
.public-scan-btn-primary {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  color: var(--nx-gold-on, #101626) !important;
  border-color: var(--nx-gold) !important;
  font-weight: 600 !important;
}
[data-theme="light"] .public-scan-btn-primary {
  color: #fff !important;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.public-scan-footer {
  text-align: center;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nx-faint) !important;
  margin-top: 16px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--nx-gold-line);
}

/* ─── Error state ────────────────────────────────────────────────── */
.public-scan-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--nx-text);
}
.public-scan-error h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 10px;
}
.public-scan-error p {
  color: var(--nx-muted);
  margin: 0 0 20px;
}
.public-scan-error button {
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--nx-gold);
  background: transparent;
  color: var(--nx-gold);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.public-scan-error button:hover {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

/* ════════════════════════════════════════════════════════════════════
   PM LOGGER — same editorial palette + SVG icons
   ════════════════════════════════════════════════════════════════════ */

/* The button stack injected by public-pm.js */
.pm-public-actions {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  margin: 0 0 16px !important;
}
.pm-public-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  min-height: 64px;
  width: 100%;
  border-radius: 18px !important;
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-gold-line) !important;
  color: var(--nx-text) !important;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .12s !important;
  -webkit-tap-highlight-color: transparent;
}
.pm-public-btn:hover { border-color: var(--nx-gold) !important; }
.pm-public-btn:active { transform: scale(.99); }
.pm-public-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--nx-gold-soft, var(--nx-gold-faint)) !important;
  color: var(--nx-gold) !important;
  font-size: 18px;
}
.pm-public-btn-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-public-btn-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--nx-text) !important;
}
.pm-public-btn-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px;
  color: var(--nx-faint) !important;
  text-transform: uppercase;
}
.pm-public-btn-primary {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  border-color: var(--nx-gold) !important;
}
.pm-public-btn-primary .pm-public-btn-icon {
  background: rgba(0, 0, 0, 0.15) !important;
  color: var(--nx-gold-on, #101626) !important;
}
.pm-public-btn-primary .pm-public-btn-title { color: var(--nx-gold-on, #101626) !important; }
.pm-public-btn-primary .pm-public-btn-sub   { color: rgba(28, 20, 8, 0.65) !important; }
[data-theme="light"] .pm-public-btn-primary .pm-public-btn-title,
[data-theme="light"] .pm-public-btn-primary .pm-public-btn-sub { color: #fff !important; }
[data-theme="light"] .pm-public-btn-primary .pm-public-btn-sub { color: rgba(255, 255, 255, 0.75) !important; }
[data-theme="light"] .pm-public-btn-primary .pm-public-btn-icon { color: #fff !important; }

.pm-public-btn-call .pm-public-btn-icon { color: var(--nx-green, var(--green)) !important; }
.pm-public-btn-tertiary .pm-public-btn-icon { color: var(--nx-red, var(--red)) !important; }

/* ─── PM Logger modal ────────────────────────────────────────────── */
.pm-logger-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 600px) {
  .pm-logger-modal { align-items: center; }
}
.pm-logger-bg {
  position: absolute; inset: 0;
  background: rgba(8, 6, 4, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Light theme: a soft warm wash, not a dark veil. Was 40% warm-brown
   which produced the muddy backdrop visible in the screenshot
   behind the modal. 20% with the blur lets the page underneath
   stay legible while still drawing focus to the modal. */
[data-theme="light"] .pm-logger-bg { background: rgba(120, 95, 50, 0.18); }
.pm-logger-card {
  position: relative;
  /* Preserve the legacy flex-column layout so children stack flush
     with no `--pm-bg` showing through between them. Without these,
     the children flowed in normal block order with implicit margin
     collapse making the gaps the user saw. */
  display: flex !important;
  flex-direction: column !important;
  /* CRITICAL: opaque background. The legacy CSS sets background:
     var(--pm-bg) and our redefinition pointed --pm-bg at
     --nx-surface-1, which is translucent in BOTH themes (rgba 45% in
     dark, rgba 65% white in light). When the modal sits over the
     backdrop blur, that translucency bleeds the backdrop through and
     produces a muddy gray-brown wash — exactly the "missed the top"
     visible in the screenshot. The form scroll area below was opaque
     because its inner sections had their own backgrounds; the header
     band above didn't.
     
     We use --nx-bg directly (which is fully opaque in both themes:
     dark charcoal #0a0a0c, light parchment var(--bg)) and override the
     legacy var(--pm-bg) with !important. */
  background: var(--nx-bg) !important;
  border-top: 1px solid var(--nx-gold) !important;
  border-radius: 22px 22px 0 0 !important;
  max-width: 640px;
  width: 100%;
  /* Cap height but don't force 95vh — let content size naturally up
     to the cap. Forces the modal to be only as tall as its content,
     which means there's no extra space for `--pm-bg` to show through
     at the bottom. */
  max-height: 92vh;
  height: auto !important;
  overflow-y: auto;
  /* No padding on the card itself — sections inside (header, eq banner,
     mass toggle, form sections, actions) each declare their own 22px
     horizontal padding so they sit edge-to-edge with hairline dividers
     between. Earlier the card had its own padding which caused the
     internal sections to look like nested cards floating in a gutter. */
  padding: 0 !important;
  animation: pm-slide-up 0.25s ease-out;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .pm-logger-card {
  box-shadow: 0 -8px 32px rgba(70, 50, 18, 0.12);
}
@media (min-width: 600px) {
  .pm-logger-card {
    border: 1px solid var(--nx-gold) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  [data-theme="light"] .pm-logger-card {
    box-shadow: 0 12px 40px rgba(70, 50, 18, 0.18);
  }
}
@keyframes pm-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.pm-logger-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px !important;
  margin-bottom: 0 !important;
  /* Single divider hairline; no contrasting background. The whole
     modal reads as one continuous card now, separated by thin gold
     lines rather than by background banding which made the sections
     look like detached cards stacked together.
     
     Background: transparent so the card's --nx-bg shows through. The
     legacy CSS forces var(--pm-surface) which would otherwise resolve
     to a translucent value. */
  background: transparent !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
}
.pm-logger-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--nx-text) !important;
  display: flex; align-items: center; gap: 10px;
}
.pm-logger-title::before { content: none !important; }
.pm-logger-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-gold);
  font-size: 14px;
}
.pm-logger-close {
  width: 32px; height: 32px;
  background: transparent !important;
  border: none !important;
  color: var(--nx-faint) !important;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.pm-logger-close:hover {
  color: var(--nx-text) !important;
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

.pm-logger-eq {
  padding: 16px 22px !important;
  /* Subtle gold-tinted highlight, drawn as a layer atop the card's
     opaque --nx-bg rather than via a translucent surface token. This
     way the section reads as cream-with-a-warm-cast in light theme
     and charcoal-with-a-warm-cast in dark theme — never bleeding the
     backdrop blur through. */
  background: var(--nx-gold-faint) !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
}
[data-theme="light"] .pm-logger-eq {
  background: rgba(139, 105, 20, 0.06) !important;
}
.pm-logger-eq-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500;
  color: var(--nx-text) !important;
  margin-bottom: 2px;
}
.pm-logger-eq-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  color: var(--nx-faint) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pm-logger-mass-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px !important;
  /* Same surface as the rest of the card — no contrasting fill. The
     bottom hairline divider does all the visual separation work. */
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  font-size: 13px;
  color: var(--nx-text) !important;
}
.pm-logger-mass-toggle input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  accent-color: var(--nx-gold) !important;
  cursor: pointer;
}
.pm-logger-toggle-icon { color: var(--nx-gold); margin-right: 4px; }

/* ─── Mass-PM unit list ─────────────────────────────────────────────
   When mass mode is on, the modal expands a list of similar-category
   equipment so the contractor can check multiple units at once. The
   legacy stylesheet (equipment-public-pm.css line 208+) styled these
   rows with HARDCODED hex colors (#faf8f5 cream background, #fff8e8
   selected highlight) — bypassing both --nx-* and --pm-* tokens. So
   even after redefining --pm-* to be theme-aware, these rows stayed
   cream in dark mode.

   Override here, scoped to body.public-view, with higher specificity
   to win against the legacy rules. */
body.public-view .pm-logger-mass-list {
  background: transparent !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
}
body.public-view .pm-mass-header {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--nx-faint) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.4px !important;
}
body.public-view .pm-mass-all {
  background: transparent !important;
  border: 1px solid var(--nx-gold-line) !important;
  color: var(--nx-gold) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}
body.public-view .pm-mass-all:hover {
  border-color: var(--nx-gold) !important;
  background: var(--nx-gold-soft, var(--nx-gold-faint)) !important;
}
body.public-view .pm-mass-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.public-view .pm-mass-item {
  background: var(--pm-bg, var(--nx-bg)) !important;
  border: 1px solid var(--pm-border, var(--nx-gold-line)) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  transition: border-color .15s, background .15s !important;
}
body.public-view .pm-mass-item:has(input:checked) {
  background: var(--nx-gold-soft, var(--nx-gold-faint)) !important;
  border-color: var(--nx-gold) !important;
}
body.public-view .pm-mass-item input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--nx-gold) !important;
  cursor: pointer;
}
body.public-view .pm-mass-eq-name {
  color: var(--nx-text) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
body.public-view .pm-mass-eq-loc {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--nx-faint) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 3px !important;
}
body.public-view .pm-mass-loading,
body.public-view .pm-mass-empty {
  color: var(--nx-faint) !important;
  background: var(--nx-bg) !important;
  border-radius: 14px;
}

.pm-form-section {
  /* Form sections also share the modal's surface — no separate card
     treatment. They're delineated by an internal section heading and
     a hairline at the bottom. The first section has no top hairline
     because the mass-toggle above it already provides one. */
  padding: 18px 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
  border-radius: 0 !important;
}

/* The form wrapper that scrolls — make it transparent so it inherits
   the card's opaque --nx-bg. Legacy sets var(--pm-bg) which after our
   redefinition resolves to a translucent value. */
.pm-logger-form {
  background: transparent !important;
}
.pm-form-section:last-of-type { border-bottom: none; }
.pm-form-section h3 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nx-gold) !important;
  margin: 0 0 12px !important;
}
.pm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pm-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint) !important;
  margin: 10px 0 6px !important;
}
.pm-label-icon { color: var(--nx-gold); }
.pm-input, .pm-textarea, .pm-select {
  width: 100%;
  padding: 11px 14px !important;
  /* Use --pm-surface (theme-aware via token redefinition above) so
     inputs blend with the modal sheet. Was --nx-bg which in light
     theme resolves to opaque var(--bg) and looked correct in dark mode
     but the legacy CSS at higher specificity uses --pm-surface, and
     in light theme --nx-surface-1 default was a translucent white
     that made inputs look like bright pure-white pills against the
     cream modal background. Switching to --pm-surface fixes both
     themes consistently. */
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border-2, var(--nx-gold-line)) !important;
  border-radius: 14px !important;
  color: var(--pm-text, var(--nx-text)) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  transition: border-color .15s;
}
.pm-input::placeholder, .pm-textarea::placeholder {
  color: var(--pm-text-faint, var(--nx-faint)) !important;
}
.pm-input:focus, .pm-textarea:focus, .pm-select:focus {
  outline: none;
  border-color: var(--nx-gold) !important;
}
.pm-textarea { resize: vertical; min-height: 80px; }

.pm-logger-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  background: var(--nx-gold-soft, var(--nx-gold-faint)) !important;
  border-left: 2px solid var(--nx-gold);
  border-radius: 12px;
  font-size: 12px !important;
  color: var(--nx-muted) !important;
  margin: 14px 0 16px !important;
  line-height: 1.5;
}
.pm-tip-icon { color: var(--nx-gold); flex-shrink: 0; }

.pm-logger-actions {
  display: flex;
  gap: 10px;
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--nx-surface-1) !important;
  border-top: 1px solid var(--nx-gold-line);
  position: sticky;
  bottom: 0;
}
.pm-logger-actions button {
  flex: 1;
  padding: 12px 16px !important;
  min-height: 44px;
  border-radius: 999px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--nx-gold-line) !important;
  background: transparent !important;
  color: var(--nx-text) !important;
  transition: border-color .15s, background .15s, transform .12s;
}
.pm-logger-actions button[type="submit"],
.pm-logger-actions .pm-submit {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep)) !important;
  color: var(--nx-gold-on, #101626) !important;
  border-color: var(--nx-gold) !important;
  font-weight: 600;
}
[data-theme="light"] .pm-logger-actions button[type="submit"],
[data-theme="light"] .pm-logger-actions .pm-submit { color: #fff !important; }

/* ─── Success screen ─────────────────────────────────────────────── */
.pm-success {
  text-align: center;
  padding: 36px 20px 24px;
}
.pm-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-green, var(--green));
  margin-bottom: 16px;
}
.pm-success-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500;
  color: var(--nx-text) !important;
  margin-bottom: 10px;
}
.pm-success-msg {
  color: var(--nx-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ─── Review screen (admin) ──────────────────────────────────────── */
.pm-review-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pm-review-spam-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--nx-red-soft);
  color: var(--nx-red, var(--red));
  border-radius: 999px;
  margin-right: 6px;
}
.pm-review-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.pm-review-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid var(--nx-gold-line);
  background: transparent;
  color: var(--nx-faint);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pm-review-approve { color: var(--nx-green, var(--green)) !important; border-color: rgba(63, 160, 143, 0.4) !important; }
.pm-review-reject  { color: var(--nx-faint) !important; }
.pm-review-spam    { color: var(--nx-red, var(--red)) !important; border-color: var(--nx-red-line) !important; }
.pm-review-actions button:hover {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}

/* ─── Mobile tightening ──────────────────────────────────────────── */
@media (max-width: 380px) {
  .public-scan-container { padding: 0 12px env(safe-area-inset-bottom, 0px); }
  .public-scan-name { font-size: 22px !important; }
  .public-scan-fields { padding: 14px !important; gap: 10px 14px !important; }
  .pm-form-row { grid-template-columns: 1fr; }
  .pm-public-btn { padding: 12px 14px !important; }
  .public-coin img { width: 48px; height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v18.30 — public-PM progress stepper + landing health strip. Reversible
   block: delete from here to EOF to revert. Bar fill colors/widths are
   inline (set in JS); only layout + state styling live here.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px 0;
}
.pm-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nx-faint, #6c7585);
}
.pm-step-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  flex-shrink: 0;
}
.pm-step.is-active { color: var(--nx-gold, #d4a44e); }
.pm-step.is-active .pm-step-dot {
  background: var(--nx-gold, #d4a44e);
  border-color: var(--nx-gold, #d4a44e);
  color: #101626;
}
.pm-step.is-done .pm-step-dot {
  background: #3fa08f;
  border-color: #3fa08f;
  color: #0e1320;
}
.pm-steps-bar {
  height: 4px;
  border-radius: 2px;
  margin: 8px 20px 4px;
  background: rgba(212, 164, 78, 0.12);
  overflow: hidden;
}
.pm-steps-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #d4a44e, #b88830);
  transition: width 0.3s ease;
}
.pm-public-health {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--nx-surface-1, rgba(34, 46, 70, 0.42));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 14px;
}
.pm-pub-hb-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nx-gold, #d4a44e);
  margin-bottom: 8px;
}
.pm-pub-hb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.pm-pub-hb:first-of-type { margin-top: 0; }
.pm-pub-hb-l {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nx-faint, #6c7585);
  width: 42px;
  flex-shrink: 0;
}
.pm-pub-hb-tr {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: rgba(212, 164, 78, 0.12);
  overflow: hidden;
}
.pm-pub-hb-fl { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.pm-pub-hb-c {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  width: 74px;
  text-align: right;
  flex-shrink: 0;
}
[data-theme="light"] .pm-public-health {
  background: #FAF6EC;
  border-color: rgba(168, 116, 42, 0.24);
}
[data-theme="light"] .pm-steps-bar,
[data-theme="light"] .pm-pub-hb-tr { background: rgba(168, 116, 42, 0.15); }

/* ════════════════════════════════════════════════════════════════════
   v259 — MASS PM / LOG SERVICE corrections (Alfredo's screenshot, Jul 10)
   ──────────────────────────────────────────────────────────────────── */
/* 1. The sticky Cancel/Submit footer painted on --nx-surface-1, which is
   42%-ALPHA — the Signature heading showed through the Cancel button.
   The footer of a scrolling form must be opaque, always. */
.pm-logger-actions {
  background: var(--nx-surface-solid, #131a2c) !important;
  z-index: 8 !important;
}
[data-theme="light"] .pm-logger-actions { background: var(--bg, #faf7f0) !important; }

/* 2. Mass-PM unit checklist: a cramped 240px window that cut unit rows
   mid-body under the toggle. Give it real room and a clean frame. */
.pm-logger-mass-list {
  max-height: 42vh !important;
  padding: 10px 14px 12px !important;
}

/* 3. Date/type rows: Chrome Android date inputs have an intrinsic
   min-width that overflows a 1fr grid track on ~400px phones, shoving
   the neighbour off-screen. Clamp them, and stack earlier. */
.pm-form-row > * { min-width: 0; }
.pm-form-row .pm-input { width: 100% !important; box-sizing: border-box !important; }
@media (max-width: 460px) {
  .pm-form-row { grid-template-columns: 1fr; }
}

/* 4. Native "Choose Files" inputs → NEXUS-themed pick buttons. */
.pm-input.pm-file { padding: 9px !important; color: var(--nx-muted, #9aa3b2) !important; }
.pm-input.pm-file::file-selector-button {
  margin-right: 10px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--nx-gold-line, rgba(212,164,78,.35));
  background: var(--nx-gold-faint, rgba(212,164,78,.12));
  color: var(--nx-gold, #d4a44e);
  font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
}