/* ============================================================================
   Hi-Tech Homes Portal — application shell and screens
   Requires tokens.css and style.css.
   ========================================================================= */

/* --- shell --------------------------------------------------------------- */

.hhp-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.hhp-body { display: flex; flex-direction: column; min-width: 0; }

.hhp-main {
  flex: 1;
  padding: var(--space-6) var(--space-8);
  max-width: var(--content-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- sidebar ------------------------------------------------------------- */

.hhp-sidebar {
  background: var(--color-accent-900);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Staff see the WordPress admin bar. Offset the sticky sidebar so the brand
   is not tucked underneath it. Owners never see the bar. */
.admin-bar .hhp-sidebar { top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .hhp-sidebar { top: 46px; height: auto; }
}

.hhp-sidebar__brand {
  padding: 0 var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hhp-sidebar__logo { max-width: 132px; height: auto; }
.hhp-sidebar__wordmark {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.1;
}
.hhp-sidebar__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.hhp-nav { display: flex; flex-direction: column; }

.hhp-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  color: color-mix(in srgb, #ffffff 78%, transparent);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.hhp-nav__item:hover { color: #ffffff; background: color-mix(in srgb, #ffffff 6%, transparent); }
.hhp-nav__item.is-current {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.hhp-nav__label { flex: 1; }
.hhp-nav__badge {
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 11px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.hhp-sidebar__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-accent-700);
}
.hhp-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
}
.hhp-sidebar__avatar {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 12px;
  flex: none;
}
.hhp-sidebar__name { font-size: 13px; }
.hhp-sidebar__signout {
  display: block;
  padding: 0 var(--space-6);
  font-size: 12px;
  color: var(--color-accent-300);
}

/* --- topbar -------------------------------------------------------------- */

.hhp-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  min-height: var(--topbar-height);
}

/* Title and lede travel together; the switcher stays on the right. */
.hhp-topbar__heading { flex: 1; min-width: 0; }
.hhp-topbar__title { font-size: 19px; margin: 0; }

/* The lede is the line that tells an owner what a screen is for. Muted, but
   not so muted it reads as fine print, because some of it is reassurance
   rather than decoration. */
.hhp-topbar__lede {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  max-width: 68ch;
}

.hhp-switcher { position: relative; }
.hhp-switcher__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 280px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  z-index: 40;
}
.hhp-switcher__menu.is-open { display: block; }
.hhp-switcher__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.hhp-switcher__item:last-child { border-bottom: 0; }
.hhp-switcher__item:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.hhp-switcher__item.is-current { background: var(--color-accent-100); }
.hhp-switcher__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.hhp-switcher__addr { font-size: 12px; }

/* --- page head ----------------------------------------------------------- */

.hhp-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hhp-pagehead__title { font-size: 32px; margin: 0; }
.hhp-pagehead__stats { display: flex; gap: var(--space-8); }

.hhp-stat { display: flex; flex-direction: column; gap: 2px; }
.hhp-stat__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.hhp-stat__value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; }
.hhp-stat__value--accent { color: var(--color-accent-800); }

.hhp-section-title { font-size: 17px; margin: 0 0 var(--space-3); }

/* --- stage timeline ------------------------------------------------------ */

.hhp-timeline { padding: var(--space-6) var(--space-8); }
.hhp-timeline__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhp-timeline__cell {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding-top: 16px;
}
.hhp-timeline__line {
  position: absolute;
  top: 30px;
  height: 1px;
  width: 50%;
  background: var(--color-divider);
}
.hhp-timeline__line--in { left: 0; }
.hhp-timeline__line--out { right: 0; }
.hhp-timeline__cell:first-child .hhp-timeline__line--in,
.hhp-timeline__cell:last-child .hhp-timeline__line--out { background: transparent; }
.hhp-timeline__cell.is-complete .hhp-timeline__line,
.hhp-timeline__cell.is-current .hhp-timeline__line--in { background: var(--color-accent); }

.hhp-timeline__node {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-neutral-500);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.is-complete .hhp-timeline__node {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.is-current .hhp-timeline__node {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-800);
}
.hhp-timeline__num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; }
.hhp-timeline__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; }
.hhp-timeline__date { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* --- grids --------------------------------------------------------------- */

.hhp-grid { display: grid; gap: var(--space-6); }
.hhp-grid--dashboard { grid-template-columns: 1.6fr 1fr; align-items: start; }
.hhp-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hhp-col--side { gap: var(--space-4); }

/* --- update rows --------------------------------------------------------- */

.hhp-update-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
}
.hhp-update-row:last-of-type { border-bottom: 0; }
.hhp-update-row__thumb { flex: none; width: 104px; }
.hhp-update-row__thumb img { width: 104px; height: 76px; object-fit: cover; }
.hhp-update-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hhp-update-row__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; }
.hhp-update-row__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.hhp-update-row__excerpt { font-size: 13px; opacity: 0.8; }
.hhp-update-row__author { font-size: 11px; }

/* --- action card --------------------------------------------------------- */

.hhp-action { background: var(--color-accent-100); }

/* --- empty states -------------------------------------------------------- */

.hhp-empty { padding: var(--space-8); max-width: 620px; }
.hhp-empty__title { font-size: 25px; margin: 0 0 var(--space-2); }

/* --- filter chips -------------------------------------------------------- */

.hhp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- feed ---------------------------------------------------------------- */

.hhp-feed { display: flex; flex-direction: column; gap: var(--space-6); }
.hhp-feed__item { padding: var(--space-4) var(--space-6); gap: var(--space-3); }
.hhp-feed__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; }
.hhp-feed__title { font-size: 25px; margin: 0; }
.hhp-feed__title a { color: inherit; text-decoration: none; }
.hhp-feed__title a:hover { color: var(--color-accent-800); }
.hhp-feed__body { font-size: 14px; line-height: 1.65; max-width: 74ch; }
.hhp-feed__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
}

.hhp-pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hhp-pagination .page-numbers {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
}
.hhp-pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); }

/* --- update detail ------------------------------------------------------- */

.hhp-update-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.hhp-update-detail__cover { overflow: hidden; }
.hhp-update-detail__cover img { width: 100%; height: 380px; object-fit: cover; }
.hhp-update-detail__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.hhp-update-detail__title { font-size: 32px; margin: 0; }
.hhp-update-detail__body { font-size: 15px; line-height: 1.7; max-width: 70ch; }
.hhp-update-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}

/* --- photo grids --------------------------------------------------------- */

.hhp-photos { display: grid; gap: var(--space-3); }
.hhp-photos--3 { grid-template-columns: repeat(3, 1fr); }
.hhp-photos--4 { grid-template-columns: repeat(4, 1fr); }

.hhp-photos__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-divider);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.hhp-photos__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hhp-photos__tile:hover { border-color: var(--color-accent-600); }

.hhp-gallery__cell { display: flex; flex-direction: column; gap: var(--space-1); }

/* --- lightbox ------------------------------------------------------------ */

.hhp-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-accent-900) 92%, transparent);
  color: var(--color-bg);
  display: none;
  grid-template-rows: auto 1fr auto;
}
.hhp-lightbox[open] { display: grid; }
.hhp-lightbox::backdrop { background: color-mix(in srgb, var(--color-accent-900) 92%, transparent); }

.hhp-lightbox__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-accent-700);
}
.hhp-lightbox__heading { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hhp-lightbox__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.hhp-lightbox__sub { display: flex; gap: var(--space-3); font-size: 12px; color: var(--color-accent-300); }
.hhp-lightbox__counter { font-size: 12px; color: var(--color-accent-300); }
.hhp-lightbox__close { color: var(--color-bg); border-color: var(--color-accent-700); }

.hhp-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  min-height: 0;
}
.hhp-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; }
.hhp-lightbox__nav {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--color-accent-700);
  color: var(--color-bg);
  cursor: pointer;
}
.hhp-lightbox__nav:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hhp-lightbox__nav[hidden] { display: none; }

.hhp-lightbox__foot {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-accent-700);
  font-size: 12px;
  color: var(--color-accent-300);
}

/* --- documents ----------------------------------------------------------- */

.hhp-docsearch { display: flex; gap: var(--space-2); max-width: 420px; }

.hhp-docs { display: flex; flex-direction: column; }
.hhp-docs__head, .hhp-docs__row {
  display: grid;
  grid-template-columns: 2.4fr 1.2fr 0.6fr 0.9fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.hhp-docs__head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.hhp-docs__row { font-size: 14px; }
.hhp-docs__row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.hhp-docs__name { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.hhp-docs__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.hhp-docs__note { font-size: 12px; }

/* --- property picker ----------------------------------------------------- */

.hhp-properties { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.hhp-property { padding: 0; text-decoration: none; color: inherit; gap: 0; }
.hhp-property__cover { display: block; overflow: hidden; }
.hhp-property__cover img { width: 100%; height: 170px; object-fit: cover; }
.hhp-property__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.hhp-property__foot { display: flex; justify-content: space-between; font-size: 13px; margin-top: var(--space-1); }
.hhp-property__stage { font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: var(--color-accent-800); }

.hhp-progress { display: block; height: 5px; background: var(--color-neutral-200); margin: var(--space-2) 0; }
.hhp-progress__fill { display: block; height: 100%; background: var(--color-accent); }

/* --- sign in, forgotten password, reset ----------------------------------- */

.hhp-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.hhp-auth__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: calc(var(--space-8) * 2) calc(var(--space-8) * 2.4);
}

.hhp-auth__top { display: flex; flex-direction: column; gap: 2px; }
.hhp-auth__name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.1;
}
.hhp-auth__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.hhp-auth__headline {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 14ch;
  color: var(--color-bg);
}

.hhp-auth__stats { display: flex; flex-direction: column; }
.hhp-auth__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.hhp-auth__stat + .hhp-auth__stat { border-top: 1px solid var(--color-accent-700); }
.hhp-auth__statvalue {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1;
  color: var(--color-accent);
}
.hhp-auth__statlabel { font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.hhp-auth__licence { font-size: 12px; color: var(--color-accent-400); margin: 0; min-height: 1em; }

.hhp-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-8) * 2) var(--space-6);
}

.hhp-auth__form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hhp-auth__heading { font-size: 26px; margin: 0; }
.hhp-auth__intro { font-size: 14px; line-height: 1.6; margin: 0; }
.hhp-auth__hint { display: block; font-size: 12px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.hhp-auth__form form { display: flex; flex-direction: column; gap: var(--space-4); }

.hhp-auth__notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  font-size: 14px;
  line-height: 1.55;
}
.hhp-auth__notice--ok { background: var(--color-accent-100); }
.hhp-auth__notice--error { background: var(--color-neutral-100); border-left-color: var(--color-accent-700); }

.hhp-auth__remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.hhp-auth__remember input { accent-color: var(--color-accent-700); }

.hhp-auth__links { margin: 0; font-size: 13px; }
.hhp-auth__support { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* Section header with an action on the right, per the design. The count sits
   in the header rather than as a link at the bottom, so someone who wants the
   full list does not have to scroll past three updates to find the way in. */
.hhp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.hhp-section-head .hhp-section-title { margin: 0; }

/* Timeline card header, per the design: title left, percentage right. */
.hhp-timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hhp-timeline__pct { margin: 0; font-size: 13px; }

/* Gallery tiles carry the update headline, then the stage chip and date. The
   headline is what tells an owner what they are looking at; a bare date does
   not. */
.hhp-gallery__caption { display: block; padding-top: var(--space-2); }
.hhp-gallery__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.hhp-gallery__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; flex-wrap: wrap; }

/* Right-rail card figures, per the design: a lead line at 18px and a money
   figure at 26px, so the number an owner is looking for is the loudest thing
   in the card. */
.hhp-card-lead { margin: 0 0 var(--space-2); font-size: 18px; line-height: 1.3; }
.hhp-card-figure {
  margin: 2px 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
}
.hhp-card-title__aside { float: right; font-size: 12px; font-weight: 400; }

/* Owner preview bar.
   Deliberately loud. The failure this prevents is a staff member forgetting
   which mode they are in, so it sits above everything, stays put on scroll,
   and uses the accent as a field rather than as text. */
.hhp-preview-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: var(--color-accent);
  color: #14140f;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid #14140f;
}

.hhp-preview-bar__label {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  padding: 2px 8px;
  background: #14140f;
  color: var(--color-accent);
}

.hhp-preview-bar__detail { flex: 1 1 320px; }
.hhp-preview-bar__address { opacity: 0.75; }

.hhp-preview-bar__exit {
  color: #14140f;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Anything the templates render disabled while previewing. */
.hhp-preview-bar ~ * [disabled],
.hhp-preview-bar ~ * [aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .hhp-preview-bar { padding: 8px var(--space-4); font-size: 12px; }
}

/* --- phone treatment for everything added since the original pass ---------

   These components were all built after the responsive rules were written, so
   each one was inheriting desktop layout on a 390px screen. Most owners will
   open this on a phone while standing somewhere, so this is not a nicety.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Card headers that put a title left and a figure right. On a phone there is
     no room for two columns, so they stack and the figure keeps its weight. */
  .hhp-timeline__head,
  .hhp-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .hhp-timeline__pct { font-size: 12px; }
  .hhp-card-title__aside { float: none; display: block; margin-top: 2px; }

  /* "View all 12" should not stretch across the screen. */
  .hhp-section-head .btn { align-self: flex-start; }

  /* Right-rail figures. Slightly smaller, still the loudest thing in the card. */
  .hhp-card-lead { font-size: 16px; }
  .hhp-card-figure { font-size: 22px; }

  /* Gallery captions. The headline is what tells someone what they are looking
     at, so it stays; the chip and date wrap underneath rather than truncating. */
  .hhp-gallery__label { font-size: 13px; }
  .hhp-gallery__meta { font-size: 11px; gap: 6px; }

  /* Variation cost moves under the title rather than fighting it for width. */
  .hhp-variation__head { flex-direction: column; gap: var(--space-2); }
  .hhp-variation__costblock { text-align: left; }
  .hhp-variation__cost { font-size: 21px; }
  .hhp-variation__title { font-size: 21px; }

  /* Percentage under the milestone name. */
  .hhp-payments__pct { font-size: 11px; }

  /* Page heading and its lede. */
  .hhp-topbar__heading { width: 100%; }
}

/* reCAPTCHA attribution. Quiet, but it has to be readable to satisfy Google's
   terms, so it stays above the contrast floor rather than fading to grey. */
.hhp-auth__legal { margin: 0; font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.hhp-auth__legal a { color: inherit; }

/* Hide the floating badge. Permitted only because .hhp-auth__legal is shown
   in its place. If that notice is ever removed, delete this rule too. */
.grecaptcha-badge { visibility: hidden; }

@media (max-width: 860px) {
  .hhp-auth { grid-template-columns: 1fr; min-height: 0; }
  .hhp-auth__brand { padding: var(--space-8) var(--space-6); gap: var(--space-6); }
  .hhp-auth__headline { font-size: 32px; max-width: none; }
  .hhp-auth__stats { flex-direction: row; gap: var(--space-8); }
  .hhp-auth__stat { padding: 0; flex-direction: column; gap: 2px; }
  .hhp-auth__stat + .hhp-auth__stat { border-top: 0; }
  .hhp-auth__licence { display: none; }
  .hhp-auth__panel { padding: var(--space-8) var(--space-6); align-items: flex-start; }
}

/* --- build schedule ------------------------------------------------------ */

.hhp-schedule { padding: var(--space-6); gap: var(--space-4); }
.hhp-schedule__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hhp-schedule__status {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  margin: 2px 0 0;
}
.hhp-schedule__status--ahead,
.hhp-schedule__status--unknown { color: var(--color-accent-800); }
.hhp-schedule__status--slight { color: var(--color-accent-800); }
/* Deliberately not red. A build running late is normal and the portal should
   report it plainly, not alarm someone about their own house. */
.hhp-schedule__status--behind { color: var(--color-neutral-900); }

.hhp-schedule__was { font-size: 11px; }

.hhp-schedule__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-100);
  font-size: 14px;
  line-height: 1.6;
}

.hhp-schedule__chart { width: 100%; overflow-x: auto; }
.hhp-schedule__chart svg { width: 100%; height: auto; min-width: 520px; display: block; }

.hhp-gantt__grid { stroke: var(--color-divider); stroke-width: 1; }
.hhp-gantt__today { stroke: var(--color-accent-600); stroke-width: 1; stroke-dasharray: 3 3; }

.hhp-gantt__label {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 12px;
  fill: var(--color-text);
}
.hhp-gantt__monthlabel,
.hhp-gantt__todaylabel {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--color-neutral-600);
}
.hhp-gantt__todaylabel { fill: var(--color-accent-800); }

.hhp-gantt__planned { fill: none; stroke: var(--color-neutral-500); stroke-width: 1; }
.hhp-gantt__actual { fill: var(--color-accent); }
.hhp-gantt__actual.is-late { fill: var(--color-accent-700); }

.hhp-gantt__variance {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 10px;
  fill: var(--color-neutral-600);
}
.hhp-gantt__variance.is-late { fill: var(--color-accent-800); }

.hhp-schedule__key { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; }
.hhp-schedule__keyitem { display: inline-flex; align-items: center; gap: 6px; }
.hhp-swatch { width: 14px; height: 8px; display: inline-block; }
.hhp-swatch--planned { border: 1px solid var(--color-neutral-500); }
.hhp-swatch--actual { background: var(--color-accent); }
.hhp-swatch--late { background: var(--color-accent-700); }

.hhp-schedule__caveat { font-size: 12px; margin: 0; max-width: 68ch; }

/* --- payments ------------------------------------------------------------ */

.hhp-paysummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.hhp-paysummary__card { padding: var(--space-4) var(--space-6); gap: 2px; }
.hhp-paysummary__card--due { background: var(--color-accent-100); }
.hhp-paysummary__value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1.1;
}

.hhp-payments { display: flex; flex-direction: column; }
.hhp-payments__head, .hhp-payments__row {
  display: grid;
  /* Five columns, per the design. The percentage folds under the milestone
     name rather than taking a column of its own, which keeps the row readable
     on a narrow screen. */
  grid-template-columns: 2.6fr 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.hhp-payments__head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.hhp-payments__row { font-size: 14px; }
.hhp-payments__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.hhp-payments__pct {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}
.hhp-payments__amount { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.hhp-payments__note { font-size: 12px; }

/* --- appointments -------------------------------------------------------- */

.hhp-appt { flex-direction: row; gap: var(--space-4); padding: var(--space-4); align-items: flex-start; }
.hhp-appt--cancelled { opacity: 0.55; }
.hhp-appt__date {
  flex: none;
  width: 66px;
  border: 1px solid var(--color-divider);
  text-align: center;
  overflow: hidden;
}
.hhp-appt__month {
  display: block;
  background: var(--color-accent-900);
  color: var(--color-bg);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 0;
}
.hhp-appt__day {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1.5;
}
.hhp-appt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hhp-appt__head { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.hhp-appt__head .hhp-appt__title { flex: 1; min-width: 0; }

/* Design stacks the status pill above the reschedule button in a right-hand
   column, so the row has one clear action rather than two things competing. */
.hhp-appt__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.hhp-appt__request { margin: 0; }

@media (max-width: 600px) {
  .hhp-appt__actions { flex-direction: row; align-items: center; width: 100%; }
}
.hhp-appt__title { font-size: 19px; margin: 0; }
.hhp-appt__when { margin: 0; font-size: 14px; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hhp-appt__meta { font-size: 13px; margin: 0; }
.hhp-appt__notes { font-size: 13px; margin: var(--space-2) 0 0; }
.hhp-appt-request { padding: var(--space-6); border-style: dashed; }

/* --- messages ------------------------------------------------------------ */

.hhp-thread { display: flex; flex-direction: column; gap: var(--space-4); }
.hhp-msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; align-items: flex-start; }
.hhp-msg--mine { align-self: flex-end; align-items: flex-end; }
.hhp-msg__bubble {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  font-size: 14px;
  line-height: 1.6;
}
.hhp-msg__bubble p { margin: 0 0 var(--space-2); }
.hhp-msg__bubble p:last-child { margin: 0; }
.hhp-msg--mine .hhp-msg__bubble {
  background: var(--color-accent-900);
  color: var(--color-bg);
  border-color: var(--color-accent-900);
}
.hhp-msg__meta { font-size: 11px; margin: 0; }

/* Composer rules live with the conversation block at the end of this file,
   since the two are now one card. */

/* --- variations ---------------------------------------------------------- */

.hhp-variation { padding: var(--space-6); gap: var(--space-3); }
.hhp-variation--pending { background: var(--color-accent-100); }
/* Reference and status above the title on the left, cost on the right. The
   cost is what the decision turns on, so it gets its own block rather than
   sitting in the body after three paragraphs of description. */
.hhp-variation__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hhp-variation__headmain { flex: 1; min-width: 0; }
.hhp-variation__headmain .card-kicker { margin: 0; }
.hhp-variation__headmain .tag { margin-top: 4px; }
.hhp-variation__title { font-size: 25px; margin: 6px 0 0; }

.hhp-variation__costblock { text-align: right; flex-shrink: 0; }
.hhp-variation__cost {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  margin: 0;
  line-height: 1.1;
}
.hhp-variation__costnote { font-family: var(--font-body); font-weight: 400; font-size: 12px; margin: 2px 0 0; }

@media (max-width: 600px) {
  .hhp-variation__costblock { text-align: left; }
}
.hhp-variation__body { font-size: 14px; line-height: 1.65; max-width: 74ch; }
.hhp-variation__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.hhp-variation__by { font-size: 12px; margin-left: auto; }
.hhp-variation__resolution {
  font-size: 13px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* --- notification preferences -------------------------------------------- */

.hhp-prefs { display: flex; flex-direction: column; gap: var(--space-6); }
.hhp-prefs__mobile { padding: var(--space-6); max-width: 420px; }
.hhp-prefs__list { display: flex; flex-direction: column; }
.hhp-prefs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.hhp-prefs__row:last-child { border-bottom: 0; }
.hhp-prefs__label { display: flex; flex-direction: column; gap: 2px; }
.hhp-prefs__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.hhp-prefs__desc { font-size: 12px; }
.hhp-prefs__channels { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.hhp-prefs__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.hhp-prefs__toggle input:disabled + span { opacity: 0.45; }

.hhp-notice { background: var(--color-accent-100); padding: var(--space-3) var(--space-4); }

/* --- mobile — owners will use phones, and the design was desktop-only ----- */

@media (max-width: 900px) {
  .hhp-shell { grid-template-columns: 1fr; }

  .hhp-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: var(--space-3) 0;
    gap: var(--space-2);
  }
  .hhp-sidebar__brand { padding: 0 var(--space-4); }
  .hhp-sidebar__kicker { display: none; }
  .hhp-nav { flex-direction: row; }
  .hhp-nav__item {
    padding: var(--space-2) var(--space-3);
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .hhp-nav__item.is-current { border-left: 0; border-bottom-color: var(--color-accent); }

  /*
   * Keep the labels on a phone.
   *
   * Hiding them left ten unlabelled icons in a row, and an owner who opens
   * this once a fortnight has no reason to know which glyph means Documents
   * and which means Payments. The strip already scrolls horizontally, so the
   * space was never really the constraint. A slightly longer scroll is a much
   * smaller cost than guessing.
   */
  .hhp-nav__label { display: inline; font-size: 13px; }
  .hhp-nav__item { gap: var(--space-2); }
  .hhp-sidebar__foot { margin-top: 0; padding-top: 0; border-top: 0; display: flex; align-items: center; }
  .hhp-sidebar__user { padding: 0 var(--space-3); }
  .hhp-sidebar__name { display: none; }

  .hhp-topbar { padding: var(--space-3) var(--space-4); align-items: flex-start; }
  .hhp-topbar__lede { font-size: 13px; }
  .hhp-main { padding: var(--space-4); gap: var(--space-4); }

  .hhp-grid--dashboard { grid-template-columns: 1fr; }
  .hhp-pagehead__title { font-size: 25px; }
  .hhp-pagehead__stats { gap: var(--space-6); }

  /* Timeline goes vertical — seven cells will not fit a phone */
  .hhp-timeline { padding: var(--space-4); }
  .hhp-timeline__track { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hhp-timeline__cell {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    padding-top: 0;
    width: 100%;
  }
  .hhp-timeline__line { display: none; }
  .hhp-timeline__name { flex: 1; }

  .hhp-update-row__thumb, .hhp-update-row__thumb img { width: 80px; }
  .hhp-update-row__thumb img { height: 60px; }

  .hhp-feed__item { padding: var(--space-4); }
  .hhp-feed__title { font-size: 20px; }
  .hhp-update-detail__title { font-size: 25px; }
  .hhp-update-detail__cover img { height: 220px; }

  .hhp-photos--3, .hhp-photos--4 { grid-template-columns: repeat(2, 1fr); }

  .hhp-properties { grid-template-columns: 1fr; }

  /* Documents reflow to stacked cards — five columns is unusable on a phone */
  .hhp-docs__head { display: none; }
  .hhp-docs__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name     action"
      "meta     action";
    row-gap: var(--space-1);
    padding: var(--space-4) 0;
  }
  .hhp-docs__name { grid-area: name; }
  .hhp-docs__row > [role="cell"]:not(.hhp-docs__name):not(:last-child) {
    grid-area: meta;
    font-size: 12px;
  }
  .hhp-docs__row > [role="cell"]:nth-child(3),
  .hhp-docs__row > [role="cell"]:nth-child(4) { display: none; }
  .hhp-docs__row > [role="cell"]:last-child { grid-area: action; align-self: center; }

  .hhp-lightbox__head { padding: var(--space-3) var(--space-4); }
  .hhp-lightbox__stage { gap: var(--space-2); padding: var(--space-2); }
  .hhp-lightbox__nav { width: 36px; height: 36px; }

  .hhp-prefs__row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .hhp-prefs__mobile { padding: var(--space-4); max-width: none; }

  .hhp-paysummary { grid-template-columns: 1fr; }

  /* Six columns is unusable on a phone. Stack to milestone, amount, status. */
  .hhp-payments__head { display: none; }
  .hhp-payments__row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
    padding: var(--space-4) 0;
  }
  /* Due date is now the third cell, not the fourth. Hiding it on a phone
     would remove the one thing an owner opened this screen to check. */
  .hhp-payments__row > [role="cell"]:nth-child(3) { font-size: 12px; }

  .hhp-variation { padding: var(--space-4); }
  .hhp-variation__title { font-size: 20px; }
  .hhp-variation__actions { flex-direction: column; align-items: stretch; }
  .hhp-variation__by { margin-left: 0; }

  .hhp-appt { flex-direction: column; }
  .hhp-msg { max-width: 92%; }
}

/* --- conversation -------------------------------------------------------- */

/* Thread and composer are one card, per the design. A separate composer card
   reads as a different tool; folded in, it reads as the reply box for the
   conversation above it. */
.hhp-conversation { padding: 0; }
.hhp-conversation .hhp-thread { padding: var(--space-6); }
.hhp-conversation .hhp-empty { border: 0; padding: var(--space-6); max-width: none; }
.hhp-composer { padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--color-divider); }
.hhp-composer .field { margin: 0 0 var(--space-3); }
.hhp-composer textarea { min-height: 72px; }
.hhp-composer__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); }

@media (max-width: 600px) {
  .hhp-conversation .hhp-thread { padding: var(--space-4); }
  .hhp-composer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .hhp-composer__foot .btn { width: 100%; justify-content: center; }
}

/* --- progress feed header ------------------------------------------------ */

/* Title left, "Open update" right, per the design. The whole title is still a
   link, so the button is a second route rather than the only one. */
.hhp-feed__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.hhp-feed__head .hhp-feed__title { flex: 1; min-width: 0; margin: 0; }
.hhp-feed__open { flex-shrink: 0; }

@media (max-width: 600px) {
  /* On a phone the headline needs the full width, and tapping it already
     opens the update, so the button would only be taking up room. */
  .hhp-feed__open { display: none; }
}

/* ============================================================================
   The front door: portal.hitechhomes.com.au
   ========================================================================= */

.hhp-door {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
  color: #ffffff;
  max-width: none;
}

/* --- background ----------------------------------------------------------- */

.hhp-door__bg { position: absolute; inset: 0; z-index: 0; }

.hhp-door__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hhp-door__slide.is-active { opacity: 1; }

/*
 * The one place in this build with a transition.
 *
 * The design system says no transitions, and that rule earns its keep on
 * buttons and cards where movement is noise. Here the alternative is three
 * photographs hard-cutting behind a headline, which reads as a fault. Six
 * seconds of crossfade is slow enough to be scenery rather than motion.
 */
@media (prefers-reduced-motion: no-preference) {
  .hhp-door__slide { transition: opacity 1600ms ease-in-out; }
}

/*
 * The scrim is load-bearing, not decoration. Text sits directly on
 * photographs of houses, which vary from bright sky to dark cladding, so the
 * overlay has to be heavy enough to hold contrast on the worst of them.
 */
.hhp-door__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(20, 19, 11, 0.93) 0%,
      rgba(20, 19, 11, 0.88) 34%,
      rgba(20, 19, 11, 0.55) 62%,
      rgba(20, 19, 11, 0.22) 100%);
}

/* --- content -------------------------------------------------------------- */

.hhp-door__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hhp-door__head { display: flex; flex-direction: column; gap: 2px; }
.hhp-door__wordmark {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1.05;
}
.hhp-door__kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.hhp-door__lead { max-width: 40ch; }

.hhp-door__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: 5px 10px;
  border: 1px solid var(--color-accent-700);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hhp-door__eyebrow svg { stroke: currentColor; }

.hhp-door__title {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.04;
  margin: 0 0 var(--space-4);
}

.hhp-door__body {
  margin: 0 0 var(--space-6);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.hhp-door__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hhp-door__ghost { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- capabilities --------------------------------------------------------- */

/*
 * Separate cards rather than a hairline grid.
 *
 * The first pass used 1px gaps over a light background, which produced a
 * table. Individual bordered cards with room to breathe read as considered,
 * and match the line-drawing language used through the rest of the portal.
 */
.hhp-door__caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.hhp-door__cap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 19, 11, 0.72);
}

/* The icon sits in its own square, the same 28px node used on the build
   timeline, so the two screens feel like the same system. */
.hhp-door__capicon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent);
  flex: none;
}
.hhp-door__capicon svg { stroke: currentColor; }

.hhp-door__captitle {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.2;
}
.hhp-door__capbody {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin-top: -4px;
}

/* --- foot ----------------------------------------------------------------- */

/*
 * The footer holds one, two or three lines depending on whether the phone and
 * licence details have been filled in. space-between with a single child pins
 * it left and looks accidental, so the items simply sit in a row with a gap
 * and the licence pushes right only when there is something to its left.
 */
.hhp-door__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hhp-door__note { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.68); }
.hhp-door__note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.hhp-door__licence { margin-left: auto; color: rgba(255, 255, 255, 0.45); font-size: 12px; }

@media (max-width: 700px) {
  .hhp-door__licence { margin-left: 0; }
}

@media (max-width: 900px) {
  .hhp-door__caps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hhp-door { padding: var(--space-6) var(--space-4); align-items: flex-start; }
  .hhp-door__inner { gap: var(--space-6); }
  .hhp-door__caps { grid-template-columns: 1fr; }
  .hhp-door__cap { padding: var(--space-4); }
  .hhp-door__actions .btn-primary { width: 100%; justify-content: center; }
  /* A flat wash on a phone: the diagonal gradient leaves the lower text on
     the brightest part of the photograph. */
  .hhp-door__scrim { background: rgba(20, 19, 11, 0.88); }
}

/* --- variation line items ------------------------------------------------- */

/* Laid out so an owner can hold the printed variation beside the screen and
   read down both at once. */
.hhp-varitems { display: flex; flex-direction: column; margin-top: var(--space-4); }
.hhp-varitems__head,
.hhp-varitems__row {
  display: grid;
  grid-template-columns: 1.1fr 3fr auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: start;
}
.hhp-varitems__head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.hhp-varitems__loc { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; }
.hhp-varitems__desc { font-size: 14px; line-height: 1.5; }
.hhp-varitems__num {
  text-align: right;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  white-space: nowrap;
}
.hhp-varitems__thumb { display: block; margin-top: var(--space-2); max-width: 96px; }
.hhp-varitems__thumb img { display: block; width: 100%; height: auto; }

/* A credit is good news and should not be styled as an error, but it does
   need to be unmistakable. The tag carries the meaning; the figure keeps its
   minus sign because that is how it reads on the paperwork. */
.hhp-varitems__row.is-credit .hhp-varitems__num { color: var(--color-accent-800); }

.hhp-varsum { display: flex; flex-direction: column; margin-top: var(--space-4); }
.hhp-varsum__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: 14px;
}
.hhp-varsum__row--total {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
}
.hhp-varsum__row--after {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}
.hhp-varsum__row--time { color: var(--color-accent-800); }

/* --- special conditions --------------------------------------------------- */

.hhp-varterms {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
/* Numbered to match the printed variation, and at body size. 13px on a
   contractual clause reads as fine print, which is the opposite of what this
   block is for. Dividers give six clauses of very different length somewhere
   for the eye to rest. */
.hhp-varterms__list { margin: var(--space-3) 0 0; padding-left: 1.4em; }
.hhp-varterms__list li {
  font-size: 14px;
  line-height: 1.55;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.hhp-varterms__list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.hhp-varterms__list li::marker { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

@media (max-width: 600px) {
  .hhp-varitems__head { display: none; }
  .hhp-varitems__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "loc price" "desc desc";
    row-gap: var(--space-2);
  }
  .hhp-varitems__loc { grid-area: loc; }
  .hhp-varitems__num { grid-area: price; }
  .hhp-varitems__desc { grid-area: desc; }
  .hhp-varterms { padding: var(--space-3) var(--space-4); }
}

/* --- the build's own photo ------------------------------------------------ */

/*
 * Wide and short. A 16:9 crop of a house reads as a photograph of that house;
 * a taller crop starts to read as a hero banner on a marketing site, which is
 * the wrong register for somebody checking on their own build.
 */
.hhp-hero { margin: 0; }
.hhp-hero__img {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
}

@media (max-width: 600px) {
  /* Full bleed on a phone. Gutters either side of a photo this size make it
     look like a thumbnail that failed to load. */
  .hhp-hero {
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
  }
  .hhp-hero__img { height: 170px; }
}

/* --- the decision line ---------------------------------------------------- */

/*
 * The figure, restated beside the button. Bordered top and bottom so it reads
 * as a summary of everything above rather than another paragraph of it.
 */
.hhp-variation__decision {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px;
  line-height: 1.5;
}

/*
 * 44px targets on this screen only.
 *
 * Approving a variation is the one irreversible, money-moving thing a customer
 * does in this portal. A 32px button is fine for a filter and not fine here,
 * where a mis-tap on a phone costs somebody real money.
 */
.hhp-variation__actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-5);
}

@media (max-width: 600px) {
  /* Full width and stacked, so neither button can be hit by accident while
     reaching for the other. */
  .hhp-variation__actions { flex-direction: column; align-items: stretch; }
  .hhp-variation__actions .btn { width: 100%; justify-content: center; }
}

/* --- help and resources --------------------------------------------------- */

/*
 * One card per entry, stacked, everything open.
 *
 * Deliberately not an accordion. Collapsing saves vertical space and takes away
 * the two things people actually use to find an answer: scanning, and searching
 * the page. With a dozen entries there is no space worth saving.
 */
.hhp-help { display: flex; flex-direction: column; gap: var(--space-4); }

.hhp-help__item { padding: var(--space-5) var(--space-6); gap: var(--space-3); }

.hhp-help__title { font-size: 18px; margin: 0; }

.hhp-help__body { font-size: 15px; line-height: 1.6; max-width: 72ch; }
.hhp-help__body p { margin: 0 0 var(--space-3); }
.hhp-help__body p:last-child { margin-bottom: 0; }
.hhp-help__body ul,
.hhp-help__body ol { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.hhp-help__body li { margin-bottom: 4px; }

.hhp-help__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}
.hhp-help__size { font-size: 13px; }

.hhp-help__ask {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

@media (max-width: 600px) {
  .hhp-help__item { padding: var(--space-4); }
  .hhp-help__title { font-size: 17px; }
  /* Full-width download target, same reasoning as the variation buttons. */
  .hhp-help__file { flex-direction: column; align-items: stretch; }
  .hhp-help__file .btn { width: 100%; justify-content: center; }
  .hhp-help__size { text-align: center; }
}

/* --- DA preparation, owner card ----------------------------------------- */

.hhp-da-owner { margin: var(--space-6) 0; }
.hhp-da-owner .card-title { margin-bottom: var(--space-2); }
.hhp-da-owner__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.hhp-da-owner__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}
.hhp-da-owner__list li.is-na > span:first-child { color: var(--color-neutral-600); }
/* Not required is the least important state on the card, so it reads quietest. */
.hhp-da-owner__list li.is-na .tag { border-color: var(--color-divider); color: var(--color-neutral-600); }