/*!
 * مِهَار | Mihhar — Customer portals (individual, organization, job board)
 * ------------------------------------------------------------------
 * Structure is drawn with hairlines and space. Lists are single bordered
 * surfaces with row dividers rather than stacks of floating cards, and
 * every grid track is `minmax(0, …)` so nothing can widen the page.
 */

.mh-app {
  width: 100%;
  max-width: var(--mh-max);
  margin-inline: auto;
  padding: var(--mh-8) var(--mh-gutter) var(--mh-16);
  min-width: 0;
}
.mh-app--wide { max-width: 1320px; }

/* ═══════════════════════ SHELL ═══════════════════════ */

.mh-shell {
  display: grid;
  grid-template-columns: var(--mh-side) minmax(0, 1fr);
  gap: var(--mh-8);
  align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────── */

.mh-side {
  position: sticky;
  top: var(--mh-5);
  min-width: 0;
  padding-inline-end: var(--mh-6);
  border-inline-end: 1px solid var(--mh-border);
}

.mh-side__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--mh-3);
  padding-bottom: var(--mh-5);
  border-bottom: 1px solid var(--mh-border);
}

.mh-side__avatar {
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
  font-size: var(--mh-t-body);
  font-weight: 500;
  flex-shrink: 0;
}
.mh-side__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mh-side__status { display: none; }

.mh-side__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-1) var(--mh-2);
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mh-side__mail {
  display: block;
  margin-top: 2px;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  direction: ltr;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-side__type {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  margin-top: var(--mh-2);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-3);
}
.mh-side__type .mh-icon { color: var(--mh-text-3); }
.mh-side__verified { display: inline-flex; color: var(--mh-success); }

.mh-side__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mh-2);
  grid-column: 1 / -1;
  padding-top: var(--mh-4);
  margin-top: var(--mh-4);
  border-top: 1px solid var(--mh-border);
}
.mh-side__stat { min-width: 0; }
.mh-side__stat strong {
  display: block;
  font-size: var(--mh-t-h2);
  font-weight: 500;
  color: var(--mh-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mh-side__stat span {
  display: block;
  margin-top: 2px;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}

/* ── Navigation ──────────────────────────────────────── */

.mh-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: var(--mh-4);
  min-width: 0;
}

.mh-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mh-3);
  min-height: 36px;
  padding: var(--mh-2) var(--mh-3);
  border-radius: var(--mh-r-sm);
  color: var(--mh-text-2);
  font-size: var(--mh-t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--mh-t-fast), color var(--mh-t-fast);
  min-width: 0;
}
.mh-nav__item > span:not(.mh-nav__badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-nav__item .mh-icon { color: var(--mh-text-3); transition: color var(--mh-t-fast); }
.mh-nav__item:hover { background: var(--mh-surface-sub); color: var(--mh-text); }

.mh-nav__item.is-active {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
  font-weight: 500;
}
.mh-nav__item.is-active .mh-icon { color: var(--mh-accent-text); }
.mh-nav__item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: var(--mh-r-pill);
  background: var(--mh-accent);
}

.mh-nav__badge {
  margin-inline-start: auto;
  min-width: 18px;
  padding: 0 var(--mh-1);
  border-radius: var(--mh-r-xs);
  background: var(--mh-surface-mute);
  color: var(--mh-text-2);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* A white pill with light-blue type is the one leftover from the white
   theme: 2.5:1, unreadable. On the dark system a filled badge is the
   brand blue with white type, like every other filled badge. */
.mh-nav__item.is-active .mh-nav__badge { background: var(--mh-accent); color: var(--mh-white); }
.mh-nav__badge--gold { background: var(--mh-gold-bg); color: var(--mh-gold-fg); }

.mh-nav__sep { height: 1px; margin: var(--mh-3) 0; background: var(--mh-border); }

.mh-nav__item--button {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.mh-nav__item--logout { color: var(--mh-text-2); }
.mh-nav__item--logout:hover { background: var(--mh-danger-bg); color: var(--mh-danger); }
.mh-nav__item--logout:hover .mh-icon { color: var(--mh-danger); }

/* ── Main column ─────────────────────────────────────── */

.mh-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mh-6);
}

.mh-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mh-4);
  flex-wrap: wrap;
  padding-bottom: var(--mh-5);
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-head h1 {
  font-size: var(--mh-t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.mh-head h1 em { font-style: normal; color: var(--mh-accent-text); }
.mh-head p { margin: var(--mh-1) 0 0; font-size: var(--mh-t-sm); color: var(--mh-text-3); }
.mh-head__actions { display: flex; align-items: center; gap: var(--mh-2); flex-wrap: wrap; }

/* ═══════════════════════ STATS ═══════════════════════ */

.mh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  overflow: hidden;
  background: var(--mh-border);
  gap: 1px;
}

.mh-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon  label"
    "value value"
    "meta  meta";
  align-items: center;
  gap: 0 var(--mh-2);
  padding: var(--mh-4) var(--mh-5);
  background: var(--mh-surface);
  min-width: 0;
}
.mh-stat__icon { grid-area: icon; display: flex; color: var(--mh-text-3); }
.mh-stat__icon .mh-icon { width: 15px; height: 15px; }
.mh-stat__label {
  grid-area: label;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-stat__value {
  grid-area: value;
  margin-top: var(--mh-2);
  font-size: var(--mh-t-value);
  font-weight: 500;
  line-height: 1.15;
  color: var(--mh-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mh-stat__value--sm { font-size: var(--mh-t-body); font-weight: 500; letter-spacing: 0; }
.mh-stat__meta { grid-area: meta; margin-top: var(--mh-1); font-size: var(--mh-t-2xs); color: var(--mh-text-3); }

/* Status accents stay in the icon only — the tile itself stays white. */
.mh-stat--gold .mh-stat__icon    { color: var(--mh-gold-fg); }
.mh-stat--success .mh-stat__icon { color: var(--mh-success); }
.mh-stat--danger .mh-stat__icon  { color: var(--mh-danger); }

/* ═══════════════════════ TOOLBAR ═══════════════════════ */

.mh-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mh-4);
  flex-wrap: wrap;
  min-width: 0;
}

.mh-search { position: relative; flex: 1 1 220px; min-width: 0; }
.mh-search .mh-icon {
  position: absolute;
  inset-inline-start: var(--mh-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--mh-text-3);
  pointer-events: none;
  width: 15px; height: 15px;
}
.mh-search input {
  width: 100%;
  min-height: var(--mh-control-h);
  padding: var(--mh-2) var(--mh-3);
  padding-inline-start: var(--mh-8);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
  font-family: inherit;
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text);
}
.mh-search input::placeholder { color: var(--mh-n-400); font-weight: 400; }
.mh-search input:focus { outline: 2px solid var(--mh-accent); outline-offset: -1px; border-color: var(--mh-accent); }

/* ═══════════════════════ LIST ROWS ═══════════════════════ */

.mh-requests {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  overflow: hidden;
  background: var(--mh-surface);
  min-width: 0;
}
/* Nested inside a card the container is already framed. */
.mh-card__body .mh-requests,
.mh-card .mh-requests { border: 0; border-radius: 0; }

.mh-req {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  padding: var(--mh-4) var(--mh-5);
  border-bottom: 1px solid var(--mh-border);
  color: inherit;
  text-decoration: none;
  background: var(--mh-surface);
  transition: background-color var(--mh-t-fast);
  min-width: 0;
}
.mh-req:last-child { border-bottom: 0; }
a.mh-req:hover { background: var(--mh-surface-sub); color: inherit; }
.mh-req.is-unread { background: var(--mh-accent-soft); }
a.mh-req.is-unread:hover { background: var(--mh-accent-soft); }

.mh-req__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-text-3);
}

.mh-req__body { min-width: 0; }
.mh-req__top {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  flex-wrap: wrap;
  margin-bottom: var(--mh-1);
  min-width: 0;
}
.mh-req__ref {
  font-family: var(--mh-font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-3);
}
.mh-req__title {
  display: block;
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-req__meta {
  display: flex;
  align-items: center;
  gap: var(--mh-1) var(--mh-4);
  flex-wrap: wrap;
  margin-top: var(--mh-1);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-req__meta span { display: inline-flex; align-items: center; gap: var(--mh-1); min-width: 0; }
.mh-req__meta .mh-icon { width: 13px; height: 13px; }
.mh-req__overdue { color: var(--mh-danger) !important; font-weight: 500 !important; }

.mh-req__side {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mh-req__unread { width: 6px; height: 6px; border-radius: 50%; background: var(--mh-accent); flex-shrink: 0; }

.mh-req__actions { display: flex; flex-wrap: wrap; gap: var(--mh-1); margin-top: var(--mh-2); }

.mh-letter {
  margin-top: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  line-height: var(--mh-lh);
}
.mh-letter[hidden] { display: none; }

/* ═══════════════════════ SERVICE TILES ═══════════════════════ */

.mh-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--mh-3);
  min-width: 0;
}
.mh-services--catalogue { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.mh-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mh-2);
  padding: var(--mh-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  color: inherit;
  text-decoration: none;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast);
  min-width: 0;
}
.mh-service:hover { border-color: var(--mh-n-400); color: inherit; }
.mh-service input { position: absolute; opacity: 0; pointer-events: none; }
.mh-service.is-selected { border-color: var(--mh-accent); background: var(--mh-accent-soft); }

.mh-service__check {
  position: absolute;
  top: var(--mh-4);
  inset-inline-end: var(--mh-4);
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 1.5px solid var(--mh-border-strong);
  border-radius: 50%;
  color: transparent;
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-service.is-selected .mh-service__check {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  color: var(--mh-white);
}

.mh-service__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-text-2);
}
.mh-service.is-selected .mh-service__icon { border-color: var(--mh-accent-line); color: var(--mh-accent-text); }

.mh-service__title {
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text);
  padding-inline-end: var(--mh-6);
  line-height: var(--mh-lh-snug);
}
.mh-service__summary { font-size: var(--mh-t-2xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }
.mh-service__foot {
  display: flex;
  align-items: center;
  gap: var(--mh-1) var(--mh-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--mh-3);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-service__foot span { display: inline-flex; align-items: center; gap: var(--mh-1); }
.mh-service--card { cursor: default; }
a.mh-service .mh-service__foot { color: var(--mh-accent-text); }

/* ═══════════════════════ DETAIL LAYOUT ═══════════════════════ */

.mh-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--mh-6);
  align-items: start;
  min-width: 0;
}
.mh-aside { display: flex; flex-direction: column; gap: var(--mh-4); position: sticky; top: var(--mh-5); min-width: 0; }

.mh-detail__hero {
  padding-bottom: var(--mh-5);
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-detail__hero h1 {
  margin: var(--mh-3) 0 var(--mh-2);
  font-size: var(--mh-t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.mh-detail__hero-meta {
  display: flex;
  align-items: center;
  gap: var(--mh-1) var(--mh-5);
  flex-wrap: wrap;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-detail__hero-meta span { display: inline-flex; align-items: center; gap: var(--mh-1); min-width: 0; }
.mh-detail__hero-meta .mh-icon { width: 13px; height: 13px; }

.mh-detail__ref {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  padding: 2px var(--mh-2);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
  font-family: var(--mh-font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  cursor: pointer;
}

/* ── Progress tracker ────────────────────────────────── */

.mh-tracker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--mh-6);
  min-width: 0;
}
.mh-tracker__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-2);
  text-align: center;
  min-width: 0;
}
/* Connector halves stay inside the step box, so no track can ever overflow. */
.mh-tracker__step::before,
.mh-tracker__step::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 50%;
  height: 1px;
  background: var(--mh-border-strong);
}
.mh-tracker__step::before { inset-inline-start: 50%; }
.mh-tracker__step::after { inset-inline-end: 50%; }
.mh-tracker__step:first-child::after,
.mh-tracker__step:last-child::before { display: none; }
.mh-tracker__step.is-done::before,
.mh-tracker__step.is-done::after,
.mh-tracker__step.is-current::after { background: var(--mh-accent); }

.mh-tracker__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--mh-border-strong);
  border-radius: 50%;
  background: var(--mh-surface);
  color: var(--mh-text-3);
}
.mh-tracker__dot .mh-icon { width: 12px; height: 12px; }
.mh-tracker__step.is-done .mh-tracker__dot { background: var(--mh-accent); border-color: var(--mh-accent); color: var(--mh-white); }
.mh-tracker__step.is-current .mh-tracker__dot { border-color: var(--mh-accent); color: var(--mh-accent-text); }

.mh-tracker__label {
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
  overflow-wrap: anywhere;
}
.mh-tracker__step.is-done .mh-tracker__label,
.mh-tracker__step.is-current .mh-tracker__label { color: var(--mh-text); font-weight: 500; }

/* ═══════════════════════ CONVERSATION ═══════════════════════ */

.mh-thread {
  display: flex;
  flex-direction: column;
  gap: var(--mh-4);
  padding: var(--mh-5);
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}
.mh-thread::-webkit-scrollbar { width: 6px; }
.mh-thread::-webkit-scrollbar-thumb { background: var(--mh-border-strong); border-radius: var(--mh-r-pill); }

.mh-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mh-3); min-width: 0; }
.mh-msg__bubble {
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  min-width: 0;
}
.mh-msg--staff .mh-msg__bubble { background: var(--mh-accent-soft); border-color: var(--mh-accent-line); }
.mh-msg--internal .mh-msg__bubble { background: var(--mh-warn-bg); border-color: var(--mh-warn-line); border-style: dashed; }

.mh-msg__head { display: flex; align-items: center; gap: var(--mh-2); flex-wrap: wrap; margin-bottom: var(--mh-1); }
.mh-msg__author { font-size: var(--mh-t-xs); font-weight: 500; color: var(--mh-text); }
.mh-msg__time { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-msg__text {
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  line-height: var(--mh-lh);
  overflow-wrap: anywhere;
}
.mh-msg__text p { margin: 0 0 var(--mh-2); }
.mh-msg__text p:last-child { margin: 0; }
.mh-msg__files { display: flex; flex-wrap: wrap; gap: var(--mh-2); margin-top: var(--mh-3); }

.mh-file {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  max-width: 100%;
  padding: var(--mh-1) var(--mh-2);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-text-2);
  font-family: inherit;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-file:hover { border-color: var(--mh-border-strong); color: var(--mh-text); }
.mh-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.mh-file__size { color: var(--mh-text-3); }

/* ── Composer ────────────────────────────────────────── */

.mh-composer { padding: var(--mh-4) var(--mh-5); border-top: 1px solid var(--mh-border); min-width: 0; }
.mh-composer__row { display: flex; gap: var(--mh-2); align-items: flex-end; min-width: 0; }
.mh-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: var(--mh-control-h);
  max-height: 180px;
  padding: var(--mh-2) var(--mh-3);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
  font-family: inherit;
  font-size: var(--mh-t-sm);
  color: var(--mh-text);
  line-height: var(--mh-lh-snug);
  resize: none;
}
.mh-composer textarea:focus { outline: 2px solid var(--mh-accent); outline-offset: -1px; border-color: var(--mh-accent); }
.mh-composer__actions { display: flex; gap: var(--mh-2); }
.mh-composer__hint {
  display: flex;
  align-items: center;
  gap: var(--mh-1);
  margin-top: var(--mh-2);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}

/* ── Upload ──────────────────────────────────────────── */

.mh-dropzone {
  margin-top: var(--mh-2);
  padding: var(--mh-5) var(--mh-4);
  border: 1px dashed var(--mh-border-strong);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
  color: var(--mh-text-3);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-dropzone:hover,
.mh-dropzone.is-over { border-color: var(--mh-accent); background: var(--mh-accent-soft); color: var(--mh-accent-text); }
.mh-dropzone input { display: none; }
.mh-dropzone .mh-icon { margin-inline: auto; }

.mh-queue { display: flex; flex-direction: column; gap: var(--mh-1); margin-top: var(--mh-2); }
.mh-queue__item {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  padding: var(--mh-2) var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  min-width: 0;
}
.mh-queue__item .mh-icon { color: var(--mh-text-3); }
.mh-queue__remove {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--mh-text-3);
  cursor: pointer;
  border-radius: var(--mh-r-xs);
}
.mh-queue__remove:hover { color: var(--mh-danger); }
.mh-queue__item.is-invalid { border-color: var(--mh-danger-line); background: var(--mh-danger-bg); color: var(--mh-danger); }

/* ═══════════════════════ FACTS / TIMELINE ═══════════════════════ */

.mh-facts { display: flex; flex-direction: column; min-width: 0; }
.mh-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-3);
  align-items: start;
  padding: var(--mh-3) 0;
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-fact:first-child { padding-top: 0; }
.mh-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.mh-fact__icon { color: var(--mh-text-3); margin-top: 2px; }
.mh-fact__icon .mh-icon { width: 14px; height: 14px; }
.mh-fact__label { display: block; font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-fact__value {
  display: block;
  margin-top: 2px;
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text);
  overflow-wrap: anywhere;
}

.mh-timeline { display: flex; flex-direction: column; min-width: 0; }
.mh-tl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mh-3); padding-bottom: var(--mh-4); min-width: 0; }
.mh-tl:last-child { padding-bottom: 0; }
.mh-tl::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--mh-border);
}
.mh-tl:last-child::before { display: none; }
.mh-tl__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border: 1px solid var(--mh-border);
  border-radius: 50%;
  background: var(--mh-surface);
  color: var(--mh-text-3);
  flex-shrink: 0;
}
.mh-tl__dot .mh-icon { width: 11px; height: 11px; }
.mh-tl__dot--brand   { border-color: var(--mh-accent-line);  color: var(--mh-accent-text); }
.mh-tl__dot--success { border-color: var(--mh-success-line); color: var(--mh-success); }
.mh-tl__dot--danger  { border-color: var(--mh-danger-line);  color: var(--mh-danger); }
.mh-tl__body { min-width: 0; padding-top: 1px; }
.mh-tl__title { display: block; font-size: var(--mh-t-xs); font-weight: 500; color: var(--mh-text); }
.mh-tl__meta { display: block; margin-top: 1px; font-size: var(--mh-t-2xs); color: var(--mh-text-3); overflow-wrap: anywhere; }

/* ═══════════════════════ RATING ═══════════════════════ */

.mh-rate { display: flex; gap: var(--mh-1); direction: ltr; justify-content: center; }
.mh-rate input { position: absolute; opacity: 0; pointer-events: none; }
.mh-rate label { color: var(--mh-border-strong); cursor: pointer; transition: color var(--mh-t-fast); }
.mh-rate label.is-on { color: var(--mh-gold); }
.mh-rate--static label { cursor: default; }

/* ═══════════════════════ ACCOUNT ═══════════════════════ */

.mh-completion {
  display: flex;
  align-items: center;
  gap: var(--mh-4);
  flex-wrap: wrap;
  padding: var(--mh-4) var(--mh-5);
  border: 1px solid var(--mh-accent-line);
  border-radius: var(--mh-r-lg);
  background: var(--mh-accent-soft);
}
.mh-completion__ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.mh-completion__ring svg { transform: rotate(-90deg); }
.mh-completion__ring span {
  position: absolute;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-accent-text);
}
.mh-completion__text strong { display: block; font-size: var(--mh-t-sm); font-weight: 500; }
.mh-completion__text span { display: block; margin-top: 2px; font-size: var(--mh-t-2xs); color: var(--mh-text-2); }

/* ═══════════════════════ GATE / BANNER ═══════════════════════ */

.mh-gate {
  max-width: 460px;
  margin: var(--mh-16) auto;
  padding: var(--mh-10) var(--mh-6);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  text-align: center;
}
.mh-gate__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
}
.mh-gate h2 { font-size: var(--mh-t-h2); font-weight: 500; margin-bottom: var(--mh-2); }
.mh-gate p { margin-bottom: var(--mh-6); font-size: var(--mh-t-sm); color: var(--mh-text-3); }
.mh-gate .mh-row { justify-content: center; flex-wrap: wrap; }

.mh-verify-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  padding: var(--mh-4) var(--mh-5);
  border: 1px solid var(--mh-gold-line);
  border-radius: var(--mh-r-lg);
  background: var(--mh-gold-bg);
  min-width: 0;
}
.mh-verify-banner__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--mh-gold-line);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-gold-fg);
  flex-shrink: 0;
}
.mh-verify-banner h3 { font-size: var(--mh-t-h3); font-weight: 500; }
.mh-verify-banner p { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-2); }

/* ═══════════════════════ JOB BOARD ═══════════════════════ */

.mh-jobs-hero {
  padding-bottom: var(--mh-8);
  margin-bottom: var(--mh-8);
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
/* 640px fitted a heading and a paragraph. It does not fit the search
   row the brief asks for — a wide box, the country, the city and a
   button — which wrapped onto two lines and left the button stranded
   in the middle of the second. The prose stays at a readable measure;
   only the form is allowed the full width. */
.mh-jobs-hero__inner { max-width: 640px; min-width: 0; }
.mh-jobs-hero__inner > .mh-jobs-search { max-width: 980px; }
@media (min-width: 1100px) {
  .mh-jobs-hero__inner { max-width: 980px; }
  .mh-jobs-hero h1,
  .mh-jobs-hero > .mh-jobs-hero__inner > p { max-width: 640px; }
}
.mh-jobs-hero h1 {
  margin: var(--mh-3) 0 var(--mh-2);
  font-size: var(--mh-t-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.mh-jobs-hero p { margin-bottom: var(--mh-6); font-size: var(--mh-t-body); color: var(--mh-text-3); }
.mh-jobs-hero .mh-auth__eyebrow {
  color: var(--mh-text-3);
  border-color: var(--mh-border);
  margin-bottom: 0;
}

.mh-jobs-search { display: flex; gap: var(--mh-2); flex-wrap: wrap; min-width: 0; }
/* The keyword box takes whatever is left after the two selectors and
   the button — "very wide" is a share of the row, not a pixel count,
   so it stays wide at 1440 and still wraps sanely at 390. */
.mh-jobs-search__field { position: relative; display: flex; align-items: center; flex: 5 1 260px; min-width: 0; }
.mh-jobs-search__field--sm { flex: 1 1 150px; max-width: 220px; }
.mh-jobs-search__field .mh-icon {
  position: absolute;
  inset-inline-start: var(--mh-3);
  color: var(--mh-text-3);
  pointer-events: none;
  width: 15px; height: 15px;
}
.mh-jobs-search__field input,
.mh-jobs-search__field select {
  width: 100%;
  min-width: 0;
  min-height: var(--mh-control-h-lg);
  padding: var(--mh-2) var(--mh-3);
  padding-inline-start: var(--mh-8);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
  font-family: inherit;
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text);
  appearance: none;
}
.mh-jobs-search__field input:focus,
.mh-jobs-search__field select:focus { outline: 2px solid var(--mh-accent); outline-offset: -1px; border-color: var(--mh-accent); }

/* The country, when the platform is only in one of them. A `<select>`
   with a single option is a control that cannot do anything; this says
   the same thing and does not invite a click that changes nothing. */
.mh-jobs-search__field--fixed > span {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--mh-control-h-lg);
  padding: var(--mh-2) var(--mh-3);
  padding-inline-start: var(--mh-8);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text-2);
  white-space: nowrap;
}

/* ── The company card on a job page ────────────────────────────
   Who is hiring, said properly: the identity block, what they do and
   where, a sentence about them, two numbers, and the way to their
   page. Everything above the fold of a sidebar card. */

.mh-jcompany__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2) var(--mh-4);
  margin-top: var(--mh-4);
}

.mh-jcompany__about {
  margin: var(--mh-4) 0 0;
  font-size: var(--mh-t-sm);
  line-height: 1.85;
  color: var(--mh-text-2);
}

.mh-jcompany__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-3);
  margin-top: var(--mh-5);
  padding-top: var(--mh-4);
  border-top: 1px solid var(--mh-border);
}
.mh-jcompany__stats > div { display: flex; flex-direction: column; gap: 2px; }
.mh-jcompany__stats strong {
  font-size: var(--mh-t-h3);
  font-weight: 700;
  color: var(--mh-text);
  font-variant-numeric: tabular-nums;
}
.mh-jcompany__stats span { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }

.mh-jcompany__link { width: 100%; justify-content: center; margin-top: var(--mh-4); }

/* The employer, above the job title. */
.mh-detail__hero-org { margin-bottom: var(--mh-4); }

.mh-jobs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--mh-8);
  align-items: start;
  min-width: 0;
}
.mh-jobs-filters { position: sticky; top: var(--mh-5); display: flex; flex-direction: column; gap: var(--mh-4); min-width: 0; }
.mh-jobs-results { display: flex; flex-direction: column; gap: var(--mh-6); min-width: 0; }
.mh-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--mh-3);
  min-width: 0;
}

.mh-job {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  padding: var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--mh-t-fast);
  min-width: 0;
}
.mh-job:hover { border-color: var(--mh-border-strong); color: inherit; }
.mh-job--compact { padding: var(--mh-4); }

/* One column since 4.1: the company block moved under the title as
   `Parts::companyIdentity()`, which brings its own avatar. The old
   two-column grid put a 36px logo beside a two-line title and left the
   verification mark nowhere to sit. */
.mh-job__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mh-2); align-items: start; }
.mh-job__title {
  font-size: var(--mh-t-sm);
  font-weight: 500;
  line-height: var(--mh-lh-snug);
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}


.mh-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-1) var(--mh-4);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-job__meta span { display: inline-flex; align-items: center; gap: var(--mh-1); min-width: 0; }
.mh-job__meta .mh-icon { width: 13px; height: 13px; }

.mh-job__skills { display: flex; flex-wrap: wrap; gap: var(--mh-1); }

.mh-job__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--mh-3);
  border-top: 1px solid var(--mh-border);
}
.mh-job__salary {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text);
}
.mh-job__date { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }

.mh-cta-card { background: var(--mh-surface-sub); }
.mh-cta-card h3 { font-size: var(--mh-t-h3); font-weight: 500; margin-bottom: var(--mh-1); }
.mh-cta-card p { margin-bottom: var(--mh-4); font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-cta-card__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-text-2);
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */

@media (max-width: 1080px) {
  .mh-detail { grid-template-columns: minmax(0, 1fr); }
  .mh-aside { position: static; }
  .mh-jobs-layout { grid-template-columns: minmax(0, 1fr); }
  .mh-jobs-filters { position: static; }
}

@media (max-width: 900px) {
  .mh-shell { grid-template-columns: minmax(0, 1fr); gap: var(--mh-6); }

  .mh-side {
    position: static;
    padding-inline-end: 0;
    border-inline-end: 0;
    padding-bottom: 0;
  }
  .mh-side__stats { display: none; }

  /* Navigation becomes a single scrollable strip — never the page.
     It sticks to the top so that on a long list you can still switch
     section without scrolling back up, and it carries the page ground
     with it so content does not show through as it passes underneath. */
  /* Sticky, but strictly inside its column. Bleeding to the page edges
     with negative margins made the sidebar wider than its grid track,
     which the overflow audit caught as clipping on every portal screen
     at tablet and phone widths. */
  .mh-nav {
    position: sticky;
    top: 0;
    z-index: var(--mh-z-side);
    flex-direction: row;
    gap: var(--mh-1);
    padding: var(--mh-2) 0;
    max-width: 100%;
    background: var(--mh-bg);
    border-bottom: 1px solid var(--mh-border);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mh-nav::-webkit-scrollbar { display: none; }
  .mh-nav__item { white-space: nowrap; flex: 0 0 auto; }
  .mh-nav__item.is-active::before { inset-inline: 15%; inset-inline-start: 15%; top: auto; bottom: 0; width: auto; height: 2px; }
  .mh-nav__sep { display: none; }
  .mh-nav__badge { margin-inline-start: 0; }

  /* A hairline fade at the trailing edge, shown only when the strip
     genuinely overflows — an affordance that is never a lie.
     The #000 here is a mask alpha channel, not a visible colour: a mask
     reads only opacity, so it is black in every theme by definition and
     must not be tokenised. */
  .mh-nav.is-scrollable { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px); }
  [dir="ltr"] .mh-nav.is-scrollable { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
}

@media (max-width: 720px) {
  .mh-app { padding: var(--mh-6) var(--mh-gutter) var(--mh-12); }
  .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-stat { padding: var(--mh-3) var(--mh-4); }
  .mh-req { grid-template-columns: auto minmax(0, 1fr); gap: var(--mh-3); padding: var(--mh-4); }
  .mh-req__side { grid-column: 1 / -1; justify-content: flex-start; }
  .mh-req__title { white-space: normal; }
  .mh-tracker__label { display: none; }
  .mh-thread { max-height: none; padding: var(--mh-4); }
  .mh-composer { padding: var(--mh-4); }
  .mh-verify-banner { grid-template-columns: minmax(0, 1fr); }
  .mh-verify-banner .mh-btn { width: 100%; }
  .mh-file__name { max-width: 120px; }
  .mh-jobs-search__field--sm { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .mh-stats { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .mh-side, .mh-composer, .mh-head__actions, .mh-toolbar, .mh-toasts { display: none !important; }
  .mh-shell, .mh-detail { grid-template-columns: minmax(0, 1fr); }
  .mh-thread { max-height: none; overflow: visible; }
}

/* A card body that hosts an already-framed list needs no padding of its own. */
.mh-card__body--flush { padding: 0; }
.mh-card__body--flush > .mh-requests,
.mh-card__body--flush > .mh-jobs-grid { border: 0; border-radius: 0; }

/* ═══════════════════ VIEW TRANSITION (AJAX navigation) ═══════════════════
   The main column is replaced in place, so the wait has to be visible
   without the layout collapsing: the outgoing view stays where it is and
   dims, and a hairline at the top of the column pulses. Nothing moves,
   nothing is thrown away, and the page does not jump when the new view
   arrives. */

.mh-main { position: relative; }
.mh-main[aria-busy="true"] { cursor: progress; }
.mh-main[aria-busy="true"] > * {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--mh-t-fast);
}
.mh-main[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--mh-accent);
  animation: mh-pulse 1s ease-in-out infinite;
  z-index: 2;
}

@keyframes mh-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-main[aria-busy="true"]::after { animation: none; opacity: 0.8; }
  .mh-main[aria-busy="true"] > * { transition: none; }
}

/* The view region is focused after a swap so the change is announced.
   It must not draw a focus ring for that — it is a landmark receiving
   focus programmatically, not a control the user tabbed to. */
.mh-main:focus { outline: none; }
.mh-main:focus-visible { outline: 2px solid var(--mh-accent-text); outline-offset: 4px; }

/* A badge with no count is kept in the DOM as the slot the navigation
   controller writes the next count into. */
.mh-nav__badge[hidden] { display: none; }

/* ═══════════════════ SKELETON ═══════════════════ */

.mh-skeleton {
  display: block;
  height: 12px;
  border-radius: var(--mh-r-xs);
  background: linear-gradient(
    90deg,
    var(--mh-d-700) 0%,
    var(--mh-d-600) 50%,
    var(--mh-d-700) 100%
  );
  background-size: 200% 100%;
  animation: mh-shimmer 1.4s ease-in-out infinite;
}
.mh-skeleton--title { height: 18px; width: 44%; }
.mh-skeleton--line { width: 100%; }
.mh-skeleton--short { width: 62%; }
.mh-skeleton__stack { display: grid; gap: var(--mh-3); padding: var(--mh-5); }

@keyframes mh-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-skeleton { animation: none; background: var(--mh-d-700); }
}

/* ═══════════════════ SERVICE CATALOGUE & DETAIL (3.2) ═══════════════════ */

/* The card title is now a link into the service's own page: a customer
   should be able to read what a service includes before committing to
   the order form. */
.mh-service__link { color: inherit; text-decoration: none; }
.mh-service__link:hover { color: var(--mh-accent-text); }

/* A call to action the server has refused. Rendered rather than hidden,
   because "unavailable" is an answer and a missing button is not. */
.mh-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Requirement lists — what the customer has to bring. */
.mh-list { display: grid; gap: var(--mh-2); margin: 0; padding: 0; list-style: none; }
.mh-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--mh-2);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  min-width: 0;
}
.mh-list li .mh-icon { color: var(--mh-text-3); margin-top: 3px; }
.mh-list li span { overflow-wrap: anywhere; }

/* Operator-written copy. The only place in the product where markup
   comes from a text editor rather than from a template, so it is the
   only place that needs element styling — scoped here so it cannot
   reach anything else. */
.mh-prose { font-size: var(--mh-t-sm); color: var(--mh-text-2); line-height: var(--mh-lh-ar); }
.mh-prose > :first-child { margin-top: 0; }
.mh-prose > :last-child { margin-bottom: 0; }
.mh-prose p { margin: 0 0 var(--mh-3); }
.mh-prose ul, .mh-prose ol { margin: 0 0 var(--mh-3); padding-inline-start: var(--mh-5); }
.mh-prose li { margin-bottom: var(--mh-1); }
.mh-prose strong { color: var(--mh-text); font-weight: 500; }
.mh-prose a { color: var(--mh-accent-text); }

/* ═══════════════════ DASHBOARD FOCUS (3.3) ═══════════════════
   The first thing on a dashboard, and often the only thing that
   matters: what needs this person now. One surface, one row per
   obligation, worst first. No tiles, no counters that lead nowhere. */

.mh-focus {
  display: grid;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  overflow: hidden;
}

.mh-focus--clear {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--mh-3);
  padding: var(--mh-4) var(--mh-5);
  border-style: dashed;
}
.mh-focus--clear p { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-2); }
.mh-focus--clear .mh-focus__icon { color: var(--mh-success); }

.mh-app a.mh-focus__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  padding: var(--mh-4) var(--mh-5);
  border-top: 1px solid var(--mh-border);
  color: var(--mh-text);
  text-decoration: none;
  min-width: 0;
}
.mh-focus > .mh-focus__row:first-child { border-top: 0; }
.mh-app a.mh-focus__row:hover { background: var(--mh-surface-sub); }

.mh-focus__icon { display: inline-flex; flex: none; color: var(--mh-text-3); }
.mh-focus__row--warn .mh-focus__icon { color: var(--mh-warn); }
.mh-focus__row--critical .mh-focus__icon { color: var(--mh-danger); }
.mh-focus__row--info .mh-focus__icon { color: var(--mh-accent-text); }

.mh-focus__body { min-width: 0; display: grid; gap: 2px; }
.mh-focus__body strong { font-size: var(--mh-t-sm); font-weight: 500; overflow-wrap: anywhere; }
.mh-focus__body span { font-size: var(--mh-t-2xs); color: var(--mh-text-3); overflow-wrap: anywhere; }

.mh-focus__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-accent-text);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .mh-app a.mh-focus__row { grid-template-columns: auto minmax(0, 1fr); gap: var(--mh-3); }
  .mh-focus__cta { grid-column: 2; }
}

/* ═══════════════════ COMMERCE (3.3) ═══════════════════

   Three components, and each one exists because the checkout would be
   worse without it rather than because a store is expected to have one.

   `.mh-checkout`   two columns on a desk, one on a phone, with the
                    summary panel sticky so the price stays visible while
                    the customer reads what they are getting.
   `.mh-package`    a radio that looks like a card. The whole card is the
                    label, so the hit target is the card and not a 16px
                    circle — and the real radio is still there, which is
                    what keeps it keyboard- and screen-reader-navigable.
   `.mh-flow`       four numbered lines. Named `flow` rather than `steps`
                    because `.mh-steps` is already the signup progress
                    indicator, and two different things wearing one class
                    name is how a stylesheet starts fighting itself.   */

.mh-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--mh-5);
  align-items: start;
  min-width: 0;
}

.mh-checkout__main,
.mh-checkout__side { display: grid; gap: var(--mh-5); min-width: 0; }

@media (max-width: 900px) {
  .mh-checkout { grid-template-columns: minmax(0, 1fr); }

  /* The price comes first on a phone: it is the thing being decided. */
  .mh-checkout__side { order: -1; }
}

.mh-card--sticky { position: sticky; top: var(--mh-5); }

@media (max-width: 900px) {
  .mh-card--sticky { position: static; }
}

/* ─── packages ─── */

.mh-packages { display: grid; gap: var(--mh-3); min-width: 0; }

.mh-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mh-4);
  padding: var(--mh-4) var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  cursor: pointer;
  transition: border-color var(--mh-t-fast), background var(--mh-t-fast);
  min-width: 0;
}

.mh-package:hover { border-color: var(--mh-border-strong, var(--mh-accent-line)); }

.mh-package.is-on {
  border-color: var(--mh-accent);
  background: var(--mh-surface-sub);
}

/* The radio itself is visually hidden, never removed: `display: none`
   would take it out of the tab order and out of the accessibility tree,
   which is the whole reason a real input is used here. */
.mh-package input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mh-package input[type="radio"]:focus-visible + .mh-package__body {
  outline: 2px solid var(--mh-accent);
  outline-offset: 4px;
  border-radius: var(--mh-r-sm);
}

.mh-package--static { cursor: default; grid-template-columns: minmax(0, 1fr); }
.mh-package--static:hover { border-color: var(--mh-border); }

.mh-packages--preview { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mh-packages--preview .mh-package { align-content: start; gap: var(--mh-3); }

.mh-package__body { display: grid; gap: var(--mh-2); min-width: 0; }
.mh-package__name { font-size: var(--mh-t-h3); font-weight: 500; overflow-wrap: anywhere; }
.mh-package__summary { font-size: var(--mh-t-sm); color: var(--mh-text-2); overflow-wrap: anywhere; }

.mh-package__features { display: grid; gap: var(--mh-1); }
.mh-package__features span {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  overflow-wrap: anywhere;
}
.mh-package__features svg { flex: none; color: var(--mh-success); }

.mh-package__price { display: grid; gap: 2px; text-align: start; white-space: nowrap; }
.mh-package__price strong { font-size: var(--mh-t-h2); font-weight: 700; color: var(--mh-text); }
.mh-package__price small { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }

/* ─── summary ─── */

.mh-summary { display: grid; gap: 0; margin: 0 0 var(--mh-4); }
.mh-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-4);
  padding: var(--mh-3) 0;
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-summary > div:last-child { border-bottom: 0; }
.mh-summary dt { font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-summary dd { margin: 0; font-size: var(--mh-t-sm); font-weight: 500; text-align: end; overflow-wrap: anywhere; }

.mh-summary__total { border-top: 1px solid var(--mh-border); }
.mh-summary__total dt { font-size: var(--mh-t-sm); color: var(--mh-text); font-weight: 500; }
.mh-summary__total dd { font-size: var(--mh-t-title); font-weight: 700; color: var(--mh-accent-text); }

.mh-fine {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: var(--mh-3) 0 0;
  font-size: var(--mh-t-2xs);
}
.mh-fine svg { flex: none; }

/* ─── order lines ─── */

.mh-lines { list-style: none; margin: 0 0 var(--mh-4); padding: 0; display: grid; gap: 0; }
.mh-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-4);
  padding: var(--mh-3) 0;
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-line:last-child { border-bottom: 0; }
.mh-line__name { font-size: var(--mh-t-sm); overflow-wrap: anywhere; }
.mh-line__price { font-size: var(--mh-t-sm); font-weight: 500; white-space: nowrap; }

/* ─── the outcome banner ─── */

.mh-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  min-width: 0;
}
.mh-done h2 { margin: 0 0 2px; font-size: var(--mh-t-h2); }
.mh-done p { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-2); }

.mh-done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--mh-r-pill);
  background: var(--mh-success-bg);
  border: 1px solid var(--mh-success-line);
  color: var(--mh-success);
}
.mh-done__icon--wait {
  background: var(--mh-warn-bg);
  border-color: var(--mh-warn-line);
  color: var(--mh-warn);
}

.mh-card--accent { border-color: var(--mh-success-line); }

@media (max-width: 640px) {
  .mh-done { grid-template-columns: auto minmax(0, 1fr); }
  .mh-done > .mh-btn,
  .mh-done > .mh-badge { grid-column: 1 / -1; justify-content: center; }
  .mh-package { grid-template-columns: minmax(0, 1fr); }
  .mh-package__price { text-align: start; }
}

/* ─── how the service runs ─── */

.mh-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mh-3); counter-reset: mh-flow; }
.mh-flow li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--mh-3);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  min-width: 0;
}
.mh-flow__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--mh-r-pill);
  background: var(--mh-surface-sub);
  border: 1px solid var(--mh-border);
  font-size: var(--mh-t-2xs);
  font-weight: 700;
  color: var(--mh-accent-text);
}

/* ═══════════════════ FOLLOWERS (4.1) ═══════════════════
   The company's own list. Three columns on a desktop — who, how to
   reach them, when they followed — collapsing to a stack on a phone,
   where a three-column row of an email address and a date is a
   horizontal scrollbar. */

.mh-flist { list-style: none; margin: 0; padding: 0; }

.mh-flist__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-3);
  padding: var(--mh-3) 0;
  border-bottom: 1px solid var(--mh-border);
  min-width: 0;
}
.mh-flist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.mh-flist__row:first-child { padding-top: 0; }

.mh-flist__who { min-width: 0; }

.mh-flist__contact {
  display: flex;
  flex-direction: column;
  gap: var(--mh-1);
  min-width: 0;
  font-size: var(--mh-t-2xs);
}
.mh-flist__contact .mh-meta { min-width: 0; }
.mh-flist__contact .mh-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-flist__when {
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .mh-flist__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mh-2);
  }
  .mh-flist__when { order: 3; }
}

/* ═══════════════════ PRIVACY (4.1) ═══════════════════
   One row per field, and the two choices side by side. Radios rather
   than a switch: "public" and "private" are two named states and a
   toggle would leave the reader to work out which end is which. */

.mh-privacy { display: grid; gap: var(--mh-3); }

.mh-privacy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
}
.mh-privacy__label {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  font-weight: 500;
  font-size: var(--mh-t-sm);
  min-width: 0;
}
.mh-privacy__hint {
  margin: 4px 0 0;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-relaxed, 1.8);
}
.mh-privacy__choices { display: flex; gap: var(--mh-1); flex-wrap: wrap; }

.mh-privacy__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  padding: 0 var(--mh-3);
  min-height: var(--mh-control-h-sm);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-2);
  cursor: pointer;
  white-space: nowrap;
}
.mh-privacy__choice input { position: absolute; opacity: 0; pointer-events: none; }
.mh-privacy__choice:has(input:checked) {
  border-color: var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
}
.mh-privacy__choice:has(input:focus-visible) { outline: 2px solid var(--mh-accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .mh-privacy__row { grid-template-columns: minmax(0, 1fr); }
}

/* A hidden element is hidden. Said once, so no component rule can
   accidentally outrank it and leave an invisible layer over the page. */
[hidden] { display: none !important; }

/* ═══════════════════ JOB FILTERS ON A PHONE ═══════════════════

   The jobs page exists to show jobs. On a desktop the filter rail sits
   beside the results and costs nothing; on a phone the same rail
   stacks *above* them, so opening the page meant scrolling past five
   radio groups and a call-to-action card before seeing a single job.

   Below 1080px the rail becomes a bottom sheet: a bar you tap, a panel
   that slides up over the page, and an apply button pinned where a
   thumb already is. Above 1080px every rule here is inert and the
   desktop layout is exactly what it was.

   The open/closed state is a real attribute — `data-open` on the
   container, mirrored to `aria-expanded` on the bar and `aria-hidden`
   on the scrim — set by the server as closed and toggled by the
   controller in `app.js`. It is not `display:none` with the markup and
   the accessibility tree left disagreeing. */

.mh-jfilters__bar,
.mh-jfilters__scrim,
.mh-jfilters__head { display: none; }

@media (max-width: 1080px) {

  /* The bar: what the filters look like when they are closed. */
  .mh-jfilters__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mh-3);
    width: 100%;
    min-height: 48px;
    padding: var(--mh-3) var(--mh-4);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-r);
    background: var(--mh-surface);
    color: var(--mh-text);
    font: inherit;
    font-size: var(--mh-t-sm);
    cursor: pointer;
  }
  .mh-jfilters__bar:hover { border-color: var(--mh-border-hard); }
  .mh-jfilters__barmain { display: inline-flex; align-items: center; gap: var(--mh-2); font-weight: 500; }
  .mh-jfilters__barmain .mh-icon { color: var(--mh-accent-text); }
  .mh-jfilters__results { font-size: var(--mh-t-xs); color: var(--mh-text-3); white-space: nowrap; }

  .mh-jfilters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--mh-r-pill);
    background: var(--mh-accent);
    color: var(--mh-white, #fff);
    font-size: var(--mh-t-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* The call-to-action card belongs beside the results on a desktop.
     On a phone it is a third thing between the person and the jobs. */
  .mh-jfilters .mh-cta-card { display: none; }

  /* The sheet itself. */
  .mh-jfilters__panel {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 720px);
    border-radius: var(--mh-r-lg) var(--mh-r-lg) 0 0;
    border-top: 1px solid var(--mh-border);
    background: var(--mh-surface);
    transform: translateY(100%);
    transition: transform var(--mh-t-med, 220ms) ease;
  }

  .mh-jfilters[data-open="false"] .mh-jfilters__panel {
    /* Out of the layout *and* out of the tab order. Moving it off
       screen alone would leave every radio focusable behind the page. */
    visibility: hidden;
  }

  .mh-jfilters[data-open="true"] .mh-jfilters__panel {
    visibility: visible;
    transform: translateY(0);
  }

  /* Shown by the state, not by a bare `display: block` — which
     outranks the browser's own `[hidden] { display: none }` and left a
     full-screen invisible layer swallowing every tap on the page,
     including the tap on the bar that was meant to open it. */
  .mh-jfilters[data-open="true"] .mh-jfilters__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgb(0 0 0 / 0.55);
  }

  .mh-jfilters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mh-3);
    flex: 0 0 auto;
    padding: var(--mh-4) var(--mh-5);
    border-bottom: 1px solid var(--mh-border);
  }
  .mh-jfilters__head h2 { margin: 0; font-size: var(--mh-t-h3); }
  .mh-jfilters__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--mh-r-sm);
    background: transparent;
    color: var(--mh-text-2);
    cursor: pointer;
  }
  .mh-jfilters__x:hover { background: var(--mh-surface-sub); color: var(--mh-text); }

  /* The filters scroll inside the sheet, never the page behind it. */
  .mh-jfilters__panel > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .mh-jfilters__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The sheet has its own heading, so the card's is a second one. */
  .mh-jfilters__body .mh-card { border: 0; background: transparent; }
  .mh-jfilters__body .mh-card__head { display: none; }

  .mh-jfilters__foot {
    flex: 0 0 auto;
    display: grid;
    gap: var(--mh-2);
    padding: var(--mh-4) var(--mh-5);
    padding-bottom: calc(var(--mh-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mh-border);
    background: var(--mh-surface);
  }

  /* The page does not move while the sheet is open. */
  body.mh-noscroll {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-jfilters__panel { transition: none; }
}

/* ═══════════════════ PAID PLACEMENT (4.3) ═══════════════════

   The sponsored strip above the board, the promoted card, the mark,
   the plan cards in the editor, and the promotion panel on a
   posting's dashboard page. Gold is the platform's own warn/gold
   token — the same amber the verification mark for a company uses —
   so a promoted posting reads as part of the system rather than as
   an advert pasted onto it. */

/* ── The strip ─────────────────────────────────────────────── */
.mh-jobs-sponsored {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  min-width: 0;
  padding: var(--mh-4);
  border: 1px solid var(--mh-gold-line);
  border-radius: var(--mh-r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mh-gold) 9%, transparent) 0%, transparent 60%),
    var(--mh-surface-sub);
}
.mh-jobs-sponsored__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-3);
  flex-wrap: wrap;
  min-width: 0;
}
.mh-jobs-sponsored__head h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
  font-size: var(--mh-t-h3);
  font-weight: 600;
  color: var(--mh-text);
}
.mh-jobs-sponsored__head h2 .mh-icon { color: var(--mh-gold); }
.mh-jobs-sponsored__note { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }

/* Two to a row. Its own rule — `.mh-jobs-grid` below is untouched. */
.mh-jobs-sponsored__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mh-3);
  min-width: 0;
}
@media (max-width: 720px) {
  .mh-jobs-sponsored__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── The promoted card ─────────────────────────────────────── */
.mh-job--featured {
  position: relative;
  border: 1.5px solid var(--mh-gold);
  box-shadow: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-gold) 7%, transparent) 0%, transparent 42%),
    var(--mh-surface);
}
.mh-job--featured:hover { border-color: var(--mh-gold); background-color: var(--mh-surface-sub); }
.mh-job--sponsored { padding: var(--mh-6); gap: var(--mh-4); }
.mh-job--sponsored .mh-job__title { font-size: var(--mh-t-base, 1rem); -webkit-line-clamp: 3; }
.mh-job--sponsored .mh-job__meta { font-size: var(--mh-t-xs); }

/* The mark. On the card it sits in the top corner; on the detail
   hero it sits inline with the reference and the status. */
.mh-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--mh-r-pill);
  border: 1px solid var(--mh-gold-line);
  background: var(--mh-gold-bg);
  color: var(--mh-gold-fg);
  font-size: var(--mh-t-2xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.mh-featured-badge .mh-icon { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; }
.mh-featured-badge--lg { padding: 4px 11px; font-size: var(--mh-t-xs); }
.mh-featured-badge--lg .mh-icon { width: 14px; height: 14px; }
.mh-job .mh-featured-badge { align-self: flex-start; }
.mh-detail__hero--featured { border-color: var(--mh-gold-line); }

/* ── The plan cards ────────────────────────────────────────── */
.mh-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mh-4);
  min-width: 0;
}
@media (max-width: 760px) {
  .mh-plans__grid { grid-template-columns: minmax(0, 1fr); }
}
.mh-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mh-4);
  padding: var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast);
}
.mh-plan:hover { border-color: var(--mh-border-strong); }
.mh-plan.is-on { border-color: var(--mh-accent); background: var(--mh-surface); }
.mh-plan--featured { border-color: var(--mh-gold-line); }
.mh-plan--featured.is-on { border-color: var(--mh-gold); box-shadow: none; }
.mh-plan__input { position: absolute; inset-inline-start: var(--mh-4); top: var(--mh-4); width: 1px; height: 1px; opacity: 0; }
.mh-plan__check {
  position: absolute;
  inset-inline-end: var(--mh-4);
  top: var(--mh-4);
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--mh-border-strong);
  background: var(--mh-surface);
}
.mh-plan.is-on .mh-plan__check { border-color: var(--mh-accent); background: var(--mh-accent); box-shadow: inset 0 0 0 4px var(--mh-surface); }
.mh-plan--featured.is-on .mh-plan__check { border-color: var(--mh-gold); background: var(--mh-gold); }
.mh-plan:focus-within { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
.mh-plan--featured:focus-within { outline-color: var(--mh-gold); }
.mh-plan__ribbon {
  position: absolute;
  top: -11px;
  inset-inline-start: var(--mh-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--mh-r-pill);
  border: 1px solid var(--mh-gold-line);
  background: var(--mh-gold-bg);
  color: var(--mh-gold-fg);
  font-size: var(--mh-t-2xs);
  font-weight: 600;
}
.mh-plan__head { display: flex; align-items: center; gap: var(--mh-3); padding-inline-end: 28px; min-width: 0; flex-wrap: wrap; }
.mh-plan__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--mh-r-sm);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface);
  color: var(--mh-text-2);
}
.mh-plan--featured .mh-plan__icon { color: var(--mh-gold); border-color: var(--mh-gold-line); }
.mh-plan__title { font-size: var(--mh-t-h3); font-weight: 600; color: var(--mh-text); }
.mh-plan__price {
  margin-inline-start: auto;
  font-size: var(--mh-t-h3);
  font-weight: 700;
  color: var(--mh-text);
  white-space: nowrap;
}
.mh-plan__price small { font-size: var(--mh-t-2xs); font-weight: 500; color: var(--mh-text-3); }
.mh-plan--featured .mh-plan__price { color: var(--mh-gold-fg); }
.mh-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mh-2); }
.mh-plan__list li { display: flex; align-items: flex-start; gap: var(--mh-2); font-size: var(--mh-t-xs); color: var(--mh-text-2); line-height: var(--mh-lh); }
.mh-plan__list .mh-icon { flex: none; margin-top: 3px; color: var(--mh-success); }
.mh-plan--featured .mh-plan__list .mh-icon { color: var(--mh-gold); }
.mh-plan__foot {
  display: flex; align-items: flex-start; gap: var(--mh-2);
  margin-top: auto;
  padding-top: var(--mh-3);
  border-top: 1px dashed var(--mh-border);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-plan__foot .mh-icon { flex: none; margin-top: 2px; }

/* ── The promotion panel on the dashboard ──────────────────── */
.mh-promo--live { border-color: var(--mh-gold-line); }
.mh-promo--live .mh-card__head .mh-icon:first-child { color: var(--mh-gold); }
.mh-promo__facts { margin-bottom: var(--mh-4); }
.mh-promo__cta { display: flex; align-items: center; gap: var(--mh-3); flex-wrap: wrap; margin-top: var(--mh-4); }
.mh-promo__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mh-3);
  min-width: 0;
}
@media (max-width: 900px) { .mh-promo__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-promo__stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-md, var(--mh-r-lg));
  background: var(--mh-surface-sub);
  min-width: 0;
}
.mh-promo__stat-icon { color: var(--mh-text-3); margin-bottom: var(--mh-1); }
.mh-promo__stat-value { font-size: var(--mh-t-h2); font-weight: 700; color: var(--mh-text); line-height: 1.2; overflow-wrap: anywhere; }
.mh-promo__stat-label { font-size: var(--mh-t-xs); color: var(--mh-text-2); }
.mh-promo__stat-hint { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-promo--live .mh-promo__stat-icon { color: var(--mh-gold); }
.mh-jobs-results__note { margin: 0; font-size: var(--mh-t-xs); }

/* ═══════════════════ OFFERS & DAILY CAMPAIGN (4.5) ═══════════════════

   Two public components and one portal tab.

   `[mihhar_campaign]` is a single surface: a quiet hero, the benefit,
   the steps and the rules in the main column; the seat counter, the
   action and the two-step application in a panel that stays in view.
   On a phone the panel comes first — the counter and the button are
   what the page is for.

   `[mihhar_offers]` is a grid of cards on the same hairline-and-space
   system as the service tiles. Nothing here introduces a colour: the
   accent, the gold and the semantic tones are the platform's own. */

/* ── The campaign surface ─────────────────────────────────── */
.mh-campaign-app { max-width: 1120px; }

.mh-cmp {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
}

/* Hero */
.mh-cmp__hero { position: relative; border-bottom: 1px solid var(--mh-border); }
.mh-cmp__media {
  aspect-ratio: 16 / 5;
  min-height: 140px;
  max-height: 320px;
  overflow: hidden;
  background: var(--mh-surface-sub);
}
.mh-cmp__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh-cmp__hero-body { padding: var(--mh-7) var(--mh-8) var(--mh-6); }
.mh-cmp__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-2);
  margin-bottom: var(--mh-4);
}
.mh-cmp__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  min-height: 26px;
  padding: 0 var(--mh-3);
  border: 1px solid var(--mh-accent-line);
  border-radius: var(--mh-r-pill);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  letter-spacing: var(--mh-track-label);
}
.mh-cmp__state {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  min-height: 26px;
  padding: 0 var(--mh-3);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-pill);
  color: var(--mh-text-2);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
}
.mh-cmp__state--active   { color: var(--mh-success); border-color: var(--mh-success-line); background: var(--mh-success-bg); }
.mh-cmp__state--upcoming { color: var(--mh-info); border-color: var(--mh-info-line); background: var(--mh-info-bg); }
.mh-cmp__state--ended,
.mh-cmp__state--disabled { color: var(--mh-text-3); }
.mh-cmp__state--active .mh-dot { animation: mh-cmp-pulse 1.8s ease-in-out infinite; }
@keyframes mh-cmp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.mh-cmp__title {
  margin: 0;
  font-size: var(--mh-t-display);
  font-weight: var(--mh-w-semi);
  line-height: var(--mh-lh-tight);
  color: var(--mh-text);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.mh-cmp__tagline {
  max-width: 62ch;
  margin: var(--mh-3) 0 0;
  font-size: var(--mh-t-body);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-ar);
}

/* Two columns */
.mh-cmp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--mh-8);
  padding: var(--mh-7) var(--mh-8) var(--mh-8);
  align-items: start;
}
.mh-cmp__main { min-width: 0; display: flex; flex-direction: column; gap: var(--mh-7); }
.mh-cmp__side { min-width: 0; }
.mh-cmp__panel {
  position: sticky;
  top: var(--mh-5);
  display: flex;
  flex-direction: column;
  gap: var(--mh-5);
  padding: var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
}

/* Benefit */
.mh-cmp__benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-4);
  align-items: center;
  padding: var(--mh-4) var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
}
.mh-cmp__benefit-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--mh-r);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
  border: 1px solid var(--mh-accent-line);
}
.mh-cmp__benefit-label {
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  letter-spacing: var(--mh-track-label);
  color: var(--mh-text-3);
}
.mh-cmp__benefit-text {
  margin-top: 2px;
  font-size: var(--mh-t-h3);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-snug);
}
.mh-cmp__desc { max-width: 68ch; }

/* Sections */
.mh-cmp__section { min-width: 0; }
.mh-cmp__h2 {
  margin: 0 0 var(--mh-4);
  font-size: var(--mh-t-h2);
  font-weight: 500;
  color: var(--mh-text);
}
.mh-cmp__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mh-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.mh-cmp__step {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  min-width: 0;
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
}
.mh-cmp__step-n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
  font-size: var(--mh-t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mh-cmp__step-body { display: flex; flex-direction: column; gap: var(--mh-1); min-width: 0; }
.mh-cmp__step-body strong { font-size: var(--mh-t-sm); font-weight: 500; color: var(--mh-text); line-height: var(--mh-lh-snug); }
.mh-cmp__step-body span { font-size: var(--mh-t-xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }

.mh-cmp__rules {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0 var(--mh-4);
  list-style: none;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
}
.mh-cmp__rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-3);
  align-items: start;
  padding: var(--mh-3) 0;
  border-bottom: 1px solid var(--mh-border);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-snug);
}
.mh-cmp__rules li:last-child { border-bottom: 0; }
.mh-cmp__rules .mh-icon { margin-top: 4px; color: var(--mh-success); }
.mh-cmp__window {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: var(--mh-3) 0 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
}
.mh-cmp__window .mh-icon { color: var(--mh-text-3); flex-shrink: 0; }

/* Counter */
.mh-cmp__counter { display: flex; flex-direction: column; gap: var(--mh-3); }
.mh-cmp__counter-label {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text-2);
}
.mh-cmp__counter-label .mh-icon { color: var(--mh-text-3); }
.mh-cmp__day { margin-inline-start: auto; font-weight: 400; color: var(--mh-text-3); }
.mh-cmp__numbers {
  display: flex;
  align-items: baseline;
  gap: var(--mh-2);
  line-height: 1;
}
.mh-cmp__remaining {
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  font-weight: var(--mh-w-bold);
  color: var(--mh-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color var(--mh-t-fast);
}
.mh-cmp__of { font-size: var(--mh-t-sm); color: var(--mh-text-3); }
.mh-cmp__capacity { font-size: var(--mh-t-title); font-weight: 500; color: var(--mh-text-2); font-variant-numeric: tabular-nums; }
.mh-cmp__unit { margin-inline-start: var(--mh-1); font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-cmp__bar {
  height: 6px;
  overflow: hidden;
  border-radius: var(--mh-r-pill);
  background: var(--mh-surface-hard);
}
.mh-cmp__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mh-accent);
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--mh-t-fast);
}
.mh-cmp__counter.is-low .mh-cmp__bar-fill { background: var(--mh-warn); }
.mh-cmp__counter.is-full .mh-cmp__remaining { color: var(--mh-danger); }
.mh-cmp__counter.is-full .mh-cmp__bar-fill { background: var(--mh-danger); }
.mh-cmp__counter.is-bumped .mh-cmp__remaining { animation: mh-cmp-bump 420ms ease-out; }
@keyframes mh-cmp-bump { 0% { transform: translateY(-4px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.mh-cmp__reset {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-cmp__reset .mh-icon { flex-shrink: 0; }
.mh-cmp__reset b {
  margin-inline-start: auto;
  font-family: var(--mh-font-mono);
  font-weight: 500;
  color: var(--mh-text-2);
  font-variant-numeric: tabular-nums;
}
.mh-cmp:not(.is-live) .mh-cmp__reset { display: none; }

/* Call to action */
.mh-cmp__cta { display: flex; flex-direction: column; gap: var(--mh-3); }
.mh-cmp__cta-note { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); text-align: center; }
.mh-cmp__cta[hidden] { display: none; }

/* Already applied / state notices */
.mh-cmp__mine,
.mh-cmp__notice {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
}
.mh-cmp__mine-head { display: flex; align-items: center; gap: var(--mh-2); color: var(--mh-success); }
.mh-cmp__mine-head strong { color: var(--mh-text); font-weight: 500; font-size: var(--mh-t-sm); }
.mh-cmp__mine-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mh-3); flex-wrap: wrap; }
.mh-cmp__mine p { margin: 0; font-size: var(--mh-t-xs); line-height: var(--mh-lh-snug); }
.mh-cmp__ref {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text-2);
  letter-spacing: 0.02em;
}
.mh-cmp__notice { align-items: center; text-align: center; padding: var(--mh-6) var(--mh-4); }
.mh-cmp__notice-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--mh-border-strong);
  color: var(--mh-text-2);
}
.mh-cmp__notice strong { font-size: var(--mh-t-h3); font-weight: 500; color: var(--mh-text); }
.mh-cmp__notice p { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }

/* The application, drawn inside the panel */
.mh-cmp__apply { display: flex; flex-direction: column; gap: var(--mh-4); }
.mh-cmp__apply[hidden] { display: none; }
.mh-cmp__progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--mh-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-cmp__progress li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-2);
  min-width: 0;
  padding-top: var(--mh-1);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  text-align: center;
  border-top: 2px solid var(--mh-border-strong);
}
.mh-cmp__progress li span {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mh-border-strong);
  font-size: 11px;
  font-weight: 700;
  color: var(--mh-text-3);
  font-variant-numeric: tabular-nums;
}
.mh-cmp__progress li.is-current { color: var(--mh-text); border-top-color: var(--mh-accent); }
.mh-cmp__progress li.is-current span { border-color: var(--mh-accent); color: var(--mh-accent-text); }
.mh-cmp__progress li.is-done { color: var(--mh-text-2); border-top-color: var(--mh-accent); }
.mh-cmp__progress li.is-done span { background: var(--mh-accent); border-color: var(--mh-accent); color: var(--mh-white); }

.mh-cmp__stepform { display: flex; flex-direction: column; gap: var(--mh-4); }
.mh-cmp__stepform[hidden] { display: none; }
.mh-cmp__stepnav { display: flex; justify-content: space-between; align-items: center; gap: var(--mh-2); }
.mh-cmp__stepnav .mh-btn--primary { margin-inline-start: auto; }
.mh-cmp__dz-hint { margin-top: var(--mh-1); font-size: var(--mh-t-2xs); color: var(--mh-text-3); direction: ltr; }
.mh-cmp .mh-dropzone { padding: var(--mh-5) var(--mh-4); }
.mh-queue__item.is-draft { border-color: var(--mh-success-line); background: var(--mh-success-bg); }
.mh-queue__item.is-draft .mh-icon { color: var(--mh-success); }

.mh-cmp__rulesbox {
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
}
.mh-cmp__rulesbox strong { display: block; margin-bottom: var(--mh-2); font-size: var(--mh-t-xs); font-weight: 500; color: var(--mh-text); }
.mh-cmp__rulesbox ol { margin: 0; padding-inline-start: var(--mh-4); font-size: var(--mh-t-2xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }
.mh-cmp__rulesbox li + li { margin-top: var(--mh-1); }

.mh-cmp__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-3);
  padding: var(--mh-4) 0 0;
  text-align: center;
}
.mh-cmp__done[hidden] { display: none; }
.mh-cmp__done-icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--mh-success-line);
  background: var(--mh-success-bg);
  color: var(--mh-success);
}
.mh-cmp__done h3 { margin: 0; font-size: var(--mh-t-h2); font-weight: 500; color: var(--mh-text); }
.mh-cmp__done p { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }
.mh-cmp__done .mh-cmp__mine-row { justify-content: center; }
.mh-cmp__done .mh-btn { margin-top: var(--mh-2); }

/* A required mark inside a label is a mark, not a request row. */
.mh-label .mh-req {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mh-danger);
}

/* ── The offers grid ──────────────────────────────────────── */
.mh-offers__head { max-width: 62ch; margin-bottom: var(--mh-6); }
.mh-offers__head h2 { margin: 0; font-size: var(--mh-t-title); font-weight: var(--mh-w-semi); color: var(--mh-text); }
.mh-offers__head p { margin: var(--mh-2) 0 0; font-size: var(--mh-t-body); color: var(--mh-text-2); line-height: var(--mh-lh-ar); }

.mh-offers {
  display: grid;
  grid-template-columns: repeat(var(--mh-offers-cols, 3), minmax(0, 1fr));
  gap: var(--mh-4);
  min-width: 0;
}
.mh-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast);
}
.mh-offer:hover { border-color: var(--mh-border-strong); }
.mh-offer__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-bottom: 1px solid var(--mh-border);
  background: var(--mh-surface-sub);
  color: var(--mh-text-3);
}
.mh-offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-offer__glyph {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--mh-r-lg);
  border: 1px solid var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
}
.mh-offer__kind,
.mh-offer__ribbon {
  position: absolute;
  top: var(--mh-3);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--mh-2);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.mh-offer__kind { inset-inline-start: var(--mh-3); border: 1px solid var(--mh-border-strong); background: rgba(8, 11, 18, 0.72); color: var(--mh-text-2); }
.mh-offer__ribbon { inset-inline-end: var(--mh-3); border: 1px solid var(--mh-warn-line); background: var(--mh-warn-bg); color: var(--mh-warn); }
.mh-offer.is-ended .mh-offer__ribbon,
.mh-offer.is-disabled .mh-offer__ribbon { border-color: var(--mh-border-strong); background: var(--mh-surface-hard); color: var(--mh-text-3); }
.mh-offer.is-ended .mh-offer__media img,
.mh-offer.is-disabled .mh-offer__media img { filter: grayscale(1); opacity: 0.55; }

.mh-offer__body { display: flex; flex-direction: column; gap: var(--mh-2); padding: var(--mh-5) var(--mh-5) var(--mh-3); flex: 1; }
.mh-offer__title {
  margin: 0;
  font-size: var(--mh-t-h2);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-tight);
  overflow-wrap: anywhere;
}
.mh-offer__tagline { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-2); line-height: var(--mh-lh-snug); }
.mh-offer__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-2);
  margin: var(--mh-1) 0 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
}
.mh-offer__benefit .mh-icon { flex-shrink: 0; margin-top: 3px; color: var(--mh-success); }

.mh-offer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-3);
  flex-wrap: wrap;
  padding: var(--mh-3) var(--mh-5) var(--mh-5);
  border-top: 1px solid var(--mh-border);
  margin-top: auto;
}
.mh-offer__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-offer__price strong { font-size: var(--mh-t-h2); font-weight: var(--mh-w-semi); color: var(--mh-text); font-variant-numeric: tabular-nums; }
.mh-offer__price small { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-offer__free { color: var(--mh-success) !important; }
.mh-offer__action { display: flex; min-width: 0; }
.mh-offer__action .mh-btn { white-space: nowrap; }
.mh-offers .mh-offer[data-mh-offer-verify] .mh-offer__action { opacity: 0.7; }

/* One card on its own ([mihhar_offer]) sits at a readable width. */
.mh-offers[style*="--mh-offers-cols:1"] { max-width: 560px; }

/* ── Portal: participations ───────────────────────────────── */
.mh-req__ready {
  display: inline-flex !important;
  align-items: center;
  gap: var(--mh-1);
  color: var(--mh-success) !important;
  font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mh-cmp__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--mh-6); padding: var(--mh-6); }
  .mh-cmp__hero-body { padding: var(--mh-6) var(--mh-6) var(--mh-5); }
  .mh-offers { grid-template-columns: repeat(min(var(--mh-offers-cols, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mh-cmp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--mh-6); }
  .mh-cmp__side { order: -1; }
  .mh-cmp__panel { position: static; }
  .mh-cmp__steps { grid-template-columns: minmax(0, 1fr); }
  .mh-cmp__step { flex-direction: row; align-items: flex-start; }
  .mh-cmp__step-n { flex-shrink: 0; }
  .mh-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mh-campaign-app,
  .mh-offers-app { padding-inline: var(--mh-3); }
  .mh-cmp { border-radius: var(--mh-r-lg); }
  .mh-cmp__hero-body { padding: var(--mh-5) var(--mh-4) var(--mh-4); }
  .mh-cmp__media { aspect-ratio: 16 / 7; min-height: 120px; }
  .mh-cmp__grid { padding: var(--mh-4); gap: var(--mh-5); }
  .mh-cmp__panel { padding: var(--mh-4); gap: var(--mh-4); }
  .mh-cmp__benefit { padding: var(--mh-3) var(--mh-4); gap: var(--mh-3); }
  .mh-cmp__benefit-icon { width: 40px; height: 40px; }
  .mh-cmp__remaining { font-size: 2.25rem; }
  .mh-cmp__stepnav { flex-wrap: wrap; }
  .mh-cmp__stepnav .mh-btn { flex: 1 1 auto; justify-content: center; }
  .mh-offers { grid-template-columns: minmax(0, 1fr); }
  .mh-offer__foot { flex-direction: column; align-items: stretch; }
  .mh-offer__action .mh-btn { width: 100%; justify-content: center; }
  .mh-offer__price { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-cmp__state--active .mh-dot,
  .mh-cmp__counter.is-bumped .mh-cmp__remaining { animation: none; }
  .mh-cmp__bar-fill { transition: none; }
}

/* ── Campaign: the extra notes (4.5.1) ──────────────────────────── */
.mh-cmp__tip,
.mh-cmp__once {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-2);
  align-items: start;
  margin: var(--mh-2) 0 0;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
}
.mh-cmp__tip .mh-icon { margin-top: 2px; color: var(--mh-gold-fg, #eeae54); }
.mh-cmp__tip--plain .mh-icon,
.mh-cmp__once .mh-icon { color: var(--mh-text-4); }
.mh-cmp__panel .mh-vnote { font-size: var(--mh-t-2xs); }

/* ── The pre-submission check card (4.11) ───────────────────────── */
/*
   Phase 11 shipped the card's markup and behaviour and left it to
   inherit the form's own type. These rules give it a surface without
   giving it any power: no `display`, no `visibility`, nothing that
   touches the submit button, and the actions row keeps the DOM order
   `PresentationMapper` guarantees — Continue first, always.
*/
.mh-ats-check {
  margin: var(--mh-4) 0;
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-mute);
  display: grid;
  gap: var(--mh-3);
}
/* `display:grid` above outranks the UA rule for the `hidden` attribute,
   and the card is hidden by attribute both before its first result and
   whenever a request never arrives. Without this it would sit there as
   an empty box on every apply form. */
.mh-ats-check[hidden] { display: none; }
.mh-ats-check[aria-busy="true"] { opacity: 0.75; }
.mh-ats-check__status,
.mh-ats-check__body {
  margin: 0;
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-ar);
}
.mh-ats-check__headline {
  margin: 0;
  font-size: var(--mh-t-body);
  font-weight: 600;
  line-height: var(--mh-lh-snug);
}
.mh-ats-check__headline:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
/* Tone colours the rule, never the text alone: a person who cannot
   distinguish the three still reads the headline, which says the
   outcome in words. */
.mh-ats-check.is-positive  { border-inline-start: 3px solid var(--mh-success); }
.mh-ats-check.is-neutral   { border-inline-start: 3px solid var(--mh-border-strong); }
.mh-ats-check.is-attention { border-inline-start: 3px solid var(--mh-gold-fg, #eeae54); }
.mh-ats-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2);
  align-items: center;
}
.mh-ats-check__offer {
  display: grid;
  gap: var(--mh-1);
}
.mh-ats-check__note {
  margin: 0;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
}
@media (max-width: 640px) {
  .mh-ats-check__actions .mh-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── The résumé service page (4.12) ─────────────────────────────── */
.mh-improve { max-width: 720px; margin-inline: auto; }
.mh-improve__card { display: grid; gap: var(--mh-5); padding: var(--mh-6); }
.mh-improve__head { display: grid; gap: var(--mh-3); }
.mh-improve__title {
  margin: 0;
  font-size: var(--mh-t-h2);
  line-height: var(--mh-lh-tight);
}
.mh-improve__body {
  margin: 0;
  font-size: var(--mh-t-body);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-ar);
}
.mh-improve__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mh-3);
}
.mh-improve__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-3);
  align-items: start;
  font-size: var(--mh-t-sm);
  line-height: var(--mh-lh-ar);
}
.mh-improve__list .mh-icon { margin-top: 3px; color: var(--mh-success); }
/* The limit on what is being sold, in normal type and above the button
   rather than below it. Muted, not hidden. */
.mh-improve__limit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-2);
  align-items: start;
  margin: 0;
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-info-line, var(--mh-border));
  border-radius: var(--mh-r-sm);
  background: var(--mh-info-bg, var(--mh-surface-mute));
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-ar);
}
.mh-improve__limit .mh-icon { margin-top: 2px; color: var(--mh-text-3); }
.mh-improve__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mh-4);
  border-top: 1px solid var(--mh-border);
}
.mh-improve__price { display: grid; gap: 2px; }
.mh-improve__price-label { font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-improve__price-amount { font-size: var(--mh-t-value); line-height: 1; }
.mh-improve__note {
  margin: 0;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
}
@media (max-width: 640px) {
  .mh-improve__card { padding: var(--mh-4); gap: var(--mh-4); }
  .mh-improve__buy { flex-direction: column; align-items: stretch; }
  .mh-improve__cta { width: 100%; justify-content: center; }
}

/* ── The re-check (4.13) ────────────────────────────────────────── */
/*
   Sits under the offer on the same page. No `display` games, no
   disabled anything beyond the button while a request is in flight, and
   the result region is hidden by attribute until there is a result —
   with the same `[hidden]` guard the check card needs, for the same
   reason.
*/
.mh-recheck {
  max-width: 720px;
  margin: var(--mh-4) auto 0;
  padding: var(--mh-6);
  display: grid;
  gap: var(--mh-4);
}
.mh-recheck__title {
  margin: 0;
  font-size: var(--mh-t-h3);
  line-height: var(--mh-lh-tight);
}
.mh-recheck__intro,
.mh-recheck__body,
.mh-recheck__comparison,
.mh-recheck__line,
.mh-recheck__status {
  margin: 0;
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-ar);
}
.mh-recheck__file { display: grid; gap: var(--mh-2); }
.mh-recheck__file-label { font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-recheck__file input[type="file"] {
  font: inherit;
  padding: var(--mh-3);
  border: 1px dashed var(--mh-border-strong);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface-mute);
  width: 100%;
}
.mh-recheck__file input[type="file"]:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 2px;
}
.mh-recheck [data-mh-recheck-run] { justify-self: start; }
.mh-recheck__result {
  display: grid;
  gap: var(--mh-3);
  padding-top: var(--mh-4);
  border-top: 1px solid var(--mh-border);
}
.mh-recheck__result[hidden] { display: none; }
.mh-recheck__result[aria-busy="true"] { opacity: 0.75; }
.mh-recheck__headline {
  margin: 0;
  font-size: var(--mh-t-body);
  font-weight: 600;
  line-height: var(--mh-lh-snug);
}
.mh-recheck__headline:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
.mh-recheck__subhead {
  margin: 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  font-weight: 600;
}
@media (max-width: 640px) {
  .mh-recheck { padding: var(--mh-4); gap: var(--mh-3); }
  .mh-recheck [data-mh-recheck-run] { justify-self: stretch; text-align: center; }
}

/* 4.17.0 — offer "before" price, discount and description */
.mh-offer__was { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mh-offer__was del { color: var(--mh-text-3); font-size: var(--mh-t-sm, 0.875rem); font-variant-numeric: tabular-nums; }
.mh-offer__off { font-style: normal; font-size: var(--mh-t-2xs); font-weight: var(--mh-w-semi); color: var(--mh-success); background: color-mix(in srgb, var(--mh-success) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.mh-offer__desc { font-size: var(--mh-t-sm, 0.875rem); color: var(--mh-text-2, var(--mh-text)); line-height: 1.7; margin-top: 6px; }
.mh-offer__desc ul, .mh-offer__desc ol { margin: 4px 0 0; padding-inline-start: 1.2em; }
.mh-offer__desc li { margin: 2px 0; }