/* =====================================================================
 * HOMECARE — My Unit & Unit Digital Passport (M03 PART 02)
 * ---------------------------------------------------------------------
 * Mobile-first presentation for #/my-unit: context hero, Digital
 * Passport detail cards, display-only room/space chips, utility /
 * parking / access reference rows and the lightweight Unit History.
 * Token-only styling, 44px touch targets where interactive, long
 * values wrap (overflow-wrap), no horizontal overflow, small-screen
 * compaction. The full M04+ concepts remain out of scope for M03.
 * =================================================================== */

.hc-my-unit-page {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
  padding-bottom: var(--hc-space-6);
}

/* ---- Page heading -------------------------------------------------- */

.hc-my-unit-heading h2 {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-2xl);
  font-weight: var(--hc-font-weight-bold);
  letter-spacing: var(--hc-letter-tight);
}

.hc-my-unit-heading p {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

/* ---- Context hero --------------------------------------------------- */

.hc-my-unit-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hc-space-3);
  padding: var(--hc-space-4);
  background: var(--hc-bg-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-sm);
}

.hc-my-unit-hero__main {
  min-width: 0;
}

.hc-my-unit-hero__eyebrow {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hc-my-unit-hero__property {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-my-unit-hero__location {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-my-unit-hero__side {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--hc-space-2);
  flex: none;
}

.hc-my-unit-hero__note {
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-2);
  padding: var(--hc-space-3) var(--hc-space-4);
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  background: var(--hc-bg-subtle);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
}

.hc-my-unit-hero__note-icon {
  margin-top: 2px;
  flex: none;
}

/* ---- Sections -------------------------------------------------------- */

.hc-my-unit-region {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
}

.hc-my-unit-section {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
}

.hc-my-unit-section__note {
  margin-top: calc(var(--hc-space-1) * -1);
}

/* ---- Digital Passport detail cards ----------------------------------- */

.hc-my-unit-details {
  padding: 0;
  overflow: hidden;
}

.hc-my-unit-details > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.7fr);
  gap: var(--hc-space-3);
  padding: var(--hc-space-3) var(--hc-space-4);
  border-bottom: 1px solid var(--hc-border);
}

.hc-my-unit-details > div:last-child {
  border-bottom: 0;
}

.hc-my-unit-details dt {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-xs);
}

.hc-my-unit-details dd {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-medium);
  overflow-wrap: anywhere;
}

.hc-my-unit-details--gap {
  margin-top: var(--hc-space-3);
}

.hc-my-unit-details--flush {
  padding: 0;
  overflow: hidden;
}

.hc-my-unit-details--flush > div {
  padding: var(--hc-space-2) 0;
}

.hc-my-unit-details__row {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.7fr);
  gap: var(--hc-space-3);
  padding: var(--hc-space-3) var(--hc-space-4);
  border-bottom: 1px solid var(--hc-border);
  align-items: center;
}

.hc-my-unit-details__row:last-child {
  border-bottom: 0;
}

/* ---- Emergency contact block ------------------------------------------ */

.hc-my-unit-block {
  margin-top: var(--hc-space-3);
  padding: var(--hc-space-4);
}

.hc-my-unit-block__title {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-semibold);
}

.hc-my-unit-block__note {
  margin-top: var(--hc-space-2);
}

/* ---- Reference rows (utilities / parking / access) --------------------- */

.hc-my-unit-refs {
  margin-top: var(--hc-space-3);
  padding: var(--hc-space-4);
}

.hc-my-unit-refs__title {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-semibold);
}

.hc-my-unit-refs__list {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
  margin-top: var(--hc-space-3);
}

.hc-my-unit-ref {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  padding: var(--hc-space-2) 0;
}

.hc-my-unit-ref__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--hc-color-primary);
  background: var(--hc-bg-subtle);
  border-radius: var(--hc-radius-md);
}

.hc-my-unit-ref__icon .hc-icon {
  width: 20px;
  height: 20px;
}

.hc-my-unit-ref__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hc-my-unit-ref__label {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-xs);
}

.hc-my-unit-ref__code {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-medium);
  overflow-wrap: anywhere;
}

.hc-my-unit-refs__note {
  margin-top: var(--hc-space-3);
}

/* ---- Rooms & Spaces chips ---------------------------------------------- */

.hc-my-unit-spaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-space-2);
}

.hc-my-unit-spaces__item {
  display: inline-flex;
}

/* ---- Unit History ------------------------------------------------------- */

.hc-my-unit-history__icon {
  color: var(--hc-color-primary);
}

.hc-my-unit-history__time {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  white-space: nowrap;
}

.hc-my-unit-history__skeleton-icon {
  width: 36px;
  height: 36px;
}

.hc-my-unit-history__skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-1);
  flex: 1;
  min-width: 0;
}

/* ---- Small smartphone compaction ---------------------------------------- */

@media (max-width: 359px) {
  .hc-my-unit-hero {
    flex-direction: column;
    gap: var(--hc-space-3);
  }

  .hc-my-unit-hero__side {
    align-items: flex-start;
  }

  .hc-my-unit-details > div,
  .hc-my-unit-details__row {
    grid-template-columns: 1fr;
    gap: var(--hc-space-1);
  }

  .hc-my-unit-ref {
    align-items: flex-start;
  }

  .hc-my-unit-ref .hc-badge,
  .hc-my-unit-ref .hc-chip {
    display: none;
  }
}