/**
 * Hippo Tracker ↔ House Hippo Adventures — style bridge
 * Phase 1: shell + site header
 * Phase 2: global cards, buttons, forms, tables, hero type
 * Phase 3: home, passport, map, admin dashboard polish
 */

/* ---- Legacy token sync (keeps var(--panel) etc. warm across the app) ---- */

body.hh-hha-shell {
  --bg: var(--hha-cream);
  --panel: var(--hha-kraft);
  --panel-2: var(--hha-cream-deep);
  --card-inner: var(--hha-paper);
  --text: var(--hha-ink);
  --text-muted: var(--hha-ink-soft);
  --muted: var(--hha-ink-soft);
  --accent: var(--hha-honey);
  --accent-red: #a0483a;
  --accent-green: #3d6b52;
  --leather: var(--hha-cocoa);
  --border: rgba(74, 54, 40, 0.14);
  --shadow: rgba(42, 34, 26, 0.12);
  --shadow-soft: var(--hha-shadow-sm);
  --shadow-card: var(--hha-shadow-sm);
  --r1: var(--hha-radius-sm);
  --r2: var(--hha-radius-md);
  --r3: var(--hha-radius-lg);
  --font: var(--hha-font-body);
}

body.hh-hha-shell.hha-page-bg {
  font-family: var(--hha-font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--hha-ink-soft);
  min-height: 100vh;
  isolation: isolate;
  background-color: #e6d9c4;
  background-image:
    radial-gradient(ellipse 110% 75% at 50% -12%, rgba(253, 249, 243, 0.92), transparent 58%),
    radial-gradient(ellipse 85% 65% at 0% 100%, rgba(184, 152, 110, 0.28), transparent 55%),
    radial-gradient(ellipse 75% 60% at 100% 8%, rgba(201, 147, 58, 0.16), transparent 52%),
    radial-gradient(ellipse 130% 95% at 50% 55%, transparent 42%, rgba(138, 115, 88, 0.09) 78%, rgba(108, 88, 64, 0.14) 100%),
    var(--hha-paper-noise),
    linear-gradient(
      172deg,
      #ddd0bc 0%,
      var(--hha-cream-deep) 20%,
      var(--hha-cream) 45%,
      var(--hha-paper) 72%,
      #f7efe4 100%
    );
  background-size:
    auto,
    auto,
    auto,
    auto,
    240px 240px,
    auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body.hh-hha-shell.hha-page-bg .hh-card-inner a:not([class*='hh-btn']):not(.hha-nav-insp) {
  color: var(--hha-map-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.hh-hha-shell.hha-page-bg .hh-card-inner a:not([class*='hh-btn']):not(.hha-nav-insp):hover {
  color: var(--hha-cocoa-mid);
}

body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card .hh-h1,
body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card .hh-h2,
body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card .hh-h3,
body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card h1,
body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card h2,
body.hh-hha-shell.hha-page-bg .hh-wrap > .hh-card h3 {
  font-family: var(--hha-font-display);
  color: var(--hha-ink);
  letter-spacing: -0.02em;
}

/* ---- Site header (replaces legacy .hh-topbar chrome) ---- */

.hh-site-header {
  position: relative;
  z-index: 2;
  margin-top: clamp(0.35rem, 1.5vw, 0.75rem);
  margin-bottom: clamp(1.45rem, 3.5vw, 2.15rem);
  padding: clamp(1.05rem, 2.6vw, 1.4rem) clamp(1rem, 2.8vw, 1.45rem)
    clamp(1.05rem, 2.4vw, 1.3rem);
  border-radius: var(--hha-radius-lg);
  border: 1px solid rgba(74, 54, 40, 0.11);
  background:
    radial-gradient(ellipse 115% 75% at 12% 0%, rgba(253, 249, 243, 0.94), transparent 55%),
    radial-gradient(ellipse 65% 50% at 95% 95%, rgba(201, 147, 58, 0.11), transparent 50%),
    linear-gradient(168deg, var(--hha-cream-bright) 0%, var(--hha-kraft) 42%, var(--hha-cream-deep) 100%);
  box-shadow: var(--hha-shadow-md), var(--hha-shadow-inset-paper);
  overflow: visible;
}

.hh-site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hha-paper-noise);
  opacity: 0.42;
  pointer-events: none;
}

.hh-site-header::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 28%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.hh-site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.65rem, 2vw, 1.15rem);
}

.hh-site-header__mast {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.6vw, 0.95rem);
  flex: 1 1 220px;
  min-width: 0;
  overflow: visible;
}

.hh-site-header__logo-link {
  display: block;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  margin-bottom: -0.85rem;
  line-height: 0;
  text-decoration: none;
  overflow: visible;
}

.hh-site-header__logo,
.hh-site-header__logo.hh-logo {
  width: clamp(88px, 12vw, 120px);
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  filter: drop-shadow(0 8px 16px rgba(42, 34, 26, 0.14));
}

.hh-site-header__brand-text {
  padding-bottom: 0.1rem;
  min-width: 0;
}

.hh-site-header__title {
  font-family: var(--hha-font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 0.5rem + 2.1vw, 1.32rem);
  letter-spacing: -0.02em;
  color: var(--hha-ink);
  line-height: 1.15;
}

.hh-site-header__eyebrow {
  font-family: var(--hha-font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hha-cocoa-mid);
  margin-top: 0.22rem;
}

.hh-site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.65rem;
  flex: 1 1 260px;
}

.hh-site-header__nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.05rem 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hh-site-header__nav-links > li {
  display: flex;
}

.hh-site-header__nav .hha-nav-insp {
  padding: 0.48rem 0.18rem 0.42rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.hh-site-header__nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.hh-site-header__nav-actions .hh-btn,
.hh-site-header__nav-actions .hh-btn-secondary,
.hh-site-header__nav-actions .hh-btn-primary {
  font-family: var(--hha-font-body);
  font-size: 0.84rem;
  padding: 0.58rem 0.95rem;
  min-height: 38px;
  box-shadow: var(--hha-shadow-sm);
}

.hh-site-header__nav-actions .hh-btn-primary {
  background: linear-gradient(
    165deg,
    var(--hha-gold-light) 0%,
    var(--hha-honey) 45%,
    var(--hha-gold) 100%
  );
  border-color: color-mix(in srgb, var(--hha-gold) 55%, var(--hha-cocoa));
  color: #fffdf8;
}

.hh-site-header__nav-actions .hh-btn-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 24px rgba(201, 147, 58, 0.22), var(--hha-shadow-inset-paper);
}

.hh-site-header__nav-actions .hh-btn-secondary,
.hh-site-header__nav-actions .hh-btn.hh-btn-secondary {
  background: linear-gradient(180deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 34%, transparent);
  color: var(--hha-ink);
}

.hh-site-header__nav-actions .hh-btn-secondary:hover,
.hh-site-header__nav-actions .hh-btn.hh-btn-secondary:hover {
  border-color: color-mix(in srgb, var(--hha-honey) 42%, var(--hha-tan-deep));
  background: var(--hha-white);
}

.hh-site-header__nav-actions .hh-pill {
  font-family: var(--hha-font-body);
  font-size: 0.78rem;
  color: var(--hha-ink-soft);
  background: rgba(254, 251, 246, 0.72);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
}

@media (max-width: 900px) {
  .hh-site-header__nav {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .hh-site-header__nav-links {
    justify-content: flex-start;
  }

  .hh-site-header__nav-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .hh-wrap > .hh-site-header {
    border-radius: var(--hha-radius-md);
    padding-top: clamp(1.15rem, 3.5vw, 1.35rem);
  }

  .hh-site-header__mast {
    flex: 1 1 100%;
    align-items: flex-start;
  }

  .hh-site-header__logo-link {
    margin-bottom: 0;
    align-self: flex-start;
  }

  .hh-site-header__logo,
  .hh-site-header__logo.hh-logo {
    width: clamp(72px, 20vw, 92px);
    height: auto !important;
    max-height: none !important;
  }

  .hh-site-header__brand-text {
    padding-top: 0.15rem;
  }

  .hh-site-header__nav .hha-nav-insp {
    font-size: 0.84rem;
    padding: 0.42rem 0.12rem;
  }

  .hh-site-header__nav-actions .hh-btn,
  .hh-site-header__nav-actions .hh-btn-secondary,
  .hh-site-header__nav-actions .hh-btn-primary {
    min-height: 44px;
    font-size: 0.84rem;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =============================================================================
   Phase 2 — global cards, buttons, forms, tables, hero type
   Scoped to body.hh-hha-shell; does not touch .leaflet-* map tiles/controls.
   ============================================================================= */

/* ---- Main content shell card (layout wrapper) ---- */

body.hh-hha-shell .hh-wrap > .hh-card {
  position: relative;
  margin-top: 1.1rem;
  border: 1px solid rgba(74, 54, 40, 0.1);
  border-radius: var(--hha-radius-lg);
  background: linear-gradient(
    165deg,
    var(--hha-cream-bright) 0%,
    var(--hha-paper) 40%,
    color-mix(in srgb, var(--hha-cream-deep) 48%, var(--hha-paper)) 100%
  );
  box-shadow: var(--hha-shadow-md), var(--hha-shadow-inset-paper);
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 30%, transparent);
  outline-offset: 2px;
  overflow: visible;
}

body.hh-hha-shell .hh-wrap > .hh-card > .hh-card-inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.2rem, 3vw, 1.65rem);
}

body.hh-hha-shell .hh-wrap > .hh-card > .hh-card-inner::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--hha-radius-lg) - 8px);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 16%, transparent);
  pointer-events: none;
  z-index: 0;
}

body.hh-hha-shell .hh-wrap > .hh-card > .hh-card-inner > * {
  position: relative;
  z-index: 1;
}

/* Nested panels inside page content */
body.hh-hha-shell .hh-card-inner .hh-card {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.25rem);
  border: 1px solid rgba(74, 54, 40, 0.1);
  border-radius: var(--hha-radius-md);
  background: linear-gradient(165deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  outline: none;
  overflow: hidden;
}

body.hh-hha-shell .hh-card-inner .hh-card-inner .hh-card {
  padding: 1rem;
}

/* ---- Hero / titles ---- */

body.hh-hha-shell .hh-kicker {
  font-family: var(--hha-font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hha-cocoa-mid);
  opacity: 1;
}

body.hh-hha-shell .hh-h1,
body.hh-hha-shell .hh-card-inner h1 {
  font-family: var(--hha-font-display);
  font-weight: 600;
  color: var(--hha-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body.hh-hha-shell .hh-h2,
body.hh-hha-shell .hh-card-inner h2 {
  font-family: var(--hha-font-display);
  font-weight: 600;
  color: var(--hha-ink);
  letter-spacing: -0.015em;
}

body.hh-hha-shell .hh-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--hha-ink-soft);
}

body.hh-hha-shell .hh-hero {
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-stitch) 85%, transparent);
}

body.hh-hha-shell .hh-muted {
  color: var(--hha-grey-mist);
}

body.hh-hha-shell .hh-foot {
  font-family: var(--hha-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--hha-grey-mist);
}

/* ---- Pills / chips ---- */

body.hh-hha-shell .hh-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  font-family: var(--hha-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hha-ink-soft);
  background: rgba(255, 252, 248, 0.82);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 26%, transparent);
  border-radius: var(--hha-radius-pill);
  box-shadow: var(--hha-shadow-sm);
}

body.hh-hha-shell .hh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hha-honey);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hha-honey) 25%, transparent);
}

body.hh-hha-shell .hh-approved-pill {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hha-stamp-red);
  border: 2px solid var(--hha-stamp-border);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  background: rgba(255, 250, 245, 0.65);
}

/* ---- Buttons (global; header nav-actions keep Phase 1 sizing) ---- */

body.hh-hha-shell .hh-btn,
body.hh-hha-shell .hh-btn-secondary,
body.hh-hha-shell a.hh-btn,
body.hh-hha-shell button.hh-btn,
body.hh-hha-shell input.hh-btn,
body.hh-hha-shell input[type="submit"].hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--hha-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--hha-radius-sm);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

body.hh-hha-shell .hh-btn,
body.hh-hha-shell .hh-btn-secondary {
  background: linear-gradient(180deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 34%, transparent);
  color: var(--hha-ink);
}

body.hh-hha-shell .hh-btn:hover:not(:disabled):not([aria-disabled="true"]),
body.hh-hha-shell .hh-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
body.hh-hha-shell a.hh-btn:hover,
body.hh-hha-shell button.hh-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

body.hh-hha-shell .hh-btn:active:not(:disabled):not([aria-disabled="true"]),
body.hh-hha-shell .hh-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
body.hh-hha-shell button.hh-btn:active:not(:disabled) {
  transform: translateY(0);
}

body.hh-hha-shell .hh-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.hh-btn-primary):not(.hh-btn-ghost):not(.hh-btn-warm):not(.hh-btn-admin):not(.hh-btn-danger),
body.hh-hha-shell .hh-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]):not(.hh-btn-primary):not(.hh-btn-ghost):not(.hh-btn-warm):not(.hh-btn-admin):not(.hh-btn-danger) {
  background: var(--hha-white);
  border-color: color-mix(in srgb, var(--hha-honey) 42%, var(--hha-tan-deep));
  box-shadow:
    0 12px 26px rgba(42, 34, 26, 0.09),
    var(--hha-shadow-inset-paper);
}

body.hh-hha-shell .hh-btn-primary {
  border: 1px solid color-mix(in srgb, var(--hha-gold) 55%, var(--hha-cocoa));
  background: linear-gradient(
    165deg,
    var(--hha-gold-light) 0%,
    var(--hha-honey) 45%,
    var(--hha-gold) 100%
  );
  color: #fffdf8;
  text-shadow: 0 1px 0 rgba(42, 34, 26, 0.16);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
}

body.hh-hha-shell .hh-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.05);
  border-color: color-mix(in srgb, var(--hha-gold-light) 65%, var(--hha-cocoa));
  box-shadow:
    0 16px 32px rgba(201, 147, 58, 0.26),
    0 5px 12px rgba(42, 34, 26, 0.1),
    var(--hha-shadow-inset-paper);
}

body.hh-hha-shell .hh-btn-ghost {
  background: rgba(254, 251, 246, 0.5);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  color: var(--hha-cocoa-mid);
  box-shadow: none;
  font-weight: 500;
}

body.hh-hha-shell .hh-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--hha-cream-bright);
  color: var(--hha-ink);
  border-color: color-mix(in srgb, var(--hha-honey) 35%, var(--hha-tan-deep));
  box-shadow: 0 10px 22px rgba(42, 34, 26, 0.07);
  filter: none;
}

body.hh-hha-shell .hh-btn-warm,
body.hh-hha-shell .hh-btn-admin {
  border: 1px solid color-mix(in srgb, var(--hha-stamp-border) 75%, var(--hha-cocoa));
  background: linear-gradient(165deg, #c85f50 0%, #a84a3e 55%, #8f3f36 100%);
  color: #fffaf7;
  text-shadow: 0 1px 0 rgba(42, 34, 26, 0.14);
}

body.hh-hha-shell .hh-btn-warm:hover:not(:disabled),
body.hh-hha-shell .hh-btn-admin:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(143, 63, 54, 0.22);
}

body.hh-hha-shell .hh-btn-danger {
  border: 1px solid color-mix(in srgb, #7a2e28 70%, var(--hha-cocoa));
  background: linear-gradient(165deg, #d46358 0%, #b54a42 50%, #943830 100%);
  color: #fffaf7;
  text-shadow: 0 1px 0 rgba(58, 22, 18, 0.2);
}

body.hh-hha-shell .hh-btn-danger:hover:not(:disabled) {
  filter: brightness(1.04);
  border-color: color-mix(in srgb, #943830 85%, #5c1e18);
  box-shadow:
    0 12px 26px rgba(148, 56, 48, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.hh-hha-shell .hh-btn:disabled,
body.hh-hha-shell button.hh-btn:disabled,
body.hh-hha-shell input.hh-btn:disabled,
body.hh-hha-shell .hh-btn[aria-disabled="true"],
body.hh-hha-shell span.hh-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  filter: saturate(0.75);
  box-shadow: none;
  background: color-mix(in srgb, var(--hha-cream-deep) 65%, var(--hha-paper));
  border-color: color-mix(in srgb, var(--hha-tan-deep) 18%, transparent);
  color: color-mix(in srgb, var(--hha-ink) 55%, var(--hha-cocoa-mid));
}

body.hh-hha-shell .hh-btn-primary:disabled,
body.hh-hha-shell .hh-btn-primary[aria-disabled="true"] {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--hha-gold-light) 55%, var(--hha-cream-deep)),
    color-mix(in srgb, var(--hha-honey) 50%, var(--hha-cream-deep))
  );
  color: color-mix(in srgb, #fffdf8 70%, var(--hha-cocoa-mid));
}

body.hh-hha-shell .hh-btn-danger:disabled {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #d46358 45%, var(--hha-cream-deep)),
    color-mix(in srgb, #943830 40%, var(--hha-cream-deep))
  );
}

body.hh-hha-shell .hh-btn:focus-visible,
body.hh-hha-shell .hh-btn-secondary:focus-visible,
body.hh-hha-shell a.hh-btn:focus-visible,
body.hh-hha-shell button.hh-btn:focus-visible,
body.hh-hha-shell input.hh-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hha-gold-light) 72%, transparent);
  outline-offset: 3px;
}

body.hh-hha-shell .hh-btn-secondary:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
}

body.hh-hha-shell .hh-btn-danger:focus-visible {
  outline-color: color-mix(in srgb, #d46358 55%, var(--hha-gold-light));
}

body.hh-hha-shell .hh-btn-sm {
  font-size: 0.84rem;
  padding: 0.5rem 0.9rem;
  min-height: 2.25rem;
}

/* ---- Forms ---- */

body.hh-hha-shell .hh-form {
  gap: 0.85rem;
}

body.hh-hha-shell .hh-label {
  font-family: var(--hha-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hha-cocoa-mid);
}

body.hh-hha-shell .hh-help {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--hha-grey-mist);
  margin-top: 0.25rem;
}

body.hh-hha-shell .hh-input,
body.hh-hha-shell .hh-form select,
body.hh-hha-shell textarea.hh-input {
  font-family: var(--hha-font-body);
  padding: 0.72rem 0.85rem;
  border-radius: var(--hha-radius-sm);
  border: 1px solid rgba(74, 54, 40, 0.16);
  background: linear-gradient(180deg, var(--hha-white) 0%, var(--hha-cream-bright) 100%);
  color: var(--hha-ink);
  box-shadow: inset 0 1px 2px rgba(42, 34, 26, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body.hh-hha-shell .hh-input:focus,
body.hh-hha-shell .hh-form select:focus,
body.hh-hha-shell textarea.hh-input:focus {
  border-color: color-mix(in srgb, var(--hha-honey) 55%, var(--hha-tan-deep));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hha-gold-light) 28%, transparent),
    inset 0 1px 2px rgba(42, 34, 26, 0.04);
  outline: none;
}

body.hh-hha-shell .hh-input:focus-visible,
body.hh-hha-shell textarea.hh-input:focus-visible {
  outline: 2px dashed color-mix(in srgb, var(--hha-honey) 45%, transparent);
  outline-offset: 2px;
}

body.hh-hha-shell .hh-form input[type='file'].hh-input::file-selector-button {
  border-radius: var(--hha-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 32%, transparent);
  background: linear-gradient(180deg, var(--hha-paper), var(--hha-kraft));
  color: var(--hha-ink);
}

body.hh-hha-shell .hh-password-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hha-gold-light) 65%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Details / collapsible panels */
body.hh-hha-shell .hh-details-summary {
  font-family: var(--hha-font-body);
  color: var(--hha-ink);
}

body.hh-hha-shell .hh-details.hh-details--action > .hh-details-summary.hh-details-summary--button {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 1rem;
  border-radius: var(--hha-radius-sm);
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 32%, transparent);
  background: linear-gradient(180deg, var(--hha-paper), var(--hha-cream-bright));
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

body.hh-hha-shell .hh-details.hh-details--action > .hh-details-summary--button:hover {
  border-color: color-mix(in srgb, var(--hha-honey) 42%, var(--hha-tan-deep));
  background: var(--hha-white);
  box-shadow: 0 10px 22px rgba(42, 34, 26, 0.07);
  transform: translateY(-1px);
}

body.hh-hha-shell .hh-details.hh-details--action > .hh-details-summary--button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hha-gold-light) 72%, transparent);
  outline-offset: 3px;
}

body.hh-hha-shell .hh-details.hh-details--action[open] > .hh-details-summary--button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: none;
  transform: none;
}

body.hh-hha-shell .hh-details.hh-details--action[open] > .hh-details-content {
  border-color: rgba(74, 54, 40, 0.12);
  border-top: 1px dashed var(--hha-stitch);
  background: var(--hha-paper);
}

/* ---- Admin tables (readable, not decorative) ---- */

body.hh-hha-shell table.hh-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hha-font-body);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--hha-ink-soft);
  background: var(--hha-paper);
  border-radius: var(--hha-radius-sm);
  overflow: hidden;
  box-shadow: var(--hha-shadow-sm);
}

body.hh-hha-shell table.hh-table th,
body.hh-hha-shell table.hh-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(74, 54, 40, 0.08);
}

body.hh-hha-shell table.hh-table th {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hha-cocoa-mid);
  background: linear-gradient(180deg, var(--hha-kraft), var(--hha-cream-deep));
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
}

body.hh-hha-shell table.hh-table tbody tr:nth-child(even) {
  background: rgba(253, 249, 243, 0.55);
}

body.hh-hha-shell table.hh-table tbody tr:hover {
  background: rgba(255, 254, 251, 0.95);
}

body.hh-hha-shell .hh-admin-table-wrap {
  border: 1px solid rgba(74, 54, 40, 0.08);
  border-radius: var(--hha-radius-sm);
  background: var(--hha-paper);
}

body.hh-hha-shell .hh-admin-stat-card {
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 24%, transparent);
  background: linear-gradient(165deg, var(--hha-paper), var(--hha-cream-bright));
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
}

/* ---- Map shell only (not Leaflet internals) ---- */

body.hh-hha-shell .hh-map-shell {
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 28%, transparent);
  border-radius: var(--hha-radius-md);
  overflow: hidden;
  box-shadow: var(--hha-shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  background: var(--hha-cream-deep);
}

body.hh-hha-shell .hh-map-shell .hh-map,
body.hh-hha-shell .hh-map-shell .leaflet-container {
  border-radius: 0;
}

/* List rows on map page — light travel card, no layout change */
body.hh-hha-shell .hh-hippo-row {
  border-radius: var(--hha-radius-md);
  border: 1px solid rgba(74, 54, 40, 0.1);
  background: linear-gradient(165deg, var(--hha-paper), var(--hha-cream-bright));
  box-shadow: var(--hha-shadow-sm);
}

body.hh-hha-shell .hh-hippo-row:hover {
  border-color: color-mix(in srgb, var(--hha-honey) 40%, var(--hha-tan-deep));
  background: var(--hha-white);
  box-shadow: 0 8px 20px rgba(42, 34, 26, 0.08);
}

body.hh-hha-shell .hh-global-footer .hh-footer-inner {
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  background: linear-gradient(165deg, rgba(254, 251, 246, 0.92), rgba(235, 225, 212, 0.75));
  box-shadow: var(--hha-shadow-sm);
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-wrap > .hh-card {
    border-radius: var(--hha-radius-md);
  }

  body.hh-hha-shell .hh-btn,
  body.hh-hha-shell .hh-btn-secondary {
    min-height: 44px;
  }
}

/* Header auth buttons: keep Phase 1 compact sizing after global button rules */
body.hh-hha-shell .hh-site-header__nav-actions .hh-btn,
body.hh-hha-shell .hh-site-header__nav-actions .hh-btn-secondary,
body.hh-hha-shell .hh-site-header__nav-actions .hh-btn-primary {
  font-size: 0.84rem;
  padding: 0.58rem 0.95rem;
  min-height: 38px;
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-site-header__nav-actions .hh-btn,
  body.hh-hha-shell .hh-site-header__nav-actions .hh-btn-secondary,
  body.hh-hha-shell .hh-site-header__nav-actions .hh-btn-primary {
    min-height: 44px;
    font-size: 0.86rem;
  }
}

/* =============================================================================
   Phase 3 — page-level polish (home, passport, map, admin dashboard)
   ============================================================================= */

/* ---- Home ---- */

body.hh-hha-shell .hh-page-home .hh-home-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  padding: clamp(1.1rem, 3vw, 1.65rem);
  margin-bottom: 0.5rem;
  border-radius: var(--hha-radius-lg);
  border: 1px solid rgba(74, 54, 40, 0.1);
  background:
    radial-gradient(ellipse 90% 70% at 88% 12%, rgba(201, 147, 58, 0.12), transparent 52%),
    linear-gradient(168deg, var(--hha-cream-bright) 0%, var(--hha-paper) 55%, var(--hha-kraft) 100%);
  box-shadow: var(--hha-shadow-md), var(--hha-shadow-inset-paper);
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 26%, transparent);
  outline-offset: 2px;
  overflow: hidden;
}

body.hh-hha-shell .hh-page-home .hh-home-hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hha-paper-noise);
  opacity: 0.38;
  pointer-events: none;
}

body.hh-hha-shell .hh-page-home .hh-home-route-accent {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  left: auto;
  margin: 0;
  max-width: 140px;
  opacity: 0.4;
  transform: rotate(-4deg);
}

body.hh-hha-shell .hh-page-home .hh-home-chip {
  margin-bottom: 0.55rem;
}

body.hh-hha-shell .hh-page-home .hh-home-hero-text,
body.hh-hha-shell .hh-page-home .hh-home-hero-art {
  position: relative;
  z-index: 1;
}

body.hh-hha-shell .hh-page-home .hh-home-passport-img {
  filter: drop-shadow(0 14px 28px rgba(42, 34, 26, 0.14));
  transform: rotate(-3deg);
  max-width: min(100%, 320px);
  margin-inline: auto;
  display: block;
}

body.hh-hha-shell .hh-page-home .hh-home-safety {
  padding: 0.55rem 0.65rem;
  border-left: 2px dashed color-mix(in srgb, var(--hha-honey) 45%, transparent);
  background: rgba(255, 252, 248, 0.45);
  border-radius: 0 var(--hha-radius-sm) var(--hha-radius-sm) 0;
}

body.hh-hha-shell .hh-page-home .hh-home-steps-route {
  margin: 0.5rem auto 1rem;
  opacity: 0.42;
}

body.hh-hha-shell .hh-page-home .hh-passport-steps-section .hh-h2 {
  margin-bottom: 0.85rem;
}

body.hh-hha-shell .hh-page-home .hh-passport-step {
  position: relative;
  border: 1px solid rgba(74, 54, 40, 0.1);
  border-radius: var(--hha-radius-md);
  background: linear-gradient(165deg, var(--hha-paper), var(--hha-cream-bright));
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  outline: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  outline-offset: 2px;
  padding: 0.85rem 0.75rem 0.85rem 2.75rem;
}

body.hh-hha-shell .hh-page-home .hh-passport-step .hh-step-num {
  position: absolute;
  left: 0.65rem;
  top: 0.75rem;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--hha-cocoa);
  background: linear-gradient(165deg, var(--hha-gold-light), var(--hha-honey));
  box-shadow: 0 2px 6px rgba(201, 147, 58, 0.25);
}

body.hh-hha-shell .hh-page-home .hh-passport-step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--hha-ink-soft);
}

body.hh-hha-shell .hh-page-home .hh-home-bottom-cta {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--hha-radius-md);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 24%, transparent);
  background: linear-gradient(180deg, rgba(254, 251, 246, 0.9), rgba(233, 220, 200, 0.55));
}

@media (min-width: 840px) {
  body.hh-hha-shell .hh-page-home .hh-home-hero-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(200px, 0.85fr);
    align-items: center;
  }
}

/* ---- Map page ---- */

body.hh-hha-shell .hh-page-map .hh-map-hero-panel {
  position: relative;
  padding-bottom: 0.65rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-stitch) 90%, transparent);
}

body.hh-hha-shell .hh-page-map .hh-map-chip {
  margin-bottom: 0.5rem;
}

body.hh-hha-shell .hh-page-map .hh-map-route-accent {
  margin: 0.65rem 0 0.5rem;
  opacity: 0.45;
}

body.hh-hha-shell .hh-page-map .hh-map-page-panel {
  position: relative;
}

body.hh-hha-shell .hh-page-map .hh-map-panel-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.75rem;
}

body.hh-hha-shell .hh-page-map .hh-map-pin-icon {
  color: var(--hha-honey);
}

body.hh-hha-shell .hh-page-map .hh-map-list-divider {
  margin: 1.15rem 0 1rem;
  opacity: 0.4;
}

body.hh-hha-shell .hh-page-map .hh-map-cards .hh-hippo-row {
  outline: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 14%, transparent);
  outline-offset: 1px;
}

body.hh-hha-shell .hh-page-map .hh-map-page-panel > .hh-muted {
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

body.hh-hha-shell .hh-page-map .hh-pagination {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--hha-stitch);
}

/* ---- Passport page ---- */

body.hh-hha-shell .hh-page-passport .hh-passport-hero-panel {
  margin-bottom: 0.5rem;
}

body.hh-hha-shell .hh-page-passport .hh-passport-sheet {
  position: relative;
  padding: clamp(1rem, 2.8vw, 1.35rem);
  border-radius: var(--hha-radius-lg);
  border: 1px solid rgba(74, 54, 40, 0.11);
  background:
    radial-gradient(ellipse 80% 55% at 100% 0%, rgba(201, 147, 58, 0.1), transparent 50%),
    linear-gradient(168deg, var(--hha-cream-bright) 0%, var(--hha-paper) 48%, var(--hha-kraft) 100%);
  box-shadow: var(--hha-shadow-md), var(--hha-shadow-inset-paper);
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 28%, transparent);
  outline-offset: 2px;
  overflow: visible;
}

body.hh-hha-shell .hh-page-passport .hh-passport-sheet::after {
  content: '';
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  width: 52px;
  height: 52px;
  border: 2px solid var(--hha-stamp-border);
  border-radius: 50%;
  opacity: 0.22;
  transform: rotate(-12deg);
  pointer-events: none;
}

body.hh-hha-shell .hh-page-passport .hh-passport-hero-chip {
  margin-bottom: 0.45rem;
}

body.hh-hha-shell .hh-page-passport .hh-profile-photo-img {
  border: 3px solid rgba(255, 252, 248, 0.9);
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 32%, transparent);
  outline-offset: 3px;
  box-shadow: var(--hha-shadow-md);
}

body.hh-hha-shell .hh-page-passport .hh-profile-photo-placeholder {
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 28%, transparent);
  outline-offset: 2px;
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-sheet {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--hha-radius-sm);
  background: rgba(255, 252, 248, 0.62);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 20%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-row {
  align-items: center;
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-label.hha-tag {
  flex-shrink: 0;
  margin-right: 0.35rem;
}

body.hh-hha-shell .hh-page-passport .hh-passport-code-stamp {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  transform: rotate(-5deg);
}

body.hh-hha-shell .hh-page-passport .hh-passport-status-value {
  font-weight: 600;
  text-transform: capitalize;
  color: var(--hha-cocoa-mid);
}

body.hh-hha-shell .hh-page-passport .hh-passport-id-lede {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--hha-stitch);
  font-size: 0.95rem;
  line-height: 1.55;
}

body.hh-hha-shell .hh-page-passport .hh-passport-deco {
  filter: drop-shadow(0 6px 12px rgba(42, 34, 26, 0.12));
  opacity: 0.92;
}

body.hh-hha-shell .hh-page-passport .hh-journey-map-card {
  outline: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  outline-offset: 2px;
}

body.hh-hha-shell .hh-page-passport .hh-timeline-feed--passport > .hh-h2 {
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-stitch) 85%, transparent);
  margin-bottom: 0.85rem;
}

body.hh-hha-shell .hh-page-passport .hh-timeline-card--journal {
  border-radius: var(--hha-radius-md);
  outline: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 24%, transparent);
  outline-offset: 2px;
  background: linear-gradient(165deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal {
  margin-bottom: 0.65rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat {
  padding: 0.5rem;
  border-radius: var(--hha-radius-md);
  background: linear-gradient(165deg, var(--hha-cream-bright), var(--hha-paper));
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 36%, transparent);
  outline-offset: 2px;
  transform: rotate(-1.25deg);
  box-shadow: var(--hha-shadow-sm);
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  border-radius: calc(var(--hha-radius-md) - 6px);
  pointer-events: none;
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat {
  position: relative;
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: var(--hha-radius-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 54, 40, 0.06);
}

body.hh-hha-shell .hh-page-passport .hh-timeline-meta-stack {
  padding-top: 0.15rem;
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 70%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-react-bar {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 55%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-passport-guest-cta {
  border: 1px dashed color-mix(in srgb, var(--hha-honey) 35%, var(--hha-tan-deep));
  background: linear-gradient(165deg, rgba(255, 252, 248, 0.95), rgba(245, 235, 224, 0.75));
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-page-passport .hh-passport-sheet {
    padding: 0.85rem;
  }

  body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat {
    transform: none;
  }
}

/* ---- Admin dashboard (light) ---- */

body.hh-hha-shell .hh-page-admin .hh-admin-hero-panel {
  margin-bottom: 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--hha-stitch) 80%, transparent);
}

body.hh-hha-shell .hh-page-admin .hh-admin-chip {
  margin-bottom: 0.45rem;
}

body.hh-hha-shell .hh-page-admin .hh-admin-nav-card {
  margin-bottom: 1rem;
}

body.hh-hha-shell .hh-page-admin .hh-admin-dash-heading {
  margin-top: 1.35rem;
  padding-top: 0.25rem;
  font-size: clamp(1rem, 0.5rem + 1.5vw, 1.2rem);
}

body.hh-hha-shell .hh-page-admin .hh-admin-dash-heading:first-child {
  margin-top: 0.5rem;
}

body.hh-hha-shell .hh-page-admin .hh-admin-top-paths-card {
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 20%, transparent);
  background: var(--hha-paper);
}

/* Phase 4A — header/logo clipping (shell only) */

body.hh-hha-shell .hh-wrap > .hh-card {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   Phase 4B — My Hippos cards, map directory, passport journal meta
   ============================================================================= */

/* ---- Passport-style list cards (My Hippos + map directory) ---- */

body.hh-hha-shell .hh-passport-entry-card,
body.hh-hha-shell .hh-map-directory-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge badge"
    "thumb info";
  align-items: start;
  gap: 0.55rem 1rem;
  padding: clamp(0.9rem, 2.4vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--hha-tan-deep) 14%, transparent);
  background:
    radial-gradient(ellipse 85% 60% at 100% 0%, rgba(201, 147, 58, 0.07), transparent 55%),
    linear-gradient(168deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

body.hh-hha-shell .hh-passport-entry-card:hover,
body.hh-hha-shell .hh-map-directory-card:hover {
  border-color: color-mix(in srgb, var(--hha-honey) 42%, var(--hha-tan-deep));
  box-shadow: 0 10px 24px rgba(42, 34, 26, 0.1);
  transform: translateY(-1px);
}

body.hh-hha-shell .hh-passport-entry-chip,
body.hh-hha-shell .hh-map-entry-pin {
  grid-area: badge;
  align-self: start;
  margin-bottom: 0.1rem;
}

body.hh-hha-shell .hh-passport-entry-card .hh-hippo-avatar,
body.hh-hha-shell .hh-map-directory-card .hh-hippo-avatar {
  grid-area: thumb;
  width: clamp(4.5rem, 12vw, 5.25rem);
  height: clamp(4.5rem, 12vw, 5.25rem);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.hh-hha-shell .hh-page-map .hh-map-directory-card .hh-hippo-avatar {
  width: clamp(4.75rem, 13vw, 5.5rem);
  height: clamp(4.75rem, 13vw, 5.5rem);
}

body.hh-hha-shell .hh-passport-entry-card .hh-hippo-info,
body.hh-hha-shell .hh-map-directory-card .hh-hippo-info {
  grid-area: info;
  min-width: 0;
}

body.hh-hha-shell .hh-passport-entry-thumb,
body.hh-hha-shell .hh-map-entry-thumb {
  width: 100%;
  height: 100%;
}

body.hh-hha-shell .hh-passport-entry-thumb__mat {
  width: 100%;
  height: 100%;
  padding: 0.3rem;
  border-radius: var(--hha-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--hha-stitch) 85%, transparent);
  background: linear-gradient(165deg, var(--hha-white), var(--hha-cream-deep));
  box-shadow:
    var(--hha-shadow-sm),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  transform: rotate(-1.25deg);
}

body.hh-hha-shell .hh-passport-entry-thumb__mat .hh-hippo-thumb {
  width: 100%;
  height: 100%;
  min-height: 4rem;
  border-radius: calc(var(--hha-radius-sm) - 2px);
  border: 1px solid rgba(74, 54, 40, 0.08);
  background: var(--hha-cream-bright);
  overflow: hidden;
}

body.hh-hha-shell .hh-passport-entry-thumb__mat .hh-hippo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.hh-hha-shell .hh-passport-entry-thumb__mat .hh-hippo-thumb--emoji {
  font-size: clamp(1.65rem, 4vw, 2rem);
}

body.hh-hha-shell .hh-passport-entry-code {
  font-family: var(--hha-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.hh-hha-shell .hh-myhippos-list {
  gap: clamp(0.75rem, 2vw, 1rem);
}

body.hh-hha-shell .hh-myhippos-list .hh-passport-entry-card {
  min-height: 7.5rem;
}

body.hh-hha-shell .hh-page-map .hh-map-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.hh-hha-shell .hh-page-map .hh-map-cards .hh-map-directory-card {
  outline: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 16%, transparent);
  outline-offset: 2px;
}

/* ---- Passport journal timeline metadata ---- */

body.hh-hha-shell .hh-page-passport .hh-journal-entry {
  border: 1px solid color-mix(in srgb, var(--hha-tan-deep) 12%, transparent);
  background: linear-gradient(168deg, var(--hha-paper) 0%, var(--hha-cream-bright) 92%);
}

body.hh-hha-shell .hh-page-passport .hh-journal-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 70%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-journal-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  padding: 0.4rem 0;
}

body.hh-hha-shell .hh-page-passport .hh-journal-meta-row + .hh-journal-meta-row {
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 45%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-journal-meta-label {
  flex: 0 0 auto;
}

body.hh-hha-shell .hh-page-passport .hh-journal-meta-value {
  flex: 1 1 12rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--hha-ink);
}

body.hh-hha-shell .hh-page-passport .hh-journal-footer {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 55%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-journal-react-bar {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

body.hh-hha-shell .hh-page-passport .hh-journal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, var(--hha-stitch) 40%, transparent);
}

body.hh-hha-shell .hh-page-passport .hh-journal-actions .hh-btn-danger {
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-passport-entry-card,
  body.hh-hha-shell .hh-map-directory-card {
    gap: 0.5rem 0.75rem;
  }

  body.hh-hha-shell .hh-passport-entry-thumb__mat {
    transform: none;
  }
}

/* =============================================================================
   Button pass — reactions, pagination, uploads, admin actions (controls only)
   ============================================================================= */

/* Reaction tokens (scrapbook pill style) */
body.hh-hha-shell .hh-react-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}

body.hh-hha-shell .hh-react-form {
  margin: 0;
  display: inline;
}

body.hh-hha-shell .hh-react-btn,
body.hh-hha-shell a.hh-react-btn,
body.hh-hha-shell button.hh-react-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 2.35rem;
  min-width: 2.65rem;
  padding: 0.38rem 0.72rem;
  border-radius: var(--hha-radius-pill);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 24%, transparent);
  background: linear-gradient(165deg, var(--hha-cream-bright) 0%, var(--hha-paper) 100%);
  color: var(--hha-ink);
  font-family: var(--hha-font-body);
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    var(--hha-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    transform 0.18s cubic-bezier(0.34, 1.1, 0.64, 1),
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

body.hh-hha-shell .hh-react-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--hha-honey) 48%, var(--hha-tan-deep));
  background: var(--hha-white);
  box-shadow: 0 8px 18px rgba(42, 34, 26, 0.08);
}

body.hh-hha-shell .hh-react-btn--on {
  border-style: solid;
  border-color: color-mix(in srgb, var(--hha-honey) 58%, var(--hha-tan-deep));
  background: color-mix(in srgb, var(--hha-honey) 14%, var(--hha-paper));
  box-shadow:
    inset 0 0 0 1px rgba(201, 147, 58, 0.22),
    0 4px 12px rgba(201, 147, 58, 0.12);
}

body.hh-hha-shell .hh-react-btn--anon {
  opacity: 0.88;
}

body.hh-hha-shell .hh-react-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

body.hh-hha-shell .hh-react-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hha-gold-light) 70%, transparent);
  outline-offset: 2px;
}

body.hh-hha-shell .hh-react-n {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hha-cocoa-mid);
  min-width: 1ch;
}

body.hh-hha-shell .hh-react-btn--on .hh-react-n {
  color: var(--hha-ink);
}

/* Map pagination (Prev / Next as ghost buttons) */
body.hh-hha-shell .hh-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

body.hh-hha-shell .hh-pagination-text {
  font-family: var(--hha-font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--hha-cocoa-mid);
  letter-spacing: 0.02em;
}

body.hh-hha-shell .hh-pagination .hh-btn-ghost {
  min-width: 5.5rem;
}

body.hh-hha-shell .hh-pagination .hh-btn-ghost[aria-disabled="true"] {
  border-style: dashed;
  background: color-mix(in srgb, var(--hha-cream-deep) 50%, var(--hha-paper));
}

/* File upload control (selector button only) */
body.hh-hha-shell .hh-form input[type="file"].hh-input {
  padding: 0.65rem 0.75rem;
  font-family: var(--hha-font-body);
  font-size: 0.88rem;
  color: var(--hha-cocoa-mid);
  cursor: pointer;
  border-radius: var(--hha-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 22%, transparent);
  background: color-mix(in srgb, var(--hha-cream-bright) 80%, var(--hha-paper));
}

body.hh-hha-shell .hh-form input[type="file"].hh-input::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: var(--hha-radius-pill);
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 30%, transparent);
  background: linear-gradient(180deg, var(--hha-paper), var(--hha-cream-bright));
  font-family: var(--hha-font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--hha-ink);
  cursor: pointer;
  box-shadow: var(--hha-shadow-sm);
  transition:
    transform 0.18s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

body.hh-hha-shell .hh-form input[type="file"].hh-input::file-selector-button:hover {
  border-color: color-mix(in srgb, var(--hha-honey) 42%, var(--hha-tan-deep));
  background: var(--hha-white);
  transform: translateY(-1px);
}

body.hh-hha-shell .hh-form input[type="file"].hh-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hha-gold-light) 70%, transparent);
  outline-offset: 2px;
}

body.hh-hha-shell .hh-form input[type="file"].hh-input::file-selector-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hha-gold-light) 70%, transparent);
  outline-offset: 2px;
}

/* Admin table inline actions + modal actions */
body.hh-hha-shell .hh-admin-table-wrap .hh-btn,
body.hh-hha-shell .hh-admin-table-wrap .hh-btn-ghost,
body.hh-hha-shell .hh-admin-table-wrap .hh-btn-sm {
  white-space: nowrap;
}

body.hh-hha-shell .hh-modal-actions .hh-btn,
body.hh-hha-shell .hh-modal-actions .hh-btn-ghost,
body.hh-hha-shell .hh-modal-actions .hh-btn-primary {
  min-height: 2.5rem;
}

body.hh-hha-shell .hh-modal .hh-btn:focus-visible,
body.hh-hha-shell .hh-modal .hh-btn-primary:focus-visible {
  outline-offset: 3px;
}

/* Map popup CTA (link styled as button; not Leaflet chrome) */
body.hh-hha-shell .hh-map-popup-cta.hh-btn {
  font-size: 0.86rem;
  padding: 0.45rem 0.85rem;
}

body.hh-hha-shell .leaflet-popup-content a.hh-map-popup-cta.hh-btn-primary {
  color: #fffdf8;
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-react-btn,
  body.hh-hha-shell button.hh-react-btn {
    min-height: 2.5rem;
    min-width: 2.75rem;
  }

  body.hh-hha-shell .hh-pagination .hh-btn-ghost {
    min-height: 44px;
    min-width: 6rem;
  }
}

/* =============================================================================
   Background pass 2 — parchment map atmosphere (shell only; no Leaflet chrome)
   ============================================================================= */

body.hh-hha-shell.hha-page-bg::before,
body.hh-hha-shell.hha-page-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Compass rings, dashed routes, pin/crumb accents */
body.hh-hha-shell.hha-page-bg::before {
  opacity: 0.24;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20520%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%22248%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%221.2%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%22210%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%221%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%22172%22%20stroke%3D%22%23c9933a%22%20stroke-width%3D%220.9%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%22134%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%220.8%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%2296%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%220.7%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22260%22%20r%3D%2258%22%20stroke%3D%22%23c9933a%22%20stroke-width%3D%220.6%22%20opacity%3D%220.32%22%2F%3E%3Cline%20x1%3D%22260%22%20y1%3D%2212%22%20x2%3D%22260%22%20y2%3D%22508%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%220.6%22%20opacity%3D%220.28%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%22260%22%20x2%3D%22508%22%20y2%3D%22260%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%220.6%22%20opacity%3D%220.28%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%2286%22%20x2%3D%22434%22%20y2%3D%22434%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%220.45%22%20opacity%3D%220.2%22%2F%3E%3Cline%20x1%3D%22434%22%20y1%3D%2286%22%20x2%3D%2286%22%20y2%3D%22434%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%220.45%22%20opacity%3D%220.2%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20440%20440%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22220%22%20r%3D%22205%22%20stroke%3D%22%237a6a58%22%20stroke-width%3D%221%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22220%22%20r%3D%22168%22%20stroke%3D%22%23b89868%22%20stroke-width%3D%220.85%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22220%22%20r%3D%22131%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%220.75%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22220%22%20r%3D%2294%22%20stroke%3D%22%23c9933a%22%20stroke-width%3D%220.65%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22220%22%20r%3D%2257%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%220.55%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20320%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M-20%2095%20C80%2070%20140%20120%20220%2088%20C310%2052%20400%20130%20500%2078%20C600%2028%20720%20110%20820%2062%20C900%2028%20980%2048%201020%2038%22%20stroke%3D%22%23c9933a%22%20stroke-width%3D%222.2%22%20stroke-dasharray%3D%2210%2012%22%20opacity%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M0%2038%20C90%2018%20160%2072%20250%2042%20C340%2012%20430%2058%20520%2032%20C610%208%20700%2048%20790%2028%20C880%2010%20940%2022%20980%2018%22%20stroke%3D%22%238a7358%22%20stroke-width%3D%221.8%22%20stroke-dasharray%3D%228%2010%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M40%20210%20C120%20190%20200%20240%20300%20200%20C400%20160%20520%20230%20640%20185%20C760%20140%20860%20200%20960%20170%22%20stroke%3D%22%23a89070%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%227%209%22%20opacity%3D%220.45%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20600%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M120%20140%20C120%20108%20145%2088%20168%2088%20C191%2088%20216%20108%20216%20140%20C216%20168%20168%20218%20168%20218%20C168%20218%20120%20168%20120%20140Z%22%20fill%3D%22%23c9933a%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%22138%22%20r%3D%2214%22%20fill%3D%22%23fdf9f3%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M780%20420%20C780%20392%20800%20376%20818%20376%20C836%20376%20856%20392%20856%20420%20C856%20444%20818%20486%20818%20486%20C818%20486%20780%20444%20780%20420Z%22%20fill%3D%22%238a7358%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%22818%22%20cy%3D%22418%22%20r%3D%2212%22%20fill%3D%22%23fdf9f3%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%2288%22%20r%3D%227%22%20fill%3D%22%23c9933a%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%22260%22%20r%3D%225%22%20fill%3D%22%235a6b62%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22380%22%20r%3D%226%22%20fill%3D%22%23c9933a%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22120%22%20r%3D%224.5%22%20fill%3D%22%238a7358%22%20opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position:
    108% -14%,
    -22% 108%,
    50% 46%,
    50% 52%;
  background-size:
    min(78vmin, 680px),
    min(68vmin, 600px),
    min(148vw, 1320px),
    min(108vw, 1040px);
}

/* Map grid + extra route wash */
body.hh-hha-shell.hha-page-bg::after {
  opacity: 0.075;
  background-image:
    linear-gradient(rgba(74, 54, 40, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 54, 40, 0.16) 1px, transparent 1px),
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(201, 147, 58, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(90, 107, 98, 0.1), transparent 68%);
  background-size:
    44px 44px,
    44px 44px,
    auto,
    auto;
  background-position:
    center,
    center,
    0 0,
    0 0;
  mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, black 18%, transparent 78%);
}

/* Shell stacking — decor behind interactive content */
body.hh-hha-shell .hh-wrap {
  position: relative;
  z-index: 1;
  overflow: visible;
}

body.hh-hha-shell .hh-site-header,
body.hh-hha-shell .hh-foot,
body.hh-hha-shell .hh-global-footer {
  position: relative;
  z-index: 1;
}

/* Soft radial glow behind main column */
body.hh-hha-shell .hh-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2%;
  z-index: -1;
  width: min(108%, 1040px);
  height: 105%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--hha-radius-lg);
  background:
    radial-gradient(
      ellipse 75% 48% at 50% 12%,
      rgba(253, 249, 243, 0.82),
      rgba(253, 249, 243, 0.35) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 90% 65% at 50% 55%,
      rgba(247, 239, 228, 0.55),
      transparent 70%
    );
  opacity: 1;
}

body.hh-hha-shell .hh-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: -2;
  width: min(95%, 920px);
  height: 72%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    rgba(253, 249, 243, 0.5),
    transparent 68%
  );
  filter: blur(2px);
  opacity: 0.9;
}

/* Admin: calmer decor — keep parchment, reduce map art */
body.hh-hha-shell:has(.hh-page-admin).hha-page-bg::before {
  opacity: 0.09;
  background-size:
    min(52vmin, 480px),
    min(46vmin, 420px),
    min(120vw, 1000px),
    min(90vw, 800px);
}

body.hh-hha-shell:has(.hh-page-admin).hha-page-bg::after {
  opacity: 0.04;
}

body.hh-hha-shell:has(.hh-page-admin) .hh-wrap::before {
  opacity: 0.65;
}

body.hh-hha-shell:has(.hh-page-admin) .hh-wrap::after {
  opacity: 0.45;
}

@media (max-width: 640px) {
  body.hh-hha-shell.hha-page-bg {
    background-attachment: scroll;
  }

  body.hh-hha-shell.hha-page-bg::before {
    opacity: 0.18;
    background-position:
      120% -8%,
      -35% 115%,
      50% 50%,
      50% 54%;
    background-size:
      min(95vmin, 520px),
      min(85vmin, 460px),
      180vw,
      140vw;
  }

  body.hh-hha-shell.hha-page-bg::after {
    opacity: 0.055;
    background-size: 36px 36px, 36px 36px, auto, auto;
  }

  body.hh-hha-shell .hh-wrap::before {
    width: 115%;
    opacity: 0.9;
  }

  body.hh-hha-shell .hh-wrap::after {
    height: 65%;
    opacity: 0.75;
  }

  body.hh-hha-shell:has(.hh-page-admin).hha-page-bg::before {
    opacity: 0.05;
  }
}

/* =============================================================================
   Mobile pass — responsive layout fixes (shell only; no Leaflet chrome)
   ============================================================================= */

html:has(body.hh-hha-shell) {
  overflow-x: clip;
}

body.hh-hha-shell.hha-page-bg {
  overflow-x: clip;
}

body.hh-hha-shell .hh-wrap {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

body.hh-hha-shell .hh-wrap > .hh-card,
body.hh-hha-shell .hh-wrap > .hh-card > .hh-card-inner {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

body.hh-hha-shell .hh-card-inner img,
body.hh-hha-shell .hh-card-inner video,
body.hh-hha-shell .hh-card-inner svg,
body.hh-hha-shell .hh-card-inner table {
  max-width: 100%;
}

/* ---- Header / nav (tablet) ---- */
@media (max-width: 900px) {
  .hh-site-header__nav-actions {
    gap: 0.4rem;
  }

  .hh-site-header__nav-actions .hh-pill {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---- Buttons & action rows ---- */
body.hh-hha-shell .hh-actions,
body.hh-hha-shell .hh-actions-one-row,
body.hh-hha-shell .hh-actions-owner-passport,
body.hh-hha-shell .hh-form-compact .hh-actions,
body.hh-hha-shell .hh-passport-guest-cta-actions,
body.hh-hha-shell .hh-passport-guest-cta-actions--split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 0.6rem;
}

body.hh-hha-shell .hh-actions .hh-btn,
body.hh-hha-shell .hh-actions-owner-passport .hh-btn,
body.hh-hha-shell .hh-passport-guest-cta-actions .hh-btn {
  flex: 1 1 10.5rem;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  justify-content: center;
}

body.hh-hha-shell .hh-pagination {
  max-width: 100%;
}

/* ---- My Hippos & map directory cards ---- */
body.hh-hha-shell .hh-myhippos-list {
  max-width: 100%;
}

body.hh-hha-shell .hh-hippo-info,
body.hh-hha-shell .hh-hippo-line,
body.hh-hha-shell .hh-hippo-meta-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.hh-hha-shell .hh-passport-entry-chip,
body.hh-hha-shell .hh-map-entry-pin {
  max-width: 100%;
}

body.hh-hha-shell .hh-page-map .hh-map-cards {
  max-width: 100%;
}

/* ---- Passport identity & timeline ---- */
body.hh-hha-shell .hh-page-passport .hh-passport-identity-card,
body.hh-hha-shell .hh-page-passport .hh-passport-sheet {
  max-width: 100%;
  overflow: hidden;
}

body.hh-hha-shell .hh-page-passport .hh-profile-photo-img {
  width: min(118px, 30vw);
  height: min(118px, 30vw);
  max-width: 100%;
  object-fit: cover;
}

body.hh-hha-shell .hh-page-passport .hh-profile-photo-placeholder {
  width: min(118px, 30vw);
  height: min(118px, 30vw);
  max-width: 100%;
  font-size: clamp(2.25rem, 10vw, 3.25rem);
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-row {
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-row--stack {
  flex-direction: column;
  align-items: flex-start;
}

body.hh-hha-shell .hh-page-passport .hh-passport-info-value,
body.hh-hha-shell .hh-page-passport .hh-passport-bio-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal,
body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat {
  max-width: 100%;
}

body.hh-hha-shell .hh-page-passport .hh-photo-journal__mat img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 520px);
  object-fit: contain;
}

body.hh-hha-shell .hh-page-passport .hh-timeline-card--journal,
body.hh-hha-shell .hh-page-passport .hh-journal-entry {
  max-width: 100%;
  overflow: hidden;
}

body.hh-hha-shell .hh-page-passport .hh-journal-footer,
body.hh-hha-shell .hh-page-passport .hh-journal-react-bar {
  max-width: 100%;
}

/* ---- Forms & file inputs ---- */
body.hh-hha-shell .hh-form,
body.hh-hha-shell .hh-field {
  max-width: 100%;
  min-width: 0;
}

body.hh-hha-shell .hh-input,
body.hh-hha-shell .hh-form select,
body.hh-hha-shell textarea.hh-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.hh-hha-shell .hh-form input[type='file'].hh-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.hh-hha-shell .hh-form input[type='file'].hh-input::file-selector-button {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Admin tables ---- */
body.hh-hha-shell .hh-admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.hh-hha-shell .hh-page-admin .hh-admin-nav-card .hh-actions {
  gap: 0.45rem;
}

body.hh-hha-shell .hh-page-admin .hh-admin-nav-card .hh-btn {
  flex: 1 1 8.5rem;
}

@media (max-width: 640px) {
  body.hh-hha-shell .hh-myhippos-list {
    grid-template-columns: 1fr;
  }

  body.hh-hha-shell .hh-wrap {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  body.hh-hha-shell .hh-wrap::before {
    width: 100%;
    left: 0;
    transform: none;
  }

  body.hh-hha-shell .hh-wrap::after {
    width: 100%;
    left: 0;
    transform: none;
  }

  body.hh-hha-shell .hh-wrap > .hh-card > .hh-card-inner {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  /* Passport identity: photo left, details right (matches legacy mobile grid) */
  body.hh-hha-shell .hh-page-passport .hh-hippo-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }

  body.hh-hha-shell .hh-page-passport .hh-hippo-header-right {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  body.hh-hha-shell .hh-page-passport .hh-hippo-header-left {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.hh-hha-shell .hh-page-passport .hh-passport-title-row {
    position: relative;
    display: block;
    padding-right: 3rem;
  }

  body.hh-hha-shell .hh-page-passport .hh-passport-title-row .hh-h1 {
    font-size: clamp(1.2rem, 4.6vw, 1.55rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  body.hh-hha-shell .hh-page-passport .hh-passport-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: auto;
    max-height: 3.25rem;
    margin: 0;
  }

  body.hh-hha-shell .hh-passport-entry-card,
  body.hh-hha-shell .hh-map-directory-card {
    padding: 0.8rem 0.85rem;
  }

  body.hh-hha-shell .hh-passport-entry-card .hh-hippo-avatar,
  body.hh-hha-shell .hh-map-directory-card .hh-hippo-avatar {
    width: 4rem;
    height: 4rem;
  }

  body.hh-hha-shell .hh-page-map .hh-map-directory-card .hh-hippo-avatar {
    width: 4.15rem;
    height: 4.15rem;
  }

  body.hh-hha-shell .hh-actions-owner-passport .hh-btn {
    flex: 1 1 100%;
  }

  body.hh-hha-shell .hh-passport-guest-cta-actions .hh-btn,
  body.hh-hha-shell .hh-passport-guest-cta-actions--split .hh-btn {
    flex: 1 1 100%;
  }

  body.hh-hha-shell .hh-form input[type='file'].hh-input::file-selector-button {
    display: block;
    max-width: 100%;
    margin-bottom: 0.45rem;
    margin-right: 0;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .hh-site-header__nav .hha-nav-insp {
    white-space: normal;
    line-height: 1.25;
    text-align: left;
  }

  .hh-site-header__nav-links {
    gap: 0.15rem 0.35rem;
  }

  .hh-site-header__nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hh-site-header__nav-actions .hh-btn,
  .hh-site-header__nav-actions .hh-btn-secondary,
  .hh-site-header__nav-actions .hh-btn-primary {
    width: 100%;
    flex: 1 1 auto;
  }

  body.hh-hha-shell .hh-passport-entry-card,
  body.hh-hha-shell .hh-map-directory-card {
    grid-template-columns: minmax(0, 3.75rem) minmax(0, 1fr);
    gap: 0.45rem 0.65rem;
  }

  body.hh-hha-shell .hh-passport-entry-card .hh-hippo-avatar,
  body.hh-hha-shell .hh-map-directory-card .hh-hippo-avatar {
    width: 3.75rem;
    height: 3.75rem;
  }
}

@media (max-width: 520px) {
  body.hh-hha-shell .hh-wrap:has(.hh-profile-page) {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  body.hh-hha-shell .hh-card-inner:has(.hh-profile-page) {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }

  body.hh-hha-shell .hh-page-passport .hh-timeline-feed {
    max-width: 100%;
  }
}