/* ==========================================================================
   LOT — brand layer
   Loaded LAST on every page (after lot-ui.css).
   Fixes:
     1. outline icons rendered as solid blocks
     2. theme-aware brand mark (inline SVG, no giant PNGs)
     3. v4.8.1 dialog using light tokens on a dark page
     4. navbar collapsing / overflowing on small screens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ICONS
   lot-ui.css:98 has  `.svg-icon > svg { fill: currentColor }`, which beats the
   `fill="none"` presentation attribute on stroked icons. Every outline icon
   (Purchase wallet, Documentation book, Account person, ...) therefore renders
   as a filled blob. Respect the author's intent: outline icons stay outlines.
   -------------------------------------------------------------------------- */
.svg-icon > svg[fill="none"],
.svg-icon > svg[stroke="currentColor"] {
  fill: none;
}

/* --------------------------------------------------------------------------
   2. BRAND MARK
   The old raster marks: lot-mark.png draws #F6F6F6 chevrons (invisible on the
   white/light surfaces) and lot-logo.png is a 1.5 MB opaque PNG used as the
   favicon on every page. Both are replaced by an inline SVG that inherits the
   surrounding text colour, plus real favicon files.
   -------------------------------------------------------------------------- */
.lot-mark {
  display: inline-block;
  width: 42px;
  height: auto;
  flex: 0 0 auto;
  fill: currentColor;                            /* chevrons follow text colour */
  vertical-align: middle;
}

.lot-mark .lot-mark-accent {
  fill: var(--lot-brand-accent, #b89bf5);        /* signature purple */
}

.lph-brand .lot-mark {
  width: 42px;
  height: 42px;
}

.navbar-desktop .home .lot-mark {
  width: 44px;
  height: 44px;
}

.lph-hero-orb-inner .lot-mark {
  width: 96px;
  height: 96px;
  filter: brightness(1.15);
}

.lph-obf-watermark.lot-mark {
  width: 280px;
  height: 280px;
  color: var(--primary-color);
}

/* the brand text block should never wrap mid-word */
.lph-brand span,
.lph-brand small {
  white-space: nowrap;
}

/* legacy safety net if any <img> marks survive a rebuild */
.lph-brand img,
.navbar-desktop .home img {
  max-width: 44px;
  height: auto;
}

/* --------------------------------------------------------------------------
   3. OVERLAY TOKENS (v4.8.1 dialog, recorder overlay)
   These nodes are portalled outside .dashboard-layout, so they never receive
   [data-theme="dark"] and fall back to the light :root palette — a white panel
   floating on a dark dashboard. Mirror the dark palette onto them.
   -------------------------------------------------------------------------- */
[data-lot-mode="dark"] .lot-upgrade,
[data-lot-mode="dark"] .rec-overlay,
.dashboard-layout[data-theme="dark"] + .lot-upgrade {
  --bg-color: #191919;
  --nav-color: #2c2c2c;
  --text-color: #ffffff;
  --text-alt-color: #9a9a9a;
  --text-color-contrast: #262626;
  --primary-color: #a3f4ff;
  --secondary-color: #ffffff;
  --accent-color: #00e1ff;
  --dashboard-tint-color: #ffffff0d;
  --dashboard-tint-color-hover: #ffffff1a;
  --nav-border: #ffffff24;
}

[data-lot-mode="dark"] .lot-upgrade-dialog,
[data-lot-mode="dark"] .rec-dialog,
.dashboard-layout[data-theme="dark"] + .lot-upgrade .lot-upgrade-dialog {
  border: 1px solid var(--nav-border);
}

[data-lot-mode="dark"] .lot-upgrade-dialog h2,
.dashboard-layout[data-theme="dark"] + .lot-upgrade .lot-upgrade-dialog h2 {
  color: var(--text-color) !important;
}

[data-lot-mode="light"] .lot-upgrade-dialog,
[data-lot-mode="light"] .rec-dialog {
  box-shadow: 0 24px 70px rgba(28, 14, 56, 0.28);
}

[data-lot-mode="light"] .lot-upgrade-shade,
[data-lot-mode="light"] .rec-backdrop {
  background: rgba(28, 14, 56, 0.42);
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE NAVBAR
   Below 980px the nav links used to overflow the container while the brand
   text wrapped underneath. Collapse into a proper toggleable panel instead.
   -------------------------------------------------------------------------- */
.lph-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lph-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.lph-header.nav-open .lph-nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.lph-header.nav-open .lph-nav-toggle span:nth-child(2) {
  opacity: 0;
}

.lph-header.nav-open .lph-nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 980px) {
  .lph-navbar {
    flex-wrap: wrap;
    padding-top: 20px;
    row-gap: 16px;
  }

  .lph-nav-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .lph-nav-items {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    display: none;
  }

  .lph-header.nav-open .lph-nav-items {
    display: flex;
  }

  .lph-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .lph-nav-links a {
    padding: 10px 2px;
    font-size: 17px;
  }

  .lph-btn-outlined {
    width: 100%;
    margin-top: 4px;
  }

  .lph-brand {
    font-size: 22px;
    gap: 10px;
  }

  .lph-brand .lot-mark {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 420px) {
  .lph-container {
    padding: 0 18px;
  }

  .lph-brand small {
    font-size: 11px;
  }
}

/* respect reduced-motion preferences for the toggle animation */
@media (prefers-reduced-motion: reduce) {
  .lph-nav-toggle span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5. LEGACY RELEASE REPORTS (v4.4 - v4.6)
   These templates ship a text-only brand. Add the mark for consistency.
   -------------------------------------------------------------------------- */
.v44-top .lot-mark,
.lot45-nav .lot-mark {
  width: 26px;
  height: 26px;
  margin-right: 9px;
  vertical-align: -6px;
}

.v44-top b,
.lot45-nav > a {
  display: inline-flex;
  align-items: center;
}


/* --------------------------------------------------------------------------
   6. RELEASE HEROES WITHOUT STOCK PHOTOGRAPHY
   The report heroes used a landscape photo of unverified provenance. They now
   use the same purple field as the rest of the site, so nothing depends on an
   unlicensed image.
   -------------------------------------------------------------------------- */
.report-hero,
.v44-hero,
.lot45-hero {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(135deg, #4a3480 0%, #6b47a0 55%, #9a5fb4 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
}


/* --------------------------------------------------------------------------
   7. TARGET LIST
   The platform rows carry a title only now, so rebalance the row so it reads
   as a deliberate compact list instead of a card with missing text.
   -------------------------------------------------------------------------- */
.lph-targets-card {
  gap: 12px;
  padding: 24px;
}

.lph-target-row {
  padding: 14px 20px;
  gap: 16px;
  border: 1px solid #ece4f2;
  box-shadow: none;
}

.lph-target-row h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.lph-target-row .t-badge {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}