/* ===========================================================================
   HypeVault Components — the canonical class contract (see DESIGN.md + brief).
   Layout shell · surfaces · buttons · cards · stats · inputs · signals ·
   confidence · status · tables (collapse to cards) · nav · drop · calendar.
   Mobile-first: base styles target small screens; lifts come at >=768px.
   =========================================================================== */

/* ===========================================================================
   1. SURFACES
   =========================================================================== */
.hv-canvas {
  background: var(--hv-canvas);
}
.hv-surface-1 {
  background: var(--hv-surface-1);
}
.hv-surface-2 {
  background: var(--hv-surface-2);
}
.hv-surface-3 {
  background: var(--hv-surface-3);
}
.hv-surface-4 {
  background: var(--hv-surface-4);
}

/* ===========================================================================
   2. APP SHELL  (.hv-shell / .hv-sidebar / .hv-topbar / .hv-main / .hv-container)
   Mobile-first: stacked, sidebar becomes a top drawer. >=768px: fixed sidebar.
   =========================================================================== */
.hv-shell {
  min-height: 100vh;
  background: var(--hv-canvas);
}

/* --- Topbar (sticky) --------------------------------------------------- */
.hv-topbar {
  position: sticky;
  top: 0;
  z-index: var(--hv-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--hv-space-md);
  height: var(--hv-topbar-h);
  padding: 0 var(--hv-space-md);
  background: rgba(1, 1, 2, 0.78);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hv-hairline);
}

.hv-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-xs);
  font-weight: var(--hv-weight-semibold);
  letter-spacing: -0.3px;
  color: var(--hv-ink);
  white-space: nowrap;
}

.hv-topbar__brand:hover {
  color: var(--hv-ink);
}

.hv-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--hv-body-sm-size);
  font-weight: var(--hv-weight-medium);
  color: var(--hv-ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--hv-space-xs);
  margin-left: auto;
}

/* Brand mark — small lavender square (the SCARCE accent). */
.hv-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--hv-radius-sm);
  background: var(--hv-primary);
  color: var(--hv-on-primary);
  font-size: 12px;
  font-weight: var(--hv-weight-bold);
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(94, 105, 209, 0.4),
    0 1px 0 var(--hv-edge-highlight) inset;
}

/* --- Body: sidebar + main --------------------------------------------- */
.hv-shell__body {
  display: flex;
  align-items: flex-start;
}

.hv-sidebar {
  flex: 0 0 var(--hv-sidebar-w);
  width: var(--hv-sidebar-w);
  align-self: stretch;
  padding: var(--hv-space-md) var(--hv-space-sm);
  border-right: 1px solid var(--hv-hairline);
  background: var(--hv-canvas);
}

.hv-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hv-sidebar__heading {
  padding: var(--hv-space-sm) var(--hv-space-sm) var(--hv-space-xxs);
}

.hv-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--hv-space-lg) var(--hv-space-md) var(--hv-space-xxl);
}

.hv-container {
  width: 100%;
  max-width: var(--hv-max-width);
  margin: 0 auto;
}

/* Page header block inside main */
.hv-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hv-space-md);
  margin-bottom: var(--hv-space-lg);
}

.hv-page-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-xxs);
  min-width: 0;
}

/* ===========================================================================
   3. NAV  (.hv-nav-link / .hv-nav-toggle)
   =========================================================================== */
.hv-nav-link {
  display: flex;
  align-items: center;
  gap: var(--hv-space-sm);
  padding: var(--hv-space-xs) var(--hv-space-sm);
  border-radius: var(--hv-radius-md);
  color: var(--hv-ink-subtle);
  font-size: var(--hv-body-sm-size);
  font-weight: var(--hv-weight-medium);
  line-height: 1.2;
  min-height: 36px;
  transition: background var(--hv-dur) var(--hv-ease),
    color var(--hv-dur) var(--hv-ease);
}

.hv-nav-link:hover {
  background: var(--hv-surface-2);
  color: var(--hv-ink);
}

.hv-nav-link.is-active {
  background: var(--hv-surface-3);
  color: var(--hv-ink);
}

.hv-nav-link__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  opacity: 0.85;
}

.hv-nav-link.is-active .hv-nav-link__icon {
  opacity: 1;
}

.hv-nav-link__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-surface-4);
  color: var(--hv-ink-muted);
  font-size: 11px;
  font-weight: var(--hv-weight-semibold);
}

/* Hamburger toggle — hidden on desktop, shown < 768. */
.hv-nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--hv-radius-md);
  border: 1px solid var(--hv-hairline);
  background: var(--hv-surface-1);
  color: var(--hv-ink);
  transition: background var(--hv-dur) var(--hv-ease),
    border-color var(--hv-dur) var(--hv-ease);
}

.hv-nav-toggle:hover {
  background: var(--hv-surface-2);
  border-color: var(--hv-hairline-strong);
}

/* Drawer scrim (mobile) */
.hv-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--hv-z-drawer);
  background: var(--hv-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ===========================================================================
   4. BUTTONS  (.hv-btn + --primary/--secondary/--tertiary/--ghost/--sm)
   8px corners (never pill). Touch target >= 40px tall by default.
   =========================================================================== */
.hv-btn {
  --_btn-bg: var(--hv-surface-1);
  --_btn-fg: var(--hv-ink);
  --_btn-border: var(--hv-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hv-space-xs);
  min-height: 40px;
  padding: var(--hv-space-xs) var(--hv-space-md);
  border-radius: var(--hv-radius-md);
  border: 1px solid var(--_btn-border);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  font-size: var(--hv-button-size);
  font-weight: var(--hv-weight-medium);
  line-height: var(--hv-button-line);
  letter-spacing: var(--hv-button-track);
  white-space: nowrap;
  user-select: none;
  transition: background var(--hv-dur) var(--hv-ease),
    border-color var(--hv-dur) var(--hv-ease),
    color var(--hv-dur) var(--hv-ease),
    transform var(--hv-dur-fast) var(--hv-ease);
}

.hv-btn:hover {
  color: var(--_btn-fg);
}

.hv-btn:active {
  transform: translateY(0.5px);
}

.hv-btn[disabled],
.hv-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hv-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

/* Primary — lavender fill (the SCARCE accent / one CTA per view). */
.hv-btn.--primary {
  --_btn-bg: var(--hv-primary);
  --_btn-fg: var(--hv-on-primary);
  --_btn-border: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.hv-btn.--primary:hover {
  --_btn-bg: var(--hv-primary-hover);
}
.hv-btn.--primary:active {
  --_btn-bg: var(--hv-primary-focus);
}

/* Secondary — surface-1 + hairline (sign-in, secondary actions). */
.hv-btn.--secondary {
  --_btn-bg: var(--hv-surface-1);
  --_btn-fg: var(--hv-ink);
  --_btn-border: var(--hv-hairline);
}
.hv-btn.--secondary:hover {
  --_btn-bg: var(--hv-surface-2);
  --_btn-border: var(--hv-hairline-strong);
}
.hv-btn.--secondary:active {
  --_btn-bg: var(--hv-surface-3);
}

/* Tertiary — plain text on canvas. */
.hv-btn.--tertiary {
  --_btn-bg: transparent;
  --_btn-fg: var(--hv-ink-muted);
  --_btn-border: transparent;
}
.hv-btn.--tertiary:hover {
  --_btn-fg: var(--hv-ink);
  --_btn-bg: var(--hv-surface-2);
}

/* Ghost — minimal icon/inline button, no chrome until hover. */
.hv-btn.--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--hv-ink-subtle);
  --_btn-border: transparent;
  min-height: 32px;
  padding: var(--hv-space-xxs) var(--hv-space-xs);
}
.hv-btn.--ghost:hover {
  --_btn-bg: var(--hv-surface-2);
  --_btn-fg: var(--hv-ink);
}

/* Size modifier — small/dense. */
.hv-btn.--sm {
  min-height: 30px;
  padding: var(--hv-space-xxs) var(--hv-space-sm);
  font-size: var(--hv-caption-size);
  border-radius: var(--hv-radius-sm);
}

.hv-btn.--block {
  width: 100%;
}

/* Danger flavor for destructive secondary actions (uses signal red). */
.hv-btn.--danger {
  --_btn-fg: var(--hv-signal-none);
  --_btn-border: var(--hv-signal-none-border);
  --_btn-bg: var(--hv-signal-none-bg);
}
.hv-btn.--danger:hover {
  --_btn-bg: rgba(212, 73, 63, 0.18);
}

/* ===========================================================================
   5. CARDS  (.hv-card / .hv-card.--featured)
   surface-1, 12px corners, 1px hairline. Featured -> surface-2.
   =========================================================================== */
.hv-card {
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-lg);
  padding: var(--hv-space-lg);
  color: var(--hv-ink);
  transition: border-color var(--hv-dur) var(--hv-ease),
    background var(--hv-dur) var(--hv-ease);
}

a.hv-card,
.hv-card.--interactive {
  display: block;
}

a.hv-card:hover,
.hv-card.--interactive:hover {
  background: var(--hv-surface-2);
  border-color: var(--hv-hairline-strong);
  color: var(--hv-ink);
}

.hv-card.--featured {
  background: var(--hv-surface-2);
  border-color: var(--hv-hairline-strong);
  box-shadow: var(--hv-elev-2);
}

.hv-card.--pad-xl {
  padding: var(--hv-space-xl);
}

.hv-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hv-space-md);
  margin-bottom: var(--hv-space-md);
}

.hv-card__title {
  font-size: var(--hv-title-size);
  line-height: var(--hv-title-line);
  letter-spacing: var(--hv-title-track);
  font-weight: var(--hv-weight-medium);
}

.hv-card__body {
  font-size: var(--hv-body-sm-size);
  color: var(--hv-ink-muted);
}

/* Card grid: 1-up mobile -> 2-up tablet -> 3-up desktop (set on parent). */
.hv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hv-space-md);
}

/* ===========================================================================
   6. STAT TILES  (.hv-stat)  — dense KPI tiles, link or static.
   =========================================================================== */
.hv-stat {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-xxs);
  padding: var(--hv-space-md);
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-lg);
  color: var(--hv-ink);
  transition: background var(--hv-dur) var(--hv-ease),
    border-color var(--hv-dur) var(--hv-ease),
    transform var(--hv-dur-fast) var(--hv-ease);
}

a.hv-stat:hover {
  background: var(--hv-surface-2);
  border-color: var(--hv-hairline-strong);
  color: var(--hv-ink);
  transform: translateY(-1px);
}

.hv-stat__value {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: var(--hv-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hv-stat__label {
  font-size: var(--hv-caption-size);
  letter-spacing: 0.2px;
  color: var(--hv-ink-subtle);
}

/* Flagged stat — warm hairline + faint tint (no chroma fill). */
.hv-stat.--flagged {
  border-color: var(--hv-signal-none-border);
}
.hv-stat.--flagged .hv-stat__value {
  color: var(--hv-signal-none);
}

.hv-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hv-space-sm);
}

/* ===========================================================================
   7. INPUTS  (.hv-field / .hv-input / .hv-select / .hv-search)
   surface-1, 8px corners, focus = 2px primary-focus @50%. >=44px on touch.
   =========================================================================== */
.hv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hv-field__label {
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  color: var(--hv-ink-subtle);
  letter-spacing: 0.2px;
}

.hv-field__hint {
  font-size: var(--hv-caption-size);
  color: var(--hv-ink-tertiary);
}

.hv-input,
.hv-select {
  width: 100%;
  min-height: 40px;
  padding: var(--hv-space-xs) var(--hv-space-sm);
  background: var(--hv-surface-1);
  color: var(--hv-ink);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-md);
  font-size: var(--hv-body-sm-size);
  line-height: 1.4;
  transition: border-color var(--hv-dur) var(--hv-ease),
    box-shadow var(--hv-dur) var(--hv-ease),
    background var(--hv-dur) var(--hv-ease);
  appearance: none;
}

.hv-input::placeholder {
  color: var(--hv-ink-tertiary);
}

.hv-input:hover,
.hv-select:hover {
  border-color: var(--hv-hairline-strong);
}

.hv-input:focus,
.hv-select:focus,
.hv-input:focus-visible,
.hv-select:focus-visible {
  outline: none;
  border-color: var(--hv-primary-focus);
  box-shadow: var(--hv-focus-ring);
  background: var(--hv-surface-2);
}

/* Native select caret (lavender-tinted chevron). */
.hv-select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238a8f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--hv-space-sm) center;
  cursor: pointer;
}

.hv-select option {
  background: var(--hv-surface-3);
  color: var(--hv-ink);
}

/* Search field — input with a leading glyph. */
.hv-search {
  position: relative;
  display: flex;
  align-items: center;
}

.hv-search .hv-input {
  padding-left: 34px;
}

.hv-search__icon {
  position: absolute;
  left: var(--hv-space-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--hv-ink-subtle);
  pointer-events: none;
}

/* Compact field variant for dense filter toolbars. */
.hv-field.--sm .hv-input,
.hv-field.--sm .hv-select {
  min-height: 34px;
  font-size: var(--hv-caption-size);
}

/* Filter toolbar layout — wraps; each control stays tappable. */
.hv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--hv-space-sm);
  padding: var(--hv-space-md);
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-lg);
}

.hv-toolbar .hv-field {
  flex: 1 1 140px;
}

/* --- Filter bar ("more with less": Search · Region · Sort visible, rest in a
   "More filters" disclosure). The whole bar collapses into the mobile drawer
   via the .hv-filterbar summary. ------------------------------------------- */
.hv-filterbar__form {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-sm);
}

/* Primary row: search grows; region + sort + actions stay compact. */
.hv-filterbar__primary {
  align-items: flex-end;
}
.hv-filterbar__primary .hv-field {
  flex: 0 1 200px;
}
.hv-filterbar__search {
  flex: 2 1 240px !important;
}
.hv-filterbar__actions {
  flex: 0 0 auto !important;
}

/* "More filters" disclosure — quiet text trigger, grid of advanced controls. */
.hv-morefilters {
  border-top: 1px dashed var(--hv-hairline);
  padding-top: var(--hv-space-sm);
}
.hv-morefilters__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-xs);
  width: max-content;
  list-style: none;
  cursor: pointer;
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  color: var(--hv-ink-subtle);
  padding: var(--hv-space-xxs) var(--hv-space-xs);
  border-radius: var(--hv-radius-sm);
  transition: color var(--hv-dur) var(--hv-ease),
    background var(--hv-dur) var(--hv-ease);
}
.hv-morefilters__summary::-webkit-details-marker {
  display: none;
}
.hv-morefilters__summary:hover {
  color: var(--hv-ink);
  background: var(--hv-surface-2);
}
.hv-morefilters__summary:focus-visible {
  outline: none;
  box-shadow: var(--hv-focus-ring);
}
.hv-morefilters__chev {
  flex: 0 0 auto;
  transition: transform var(--hv-dur) var(--hv-ease);
}
.hv-morefilters[open] .hv-morefilters__chev {
  transform: rotate(180deg);
}
/* The advanced controls sit on the page surface (no nested card chrome). */
.hv-morefilters__grid {
  margin-top: var(--hv-space-sm);
  padding: 0;
  background: none;
  border: 0;
}
.hv-morefilters__grid .hv-field {
  flex: 1 1 150px;
}

/* ===========================================================================
   8. BADGES / PILLS  (generic .hv-pill, plus the typed badge families)
   =========================================================================== */
.hv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--hv-space-xs);
  border-radius: var(--hv-radius-pill);
  background: var(--hv-surface-2);
  color: var(--hv-ink-muted);
  border: 1px solid var(--hv-hairline);
  font-size: var(--hv-caption-size);
  line-height: 1.4;
  white-space: nowrap;
}

.hv-pill.--mono {
  font-family: var(--hv-font-mono);
  font-size: 11px;
}

.hv-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--hv-radius-sm);
  background: var(--hv-surface-3);
  color: var(--hv-ink-muted);
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ===========================================================================
   9. SIGNALS  (.hv-signal + --high/--mid/--none)  — the allowed R/A/G.
   A dot + label chip; also a bare dot via .hv-signal__dot.
   =========================================================================== */
.hv-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--hv-space-xs);
  border-radius: var(--hv-radius-pill);
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hv-signal::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--hv-radius-pill);
  background: currentColor;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.hv-signal.--high {
  color: var(--hv-signal-high);
  background: var(--hv-signal-high-bg);
  border-color: var(--hv-signal-high-border);
}
.hv-signal.--mid {
  color: var(--hv-signal-mid);
  background: var(--hv-signal-mid-bg);
  border-color: var(--hv-signal-mid-border);
}
.hv-signal.--none {
  color: var(--hv-signal-none);
  background: var(--hv-signal-none-bg);
  border-color: var(--hv-signal-none-border);
}

/* Bare dot (for dense table cells where a chip is too heavy). */
.hv-signal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--hv-radius-pill);
  vertical-align: middle;
}
.hv-signal-dot.--high {
  background: var(--hv-signal-high);
  box-shadow: 0 0 0 3px var(--hv-signal-high-bg);
}
.hv-signal-dot.--mid {
  background: var(--hv-signal-mid);
  box-shadow: 0 0 0 3px var(--hv-signal-mid-bg);
}
.hv-signal-dot.--none {
  background: var(--hv-signal-none);
  box-shadow: 0 0 0 3px var(--hv-signal-none-bg);
}
.hv-signal-dot.--empty {
  background: var(--hv-ink-tertiary);
}

/* ===========================================================================
   10. CONFIDENCE  (.hv-conf + --high/--med/--low)  high=green med=amber low=subtle
   =========================================================================== */
.hv-conf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px var(--hv-space-xs);
  border-radius: var(--hv-radius-xs);
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  letter-spacing: 0.2px;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--hv-hairline);
  background: var(--hv-surface-2);
  color: var(--hv-ink-subtle);
}

.hv-conf::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--hv-radius-pill);
  background: currentColor;
}

.hv-conf.--high {
  color: var(--hv-signal-high);
  border-color: var(--hv-signal-high-border);
  background: var(--hv-signal-high-bg);
}
.hv-conf.--med {
  color: var(--hv-signal-mid);
  border-color: var(--hv-signal-mid-border);
  background: var(--hv-signal-mid-bg);
}
.hv-conf.--low {
  color: var(--hv-ink-subtle);
}

/* ===========================================================================
   11. STATUS  (.hv-status + --active/--review/--paused/--ignored)
   Pill badge: surface-2 + ink-muted base, tinted variants.
   =========================================================================== */
.hv-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--hv-space-xs);
  border-radius: var(--hv-radius-pill);
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--hv-surface-2);
  color: var(--hv-ink-muted);
  border: 1px solid var(--hv-hairline);
  text-transform: capitalize;
}

.hv-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--hv-radius-pill);
  background: currentColor;
  opacity: 0.9;
}

.hv-status.--active {
  color: var(--hv-signal-high);
  border-color: var(--hv-signal-high-border);
  background: var(--hv-signal-high-bg);
}
.hv-status.--review {
  color: var(--hv-signal-mid);
  border-color: var(--hv-signal-mid-border);
  background: var(--hv-signal-mid-bg);
}
.hv-status.--paused {
  color: var(--hv-signal-none);
  border-color: var(--hv-signal-none-border);
  background: var(--hv-signal-none-bg);
}
.hv-status.--ignored {
  color: var(--hv-ink-subtle);
}

/* ===========================================================================
   12. TABLES  (.hv-table / .hv-table.--stack)
   Dense data rows on canvas with hairline rules.
   .--stack collapses to stacked cards under 768px (label via data-label).
   =========================================================================== */
.hv-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-surface-1);
}

.hv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hv-body-sm-size);
}

.hv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--hv-space-xs) var(--hv-space-sm);
  background: var(--hv-surface-2);
  color: var(--hv-ink-subtle);
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-semibold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--hv-hairline);
}

.hv-table tbody td {
  padding: var(--hv-space-xs) var(--hv-space-sm);
  border-bottom: 1px solid var(--hv-hairline-tertiary);
  color: var(--hv-ink-muted);
  vertical-align: middle;
}

.hv-table tbody tr:last-child td {
  border-bottom: none;
}

.hv-table tbody tr {
  transition: background var(--hv-dur) var(--hv-ease);
}

.hv-table tbody tr:hover {
  background: var(--hv-surface-2);
}

.hv-table a {
  color: var(--hv-ink);
  font-weight: var(--hv-weight-medium);
}
.hv-table a:hover {
  color: var(--hv-primary-hover);
}

.hv-table td .hv-mono {
  color: var(--hv-ink-subtle);
}

/* Row needing attention — warm left rule, no heavy fill. */
.hv-table tr.--flag td {
  background: rgba(212, 73, 63, 0.05);
}
.hv-table tr.--flag td:first-child {
  box-shadow: inset 2px 0 0 var(--hv-signal-none);
}

/* Numeric alignment helper. */
.hv-table .--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Stacked-card collapse (mobile) --- */
@media (max-width: 767px) {
  .hv-table.--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .hv-table.--stack,
  .hv-table.--stack tbody,
  .hv-table.--stack tr,
  .hv-table.--stack td {
    display: block;
    width: 100%;
  }

  .hv-table.--stack tr {
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
    background: var(--hv-surface-1);
    padding: var(--hv-space-xs) var(--hv-space-sm);
    margin-bottom: var(--hv-space-sm);
  }

  .hv-table.--stack tr:hover {
    background: var(--hv-surface-1);
  }

  .hv-table.--stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hv-space-md);
    padding: 6px 0;
    border-bottom: 1px solid var(--hv-hairline-tertiary);
    text-align: right;
  }

  .hv-table.--stack td:last-child {
    border-bottom: none;
  }

  .hv-table.--stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--hv-ink-subtle);
    font-size: var(--hv-caption-size);
    font-weight: var(--hv-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
  }

  .hv-table.--stack tr.--flag td:first-child {
    box-shadow: none;
  }
  .hv-table.--stack tr.--flag {
    border-color: var(--hv-signal-none-border);
  }
}

/* ===========================================================================
   13. DROP CARD  (.hv-drop)  — the protagonist row. Redesigned for "one glance":
   a signal-tinted LEFT RAIL + a profit HERO carry the decision; everything else
   is one quiet sub-line. ~5 visible elements (was ~13). See _drop-card.ejs.
   =========================================================================== */
.hv-drop {
  position: relative; /* anchors the curator flag dot */
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--hv-space-md);
  /* extra left padding makes room for the 3px signal rail (drawn via box-shadow
     inset so there's no layout shift and the card corners stay rounded). */
  padding: var(--hv-space-sm) var(--hv-space-md);
  padding-left: calc(var(--hv-space-md) + 3px);
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-lg);
  color: var(--hv-ink);
  transition: background var(--hv-dur) var(--hv-ease),
    border-color var(--hv-dur) var(--hv-ease);
}

a.hv-drop:hover,
.hv-drop.--interactive:hover {
  background: var(--hv-surface-2);
  border-color: var(--hv-hairline-strong);
  color: var(--hv-ink);
}

/* Signal LEFT RAIL — the R/A/G dual-encoded as position + color so the column
   scans top-to-bottom in one fixation (the bucket pill is gone). */
.hv-drop--sig-high {
  box-shadow: inset 3px 0 0 var(--hv-signal-high);
}
.hv-drop--sig-mid {
  box-shadow: inset 3px 0 0 var(--hv-signal-mid);
}
.hv-drop--sig-none {
  box-shadow: inset 3px 0 0 var(--hv-signal-none);
}

.hv-drop__media {
  width: 48px;
  height: 48px;
  border-radius: var(--hv-radius-md);
  background: var(--hv-surface-3);
  border: 1px solid var(--hv-hairline);
  object-fit: cover;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--hv-ink-tertiary);
}

.hv-drop__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hv-drop__title {
  font-size: var(--hv-body-size);
  font-weight: var(--hv-weight-medium);
  letter-spacing: -0.1px;
  color: var(--hv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The single quiet sub-line: brand · hype · confidence · release · (region). */
.hv-drop__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--hv-caption-size);
  color: var(--hv-ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-drop__brand {
  color: var(--hv-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.hv-drop__dot {
  color: var(--hv-ink-tertiary);
  flex: 0 0 auto;
}

.hv-drop__hype,
.hv-drop__when {
  flex: 0 0 auto;
}

.hv-drop__region {
  flex: 0 0 auto;
  margin-left: 2px;
}

/* Bare confidence inside the sub-line: just dot + letter-word, no chip chrome. */
.hv-conf.hv-conf--bare {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.hv-drop__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}

/* Profit HERO — the dominant number: mono, tabular, signal-colored. */
.hv-drop__profit {
  font-family: var(--hv-font-mono);
  font-size: var(--hv-body-size);
  font-weight: var(--hv-weight-semibold);
  letter-spacing: -0.2px;
  color: var(--hv-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.hv-drop__profit--high {
  color: var(--hv-signal-high);
}
.hv-drop__profit--mid {
  color: var(--hv-signal-mid);
}
.hv-drop__profit--none {
  color: var(--hv-signal-none);
}

.hv-drop__profit-eyebrow {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--hv-ink-tertiary);
}

/* When no profit value exists, the signal pill itself is the hero (no fake
   number — constitution VI/XI). Slightly larger than an inline chip. */
.hv-drop__signal-hero {
  font-size: var(--hv-body-sm-size);
}

/* Curator status — ONE demoted dot at the card's top-right (admin only). */
.hv-drop__flagdot {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--hv-ink-tertiary);
}
.hv-drop__flagdot--review {
  border-radius: var(--hv-radius-pill);
  background: var(--hv-signal-mid);
  box-shadow: 0 0 0 3px var(--hv-signal-mid-bg);
  width: 7px;
  height: 7px;
}

@media (max-width: 480px) {
  .hv-drop {
    grid-template-columns: 40px 1fr auto;
  }
  .hv-drop__media {
    width: 40px;
    height: 40px;
  }
  /* Profit stays pinned top-right even on mobile — it's the answer and must
     never fall below the fold of the card. The sub-line wraps under the title. */
  .hv-drop__sub {
    white-space: normal;
  }
}

/* ===========================================================================
   14. CALENDAR  (.hv-cal / .hv-cal__day / .hv-cal__chip)
   7-col grid; chips colored by signal.
   =========================================================================== */
.hv-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-space-sm);
  margin-bottom: var(--hv-space-sm);
}

.hv-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--hv-space-xxs);
  margin-bottom: var(--hv-space-xxs);
}

.hv-cal-dow span {
  text-align: center;
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-semibold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--hv-ink-subtle);
}

.hv-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--hv-space-xxs);
}

.hv-cal__day {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-md);
  overflow: hidden;
}

.hv-cal__day.--empty {
  background: transparent;
  border-color: var(--hv-hairline-tertiary);
}

.hv-cal__day.--today,
.hv-cal__day--today {
  border-color: var(--hv-primary-focus);
  box-shadow: var(--hv-focus-ring);
}

/* Tiny "Today" tag in the cell corner so the marker reads even at a glance. */
.hv-cal__today-tag {
  align-self: flex-end;
  margin-top: -2px;
  font-size: 9px;
  font-weight: var(--hv-weight-semibold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--hv-primary-hover);
}

.hv-cal__num {
  font-size: var(--hv-caption-size);
  font-weight: var(--hv-weight-medium);
  color: var(--hv-ink-subtle);
  font-variant-numeric: tabular-nums;
}

.hv-cal__day.--today .hv-cal__num,
.hv-cal__day--today .hv-cal__num {
  color: var(--hv-primary-hover);
  font-weight: var(--hv-weight-semibold);
}

.hv-cal__chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 6px;
  border-radius: var(--hv-radius-sm);
  background: var(--hv-surface-2);
  border: 1px solid var(--hv-hairline);
  color: var(--hv-ink-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--hv-dur) var(--hv-ease),
    border-color var(--hv-dur) var(--hv-ease);
}

.hv-cal__chip:hover {
  background: var(--hv-surface-3);
  border-color: var(--hv-hairline-strong);
  color: var(--hv-ink);
}

.hv-cal__chip::before {
  content: "";
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: var(--hv-radius-pill);
  flex: 0 0 auto;
  background: var(--hv-ink-tertiary);
}
.hv-cal__chip.--high::before {
  background: var(--hv-signal-high);
}
.hv-cal__chip.--mid::before {
  background: var(--hv-signal-mid);
}
.hv-cal__chip.--none::before {
  background: var(--hv-signal-none);
}

/* Lead with the money: the profit value reads first, signal-colored, mono. */
.hv-cal__chip-profit {
  flex: 0 0 auto;
  font-family: var(--hv-font-mono);
  font-weight: var(--hv-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  color: var(--hv-ink);
}
.hv-cal__chip.--high .hv-cal__chip-profit {
  color: var(--hv-signal-high);
}
.hv-cal__chip.--mid .hv-cal__chip-profit {
  color: var(--hv-signal-mid);
}
.hv-cal__chip.--none .hv-cal__chip-profit {
  color: var(--hv-signal-none);
}

.hv-cal__chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hv-ink-subtle);
}

/* The day's top opportunity gets a touch more presence than the rest. */
.hv-cal__chip--top {
  background: var(--hv-surface-3);
}
.hv-cal__chip--top .hv-cal__chip-name {
  color: var(--hv-ink-muted);
}

.hv-cal__more {
  font-size: 11px;
  color: var(--hv-ink-subtle);
  padding: 0 6px;
}

@media (max-width: 767px) {
  .hv-cal__day {
    min-height: 64px;
  }
  /* Ultra-tight: keep the signal-colored profit (the decision), drop the name. */
  .hv-cal__today-tag {
    display: none;
  }
  .hv-cal__chip-name {
    display: none;
  }
  .hv-cal__chip:not(:has(.hv-cal__chip-profit)) .hv-cal__chip-name {
    /* a chip with no profit value still needs *something* visible — keep its
       name so the dot isn't orphaned on browsers supporting :has(). */
    display: inline;
  }
}

/* ===========================================================================
   15. DROPDOWN  (.hv-drop... wait — .hv-drop is the card. Menu = .hv-menu)
   Brief lists ".hv-drop" for both; we expose a menu surface under .hv-menu
   and keep .hv-drop for the drop card. (Dropdown surface = surface-3.)
   =========================================================================== */
.hv-menu {
  min-width: 180px;
  padding: var(--hv-space-xxs);
  background: var(--hv-surface-3);
  border: 1px solid var(--hv-hairline-strong);
  border-radius: var(--hv-radius-md);
  box-shadow: var(--hv-elev-overlay);
}

.hv-menu__item {
  display: flex;
  align-items: center;
  gap: var(--hv-space-xs);
  padding: var(--hv-space-xs) var(--hv-space-sm);
  border-radius: var(--hv-radius-sm);
  font-size: var(--hv-body-sm-size);
  color: var(--hv-ink-muted);
}

.hv-menu__item:hover {
  background: var(--hv-surface-4);
  color: var(--hv-ink);
}

/* ===========================================================================
   16. NOTICES / EMPTY STATES / DIVIDERS
   =========================================================================== */
.hv-notice {
  display: flex;
  gap: var(--hv-space-sm);
  padding: var(--hv-space-sm) var(--hv-space-md);
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-left: 2px solid var(--hv-ink-subtle);
  border-radius: var(--hv-radius-md);
  color: var(--hv-ink-muted);
  font-size: var(--hv-body-sm-size);
}

.hv-notice.--warn {
  border-left-color: var(--hv-signal-mid);
}
.hv-notice.--danger {
  border-left-color: var(--hv-signal-none);
}
.hv-notice.--accent {
  border-left-color: var(--hv-primary);
}

.hv-notice strong {
  color: var(--hv-ink);
}

/* Empty state — centered, generous, on surface-1. */
.hv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-xs);
  padding: var(--hv-space-xxl) var(--hv-space-lg);
  text-align: center;
  background: var(--hv-surface-1);
  border: 1px dashed var(--hv-hairline-strong);
  border-radius: var(--hv-radius-lg);
  color: var(--hv-ink-subtle);
}

.hv-empty__glyph {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--hv-radius-md);
  background: var(--hv-surface-3);
  color: var(--hv-ink-subtle);
  font-size: 18px;
}

.hv-empty__title {
  font-size: var(--hv-body-size);
  font-weight: var(--hv-weight-medium);
  color: var(--hv-ink);
}

.hv-divider {
  height: 1px;
  background: var(--hv-hairline);
  border: none;
  margin: var(--hv-space-lg) 0;
}

/* Section block (a labeled region inside main). */
.hv-section {
  margin-top: var(--hv-space-xl);
}
.hv-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hv-space-sm);
  margin-bottom: var(--hv-space-sm);
}

/* Inline cluster (e.g., chips/actions in a row). */
.hv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-space-xs);
}

/* ===========================================================================
   17. RESPONSIVE — sidebar becomes a drawer on mobile; grids step up.
   Mobile-first base is single-column / drawer; the lifts below restore the
   desktop shell. (Breakpoints from DESIGN.md.)
   =========================================================================== */

/* < 768: sidebar is an off-canvas top/left drawer toggled by the hamburger. */
@media (max-width: 767px) {
  .hv-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: calc(var(--hv-z-drawer) + 1);
    width: min(82vw, 300px);
    flex-basis: auto;
    overflow-y: auto;
    background: var(--hv-surface-1);
    border-right: 1px solid var(--hv-hairline-strong);
    transform: translateX(-100%);
    transition: transform var(--hv-dur) var(--hv-ease);
  }

  .hv-shell.is-drawer-open .hv-sidebar {
    transform: translateX(0);
  }

  .hv-shell.is-drawer-open .hv-scrim {
    display: block;
  }

  .hv-main {
    padding: var(--hv-space-md) var(--hv-space-sm) var(--hv-space-xxl);
  }
}

/* >= 768: the hamburger disappears; sidebar is part of the flow. */
@media (min-width: 768px) {
  .hv-nav-toggle {
    display: none;
  }
  .hv-scrim {
    display: none !important;
  }
  .hv-sidebar {
    position: sticky;
    top: var(--hv-topbar-h);
    height: calc(100vh - var(--hv-topbar-h));
    overflow-y: auto;
  }
  .hv-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hv-grid.--2up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* >= 1024: full density — 3-up card grids, wider stat rows. */
@media (min-width: 1024px) {
  .hv-main {
    padding: var(--hv-space-xl) var(--hv-space-lg) var(--hv-space-section);
  }
  .hv-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hv-grid.--3up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================================
   18. LOGIN  (centered card on canvas)
   =========================================================================== */
.hv-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--hv-space-lg);
  background:
    radial-gradient(
      120% 90% at 50% -10%,
      rgba(94, 105, 209, 0.08),
      transparent 60%
    ),
    var(--hv-canvas);
}

.hv-auth__card {
  width: 100%;
  max-width: 380px;
  padding: var(--hv-space-xl);
  background: var(--hv-surface-1);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-xl);
  box-shadow: var(--hv-elev-2), 0 24px 64px rgba(0, 0, 0, 0.5);
}

.hv-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--hv-space-xs);
  margin-bottom: var(--hv-space-lg);
}

.hv-auth__brand-name {
  font-size: var(--hv-subhead-size);
  font-weight: var(--hv-weight-semibold);
  letter-spacing: -0.4px;
  color: var(--hv-ink);
}

.hv-auth__title {
  font-size: var(--hv-headline-size);
  line-height: var(--hv-headline-line);
  letter-spacing: var(--hv-headline-track);
  font-weight: var(--hv-weight-semibold);
  margin-bottom: var(--hv-space-xxs);
}

.hv-auth__subtitle {
  font-size: var(--hv-body-sm-size);
  color: var(--hv-ink-subtle);
  margin-bottom: var(--hv-space-lg);
}

.hv-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--hv-space-sm);
  margin: var(--hv-space-md) 0;
  color: var(--hv-ink-tertiary);
  font-size: var(--hv-caption-size);
}
.hv-auth__divider::before,
.hv-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hv-hairline);
}

.hv-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-sm);
}

.hv-auth__footnote {
  margin-top: var(--hv-space-md);
  text-align: center;
  font-size: var(--hv-caption-size);
  color: var(--hv-ink-tertiary);
}

/* Google "G" mark for the sign-in button. */
.hv-gmark {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Password fallback is de-emphasized: collapsed behind a <details>. */
.hv-auth__fallback {
  margin-top: var(--hv-space-sm);
}
.hv-auth__fallback > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: var(--hv-caption-size);
  color: var(--hv-ink-subtle);
  padding: var(--hv-space-xs);
  border-radius: var(--hv-radius-sm);
  transition: color var(--hv-dur) var(--hv-ease);
}
.hv-auth__fallback > summary::-webkit-details-marker {
  display: none;
}
.hv-auth__fallback > summary:hover {
  color: var(--hv-ink);
}
.hv-auth__fallback[open] > summary {
  margin-bottom: var(--hv-space-sm);
}

/* ===========================================================================
   19. SMALL UTILITIES
   =========================================================================== */
.hv-flag {
  color: var(--hv-signal-none);
  font-weight: var(--hv-weight-semibold);
}
.hv-row-actions {
  display: inline-flex;
  gap: var(--hv-space-xxs);
  align-items: center;
}
.hv-inline-form {
  display: inline-flex;
  gap: var(--hv-space-xxs);
  align-items: center;
  margin: 0;
}
.hv-raw {
  font-family: var(--hv-font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow: auto;
  padding: var(--hv-space-sm);
  background: var(--hv-canvas);
  border: 1px solid var(--hv-hairline);
  border-radius: var(--hv-radius-md);
  color: var(--hv-ink-muted);
}
.hv-mt-0 { margin-top: 0; }
.hv-mt-sm { margin-top: var(--hv-space-sm); }
.hv-mt-md { margin-top: var(--hv-space-md); }
.hv-mt-lg { margin-top: var(--hv-space-lg); }
.hv-mb-md { margin-bottom: var(--hv-space-md); }