/* =============================================================================
   HelperMatch 1.12.1 — Grove mobile + responsive web application layer.

   Structure
     01 Tokens            07 Cards & discovery
     02 Document & shell  08 Detail screens
     03 Typography        09 Profile hub
     04 Motion system     10 Activity
     05 Header & nav      11 Chat
     06 Primitives        12 Forms, media, map
                          13 Sheets, states, utilities

   Rules of the house
     · Grove owns colour, radius, spacing and components. `--hm-*` only extends.
     · No text below 12px. No interactive region below 44px.
     · State is never colour alone — always colour + glyph + word.
     · Depth comes from surface ramp and restraint, not blur and glow.
   ========================================================================== */

/* ============================================================ 01 TOKENS === */

.helpermatch-app {
  /* Typefaces — Mozilla Headline for display, Inter for everything read. */
  --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --hm-display: 'Mozilla Headline', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Type scale. Hero fluid; everything else stable so layout can't collapse. */
  --hm-fs-hero: clamp(27px, 7.2vw, 34px);
  --hm-fs-h1: 26px;
  --hm-fs-h2: 20px;
  --hm-fs-h3: 17px;
  --hm-fs-body: 16px;
  --hm-fs-dense: 15px;
  --hm-fs-sub: 13px;
  --hm-fs-micro: 12px;           /* absolute floor */

  /* Text colours, all measured against --g-bg #FFFFFF.
     text-1 15.9:1 · text-2 7.4:1 · text-3 5.9:1 — every one clears 4.5:1. */
  --hm-text-1: #141A16;
  --hm-text-2: #4A554D;
  --hm-text-3: #5B665F;
  --hm-on-dark-1: #FFFFFF;
  --hm-on-dark-2: rgba(255, 255, 255, .84);   /* ≈9:1 on brand-950 */
  --hm-on-dark-3: rgba(255, 255, 255, .68);   /* decorative only, never body text */

  /* Surface ramp. Replaces most 1px borders. */
  --hm-surface-0: var(--g-bg);
  --hm-surface-1: #F5F7F5;
  --hm-surface-2: #EDF1EE;
  --hm-surface-3: #E3E9E5;
  --hm-hairline: #DFE5E1;

  /* Supporting colour families — each a soft ground, a saturated tint and an
     ink that clears 4.5:1 on both. Derived from Grove's accent set. */
  --hm-blue-soft: #DCF1F1;  --hm-blue: #A0E1E1;  --hm-blue-ink: #0E4049;
  --hm-aqua-soft: #E0F3F6;  --hm-aqua: #A9DFE6;  --hm-aqua-ink: #10454F;
  --hm-mint-soft: #DDF5E8;  --hm-mint: #B7EED1;  --hm-mint-ink: #14432F;
  --hm-yellow-soft: #FFF6CB; --hm-yellow: #FFEB69; --hm-yellow-ink: #4A4118;
  --hm-orange-soft: #FFE6D2; --hm-orange: #FFC091; --hm-orange-ink: #6A3612;
  --hm-pink-soft: #FFE9F6;  --hm-pink: #FFD7EF;  --hm-pink-ink: #6B1436;
  --hm-ink: var(--hm-brand-950, #0B281D);
  --hm-ink-2: var(--hm-brand-900, #123C2D);

  /* Semantic states stay separate from brand and from each other. */
  --hm-ok: #18603A;      --hm-ok-bg: #E1F2E8;
  --hm-warn: #6B4E00;    --hm-warn-bg: #FFF2C2;
  --hm-stop: #A81D2C;    --hm-stop-bg: #FCE8EB;
  --hm-idle: #55605A;    --hm-idle-bg: #ECEFED;

  /* Radius */
  --hm-r-xs: 10px; --hm-r-sm: 14px; --hm-r-md: 18px;
  --hm-r-lg: 22px; --hm-r-xl: 28px; --hm-r-pill: 999px;

  /* Elevation — restrained. Two levels and a dark-anchor glow. */
  --hm-e-1: 0 1px 2px rgba(17, 45, 33, .05), 0 2px 8px rgba(17, 45, 33, .04);
  --hm-e-2: 0 2px 6px rgba(17, 45, 33, .06), 0 12px 28px rgba(17, 45, 33, .08);
  --hm-e-dark: 0 14px 36px rgba(11, 40, 29, .22);

  /* Motion */
  --hm-fast: 150ms;      /* press, hover, colour */
  --hm-base: 240ms;      /* enter, crossfade, indicator */
  --hm-slow: 340ms;      /* sheets, hero */
  --hm-ease: cubic-bezier(.2, .8, .2, 1);
  --hm-spring: cubic-bezier(.22, 1.1, .36, 1);

  /* Layout */
  --hm-gutter: 18px;
  --hm-app-w: 560px;
  /* --hm-vh is set on <html> by JS from visualViewport so the keyboard can
     never cover the composer. 100dvh is the no-JS fallback at every usage. */
  --hm-safe-b: env(safe-area-inset-bottom, 0px);
  --hm-safe-t: env(safe-area-inset-top, 0px);
}

/* =============================================== 02 DOCUMENT & APP SHELL === */

html { background: var(--hm-surface-2); }

.helpermatch-body {
  margin: 0 !important;
  background: var(--hm-surface-2) !important;
  color: var(--hm-text-1) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.helpermatch-page {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-height: 100dvh;
}

.helpermatch-app,
.helpermatch-app *,
.helpermatch-app *::before,
.helpermatch-app *::after { box-sizing: border-box; }

.helpermatch-app [hidden] { display: none !important; }

.helpermatch-app {
  width: min(100%, var(--hm-app-w));
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--g-bg);
  color: var(--hm-text-1);
  font: 400 var(--hm-fs-body)/1.5 var(--g-font);
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}

.helpermatch-app button,
.helpermatch-app input,
.helpermatch-app select,
.helpermatch-app textarea { font: inherit; }

.helpermatch-app button,
.helpermatch-app a,
.helpermatch-app input,
.helpermatch-app select,
.helpermatch-app textarea { touch-action: manipulation; }

/* Only unclassed links take the link colour; classed anchors (buttons,
   rows, cards) own their foreground at normal specificity. */
.helpermatch-app a:not([class]) { color: var(--g-link); }
.helpermatch-app h1,
.helpermatch-app h2,
.helpermatch-app h3,
.helpermatch-app h4,
.helpermatch-app p { margin: 0; }

/* One focus treatment, brand-derived, visible on every surface. */
.helpermatch-app :focus-visible {
  outline: 3px solid var(--g-focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.hm-on-dark :focus-visible,
.hm-feature-hero :focus-visible,
.hm-profile-hero :focus-visible,
.hm-hero :focus-visible { outline-color: #FFFFFF; }

/* --- The frozen shell: header / scrolling centre / navigation ------------- */

.hm-root { min-height: 100dvh; }

.hm-app-shell {
  min-height: 100dvh;
  background: var(--g-bg);
}

.helpermatch-body--locked {
  height: var(--hm-vh, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.helpermatch-body--locked .helpermatch-page,
.helpermatch-body--locked .helpermatch-app {
  height: var(--hm-vh, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.hm-root--shell {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.hm-root--shell .hm-app-shell {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.hm-root--shell .hm-header,
.hm-root--shell .hm-bottom {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  transform: none !important;
  z-index: 2;
  border-radius: 0;
}

.hm-root--shell .hm-content {
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* The one place a desktop scrollbar is allowed: the centre panel. */
.hm-root--shell .hm-content { scrollbar-width: thin; scrollbar-color: var(--hm-surface-3) transparent; }
.hm-root--shell .hm-content::-webkit-scrollbar { width: 8px; }
.hm-root--shell .hm-content::-webkit-scrollbar-thumb { background: var(--hm-surface-3); border-radius: 99px; }
.hm-root--shell .hm-content::-webkit-scrollbar-track { background: transparent; }

.hm-content {
  padding: 16px var(--hm-gutter) calc(28px + var(--hm-safe-b));
}

/* Tablet/desktop base reset; the full web workspace is defined in section 14. */
@media (min-width: 768px) {
  .helpermatch-app {
    min-height: calc(100dvh - 32px);
    margin: 16px auto;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(18, 60, 45, .16);
  }
  .helpermatch-body--locked .helpermatch-app {
    height: calc(var(--hm-vh, 100dvh) - 32px) !important;
    min-height: 0 !important;
  }
  .hm-root--shell .hm-header { border-radius: 34px 34px 0 0; }
  .hm-root--shell .hm-bottom { border-radius: 0 0 34px 34px; }
  .helpermatch-body .helpermatch-page { padding: 1px 0 !important; }
}

/* ======================================================== 03 TYPOGRAPHY === */

.helpermatch-app h1,
.helpermatch-app h2,
.helpermatch-app h3,
.hm-display {
  font-family: var(--hm-display);
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--hm-text-1);
}

.helpermatch-app h1 { font-size: var(--hm-fs-h1); line-height: 1.12; }
.helpermatch-app h2 { font-size: var(--hm-fs-h2); line-height: 1.2; }
.helpermatch-app h3 { font-size: var(--hm-fs-h3); line-height: 1.25; letter-spacing: -.018em; }

/* Mozilla Headline is for display only — it never sets small labels. */
.hm-sub, .hm-meta, .hm-micro, .hm-label { font-family: var(--g-font); }

.hm-sub   { font-size: var(--hm-fs-sub); line-height: 1.45; color: var(--hm-text-2); }
.hm-meta  { font-size: var(--hm-fs-sub); line-height: 1.4; color: var(--hm-text-2); }
.hm-micro { font-size: var(--hm-fs-micro); line-height: 1.35; color: var(--hm-text-2); font-weight: 600; }
.hm-label {
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hm-text-2);
}

.helpermatch-app .g-muted,
.helpermatch-app .g-small { color: var(--hm-text-2); }
.helpermatch-app .g-small { font-size: var(--hm-fs-sub); line-height: 1.45; }

/* Page head — compact by default, so content starts higher up the screen. */
.hm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hm-page-head h1 { font-size: var(--hm-fs-h1); line-height: 1.1; }
.hm-page-head .g-btn { white-space: nowrap; flex: none; }
.hm-page-head p {
  margin-top: 4px;
  font-size: var(--hm-fs-sub);
  line-height: 1.45;
  color: var(--hm-text-2);
  max-width: 40ch;
}

/* Section heading used between blocks. */
.hm-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 10px;
}
.hm-sec-head h2 { font-size: var(--hm-fs-h2); line-height: 1.15; }
.hm-sec-head p { margin-top: 3px; font-size: var(--hm-fs-micro); color: var(--hm-text-2); }
.hm-section-heading { /* legacy alias */ }
.hm-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 24px 0 10px; }
.hm-section-heading h2 { font-size: var(--hm-fs-h2); line-height: 1.15; }
.hm-section-heading p { margin-top: 3px; font-size: var(--hm-fs-micro); color: var(--hm-text-2); }

.hm-subtitle { font-family: var(--hm-display); font-size: var(--hm-fs-h2); margin: 26px 0 12px; letter-spacing: -.025em; }

/* Emoji share one line box so they never sit low against adjacent text. */
.hm-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  vertical-align: -.08em;
}

/* ==================================================== 04 MOTION SYSTEM === */

/* Fast feedback 150ms · transitions 240ms · sheets/springs 340ms.
   Transform and opacity only — no animated layout properties. */

@keyframes hm-fade      { from { opacity: 0 } to { opacity: 1 } }
@keyframes hm-rise      { from { opacity: 0; transform: translate3d(0, 10px, 0) } to { opacity: 1; transform: none } }
@keyframes hm-sheet-in  { from { transform: translate3d(0, 100%, 0) } to { transform: none } }
@keyframes hm-pop       { 0% { transform: scale(.6) } 62% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes hm-bubble-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97) } to { opacity: 1; transform: none } }
@keyframes hm-shimmer   { to { background-position-x: -160% } }
@keyframes hm-spin      { to { transform: rotate(360deg) } }
@keyframes hm-score-in  { from { opacity: 0; transform: scale(.86) } to { opacity: 1; transform: none } }

.hm-content > * { animation: hm-rise var(--hm-base) var(--hm-ease) both; }
.hm-content > *:nth-child(2) { animation-delay: 28ms; }
.hm-content > *:nth-child(3) { animation-delay: 52ms; }
.hm-content > *:nth-child(n+4) { animation-delay: 70ms; }

/* Press feedback: one scale value, applied consistently. */
.hm-press { transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease); }
.hm-press:active { transform: scale(.985); }

.helpermatch-app .g-btn {
  transition: background-color var(--hm-fast) var(--hm-ease), transform var(--hm-fast) var(--hm-ease);
  font-family: var(--g-font);
  font-weight: 700;
}
.helpermatch-app .g-btn:active { transform: scale(.975); }
.helpermatch-app .g-btn--sm { min-height: 44px; padding: 9px 16px; font-size: var(--hm-fs-sub); }

/* Grove already gives each button variant its foreground; anchors styled as
   buttons only need the underline removed. */
.helpermatch-app a.g-btn { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .helpermatch-app *,
  .helpermatch-app *::before,
  .helpermatch-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .helpermatch-app .g-btn:active,
  .hm-press:active,
  .hm-dcard:active { transform: none !important; }
  /* Essential state feedback survives: focus rings, colour changes, aria. */
}

/* ================================================== 05 HEADER & BOTTOM NAV */

.hm-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: calc(8px + var(--hm-safe-t)) 12px 8px;
  background: var(--g-bg);
  box-shadow: 0 1px 0 var(--hm-hairline);
  transition: box-shadow var(--hm-base) var(--hm-ease);
}
/* Scroll edge effect: the only depth the header gets, and only once scrolled. */
.hm-app-shell[data-scrolled="true"] .hm-header {
  box-shadow: 0 1px 0 var(--hm-hairline), 0 8px 20px rgba(18, 60, 45, .06);
}

.hm-header-title { min-width: 0; padding-inline: 2px; }
.hm-header-title small {
  display: block;
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hm-text-2);
}
.hm-header-title strong {
  display: block;
  font-family: var(--hm-display);
  font-size: var(--hm-fs-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-header-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

.hm-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  position: relative;
  text-decoration: none;
  flex: none;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
}
.hm-icon-btn:active { transform: scale(.93); background: var(--hm-surface-2); }
.hm-icon-btn .g-icon { width: 21px; height: 21px; }

/* Header unread indicator: a real count, never a decorative dot. */
.hm-icon-btn .hm-dot {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--hm-stop);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--g-bg);
}
.hm-icon-btn .hm-dot:empty,
.hm-icon-btn .hm-dot[hidden] { display: none !important; }

.hm-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  background: var(--hm-mint-soft);
  color: var(--hm-mint-ink);
  border-radius: var(--hm-r-pill);
  padding: 8px 10px 8px 9px;
  font-size: var(--hm-fs-micro);
  font-weight: 800;
  max-width: 122px;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
}
.hm-mode-btn:active { transform: scale(.96); }
.hm-mode-btn .hm-emoji { font-size: 19px; }
.hm-mode-btn .g-icon { width: 15px; height: 15px; opacity: .7; }
.hm-mode-btn > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hm-mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--hm-ink);
  color: var(--g-accent);
  display: grid; place-items: center;
  font-family: var(--hm-display);
  font-weight: 700;
  flex: none;
  overflow: hidden;
}
.hm-mark img { width: 100%; height: 100%; object-fit: contain; }
.hm-mark--logo { background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--hm-hairline); padding: 5px; }
.hm-account-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--hm-mint-soft);
  color: var(--hm-mint-ink);
  font-weight: 800;
  flex: none;
}
.hm-account-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Bottom navigation --------------------------------------------------- */

.hm-bottom {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 2px;
  background: var(--g-bg) !important;
  border-top: 1px solid var(--hm-hairline);
  padding: 6px 6px max(6px, var(--hm-safe-b));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hm-bottom a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: var(--hm-r-sm);
  padding: 5px 2px;
  background: transparent !important;
  color: var(--hm-text-2);
  font-size: var(--hm-fs-micro);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  position: relative;
  transition: color var(--hm-base) var(--hm-ease);
}
.hm-bottom a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hm-bottom a:active { transform: none; }

/* Selected tab: filled pill behind the icon + brand colour + weight. Three
   signals, so it reads without relying on colour alone. */
.hm-nav-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 30px;
  border-radius: var(--hm-r-pill);
  background: transparent;
  transition: background-color var(--hm-base) var(--hm-ease), transform var(--hm-base) var(--hm-spring);
}
.hm-nav-ico .g-icon { width: 22px; height: 22px; }
.hm-bottom a[aria-current="page"] { color: var(--g-link); font-weight: 800; }
.hm-bottom a[aria-current="page"] .hm-nav-ico { background: var(--g-soft); }
.hm-bottom a[aria-current="page"] .g-icon { stroke-width: 2.1; }

.hm-bottom .hm-count {
  position: absolute;
  top: 1px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--hm-stop);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--g-bg);
}
.hm-bottom .hm-count:empty,
.hm-bottom .hm-count[hidden] { display: none !important; }

/* ======================================================== 06 PRIMITIVES === */

/* --- Touch-target extender ------------------------------------------------
   Keeps the visual control small and dense while giving it a 44px hit area. */
.hm-tap { position: relative; }
.hm-tap::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* --- Match score ----------------------------------------------------------
   Colour + strength marks + the band word in the accessible name. */
.hm-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--hm-r-pill);
  padding: 5px 10px;
  font-size: var(--hm-fs-micro);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--hm-idle-bg);
  color: var(--hm-idle);
  transition: transform var(--hm-fast) var(--hm-ease);
  animation: hm-score-in var(--hm-base) var(--hm-spring) both;
}
button.hm-score { cursor: pointer; position: relative; }
button.hm-score:active { transform: scale(.95); }
/* Dense pill, full-size hit area. */
button.hm-score::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 44px;
  transform: translate(-50%, -50%);
}
.hm-score-marks { letter-spacing: 1px; font-size: 11px; line-height: 1; }
.hm-score--strong  { background: var(--hm-ok-bg);     color: var(--hm-ok); }
.hm-score--good    { background: var(--hm-blue-soft); color: var(--hm-blue-ink); }
.hm-score--some    { background: var(--hm-orange-soft); color: var(--hm-orange-ink); }
.hm-score--limited { background: var(--hm-stop-bg);   color: var(--hm-stop); }
.hm-score--unknown { background: var(--hm-idle-bg);   color: var(--hm-idle); }

/* Large form, used on detail screens and in the breakdown sheet. */
.hm-score--lg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--hm-r-lg);
  text-align: left;
  font-size: var(--hm-fs-body);
}
.hm-score-num {
  font-family: var(--hm-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.hm-score-copy strong { display: block; font-size: var(--hm-fs-dense); font-weight: 800; }
.hm-score-copy small { display: block; margin-top: 2px; font-size: var(--hm-fs-micro); font-weight: 600; opacity: .85; }

/* Legacy alias kept so any unmigrated call site still renders sanely. */
.hm-match { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--hm-r-pill);
  padding: 5px 10px; font-size: var(--hm-fs-micro); font-weight: 800; background: var(--hm-idle-bg); color: var(--hm-idle); }

/* --- Breakdown rows ------------------------------------------------------- */
.hm-score-list { display: grid; gap: 2px; margin-top: 14px; }
.hm-score-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--hm-r-sm);
  background: var(--hm-surface-1);
  font-size: var(--hm-fs-sub);
  line-height: 1.45;
  color: var(--hm-text-1);
}
.hm-score-row b { display: block; font-size: var(--hm-fs-micro); font-weight: 800; color: var(--hm-text-2); }
.hm-score-row .hm-emoji { font-size: 15px; }

/* --- Status chips: colour + glyph + word --------------------------------- */
.hm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--hm-r-pill);
  background: var(--hm-idle-bg);
  color: var(--hm-idle);
  font-size: var(--hm-fs-micro);
  font-weight: 800;
  white-space: nowrap;
}
.hm-status-mark { font-size: 11px; line-height: 1; font-style: normal; }
.hm-status--pending, .hm-status--review, .hm-status--draft { background: var(--hm-warn-bg); color: var(--hm-warn); }
.hm-status--accepted, .hm-status--published, .hm-status--open, .hm-status--looking { background: var(--hm-ok-bg); color: var(--hm-ok); }
.hm-status--declined, .hm-status--rejected { background: var(--hm-stop-bg); color: var(--hm-stop); }
.hm-status--paused, .hm-status--withdrawn, .hm-status--filled { background: var(--hm-idle-bg); color: var(--hm-idle); }

/* --- Chips: skills and duties, colourful and legible --------------------- */
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chips--row { flex-wrap: nowrap; overflow: hidden; }

.hm-chip-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: var(--hm-r-pill);
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  white-space: nowrap;
}
.hm-chip-tag .hm-emoji { font-size: 16px; }

/* Each skill keeps one colour everywhere it appears — never reused for a
   second meaning (Color > Best practices). */
.hm-chip-tag[data-skill="cooking"]      { background: var(--hm-orange-soft); color: var(--hm-orange-ink); }
.hm-chip-tag[data-skill="childcare"]    { background: var(--hm-blue-soft);   color: var(--hm-blue-ink); }
.hm-chip-tag[data-skill="eldercare"]    { background: var(--hm-pink-soft);   color: var(--hm-pink-ink); }
.hm-chip-tag[data-skill="pet_care"]     { background: var(--hm-yellow-soft); color: var(--hm-yellow-ink); }
.hm-chip-tag[data-skill="housekeeping"] { background: var(--hm-aqua-soft);   color: var(--hm-aqua-ink); }

.hm-chip-tag--lg { padding: 9px 15px 9px 12px; font-size: var(--hm-fs-sub); gap: 8px; }
.hm-chip-tag--lg .hm-emoji { font-size: 24px; }
/* Compact cards show skills as emoji only — no sub-12px label to squint at,
   and no clipped text at 320px. The accessible name rides on the emoji. */
.hm-chip-tag--mini { padding: 5px 8px; gap: 0; border-radius: 50%; }
.hm-chip-tag--mini .hm-emoji { font-size: 17px; }
.hm-chip-tag--mini > span:not(.hm-emoji) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Legacy .hm-tag alias */
.hm-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--hm-r-pill);
  background: var(--hm-surface-1); color: var(--hm-text-1); font-size: var(--hm-fs-micro); font-weight: 700; }
.hm-tag-emoji { font-size: 16px; line-height: 1; font-weight: 400; }

/* --- Avatars ------------------------------------------------------------- */
.hm-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--hm-mint-soft);
  color: var(--hm-mint-ink);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  flex: none;
}
.hm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-avatar--emoji { font-size: 28px; }

/* --- Soft information block ---------------------------------------------- */
.hm-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--hm-r-md);
  background: var(--hm-aqua-soft);
  color: var(--hm-aqua-ink);
  font-size: var(--hm-fs-sub);
  line-height: 1.5;
}
.hm-note .hm-emoji { font-size: 17px; }
.hm-note--privacy { background: var(--hm-mint-soft); color: var(--hm-mint-ink); }
.hm-inline-note { /* legacy alias */
  padding: 13px 15px; border-radius: var(--hm-r-md);
  background: var(--hm-aqua-soft); color: var(--hm-aqua-ink);
  font-size: var(--hm-fs-sub); line-height: 1.5; margin: 12px 0;
}

/* --- Metric tile --------------------------------------------------------- */
.hm-metric {
  min-width: 0;
  padding: 12px 12px 13px;
  border-radius: var(--hm-r-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-metric .hm-emoji { font-size: 24px; margin-bottom: 6px; }
.hm-metric small { font-size: var(--hm-fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.hm-metric strong { font-size: var(--hm-fs-sub); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }

/* --- Dark anchor surfaces ------------------------------------------------- */
.hm-on-dark {
  background: var(--hm-ink);
  color: var(--hm-on-dark-1);
  box-shadow: var(--hm-e-dark);
}
.hm-on-dark h1, .hm-on-dark h2, .hm-on-dark h3 { color: var(--hm-on-dark-1); }
.hm-on-dark p, .hm-on-dark .hm-sub { color: var(--hm-on-dark-2); }

/* ================================================ 07 CARDS & DISCOVERY === */

/* --- Search + filter ------------------------------------------------------ */
.hm-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.hm-search { position: relative; min-width: 0; }
.hm-search .g-icon {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--hm-text-2);
  pointer-events: none;
}
.hm-search input {
  width: 100%;
  height: 48px;
  border: 1px solid transparent;
  border-radius: var(--hm-r-pill);
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  padding: 0 16px 0 43px;
  font-size: var(--hm-fs-body);
  outline: 0;
  transition: background-color var(--hm-fast) var(--hm-ease), border-color var(--hm-fast) var(--hm-ease), box-shadow var(--hm-fast) var(--hm-ease);
}
.hm-search input::placeholder { color: var(--hm-text-3); }
.hm-search input:focus {
  background: var(--g-bg);
  border-color: var(--g-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-focus) 18%, transparent);
}
.hm-filter-btn {
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  display: grid; place-items: center;
  position: relative;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
}
.hm-filter-btn:active { transform: scale(.94); }
.hm-filter-btn .g-icon { width: 20px; height: 20px; }
.hm-filter-btn[data-active="true"] { background: var(--g-soft); color: var(--g-on-soft); }
.hm-filter-btn[data-active="true"]::after {
  content: "";
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--g-link);
  border: 2px solid var(--g-bg);
}

/* Horizontal chip rail — scrolls, no visible scrollbar, 44px touch region. */
.hm-chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 12px;
  margin-inline: calc(var(--hm-gutter) * -1);
  padding-inline: var(--hm-gutter);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hm-chip-row::-webkit-scrollbar { display: none; }

.hm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--hm-hairline);
  border-radius: var(--hm-r-pill);
  background: var(--g-bg);
  color: var(--hm-text-1);
  font-size: var(--hm-fs-sub);
  font-weight: 700;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease),
              border-color var(--hm-fast) var(--hm-ease), color var(--hm-fast) var(--hm-ease);
}
.hm-chip .hm-emoji { font-size: 17px; }
.hm-chip:active { transform: scale(.96); }
.hm-chip.is-active {
  background: var(--g-soft);
  border-color: var(--g-accent);
  color: var(--g-on-soft);
  font-weight: 800;
}
.hm-chip.is-active::before { content: "✓"; font-size: 12px; font-weight: 900; }

/* --- Compact discovery card ---------------------------------------------- */
.hm-cards { display: grid; gap: 8px; }

.hm-dcard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 11px 11px 12px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-surface-1);
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
  animation: hm-rise var(--hm-base) var(--hm-ease) both;
}
.hm-dcard:nth-child(2) { animation-delay: 32ms; }
.hm-dcard:nth-child(3) { animation-delay: 60ms; }
.hm-dcard:nth-child(4) { animation-delay: 84ms; }
.hm-dcard:nth-child(n+5) { animation-delay: 104ms; }
.hm-dcard:active { transform: scale(.985); }
.hm-dcard:hover { background: var(--hm-surface-2); }

/* The whole card is the tap target and a real link — Back works, and the
   card needs no giant button of its own. */
.hm-dcard-hit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
/* No z-index here: a positioned element with z-index:0 would open a stacking
   context and trap Save/score underneath the stretched link. */
.hm-dcard-media,
.hm-dcard-main { position: relative; }
.hm-dcard .hm-save,
.hm-dcard button.hm-score { position: relative; z-index: 2; }

.hm-dcard-media { flex: none; }
.hm-dcard-media .hm-avatar { width: 58px; height: 58px; border-radius: var(--hm-r-sm); }
.hm-dcard-photo {
  display: block;
  width: 58px;
  aspect-ratio: 4 / 5;
  border-radius: var(--hm-r-sm);
  overflow: hidden;
  background: var(--hm-surface-2);
}
.hm-dcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-dcard-main { min-width: 0; display: grid; gap: 6px; align-content: start; }

.hm-dcard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.hm-dcard-name {
  font-family: var(--hm-display);
  font-size: var(--hm-fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-dcard-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--hm-fs-micro);
  color: var(--hm-text-2);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-dcard-meta .hm-emoji { font-size: 13px; }
.hm-dcard-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hm-fs-micro);
  color: var(--hm-text-2);
  line-height: 1.35;
  min-width: 0;
}
.hm-dcard-foot strong { color: var(--hm-text-1); font-weight: 800; white-space: nowrap; }
.hm-dcard-foot .hm-dot-sep { opacity: .5; }
.hm-dcard-foot .hm-dcard-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-dcard-foot .hm-score { margin-left: auto; flex: none; }

.hm-save {
  position: relative;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--g-bg);
  color: var(--hm-text-2);
  display: grid; place-items: center;
  flex: none;
  transition: transform var(--hm-fast) var(--hm-spring), background-color var(--hm-fast) var(--hm-ease), color var(--hm-fast) var(--hm-ease);
}
/* Visually 34px for density; 44px to the finger. */
.hm-save::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.hm-save .g-icon { width: 18px; height: 18px; transition: transform var(--hm-fast) var(--hm-spring); }
.hm-save:active { transform: scale(.88); }
.hm-save.is-saved { color: var(--hm-stop); background: var(--hm-stop-bg); }
.hm-save.is-saved .g-icon { fill: currentColor; animation: hm-pop 320ms var(--hm-spring); }

/* Legacy card classes mapped onto the new look so nothing breaks mid-migration. */
.hm-person-card { border-radius: var(--hm-r-lg); background: var(--hm-surface-1); padding: 14px; }

/* ==================================================== 08 DETAIL SCREENS === */

/* Hero: photographic when a photo exists, branded gradient otherwise. */
.hm-hero {
  position: relative;
  margin: -16px calc(var(--hm-gutter) * -1) 0;
  min-height: 268px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px var(--hm-gutter) 16px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--hm-ink-2), var(--hm-ink));
  color: var(--hm-on-dark-1);
  isolation: isolate;
}
.hm-hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hm-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 24, 18, .12) 0%, rgba(8, 24, 18, .48) 55%, rgba(8, 24, 18, .88) 100%);
}
.hm-hero:not(.has-media)::before { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)); }
.hm-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: auto; }
.hm-hero-body { display: grid; gap: 10px; }
.hm-hero h1 {
  font-size: var(--hm-fs-hero);
  line-height: 1.05;
  color: var(--hm-on-dark-1);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
.hm-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: var(--hm-fs-sub);
  color: var(--hm-on-dark-2);
}
.hm-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hm-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--hm-r-pill);
  padding: 7px 12px;
  background: rgba(255, 255, 255, .16);
  color: var(--hm-on-dark-1);
  font-size: var(--hm-fs-micro);
  font-weight: 800;
}
.hm-hero .hm-avatar {
  width: 76px; height: 76px;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
  font-size: 24px;
}
.hm-hero-ident { display: flex; align-items: flex-end; gap: 13px; }
.hm-hero-ident > div { min-width: 0; }
.hm-hero .hm-score { justify-self: start; align-self: flex-start; }

/* Legacy detail hero */
.hm-detail-hero { display: grid; justify-items: center; text-align: center; padding: 6px 0 20px; }
.hm-detail-hero .hm-avatar { width: 88px; height: 88px; font-size: 28px; margin-bottom: 12px; }
.hm-detail-hero h1 { font-size: var(--hm-fs-hero); }
.hm-detail-hero p { color: var(--hm-text-2); margin-top: 6px; font-size: var(--hm-fs-sub); }

/* --- Important facts strip ----------------------------------------------- */
.hm-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hm-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-fact {
  min-width: 0;
  padding: 12px 13px 13px;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-fact .hm-emoji { font-size: 21px; margin-bottom: 5px; }
.hm-fact small {
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hm-text-2);
}
.hm-fact strong { font-size: var(--hm-fs-sub); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.hm-fact--blue { background: var(--hm-blue-soft); }
.hm-fact--blue small, .hm-fact--blue strong { color: var(--hm-blue-ink); }
.hm-fact--yellow { background: var(--hm-yellow-soft); }
.hm-fact--yellow small, .hm-fact--yellow strong { color: var(--hm-yellow-ink); }
.hm-fact--pink { background: var(--hm-pink-soft); }
.hm-fact--pink small, .hm-fact--pink strong { color: var(--hm-pink-ink); }
.hm-fact--mint { background: var(--hm-mint-soft); }
.hm-fact--mint small, .hm-fact--mint strong { color: var(--hm-mint-ink); }
.hm-fact--orange { background: var(--hm-orange-soft); }
.hm-fact--orange small, .hm-fact--orange strong { color: var(--hm-orange-ink); }
.hm-fact--aqua { background: var(--hm-aqua-soft); }
.hm-fact--aqua small, .hm-fact--aqua strong { color: var(--hm-aqua-ink); }
.hm-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* --- Content sections ----------------------------------------------------- */
.hm-sec { padding: 20px 0 0; }
.hm-sec > h2 { margin-bottom: 10px; }
.hm-sec p { font-size: var(--hm-fs-dense); line-height: 1.62; color: var(--hm-text-1); }
.hm-section { padding: 20px 0 0; }
.hm-section > h2 { font-size: var(--hm-fs-h2); margin-bottom: 10px; }
.hm-section p { font-size: var(--hm-fs-dense); line-height: 1.62; }

.hm-prose {
  padding: 16px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-surface-1);
  font-size: var(--hm-fs-dense);
  line-height: 1.65;
  color: var(--hm-text-1);
  max-width: 62ch;
}

/* --- Paged gallery (4:5 job photos, 4:3 profile galleries) ---------------- */
.hm-pager { margin-inline: calc(var(--hm-gutter) * -1); position: relative; }
.hm-pager-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--hm-gutter) 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.hm-pager-track::-webkit-scrollbar { display: none; }
.hm-pager-track figure,
.hm-pager-track .hm-pager-item {
  margin: 0;
  flex: 0 0 min(86%, 340px);
  border-radius: var(--hm-r-xl);
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--hm-surface-2);
  position: relative;
}
.hm-pager--45 .hm-pager-item { aspect-ratio: 4 / 5; flex-basis: min(78%, 300px); }
.hm-pager--43 .hm-pager-item { aspect-ratio: 4 / 3; }
.hm-pager-track img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-pager-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}
.hm-pager-dots { display: flex; gap: 6px; }
.hm-pager-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hm-surface-3);
  transition: background-color var(--hm-base) var(--hm-ease), transform var(--hm-base) var(--hm-ease);
}
.hm-pager-dots i.is-on { background: var(--g-link); transform: scale(1.25); }
.hm-pager-count { font-size: var(--hm-fs-micro); font-weight: 700; color: var(--hm-text-2); font-variant-numeric: tabular-nums; }

/* Job detail hero media
   Keep the gallery inside the same content gutter as the rest of the page.
   This deliberately overrides the generic edge-peeking gallery treatment: the
   first thing on a detail page should read as a composed media card, not an
   image pasted against the app chrome. */
.hm-job-hero-gallery {
  margin: 2px 0 20px;
}
.hm-job-hero-gallery .hm-pager {
  margin-inline: 0;
}
.hm-job-hero-gallery .hm-pager-track {
  padding: 0 0 8px;
  gap: 10px;
}
.hm-job-hero-gallery .hm-pager-item {
  border-radius: var(--hm-r-xl);
  box-shadow: 0 8px 26px rgba(18, 60, 45, .08);
}
.hm-job-hero-gallery .hm-pager--45.hm-pager--single .hm-pager-item {
  flex: 0 0 100%;
  max-width: none;
}
.hm-job-hero-gallery .hm-pager--45.hm-pager--multi .hm-pager-item {
  flex: 0 0 calc(88% - 2px);
  max-width: none;
  scroll-snap-align: start;
}
.hm-job-hero-gallery .hm-pager-foot {
  padding-top: 4px;
}

/* Legacy public gallery */
.hm-public-gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.hm-public-gallery::-webkit-scrollbar { display: none; }
.hm-public-gallery img { width: 74%; max-width: 300px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--hm-r-lg); scroll-snap-align: start; flex: none; }

/* --- Docked primary action ------------------------------------------------ */
.hm-dock {
  position: sticky;
  bottom: 0;
  margin: 22px calc(var(--hm-gutter) * -1) 0;
  padding: 16px var(--hm-gutter) calc(14px + var(--hm-safe-b));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--g-bg) 34%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  z-index: 4;
}
.hm-dock .hm-save { width: 48px; height: 48px; background: var(--hm-surface-1); }
.hm-dock .hm-save .g-icon { width: 22px; height: 22px; }
.hm-dock .g-btn { min-height: 52px; }
.hm-action-bar { /* legacy alias */
  position: sticky; bottom: 0; margin: 22px calc(var(--hm-gutter) * -1) 0;
  padding: 16px var(--hm-gutter) calc(14px + var(--hm-safe-b));
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--g-bg) 34%);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
}

.hm-quiet-action {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  min-height: 44px;
  border: 0;
  border-radius: var(--hm-r-sm);
  background: transparent;
  color: var(--hm-text-2);
  font-size: var(--hm-fs-sub);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-quiet-action:hover { background: var(--hm-surface-1); }

/* ======================================================= 09 PROFILE HUB === */

.hm-profile-hero {
  position: relative;
  margin: -16px calc(var(--hm-gutter) * -1) 12px;
  min-height: 236px;
  overflow: hidden;
  background: linear-gradient(148deg, var(--hm-ink-2), var(--hm-ink));
  color: var(--hm-on-dark-1);
  padding: 16px var(--hm-gutter) 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}
.hm-profile-hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hm-profile-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 24, 18, .26), rgba(8, 24, 18, .86) 84%);
}
.hm-profile-hero:not(.has-cover) .hm-profile-hero-shade {
  background: linear-gradient(148deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .16));
}
.hm-profile-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-profile-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--hm-r-pill); padding: 7px 12px;
  background: rgba(255, 255, 255, .16);
  color: var(--hm-on-dark-1);
  font-size: var(--hm-fs-micro); font-weight: 800;
}
.hm-profile-status {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--hm-r-pill); padding: 7px 12px;
  background: var(--hm-yellow); color: var(--hm-yellow-ink);
  font-size: var(--hm-fs-micro); font-weight: 800;
}
.hm-profile-status[data-state="live"] { background: var(--hm-mint); color: var(--hm-mint-ink); }
.hm-profile-status[data-state="review"] { background: var(--hm-yellow); color: var(--hm-yellow-ink); }
.hm-profile-status[data-state="off"] { background: rgba(255,255,255,.22); color: var(--hm-on-dark-1); }
.hm-profile-identity { display: flex; align-items: flex-end; gap: 13px; }
.hm-profile-identity > div { min-width: 0; }
.hm-profile-identity .hm-avatar {
  width: 78px; height: 78px;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  font-size: 23px;
}
.hm-profile-identity h1 { font-size: 30px; line-height: 1.04; color: var(--hm-on-dark-1); }
.hm-profile-identity p { margin-top: 5px; font-size: var(--hm-fs-sub); color: var(--hm-on-dark-2); }

.hm-profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-profile-fact {
  min-width: 0;
  min-height: 96px;
  border-radius: var(--hm-r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.hm-profile-fact > .hm-emoji { font-size: 24px; margin-bottom: auto; }
.hm-profile-fact small { font-size: var(--hm-fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hm-profile-fact strong { font-size: var(--hm-fs-sub); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hm-profile-fact--1 { background: var(--hm-blue-soft); }
.hm-profile-fact--1 small, .hm-profile-fact--1 strong { color: var(--hm-blue-ink); }
.hm-profile-fact--2 { background: var(--hm-yellow-soft); }
.hm-profile-fact--2 small, .hm-profile-fact--2 strong { color: var(--hm-yellow-ink); }
.hm-profile-fact--3 { background: var(--hm-pink-soft); }
.hm-profile-fact--3 small, .hm-profile-fact--3 strong { color: var(--hm-pink-ink); }

/* Hierarchy: one primary action, a two-up secondary row, then quiet rows. */
.hm-primary-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--hm-r-lg);
  background: var(--g-accent);
  color: var(--g-on-accent);
  text-align: left;
  text-decoration: none;
  transition: transform var(--hm-fast) var(--hm-ease), filter var(--hm-fast) var(--hm-ease);
}
.hm-primary-action:active { transform: scale(.985); }
.hm-primary-action .hm-emoji { font-size: 28px; }
.hm-primary-action strong { display: block; font-family: var(--hm-display); font-size: var(--hm-fs-h3); font-weight: 600; line-height: 1.2; }
.hm-primary-action small { display: block; margin-top: 2px; font-size: var(--hm-fs-micro); font-weight: 600; }
.hm-primary-action .g-icon { width: 20px; height: 20px; }

.hm-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hm-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hm-profile-action {
  position: relative;
  min-width: 0;
  min-height: 108px;
  padding: 13px;
  border: 0;
  border-radius: var(--hm-r-md);
  text-align: left;
  text-decoration: none;
  color: var(--hm-text-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform var(--hm-fast) var(--hm-ease);
}
.hm-profile-action:active { transform: scale(.975); }
.hm-profile-action > .g-icon { position: absolute; right: 11px; bottom: 11px; width: 17px; height: 17px; opacity: .55; }
.hm-profile-action .hm-emoji { font-size: 28px; margin-bottom: auto; }
.hm-profile-action strong { font-family: var(--hm-display); font-size: var(--hm-fs-h3); font-weight: 600; line-height: 1.15; padding-right: 20px; }
.hm-profile-action small { display: block; margin-top: 3px; font-size: var(--hm-fs-micro); font-weight: 600; line-height: 1.35; padding-right: 18px; }
.hm-profile-action.is-blue   { background: var(--hm-blue-soft);   color: var(--hm-blue-ink); }
.hm-profile-action.is-orange { background: var(--hm-orange-soft); color: var(--hm-orange-ink); }
.hm-profile-action.is-yellow { background: var(--hm-yellow-soft); color: var(--hm-yellow-ink); }
.hm-profile-action.is-pink   { background: var(--hm-pink-soft);   color: var(--hm-pink-ink); }
.hm-profile-action.is-mint   { background: var(--hm-mint-soft);   color: var(--hm-mint-ink); }

/* Quiet list rows for account-level destinations. */
.hm-rows, .hm-setting-list { display: grid; gap: 2px; margin-top: 8px; }
.hm-row, .hm-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  text-decoration: none;
  text-align: left;
  width: 100%;
  font-size: var(--hm-fs-dense);
  transition: background-color var(--hm-fast) var(--hm-ease);
}
.hm-row:hover, .hm-setting-row:hover { background: var(--hm-surface-2); }
.hm-row strong, .hm-setting-row strong { display: flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; flex: none; }
.hm-row span, .hm-setting-row span {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  min-width: 0; color: var(--hm-text-2); font-size: var(--hm-fs-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-row .g-icon, .hm-setting-row .g-icon { color: var(--g-link); width: 20px; height: 20px; }

.hm-story-card { margin-top: 10px; padding: 18px; border-radius: var(--hm-r-lg); background: var(--hm-surface-1); }
.hm-story-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hm-story-emoji { width: 48px; height: 48px; border-radius: var(--hm-r-sm); display: grid; place-items: center; background: var(--g-bg); font-size: 25px; flex: none; }
.hm-story-card-head small { font-size: var(--hm-fs-micro); font-weight: 800; letter-spacing: .07em; color: var(--hm-text-2); }
.hm-story-card-head h2 { font-size: var(--hm-fs-h2); margin-top: 2px; }
.hm-story-card > p { font-size: var(--hm-fs-dense); line-height: 1.65; color: var(--hm-text-1); max-width: 62ch; }
.hm-story-note { margin-top: 12px; padding: 11px 13px; background: var(--g-bg); border-radius: var(--hm-r-sm); font-size: var(--hm-fs-sub); }
.hm-tags--story { margin-top: 14px; }

.hm-private-card {
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-ink);
  color: var(--hm-on-dark-1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
.hm-private-icon { width: 46px; height: 46px; border-radius: var(--hm-r-sm); display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: 22px; }
.hm-private-card small { font-size: var(--hm-fs-micro); font-weight: 800; letter-spacing: .07em; color: var(--hm-on-dark-2); }
.hm-private-card h3 { font-size: var(--hm-fs-dense); color: var(--hm-on-dark-1); margin-top: 3px; }
.hm-private-card p { margin-top: 6px; font-size: var(--hm-fs-micro); line-height: 1.5; color: var(--hm-on-dark-2); }

/* ========================================================== 10 ACTIVITY === */

/* Grove-first activity overview: content hierarchy, not decorative artwork. */
.hm-activity-overview {
  margin: 0 0 14px;
  padding: 18px;
  border: 0;
  border-radius: var(--g-radius-lg);
  background: var(--g-surface);
  box-shadow: none;
  display: grid;
  gap: 16px;
}
.hm-activity-overview-copy { display: grid; gap: 6px; }
.hm-activity-mode-label {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: var(--g-radius-pill);
  background: var(--g-soft);
  color: var(--g-on-soft);
  font-size: var(--hm-fs-micro);
  font-weight: 700;
}
.hm-activity-overview h1 {
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.08;
  color: var(--g-ink);
  max-width: none;
}
.hm-activity-overview p {
  max-width: 42ch;
  color: var(--g-muted);
  font-size: var(--hm-fs-sub);
  line-height: 1.5;
}

.hm-activity-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--g-border);
  padding-top: 14px;
}
.hm-activity-metrics > div {
  min-width: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hm-activity-metrics > div:first-child { padding-left: 0; }
.hm-activity-metrics > div + div { border-left: 1px solid var(--g-border); }
.hm-activity-metrics span {
  order: 1;
  font-size: var(--hm-fs-micro);
  font-weight: 600;
  color: var(--g-muted);
}
.hm-activity-metrics strong {
  order: 2;
  display: block;
  font-family: var(--hm-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.08;
  color: var(--g-ink);
  font-variant-numeric: tabular-nums;
}

/* Activity uses Grove's tab language: flat, aligned, clear selected underline. */
.hm-seg.g-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 0;
  margin: 0 0 12px;
  border-radius: 0;
  border-bottom: 1px solid var(--g-border);
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}
.hm-seg.g-tabs::-webkit-scrollbar { display: none; }
.hm-seg.g-tabs .hm-seg-ind { display: none; }
.hm-seg.g-tabs [role="tab"] {
  flex: 1 1 0;
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 11px 12px 9px;
  background: transparent;
  color: var(--g-muted);
  font-size: var(--hm-fs-sub);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: color var(--g-duration-normal) var(--g-ease), border-color var(--g-duration-normal) var(--g-ease);
}
.hm-seg.g-tabs [role="tab"][aria-selected="true"] {
  color: var(--g-link);
  border-bottom-color: var(--g-link);
}
.hm-seg.g-tabs [role="tab"] b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--g-radius-pill);
  background: var(--g-surface);
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 700;
}
.hm-seg.g-tabs [role="tab"][aria-selected="true"] b {
  background: var(--g-soft);
  color: var(--g-on-soft);
}
.hm-seg-panel { animation: hm-fade var(--hm-base) var(--hm-ease) both; }
.hm-activity-tabs { margin-bottom: 12px; }

/* Activity items follow the Grove card/list vocabulary — no coloured side rail. */
.hm-activity-stack { display: grid; gap: 8px; }
.hm-activity-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--g-radius-lg);
  background: var(--g-surface);
  padding: 16px;
  box-shadow: none;
  animation: hm-rise var(--hm-base) var(--hm-ease) both;
  transition: background-color var(--g-duration-normal) var(--g-ease), transform var(--g-duration-fast) var(--g-ease);
}
.hm-activity-card:active { transform: scale(.992); }
.hm-activity-card:nth-child(2) { animation-delay: 30ms; }
.hm-activity-card:nth-child(3) { animation-delay: 56ms; }
.hm-activity-card:nth-child(n+4) { animation-delay: 78ms; }
.hm-activity-card::before { content: none !important; }

.hm-activity-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start; }
.hm-activity-photo, .hm-activity-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: var(--g-radius-md) !important;
  overflow: hidden;
  background: var(--g-soft);
  color: var(--g-on-soft);
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 700;
}
.hm-activity-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-activity-copy { min-width: 0; }
.hm-activity-kicker {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--g-link);
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  margin-bottom: 2px;
}
.hm-activity-card--invitation .hm-activity-kicker { color: var(--g-warning); }
.hm-activity-copy h3 { font-size: var(--hm-fs-h3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-activity-copy p { margin-top: 3px; font-size: var(--hm-fs-sub); color: var(--g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-activity-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--g-border);
  color: var(--g-muted);
  font-size: var(--hm-fs-micro);
}
.hm-activity-actions { display: flex; gap: 6px; margin-left: auto; }
.hm-activity-actions .g-btn { min-height: 44px; padding: 9px 15px; font-size: var(--hm-fs-sub); }

/* ============================================================== 11 CHAT === */

.hm-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.hm-root--shell .hm-chat { height: 100% !important; min-height: 0 !important; }

.hm-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px var(--hm-gutter);
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--hm-surface-3) transparent;
}
.hm-chat-messages::-webkit-scrollbar { width: 8px; }
.hm-chat-messages::-webkit-scrollbar-thumb { background: var(--hm-surface-3); border-radius: 99px; }

.hm-chat-day {
  align-self: center;
  margin: 8px 0;
  padding: 5px 12px;
  border-radius: var(--hm-r-pill);
  background: var(--hm-surface-2);
  color: var(--hm-text-2);
  font-size: var(--hm-fs-micro);
  font-weight: 700;
}

.hm-bubble {
  max-width: 80%;
  padding: 10px 14px 8px;
  border-radius: 20px 20px 20px 7px;
  background: var(--hm-surface-2);
  color: var(--hm-text-1);
  align-self: flex-start;
  font-size: var(--hm-fs-dense);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: hm-bubble-in 220ms var(--hm-ease) both;
}
.hm-bubble.is-me {
  align-self: flex-end;
  background: var(--g-soft);
  color: var(--g-on-soft);
  border-radius: 20px 20px 7px 20px;
  /* A near-neutral brand colour would make the two sides converge, so the
     outgoing bubble also carries a faint brand-derived edge. Side, tail and
     tint then give three independent cues. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-link) 16%, transparent);
}
.hm-bubble + .hm-bubble { margin-top: 0; }
.hm-bubble time {
  display: block;
  margin-top: 4px;
  font-size: var(--hm-fs-micro);
  color: var(--hm-text-2);
  opacity: .95;
  font-variant-numeric: tabular-nums;
}
.hm-bubble.is-me time { color: var(--g-on-soft); opacity: .72; }
.hm-bubble[data-pending="true"] { opacity: .6; }
.hm-bubble-retry {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: var(--hm-r-pill);
  background: var(--hm-stop-bg); color: var(--hm-stop);
  font-size: var(--hm-fs-micro); font-weight: 800;
}

/* Translation is secondary content: quiet affordance, clear labelling. */
.hm-translate-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  min-height: 44px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--hm-r-pill);
  background: rgba(0, 0, 0, .05);
  color: var(--hm-text-2);
  font-size: var(--hm-fs-micro);
  font-weight: 700;
}
.hm-translate-link .hm-emoji { font-size: 13px; }
.hm-message-translation {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: var(--hm-r-sm);
  background: rgba(0, 0, 0, .045);
  font-size: var(--hm-fs-dense);
  line-height: 1.5;
  white-space: pre-wrap;
}
.hm-message-translation small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: var(--hm-fs-micro);
  font-weight: 700;
  color: var(--hm-text-2);
  text-transform: none;
  letter-spacing: 0;
}
.hm-message-original { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(0, 0, 0, .08); color: var(--hm-text-2); font-size: var(--hm-fs-sub); }

/* --- Quick replies -------------------------------------------------------- */
.hm-quick-replies {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px var(--hm-gutter);
  background: var(--g-bg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  border-top: 1px solid var(--hm-hairline);
}
.hm-quick-replies::-webkit-scrollbar { display: none; }
.hm-quick-label {
  flex: none;
  align-self: center;
  padding: 0 10px 0 0;
  color: var(--hm-text-2);
  font-size: var(--hm-fs-micro);
  font-weight: 800;
  white-space: nowrap;
}
.hm-quick-replies button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--hm-hairline);
  border-radius: var(--hm-r-pill);
  background: var(--g-bg);
  color: var(--hm-text-1);
  font-size: var(--hm-fs-sub);
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
}
.hm-quick-replies button .hm-emoji { font-size: 16px; }
.hm-quick-replies button:active { transform: scale(.96); background: var(--hm-surface-1); }

/* --- Composer ------------------------------------------------------------- */
.hm-compose {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 9px var(--hm-gutter) max(9px, var(--hm-safe-b));
  background: var(--g-bg);
  border-top: 1px solid var(--hm-hairline);
}
.hm-compose textarea {
  resize: none;
  max-height: 132px;
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--hm-hairline);
  border-radius: 23px;
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  padding: 12px 16px;
  font-size: var(--hm-fs-body);
  line-height: 1.4;
  outline: 0;
  transition: border-color var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease), box-shadow var(--hm-fast) var(--hm-ease);
}
.hm-compose textarea:focus {
  background: var(--g-bg);
  border-color: var(--g-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-focus) 16%, transparent);
}
.hm-compose button[type="submit"] {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--g-accent);
  color: var(--g-on-accent);
  display: grid; place-items: center;
  flex: none;
  transition: transform var(--hm-fast) var(--hm-ease), opacity var(--hm-fast) var(--hm-ease);
}
.hm-compose button[type="submit"] .g-icon { width: 21px; height: 21px; }
.hm-compose button[type="submit"]:active { transform: scale(.92); }
.hm-compose button[type="submit"]:disabled { opacity: .45; }

/* --- Inbox rows ----------------------------------------------------------- */
.hm-message-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 2px;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  text-decoration: none;
  transition: background-color var(--hm-fast) var(--hm-ease);
}
.hm-message-row:hover { background: var(--hm-surface-2); }
.hm-message-row strong { display: block; font-size: var(--hm-fs-dense); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-message-row .hm-avatar { width: 48px; height: 48px; font-size: 16px; }
.hm-message-preview {
  color: var(--hm-text-2);
  font-size: var(--hm-fs-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-message-row .hm-unread {
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 99px;
  background: var(--hm-stop);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
}

/* ================================================= 12 FORMS, MEDIA, MAP === */

.hm-form-stack { display: grid; gap: 16px; }
.hm-form-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.helpermatch-app .g-field { display: grid; gap: 7px; }
.helpermatch-app .g-field label,
.helpermatch-app .g-label {
  font-size: var(--hm-fs-sub);
  font-weight: 700;
  color: var(--hm-text-1);
}
.helpermatch-app .g-field input:not([type=checkbox]):not([type=radio]):not([type=range]),
.helpermatch-app .g-field select,
.helpermatch-app .g-field textarea {
  width: 100%;
  min-height: 50px;
  font-size: var(--hm-fs-body);       /* 16px — stops iOS zoom-on-focus */
  background: var(--hm-surface-1);
  border: 1px solid var(--hm-hairline);
  border-radius: var(--hm-r-sm);
  color: var(--hm-text-1);
  padding: 12px 14px;
  transition: border-color var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease), box-shadow var(--hm-fast) var(--hm-ease);
}
.helpermatch-app .g-field textarea { min-height: 108px; line-height: 1.55; resize: vertical; }
.helpermatch-app .g-field input:focus,
.helpermatch-app .g-field select:focus,
.helpermatch-app .g-field textarea:focus {
  outline: none;
  background: var(--g-bg);
  border-color: var(--g-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-focus) 18%, transparent);
}
.helpermatch-app .g-field [aria-invalid="true"] { border-color: var(--hm-stop); border-width: 2px; }
.helpermatch-app .g-field .g-help { font-size: var(--hm-fs-sub); color: var(--hm-text-2); line-height: 1.45; }
.helpermatch-app .g-field .g-help--error {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--hm-stop); font-weight: 700;
}
.helpermatch-app .g-choice { align-items: flex-start; min-height: 44px; gap: 12px; }
.helpermatch-app .g-choice input { margin-top: 3px; }

.hm-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.hm-fieldset > legend {
  font-family: var(--hm-display);
  font-size: var(--hm-fs-h3);
  font-weight: 600;
  padding: 0;
  margin-bottom: 2px;
}
.hm-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Selectable option grid (skills, languages) */
.hm-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-skill-option { position: relative; }
.hm-skill-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hm-skill-option > span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 12px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
  text-align: center;
  font-weight: 700;
  transition: background-color var(--hm-fast) var(--hm-ease), border-color var(--hm-fast) var(--hm-ease), transform var(--hm-fast) var(--hm-ease);
}
.hm-skill-option input:checked + span {
  background: var(--g-soft);
  border-color: var(--g-accent);
  color: var(--g-on-soft);
}
.hm-skill-option input:focus-visible + span { outline: 3px solid var(--g-focus); outline-offset: 2px; }
.hm-skill-option:active > span { transform: scale(.98); }
.hm-option-emoji { display: block; font-size: 30px; line-height: 1; font-weight: 400; }
.hm-option-text { display: block; font-size: var(--hm-fs-sub); font-weight: 700; }
.hm-skill-option input:checked + span .hm-option-emoji { animation: hm-pop 300ms var(--hm-spring); }

/* Onboarding progress */
.hm-progress-wrap { margin: 2px 0 20px; }
.hm-progress-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: var(--hm-fs-sub); font-weight: 700; color: var(--hm-text-2); }
.hm-progress-label b { color: var(--hm-text-1); }
.helpermatch-app .g-progress { height: 8px; border-radius: 99px; }
.hm-onboard-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.hm-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-choice-card {
  border: 0;
  background: var(--hm-surface-1);
  border-radius: var(--hm-r-xl);
  padding: 20px 16px;
  text-align: left;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  transition: transform var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
}
.hm-choice-card:active { transform: scale(.98); }
.hm-choice-card:hover { background: var(--hm-surface-2); }
.hm-choice-card--owner { background: var(--hm-blue-soft); color: var(--hm-blue-ink); }
.hm-choice-card--owner:hover { background: var(--hm-blue); }
.hm-choice-card--helper { background: var(--hm-yellow-soft); color: var(--hm-yellow-ink); }
.hm-choice-card--helper:hover { background: var(--hm-yellow); }
.hm-choice-emoji { display: block; font-size: 62px; line-height: 1; margin-bottom: auto; }
.hm-choice-card strong { font-family: var(--hm-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.hm-choice-card span:not(.hm-choice-emoji) { font-size: var(--hm-fs-sub); line-height: 1.45; opacity: .88; }

/* --- Media editors -------------------------------------------------------- */
.hm-media-block {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-surface-1);
}
.hm-media-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hm-media-block-head h3 { font-size: var(--hm-fs-h3); }
.hm-media-block-head p { margin-top: 3px; font-size: var(--hm-fs-sub); color: var(--hm-text-2); line-height: 1.45; max-width: 36ch; }

/* Avatar acts as the control; the real file input never shows. */
.hm-avatar-button {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  flex: none;
  transition: transform var(--hm-fast) var(--hm-ease);
}
.hm-avatar-button:active { transform: scale(.95); }
.hm-avatar-button .hm-avatar { width: 76px; height: 76px; font-size: 24px; }
.hm-avatar-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--g-accent);
  color: var(--g-on-accent);
  display: grid; place-items: center;
  border: 3px solid var(--hm-surface-1);
}
.hm-avatar-badge .g-icon { width: 14px; height: 14px; }
.hm-media-state {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--hm-fs-sub); font-weight: 700; color: var(--hm-text-2);
}
.hm-media-state .g-spinner { width: 16px; height: 16px; }
.hm-media-state[data-state="error"] { color: var(--hm-stop); }
.hm-media-state[data-state="done"] { color: var(--hm-ok); }

.hm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-gallery-item { aspect-ratio: 1; border-radius: var(--hm-r-sm); overflow: hidden; background: var(--g-bg); position: relative; }
.hm-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-gallery-remove {
  position: absolute; right: 5px; top: 5px;
  width: 32px; height: 32px;
  z-index: 2;
  border: 0; border-radius: 50%;
  background: rgba(11, 40, 29, .84);
  color: #fff;
  display: grid; place-items: center;
}
.hm-gallery-remove .g-icon { width: 16px; height: 16px; }
/* Small badge, full-size hit area — the tile is only 4:5 of a third of the row. */
.hm-gallery-remove::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.hm-gallery-add {
  aspect-ratio: 1;
  border: 1.5px dashed var(--hm-surface-3);
  border-radius: var(--hm-r-sm);
  background: var(--g-bg);
  display: grid; place-items: center; align-content: center; gap: 4px;
  text-align: center; padding: 8px;
  color: var(--g-link);
  font-size: var(--hm-fs-micro); font-weight: 800;
  cursor: pointer;
}
.hm-gallery-add input { display: none; }

/* Job photos: three elegant 4:5 tiles. */
.hm-job-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-job-photo-item, .hm-job-photo-add {
  aspect-ratio: 4 / 5;
  border-radius: var(--hm-r-md);
  overflow: hidden;
  position: relative;
  background: var(--g-bg);
}
.hm-job-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-job-photo-item[data-busy="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .6);
}
.hm-job-photo-add {
  border: 1.5px dashed var(--hm-surface-3);
  display: grid; place-items: center; align-content: center; gap: 5px;
  text-align: center; padding: 8px;
  color: var(--g-link); font-weight: 800;
  cursor: pointer;
}
.hm-job-photo-add .g-icon { width: 22px; height: 22px; }
.hm-job-photo-add span { font-size: var(--hm-fs-micro); }
.hm-job-photo-add small { font-size: 11px; color: var(--hm-text-2); font-weight: 600; }
.hm-job-photo-add input { display: none; }

/* --- Map ------------------------------------------------------------------ */
.hm-location-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--hm-r-lg); background: var(--hm-surface-1); }
.hm-location-card h3 { font-size: var(--hm-fs-h3); }
.hm-map {
  height: 260px;
  border-radius: var(--hm-r-md);
  overflow: hidden;
  background: var(--hm-mint-soft);
  isolation: isolate;
}
.hm-map .leaflet-control-attribution { font-size: 10px !important; padding: 3px 6px !important; }
/* Map controls need real touch targets and contrast against the basemap. */
.hm-map .leaflet-bar a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 20px !important;
  color: var(--hm-text-1) !important;
  background: rgba(255, 255, 255, .96) !important;
}
.hm-map .leaflet-bar { box-shadow: var(--hm-e-1) !important; border: 0 !important; border-radius: var(--hm-r-sm) !important; overflow: hidden; }
.hm-map-hint { font-size: var(--hm-fs-sub); color: var(--hm-text-2); line-height: 1.45; }
.hm-map-coords { font-size: var(--hm-fs-micro); color: var(--hm-text-2); font-family: var(--g-mono); overflow-wrap: anywhere; }
.hm-location-private {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--hm-r-sm);
  background: var(--hm-mint-soft);
  color: var(--hm-mint-ink);
  font-size: var(--hm-fs-sub);
  line-height: 1.5;
  font-weight: 600;
}
.hm-map-pin {
  background: var(--g-accent);
  border: 3px solid var(--hm-ink);
  border-radius: 50% 50% 50% 0;
  width: 28px !important; height: 28px !important;
  transform: rotate(-45deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

/* ==================================== 13 SHEETS, STATES & MISCELLANEOUS === */

/* --- Bottom sheets -------------------------------------------------------- */
.hm-sheet-overlay {
  position: fixed;
  z-index: 60;
  top: 0; bottom: 0;
  left: 50%;
  width: min(100%, var(--hm-app-w));
  transform: translateX(-50%);
  background: rgba(11, 40, 29, .52);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 10px max(10px, var(--hm-safe-b));
  animation: hm-fade 180ms var(--hm-ease) both;
}
.hm-sheet {
  width: 100%;
  max-height: min(82dvh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--g-bg);
  border-radius: var(--hm-r-xl);
  padding: 10px 18px 20px;
  box-shadow: 0 -12px 50px rgba(11, 40, 29, .24);
  animation: hm-sheet-in var(--hm-slow) var(--hm-spring) both;
}
.hm-sheet::before {
  content: "";
  display: block;
  width: 38px; height: 4px;
  border-radius: 99px;
  background: var(--hm-surface-3);
  margin: 2px auto 12px;
}
.hm-sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; min-height: 48px; }
.hm-sheet-head h2 { font-size: 22px; line-height:1.15; letter-spacing:-.025em; }
.hm-sheet-close {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  display: grid; place-items: center;
  flex: none;
}
.hm-sheet-actions { display: grid; gap: 9px; margin-top: 18px; }
.hm-sheet-actions p { font-size: var(--hm-fs-sub); color: var(--hm-text-2); line-height: 1.5; }

.hm-mode-option {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--hm-surface-1);
  border-radius: var(--hm-r-md);
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 72px;
  transition: background-color var(--hm-fast) var(--hm-ease), transform var(--hm-fast) var(--hm-ease);
}
.hm-mode-option:active { transform: scale(.985); }
.hm-mode-option[aria-current="true"] { background: var(--g-soft); color: var(--g-on-soft); }
.hm-mode-option b { font-family: var(--hm-display); font-size: 18px; font-weight: 600; line-height:1.15; }
.hm-mode-option small { display: block; margin-top: 3px; font-size: 13px; line-height:1.35; color: var(--hm-text-2); }
.hm-mode-option[aria-current="true"] small { color: var(--g-on-soft); opacity: .85; }
.hm-mode-option .hm-emoji { font-size: 38px; }

.hm-sheet-list { display: grid; gap: 8px; }
.hm-sheet-note { margin-top:14px; padding:12px 13px; border-radius:var(--hm-r-sm); background:var(--hm-surface-1); color:var(--hm-text-2); display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45; }
.hm-sheet-note .hm-emoji{font-size:18px;flex:none;margin-top:1px;}
.hm-sheet-note strong{color:var(--hm-text-1);}
.hm-sheet-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
  color: var(--hm-text-1);
  text-align: left;
  font-size: var(--hm-fs-dense);
  font-weight: 600;
  transition: background-color var(--hm-fast) var(--hm-ease);
}
.hm-sheet-item:hover { background: var(--hm-surface-2); }
.hm-sheet-item .hm-emoji { font-size: 20px; }
.hm-sheet-item--danger { color: var(--hm-stop); }

/* --- Skeletons ------------------------------------------------------------ */
.hm-skel {
  border-radius: var(--hm-r-xs);
  background: linear-gradient(100deg, var(--hm-surface-2) 30%, var(--hm-surface-1) 48%, var(--hm-surface-2) 62%);
  background-size: 260% 100%;
  background-position-x: 160%;
  animation: hm-shimmer 1.5s ease-in-out infinite;
}
.hm-skel-stack { display: grid; gap: 8px; }
.hm-skel-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 11px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-surface-1);
}
.hm-skel-card .hm-skel--media { width: 58px; height: 72px; border-radius: var(--hm-r-sm); }
.hm-skel-lines { display: grid; gap: 7px; align-content: start; padding-top: 4px; }
.hm-skel-lines .hm-skel { height: 12px; }
.hm-skel-lines .hm-skel:nth-child(1) { width: 58%; height: 15px; }
.hm-skel-lines .hm-skel:nth-child(2) { width: 40%; }
.hm-skel-lines .hm-skel:nth-child(3) { width: 74%; }
.hm-skel-hero { height: 210px; border-radius: var(--hm-r-lg); }
.hm-skel-block { height: 90px; border-radius: var(--hm-r-lg); }
@media (prefers-reduced-motion: reduce) {
  .hm-skel { animation: none !important; background: var(--hm-surface-2); }
}

.hm-spinner-wrap { display: grid; place-items: center; padding: 44px; }
.helpermatch-app .g-spinner { width: 20px; height: 20px; border-width: 2px; }

/* --- Empty states --------------------------------------------------------- */
.hm-empty {
  padding: 34px 20px 30px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  border-radius: var(--hm-r-lg);
  background: var(--hm-surface-1);
}
.hm-empty .emoji, .hm-empty .hm-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 2px;
  animation: hm-pop 420ms var(--hm-spring) both;
}
.hm-empty h2 { font-size: var(--hm-fs-h2); }
.hm-empty p { color: var(--hm-text-2); max-width: 34ch; font-size: var(--hm-fs-sub); line-height: 1.55; }
.hm-empty .g-btn { margin-top: 8px; }
.helpermatch-app .g-empty { padding: 34px 20px 30px; gap: 10px; }

/* --- Errors --------------------------------------------------------------- */
.hm-error {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 15px 16px;
  border-radius: var(--hm-r-md);
  background: var(--hm-stop-bg);
  color: var(--hm-stop);
  font-size: var(--hm-fs-dense);
  line-height: 1.5;
  margin: 10px 0;
}
.hm-error strong { display: flex; align-items: center; gap: 8px; font-size: var(--hm-fs-h3); font-family: var(--hm-display); font-weight: 600; }
.hm-error p { color: var(--hm-stop); }
.hm-error .g-btn { background: var(--hm-stop); color: #fff; min-height: 44px; }
.hm-error .g-btn:hover { background: #8E1825; }

.hm-offline {
  background: var(--hm-warn-bg);
  color: var(--hm-warn);
  padding: 9px 14px;
  text-align: center;
  font-size: var(--hm-fs-sub);
  font-weight: 700;
}

/* --- AI surfaces: always labelled, always reviewable ---------------------- */
.hm-ai-box {
  display: grid;
  gap: 8px;
  border-radius: var(--hm-r-md);
  padding: 14px;
  margin: 12px 0;
  background: var(--hm-aqua-soft);
  color: var(--hm-aqua-ink);
}
.hm-ai-box strong { display: flex; align-items: center; gap: 7px; font-size: var(--hm-fs-sub); font-weight: 800; }
.hm-ai-box p { white-space: pre-wrap; font-size: var(--hm-fs-dense); line-height: 1.55; }
.hm-ai-box small { font-size: var(--hm-fs-micro); opacity: .82; }
.hm-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Toast ---------------------------------------------------------------- */
.helpermatch-app .g-toast {
  position: fixed;
  bottom: calc(86px + var(--hm-safe-b));
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--hm-ink);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--hm-r-md);
  box-shadow: var(--hm-e-2);
  max-width: calc(min(100vw, var(--hm-app-w)) - 32px);
  width: max-content;
  font-size: var(--hm-fs-sub);
  line-height: 1.45;
  animation: hm-rise 200ms var(--hm-ease) both;
}
.helpermatch-app .g-toast:empty { display: none; }

/* --- Notifications -------------------------------------------------------- */
.helpermatch-app .g-notification {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-1);
}
.helpermatch-app .g-notification[data-read="true"] { background: transparent; }
.helpermatch-app .g-notification__dot { width: 9px; height: 9px; margin-top: 6px; background: var(--g-link); border-radius: 50%; flex: none; }
.helpermatch-app .g-notification[data-read="true"] .g-notification__dot { background: var(--hm-surface-3); }
.helpermatch-app .g-notification strong { font-size: var(--hm-fs-dense); font-weight: 700; line-height: 1.45; }
.helpermatch-app .g-notification .hm-meta { margin-top: 3px; font-size: var(--hm-fs-micro); }

/* --- Accordion (Help) ------------------------------------------------------ */
.helpermatch-app .g-accordion details { border: 0; border-radius: var(--hm-r-md); background: var(--hm-surface-1); margin-bottom: 4px; }
.helpermatch-app .g-accordion summary {
  font-size: var(--hm-fs-dense);
  font-weight: 700;
  padding: 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.helpermatch-app .g-accordion summary::-webkit-details-marker { display: none; }
.helpermatch-app .g-accordion details p { padding: 0 16px 16px; font-size: var(--hm-fs-sub); line-height: 1.6; color: var(--hm-text-2); }

.hm-danger-zone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hm-hairline); }
.hm-legal { font-size: var(--hm-fs-micro); color: var(--hm-text-2); margin-top: 12px; line-height: 1.5; }

/* ============================================== AUTHENTICATION & SPLASH === */

.hm-auth {
  min-height: 100dvh;
  padding: max(24px, calc(var(--hm-safe-t) + 12px)) var(--hm-gutter) max(24px, calc(var(--hm-safe-b) + 16px));
  display: flex;
  flex-direction: column;
  background: var(--g-bg);
  position: relative;
  overflow: hidden;
}
.hm-auth > * { position: relative; z-index: 1; }
.hm-auth-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none;
  color: var(--hm-text-1);
  font-family: var(--hm-display);
  font-size: var(--hm-fs-h3);
  font-weight: 600;
  align-self: flex-start;
  min-height: 44px;
}
.hm-auth-hero { padding: 34px 0 22px; display: grid; gap: 14px; }
.hm-auth-emoji { font-size: 64px; line-height: 1; width: max-content; animation: hm-pop 520ms var(--hm-spring) both; }
.hm-auth-hero h1 {
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 15ch;
}
.hm-auth-hero p { font-size: var(--hm-fs-body); line-height: 1.55; color: var(--hm-text-2); max-width: 40ch; }
.hm-auth-card {
  margin-top: auto;
  padding: 18px;
  border: 0;
  border-radius: var(--hm-r-xl);
  background: var(--hm-surface-1);
  box-shadow: var(--hm-e-2);
  display: grid;
  gap: 18px;
}
.hm-auth-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--hm-r-md);
  background: var(--hm-surface-2);
  overflow: visible;
  position: relative;
}
.hm-auth-tabs [role="tab"] {
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--hm-r-sm);
  padding: 10px 8px;
  background: transparent;
  color: var(--hm-text-2);
  font-size: var(--hm-fs-sub);
  font-weight: 700;
  transition: background-color var(--hm-base) var(--hm-ease), color var(--hm-base) var(--hm-ease);
}
.hm-auth-tabs [role="tab"][aria-selected="true"] {
  background: var(--g-bg);
  color: var(--hm-text-1);
  font-weight: 800;
  box-shadow: var(--hm-e-1);
}
.hm-auth-panel { display: grid; gap: 18px; }
/* A text link that is also a primary recovery path still needs a real target. */
.hm-auth-panel .g-link {
  display: inline-flex; align-items: center;
  min-height: 44px; width: max-content;
  font-size: var(--hm-fs-sub); font-weight: 700;
}
.hm-auth-footer { font-size: var(--hm-fs-micro); color: var(--hm-text-2); text-align: center; line-height: 1.5; }
.hm-auth-footer a { font-weight: 700; }
.hm-auth-success { padding: 18px 12px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.hm-auth-success .emoji { font-size: 62px; line-height: 1; animation: hm-pop 480ms var(--hm-spring) both; }

/* --- Splash: one entrance, min 2s, once per browser session --------------- */
.hm-splash {
  position: fixed;
  z-index: 100;
  inset: 0;
  margin: auto;
  width: min(100%, var(--hm-app-w));
  background: var(--hm-ink);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  overflow: hidden;
  transition: opacity var(--hm-slow) var(--hm-ease), visibility var(--hm-slow);
}
.hm-splash > * { position: relative; }
.hm-splash .hm-mark {
  width: 78px; height: 78px;
  border-radius: 24px;
  background: var(--g-accent);
  color: var(--g-on-accent);
  font-size: 30px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  animation: hm-pop 620ms var(--hm-spring) both;
}
.hm-splash .hm-mark--logo { background: #fff; padding: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.hm-splash strong {
  font-family: var(--hm-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.03em;
  animation: hm-rise 520ms var(--hm-ease) 120ms both;
}
.hm-splash span {
  max-width: 260px;
  color: var(--hm-on-dark-2);
  font-size: var(--hm-fs-dense);
  animation: hm-rise 520ms var(--hm-ease) 200ms both;
}
.hm-splash .g-spinner { opacity: .5; animation: hm-spin .9s linear infinite; }
.hm-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.hm-splash-seen .helpermatch-app .hm-splash { display: none !important; }

@media (min-width: 768px) {
  .hm-splash { height: calc(100dvh - 32px); top: 16px; bottom: 16px; border-radius: 34px; }
  .hm-sheet { border-radius: var(--hm-r-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-splash::before, .hm-splash .hm-mark, .hm-splash strong, .hm-splash span { animation: none !important; opacity: 1; }
  .hm-splash::before { opacity: .13; transform: none; }
}

/* ===================================================== NARROW VIEWPORTS === */

/* 320–360px: nothing may overflow horizontally. */
@media (max-width: 379px) {
  .helpermatch-app { --hm-gutter: 14px; }
  .hm-page-head h1 { font-size: 23px; }
  .hm-choice-grid, .hm-field-pair { grid-template-columns: 1fr; }
  .hm-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-mode-btn { max-width: 96px; padding-inline: 7px 8px; }
  .hm-mode-btn > span:nth-child(2) { display: none; }
  .hm-bottom { padding-inline: 2px; gap: 0; }
  .hm-bottom a { letter-spacing: -.015em; padding-inline: 0; }
  .hm-nav-ico { width: 44px; }
  .hm-activity-metrics { gap: 5px; }
  .hm-activity-metrics > div { padding: 10px 8px; }
  .hm-profile-facts { gap: 6px; }
  .hm-dcard-media .hm-avatar, .hm-dcard-photo { width: 52px; }
  .hm-profile-identity h1 { font-size: 26px; }
  .hm-profile-identity .hm-avatar { width: 66px; height: 66px; }
  .hm-profile-fact { min-height: 88px; padding: 10px; }
  .hm-profile-action { min-height: 100px; padding: 11px; }
  .hm-activity-metrics strong { font-size: 22px; }
  .hm-feature-hero h1 { font-size: 26px; }
  .hm-choice-emoji { font-size: 52px; }
}

@media (max-width: 340px) {
  .hm-skill-grid { grid-template-columns: 1fr; }
  .hm-skill-option > span { min-height: 60px; grid-auto-flow: column; justify-content: start; place-items: center; gap: 10px; padding-inline: 14px; }
  .hm-job-photo-grid, .hm-gallery { gap: 6px; }
}

/* Large text / browser zoom: the shell must not trap content. */
@media (min-height: 0px) {
  .hm-root--shell .hm-content { padding-bottom: max(28px, calc(var(--hm-safe-b) + 20px)); }
}


/* ======================================================== 14 MY JOBS === */
.hm-jobs-hero{
  margin:-16px calc(var(--hm-gutter) * -1) 8px;
  padding:22px var(--hm-gutter) 18px;
  background:linear-gradient(145deg,var(--hm-ink-2),var(--hm-ink));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hm-jobs-hero h1{font-size:32px;color:#fff;line-height:1.05;margin-top:3px;}
.hm-jobs-hero p{color:var(--hm-on-dark-2);font-size:14px;line-height:1.45;max-width:360px;margin-top:7px;}
.hm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--hm-on-dark-2);}
.hm-jobs-create{position:absolute;z-index:2;right:var(--hm-gutter);top:24px;min-height:44px;padding:8px 12px;border-radius:999px;background:var(--g-accent);color:var(--g-on-accent);display:flex;gap:7px;align-items:center;text-decoration:none;font-weight:800;font-size:13px;}
.hm-jobs-create .hm-emoji{font-size:18px;}
.hm-jobs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px;position:relative;z-index:2;}
.hm-jobs-stats>div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px 12px;backdrop-filter:blur(5px);}
.hm-jobs-stats strong{display:block;font-family:var(--hm-display);font-size:24px;line-height:1;color:#fff;}
.hm-jobs-stats span{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--hm-on-dark-2);}
.hm-my-jobs-list{display:grid;gap:10px;padding-bottom:10px;}
.hm-my-job-card{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:10px;border-radius:20px;background:var(--hm-surface-1);box-shadow:var(--hm-e-1);overflow:hidden;}
.hm-my-job-hit{position:absolute;inset:0;z-index:1;border-radius:inherit;}
.hm-my-job-media{width:78px;aspect-ratio:4/5;border-radius:14px;background:var(--hm-blue-soft);overflow:hidden;display:grid;place-items:center;font-size:34px;}
.hm-my-job-media img{width:100%;height:100%;object-fit:cover;}
.hm-my-job-body{min-width:0;display:grid;gap:7px;align-content:center;}
.hm-my-job-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;}
.hm-my-job-top>div{min-width:0;}
.hm-my-job-top h3{font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-my-job-top p{margin-top:2px;font-size:12px;color:var(--hm-text-2);}
.hm-job-state{flex:none;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;background:var(--hm-idle-bg);color:var(--hm-idle);text-transform:capitalize;}
.hm-job-state[data-state="live"]{background:var(--hm-ok-bg);color:var(--hm-ok);}
.hm-job-state[data-state="review"]{background:var(--hm-warn-bg);color:var(--hm-warn);}
.hm-job-state[data-state="filled"]{background:var(--hm-blue-soft);color:var(--hm-blue-ink);}
.hm-my-job-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--hm-text-2);}
.hm-my-job-meta span+span::before{content:"·";margin-right:8px;color:var(--hm-text-3);}
.hm-my-job-foot{display:flex;gap:8px;align-items:center;min-width:0;font-size:11px;color:var(--hm-text-2);}
.hm-my-job-foot b{color:var(--hm-text-1);}
.hm-pending-pill{padding:3px 7px;border-radius:999px;background:var(--hm-yellow-soft);color:var(--hm-yellow-ink);font-weight:800;}
.hm-job-edit{margin-left:auto;display:flex;align-items:center;gap:2px;color:var(--g-link);font-weight:800;}
.hm-job-edit .g-icon{width:16px;height:16px;}
.hm-match-context{width:100%;min-height:58px;margin:8px 0 12px;padding:10px 12px;border:0;border-radius:17px;background:var(--hm-ink);color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;text-decoration:none;}
.hm-match-context .hm-emoji{font-size:25px;}
.hm-match-context small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--hm-on-dark-2);font-weight:800;}
.hm-match-context strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-match-context .g-icon{width:18px;height:18px;}
.hm-match-context--empty{background:var(--hm-blue-soft);color:var(--hm-blue-ink);}
.hm-match-context--empty small{color:var(--hm-blue-ink);opacity:.75;}
@media(max-width:379px){.hm-jobs-create span{display:none}.hm-jobs-create{width:44px;padding:0;justify-content:center}.hm-my-job-card{grid-template-columns:68px minmax(0,1fr)}.hm-my-job-media{width:68px}.hm-my-job-meta{font-size:11px}}

/* ===================================================== v1.7 refinements === */
/* Reading text is always true regular weight. Headings, labels and actions
   keep their intentional semibold/bold hierarchy. */
.helpermatch-app,
.helpermatch-app p,
.helpermatch-app li,
.helpermatch-app .hm-sub,
.helpermatch-app .hm-meta,
.helpermatch-app .g-help,
.helpermatch-app .g-small,
.helpermatch-app .hm-message-text,
.helpermatch-app .hm-story-card p,
.helpermatch-app .hm-private-card p,
.helpermatch-app .hm-page-head p,
.helpermatch-app .hm-sec-head p,
.helpermatch-app .hm-section-heading p { font-weight: 400; }

/* Owner-only floating job creator. It belongs to the frozen app viewport,
   not to the scrolling centre, so it is always one tap away. */
.hm-app-shell { position: relative; }
.hm-app-shell--owner-fab .hm-content { padding-bottom: calc(92px + var(--hm-safe-b)); }
.hm-owner-fab {
  position: absolute;
  right: max(16px, var(--hm-gutter));
  bottom: calc(68px + max(8px, var(--hm-safe-b)));
  z-index: 8;
  min-height: 52px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--g-accent);
  color: var(--g-on-accent);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(14, 42, 32, .20), 0 2px 7px rgba(14, 42, 32, .10);
  transition: transform var(--hm-fast) var(--hm-spring), box-shadow var(--hm-fast) var(--hm-ease), background-color var(--hm-fast) var(--hm-ease);
  -webkit-tap-highlight-color: transparent;
}
.hm-owner-fab .g-icon { width: 22px; height: 22px; stroke-width: 2.5; }
.hm-owner-fab:active { transform: scale(.965); box-shadow: 0 6px 18px rgba(14, 42, 32, .18); }
.hm-owner-fab:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 3px; }
@media (hover:hover) {
  .hm-owner-fab:hover { background: var(--g-accent-hover); transform: translateY(-1px); box-shadow: 0 13px 32px rgba(14, 42, 32, .23); }
}
@media (max-width: 340px) {
  .hm-owner-fab { min-width: 52px; width: 52px; padding: 0; }
  .hm-owner-fab span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-owner-fab { transition: none; }
  .hm-owner-fab:hover, .hm-owner-fab:active { transform: none; }
}


/* Mail recovery link: keep secondary auth actions visually link-like. */
.helpermatch-app .hm-auth-links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.helpermatch-app .hm-link-button{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;font:inherit;color:var(--g-link);text-decoration:underline;cursor:pointer;min-height:44px}
.helpermatch-app .hm-link-button:disabled{opacity:.55;cursor:wait}

/* Owner jobs shortcut in the fixed header. */
.hm-jobs-shortcut{color:var(--hm-orange-ink);background:var(--hm-orange-soft);}
.hm-jobs-shortcut:hover,.hm-jobs-shortcut:focus-visible{background:var(--hm-orange);color:var(--hm-orange-ink);}
.hm-country-line{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--hm-text-2);}
.hm-country-flag{font-size:1.15em;line-height:1;}


/* =================================================== 16 GROVE CLEANUP === */
/* Remove the generic "AI landing-page" decoration language. Functional
   circles (avatars/status dots) are intentionally untouched. */
.hm-feature-hero::before,
.hm-feature-hero::after,
.hm-profile-hero:not(.has-cover)::after,
.hm-hero:not(.has-media)::after,
.hm-jobs-hero::after,
.hm-auth::before,
.hm-auth::after,
.hm-splash::before { content: none !important; display: none !important; }

/* Flat Grove surfaces replace decorative gradients when no photography exists. */
.hm-hero:not(.has-media) { background: var(--g-green-950); }
.hm-hero:not(.has-media)::before { background: rgba(0,0,0,.08); }
.hm-profile-hero:not(.has-cover) { background: var(--g-green-950); }
.hm-profile-hero:not(.has-cover) .hm-profile-hero-shade { background: rgba(0,0,0,.08); }
.hm-jobs-hero { background: var(--g-green-950); }
.hm-splash { background: var(--g-green-950); }
.hm-auth { background: var(--g-bg); }

/* My Jobs overview uses Grove structure rather than decorative backdrop art. */
.hm-jobs-hero {
  margin: 0 0 14px;
  padding: 18px;
  border-radius: var(--g-radius-lg);
  overflow: visible;
}
.hm-jobs-create { top: 16px; right: 16px; }
.hm-jobs-stats > div {
  background: rgba(255,255,255,.10);
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Product heroes stay content-first. No decorative blob layers. */
.hm-profile-hero,
.hm-hero,
.hm-feature-hero,
.hm-jobs-hero { isolation: auto; }

/* Keep dark surfaces visually quiet: hierarchy through spacing, not artwork. */
.hm-profile-hero { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .hm-activity-card { animation: none !important; transition: none !important; }
}

/* =============================================================================
   14 · MAGIC.CSS PROGRESSIVE MOTION
   The runtime capability check adds .hm-magic-ready only when CSS animations
   are supported and reduced motion is NOT requested. In that case Magic.css
   owns a few entrance/micro-interactions; the older fallback animations are
   suppressed so an element never animates twice. Without capability support,
   all original Grove/HelperMatch motion remains intact.
   ========================================================================== */
html.hm-magic-ready .helpermatch-app .hm-dcard:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-activity-card:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-bubble:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-sheet:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .g-toast:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-empty .hm-emoji:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-auth-emoji:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-auth-success .emoji:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-splash .hm-mark:not(.hm-magictime),
html.hm-magic-ready .helpermatch-app .hm-save.is-saved .g-icon:not(.hm-magictime) {
  animation: none;
}

/* Keep animations clipped to their own app surfaces so slide effects never
   create horizontal document scroll or leak outside a card/list region. */
html.hm-magic-ready .helpermatch-app .hm-cards,
html.hm-magic-ready .helpermatch-app .hm-seg-panel,
html.hm-magic-ready .helpermatch-app .hm-my-jobs-list,
html.hm-magic-ready .helpermatch-app .hm-chat-messages {
  overflow-x: clip;
}


/* ================================================= 14 RESPONSIVE WEB APP ===
   Phones keep the locked mobile experience. From tablet width upward the same
   routes render as a full web workspace: frozen left rail + frozen header +
   one scrolling main panel. No duplicate desktop application or route set. */

.hm-sidebar { display: none; }
.hm-header-lead { display: inline-flex; min-width: 44px; }
.hm-side-count[hidden], .hm-side-count:empty { display: none !important; }

@media (min-width: 768px) {
  .helpermatch-app { --hm-sidebar-w: clamp(208px, 23vw, 268px); }

  html,
  .helpermatch-body { background: var(--hm-surface-1) !important; }

  .helpermatch-page,
  .helpermatch-app,
  .helpermatch-body--locked .helpermatch-page,
  .helpermatch-body--locked .helpermatch-app {
    width: 100% !important;
    max-width: none !important;
    height: var(--hm-vh, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }


  .hm-root--free .hm-auth {
    width: min(100%, 560px);
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(18,60,45,.04);
  }

  .hm-root--shell .hm-app-shell {
    display: grid !important;
    grid-template-columns: var(--hm-sidebar-w) minmax(0, 1fr) !important;
    grid-template-rows: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "sidebar header"
      "sidebar content" !important;
    height: 100% !important;
    background: var(--hm-surface-1);
  }

  .hm-sidebar {
    grid-area: sidebar;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px 14px 16px;
    background: var(--hm-ink);
    color: var(--hm-on-dark-1);
    overflow: hidden;
    z-index: 5;
  }

  .hm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 2px 8px 16px;
    color: var(--hm-on-dark-1);
    text-decoration: none;
  }
  .hm-sidebar-brand .hm-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    padding: 5px;
  }
  .hm-sidebar-brand .hm-mark:not(.hm-mark--logo) { color: var(--g-accent); padding: 0; }
  .hm-sidebar-brand strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hm-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
  }

  .hm-sidebar-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 4px 16px;
    padding: 10px 11px;
    border-radius: var(--hm-r-sm);
    background: rgba(255,255,255,.075);
  }
  .hm-sidebar-mode > .hm-emoji { font-size: 24px; }
  .hm-sidebar-mode span { min-width: 0; display: grid; }
  .hm-sidebar-mode small {
    color: var(--hm-on-dark-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
  }
  .hm-sidebar-mode strong { margin-top: 2px; font-size: 14px; font-weight: 750; }

  .hm-sidebar-nav { display: grid; gap: 4px; }
  .hm-side-link {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 4px 10px 4px 6px;
    border-radius: var(--hm-r-sm);
    color: var(--hm-on-dark-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: background-color var(--hm-fast) var(--hm-ease), color var(--hm-fast) var(--hm-ease), transform var(--hm-fast) var(--hm-ease);
  }
  .hm-side-link:hover { background: rgba(255,255,255,.075); color: var(--hm-on-dark-1); }
  .hm-side-link:active { transform: scale(.985); }
  .hm-side-link[aria-current="page"] {
    background: var(--g-accent);
    color: var(--g-on-accent);
    font-weight: 800;
  }
  .hm-side-ico {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
  }
  .hm-side-link[aria-current="page"] .hm-side-ico { background: rgba(255,255,255,.20); }
  .hm-side-ico .g-icon { width: 21px; height: 21px; }
  .hm-side-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    background: var(--hm-stop);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--hm-ink);
  }

  .hm-sidebar-newjob {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 14px 4px 0;
    padding: 10px 14px;
    border-radius: var(--hm-r-sm);
    background: var(--g-accent);
    color: var(--g-on-accent);
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
  }
  .hm-sidebar-newjob .g-icon { width: 19px; height: 19px; }
  .hm-sidebar-newjob:hover { filter: brightness(.98); }
  .hm-sidebar-newjob:active { transform: scale(.985); }
  .hm-sidebar-spacer { flex: 1 1 auto; min-height: 12px; }

  .hm-sidebar-account {
    width: 100%;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 18px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 8px;
    border: 0;
    border-radius: var(--hm-r-sm);
    background: rgba(255,255,255,.075);
    color: var(--hm-on-dark-1);
    text-align: left;
  }
  .hm-sidebar-account:hover { background: rgba(255,255,255,.11); }
  .hm-sidebar-account > span:nth-child(2) { min-width: 0; display: grid; }
  .hm-sidebar-account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 750; }
  .hm-sidebar-account small { margin-top: 2px; color: var(--hm-on-dark-2); font-size: 11px; }
  .hm-sidebar-account > .g-icon { width: 16px; height: 16px; color: var(--hm-on-dark-2); }
  .hm-side-avatar { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.12); }
  .hm-side-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .hm-side-avatar--mark .hm-mark { width: 40px; height: 40px; border-radius: 12px; background: transparent; box-shadow: none; }

  .hm-root--shell .hm-header {
    grid-area: header;
    width: 100% !important;
    min-height: 76px;
    padding: 12px clamp(22px, 2.6vw, 38px);
    border-radius: 0 !important;
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 0 var(--hm-hairline);
    z-index: 4;
  }
  .hm-app-shell[data-scrolled="true"] .hm-header {
    box-shadow: 0 1px 0 var(--hm-hairline), 0 8px 24px rgba(18,60,45,.05);
  }
  .hm-header-lead--account { display: none; }
  .hm-header-lead--back { min-width: 44px; }
  .hm-header-title strong { font-size: 22px; }
  .hm-header-title small { font-size: 11px; }
  .hm-header-actions { gap: 8px; }
  .hm-jobs-shortcut { display: none; }
  .hm-mode-btn { max-width: 160px; padding-inline: 12px; }

  .hm-root--shell .hm-content {
    grid-area: content;
    min-width: 0;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 30px clamp(24px, 3.2vw, 52px) 52px;
    background: var(--hm-surface-1);
    scroll-padding-top: 24px;
  }
  .hm-root--shell .hm-content > * {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .hm-root--shell .hm-content > .hm-chat { max-width: 980px; }
  .hm-root--shell .hm-bottom { display: none !important; }
  .hm-owner-fab { display: none !important; }

  .hm-page-head { margin-bottom: 20px; align-items: center; }
  .hm-page-head h1 { font-size: clamp(30px, 3vw, 38px); }
  .hm-page-head p { max-width: 64ch; font-size: 14px; }
  .hm-searchbar { gap: 10px; }
  .hm-chip-row { margin-inline: 0; padding-inline: 0; }

  .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hm-dcard { min-height: 116px; padding: 14px; gap: 14px; }
  .hm-dcard-media .hm-avatar { width: 66px; height: 66px; }
  .hm-dcard-photo { width: 66px; }

  .hm-my-jobs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hm-profile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hm-profile-hero { min-height: 310px; }
  .hm-story-card { padding: 22px; }

  .hm-sheet-overlay {
    left: var(--hm-sidebar-w);
    right: 0;
    width: auto;
    transform: none;
    align-items: center;
    padding: 28px;
  }
  .hm-sheet {
    width: min(560px, calc(100vw - var(--hm-sidebar-w) - 56px));
    max-height: min(78dvh, 760px);
    border-radius: var(--hm-r-xl);
    padding: 12px 22px 24px;
    box-shadow: var(--hm-e-2), 0 24px 80px rgba(11,40,29,.22);
  }
  .hm-sheet::before { display: none; }

  .helpermatch-app .g-toast {
    left: calc(var(--hm-sidebar-w) + (100vw - var(--hm-sidebar-w)) / 2);
    bottom: 28px;
    max-width: min(520px, calc(100vw - var(--hm-sidebar-w) - 48px));
  }

  .hm-splash {
    width: 100vw;
    height: 100dvh;
    top: 0;
    bottom: 0;
    border-radius: 0;
  }
}

@media (min-width: 1180px) {
  .hm-root--shell .hm-app-shell { --hm-sidebar-w: 252px; }
  .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-my-jobs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-profile-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-activity-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Phone layout is intentionally locked. No tablet/desktop chrome below 768px. */
@media (max-width: 767px) {
  .helpermatch-app {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hm-sidebar { display: none !important; }
}

/* ================================================= 15 DESKTOP WORKSPACE V2 ===
   A real web-app composition for tablet/desktop. The phone UI remains locked
   below 768px; these rules deliberately do not leak into the mobile shell. */
@media (min-width: 768px) {
  .helpermatch-app {
    --hm-sidebar-w: 232px;
    --hm-web-bg: #F3F5F2;
    --hm-web-panel: #FFFFFF;
    --hm-web-border: #E4E9E5;
    --hm-web-shadow: 0 10px 28px rgba(18, 60, 45, .055);
  }

  .hm-root--shell .hm-app-shell {
    grid-template-columns: var(--hm-sidebar-w) minmax(0, 1fr) !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
  }

  .hm-sidebar {
    padding: 18px 12px 14px;
    background: #10291E;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .hm-sidebar-brand {
    min-height: 48px;
    padding: 0 8px 18px;
    gap: 10px;
  }
  .hm-sidebar-brand .hm-mark,
  .hm-side-avatar,
  .hm-side-avatar--mark .hm-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .hm-sidebar-brand strong { font-size: 19px; font-weight: 650; }
  .hm-sidebar-mode {
    margin: 0 2px 14px;
    padding: 10px 11px;
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .hm-sidebar-nav { gap: 3px; }
  .hm-side-link {
    min-height: 46px;
    padding: 4px 9px 4px 5px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
  }
  .hm-side-link[aria-current="page"] {
    background: color-mix(in srgb, var(--g-accent) 88%, white 12%);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
  }
  .hm-side-ico { width: 38px; height: 38px; border-radius: 10px; }
  .hm-side-link[aria-current="page"] .hm-side-ico { background: rgba(255,255,255,.22); }
  .hm-sidebar-newjob {
    min-height: 44px;
    margin: 13px 2px 0;
    border-radius: 12px;
    box-shadow: none;
  }
  .hm-sidebar-account {
    min-height: 56px;
    padding: 8px;
    border-radius: 13px;
  }

  .hm-root--shell .hm-header {
    min-height: 72px;
    padding: 10px clamp(22px, 2.4vw, 36px);
    background: rgba(255,255,255,.985);
    border-bottom: 1px solid var(--hm-web-border);
    box-shadow: none;
  }
  .hm-app-shell[data-scrolled="true"] .hm-header {
    box-shadow: 0 8px 22px rgba(17,45,33,.035);
  }
  .hm-header-title strong { font-size: 21px; font-weight: 650; }
  .hm-header-title small { color: var(--hm-text-2); font-size: 10px; letter-spacing: .08em; }
  .hm-header-actions { gap: 10px; }
  .hm-mode-btn {
    min-height: 44px;
    border-radius: 12px;
    background: var(--g-soft);
    color: var(--g-on-soft);
    border: 0;
  }
  .hm-header .hm-icon-btn { background: var(--hm-surface-1); border: 1px solid transparent; }
  .hm-header .hm-icon-btn:hover { background: var(--hm-surface-2); border-color: var(--hm-web-border); }

  .hm-root--shell .hm-content {
    padding: 30px clamp(26px, 3vw, 48px) 48px;
    background: var(--hm-web-bg);
  }
  .hm-root--shell .hm-content > * { max-width: 1360px; }
  .hm-page-head { margin: 0 0 22px; }
  .hm-page-head h1 {
    font-size: clamp(30px, 2.6vw, 42px);
    font-weight: 650;
    letter-spacing: -.035em;
  }
  .hm-page-head p { margin-top: 6px; font-size: 15px; color: var(--hm-text-2); }

  /* Search/filter bar becomes a proper desktop control panel. */
  .hm-searchbar {
    padding: 14px 16px 10px;
    margin: 0;
    border: 1px solid var(--hm-web-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--hm-web-panel);
    box-shadow: var(--hm-web-shadow);
  }
  .hm-search {
    min-height: 48px;
    padding-inline: 14px;
    border: 1px solid var(--hm-web-border);
    border-radius: 12px;
    background: var(--hm-surface-1);
  }
  .hm-search:focus-within {
    background: #fff;
    border-color: color-mix(in srgb, var(--g-accent) 60%, #B7C2BA);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 12%, transparent);
  }
  .hm-filter-btn {
    width: 48px; height: 48px;
    border: 1px solid var(--hm-web-border);
    background: #fff;
    border-radius: 12px;
  }
  .hm-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 2px 16px 15px;
    border: 1px solid var(--hm-web-border);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: var(--hm-web-panel);
    box-shadow: var(--hm-web-shadow);
  }
  .hm-chip-row .hm-chip { min-height: 38px; padding: 0 13px; background: var(--hm-surface-1); }

  /* Discovery and Saved become genuine marketplace cards instead of stretched
     mobile rows. */
  .hm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  .hm-dcard {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 320px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hm-web-border);
    border-radius: 18px;
    background: var(--hm-web-panel);
    box-shadow: 0 8px 24px rgba(17,45,33,.045);
  }
  .hm-dcard:hover {
    background: #fff;
    transform: translateY(-2px);
    border-color: #D9E1DB;
    box-shadow: 0 14px 34px rgba(17,45,33,.075);
  }
  .hm-dcard-media {
    width: 100%;
    height: 164px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--hm-mint-soft), var(--hm-blue-soft));
  }
  .hm-dcard-media .hm-avatar,
  .hm-dcard-photo {
    width: 100% !important;
    height: 164px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    font-size: 34px;
  }
  .hm-dcard-media .hm-avatar img,
  .hm-dcard-photo img { width: 100%; height: 100%; object-fit: cover; }
  .hm-dcard-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px 16px 16px;
  }
  .hm-dcard-head { align-items: start; }
  .hm-dcard-name { font-size: 19px; line-height: 1.15; }
  .hm-dcard-meta { font-size: 13px; }
  .hm-dcard .hm-chips--row { min-height: 31px; }
  .hm-dcard-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #EEF1EF;
    font-size: 12px;
  }
  .hm-dcard-foot strong { font-size: 14px; }
  .hm-dcard .hm-save {
    width: 38px; height: 38px;
    background: #fff;
    border: 1px solid var(--hm-web-border);
    box-shadow: 0 4px 14px rgba(17,45,33,.06);
  }

  /* Owner multi-job cards match the same dashboard vocabulary. */
  .hm-my-jobs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .hm-my-job-card {
    grid-template-columns: 118px minmax(0,1fr);
    min-height: 150px;
    padding: 0;
    border: 1px solid var(--hm-web-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-my-job-media { width: 118px; height: 100%; min-height: 150px; border-radius: 0; }
  .hm-my-job-body { padding: 15px 16px; }

  /* Activity behaves like a dashboard, not a wide mobile card. */
  .hm-activity-overview {
    grid-template-columns: minmax(260px, 1.3fr) minmax(340px, 1fr);
    align-items: center;
    gap: 28px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--hm-web-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-activity-overview h1 { font-size: 28px; }
  .hm-activity-overview p { max-width: 52ch; }
  .hm-activity-metrics {
    border: 1px solid var(--hm-web-border);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    background: var(--hm-surface-1);
  }
  .hm-activity-metrics > div { padding: 16px 18px; }
  .hm-activity-metrics > div + div { border-left-color: var(--hm-web-border); }
  .hm-activity-metrics strong { font-size: 26px; }
  .hm-seg.g-tabs {
    padding: 0 6px;
    margin-bottom: 16px;
    border: 1px solid var(--hm-web-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
  }
  .hm-seg.g-tabs [role="tab"] { border-bottom-width: 3px; min-height: 52px; }
  .hm-activity-stack { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .hm-activity-card {
    padding: 16px;
    border: 1px solid var(--hm-web-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(17,45,33,.04);
  }
  .hm-activity-card:hover { background: #fff; border-color: #D7E0D9; box-shadow: 0 10px 28px rgba(17,45,33,.065); }

  /* Profile is a dashboard hub on web. */
  .hm-profile-hero {
    min-height: 250px;
    border-radius: 20px;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-profile-facts { gap: 14px; }
  .hm-profile-fact {
    min-height: 116px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, currentColor 5%, transparent);
  }
  .hm-primary-action,
  .hm-profile-action,
  .hm-story-card,
  .hm-private-card {
    border: 1px solid var(--hm-web-border);
    box-shadow: 0 6px 20px rgba(17,45,33,.035);
  }
  .hm-profile-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hm-action-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

  /* Messages index: real split inbox. */
  .hm-messages-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    min-height: min(720px, calc(100dvh - 150px));
    overflow: hidden;
    border: 1px solid var(--hm-web-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-inbox-panel {
    min-width: 0;
    padding: 20px 14px 14px;
    border-right: 1px solid var(--hm-web-border);
    background: #fff;
  }
  .hm-inbox-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 16px;
  }
  .hm-inbox-head h1 { margin-top: 2px; font-size: 28px; }
  .hm-inbox-head p { margin-top: 4px; color: var(--hm-text-2); font-size: 13px; }
  .hm-kicker { color: var(--g-link); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .hm-inbox-head-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--g-soft);
    color: var(--g-on-soft);
  }
  .hm-inbox-head-icon .g-icon { width: 20px; height: 20px; }
  .hm-inbox-search {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 4px 12px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--hm-surface-1);
    border: 1px solid var(--hm-web-border);
  }
  .hm-inbox-search input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: var(--hm-text-1); }
  .hm-inbox-welcome {
    min-width: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 48px;
    text-align: center;
    background: linear-gradient(145deg, #FAFCFA, #F4F7F5);
  }
  .hm-inbox-welcome-icon {
    width: 72px; height: 72px;
    display: grid; place-items: center;
    border-radius: 20px;
    background: var(--hm-mint-soft);
    color: var(--hm-mint-ink);
  }
  .hm-inbox-welcome-icon .g-icon { width: 30px; height: 30px; }
  .hm-inbox-welcome h2 { font-size: 27px; }
  .hm-inbox-welcome p { max-width: 42ch; color: var(--hm-text-2); line-height: 1.6; }
  .hm-inbox-tips { display: grid; gap: 8px; margin-top: 12px; color: var(--hm-text-2); font-size: 13px; text-align: left; }

  .hm-thread-list { display: grid; gap: 4px; }
  .hm-thread-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 76px;
    padding: 10px;
    border-radius: 13px;
    color: var(--hm-text-1);
    text-decoration: none;
    transition: background-color var(--hm-fast) var(--hm-ease), transform var(--hm-fast) var(--hm-ease);
  }
  .hm-thread-row:hover { background: var(--hm-surface-1); }
  .hm-thread-row.is-active { background: var(--g-soft); }
  .hm-thread-avatar {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: var(--hm-blue-soft);
    color: var(--hm-blue-ink);
    font-weight: 800;
  }
  .hm-thread-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hm-thread-copy { min-width: 0; display: grid; gap: 2px; }
  .hm-thread-top { min-width: 0; display: flex; gap: 8px; align-items: center; }
  .hm-thread-top strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .hm-thread-top time { flex: none; color: var(--hm-text-3); font-size: 10px; }
  .hm-thread-job { color: var(--g-link); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-thread-preview { color: var(--hm-text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-thread-unread { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--g-accent); color: var(--g-on-accent); font-size: 10px; }

  /* Conversation: inbox + message thread + context, all inside the fixed app
     shell. This is intentionally not the mobile conversation stretched wide. */
  .hm-content--chat {
    overflow: hidden !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .hm-content--chat > .hm-chat-workspace { max-width: 1440px; }
  .hm-chat-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--hm-web-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-chat-thread-panel {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 10px;
    border-right: 1px solid var(--hm-web-border);
    background: #fff;
  }
  .hm-chat-thread-panel-head { padding: 2px 8px 14px; }
  .hm-chat-thread-panel-head h2 { margin-top: 2px; font-size: 24px; }
  .hm-chat-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #F7F9F7;
  }
  .hm-chat-panel-head {
    flex: none;
    min-height: 74px;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hm-web-border);
    background: rgba(255,255,255,.98);
  }
  .hm-chat-person { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: center; }
  .hm-chat-person > span:last-child { min-width: 0; display: grid; }
  .hm-chat-person strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-chat-person small { margin-top: 2px; color: var(--hm-text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-chat-panel .hm-chat-messages {
    padding: 24px clamp(22px, 3vw, 44px);
    gap: 8px;
    background:
      radial-gradient(circle at 10% 5%, rgba(93,221,157,.06), transparent 26%),
      #F7F9F7;
  }
  .hm-chat-panel .hm-bubble { max-width: min(64%, 620px); }
  .hm-chat-panel .hm-quick-replies {
    padding: 9px 16px;
    border-top: 1px solid var(--hm-web-border);
    background: #fff;
  }
  .hm-chat-panel .hm-compose {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--hm-web-border);
    background: #fff;
  }
  .hm-chat-panel .hm-compose textarea { background: var(--hm-surface-1); border-color: var(--hm-web-border); }
  .hm-chat-blocked { margin: 14px 16px; }
  .hm-chat-context { display: none; }

  /* Legacy mobile message rows still appear on phones only; if any desktop
     template emits one, keep it contained rather than full-width. */
  .hm-message-row { border: 1px solid var(--hm-web-border); }
}

@media (min-width: 1120px) {
  .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-my-jobs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-profile-actions { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (min-width: 1380px) {
  .helpermatch-app { --hm-sidebar-w: 240px; }
  .hm-chat-workspace { grid-template-columns: 300px minmax(0,1fr) 270px; }
  .hm-chat-context {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    border-left: 1px solid var(--hm-web-border);
    background: #fff;
  }
  .hm-chat-context-card {
    padding: 16px;
    border: 1px solid var(--hm-web-border);
    border-radius: 15px;
    background: #fff;
  }
  .hm-chat-context-card--soft { background: var(--hm-surface-1); }
  .hm-chat-context-icon { display: inline-block; margin-bottom: 12px; font-size: 24px; }
  .hm-chat-context-card small { color: var(--g-link); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .hm-chat-context-card h3 { margin-top: 4px; font-size: 16px; }
  .hm-chat-context-card p { margin-top: 7px; color: var(--hm-text-2); font-size: 12px; line-height: 1.55; }
}

@media (min-width: 1720px) {
  .hm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile inbox rows introduced by the shared conversation-list renderer. */
@media (max-width: 767px) {
  .hm-thread-list { display: grid; gap: 3px; }
  .hm-thread-row {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 72px;
    padding: 10px 11px;
    border-radius: var(--hm-r-md);
    background: var(--hm-surface-1);
    color: var(--hm-text-1);
    text-decoration: none;
  }
  .hm-thread-avatar {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    overflow: hidden;
    border-radius: var(--hm-r-sm);
    background: var(--hm-blue-soft);
    color: var(--hm-blue-ink);
    font-weight: 800;
  }
  .hm-thread-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hm-thread-copy { min-width: 0; display: grid; gap: 2px; }
  .hm-thread-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .hm-thread-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hm-fs-dense); }
  .hm-thread-top time { flex: none; color: var(--hm-text-3); font-size: 10px; }
  .hm-thread-job { color: var(--g-link); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-thread-preview { color: var(--hm-text-2); font-size: var(--hm-fs-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-thread-unread { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--hm-stop); color: #fff; font-size: 10px; font-weight: 800; }
}

/* ================================================= 15 · COMPACT MEDIA + LIGHTBOX ===
   v1.12.1: keep phone layouts unchanged; make web lists denser and detail
   imagery intentionally secondary until the user opens it. */
.hm-detail-layout,
.hm-profile-layout,
.hm-profile-overview,
.hm-profile-main { display: contents; }

.hm-lightbox-trigger {
  position: relative;
  width: 100%; height: 100%; display: block;
  padding: 0; border: 0; background: transparent; cursor: zoom-in;
}
.hm-lightbox-trigger img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden;
  transition: opacity 160ms var(--hm-ease), visibility 160ms var(--hm-ease);
}
.hm-lightbox.is-open { opacity: 1; visibility: visible; }
.hm-lightbox.is-closing { opacity: 0; }
.hm-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,18,14,.88); backdrop-filter: blur(10px); }
.hm-lightbox-dialog {
  position: relative; z-index: 1;
  width: min(1120px, 94vw); height: min(820px, 90dvh);
  display: grid; grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  background: #101713; box-shadow: 0 28px 90px rgba(0,0,0,.38);
}
.hm-lightbox-top {
  min-height: 54px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px 8px 16px; color: rgba(255,255,255,.78);
}
.hm-lightbox-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-lightbox-close,
.hm-lightbox-nav {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff;
  cursor: pointer; transition: background-color 140ms ease, transform 140ms ease;
}
.hm-lightbox-close:hover,
.hm-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.hm-lightbox-close:active,
.hm-lightbox-nav:active { transform: scale(.96); }
.hm-lightbox-close .g-icon,
.hm-lightbox-nav .g-icon { width: 20px; height: 20px; }
.hm-lightbox-stage { min-height: 0; position: relative; display: grid; place-items: center; padding: 0 58px 24px; }
.hm-lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.hm-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.hm-lightbox-nav:active { transform: translateY(-50%) scale(.96); }
.hm-lightbox-nav--prev { left: 10px; }
.hm-lightbox-nav--next { right: 10px; }

@media (max-width: 767px) {
  .hm-lightbox-dialog { width: 100%; height: min(82dvh, 760px); border-radius: 16px; }
  .hm-lightbox-stage { padding-inline: 46px; }
}

@media (min-width: 768px) {
  /* Compact marketplace rows/cards: photography supports the listing rather
     than taking over the card. */
  .hm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hm-dcard {
    min-height: 132px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow: visible;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(17,45,33,.035);
  }
  .hm-dcard:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(17,45,33,.06); }
  .hm-dcard-media {
    width: 92px; height: 108px;
    align-self: start;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hm-surface-2);
  }
  .hm-dcard-media .hm-avatar,
  .hm-dcard-photo {
    width: 92px !important; height: 108px !important;
    max-width: 92px !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
  .hm-dcard-media .hm-avatar img,
  .hm-dcard-photo img { width: 100%; height: 100%; object-fit: cover; }
  .hm-dcard-main { min-width: 0; display: grid; gap: 6px; padding: 1px 0; align-content: start; }
  .hm-dcard-name { font-size: 17px; }
  .hm-dcard-meta { font-size: 12px; }
  .hm-dcard .hm-chips--row { min-height: 28px; gap: 5px; }
  .hm-dcard .hm-chip, .hm-dcard .hm-skill-mini { transform: scale(.94); transform-origin: left center; }
  .hm-dcard-foot {
    margin-top: auto; padding-top: 7px;
    border-top: 1px solid #EEF1EF;
    font-size: 11px;
  }
  .hm-dcard-foot strong { font-size: 13px; }
  .hm-dcard .hm-save { width: 34px; height: 34px; box-shadow: none; }

  /* Detail pages: web gets a compact media rail + information workspace. */
  .hm-detail-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .hm-detail-layout--helper > .hm-hero { grid-column: 1; grid-row: 1; }
  .hm-detail-layout--helper > .hm-detail-gallery { grid-column: 1; grid-row: 2; }
  .hm-detail-layout--helper > :not(.hm-hero):not(.hm-detail-gallery) { grid-column: 2; }

  .hm-detail-layout--job > .hm-job-hero-gallery { grid-column: 1; grid-row: 1; }
  .hm-detail-layout--job > .hm-detail-home-gallery { grid-column: 1; grid-row: 2; }
  .hm-detail-layout--job > :not(.hm-job-hero-gallery):not(.hm-detail-home-gallery) { grid-column: 2; }
  .hm-detail-layout--job.has-no-media { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
  .hm-detail-layout--job.has-no-media > * { grid-column: 1 !important; }

  .hm-detail-layout .hm-page-head { margin: 0 0 12px; }
  .hm-detail-layout .hm-page-head h1 { font-size: clamp(30px, 3vw, 42px); }
  .hm-detail-layout .hm-sec { padding-top: 14px; }
  .hm-detail-layout .hm-sec > h2 { margin-bottom: 8px; font-size: 21px; }
  .hm-detail-layout .hm-prose { padding: 13px 14px; border-radius: 13px; max-width: none; }
  .hm-detail-layout .hm-facts { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
  .hm-detail-layout .hm-fact { min-height: 88px; padding: 10px 11px; border-radius: 13px; }
  .hm-detail-layout .hm-fact .hm-emoji { font-size: 18px; margin-bottom: 3px; }
  .hm-detail-layout .hm-fact strong { font-size: 13px; }
  .hm-detail-layout .hm-chips { gap: 6px; }

  .hm-detail-layout--helper > .hm-hero {
    min-height: 285px;
    margin: 0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(17,45,33,.06);
  }
  .hm-detail-layout--helper .hm-hero h1 { font-size: 29px; }
  .hm-detail-layout--helper .hm-hero .hm-avatar { width: 62px; height: 62px; }

  .hm-detail-gallery .hm-sec,
  .hm-detail-home-gallery .hm-sec { padding-top: 14px; }
  .hm-detail-gallery .hm-pager,
  .hm-detail-home-gallery .hm-pager,
  .hm-job-hero-gallery .hm-pager { margin-inline: 0; }
  .hm-detail-gallery .hm-pager-track,
  .hm-detail-home-gallery .hm-pager-track,
  .hm-job-hero-gallery .hm-pager-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .hm-detail-gallery .hm-pager-item,
  .hm-detail-home-gallery .hm-pager-item,
  .hm-job-hero-gallery .hm-pager-item {
    width: 100%; max-width: none;
    flex: none;
    border-radius: 12px;
    box-shadow: none;
  }
  .hm-detail-gallery .hm-pager--43 .hm-pager-item,
  .hm-detail-home-gallery .hm-pager--43 .hm-pager-item { aspect-ratio: 4 / 3; }
  .hm-job-hero-gallery .hm-pager--45 .hm-pager-item { aspect-ratio: 4 / 5; }
  .hm-job-hero-gallery .hm-pager--single .hm-pager-track { display: block; }
  .hm-job-hero-gallery .hm-pager--single .hm-pager-item { width: min(100%, 250px); }
  .hm-detail-gallery .hm-pager-foot,
  .hm-detail-home-gallery .hm-pager-foot,
  .hm-job-hero-gallery .hm-pager-foot { display: none; }
  .hm-detail-layout .hm-lightbox-trigger::after {
    content: '↗';
    position: absolute; right: 7px; bottom: 7px;
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 8px; background: rgba(8,24,18,.72); color: #fff;
    font-size: 13px; opacity: 0; transition: opacity 140ms ease;
  }
  .hm-detail-layout .hm-pager-item:hover .hm-lightbox-trigger::after { opacity: 1; }
  .hm-detail-layout .hm-pager-item { position: relative; }

  .hm-detail-layout .hm-dock {
    position: static;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--hm-web-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(17,45,33,.035);
  }
  .hm-detail-layout .hm-quiet-action { margin-top: 7px; font-size: 12px; }
  .hm-detail-layout .hm-note--privacy { margin-top: 12px !important; }

  /* Profile: a tight two-column account workspace rather than a long mobile
     dashboard stretched to desktop. */
  .hm-profile-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  .hm-profile-overview {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 92px;
  }
  .hm-profile-main { display: grid; align-content: start; gap: 10px; min-width: 0; }
  .hm-profile-overview .hm-profile-hero {
    margin: 0;
    min-height: 190px;
    padding: 14px;
    border-radius: 18px;
  }
  .hm-profile-overview .hm-profile-identity .hm-avatar { width: 60px; height: 60px; }
  .hm-profile-overview .hm-profile-identity h1 { font-size: 25px; }
  .hm-profile-overview .hm-profile-mode-pill,
  .hm-profile-overview .hm-profile-status { padding: 6px 9px; font-size: 10px; }
  .hm-profile-overview .hm-profile-facts { gap: 6px; }
  .hm-profile-overview .hm-profile-fact { min-height: 78px; padding: 9px; border-radius: 12px; }
  .hm-profile-overview .hm-profile-fact > .hm-emoji { font-size: 18px; }
  .hm-profile-overview .hm-profile-fact small { font-size: 9px; }
  .hm-profile-overview .hm-profile-fact strong { font-size: 11px; }

  .hm-profile-main .hm-sec-head { margin: 0; }
  .hm-profile-main .hm-sec-head h2 { font-size: 20px; }
  .hm-profile-main .hm-sec-head p { font-size: 12px; }
  .hm-profile-main .hm-primary-action { min-height: 62px; padding: 11px 14px; border-radius: 14px; }
  .hm-profile-main .hm-primary-action .hm-emoji { font-size: 22px; }
  .hm-profile-main .hm-profile-actions,
  .hm-profile-main .hm-action-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 0; }
  .hm-profile-main .hm-profile-action { min-height: 82px; padding: 11px 12px; border-radius: 13px; }
  .hm-profile-main .hm-profile-action .hm-emoji { font-size: 20px; }
  .hm-profile-main .hm-profile-action strong { font-size: 16px; }
  .hm-profile-main .hm-row { min-height: 50px; padding: 9px 12px; border-radius: 12px; }
  .hm-profile-main .hm-story-card { margin-top: 0; padding: 14px; border-radius: 14px; }
  .hm-profile-main .hm-story-card-head { margin-bottom: 8px; }
  .hm-profile-main .hm-story-emoji { width: 38px; height: 38px; font-size: 20px; }
  .hm-profile-main .hm-story-card-head h2 { font-size: 19px; }
  .hm-profile-main .hm-private-card { margin-top: 0; padding: 13px; border-radius: 14px; }
  .hm-profile-main .hm-sec { padding-top: 6px; }
  .hm-profile-main .hm-sec > h2 { font-size: 19px; margin-bottom: 8px; }
  .hm-profile-main .hm-pager { margin-inline: 0; }
  .hm-profile-main .hm-pager-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 160px));
    justify-content: start;
    gap: 8px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .hm-profile-main .hm-pager-item { width: 100%; max-width: none; aspect-ratio: 4/3; border-radius: 12px; }
  .hm-profile-main .hm-pager-foot { display: none; }
}

@media (min-width: 1120px) {
  .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .hm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ================================================= 16 · RESPONSIVE ALIGNMENT POLISH ===
   v1.12.2: keep mobile cards visually balanced, align desktop profile columns,
   and constrain onboarding/review width so setup does not stretch across web. */

/* Setup is intentionally narrower than discovery/detail screens. */
.hm-setup-shell {
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 767px) {
  /* Mobile marketplace cards use a tall supporting thumbnail that visually
     matches the card height, rather than a tiny desktop-style square. */
  .hm-dcard {
    grid-template-columns: 94px minmax(0, 1fr);
    min-height: 124px;
    gap: 12px;
    padding: 10px;
    align-items: stretch;
  }
  .hm-dcard-media {
    width: 94px;
    height: 100%;
    min-height: 104px;
    align-self: stretch;
    border-radius: 16px;
    overflow: hidden;
  }
  .hm-dcard-media .hm-avatar,
  .hm-dcard-photo {
    width: 94px !important;
    height: 100% !important;
    min-height: 104px;
    max-width: 94px !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
  }
  .hm-dcard-media .hm-avatar img,
  .hm-dcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hm-dcard-main {
    min-height: 104px;
    align-content: start;
  }
  .hm-dcard-foot { margin-top: auto; }

  .hm-setup-shell { max-width: 100%; }
}

@media (min-width: 768px) {
  .hm-setup-shell {
    max-width: 820px;
  }
  .hm-setup-shell.is-review {
    max-width: 760px;
  }
  .hm-setup-shell .hm-progress-wrap { margin-top: 0; }
  .hm-setup-shell .hm-hero { min-height: 220px; }
  .hm-setup-shell .hm-pager,
  .hm-setup-shell .hm-gallery-view { max-width: 420px; }
  .hm-setup-shell .hm-onboard-actions { margin-top: 26px; }

  /* Header is outside the scrolling workspace, so the sticky profile rail
     only needs a small content offset. Keeping it at ~92px caused the left
     column to begin visibly lower than the right column. */
  .hm-profile-overview {
    top: 16px;
  }
}

@media (min-width: 1180px) {
  .hm-setup-shell { max-width: 860px; }
  .hm-setup-shell.is-review { max-width: 780px; }
}

/* ========================================================================
   v1.12.3 — Consistent desktop workspace width
   Normal desktop screens now share the same focused width as the polished
   setup/review screen. Messaging is intentionally wider because it is a
   multi-pane workspace rather than a reading/form surface.
   ======================================================================== */
@media (min-width: 768px) {
  .hm-root--shell {
    --hm-desktop-content-w: 780px;
  }

  /* Standard page workspace. This intentionally overrides the older
     1180/1360px page-specific widths so the desktop app reads as one system. */
  .hm-root--shell .hm-content > *:not(.hm-chat-workspace):not(.hm-chat) {
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Page-specific compositions must respect the same outer measure. */
  .hm-detail-layout,
  .hm-profile-layout,
  .hm-setup-shell,
  .hm-setup-shell.is-review,
  .hm-activity-shell,
  .hm-jobs-shell,
  .hm-saved-shell,
  .hm-discover-shell {
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep two-column desktop layouts useful inside the focused workspace. */
  .hm-detail-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 20px;
  }
  .hm-detail-layout--job.has-no-media {
    max-width: var(--hm-desktop-content-w) !important;
  }

  .hm-profile-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
  }
  .hm-profile-overview .hm-profile-hero {
    min-height: 168px;
  }

  /* Discovery/Saved stay compact and readable at this measure. */
  .hm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  /* Keep forms/review content from developing different internal measures. */
  .hm-setup-shell,
  .hm-setup-shell.is-review {
    max-width: var(--hm-desktop-content-w) !important;
  }

  /* Headers align to exactly the same reading edge as page content. */
  .hm-root--shell .hm-content > .hm-page-head,
  .hm-root--shell .hm-content > .hm-searchbar,
  .hm-root--shell .hm-content > .hm-chip-row {
    width: min(100%, var(--hm-desktop-content-w));
  }

  /* Messaging is the deliberate exception: its split panes need room. */
  .hm-root--shell .hm-content--chat > .hm-chat-workspace {
    width: min(100%, 1120px);
    max-width: 1120px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .hm-root--shell .hm-content > .hm-chat {
    width: min(100%, 960px);
    max-width: 960px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The standard workspace is intentionally stable on large monitors; do not
   re-expand discovery cards back to 3/4 columns just because more pixels exist. */
@media (min-width: 1120px) {
  .hm-root--shell .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1700px) {
  .hm-root--shell .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ========================================================================
   v1.12.4 — Single-column focused desktop pages
   The 780px desktop workspace is intentionally narrow. Split-pane layouts
   are removed on focused pages so content uses the available measure well.
   ======================================================================== */
@media (min-width: 768px) {
  /* PROFILE -------------------------------------------------------------- */
  .hm-profile-layout {
    display: block !important;
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w) !important;
  }
  .hm-profile-overview {
    position: static !important;
    top: auto !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 18px;
  }
  .hm-profile-overview .hm-profile-hero {
    min-height: 190px;
    height: 100%;
  }
  .hm-profile-overview .hm-profile-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: stretch;
    gap: 10px;
  }
  .hm-profile-overview .hm-profile-fact {
    min-height: 0;
    padding: 14px;
  }
  .hm-profile-main { width: 100%; min-width: 0; }
  .hm-profile-main .hm-sec-head:first-child { margin-top: 0; }

  /* DETAIL PAGES --------------------------------------------------------- */
  .hm-detail-layout,
  .hm-detail-layout--helper,
  .hm-detail-layout--job,
  .hm-detail-layout--job.has-media,
  .hm-detail-layout--job.has-no-media {
    display: block !important;
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w) !important;
  }
  .hm-detail-layout > *,
  .hm-detail-layout--helper > *,
  .hm-detail-layout--job > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }
  .hm-detail-layout--helper > .hm-hero,
  .hm-detail-layout--job > .hm-job-hero-gallery {
    margin-bottom: 16px;
  }
  .hm-detail-layout .hm-detail-gallery,
  .hm-detail-layout .hm-detail-home-gallery,
  .hm-detail-layout .hm-job-hero-gallery {
    margin-bottom: 18px;
  }
  .hm-detail-layout .hm-pager,
  .hm-detail-layout .hm-gallery-view {
    max-width: 520px;
  }
  .hm-detail-layout .hm-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-detail-layout .hm-dock {
    position: static;
    margin-top: 18px;
  }

  /* ACTIVITY ------------------------------------------------------------- */
  .hm-activity-overview {
    display: block !important;
    padding: 20px;
  }
  .hm-activity-overview-copy { margin-bottom: 16px; }
  .hm-activity-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .hm-activity-stack {
    grid-template-columns: 1fr !important;
  }

  /* MESSAGES INDEX ------------------------------------------------------- */
  .hm-messages-page {
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w);
    margin: 0 auto;
  }
  .hm-messages-page .hm-page-head { margin-bottom: 14px; }
  .hm-messages-page .hm-inbox-search {
    margin: 0 0 12px;
  }
  .hm-inbox-single {
    padding: 8px;
    border: 1px solid var(--hm-web-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-inbox-single .hm-thread-list { gap: 4px; }
  .hm-inbox-single .hm-thread-row {
    min-height: 82px;
    padding: 11px 12px;
  }

  /* CONVERSATION --------------------------------------------------------- */
  .hm-root--shell .hm-content--chat > .hm-chat-workspace,
  .hm-root--shell .hm-content > .hm-chat,
  .hm-chat-workspace--single {
    width: min(100%, var(--hm-desktop-content-w)) !important;
    max-width: var(--hm-desktop-content-w) !important;
    margin-left: auto;
    margin-right: auto;
  }
  .hm-chat-workspace--single {
    display: block !important;
    height: min(760px, calc(100dvh - 138px));
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--hm-web-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--hm-web-shadow);
  }
  .hm-chat-workspace--single .hm-chat-panel {
    height: 100%;
    min-height: 0;
  }
  .hm-chat-workspace--single .hm-chat-panel .hm-chat-messages {
    padding-inline: 22px;
  }
  .hm-chat-workspace--single .hm-chat-panel .hm-bubble {
    max-width: 76%;
  }
  .hm-chat-thread-panel,
  .hm-chat-context { display: none !important; }

  /* SETTINGS / HELP / NOTIFICATIONS / FORMS ---------------------------- */
  .hm-settings-shell,
  .hm-help-shell,
  .hm-notifications-shell,
  .hm-form-shell {
    width: min(100%, var(--hm-desktop-content-w));
    max-width: var(--hm-desktop-content-w);
    margin-inline: auto;
  }
}

@media (min-width: 980px) {
  /* Keep the profile summary as a compact horizontal intro, not a permanent
     left rail. The page below is always full-width within the 780px measure. */
  .hm-profile-overview {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}


/* ========================================================================
   v1.12.5 — PHONE UI LOCK + HEADER MY JOBS LABEL
   Desktop/tablet work must never mutate the established phone product. The
   JS adds .hm-device-phone for actual phones (including landscape widths
   above 768px) and narrow browser viewports. These overrides are deliberately
   last in the cascade so future desktop work cannot leak into the phone UI.
   ======================================================================== */
.hm-jobs-shortcut{
  width:auto;min-width:44px;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;border-radius:var(--hm-r-pill);background:var(--hm-orange-soft);color:var(--hm-orange-ink);text-decoration:none;
  font-size:12px;font-weight:800;line-height:1;white-space:nowrap;flex:none;
}
.hm-jobs-shortcut .g-icon{width:19px;height:19px}.hm-jobs-shortcut span{display:inline}
.hm-jobs-shortcut:active{transform:scale(.96)}
@media (min-width:768px){.hm-jobs-shortcut{display:none!important}}

html.hm-device-phone .hm-sidebar{display:none!important}
html.hm-device-phone .helpermatch-page,
html.hm-device-phone .helpermatch-app,
html.hm-device-phone body.helpermatch-body--locked .helpermatch-page,
html.hm-device-phone body.helpermatch-body--locked .helpermatch-app{
  width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;box-shadow:none!important;
}
html.hm-device-phone .hm-root--shell .hm-app-shell{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:"header" "content" "bottom"!important;background:var(--g-bg)!important;
}
html.hm-device-phone .hm-root--shell .hm-header{
  grid-area:header!important;min-height:60px!important;padding:calc(8px + var(--hm-safe-t)) 12px 8px!important;
  border-radius:0!important;background:var(--g-bg)!important;box-shadow:0 1px 0 var(--hm-hairline)!important;
}
html.hm-device-phone .hm-header-lead--account{display:inline-flex!important}
html.hm-device-phone .hm-header-title strong{font-size:var(--hm-fs-h3)!important}
html.hm-device-phone .hm-header-title small{font-size:var(--hm-fs-micro)!important}
html.hm-device-phone .hm-header-actions{gap:4px!important}
html.hm-device-phone .hm-mode-btn{max-width:122px!important;padding:8px 10px 8px 9px!important}
html.hm-device-phone .hm-jobs-shortcut{display:inline-flex!important}
html.hm-device-phone .hm-root--shell .hm-content{
  grid-area:content!important;padding:16px var(--hm-gutter) calc(28px + var(--hm-safe-b))!important;background:var(--g-bg)!important;
  overflow-y:auto!important;overflow-x:hidden!important;scroll-padding-top:0!important;
}
html.hm-device-phone .hm-root--shell .hm-content>*{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
html.hm-device-phone .hm-root--shell .hm-bottom{grid-area:bottom!important;display:flex!important;border-radius:0!important}
html.hm-device-phone .hm-owner-fab{display:flex!important}
html.hm-device-phone .hm-app-shell--owner-fab .hm-content{padding-bottom:calc(92px + var(--hm-safe-b))!important}
html.hm-device-phone .hm-page-head{margin-bottom:16px!important;align-items:flex-start!important}
html.hm-device-phone .hm-page-head h1{font-size:var(--hm-fs-h1)!important}
html.hm-device-phone .hm-page-head p{font-size:var(--hm-fs-body)!important}
html.hm-device-phone .hm-cards{grid-template-columns:1fr!important;gap:10px!important}
html.hm-device-phone .hm-my-jobs-list{grid-template-columns:1fr!important}
html.hm-device-phone .hm-profile-layout,
html.hm-device-phone .hm-profile-overview,
html.hm-device-phone .hm-profile-main,
html.hm-device-phone .hm-detail-layout,
html.hm-device-phone .hm-detail-layout--helper,
html.hm-device-phone .hm-detail-layout--job{display:contents!important;width:auto!important;max-width:none!important}
html.hm-device-phone .hm-profile-hero{
  margin:-16px calc(var(--hm-gutter) * -1) 12px!important;min-height:236px!important;height:auto!important;
  padding:16px var(--hm-gutter) 18px!important;border-radius:0!important;box-shadow:none!important;
}
html.hm-device-phone .hm-profile-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html.hm-device-phone .hm-profile-fact{min-height:96px!important;padding:12px!important;border-radius:18px!important}
html.hm-device-phone .hm-profile-actions,
html.hm-device-phone .hm-action-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
html.hm-device-phone .hm-primary-action{min-height:84px!important}
html.hm-device-phone .hm-story-card{padding:16px!important}
html.hm-device-phone .hm-activity-overview{display:block!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html.hm-device-phone .hm-activity-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.hm-device-phone .hm-activity-stack{grid-template-columns:1fr!important}
html.hm-device-phone .hm-messages-page,
html.hm-device-phone .hm-chat-workspace--single,
html.hm-device-phone .hm-root--shell .hm-content--chat>.hm-chat-workspace,
html.hm-device-phone .hm-root--shell .hm-content>.hm-chat{width:auto!important;max-width:none!important;margin:0!important}
html.hm-device-phone .hm-chat-workspace--single{height:auto!important;min-height:0!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html.hm-device-phone .hm-inbox-single{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html.hm-device-phone .hm-setup-shell,
html.hm-device-phone .hm-setup-shell.is-review{width:100%!important;max-width:100%!important;margin:0!important}
html.hm-device-phone .hm-sheet-overlay{left:0!important;right:0!important;width:100%!important;padding:0!important;align-items:flex-end!important}
html.hm-device-phone .hm-sheet{width:100%!important;max-height:86dvh!important;border-radius:24px 24px 0 0!important;padding:8px 16px calc(18px + var(--hm-safe-b))!important}

/* Preserve the tall mobile list thumbnail approved in v1.12.2. */
html.hm-device-phone .hm-dcard{grid-template-columns:94px minmax(0,1fr)!important;min-height:124px!important;gap:12px!important;padding:10px!important;align-items:stretch!important}
html.hm-device-phone .hm-dcard-media{width:94px!important;height:100%!important;min-height:104px!important;align-self:stretch!important;border-radius:16px!important;overflow:hidden!important}
html.hm-device-phone .hm-dcard-media .hm-avatar,
html.hm-device-phone .hm-dcard-photo{width:94px!important;height:100%!important;min-height:104px!important;max-width:94px!important;aspect-ratio:auto!important;border-radius:16px!important}
html.hm-device-phone .hm-dcard-main{min-height:104px!important;align-content:start!important}
html.hm-device-phone .hm-dcard-foot{margin-top:auto!important}


/* ========================================================================
   v1.12.6 — DESKTOP MY JOBS MANAGEMENT
   Desktop uses the 780px workspace as one professional management column.
   The mobile card remains untouched via the explicit phone lock below.
   ======================================================================== */
@media (min-width:768px){
  html:not(.hm-device-phone) .hm-jobs-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px 24px;
    align-items:start;
    padding:24px;
    margin:0 0 22px;
    border-radius:22px;
    box-shadow:0 14px 34px rgba(18,54,35,.12);
  }
  html:not(.hm-device-phone) .hm-jobs-hero-copy{min-width:0}
  html:not(.hm-device-phone) .hm-jobs-hero h1{font-size:34px;margin-top:5px}
  html:not(.hm-device-phone) .hm-jobs-hero p{max-width:520px;font-size:14px;margin-top:7px}
  html:not(.hm-device-phone) .hm-jobs-create--desktop{
    position:static;
    align-self:start;
    min-width:112px;
    justify-content:center;
    background:var(--g-accent);
    color:var(--g-on-accent);
    box-shadow:none;
  }
  html:not(.hm-device-phone) .hm-jobs-stats{
    grid-column:1/-1;
    margin-top:2px;
    gap:10px;
  }
  html:not(.hm-device-phone) .hm-jobs-stats>div{
    min-height:74px;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
  }
  html:not(.hm-device-phone) .hm-jobs-stats strong{font-size:26px}
  html:not(.hm-device-phone) .hm-jobs-stats span{font-size:11px}

  html:not(.hm-device-phone) .hm-jobs-toolbar{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin:0 0 12px;
  }
  html:not(.hm-device-phone) .hm-jobs-toolbar .hm-sec-head{margin:0;min-width:0}
  html:not(.hm-device-phone) .hm-jobs-toolbar-create{display:none}

  html:not(.hm-device-phone) .hm-my-jobs-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100%;
  }
  html:not(.hm-device-phone) .hm-my-job-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    min-height:132px;
    width:100%;
    padding:0;
    overflow:hidden;
    border:1px solid var(--hm-web-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 18px rgba(17,45,33,.055);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  html:not(.hm-device-phone) .hm-my-job-card:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--g-accent) 30%,var(--hm-web-border));
    box-shadow:0 12px 28px rgba(17,45,33,.085);
  }
  html:not(.hm-device-phone) .hm-my-job-media{
    width:112px;
    height:100%;
    min-height:132px;
    aspect-ratio:auto;
    border-radius:0;
    background:var(--hm-blue-soft);
    font-size:34px;
  }
  html:not(.hm-device-phone) .hm-my-job-body{
    display:grid;
    grid-template-rows:auto auto auto;
    gap:11px;
    min-width:0;
    padding:16px 18px;
  }
  html:not(.hm-device-phone) .hm-my-job-top{align-items:flex-start;gap:14px}
  html:not(.hm-device-phone) .hm-my-job-title{min-width:0}
  html:not(.hm-device-phone) .hm-my-job-top h3{
    max-width:none;
    font-size:18px;
    line-height:1.2;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  html:not(.hm-device-phone) .hm-my-job-top p{font-size:12px;margin-top:4px}
  html:not(.hm-device-phone) .hm-job-state{padding:6px 9px;font-size:10px}
  html:not(.hm-device-phone) .hm-my-job-meta{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    padding:10px 0;
    border-top:1px solid var(--hm-web-border);
    border-bottom:1px solid var(--hm-web-border);
  }
  html:not(.hm-device-phone) .hm-my-job-meta>span{
    min-width:0;
    padding:0 12px;
  }
  html:not(.hm-device-phone) .hm-my-job-meta>span:first-child{padding-left:0}
  html:not(.hm-device-phone) .hm-my-job-meta>span+span{border-left:1px solid var(--hm-web-border)}
  html:not(.hm-device-phone) .hm-my-job-meta span+span::before{content:none}
  html:not(.hm-device-phone) .hm-my-job-meta small{
    display:block;
    margin-bottom:2px;
    color:var(--hm-text-3);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  html:not(.hm-device-phone) .hm-my-job-meta strong{
    display:block;
    overflow:hidden;
    color:var(--hm-text-1);
    font-size:12px;
    font-weight:750;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  html:not(.hm-device-phone) .hm-my-job-foot{
    min-height:24px;
    font-size:11px;
  }
  html:not(.hm-device-phone) .hm-job-updated{color:var(--hm-text-3)}
  html:not(.hm-device-phone) .hm-job-edit{position:relative;z-index:2;margin-left:auto}
}

@media (min-width:768px) and (max-width:900px){
  html:not(.hm-device-phone) .hm-my-job-card{grid-template-columns:96px minmax(0,1fr)}
  html:not(.hm-device-phone) .hm-my-job-media{width:96px}
  html:not(.hm-device-phone) .hm-my-job-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px}
  html:not(.hm-device-phone) .hm-my-job-meta>span:nth-child(3){border-left:0;padding-left:0}
}

/* Reassert the locked phone My Jobs card after the desktop management layer. */
html.hm-device-phone .hm-jobs-create--desktop{display:none!important}
html.hm-device-phone .hm-jobs-toolbar-create{display:none!important}
html.hm-device-phone .hm-my-job-meta small{display:none!important}
html.hm-device-phone .hm-my-job-meta strong{font:inherit!important;color:inherit!important}