/* ============================================================
   Library Market Discovery - Unified Chrome + Hero (v2.7.16)

   Replaces THREE legacy systems with a single module:
     1. base.njk's old dark .lm-topbar (landing/admin/dashboard)
     2. tools/_shared/tool-chrome.css (shared tool two-strip nav)
     3. tools/colortest/index.html's bespoke .discovery-nav

   Surfaces using this module:
     - Landing  (Projects)
     - Admin    (Platform Admin)
     - Project Dashboard
     - Sitemap, Work Log, Design Proofs, Color Test
     - Future tools (DCD, Categories worksheet, etc.)

   The chrome is:
     - light/white slim bar
     - sticky to top
     - light shadow underneath
     - LM mark + divider + functional breadcrumb + RHS actions

   The hero pattern is:
     - h1 + lede
     - optional right-aligned actions
     - optional secondary strip (admin tabs, landing pills, tool toolbar)
     - optional state banner (readonly client view, warning, etc.)

   Both staff AND clients now see the chrome. base.njk no longer hides
   the topbar when ?ro=1 - clients get a gated action set instead.
   ============================================================ */

/* v2.10.5 D-008: respect the HTML `hidden` attribute authoritatively.
   Without !important, author rules like `.btn { display: inline-flex }`
   (which exist in all 4 tool files + lm.css `.btn-primary` /
   `.btn-secondary`) win over the UA `[hidden] { display: none }` rule
   by cascade order (same specificity, author wins). This defeats
   `element.hidden = true` from JS. Surfaced as the Log Work button
   rendering for clients in work-log despite L540's `addBtn.hidden =
   !state.isStaff || ...` correctly setting the attribute. The CSS
   was overriding the attribute. This rule makes the hidden attribute
   behave the way HTML semantics demand it should, everywhere, for
   any element type. lm-chrome.css is loaded by every surface (njk
   pages via base.njk + all 4 tools directly), so one rule here
   covers the whole platform. */
[hidden] { display: none !important; }

:root {
  /* Atlas chrome tokens (legacy --lmc-* names retained as aliases; the
     bulk of chrome CSS underneath references these by name). Remapped
     to the Vesper dark-first palette. Side-by-side with the canonical
     Atlas-native tokens defined in lm.css (--bg, --text, --violet,
     etc.) - prefer the canonical names in new components. */
  /* AF retheme (2026-06-14): chrome tokens retargeted to Artifact
     Futurism. Paper surfaces, ink text, purple/ochre/teal, no
     shadows. Names preserved so chrome component CSS keeps compiling. */
  --lmc-teal:               #2E8B7F;
  --lmc-teal-dark:          #1F5A52;
  --lmc-teal-pale:          rgba(46, 139, 127, 0.14);
  --lmc-coral:              #B5546E;
  --lmc-coral-pale:         rgba(181, 84, 110, 0.14);
  --lmc-purple:             #5C3879;   /* muted purple (non-action UI) -> AAA deep on paper */
  --lmc-purple-pale:        rgba(120, 74, 157, 0.10);
  --lmc-amber-pale:         rgba(217, 169, 60, 0.18);
  --lmc-amber-dark:         #7A6210;   /* ochre text on amber-pale */
  --lmc-amber-border:       rgba(217, 169, 60, 0.45);
  --lmc-brand-purple:       #784A9D;
  --lmc-brand-purple-hover: #5C3879;
  --lmc-brand-purple-pale:  rgba(120, 74, 157, 0.14);
  --lmc-white:              #FBFAF6;                /* "surface" token -> paper-raised */
  --lmc-bg:                 #F4F2EC;                /* page bg -> paper */
  --lmc-bg-soft:            #FBFAF6;                /* card / popover -> paper-raised */
  --lmc-ink:                #1B1A17;                /* primary text -> ink */
  --lmc-ink-soft:           #5F5B51;                /* secondary text -> muted */
  --lmc-ink-faded:          #7A756A;                /* tertiary text */
  --lmc-rule:               #D8D2C2;
  --lmc-rule-soft:          #E4DFD1;
  --lmc-shadow-sm:          none;                   /* AF: flat surfaces */
  --lmc-shadow-md:          none;
  --lmc-poppins:            'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lmc-mono:               'IBM Plex Mono', ui-monospace, monospace;
  /* Save-dot color states. Idle teal, saving teal pulse, saved green,
     error coral. Carried through; values pick up the dark palette. */
  --lmc-save-idle:          var(--lmc-teal);
  --lmc-save-saved:         var(--lmc-teal);
  --lmc-save-error:         var(--lmc-coral);

  /* Platform-wide constrained content width. v0.25.24: widened to 1280px
     so the chrome header + breadcrumb bar line up with the page content
     (dashboard/landing/mission all use 1280 + a 24px gutter). */
  --lm-constrained-width:   1280px;
}

/* Light theme overrides for chrome tokens. See lm.css for the canonical
   --bg / --text / --violet tokens; this block flips the legacy --lmc-*
   aliases back to LM-style light values for users who prefer light mode. */
[data-theme="light"] {
  /* AF is the single theme; the light toggle resolves to the same AF values. */
  --lmc-teal:               #2E8B7F;
  --lmc-teal-dark:          #1F5A52;
  --lmc-teal-pale:          rgba(46, 139, 127, 0.14);
  --lmc-coral:              #B5546E;
  --lmc-coral-pale:         rgba(181, 84, 110, 0.14);
  --lmc-purple:             #5C3879;
  --lmc-purple-pale:        rgba(120, 74, 157, 0.10);
  --lmc-amber-pale:         rgba(217, 169, 60, 0.18);
  --lmc-amber-dark:         #7A6210;
  --lmc-amber-border:       rgba(217, 169, 60, 0.45);
  --lmc-brand-purple:       #784A9D;
  --lmc-brand-purple-hover: #5C3879;
  --lmc-brand-purple-pale:  rgba(120, 74, 157, 0.14);
  --lmc-white:              #FBFAF6;
  --lmc-bg:                 #F4F2EC;
  --lmc-bg-soft:            #FBFAF6;
  --lmc-ink:                #1B1A17;
  --lmc-ink-soft:           #5F5B51;
  --lmc-ink-faded:          #7A756A;
  --lmc-rule:               #D8D2C2;
  --lmc-rule-soft:          #E4DFD1;
  --lmc-shadow-sm:          none;
  --lmc-shadow-md:          none;
}

/* ============================================================
   CHROME (slim sticky bar)
   ============================================================ */

.lm-chrome {
  /* v2.7.23: the chrome bar itself spans full viewport (white bg, sticky,
     shadow, border). The 32px horizontal padding is the narrow-viewport
     gutter. Flex layout moved to .lm-chrome-inner so the chrome's
     CONTENTS sit within the same 1100px constrained column as the hero
     and body content - breadcrumb / wordmark / actions all line up with
     the hero text and the cards below. */
  background: var(--lmc-white);
  border-bottom: 1px solid var(--lmc-rule);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--lmc-shadow-sm);
}
.lm-chrome-inner {
  /* v2.7.23: real flex container, no longer display:contents. Max-width
     matches the platform's --lm-constrained-width so the chrome's
     contents align with .lm-hero-inner / .lp-content / .admin-main /
     .dash-main / .workspace at the same left edge. */
  max-width: var(--lm-constrained-width, 1100px);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.lm-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  color: inherit;
}
/* Vesper Atlas header wordmark - site-logo-header.png with the
   8-point star + lavender Vesper + amber Atlas. Original aspect is
   1024x210 (~4.88:1). 32px height yields ~156px width. Bumped from
   22px in v0.10.0 (the LMD-inherited 22px read too small for the
   new lockup that includes the star icon - the star looks great at
   32px and the wordmark stays comfortably legible). */
.lm-wordmark {
  display: block;
  height: 32px;
  width: auto;
}

.lm-chrome-divider {
  width: 1px;
  height: 24px;
  background: var(--lmc-rule);
  flex-shrink: 0;
}

.lm-crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-family: var(--lmc-poppins);
}
.lm-crumb-link {
  color: var(--lmc-ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.lm-crumb-link:hover {
  color: var(--lmc-ink);
  background: var(--lmc-bg);
}
.lm-crumb-sep {
  color: var(--lmc-ink-faded);
  font-size: 12px;
  opacity: 0.6;
  user-select: none;
}
.lm-crumb-current {
  font-weight: 600;
  color: var(--lmc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-crumb-label {
  /* For client view - same visual position as a link but not interactive */
  color: var(--lmc-ink-soft);
  font-weight: 500;
  padding: 3px 6px;
  margin: -3px -6px;
  cursor: default;
}
/* v2.10.13 CHROME-1: project logo in crumb slot (staff side only).
   Sized to fit within the existing topbar height; falls back to text
   via the JS renderer when no logoUrl is uploaded on the project.
   Width-capped to keep narrow viewports compact; max-height matches
   the visual weight of the surrounding 14px crumb text. */
.lm-crumb-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  vertical-align: middle;
}
.lm-crumb-link .lm-crumb-logo,
.lm-crumb-current .lm-crumb-logo,
.lm-crumb-label .lm-crumb-logo {
  /* Tighten link/current padding so the logo dominates its cell. */
  margin: -2px 0;
}

/* ============================================================
   v2.10.13 CHROME-2: project switcher dropdown removed
   ============================================================
   The v2.8.2-era .lm-project-switcher / .lm-project-switcher-trigger
   / .lm-project-switcher-pop / .lm-project-switcher-item / etc. CSS
   block (~130 lines) has been deleted along with the matching JS.
   v2.11.0 finished the cleanup by removing the recordProjectVisit()
   no-op stub and all feature-detected callers. */

.lm-chrome-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   SAVE STATE (in chrome actions slot)
   ============================================================ */

.lm-save-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lmc-ink-faded);
  padding: 0 10px;
  font-family: var(--lmc-poppins);
}
.lm-save-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lmc-save-idle);
  flex-shrink: 0;
}
.lm-save-state.is-saving .lm-save-dot {
  animation: lm-pulse 1.2s ease-in-out infinite;
}
.lm-save-state.is-saved .lm-save-dot {
  background: var(--lmc-save-saved);
}
.lm-save-state.is-error .lm-save-dot {
  background: var(--lmc-save-error);
}
.lm-save-state.is-error {
  color: var(--lmc-coral);
}
@keyframes lm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--lmc-rule);
  background: var(--lmc-white);
  color: var(--lmc-ink);
  font-family: var(--lmc-poppins);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  line-height: 1.2;
}
.lm-btn:hover {
  background: var(--lmc-bg);
  border-color: var(--lmc-ink-faded);
}
.lm-btn:disabled,
.lm-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.lm-btn-primary {
  background: var(--lmc-brand-purple);
  border-color: var(--lmc-brand-purple);
  color: #fff;
}
.lm-btn-primary:hover {
  background: var(--lmc-brand-purple-hover);
  border-color: var(--lmc-brand-purple-hover);
  color: #fff;
}
.lm-btn-coral {
  background: var(--lmc-coral);
  border-color: var(--lmc-coral);
  color: #fff;
}
.lm-btn-coral:hover {
  background: #d8451c;
  border-color: #d8451c;
}
.lm-btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.lm-btn-caret {
  margin-left: 2px;
  font-size: 14px;
}

/* ============================================================
   v0.15.0: NOTIFICATION BELL + POPOVER

   Lives in .lm-chrome-actions, left of the avatar. Button = bell
   icon with a small badge for unread count. Click opens a fixed
   320-360px panel with a mission filter dropdown, mark-all-read
   button, and a scrollable event list.
   ============================================================ */

.lm-notif-wrap {
  position: relative;
  display: inline-flex;
  margin-right: 8px;
}
.lm-notif-bell {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2, #a8b1c8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  font-family: inherit;
}
.lm-notif-bell:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f0f4ff);
}
.lm-notif-bell[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text, #f0f4ff);
  border-color: rgba(255, 255, 255, 0.10);
}
.lm-notif-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--coral, #d4537e);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2, #111437);
  font-family: var(--poppins, 'Poppins', sans-serif);
  letter-spacing: -0.01em;
  line-height: 1;
}

.lm-notif-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--bg2, #111437);
  border: 1px solid var(--border-strong, rgba(157, 95, 199, 0.34));
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50);
  z-index: 1000;
  color: var(--text, #f0f4ff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(640px, calc(100vh - 96px));
}
.lm-notif-popover[hidden] { display: none; }

.lm-notif-popover-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lm-notif-popover-head h2 {
  margin: 0;
  font-family: var(--poppins, 'Poppins', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text, #f0f4ff);
}
.lm-notif-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lm-notif-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.lm-notif-filter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--text3, #7d8aa3);
}
.lm-notif-filter select {
  background: var(--bg, #101420);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  color: var(--text, #f0f4ff);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  color-scheme: dark;
}
.lm-notif-filter select:focus-visible {
  outline: 2px solid var(--lavender-bright, #b1a4e8);
  outline-offset: 0;
  border-color: var(--lavender-bright, #b1a4e8);
}
.lm-notif-mark-read {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  color: var(--text2, #a8b1c8);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
  align-self: flex-end;
}
.lm-notif-mark-read:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f0f4ff);
}

.lm-notif-popover-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.lm-notif-empty {
  margin: 0;
  padding: 32px 18px;
  text-align: center;
  color: var(--text3, #7d8aa3);
  font-size: 13px;
  line-height: 1.55;
}
.lm-notif-empty.is-err { color: var(--coral, #d4537e); }

.lm-notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lm-notif-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.lm-notif-list li:last-child { border-bottom: none; }
.lm-notif-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
  position: relative;
}
.lm-notif-row:hover { background: rgba(120, 74, 157, 0.08); }
.lm-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 7px;
  flex-shrink: 0;
}
.lm-notif-row.is-unread .lm-notif-dot {
  background: var(--lavender-bright, #b1a4e8);
  box-shadow: 0 0 6px rgba(177, 164, 232, 0.55);
}
.lm-notif-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text2, #a8b1c8);
  min-width: 0;
  word-wrap: break-word;
}
.lm-notif-row.is-unread .lm-notif-text {
  color: var(--text, #f0f4ff);
}
.lm-notif-text strong {
  color: var(--text, #f0f4ff);
  font-weight: 600;
}
.lm-notif-text em {
  color: var(--lavender-bright, #b1a4e8);
  font-style: normal;
}
.lm-notif-time {
  font-size: 11px;
  color: var(--text3, #7d8aa3);
  white-space: nowrap;
  margin-top: 2px;
}
.lm-notif-row.is-own { opacity: 0.72; }

/* Mobile */
@media (max-width: 480px) {
  .lm-notif-popover {
    width: calc(100vw - 24px);
    right: -8px;
  }
  .lm-notif-popover-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .lm-notif-mark-read { align-self: stretch; text-align: center; }
}

/* ============================================================
   USER AVATAR + POPOVER
   ============================================================ */

.lm-user-menu {
  position: relative;
  display: inline-flex;
}
.lm-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* v0.9.9: the astronaut SVG provides its own background fill via
     the inner circle, so the wrapper button no longer needs a solid
     purple. Transparent works for either the SVG path or the text-
     initials fallback (which still uses background in the legacy
     path - see :not(:has(svg))). */
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--lmc-poppins);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
/* Text-initials fallback (when AtlasAvatar didn't load): give the
   button the legacy violet background. */
.lm-user-avatar:not(:has(svg)) {
  background: var(--lmc-purple);
}
.lm-user-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lm-user-avatar:hover,
.lm-user-avatar:focus {
  box-shadow: 0 0 0 3px rgba(98,100,148,0.18);
  outline: none;
}
/* v2.7.12: bright orange ring on the avatar when masquerading as a
   different role. Composes via box-shadow layering with focus state. */
.lm-user-avatar.is-previewing {
  box-shadow: 0 0 0 3px #ff8c1a;
}
.lm-user-avatar.is-previewing:hover,
.lm-user-avatar.is-previewing:focus {
  box-shadow: 0 0 0 3px #ff8c1a, 0 0 0 5px rgba(255,140,26,0.25);
}

.lm-user-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--lmc-white);
  border: 1px solid var(--lmc-rule);
  border-radius: 10px;
  box-shadow: var(--lmc-shadow-md);
  padding: 12px;
  min-width: 240px;
  z-index: 200;
  font-family: var(--lmc-poppins);
}
.lm-user-popover-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--lmc-ink);
  margin-bottom: 2px;
}
.lm-user-popover-email {
  font-size: 12px;
  color: var(--lmc-ink-faded);
  margin-bottom: 10px;
  word-break: break-all;
}
.lm-user-popover-link {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--lmc-ink);
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.lm-user-popover-link:hover {
  background: var(--lmc-bg);
}

/* v2.7.27: bottom-of-popover actions group. Admin (when present) + Sign
   out moved out of their prior inline positions into their own section
   at the foot of the popover, mirroring the divider treatment used by
   .lm-preview-section and .lm-layout-section. Keeps the popover read
   top-to-bottom as: identity (name/email), context switches (preview-as,
   dashboard layout), then actions. */
.lm-user-popover-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lmc-rule-soft);
}

/* v2.7.4 masquerade Preview-as section (Owner-only) */
.lm-preview-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lmc-rule-soft);
}
.lm-preview-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lmc-ink-faded);
  margin-bottom: 6px;
}
.lm-preview-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lm-preview-pill {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--lmc-poppins);
  background: transparent;
  border: 1px solid var(--lmc-rule);
  border-radius: 999px;
  color: var(--lmc-ink-soft);
  cursor: pointer;
  transition: all 0.12s;
}
.lm-preview-pill:hover {
  color: var(--lmc-ink);
  border-color: var(--lmc-ink-faded);
}
.lm-preview-pill.is-active {
  /* v2.7.27: pill active state recolored from orange (#ff8c1a) to ink. The
     orange "you are previewing" signal is now carried solely by the avatar
     ring (.lm-user-avatar.is-previewing) so the dropdown pills can read as
     a neutral role selector. */
  background: var(--lmc-ink);
  border-color: var(--lmc-ink);
  color: #fff;
}

/* v2.7.26: dashboard layout toggle section in the avatar popover. Visible
   to all signed-in users (not gated to a role). Mirrors the preview-as
   structure but with a calmer ink-colored active pill - this is a layout
   preference, not an alarm-state masquerade, so it doesn't need the
   orange accent. */
.lm-layout-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lmc-rule-soft);
  margin-bottom: 4px;
}
.lm-layout-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lmc-ink-faded);
  margin-bottom: 6px;
}
.lm-layout-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lm-layout-pill {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--lmc-poppins);
  background: transparent;
  border: 1px solid var(--lmc-rule);
  border-radius: 999px;
  color: var(--lmc-ink-soft);
  cursor: pointer;
  transition: all 0.12s;
}
.lm-layout-pill:hover {
  color: var(--lmc-ink);
  border-color: var(--lmc-ink-faded);
}
.lm-layout-pill.is-active {
  background: var(--lmc-ink);
  border-color: var(--lmc-ink);
  color: #fff;
}

/* ============================================================
   ACTIONS DROPDOWN (anchored under an action button in chrome)
   ============================================================ */

.lm-actions-wrap {
  position: relative;
  display: inline-flex;
}
.lm-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--lmc-white);
  border: 1px solid var(--lmc-rule);
  border-radius: 10px;
  box-shadow: var(--lmc-shadow-md);
  padding: 6px;
  min-width: 280px;
  z-index: 200;
  font-family: var(--lmc-poppins);
  font-size: 13px;
}
.lm-actions-menu hr {
  border: none;
  border-top: 1px solid var(--lmc-rule-soft);
  margin: 4px 0;
}
.lm-actions-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--lmc-ink);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  transition: background 0.1s;
}
.lm-actions-menu-item:hover {
  background: var(--lmc-bg);
}
.lm-actions-menu-item .ami-ico {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--lmc-ink-faded);
  flex-shrink: 0;
}
.lm-actions-menu-item .ami-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.lm-actions-menu-item .ami-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--lmc-ink);
}
.lm-actions-menu-item .ami-hint {
  font-size: 11.5px;
  color: var(--lmc-ink-faded);
  display: block;
}
.lm-actions-menu-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lmc-ink-faded);
  padding: 8px 10px 4px;
}
.lm-actions-menu-version {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--lmc-ink);
}
.lm-actions-menu-version:hover {
  background: var(--lmc-bg);
}
.lm-actions-menu-version-tag {
  background: var(--lmc-purple-pale);
  color: var(--lmc-purple);
  font-family: var(--lmc-mono);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.lm-actions-menu-version-meta {
  color: var(--lmc-ink-faded);
  font-size: 11px;
  margin-left: auto;
}

/* ============================================================
   HERO (unified per-surface heading section)
   ============================================================ */

.lm-hero {
  background: var(--lmc-white);
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--lmc-rule);
}
.lm-hero-inner {
  /* v2.7.20: single platform-wide constrained width matching the colortest.
     Was per-surface --lm-hero-max-width var in v2.7.19; collapsed to one
     global --lm-constrained-width so hero + content always line up at the
     same width across every non-fullwidth surface. */
  max-width: var(--lm-constrained-width, 1100px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.lm-hero-text {
  flex: 1;
  min-width: 0;
}
.lm-hero h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lmc-ink);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--lmc-poppins);
}
/* Eyebrow label for tool surfaces (Design Proofs, Work Log, etc.).
   Small uppercase teal label above the h1. v2.7.17. */
.lm-eyebrow {
  margin: 0 0 8px;
  font-family: var(--lmc-poppins);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lmc-teal-dark);
  font-weight: 600;
}
/* Project logo (small icon inline with hero h1). Used on the dashboard
   when the project has a logoUrl set. v2.12.29: previously framed in a
   light-purple tile; the tile became visual noise once real client
   icons started rendering inside it, so the background + colored frame
   are removed. Image renders at 36px square, transparent backdrop. */
.lm-project-logo {
  width: 36px;
  height: 36px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
}
.lm-lede {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--lmc-ink-soft);
  line-height: 1.5;
  max-width: 640px;
  font-family: var(--lmc-poppins);
}
.lm-meta-lines {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--lmc-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--lmc-poppins);
}
.lm-meta-lines span strong {
  color: var(--lmc-ink);
  font-weight: 500;
}
.lm-meta-lines a {
  color: var(--lmc-teal-dark);
  text-decoration: none;
}
.lm-meta-lines a:hover {
  text-decoration: underline;
}
.lm-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* ============================================================
   HERO BANNER (state strip under hero h1/lede)
   ============================================================ */

.lm-hero-banner {
  background: var(--lmc-teal-pale);
  color: var(--lmc-teal-dark);
  border: 1px solid rgba(0,167,169,0.18);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px auto 0;
  max-width: var(--lm-constrained-width, 1100px);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lmc-poppins);
}
.lm-hero-banner.is-readonly {
  background: var(--lmc-purple-pale);
  color: var(--lmc-purple);
  border-color: rgba(98,100,148,0.2);
}
.lm-hero-banner.is-warn {
  /* v2.10.14 D-015: amber yellow + dark amber text. Previously coral
     text on coral-pale read as orange-on-orange and was hard to scan. */
  background: var(--lmc-amber-pale);
  color: var(--lmc-amber-dark);
  border-color: var(--lmc-amber-border);
}
/* v2.10.9: is-success variant (green) for approved states. Mirrors the
   tone the legacy lm-colortest-approved-banner used, ported into the
   platform hero-banner system so colortest can drop its bespoke green
   strip and use the same surface treatment as sitemap.

   Sub-styles (.meta, .hint) match sitemap's .approval-banner layout:
   .meta hangs after the headline in muted tone; .hint is pushed to
   the far right via margin-left:auto and styled italic + subtle. JS
   toggles .hint visibility with [hidden] based on session role. */
.lm-hero-banner.is-success {
  background: rgba(47,133,90,0.08);
  color: #1d6b3f;
  border-color: rgba(47,133,90,0.22);
}
.lm-hero-banner.is-success strong { color: #14532d; font-weight: 600; }
.lm-hero-banner .meta {
  font-size: 12px;
  opacity: 0.78;
}
.lm-hero-banner .hint {
  margin-left: auto;
  font-size: 12px;
  font-style: italic;
  opacity: 0.72;
}
.lm-hero-banner svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ============================================================
   SECONDARY STRIP (under hero - admin tabs, filter pills, tool toolbar)
   ============================================================ */

.lm-hero-secondary {
  background: var(--lmc-white);
  padding: 0 32px;
  border-bottom: 1px solid var(--lmc-rule);
}
.lm-hero-secondary-inner {
  max-width: var(--lm-constrained-width, 1100px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 48px;
}

/* Full-width hero variant. Drops the centered max-width on the inner so
   the hero contents align to the same left gutter as the surface below
   (e.g. sitemap two-pane workspace, colortest body when refactored).
   Outer .lm-hero padding (32px) still provides the gutter; only the
   centering goes away. The secondary strip follows suit when present. */
.lm-hero.is-fullwidth .lm-hero-inner,
.lm-hero.is-fullwidth + .lm-hero-secondary .lm-hero-secondary-inner {
  max-width: none;
  margin: 0;
}
/* v2.10.6 OBS-5: banner is a sibling of .lm-hero-inner (not a child), so the
   fullwidth override above does not catch it. Without this rule the banner
   keeps its default `margin: 14px auto 0` and the box sits centered while the
   h1/lede above sit flush-left - visible mismatch on sitemap client view. */
.lm-hero.is-fullwidth .lm-hero-banner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Landing filter pills (Active / Archived / All). */
.lm-filter-pills {
  display: flex;
  gap: 2px;
  background: var(--lmc-bg);
  padding: 3px;
  border-radius: 8px;
}
.lm-filter-pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--lmc-poppins);
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--lmc-ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lm-filter-pill:hover {
  color: var(--lmc-ink);
}
.lm-filter-pill.is-active {
  background: var(--lmc-white);
  color: var(--lmc-ink);
  box-shadow: var(--lmc-shadow-sm);
}

/* ============================================================
   TOOL TOOLBAR (cream secondary strip for tool-only controls)
   Used by Color Test for Version / Secondary / Colorblind / Palette
   ============================================================ */

.lm-tool-toolbar {
  background: var(--lmc-bg-soft);
  padding: 0 32px;
  border-bottom: 1px solid var(--lmc-rule);
}
.lm-tool-toolbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  flex-wrap: wrap;
  padding: 8px 0;
  font-size: 12px;
  font-family: var(--lmc-poppins);
}

/* ============================================================
   CLIENT VIEW MODIFIERS
   Toggled by lm-chrome.js based on cfg.isClient. Hides any action
   in .lm-chrome-actions that doesn't carry .lm-show-client.
   ============================================================ */

body.lm-client-view .lm-chrome-actions > *:not(.lm-show-client) {
  display: none;
}
/* v2.10.1: .lm-user-menu now carries .lm-show-client so the avatar
   renders for clients too (simplified popover: name + email + Sign
   out). The previous explicit hide rule that suppressed it
   regardless of class is gone with the new avatar treatment. */

/* ============================================================
   AUTH PENDING - hide chrome + hero + secondary while auth resolves
   ============================================================ */

body.auth-pending .lm-chrome,
body.auth-pending .lm-hero,
body.auth-pending .lm-hero-secondary,
body.auth-pending .lm-tool-toolbar {
  visibility: hidden;
}

/* Mobile-block overlay removed 2026-05-20. The LMD-era "Optimized
   for desktop and tablet" treatment hid Atlas below 760px - the
   opposite of the v1 mobile-first directive locked in
   [[Locked Decisions]] Mobile section. Phones now reach the same
   surfaces as desktop, responsively. */

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .lm-chrome,
  .lm-hero-secondary,
  .lm-tool-toolbar {
    display: none !important;
  }
  .lm-hero {
    padding: 0 0 16px;
    border: none;
    box-shadow: none;
  }
  .lm-hero-banner {
    display: none !important;
  }
}

/* ============================================================
   RESPONSIVE (collapse chrome paddings + hero on tablet/narrow)
   ============================================================ */

@media (max-width: 900px) {
  .lm-chrome {
    padding: 12px 20px;
  }
  .lm-chrome-inner {
    /* v2.7.23: gap moved here since .lm-chrome-inner is the flex container now */
    gap: 14px;
  }
  .lm-hero {
    padding: 22px 20px 18px;
  }
  .lm-hero-inner {
    flex-direction: column;
    gap: 14px;
  }
  .lm-hero-actions {
    align-self: stretch;
  }
  .lm-hero-secondary,
  .lm-tool-toolbar {
    padding: 0 20px;
  }
  .lm-crumbs {
    font-size: 13px;
  }
  .lm-hero h1 {
    font-size: 22px;
  }
}

/* v2.12.19 -> v2.12.20: platform-wide slimline footer. Pinned to the
   viewport bottom so it's always visible regardless of page scroll
   (v2.12.19 placed it at the end of document flow, which fell off
   screen on any page taller than 100vh). Solid white background
   blocks any content that would otherwise scroll underneath; body
   gets padding-bottom to clear the footer height.

   v2.12.20: attribution on the LEFT, version on the RIGHT (flipped
   from the original). Version font switched to Poppins (was JetBrains
   Mono). Heart is now LM green (var(--pass), #2d8c5c) instead of
   teal so it reads cleanly as a "green heart". */
body {
  /* Reserve room at the bottom of every page so the fixed footer
   * doesn't overlap real content. 34px = footer padding (8 top + 8
   * bottom) + ~18px text height + 1px border. */
  padding-bottom: 40px;
}
.lm-platform-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px;
  border-top: 1px solid var(--border, rgba(120, 74, 157, 0.22));
  background: var(--bg2, #111437);
  color: var(--text3, #7d8aa3);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

/* v0.18.2: on mobile, the fixed footer was sticking to the bottom
 * of the viewport and eating real estate that mobile users would
 * rather use for content. Switch to position: static so the footer
 * sits at the natural end of the page and scrolls away with the
 * content. Reset the body's 40px reservation since the footer is
 * now in flow. The galaxy view's own rule
 * (`body.is-galaxy-view .lm-platform-footer { display: none }`)
 * still hides it entirely on the 3D galaxy screen.
 *
 * v0.18.3: bumped breakpoint from 720px to 900px so iPhone in
 * landscape (852-932px) gets the same static-footer treatment
 * as portrait. Matches the galaxy's bottom-sheet breakpoint. */
@media (max-width: 900px) {
  body {
    padding-bottom: 0;
  }
  .lm-platform-footer {
    position: static;
    pointer-events: auto;
  }
}
.lm-platform-footer-version {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.lm-platform-footer-tag {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lm-platform-footer-heart {
  color: var(--status-green, #15803d);
  font-size: 12px;
  line-height: 1;
  margin: 0 1px;
  display: inline-block;
  transform: translateY(0.5px);
}
.lm-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;
}
/* Narrow viewports: stack the two halves so neither truncates. */
@media (max-width: 600px) {
  body {
    padding-bottom: 64px;
  }
  .lm-platform-footer {
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    align-items: center;
    text-align: center;
  }
}

/* v2.12.14: the .lm-hootie always-on bottom-left peek (v2.7.22 -> v2.7.27)
   was retired. Hootie now appears contextually only.

   Empty-state Hootie wrapper. Used in admin empty tabs, tool empty
   lists, conversation empty, login hero, invite landing, and 404 /
   fatal-error. The width + height are set inline on the wrapper so
   different surfaces can size Hootie appropriately (80px in the
   sitemap tree pane, 220px in the 404 hero). Centers the image and
   prevents it from stretching when placed inside flex/grid containers.

   Lives in lm-chrome.css because every surface imports this stylesheet
   (lm.css is only loaded by the layouts that use base.njk - tools
   like sitemap / colortest / design-proofs / work-log don't get lm.css). */
.lm-empty-hootie {
  display: block;
  margin: 0 auto 10px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
.lm-empty-hootie img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Circular avatar slot for the success-toast Hootie. The
   hootie-toaster-overlay.svg has its own clipPath internally but we
   crop with overflow:hidden too so the visual lands cleanly inside
   any toast variant. 48px slot, left-edge, vertically centered. */
.toast-hootie {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.toast-hootie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Toasts that opt into the Hootie avatar shift their text right so
   the avatar doesn't overlap the message. Applied via .toast-hootie-slot
   on the toast element. The base .toast class (and per-tool variants)
   already pad on the right; we extend the left padding only. */
.toast.toast-hootie-slot {
  padding-left: 64px;
  min-height: 48px;
}

/* ============================================================
   v2.10.0 WIP C - PUBLIC CHROME + CENTERED CARD + CLIENT CARDS
   ============================================================ */

/* Public chrome modifier: same slim white bar, but the wordmark is
   centered and the divider / breadcrumb / actions slots are hidden.
   Used on unauthenticated surfaces (/, /login, /invite/accept, error
   pages from auth-callback and invite-accept) where there's no nav
   context and no user identity to display. */
.lm-chrome.lm-chrome-public .lm-chrome-inner {
  justify-content: center;
}
.lm-chrome.lm-chrome-public .lm-chrome-divider,
.lm-chrome.lm-chrome-public .lm-crumbs,
.lm-chrome.lm-chrome-public .lm-chrome-actions {
  display: none;
}

/* Centered card surface used by:
     - Public landing (/)
     - Sign-in page (/login)
     - Invite-accept loading state
     - All server-rendered error pages (callback + invite-accept)
     - The cross-project mismatch page on authenticated surfaces */
.lm-card-surface {
  background: var(--lmc-bg);
  padding: 64px 24px;
  min-height: calc(100vh - 64px);
  box-sizing: border-box;
}
.lm-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--lmc-white);
  border: 1px solid var(--lmc-rule);
  border-radius: 12px;
  padding: 36px 32px 32px;
  box-shadow: var(--lmc-shadow-md);
  font-family: var(--lmc-poppins);
}
.lm-card.lm-card-wide {
  max-width: 540px;
}
.lm-card-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lmc-teal-dark);
}
.lm-card-eyebrow.is-warn {
  color: var(--lmc-coral);
}
.lm-card-eyebrow.is-mute {
  color: var(--lmc-ink-faded);
}
.lm-card h1 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--lmc-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-family: var(--lmc-poppins);
}
.lm-card p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lmc-ink-soft);
  font-family: var(--lmc-poppins);
}
.lm-card p:last-of-type {
  margin-bottom: 22px;
}
.lm-card .lm-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lm-card .lm-btn-block {
  width: 100%;
  justify-content: center;
}
/* Subtle helper text below the primary action. Used for trouble-signing-in
   links and similar low-prominence guidance. */
.lm-card-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lmc-rule-soft);
  font-size: 12px;
  color: var(--lmc-ink-faded);
  line-height: 1.5;
  font-family: var(--lmc-poppins);
}
.lm-card-foot a {
  color: var(--lmc-teal-dark);
  text-decoration: none;
}
.lm-card-foot a:hover {
  text-decoration: underline;
}

/* Definition-list-style detail block used on the email-mismatch error
   page. Stacks label + value pairs inside a soft tinted container. */
.lm-detail-dl {
  margin: 18px 0 22px;
  padding: 18px;
  background: var(--lmc-bg);
  border: 1px solid var(--lmc-rule-soft);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--lmc-poppins);
}
.lm-detail-dl dt {
  color: var(--lmc-ink-faded);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.lm-detail-dl dt:not(:first-child) {
  margin-top: 14px;
}
.lm-detail-dl dd {
  margin: 0;
  color: var(--lmc-ink);
  font-weight: 500;
  word-break: break-word;
}
.lm-detail-dl dd a {
  color: var(--lmc-teal-dark);
  text-decoration: none;
}
.lm-detail-dl dd a:hover {
  text-decoration: underline;
}

/* Google "G" mark sized for inline use inside the lm-btn pill. */
.lm-google-g {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Small inline spinner used by /invite/accept loading state and the
   /login redirect interstitial when an already-signed-in user lands
   there. */
.lm-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--lmc-rule);
  border-top-color: var(--lmc-purple);
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: lm-spin 0.8s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   CLIENT MULTI-PROJECT LANDING - card grid
   ============================================================ */

/* Slim card variant for /projects/ client landing. Compared with the
   staff Projects card (`.project-card` in lm.css), this version:
     - shows only project name + LM contact + small logo tile
     - no progress bar, no type badges, no admin gear
     - logo + name sit on the left, click target is the whole card */
.pc-client {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lmc-white);
  border: 1px solid var(--lmc-rule);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lmc-shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  font-family: var(--lmc-poppins);
}
.pc-client:hover {
  box-shadow: var(--lmc-shadow-md);
  border-color: var(--lmc-purple);
  transform: translateY(-1px);
}
.pc-client-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--lmc-purple-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.pc-client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pc-client-logo-fallback {
  font-family: var(--lmc-poppins);
  font-size: 14px;
  font-weight: 700;
  color: var(--lmc-purple);
  letter-spacing: 0.02em;
}
.pc-client-text {
  /* v2.10.2: markup is a <span> wrapping two child <span>s
     (.pc-client-name, .pc-client-meta). Without explicit display
     these were all inline, so the meta line sat to the right of the
     name inside the same baseline (overflowing the card) instead of
     stacking. Variant A intent: name on top, meta below. flex column
     forces the stack and gives child flex items the implicit block
     formatting needed for text-overflow:ellipsis to take effect on
     the children. min-width:0 keeps long names/meta from forcing the
     card to expand past its grid track. */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pc-client-name {
  display: block;
  max-width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--lmc-ink);
  margin: 0 0 3px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-client-meta {
  display: block;
  max-width: 100%;
  font-size: 12px;
  color: var(--lmc-ink-faded);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Client grid container - same constraints as staff project-grid but
   reusing the global landing shell. Kept separate so the staff grid
   keeps its own existing layout. */
.pc-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* Loading + empty states for client landing. Match the existing
   .lp-loading visual but expressed inside the client surface. */
.pc-client-empty {
  text-align: center;
  padding: 48px 16px;
  font-size: 14px;
  color: var(--lmc-ink-faded);
  font-family: var(--lmc-poppins);
}