/* ==========================================================================
   PULSE - brand-agnostic design system core
   --------------------------------------------------------------------------
   This file contains ZERO client-specific values. Every colour, font and
   shape decision flows through a --pulse-* token declared here with a
   neutral default. A client theme file (for example theme-cargonomics.css,
   loaded AFTER this file) overrides the tokens and nothing else.

   Layers in this file:
     1. Pulse tokens (neutral defaults)
     2. Token bridge: --pulse-* mapped onto the vendored component library's
        --wa-* custom properties (unlayered, so it beats the library's
        @layer wa-theme rules)
     3. Base page styles
     4. Hand-rolled patterns (BEM, mobile-first):
        app shell, stat cards, status pills, dual score bars, kanban,
        list + detail split, forms, attendance grid, skeletons, empty
        states, toast stack, bar charts, tables, action cards, chips
     5. Print styles

   Naming: every block is prefixed "pulse-". BEM throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PULSE TOKENS (neutral defaults; themes override these)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --pulse-brand: #334155;            /* primary action colour */
  --pulse-brand-strong: #1e293b;     /* hover / emphasis */
  --pulse-brand-soft: #e6eaf0;       /* tinted backgrounds */
  --pulse-accent: #b45309;           /* secondary highlight */
  --pulse-accent-strong: #92400e;
  --pulse-accent-soft: #f6ead9;

  /* Surfaces and text */
  --pulse-bg: #f4f5f7;               /* app background */
  --pulse-surface: #ffffff;          /* cards, panels, topbar */
  --pulse-surface-sunken: #eef0f3;   /* wells, column bodies */
  --pulse-border: #e3e6ea;
  --pulse-border-strong: #c9ced6;
  --pulse-text: #1c2430;
  --pulse-text-muted: #5d6878;
  --pulse-text-faint: #8b94a3;
  --pulse-text-invert: #ffffff;
  --pulse-link: #2563eb;
  --pulse-focus: #2563eb;

  /* Feedback */
  --pulse-success: #16a34a;
  --pulse-warning: #d97706;
  --pulse-danger: #dc2626;
  --pulse-info: #0284c7;

  /* Tour / overlay (consumed by tour.js coachmarks; theme-derived) */
  --pulse-scrim: color-mix(in srgb, var(--pulse-text) 64%, transparent);
  --pulse-z-tour: 70; /* above topbar (40) + search results (50), below toasts (100) */

  /* Type */
  --pulse-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pulse-font-heading: var(--pulse-font-body);
  --pulse-font-display: var(--pulse-font-heading); /* stat values, wordmark */
  --pulse-font-wordmark: var(--pulse-font-display);

  /* Shape, depth, motion */
  --pulse-radius-s: 6px;
  --pulse-radius-m: 10px;
  --pulse-radius-l: 14px;

  /* Elevation: a layered shadow scale. The shadow colour is tokenised so a
     theme can tint it toward the brand (navy) for a cohesive, premium feel.
     Value is space-separated RGB channels consumed by rgb(... / alpha). */
  --pulse-shadow-color: 16 24 40;        /* slate; themes override toward brand */
  --pulse-shadow-1:
    0 1px 2px rgb(var(--pulse-shadow-color) / 0.05),
    0 1px 3px rgb(var(--pulse-shadow-color) / 0.08);
  --pulse-shadow-2:
    0 2px 4px rgb(var(--pulse-shadow-color) / 0.06),
    0 8px 18px rgb(var(--pulse-shadow-color) / 0.12);
  --pulse-shadow-3:
    0 4px 10px rgb(var(--pulse-shadow-color) / 0.08),
    0 20px 44px rgb(var(--pulse-shadow-color) / 0.16);

  /* Motion: one easing curve, a few durations, and a tokenised hover-lift
     distance so reduced-motion can neutralise every lift in one place. */
  --pulse-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pulse-transition-fast: 0.12s var(--pulse-ease);
  --pulse-transition: 0.18s var(--pulse-ease);
  --pulse-transition-slow: 0.28s var(--pulse-ease);
  --pulse-lift: -2px;                    /* card hover translateY */

  /* Spacing (8px base) */
  --pulse-space-2xs: 4px;
  --pulse-space-xs: 8px;
  --pulse-space-sm: 12px;
  --pulse-space-md: 16px;
  --pulse-space-lg: 24px;
  --pulse-space-xl: 32px;
  --pulse-space-2xl: 48px;

  /* Layout */
  --pulse-container-max: 1280px;
  --pulse-topbar-height: 56px;
  --pulse-touch-target: 44px;

  /* Status colours, candidate pipeline */
  --pulse-status-new: #2563eb;
  --pulse-status-reviewing: #b45309;
  --pulse-status-qualified: #0d9488;
  --pulse-status-rejected: #dc2626;
  --pulse-status-waitlist: #7c3aed;
  --pulse-status-enrolled: #16a34a;

  /* Status colours, placement pipeline */
  --pulse-status-suggested: #64748b;
  --pulse-status-introduced: #2563eb;
  --pulse-status-interviewing: #0891b2;
  --pulse-status-offered: #b45309;
  --pulse-status-placed: #16a34a;
  --pulse-status-declined: #dc2626;
  --pulse-status-withdrawn: #6b7280;

  /* Score bars */
  --pulse-score-ai: #64748b;         /* machine score */
  --pulse-score-combined: #334155;   /* machine + human score */

  /* Charts */
  --pulse-chart-1: #334155;
  --pulse-chart-2: #b45309;
  --pulse-chart-3: #0d9488;
  --pulse-chart-4: #7c3aed;
  --pulse-chart-5: #2563eb;
  --pulse-chart-6: #64748b;

  /* Toasts */
  --pulse-toast-bg: #1c2430;
  --pulse-toast-text: #ffffff;
}

/* --------------------------------------------------------------------------
   2. TOKEN BRIDGE: Pulse tokens -> component library (--wa-*) tokens.
   Unlayered :root rules beat the library's @layer wa-theme declarations,
   so this is the single place the library learns the client's look.
   -------------------------------------------------------------------------- */
:root {
  /* Type */
  --wa-font-family-body: var(--pulse-font-body);
  --wa-font-family-heading: var(--pulse-font-heading);
  --wa-font-family-longform: var(--pulse-font-body);
  --wa-font-weight-action: 600;

  /* Shape */
  --wa-border-radius-s: var(--pulse-radius-s);
  --wa-border-radius-m: var(--pulse-radius-m);
  --wa-border-radius-l: var(--pulse-radius-l);

  /* Surfaces and text */
  --wa-color-surface-raised: var(--pulse-surface);
  --wa-color-surface-default: var(--pulse-surface);
  --wa-color-surface-lowered: var(--pulse-surface-sunken);
  --wa-color-surface-border: var(--pulse-border);
  --wa-color-text-normal: var(--pulse-text);
  --wa-color-text-quiet: var(--pulse-text-muted);
  --wa-color-text-link: var(--pulse-link);
  --wa-color-focus: var(--pulse-focus);

  /* Brand variant (buttons, tabs, active controls) */
  --wa-color-brand: var(--pulse-brand);
  --wa-color-brand-fill-quiet: color-mix(in srgb, var(--pulse-brand) 8%, var(--pulse-surface));
  --wa-color-brand-fill-normal: color-mix(in srgb, var(--pulse-brand) 15%, var(--pulse-surface));
  --wa-color-brand-fill-loud: var(--pulse-brand);
  --wa-color-brand-border-quiet: color-mix(in srgb, var(--pulse-brand) 20%, var(--pulse-surface));
  --wa-color-brand-border-normal: color-mix(in srgb, var(--pulse-brand) 35%, var(--pulse-surface));
  --wa-color-brand-border-loud: color-mix(in srgb, var(--pulse-brand) 65%, var(--pulse-surface));
  --wa-color-brand-on-quiet: color-mix(in srgb, var(--pulse-brand) 85%, var(--pulse-text));
  --wa-color-brand-on-normal: color-mix(in srgb, var(--pulse-brand) 75%, black);
  --wa-color-brand-on-loud: var(--pulse-text-invert);

  /* Success variant */
  --wa-color-success-fill-quiet: color-mix(in srgb, var(--pulse-success) 8%, var(--pulse-surface));
  --wa-color-success-fill-normal: color-mix(in srgb, var(--pulse-success) 15%, var(--pulse-surface));
  --wa-color-success-fill-loud: var(--pulse-success);
  --wa-color-success-border-quiet: color-mix(in srgb, var(--pulse-success) 20%, var(--pulse-surface));
  --wa-color-success-border-normal: color-mix(in srgb, var(--pulse-success) 35%, var(--pulse-surface));
  --wa-color-success-border-loud: color-mix(in srgb, var(--pulse-success) 65%, var(--pulse-surface));
  --wa-color-success-on-quiet: color-mix(in srgb, var(--pulse-success) 70%, black);
  --wa-color-success-on-normal: color-mix(in srgb, var(--pulse-success) 60%, black);
  --wa-color-success-on-loud: var(--pulse-text-invert);

  /* Warning variant */
  --wa-color-warning-fill-quiet: color-mix(in srgb, var(--pulse-warning) 8%, var(--pulse-surface));
  --wa-color-warning-fill-normal: color-mix(in srgb, var(--pulse-warning) 15%, var(--pulse-surface));
  --wa-color-warning-fill-loud: var(--pulse-warning);
  --wa-color-warning-border-quiet: color-mix(in srgb, var(--pulse-warning) 20%, var(--pulse-surface));
  --wa-color-warning-border-normal: color-mix(in srgb, var(--pulse-warning) 35%, var(--pulse-surface));
  --wa-color-warning-border-loud: color-mix(in srgb, var(--pulse-warning) 65%, var(--pulse-surface));
  --wa-color-warning-on-quiet: color-mix(in srgb, var(--pulse-warning) 65%, black);
  --wa-color-warning-on-normal: color-mix(in srgb, var(--pulse-warning) 55%, black);
  --wa-color-warning-on-loud: var(--pulse-text-invert);

  /* Danger variant */
  --wa-color-danger-fill-quiet: color-mix(in srgb, var(--pulse-danger) 8%, var(--pulse-surface));
  --wa-color-danger-fill-normal: color-mix(in srgb, var(--pulse-danger) 15%, var(--pulse-surface));
  --wa-color-danger-fill-loud: var(--pulse-danger);
  --wa-color-danger-border-quiet: color-mix(in srgb, var(--pulse-danger) 20%, var(--pulse-surface));
  --wa-color-danger-border-normal: color-mix(in srgb, var(--pulse-danger) 35%, var(--pulse-surface));
  --wa-color-danger-border-loud: color-mix(in srgb, var(--pulse-danger) 65%, var(--pulse-surface));
  --wa-color-danger-on-quiet: color-mix(in srgb, var(--pulse-danger) 75%, black);
  --wa-color-danger-on-normal: color-mix(in srgb, var(--pulse-danger) 65%, black);
  --wa-color-danger-on-loud: var(--pulse-text-invert);

  /* Form controls */
  --wa-form-control-border-color: var(--pulse-border-strong);
  --wa-form-control-background-color: var(--pulse-surface);
  --wa-form-control-label-color: var(--pulse-text);
  --wa-form-control-hint-color: var(--pulse-text-muted);
}

/* Comfortable touch targets on the default control size (WCAG 2.5.8 / 44px) */
.pulse-main wa-button::part(base),
.pulse-main wa-input::part(base),
.pulse-main wa-select::part(combobox) {
  min-height: var(--pulse-touch-target);
}

/* Button polish: every button eases its transitions; the solid brand button
   gets a subtle vertical gradient, a resting shadow, and a hover lift. Scoped
   to ::part(base) so it rides the vendored component without forking it.
   Outlined / plain brand buttons keep their flat look. */
.pulse-main wa-button::part(base) {
  transition: box-shadow var(--pulse-transition), transform var(--pulse-transition-fast);
}
.pulse-main wa-button[variant="brand"]:not([appearance~="outlined"]):not([appearance~="plain"])::part(base) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--pulse-brand) 86%, white) 0%, var(--pulse-brand) 100%);
  box-shadow: var(--pulse-shadow-1);
}
.pulse-main wa-button[variant="brand"]:not([appearance~="outlined"]):not([appearance~="plain"]):hover::part(base) {
  box-shadow: var(--pulse-shadow-2);
  transform: translateY(var(--pulse-lift));
}
.pulse-main wa-button[variant="brand"]:not([appearance~="outlined"]):not([appearance~="plain"]):active::part(base) {
  transform: translateY(0);
  box-shadow: var(--pulse-shadow-1);
}

/* --------------------------------------------------------------------------
   3. BASE PAGE STYLES
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body.pulse-body {
  margin: 0;
  min-height: 100%;
  background: var(--pulse-bg);
  color: var(--pulse-text);
  font-family: var(--pulse-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.pulse-body h1, .pulse-body h2, .pulse-body h3, .pulse-body h4 {
  font-family: var(--pulse-font-heading);
  color: var(--pulse-text);
  line-height: 1.25;
  margin: 0 0 var(--pulse-space-sm);
}
.pulse-body h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.012em; }
.pulse-body h2 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.006em; }
.pulse-body h3 { font-size: 1rem;   font-weight: 700; }

.pulse-body a { color: var(--pulse-link); }
.pulse-body a:hover { color: color-mix(in srgb, var(--pulse-link) 80%, black); }

.pulse-body :focus-visible {
  outline: 2px solid var(--pulse-focus);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pulse-focus) 18%, transparent);
}

.pulse-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4a. APP SHELL: top bar, nav, search, user chip, main container, footer
   -------------------------------------------------------------------------- */
/* The shell custom elements (<pulse-topbar> / <pulse-footer>, assets/pulse/shell.js)
   generate no box of their own, so .pulse-topbar and .pulse-footer remain direct
   flex children of body.pulse-body. This keeps the topbar's position:sticky working
   exactly as it did when the markup was inline (a sticky element needs its containing
   block to be the scrolling body, not an intermediate wrapper). */
pulse-topbar,
pulse-footer { display: contents; }

.pulse-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pulse-surface);
  border-bottom: 1px solid var(--pulse-border);
  box-shadow: var(--pulse-shadow-1);
}

.pulse-topbar__inner {
  max-width: var(--pulse-container-max);
  margin: 0 auto;
  padding: 0 var(--pulse-space-md);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'brand search user'
    'nav   nav    nav';
  align-items: center;
  column-gap: var(--pulse-space-sm);
}

.pulse-topbar__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-width: 0;          /* may shrink in its grid track; never forces overflow */
  min-height: var(--pulse-touch-target);
  text-decoration: none;
}
/* Cargonomics logomark, now the sole brand element in the topbar.
   Brand-specific: lift the logo to a per-client config if Pulse is reused. */
.pulse-topbar__logo {
  height: 28px;
  width: auto;
  display: block;
  flex: none;            /* keep its size; never squashed by a tight brand track */
}
/* Nav: horizontally scrollable strip on mobile, inline on desktop */
.pulse-topbar__nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-2xs);
  margin: 0 calc(-1 * var(--pulse-space-md));
  padding: 0 var(--pulse-space-xs);
  border-top: 1px solid var(--pulse-border);
}

.pulse-topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pulse-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--pulse-transition), border-color var(--pulse-transition);
}
.pulse-topbar__link:hover {
  color: var(--pulse-brand);
  border-bottom-color: color-mix(in srgb, var(--pulse-accent) 45%, transparent);
}
.pulse-topbar__link[aria-current='page'] {
  color: var(--pulse-brand);
  border-bottom-color: var(--pulse-accent);
}

/* The "More" overflow menu (Reports / Attendance / Assess). The trigger looks
   like a nav link; the panel mirrors the account menu popover. Reduces the tab
   count so the bar fits without the old invisible side-scroll. */
.pulse-topbar__more-wrap { position: relative; display: inline-flex; }
.pulse-topbar__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pulse-text-muted);
  transition: color var(--pulse-transition), border-color var(--pulse-transition);
}
.pulse-topbar__more:hover,
.pulse-topbar__more[aria-expanded='true'] { color: var(--pulse-brand); }
.pulse-topbar__more:hover { border-bottom-color: color-mix(in srgb, var(--pulse-accent) 45%, transparent); }
.pulse-topbar__more.is-active { color: var(--pulse-brand); border-bottom-color: var(--pulse-accent); }
.pulse-topbar__more-caret { font-size: 0.7em; }
.pulse-topbar__more-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--pulse-z-menu, 60);
  min-width: 248px;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  box-shadow: 0 12px 32px rgba(17, 41, 75, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-topbar__more-panel[hidden] { display: none; }
/* A two-line menu row: an icon spanning both rows on the left, the label on top,
   a muted description underneath. */
.pulse-topbar__more-panel .pulse-topbar__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  min-height: 0;
  padding: 8px 10px;
  border-bottom: 0;
  border-radius: 8px;
  white-space: normal;
  color: var(--pulse-text);
}
.pulse-topbar__more-panel .pulse-topbar__link:hover {
  background: var(--pulse-surface-sunken);
  border-bottom: 0;
}
.pulse-topbar__more-panel .pulse-topbar__link[aria-current='page'] {
  background: color-mix(in srgb, var(--pulse-accent) 14%, transparent);
  border-bottom: 0;
}
.pulse-topbar__more-panel .pulse-topbar__link wa-icon {
  grid-row: 1 / span 2;
  font-size: 1.05rem;
  color: var(--pulse-text-muted);
}
.pulse-topbar__more-label { font-weight: 600; font-size: 0.92rem; }
.pulse-topbar__more-desc { font-size: 0.8rem; font-weight: 400; color: var(--pulse-text-muted); }

/* Quick search */
.pulse-search {
  grid-area: search;
  position: relative;
  justify-self: end;
  width: min(100%, 230px);
  min-width: 0;          /* the 1fr search track absorbs the shrink so the row never overflows */
}
.pulse-search__input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--pulse-space-sm) 0 34px;
  border: 1px solid var(--pulse-border-strong);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface)
    no-repeat 10px center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%238b94a3'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  font: inherit;
  font-size: 0.92rem;
  color: var(--pulse-text);
}
.pulse-search__input::placeholder { color: var(--pulse-text-faint); }
.pulse-search__kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--pulse-text-faint);
  border: 1px solid var(--pulse-border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--pulse-surface-sunken);
  pointer-events: none;
}
.pulse-search__results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(92vw, 340px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-2);
  padding: var(--pulse-space-2xs);
  z-index: 50;
}
.pulse-search__results[hidden] { display: none; }
.pulse-search__item {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  width: 100%;
  min-height: var(--pulse-touch-target);
  padding: var(--pulse-space-2xs) var(--pulse-space-xs);
  border: 0;
  border-radius: var(--pulse-radius-s);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--pulse-text);
  cursor: pointer;
}
.pulse-search__item:hover,
.pulse-search__item[aria-selected='true'] { background: var(--pulse-brand-soft); }
.pulse-search__item-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-search__item-sub { color: var(--pulse-text-muted); font-size: 0.8rem; white-space: nowrap; }
.pulse-search__item-type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pulse-text-faint);
}
.pulse-search__empty {
  padding: var(--pulse-space-sm);
  color: var(--pulse-text-muted);
  font-size: 0.9rem;
}

/* User area: chip + test-data toggle */
.pulse-topbar__user {
  grid-area: user;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--pulse-space-sm);
  min-width: 0;
  min-height: var(--pulse-touch-target);
}

.pulse-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  max-width: 180px;
}
.pulse-chip__avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pulse-brand);
  color: var(--pulse-text-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pulse-chip__name {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none; /* name appears from tablet up; avatar always visible */
}

.pulse-topbar__test {
  display: inline-flex;
  align-items: center;
  gap: var(--pulse-space-2xs);
  font-size: 0.8rem;
  color: var(--pulse-text-muted);
}
/* The "Test data" word is hidden on small screens (the toggle stays, with its
   aria-label) so the user area cannot push the topbar past its box; it returns
   from tablet up, alongside the account name. */
.pulse-topbar__test-label { display: none; }

/* Smallest screens (narrow phones): the Cargonomics logo makes the brand wide,
   so brand + user already fill the row. Give the search its own full-width row
   instead of squeezing it between them. This decouples the search width from the
   brand/user widths, so the topbar can never overflow its box. Placed after the
   base .pulse-search / .pulse-topbar__user rules so it wins the cascade. The
   inline brand/search/user layout returns at 480px, where it fits. */
@media (max-width: 479px) {
  .pulse-topbar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand  user'
      'search search'
      'nav    nav';
    row-gap: var(--pulse-space-2xs);
  }
  .pulse-search { justify-self: stretch; width: 100%; }
}

/* Main content container */
.pulse-main {
  flex: 1;
  width: 100%;
  max-width: var(--pulse-container-max);
  margin: 0 auto;
  padding: var(--pulse-space-md) var(--pulse-space-md) var(--pulse-space-2xl);
}

/* Page header inside main */
.pulse-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-sm);
  margin: var(--pulse-space-xs) 0 var(--pulse-space-lg);
}
.pulse-page-head__title { margin: 0; flex: 1 1 auto; }
/* Gold "prestige" underline accent: a small brand signature under the page title. */
.pulse-page-head__title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--pulse-accent);
}
.pulse-page-head__sub {
  flex-basis: 100%;
  margin: 0;
  color: var(--pulse-text-muted);
  font-size: 0.92rem;
}
.pulse-page-head__actions {
  display: flex;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
}

/* Footer */
.pulse-footer {
  border-top: 1px solid var(--pulse-border);
  background: var(--pulse-surface);
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  text-align: center;
  font-size: 0.78rem;
  color: var(--pulse-text-faint);
}
/* The Pulse build commit is injected by functions/pulse/_middleware.js into
   body[data-pulse-commit] and rendered by <pulse-footer> (shell.js) as
   .pulse-footer__commit. The old static .footer__version span is gone from /pulse. */

/* Generic panel (surface card used for layout grouping) */
.pulse-panel {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
  box-shadow: var(--pulse-shadow-1);
  padding: var(--pulse-space-md);
}
.pulse-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--pulse-space-sm);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pulse-text-muted);
}
/* Gold leading tick: the brand signature shared by every panel heading. */
.pulse-panel__title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 0.92em;
  border-radius: 2px;
  background: var(--pulse-accent);
}

/* Section stacking rhythm. Flex column so inline children (spans) stack
   too, and a per-instance `style="gap: ..."` override works as expected. */
.pulse-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pulse-space-lg);
}

/* --------------------------------------------------------------------------
   4b. STAT CARDS: big number + label + delta
   -------------------------------------------------------------------------- */
/* Tiles shrink-wrap to their content (label/value), packed left and wrapping,
   instead of stretching to equal grid columns. A small number no longer sits in
   a too-wide box. */
.pulse-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pulse-space-sm);
}
.pulse-stat { flex: 0 1 auto; }   /* form the box around the content, do not stretch */

.pulse-stat {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
  box-shadow: var(--pulse-shadow-1);
  padding: var(--pulse-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--pulse-space-2xs);
  /* A <button> tile (KpiBand action tiles) sizes its height with the native
     form-control algorithm, which ignores flex/block content and collapses the
     tile so the big value + label spill out of the white card. Forcing
     height:auto opts the button back into normal content-based sizing, so the
     card grows to fit. Content-based (not a fixed min-height) keeps it correct
     as the clamp()-scaled value resizes across breakpoints. */
  height: auto;
  transition: box-shadow var(--pulse-transition), transform var(--pulse-transition), border-color var(--pulse-transition);
}
.pulse-stat:hover {
  box-shadow: var(--pulse-shadow-2);
  border-color: var(--pulse-border-strong);
  transform: translateY(-1px);
}
.pulse-stat__value {
  /* Body font, not the Orbitron display font: Orbitron's bold "0" is a stylized
     (near-slashed) zero that reads as a filled box at a single digit. D97. */
  font-family: var(--pulse-font-body);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pulse-brand);
  font-variant-numeric: tabular-nums;
}
.pulse-stat__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pulse-text-muted);
}
.pulse-stat__delta {
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pulse-stat__delta--up   { color: var(--pulse-success); }
.pulse-stat__delta--down { color: var(--pulse-danger); }
.pulse-stat__delta--flat { color: var(--pulse-text-faint); }
.pulse-stat__delta--up::before   { content: '\2191'; }
.pulse-stat__delta--down::before { content: '\2193'; }
.pulse-stat__delta--flat::before { content: '\2192'; }

/* Clickable stat tile (KpiBand): reads as a doorway, not a static number.
   Reuses the .pulse-stat card; adds a pointer, a focus ring, and a go-arrow. */
a.pulse-stat,
button.pulse-stat { text-decoration: none; text-align: left; font: inherit; width: auto; cursor: default; }
/* Reserve room on the right for the absolutely-positioned go-arrow so it never
   overlaps the label now that the tile is content-width. */
.pulse-stat--action { cursor: pointer; position: relative; padding-right: calc(var(--pulse-space-md) + 1.5rem); }
.pulse-stat--action:focus-visible {
  outline: 2px solid var(--pulse-brand);
  outline-offset: 2px;
}
.pulse-stat__go {
  position: absolute;
  top: var(--pulse-space-md);
  right: var(--pulse-space-md);
  color: var(--pulse-text-faint);
  font-size: 1.1rem;
  transition: transform var(--pulse-transition), color var(--pulse-transition);
}
.pulse-stat__go::before { content: '\2192'; }
.pulse-stat--action:hover .pulse-stat__go { color: var(--pulse-brand); transform: translateX(2px); }

/* --------------------------------------------------------------------------
   4c. STATUS PILLS: one class per status, both pipelines
   -------------------------------------------------------------------------- */
.pulse-pill {
  --_status: var(--pulse-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: color-mix(in srgb, var(--_status) 72%, var(--pulse-text));
  background: color-mix(in srgb, var(--_status) 13%, var(--pulse-surface));
  border: 1px solid color-mix(in srgb, var(--_status) 30%, var(--pulse-surface));
}
.pulse-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--_status);
}

/* Candidate pipeline */
.pulse-pill--new          { --_status: var(--pulse-status-new); }
.pulse-pill--reviewing    { --_status: var(--pulse-status-reviewing); }
.pulse-pill--qualified    { --_status: var(--pulse-status-qualified); }
.pulse-pill--rejected     { --_status: var(--pulse-status-rejected); }
.pulse-pill--waitlist     { --_status: var(--pulse-status-waitlist); }
.pulse-pill--enrolled     { --_status: var(--pulse-status-enrolled); }

/* Lead Status (per-person warmth, Contacts) + company Relationship Status.
   Distinct slugs so the shared "warm"/"cold" words never collide. */
.pulse-pill--lead-hot    { --_status: #dc2626; }
.pulse-pill--lead-warm   { --_status: #d97706; }
.pulse-pill--lead-cold   { --_status: #2563eb; }
.pulse-pill--rel-active  { --_status: #16a34a; }
.pulse-pill--rel-warm    { --_status: #d97706; }
.pulse-pill--rel-cold    { --_status: #64748b; }
.pulse-pill--rel-dormant { --_status: #9ca3af; }

/* Editable pill: a resting caret marks it clickable (recognition, not typing),
   and it never also opens the row (the page sets data-row-stop on it). */
.pulse-pill--editable { cursor: pointer; }
.pulse-pill--editable::after {
  content: '\25BE';
  font-size: 0.65em;
  opacity: 0.7;
  margin-left: 1px;
}
.pulse-pill--editable:hover { filter: brightness(0.97); }
.pulse-pill--editable:focus-visible {
  outline: 2px solid var(--pulse-brand);
  outline-offset: 1px;
}

/* Inline chip menu: the Contacts lead-status quick edit (recognition, not typing). */
.pulse-chipmenu {
  position: absolute;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border-strong);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-2);
}
.pulse-chipmenu button.pulse-pill {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.pulse-chipmenu button.pulse-pill.is-selected {
  outline: 2px solid var(--pulse-brand);
  outline-offset: 1px;
}
.pulse-chipmenu__clear {
  font: inherit;
  font-size: 0.78rem;
  color: var(--pulse-text-muted);
  background: none;
  border: 0;
  border-top: 1px solid var(--pulse-border);
  padding: 6px 4px 2px;
  margin-top: 2px;
  cursor: pointer;
  text-align: left;
}
.pulse-chipmenu__clear:hover { color: var(--pulse-text); }

/* The Candidates detail drawer is wide: it holds the profile, the full editable
   application form, the CV, the matching panel and the assessment log. The
   default wa-drawer size (25rem) is too narrow for that. Caps to the viewport
   on small screens automatically. */
wa-drawer#candidate-detail-drawer {
  --size: 56rem;
}

/* A clickable person row inside the Contacts company drawer. */
.pulse-linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font: inherit;
  color: var(--pulse-text);   /* a bare <button> does not inherit body colour; force it so names are never white-on-white */
  text-align: left;
  padding: 8px 10px;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  cursor: pointer;
}
.pulse-linkrow strong { color: var(--pulse-text); }
.pulse-linkrow:hover {
  border-color: var(--pulse-border-strong);
  background: color-mix(in srgb, var(--pulse-brand) 4%, var(--pulse-surface));
}

/* Test-data row tint, so demo records read as samples. */
tr.pulse-row--test { background: color-mix(in srgb, var(--pulse-warning) 6%, transparent); }

/* Placement pipeline */
.pulse-pill--suggested    { --_status: var(--pulse-status-suggested); }
.pulse-pill--introduced   { --_status: var(--pulse-status-introduced); }
.pulse-pill--interviewing { --_status: var(--pulse-status-interviewing); }
.pulse-pill--offered      { --_status: var(--pulse-status-offered); }
.pulse-pill--placed       { --_status: var(--pulse-status-placed); }
.pulse-pill--declined     { --_status: var(--pulse-status-declined); }
.pulse-pill--withdrawn    { --_status: var(--pulse-status-withdrawn); }

/* --------------------------------------------------------------------------
   4d. DUAL SCORE BARS: AI score vs Combined score side by side
   Set the width with the --pulse-score custom property (0% to 100%).
   -------------------------------------------------------------------------- */
.pulse-score {
  display: grid;
  gap: var(--pulse-space-2xs);
}
.pulse-score__row {
  display: grid;
  grid-template-columns: 76px 1fr 34px;
  align-items: center;
  gap: var(--pulse-space-xs);
}
.pulse-score__label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pulse-text-muted);
}
.pulse-score__bar {
  height: 9px;
  border-radius: 999px;
  background: var(--pulse-surface-sunken);
  box-shadow: inset 0 0 0 1px rgb(var(--pulse-shadow-color) / 0.04);
  overflow: hidden;
}
.pulse-score__fill {
  display: block;
  height: 100%;
  width: var(--pulse-score, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pulse-score-ai) 76%, white), var(--pulse-score-ai));
  transition: width 0.5s var(--pulse-ease);
}
.pulse-score__row--combined .pulse-score__fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pulse-score-combined) 82%, white), var(--pulse-score-combined));
}
.pulse-score__value {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--pulse-text);
}

/* --------------------------------------------------------------------------
   4e. KANBAN: board, column, card
   -------------------------------------------------------------------------- */
/* PRD 59: flexbox (not grid) so a folded column can be a slim strip while
   open columns keep the preset width. --pulse-board-colw is the ONE width
   knob (Board options presets); phones cap at 80vw regardless. */
.pulse-board {
  display: flex;
  align-items: flex-start;
  gap: var(--pulse-space-sm);
  overflow-x: auto;
  padding-bottom: var(--pulse-space-sm);
  scroll-snap-type: x proximity;
}

.pulse-column {
  --_status: var(--pulse-text-muted);
  flex: 0 0 min(80vw, var(--pulse-board-colw, 290px));
  min-width: 0;
  scroll-snap-align: start;
  background: var(--pulse-surface-sunken);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}

/* The folded column: a slim vertical strip that is one big expand button,
   keeping the accent bar, count, rotated label, and summed value (PRD 59). */
.pulse-column--folded {
  flex: 0 0 44px;
  min-height: 200px;
}
.pulse-column__strip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pulse-space-xs);
  background: none;
  border: 0;
  border-top: 3px solid var(--_status);
  border-radius: var(--pulse-radius-l) var(--pulse-radius-l) 0 0;
  padding: var(--pulse-space-xs) 2px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 44px;
}
.pulse-column__strip:hover { background: var(--pulse-surface); border-radius: var(--pulse-radius-l); }
.pulse-column__strip .pulse-column__count { margin-left: 0; }
.pulse-column__strip-label {
  writing-mode: vertical-rl;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pulse-text);
  letter-spacing: 0.02em;
}
.pulse-column__strip-sum {
  writing-mode: vertical-rl;
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pulse-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Compact density (Board options): tighter cards, next step clamped to one
   line. Applied on the board HOST. Density never hides a card LINE: which
   lines show is solely the Card-fields checklist's job (review fix: a CSS
   display:none here silently overrode the Contact/Course checkboxes). */
.pulse-board-host--compact .pulse-kcard { padding: var(--pulse-space-xs); }
.pulse-board-host--compact .pulse-kcard__next {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* The empty-state slot beside the leading column when a filter matches no
   records (board.js withLeading path). 260px = the narrowest readable
   empty-state card, a component constant like the 44px strip. */
.pulse-board__empty { flex: 1; min-width: 260px; }

/* Preset view chips (PRD 59 stretch): one-click board setups above the
   filter bar. */
.pulse-viewchips {
  align-items: center;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
  margin-top: var(--pulse-space-md);
}

/* Board options popover (Deals): rows reuse the multiselect option styling;
   these classes replace inline styles so spacing stays on the token scale. */
.pulse-boardopts__panel { min-width: 260px; }
.pulse-boardopts__actions { display: flex; gap: var(--pulse-space-xs); }
.pulse-boardopts__row {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
}
.pulse-boardopts__rowlabel { font-weight: 700; min-width: 64px; }
.pulse-boardopts__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--pulse-space-2xs);
  cursor: pointer;
}
.pulse-boardopts__grouplabel { font-weight: 700; padding: var(--pulse-space-2xs) 0 2px; }
.pulse-boardopts__foot { padding-top: var(--pulse-space-2xs); }

/* Meetings calendar (PRD 63): a month grid of held / scheduled / overdue
   meeting chips, colored via the status tokens, never colour alone (each
   chip's title and accessible name state the kind and date, and the legend,
   reusing .pulse-chart-legend, labels the colours). */
.pulse-cal { margin-top: var(--pulse-space-md); }
.pulse-cal__head {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--pulse-space-sm);
}
.pulse-cal__title { font-weight: 700; font-size: 1.05rem; min-width: 140px; text-align: center; }
.pulse-cal__tally { margin-left: auto; display: inline-flex; gap: var(--pulse-space-sm); flex-wrap: wrap; }
.pulse-cal__scroll {
  overflow-x: auto;
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
}
.pulse-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 840px;
  gap: 1px;
  background: var(--pulse-border);
}
.pulse-cal__dow {
  background: var(--pulse-surface-sunken);
  padding: var(--pulse-space-2xs) var(--pulse-space-xs);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pulse-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pulse-cal__day {
  background: var(--pulse-surface);
  min-height: 92px;
  padding: var(--pulse-space-2xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-cal__day--blank { background: var(--pulse-surface-sunken); }
.pulse-cal__day--today { box-shadow: inset 0 0 0 2px var(--pulse-brand); }
.pulse-cal__date { font-size: 0.75rem; font-weight: 700; color: var(--pulse-text-muted); }
.pulse-cal__chip {
  --_k: var(--pulse-info);
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--_k);
  background: var(--pulse-surface-sunken);
  color: var(--pulse-text);
  border-radius: var(--pulse-radius-s);
  padding: 2px 6px;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-cal__chip:hover { background: var(--pulse-brand-soft); }
.pulse-cal__chip--held { --_k: var(--pulse-success); }
.pulse-cal__chip--overdue { --_k: var(--pulse-danger); font-weight: 700; }
/* The legend reuses .pulse-chart-legend (+ swatch colour inline); this
   modifier only spaces it under the grid. */
.pulse-cal__legend { margin-top: var(--pulse-space-xs); }

/* Export menu (PRD 64): the Deals Export button opens a small three-option
   popover (wireDisclosure behaviour, same as the topbar menus). */
.pulse-exportmenu { position: relative; display: inline-flex; }
.pulse-exportmenu__panel {
  /* Fallback anchor only. On open, deals.js repositions this panel with FIXED,
     viewport-clamped coordinates (anchorToViewport in disclosure.js), because
     no pure-CSS anchor stays on screen at every width: left:0 overflows the
     right edge when the button sits right, right:0 overflows the left edge when
     it sits left, and a wrapped mobile toolbar produces both. These values are
     what a no-JS render would use. */
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  /* 30 = in-content popover layer: above page content, below the sticky topbar
     (z 40) and topbar-owned menus (z 60), matching .pulse-multiselect__panel. */
  z-index: 30;
  /* Explicit width capped to the viewport: an absolutely positioned flex
     container resolves width:auto to max-content, which let the hint sentences
     stretch the panel off-screen (live report 2026-07-22 23:43). */
  width: min(300px, calc(100vw - 24px));
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-3);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-exportmenu__panel[hidden] { display: none; }
.pulse-exportmenu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--pulse-radius-s);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--pulse-text);
  /* The vendored native.css styles bare <button> as a fixed-height inline-flex
     form control (height: var(--wa-form-control-height); white-space: nowrap).
     Left unopposed, the fixed height clipped these two-line title+hint rows so
     the wrapped hint overflowed and painted over the next item (live report
     2026-07-23). Reset both: auto height grows to the content, normal wrapping
     lets the hint wrap inside the panel. */
  height: auto;
  min-height: var(--pulse-touch-target);
  white-space: normal;
}
/* display:block above beats the UA [hidden] rule, so restore it explicitly:
   the "My columns" item is hidden outside the Table view. */
.pulse-exportmenu__item[hidden] { display: none; }
.pulse-exportmenu__item:hover,
.pulse-exportmenu__item:focus-visible { background: var(--pulse-brand-soft); }
.pulse-exportmenu__title { display: block; font-weight: 600; }
.pulse-exportmenu__hint { display: block; }

/* A labelled bullet list in a detail drawer (needs / opportunity / next step). */
.pulse-drawer-list {
  margin: var(--pulse-space-2xs) 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-column__head {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  padding: var(--pulse-space-sm) var(--pulse-space-sm) var(--pulse-space-xs);
  border-top: 3px solid var(--_status);
  border-radius: var(--pulse-radius-l) var(--pulse-radius-l) 0 0;
}
.pulse-column__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pulse-text);
}
.pulse-column__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pulse-text-muted);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 1.6;
}
.pulse-column__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--pulse-space-2xs) var(--pulse-space-xs) var(--pulse-space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--pulse-space-xs);
  min-height: 80px;
}
/* (The PRD 56 hidden-body fold was replaced by the PRD 59 strip; a folded
   column no longer renders a body at all, so no [hidden] override is needed.) */

/* Column accents per placement status */
.pulse-column--suggested    { --_status: var(--pulse-status-suggested); }
.pulse-column--introduced   { --_status: var(--pulse-status-introduced); }
.pulse-column--interviewing { --_status: var(--pulse-status-interviewing); }
.pulse-column--offered      { --_status: var(--pulse-status-offered); }
.pulse-column--placed       { --_status: var(--pulse-status-placed); }
.pulse-column--declined     { --_status: var(--pulse-status-declined); }
.pulse-column--withdrawn    { --_status: var(--pulse-status-withdrawn); }

.pulse-kcard {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-1);
  padding: var(--pulse-space-sm);
  cursor: grab;
  /* Long unbroken tokens (a pasted URL, an email, a WhatsApp string) must
     never poke through the card border: break them only when they cannot
     fit. Normal prose is untouched. Same rule guards the detail drawers. */
  overflow-wrap: anywhere;
  transition: box-shadow var(--pulse-transition), transform var(--pulse-transition), border-color var(--pulse-transition), opacity var(--pulse-transition);
}
/* Deliberately GLOBAL: every Pulse detail drawer (deals, candidates,
   companies, contacts, courses) gets the same long-token containment, since
   any of them can hold pasted URLs or unbroken strings. anywhere only breaks
   a token that cannot fit; ellipsized nowrap elements are unaffected. */
wa-drawer { overflow-wrap: anywhere; }
.pulse-kcard:hover {
  box-shadow: var(--pulse-shadow-2);
  border-color: var(--pulse-border-strong);
  transform: translateY(var(--pulse-lift));
}
.pulse-kcard:active { cursor: grabbing; }
.pulse-kcard__title { font-weight: 700; font-size: 0.95rem; }
.pulse-kcard__company { font-size: 0.85rem; color: var(--pulse-text-muted); }
.pulse-kcard__meta {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-xs);
  margin-top: var(--pulse-space-xs);
  font-size: 0.78rem;
  color: var(--pulse-text-faint);
}
/* Long role labels (e.g. "Documentation & Customer Service") must stay
   inside the fixed-width kanban card: let the role tag shrink and
   ellipsis-truncate its text rather than overflow and clip under the
   column scrollbar. The age ("1d") stays beside it; full role shows on
   hover via the tag's title attribute (set in pipeline.js). */
.pulse-kcard__meta wa-tag { min-width: 0; }
.pulse-kcard__meta wa-tag::part(content) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The top next step on a deal card: one muted line, clamped to two rows;
   the full list lives in the deal panel (hover shows it via title). */
.pulse-kcard__next {
  margin-top: var(--pulse-space-2xs);
  font-size: 0.78rem;
  color: var(--pulse-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.pulse-kcard__days { font-variant-numeric: tabular-nums; }
.pulse-kcard__days--stale { color: var(--pulse-warning); font-weight: 700; }
/* PRD 56: the red "has this been lost?" tier (double the amber threshold, or a
   booked meeting date well past). */
.pulse-kcard__days--overdue { color: var(--pulse-danger); font-weight: 700; }
.pulse-kcard__actions {
  margin-top: var(--pulse-space-xs);
  display: flex;
  gap: var(--pulse-space-xs);
  flex-wrap: wrap;
}

/* Drag states (wired to SortableJS ghostClass / chosenClass) */
.pulse-kcard--ghost { opacity: 0.35; border-style: dashed; }
.pulse-kcard--chosen { box-shadow: var(--pulse-shadow-2); }

/* A non-draggable card (the form leads today): a click opens its detail
   surface, so the cursor says click, not grab. Stamped by the card builder,
   so the rule travels with the card, not with one column's class name. The
   :active variant is load-bearing: it outranks .pulse-kcard:active's
   grabbing cursor above. */
.pulse-kcard--static,
.pulse-kcard--static:active { cursor: pointer; }

/* PRD 46 shared board generalization. All additive: the placements board never
   sets a column summary or a droppable collapsed area, so it renders exactly as
   before. The Deals board opts in to a summed value in each header and to
   per-outcome drop lanes inside its collapsed "Closed" area. */
.pulse-column__sum {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pulse-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pulse-column__head--withsum .pulse-column__count { margin-left: 0; }
.pulse-column__toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pulse-column__closed-lanes {
  display: flex;
  flex-direction: column;
  gap: var(--pulse-space-xs);
  overflow-y: auto;
  padding: var(--pulse-space-2xs) var(--pulse-space-xs) var(--pulse-space-xs);
}
.pulse-board__lane { display: flex; flex-direction: column; gap: var(--pulse-space-2xs); }
.pulse-board__lane .pulse-column__body { flex: none; max-height: 34vh; padding: 0; min-height: 40px; }
.pulse-board__lane-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pulse-text-muted);
  padding: 0 var(--pulse-space-2xs);
}
.pulse-kcard__reason { font-size: 0.78rem; color: var(--pulse-text-faint); margin-top: var(--pulse-space-2xs); }
.pulse-kcard__outcome { margin-top: var(--pulse-space-2xs); }

/* Optimistic-update pending state, shared by cards, rows, cells */
.pulse-pending {
  opacity: 0.55;
  pointer-events: none;
  animation: pulse-pending 1.1s ease-in-out infinite;
}
@keyframes pulse-pending {
  50% { opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   4f. LIST + DETAIL split layout
   Mobile: one pane at a time, toggled with .pulse-split--detail-open.
   Desktop: side by side.
   -------------------------------------------------------------------------- */
.pulse-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pulse-space-md);
  align-items: start;
}
.pulse-split__list { min-width: 0; }
.pulse-split__detail { min-width: 0; display: none; }
.pulse-split--detail-open .pulse-split__list { display: none; }
.pulse-split--detail-open .pulse-split__detail { display: block; }

.pulse-split__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  margin-bottom: var(--pulse-space-xs);
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--pulse-link);
  cursor: pointer;
}
.pulse-split__back::before { content: '\2190'; }

.pulse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
  overflow: hidden;
}
/* Two-line row: avatar | name over subline | status pill. Both text lines
   truncate with an ellipsis instead of crushing each other; hover the row
   for the full value (pages set title attributes). */
.pulse-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'avatar primary pill'
    'avatar secondary pill';
  column-gap: var(--pulse-space-sm);
  row-gap: 2px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px var(--pulse-space-md);
  border: 0;
  border-bottom: 1px solid var(--pulse-border);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--pulse-text);
  cursor: pointer;
  transition: background var(--pulse-transition), box-shadow var(--pulse-transition);
}
.pulse-list__item:last-child { border-bottom: 0; }
.pulse-list__item:hover { background: var(--pulse-brand-soft); }
.pulse-list__item[aria-selected='true'] {
  background: var(--pulse-brand-soft);
  box-shadow: inset 4px 0 0 var(--pulse-accent);
}
.pulse-list__avatar {
  grid-area: avatar;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pulse-brand-soft);
  color: var(--pulse-brand);
  font-size: var(--pulse-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}
.pulse-list__primary {
  grid-area: primary;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-list__secondary {
  grid-area: secondary;
  color: var(--pulse-text-muted);
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-list__item > .pulse-pill { grid-area: pill; justify-self: end; }

/* Count chip used inside filter buttons (a nested badge component breaks
   button layout; this stays inline). */
.pulse-count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: var(--pulse-text-xs);
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4f2. LOG ENTRIES (assessment log, audit-style lists)
   Attributed, dated rows: a head line with who/when/verdict, the note
   below, optional meta line underneath.
   -------------------------------------------------------------------------- */
.pulse-log {
  display: flex;
  flex-direction: column;
  gap: var(--pulse-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pulse-log__item {
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  background: var(--pulse-surface);
}
.pulse-log__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 4px;
}
.pulse-log__who { font-weight: 700; }
.pulse-log__when { color: var(--pulse-text-faint); font-size: var(--pulse-text-s); }
.pulse-log__scope { color: var(--pulse-text-muted); font-size: var(--pulse-text-s); }
.pulse-log__note {
  margin: 0;
  font-size: var(--pulse-text-s);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pulse-log__meta {
  margin-top: 4px;
  color: var(--pulse-text-faint);
  font-size: var(--pulse-text-xs);
}

/* --------------------------------------------------------------------------
   4g. FORM LAYOUTS
   -------------------------------------------------------------------------- */
.pulse-form {
  display: grid;
  gap: var(--pulse-space-md);
}
.pulse-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pulse-space-md);
  align-items: start; /* top-align fields so controls line up across columns even when one field's hint runs longer */
}
.pulse-form__field { display: grid; gap: var(--pulse-space-2xs); min-width: 0; }
.pulse-form__field--full { grid-column: 1 / -1; }
.pulse-form__label { font-weight: 600; font-size: 0.92rem; }
.pulse-form__hint {
  font-size: 0.82rem;
  color: var(--pulse-text-muted);
  margin: 0;
}
.pulse-form__error { font-size: 0.82rem; color: var(--pulse-danger); margin: 0; }
.pulse-form__actions {
  display: flex;
  gap: var(--pulse-space-sm);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--pulse-space-xs);
}

/* --------------------------------------------------------------------------
   4h. ATTENDANCE GRID
   -------------------------------------------------------------------------- */
.pulse-attendance-wrap {
  overflow-x: auto;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
}
.pulse-attendance {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
}
.pulse-attendance th,
.pulse-attendance td {
  padding: var(--pulse-space-xs) var(--pulse-space-sm);
  border-bottom: 1px solid var(--pulse-border);
  text-align: left;
  white-space: nowrap;
}
.pulse-attendance thead th {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pulse-text-muted);
  background: var(--pulse-surface-sunken);
  position: sticky;
  top: 0;
  z-index: 2;
}
.pulse-attendance th[scope='row'],
.pulse-attendance td:first-child {
  position: sticky;
  left: 0;
  background: var(--pulse-surface);
  font-weight: 600;
  z-index: 1;
  box-shadow: 1px 0 0 var(--pulse-border);
}
.pulse-attendance__day { min-width: 110px; }
.pulse-attendance__pct { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Cell tints by attendance value */
.pulse-attendance .is-present { background: color-mix(in srgb, var(--pulse-success) 10%, var(--pulse-surface)); }
.pulse-attendance .is-late    { background: color-mix(in srgb, var(--pulse-warning) 12%, var(--pulse-surface)); }
.pulse-attendance .is-absent  { background: color-mix(in srgb, var(--pulse-danger) 10%, var(--pulse-surface)); }
.pulse-attendance .is-excused { background: color-mix(in srgb, var(--pulse-info) 10%, var(--pulse-surface)); }

/* Compact native controls used inside grids and page heads: the day and
   outcome selects on the attendance grid (also reused as a small select
   elsewhere), and the per-column "all present" bulk button. */
.pulse-attendance__select {
  font: inherit;
  font-size: var(--pulse-text-s);
  color: var(--pulse-text);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-s);
  padding: 8px 6px;
  min-height: 38px;
  max-width: 100%;
}
.pulse-attendance__select:focus-visible {
  outline: 2px solid var(--pulse-accent);
  outline-offset: 1px;
}
.pulse-attendance__bulk {
  font: inherit;
  font-size: var(--pulse-text-xs);
  color: var(--pulse-link);
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
  border-radius: var(--pulse-radius-s);
}
.pulse-attendance__bulk:disabled { opacity: 0.5; cursor: default; }
.pulse-attendance__bulk:focus-visible {
  outline: 2px solid var(--pulse-accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   4i. SKELETON LOADERS
   -------------------------------------------------------------------------- */
.pulse-skeleton {
  display: block;
  border-radius: var(--pulse-radius-s);
  /* The moving band is a wide, near-surface highlight: high enough contrast
     against the sunken base that the motion clearly reads as "loading",
     not as static content boxes (D140). */
  background: linear-gradient(
    100deg,
    var(--pulse-surface-sunken) 35%,
    color-mix(in srgb, var(--pulse-surface-sunken) 15%, var(--pulse-surface)) 50%,
    var(--pulse-surface-sunken) 65%
  );
  background-size: 200% 100%;
  animation: pulse-shimmer 1.4s linear infinite;
}
@keyframes pulse-shimmer {
  to { background-position: -200% 0; }
}
.pulse-skeleton--text  { height: 0.9em; width: 100%; }
.pulse-skeleton--title { height: 1.3em; width: 55%; }
.pulse-skeleton--stat  { height: 92px; border-radius: var(--pulse-radius-l); }
.pulse-skeleton--row   { height: 48px; }
.pulse-skeleton--card  { height: 120px; border-radius: var(--pulse-radius-m); }
.pulse-skeleton--circle { width: 32px; height: 32px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   4j. GLOBAL LOADING BAR (data in flight)
   Created lazily by pulse.js and shown by fetchJson while any request has
   been in flight for a beat (D140). Decorative and aria-hidden: skeletons
   and in-context button spinners stay the accessible loading signal.
   -------------------------------------------------------------------------- */
.pulse-loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: var(--pulse-z-loadbar, 90); /* over the chrome (topbar 40, menus 60, tour 70), under toasts (100) */
  pointer-events: none; overflow: hidden;
  background: color-mix(in srgb, var(--pulse-brand) 12%, transparent);
  opacity: 1; transition: opacity 0.2s ease;
}
.pulse-loadbar[hidden] { display: none; }
.pulse-loadbar--done { opacity: 0; }
.pulse-loadbar__fill {
  height: 100%; width: 34%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pulse-brand), var(--pulse-accent));
  animation: pulse-loadbar-sweep 1.1s ease-in-out infinite;
}
@keyframes pulse-loadbar-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); } /* 300% of the 34% fill clears the far edge */
}

@media (prefers-reduced-motion: reduce) {
  :root { --pulse-lift: 0px; }
  .pulse-skeleton { animation: none; }
  /* Loading bar: no sweep; a static brand-tinted line still says "busy". */
  .pulse-loadbar__fill { animation: none; width: 100%; opacity: 0.5; }
  .pulse-pending { animation: none; }
  .pulse-stat,
  .pulse-kcard,
  .pulse-action,
  .pulse-score__fill,
  .pulse-chart__bar,
  .pulse-chart__col-bar { transition: none; }
  .pulse-stat:hover { transform: none; }
  .pulse-main wa-button::part(base) { transition: none; }
  .pulse-main wa-button:hover::part(base) { transform: none; }
}

/* --------------------------------------------------------------------------
   4j. EMPTY STATES: always say what to do next
   -------------------------------------------------------------------------- */
.pulse-empty {
  text-align: center;
  padding: var(--pulse-space-2xl) var(--pulse-space-md);
  color: var(--pulse-text-muted);
}
.pulse-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--pulse-space-md);
  border-radius: 50%;
  background: var(--pulse-brand-soft);
  color: var(--pulse-brand);
  font-size: 1.6rem;
  line-height: 1;
}
.pulse-empty__icon svg { width: 30px; height: 30px; fill: currentColor; }
.pulse-empty__title {
  margin: 0 0 var(--pulse-space-2xs);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pulse-text);
}
.pulse-empty__hint { margin: 0 auto; max-width: 38ch; font-size: 0.92rem; }
.pulse-empty__action { margin-top: var(--pulse-space-md); }

/* --------------------------------------------------------------------------
   4k. TOAST STACK
   Created and managed by pulse.js toast(). Bottom centre on mobile,
   top right on desktop.
   -------------------------------------------------------------------------- */
.pulse-toasts {
  position: fixed;
  z-index: 100;
  inset-inline: var(--pulse-space-md);
  bottom: calc(var(--pulse-space-md) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--pulse-space-xs);
  justify-items: center;
  pointer-events: none;
}
.pulse-toast {
  --_accent: var(--pulse-text-faint);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--pulse-space-sm);
  width: min(100%, 420px);
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  border-radius: var(--pulse-radius-m);
  border-left: 4px solid var(--_accent);
  background: var(--pulse-toast-bg);
  color: var(--pulse-toast-text);
  box-shadow: var(--pulse-shadow-2);
  font-size: 0.92rem;
  animation: pulse-toast-in 0.22s ease;
}
.pulse-toast--leaving { animation: pulse-toast-out 0.18s ease forwards; }
@keyframes pulse-toast-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes pulse-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-toast, .pulse-toast--leaving { animation: none; }
}
.pulse-toast--success { --_accent: var(--pulse-success); }
.pulse-toast--danger  { --_accent: var(--pulse-danger); }
.pulse-toast--warning { --_accent: var(--pulse-warning); }
.pulse-toast--info    { --_accent: var(--pulse-info); }
.pulse-toast__msg { flex: 1; min-width: 0; }
.pulse-toast__action {
  flex: none;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--pulse-accent);
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-xs);
  cursor: pointer;
}
.pulse-toast__close {
  flex: none;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  font-size: 1.1rem;
  line-height: 1;
  min-width: var(--pulse-touch-target);
  min-height: var(--pulse-touch-target);
  margin: calc(-1 * var(--pulse-space-xs));
  margin-left: 0;
  cursor: pointer;
}
.pulse-toast__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   4l. BAR CHARTS (hand-rolled, CSS-driven; no chart library)
   Horizontal bars: set --pulse-size (percentage width) per bar.
   Column charts: set --pulse-size (percentage height) per column.
   -------------------------------------------------------------------------- */
.pulse-chart { display: grid; gap: var(--pulse-space-xs); }

.pulse-chart__row {
  display: grid;
  grid-template-columns: minmax(88px, 30%) 1fr auto;
  align-items: center;
  gap: var(--pulse-space-xs);
}
.pulse-chart__label {
  font-size: 0.85rem;
  color: var(--pulse-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-chart__track {
  height: 18px;
  border-radius: var(--pulse-radius-s);
  background: var(--pulse-surface-sunken);
  box-shadow: inset 0 0 0 1px rgb(var(--pulse-shadow-color) / 0.04);
  overflow: hidden;
}
.pulse-chart__bar {
  display: block;
  height: 100%;
  width: var(--pulse-size, 0%);
  min-width: 2px;
  border-radius: inherit;
  background: var(--pulse-chart-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
  transition: width 0.5s var(--pulse-ease);
}
.pulse-chart__value {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pulse-text);
}

/* Colour modifiers for multi-series rows */
.pulse-chart__bar--c1 { background: var(--pulse-chart-1); }
.pulse-chart__bar--c2 { background: var(--pulse-chart-2); }
.pulse-chart__bar--c3 { background: var(--pulse-chart-3); }
.pulse-chart__bar--c4 { background: var(--pulse-chart-4); }
.pulse-chart__bar--c5 { background: var(--pulse-chart-5); }
.pulse-chart__bar--c6 { background: var(--pulse-chart-6); }

/* Column (vertical) variant, used for cohort and funnel views */
.pulse-chart--columns {
  display: flex;
  align-items: flex-end;
  gap: var(--pulse-space-xs);
  height: 160px;
  padding-top: var(--pulse-space-md);
}
.pulse-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  gap: var(--pulse-space-2xs);
}
.pulse-chart__col-bar {
  width: 100%;
  max-width: 56px;
  height: var(--pulse-size, 0%);
  min-height: 2px;
  border-radius: var(--pulse-radius-s) var(--pulse-radius-s) 0 0;
  background: var(--pulse-chart-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
  transition: height 0.5s var(--pulse-ease);
}
.pulse-chart__col-value {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pulse-chart__col-label {
  font-size: 0.72rem;
  color: var(--pulse-text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Chart legend */
.pulse-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pulse-space-sm);
  font-size: 0.8rem;
  color: var(--pulse-text-muted);
}
.pulse-chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.pulse-chart-legend__swatch {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--pulse-chart-1);
}

/* --------------------------------------------------------------------------
   4n. REPORTS (filter bar, chart canvas, segmented toggle, sr-only table)
   The Reports page renders charts via the vendored chart library into a
   fixed-height .pulse-canvas (the library is responsive but needs a sized
   parent). .pulse-sr-only keeps the data table in the accessibility tree
   while hidden; the per-panel toggle removes the class to reveal it.
   -------------------------------------------------------------------------- */
.pulse-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pulse-space-md);
  margin-bottom: var(--pulse-space-md);
}
.pulse-filter { display: flex; flex-direction: column; gap: 4px; }
.pulse-filter__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pulse-text-muted);
}
.pulse-filter__control {
  font: inherit;
  font-size: 0.9rem;
  min-height: 36px;
  min-width: 150px;
  padding: 6px 10px;
  color: var(--pulse-text);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-s);
  transition: border-color var(--pulse-transition), background var(--pulse-transition);
}
/* Hover affordance for every filter control + dropdown button (they all reuse
   .pulse-filter__control): the border picks up the brand colour so it reads as
   interactive. */
.pulse-filter__control:hover { border-color: var(--pulse-brand); }
.pulse-multiselect[open] .pulse-multiselect__summary { border-color: var(--pulse-brand); }
.pulse-filter__control:focus-visible {
  outline: 2px solid var(--pulse-focus);
  outline-offset: 1px;
}

/* Multi-select dropdown (mountFilterBar widget:'multiselect', D92). A native
   <details> styled as a control; the panel is an absolutely-positioned checkbox
   popover so opening it never shifts the page. The field label sits inside the
   control ("Hiring status: 2 selected") so a row of these reads compactly. */
/* The component layer styles every native <details> with padding (0 16px 16px),
   which on our dropdown control leaves a 16px white band below the summary pill
   (it reads as a stray box poking out) and pushes the panel ~16px too far down,
   since the panel's top:calc(100% + 4px) measures from the padded details box.
   Reset it so the panel sits a clean 4px under the pill. Scoped to the control,
   so native <details> cards/accordions (.pulse-panel, help) keep their padding. */
.pulse-multiselect { position: relative; display: inline-block; padding: 0; }
.pulse-multiselect__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;            /* hide the default disclosure triangle */
  white-space: nowrap;
}
.pulse-multiselect__summary::-webkit-details-marker { display: none; } /* Safari / old Chrome */
.pulse-multiselect__summary::marker { content: ""; font-size: 0; }      /* Firefox / modern Chrome flex-summary marker */
/* A stray dropdown-caret ::after (a 16px masked icon from the component layer,
   meant for <select> where ::after never paints) leaks onto the real <summary>
   because it reuses .pulse-filter__control. Kill it so only our own chevron shows. */
.pulse-multiselect__summary::after { content: none !important; }
.pulse-multiselect__label { font-weight: 600; color: var(--pulse-text-muted); }
.pulse-multiselect__value { color: var(--pulse-text); }
.pulse-multiselect__chevron {
  font-size: 0.8em;
  color: var(--pulse-text-muted);
  transition: transform 0.15s ease;
  margin-left: auto;
}
.pulse-multiselect[open] .pulse-multiselect__chevron { transform: rotate(180deg); }
.pulse-multiselect__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius, 8px);
  box-shadow: var(--pulse-shadow-md, 0 8px 24px rgba(17, 41, 75, 0.16));
}
.pulse-multiselect__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.pulse-multiselect__opt:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.pulse-multiselect__opt-label { flex: 1; }
.pulse-filterbar__applying { font-style: italic; align-self: center; margin-left: 4px; }
/* The column chooser is the leftmost toolbar control on the list pages, so its
   panel opens rightward (left-aligned to the trigger) to stay on screen. A
   right-aligned panel clipped off the left viewport edge when the chooser sat at
   the far left (D106). */
.pulse-colchooser .pulse-multiselect__panel { left: 0; right: auto; }

/* Shared filter bar (mountFilterBar, PRD 32): facet chip groups, an optional
   search box, a clear-all, and one live match count. Sits next to .pulse-filter
   so the filter and sort controls read as one family. Chips are wa-button pills
   styled by the component library; this only handles layout + the group
   separator, all from tokens. */
.pulse-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-sm);
}
.pulse-filterbar__dynamic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-sm);
  flex: 1 1 auto;
  min-width: 0;
}
.pulse-filterbar__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The "More filters" disclosure drops onto its own row when opened. */
.pulse-filterbar__more-panel {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}
/* Respect the `hidden` attribute: a class rule's display:flex would otherwise
   beat the UA [hidden]{display:none} on source order, leaving the disclosure
   panel permanently open and the "More filters" toggle apparently inert. */
.pulse-filterbar__more-panel[hidden] { display: none; }
.pulse-filterbar__sep {
  width: 1px;
  align-self: center; /* a short centered tick, not stretched taller than the controls it sits between */
  height: 22px;
  background: var(--pulse-border);
  margin: 0 4px;
}
.pulse-filterbar__search { min-width: 200px; }
.pulse-filterbar__count { align-self: center; margin-left: 4px; }

.pulse-canvas { position: relative; width: 100%; height: 240px; }

.pulse-seg {
  display: inline-flex;
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-s);
  overflow: hidden;
}
.pulse-seg__btn {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  min-height: var(--pulse-touch-target);
  padding: 6px 12px;
  border: 0;
  background: var(--pulse-surface);
  color: var(--pulse-text-muted);
  cursor: pointer;
}
.pulse-seg__btn + .pulse-seg__btn { border-left: 1px solid var(--pulse-border); }
.pulse-seg__btn[aria-pressed="true"] { background: var(--pulse-chart-1); color: #fff; }

[data-datatable] { margin-top: var(--pulse-space-sm); }
.pulse-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4m. DATA TABLES (report tables with CSV export)
   -------------------------------------------------------------------------- */
.pulse-table-wrap {
  overflow-x: auto;
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-l);
}
.pulse-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.pulse-table th,
.pulse-table td {
  padding: var(--pulse-space-xs) var(--pulse-space-md);
  text-align: left;
  border-bottom: 1px solid var(--pulse-border);
}
.pulse-table thead th {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pulse-text-muted);
  background: var(--pulse-surface-sunken);
}
.pulse-table tbody tr:last-child td { border-bottom: 0; }
.pulse-table tbody tr { transition: background var(--pulse-transition); }
.pulse-table tbody tr:hover { background: var(--pulse-brand-soft); }
.pulse-table tbody tr[data-id] { cursor: pointer; }
/* Report data-table rows double as the keyboard drill-down path (role=button,
   tabindex=0); they reveal the table on focus and open the same drill dialog. */
.pulse-table tbody tr[data-drill] { cursor: pointer; }
.pulse-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Companies table (Stage 1 redesign): a sticky header so the column row stays in
   view on a long list. Scoped to .pulse-table--sticky so the Pipeline / Reports
   tables are untouched. */
.pulse-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Click-to-sort headers: a pointer + a quiet hover, and a small arrow on the
   active column. The arrow itself is rendered inline by the page script. */
.pulse-table__sortable { cursor: pointer; user-select: none; }
.pulse-table__sortable:hover { color: var(--pulse-text); }
.pulse-table__sortable:focus-visible {
  outline: 2px solid var(--pulse-focus);
  outline-offset: -2px;
}
.pulse-table__arrow { font-size: 0.7em; color: var(--pulse-brand); }
.pulse-table__company strong { font-weight: 700; }
.pulse-table__actions-cell { text-align: right; white-space: nowrap; }

/* Pager row under the Companies table: page-size select, the count line, and the
   Prev / numbered / Next buttons. Its own stable host, so a table re-render never
   rebuilds it. All spacing from tokens. */
.pulse-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-md);
  margin-top: var(--pulse-space-md);
}
.pulse-pager__size { flex-direction: row; align-items: center; gap: var(--pulse-space-xs); }
.pulse-pager__size .pulse-filter__control { min-width: 90px; }
.pulse-pager__count { margin-left: auto; }
.pulse-pager__nav { display: flex; align-items: center; gap: var(--pulse-space-xs); flex-wrap: wrap; }
.pulse-pager__gap { color: var(--pulse-text-faint); padding: 0 2px; }

/* Column-priority hide: lower-priority columns drop out on a narrow screen so
   the Companies table never needs a horizontal scroll on a phone. Used on the
   Offices / People / Functions columns. */
@media (max-width: 960px) {
  .pulse-table .col-hide-md { display: none; }
}

/* --------------------------------------------------------------------------
   4n. ACTION CARDS ("My Day" inbox)
   -------------------------------------------------------------------------- */
.pulse-actions {
  display: grid;
  gap: var(--pulse-space-sm);
}
.pulse-action {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-sm);
  min-height: var(--pulse-touch-target);
  padding: var(--pulse-space-sm) var(--pulse-space-md);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-left: 4px solid var(--pulse-accent);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-1);
  color: var(--pulse-text);
  text-decoration: none;
  transition: box-shadow var(--pulse-transition), transform var(--pulse-transition);
}
.pulse-action:hover {
  box-shadow: var(--pulse-shadow-2);
  transform: translateY(var(--pulse-lift));
  border-color: var(--pulse-border-strong);
  color: var(--pulse-text);
}
.pulse-action__count {
  flex: none;
  min-width: 44px;
  text-align: center;
  font-family: var(--pulse-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pulse-brand);
  font-variant-numeric: tabular-nums;
}
.pulse-action__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pulse-action__text { font-weight: 600; }
.pulse-action__sub { font-size: 0.85rem; color: var(--pulse-text-muted); }
.pulse-action__go {
  flex: none;
  color: var(--pulse-text-faint);
  font-size: 1.1rem;
}
.pulse-action__go::before { content: '\2192'; }

/* Urgency accents */
.pulse-action--info    { border-left-color: var(--pulse-info); }
.pulse-action--warning { border-left-color: var(--pulse-warning); }
.pulse-action--danger  { border-left-color: var(--pulse-danger); }
.pulse-action--success { border-left-color: var(--pulse-success); }

/* Activity feed */
.pulse-feed { list-style: none; margin: 0; padding: 0; }
.pulse-feed__item {
  display: flex;
  gap: var(--pulse-space-sm);
  padding: var(--pulse-space-sm) 0;
  border-bottom: 1px solid var(--pulse-border);
  font-size: 0.92rem;
}
.pulse-feed__item:last-child { border-bottom: 0; }
.pulse-feed__when {
  flex: none;
  width: 64px;
  color: var(--pulse-text-faint);
  font-size: 0.8rem;
  padding-top: 2px;
}
.pulse-feed__what { flex: 1; min-width: 0; }
.pulse-feed__who { font-weight: 600; }

/* --------------------------------------------------------------------------
   4o. UTILITIES
   -------------------------------------------------------------------------- */
.pulse-muted { color: var(--pulse-text-muted); }
.pulse-faint { color: var(--pulse-text-faint); }
.pulse-small { font-size: 0.85rem; }
.pulse-nowrap { white-space: nowrap; }

/* Light alphabetical section header for a name-grouped list (Companies sort by
   name). Quiet by design: a small uppercase letter on a hairline rule, not a
   loud heading, so it reads as a divider between letter groups. */
.pulse-alpha-head {
  margin: var(--pulse-space-md) 0 var(--pulse-space-2xs);
  padding-bottom: var(--pulse-space-2xs);
  border-bottom: 1px solid var(--pulse-border);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pulse-alpha-head:first-child { margin-top: 0; }
.pulse-row {
  display: flex;
  align-items: center;
  gap: var(--pulse-space-sm);
  flex-wrap: wrap;
}
.pulse-grow { flex: 1 1 auto; min-width: 0; }
.pulse-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--pulse-space-md); }

/* --------------------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS (mobile-first)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  /* (.pulse-stats is a content-sized flex row now; no column grid.)
     (.pulse-chip__name stays hidden at all widths: the account chip shows the
      avatar initials only, never the full name.) */
  .pulse-topbar__test-label { display: inline; }
  .pulse-form__grid { grid-template-columns: 1fr 1fr; }
  .pulse-grid-2 { grid-template-columns: 1fr 1fr; }
  .pulse-actions { grid-template-columns: 1fr 1fr; }
  .pulse-toasts {
    inset-inline: auto;
    right: var(--pulse-space-md);
    top: calc(var(--pulse-topbar-height) + var(--pulse-space-md));
    bottom: auto;
    justify-items: end;
    width: 420px;
  }
}

@media (min-width: 960px) {
  .pulse-topbar__inner {
    /* nav is content-sized (never clips); the search column flexes and shrinks,
       so brand + nav + search + user always fit without hiding any tab. */
    grid-template-columns: auto auto minmax(150px, 1fr) auto;
    grid-template-areas: 'brand nav search user';
    height: var(--pulse-topbar-height);
  }
  .pulse-topbar__nav {
    border-top: 0;
    margin: 0;
    padding: 0 var(--pulse-space-sm);
    flex-wrap: nowrap;   /* one line on the fixed-height row; the More menu keeps the tab count short so it fits */
    overflow: visible;   /* let the More dropdown escape the nav box */
  }
  .pulse-topbar__link[aria-current='page'] {
    border-bottom-width: 3px;
  }
  .pulse-search { width: 100%; max-width: 300px; }
  .pulse-main { padding-left: var(--pulse-space-lg); padding-right: var(--pulse-space-lg); }

  .pulse-split { grid-template-columns: minmax(280px, 360px) 1fr; }
  .pulse-split__detail { display: block; }
  .pulse-split--detail-open .pulse-split__list { display: block; }
  .pulse-split__back { display: none; }

  /* Desktop: the list pane sticks beside the detail and scrolls inside
     itself (filters stay put, only the rows scroll). */
  .pulse-split__list {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--pulse-topbar-height) + var(--pulse-space-md));
    max-height: calc(100vh - var(--pulse-topbar-height) - var(--pulse-space-md) * 2);
  }
  .pulse-split__list > .pulse-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* PRD 59 retired the >=960px stretch override: fixed preset widths plus
     one horizontal scroll behave the same at every viewport, so the width
     presets in Board options mean what they say. */
}

/* --------------------------------------------------------------------------
   6. PRINT STYLES (reports printable for a meeting)
   -------------------------------------------------------------------------- */
@media print {
  .pulse-topbar,
  .pulse-footer,
  .pulse-toasts,
  .pulse-page-head__actions,
  .pulse-split__back,
  .pulse-no-print,
  wa-button {
    display: none !important;
  }
  body.pulse-body { background: #fff; color: #000; display: block; }
  .pulse-main { max-width: none; padding: 0; }
  .pulse-panel,
  .pulse-stat,
  .pulse-table-wrap,
  .pulse-attendance-wrap,
  .pulse-action {
    box-shadow: none;
    border-color: #bbb;
    break-inside: avoid;
  }
  .pulse-stats { grid-template-columns: repeat(4, 1fr); }
  .pulse-chart__bar,
  .pulse-chart__col-bar,
  .pulse-score__fill,
  .pulse-pill,
  .pulse-cal__chip,
  .pulse-cal__day--today,
  .pulse-chart-legend__swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The meetings calendar prints whole: no clipped weekend columns behind a
     scroll container, and the grid compresses to the printable width. */
  .pulse-cal__scroll { overflow: visible; }
  .pulse-cal__grid { min-width: 0; }
  .pulse-board { overflow: visible; flex-direction: column; }
  .pulse-board .pulse-column { flex: none; max-height: none; }
  /* Folded columns still PRINT (review fix): hiding them silently dropped
     whole stages (Target and Won/Lost fold by default) from a printed board.
     The strip prints as a compact horizontal header row instead. */
  .pulse-column--folded { min-height: 0; }
  .pulse-column--folded .pulse-column__strip { flex-direction: row; min-width: 0; }
  .pulse-column__strip-label,
  .pulse-column__strip-sum { writing-mode: horizontal-tb; }
  .pulse-column__strip-sum { margin-top: 0; margin-left: auto; }
}

/* ------------------------------------------------------------------ */
/* PRD 66 (D169): FOUC guard for hover-help tooltips.                  */
/* tour.js appends <wa-tooltip> elements to <body> with the hint copy  */
/* as text content; until the component library defines the element,   */
/* an undefined custom element renders that text inline, which flashed */
/* as a raw text block below the footer on slow loads. Tooltip-        */
/* specific ON PURPOSE: a blanket :not(:defined) rule could hide       */
/* elements that reserve layout space.                                 */
/* ------------------------------------------------------------------ */
wa-tooltip:not(:defined) { display: none; }

/* PRD 66: the data-freshness cue (data-store.js). A small fixed pill that
   appears only when the view painted from a stored copy more than a minute
   old; tapping it reloads for fresh data. */
.pulse-datacue {
  position: fixed;
  right: var(--pulse-space-md, 16px);
  bottom: var(--pulse-space-md, 16px);
  z-index: 60;
  padding: var(--pulse-space-2xs, 4px) var(--pulse-space-sm, 12px);
  border: 1px solid var(--pulse-border, #e2e3df);
  border-radius: 999px;
  background: var(--pulse-surface, #fff);
  color: var(--pulse-text-muted, #5d6878);
  font: inherit;
  font-size: 0.75rem;
  box-shadow: 0 2px 8px rgb(var(--pulse-shadow-color, 0 0 0) / 0.15);
  cursor: pointer;
}
.pulse-datacue:hover { color: var(--pulse-text, #1c2430); }

/* --------------------------------------------------------------------------
   Docs shell (PRD 67): sticky side navigation + content column for the
   documentation pages (/pulse/help router mode, /pulse/system scrollspy).
   Rendered by assets/pulse/views/docs-nav.js; modeled on the .pulse-split
   sticky rail. Mobile first: the rail is a toggled drawer under 960px.
   -------------------------------------------------------------------------- */
.pulse-docs { display: block; }
.pulse-docs__content { min-width: 0; }
.pulse-docs__article { max-width: 72ch; }

.pulse-docs-nav__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-md);
  margin: 0 0 var(--pulse-space-sm);
  background: var(--pulse-surface); border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  font: inherit; font-weight: 600; color: var(--pulse-text); cursor: pointer;
}
.pulse-docs-nav { display: none; }
.pulse-docs-nav--open .pulse-docs-nav { display: block; }

.pulse-docs-nav__list, .pulse-docs-nav__sub { list-style: none; margin: 0; padding: 0; }
.pulse-docs-nav__sub { margin-left: var(--pulse-space-sm); border-left: 1px solid var(--pulse-border); }
.pulse-docs-nav__link {
  display: flex; align-items: center; min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  border-radius: var(--pulse-radius-m);
  color: var(--pulse-text); text-decoration: none; font-size: 0.92rem;
}
.pulse-docs-nav__link:hover { background: var(--pulse-surface-sunken); color: var(--pulse-brand); }
.pulse-docs-nav__link[aria-current="page"] {
  background: var(--pulse-brand-soft); color: var(--pulse-brand); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--pulse-brand);
}
.pulse-docs-nav__link--sub { font-size: 0.88rem; }
.pulse-docs-nav__group {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: var(--pulse-touch-target); padding: 0 var(--pulse-space-sm);
  background: none; border: 0; border-radius: var(--pulse-radius-m);
  font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--pulse-text);
  text-align: left; cursor: pointer;
}
.pulse-docs-nav__group:hover { background: var(--pulse-surface-sunken); }
.pulse-docs-nav__chev { font-size: 0.7em; transition: transform 120ms ease; }
.pulse-docs-nav__group[aria-expanded="true"] .pulse-docs-nav__chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pulse-docs-nav__chev { transition: none; } }

.pulse-docs-nav__search {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: var(--pulse-touch-target);
  padding: 0 var(--pulse-space-sm);
  margin-bottom: var(--pulse-space-sm);
  background: var(--pulse-surface); border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
}
.pulse-docs-nav__search:focus-within { border-color: var(--pulse-brand); }
.pulse-docs-nav__input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; color: var(--pulse-text); }
.pulse-docs-nav__results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  max-height: 60vh; overflow-y: auto;
  background: var(--pulse-surface); border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-m);
  box-shadow: var(--pulse-shadow-2);
  padding: var(--pulse-space-2xs);
}
.pulse-docs-nav__rlabel { margin: var(--pulse-space-2xs) var(--pulse-space-sm); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pulse-text-muted); }
.pulse-docs-nav__result {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: var(--pulse-touch-target); padding: 4px var(--pulse-space-sm);
  border-radius: var(--pulse-radius-m); text-decoration: none;
  color: var(--pulse-text); font-size: 0.9rem; font-weight: 600;
}
.pulse-docs-nav__result:hover { background: var(--pulse-brand-soft); color: var(--pulse-brand); }
.pulse-docs-nav__rhint { font-size: 0.78rem; font-weight: 400; color: var(--pulse-text-muted); }
.pulse-docs-nav__noresult { margin: 0; padding: var(--pulse-space-sm); color: var(--pulse-text-muted); font-size: 0.88rem; }

.pulse-docs__prevnext { display: flex; justify-content: space-between; gap: var(--pulse-space-sm); margin-top: var(--pulse-space-lg); }
.pulse-docs__prevnext a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--pulse-touch-target); padding: 0 var(--pulse-space-md);
  border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-m);
  text-decoration: none; color: var(--pulse-text); font-weight: 600; font-size: 0.9rem;
}
.pulse-docs__prevnext a:hover { border-color: var(--pulse-brand); color: var(--pulse-brand); }

@media (min-width: 960px) {
  .pulse-docs {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: var(--pulse-space-lg);
    align-items: start;
  }
  /* The TOPIC LIST scrolls, not the rail: an overflow on the rail would clip
     the absolutely-positioned search results dropdown inside it. */
  .pulse-docs__rail {
    position: sticky;
    top: calc(var(--pulse-topbar-height) + var(--pulse-space-md));
    max-height: calc(100vh - var(--pulse-topbar-height) - var(--pulse-space-md) * 2);
    display: flex;
    flex-direction: column;
  }
  .pulse-docs__rail .pulse-docs-nav { display: flex; flex-direction: column; min-height: 0; }
  .pulse-docs__rail .pulse-docs-nav__list { overflow-y: auto; min-height: 0; }
  .pulse-docs-nav__toggle { display: none; }
}

/* Anchored jumps (search deep links, section anchors) must land below the
   sticky topbar, not underneath it. */
[data-hp-sub], .hp-view > h2, .sg-section, .sg-section h2, .sg-section h3 {
  scroll-margin-top: calc(var(--pulse-topbar-height) + var(--pulse-space-sm));
}

@media print {
  .pulse-docs__rail, .pulse-docs-nav__toggle { display: none; }
  .pulse-docs { display: block; }
}