/*
 * MVE authenticated home record (ALM-93). Palette mirrors the marketing
 * site and the read-only home record view so the surfaces feel like one
 * product. Mobile-first; one optional break at 720px adds air.
 */

:root {
  --hm-plaster: #F6F1E9;
  --hm-plaster-warm: #EDE7DB;
  --hm-plaster-deep: #E2DACB;
  --hm-beam: #2C4A3E;
  --hm-beam-light: #3A6355;
  --hm-honey: #C49A3C;
  --hm-ink: #2A2520;
  --hm-ink-mid: #5C5347;
  --hm-ink-light: #8A8076;
  --hm-rule: rgba(44, 74, 62, 0.12);
  --hm-card: #FEFCF8;
  --hm-overdue: #B85440;
  --hm-upcoming: #C49A3C;
  --hm-future: #3A6355;
}

body {
  margin: 0;
  background: var(--hm-plaster);
  color: var(--hm-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.home, .home-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4rem;
}

.home__hero, .home-form__hero {
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--hm-rule);
}

.home__eyebrow, .home-form__eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--hm-beam);
  font-weight: 600;
}

.home__eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.home__title, .home-form__title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hm-beam);
}

.home__subtitle, .home-form__subtitle {
  margin: 0 0 1.25rem;
  color: var(--hm-ink-mid);
  font-size: 0.95rem;
  line-height: 1.5;
}

.home__decision-stepper {
  margin: 0 0 1.25rem;
}

.home__decision-stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.home__decision-step {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  position: relative;
  text-align: center;
}

.home__decision-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(50% + 0.9rem);
  width: calc(100% - 1.8rem);
  height: 1px;
  background: var(--hm-rule);
}

.home__decision-step--complete:not(:last-child)::after,
.home__decision-step--current:not(:last-child)::after {
  background: rgba(44, 74, 62, 0.35);
}

.home__decision-step-marker {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--hm-rule);
  background: var(--hm-card);
  color: var(--hm-beam);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.home__decision-step--complete .home__decision-step-marker,
.home__decision-step--current .home__decision-step-marker {
  border-color: rgba(44, 74, 62, 0.45);
  background: rgba(44, 74, 62, 0.1);
}

.home__decision-step-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: currentColor;
}

.home__decision-step--upcoming .home__decision-step-marker {
  color: var(--hm-plaster-deep);
  background: transparent;
}

.home__decision-step-label {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--hm-ink-light);
}

.home__decision-step--current .home__decision-step-label,
.home__decision-step--complete .home__decision-step-label {
  color: var(--hm-beam);
}

.home__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.home__facts > div {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.home__facts dt {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: var(--hm-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home__facts dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hm-beam);
}

.home__actions {
  margin: 1.25rem 0 0;
}

.home__btn, .home-form__btn {
  display: inline-block;
  background: var(--hm-beam);
  color: var(--hm-card);
  border: 1px solid var(--hm-beam);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.home__btn--secondary, .home-form__btn--ghost {
  background: transparent;
  color: var(--hm-beam);
}

.home__btn--danger {
  border-color: #b3261e;
  color: #b3261e;
}

.home__inline-form {
  display: inline;
  margin: 0;
}

.home__section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hm-rule);
}

.home__section h2 {
  margin: 0 0 0.5rem;
  color: var(--hm-beam);
  font-size: 1.15rem;
}

.home__section-note {
  margin: 0 0 1rem;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home__systems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.home__receipts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.home__receipt {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-card);
}

.home__receipt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.home__receipt-vendor {
  font-weight: 600;
  color: var(--hm-beam);
  overflow-wrap: anywhere;
}

.home__receipt-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home__receipt-meta {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  color: var(--hm-ink-mid);
  font-size: 0.85rem;
  align-items: center;
}

.home__receipt-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--hm-plaster-warm);
  color: var(--hm-beam);
  font-size: 0.8rem;
  font-weight: 500;
}

.home__receipt-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}

.home__receipt-status--pending {
  background: #E6F0EA;
  color: var(--hm-beam-light);
}

.home__receipt-status--failed {
  background: #F8E5E0;
  color: var(--hm-overdue);
}

.home__receipts-empty {
  margin: 0;
}

.home__section--inspection {
  display: block;
}

.home__section--recommendation {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.25rem;
}

.home__inspection-status {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.home__inspection-status--processing {
  background: var(--hm-plaster-warm);
  color: var(--hm-beam);
  border: 1px solid var(--hm-rule);
}

.home__inspection-status--completed {
  background: #E8F0EB;
  color: var(--hm-beam);
  border: 1px solid rgba(58, 99, 85, 0.25);
  font-weight: 500;
}

.home__inspection-status--failed {
  background: #F8E5E0;
  color: var(--hm-overdue);
  border: 1px solid rgba(184, 84, 64, 0.3);
}

.home__inspection-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hm-rule);
  border-top-color: var(--hm-beam);
  animation: home-inspection-spin 0.9s linear infinite;
  flex-shrink: 0;
}

@keyframes home-inspection-spin {
  to { transform: rotate(360deg); }
}

.home__inspection-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
}

.home__inspection-link {
  color: var(--hm-beam);
  font-weight: 500;
  text-decoration: underline;
}

.home__inspection-size {
  color: var(--hm-ink-light);
  margin-left: 0.25rem;
}

.home__inspection-subhead {
  margin: 1rem 0 0.6rem;
  color: var(--hm-beam);
  font-size: 0.95rem;
  font-weight: 600;
}

.home__inspection-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.home__inspection-fact {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home__inspection-fact-label {
  font-weight: 600;
  color: var(--hm-beam);
}

.home__inspection-fact-meta {
  font-size: 0.8rem;
  color: var(--hm-ink-light);
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.home__inspection-fact-notes {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  line-height: 1.45;
}

.home__solar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.home__solar-stats > div {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.home__solar-stats dt {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: var(--hm-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home__solar-stats dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hm-beam);
}

.home__solar-meta {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--hm-ink-light);
}

.home-form__solar-preview {
  margin: 1rem 0 1.2rem;
  padding: 0.95rem;
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-card);
}

.home-form__solar-preview h2 {
  margin: 0 0 0.4rem;
  color: var(--hm-beam);
  font-size: 1rem;
}

.home__calendar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.home__calendar-month {
  display: grid;
  gap: 0.5rem;
}

.home__calendar-month-label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--hm-beam);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hm-rule);
  padding-bottom: 0.35rem;
}

.home__calendar-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.home__calendar-item {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.home__calendar-item--red    { border-left: 4px solid var(--hm-overdue); }
.home__calendar-item--amber  { border-left: 4px solid var(--hm-upcoming); }
.home__calendar-item--green  { border-left: 4px solid var(--hm-future); }

.home__calendar-badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.35rem;
}

.home__calendar-badge--red   { background: var(--hm-overdue); }
.home__calendar-badge--amber { background: var(--hm-upcoming); }
.home__calendar-badge--green { background: var(--hm-future); }

.home__calendar-body {
  display: grid;
  gap: 0.2rem;
}

.home__calendar-title {
  margin: 0;
  font-size: 1rem;
  color: var(--hm-beam);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.home__calendar-kind {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hm-ink-light);
  font-weight: 500;
}

.home__calendar-trigger {
  margin: 0;
  font-size: 0.9rem;
  color: var(--hm-ink-mid);
  line-height: 1.45;
}

.home__calendar-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--hm-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home__system {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
}

.home__system-details {
  display: grid;
  gap: 0.45rem;
}

.home__system-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.home__system-summary::-webkit-details-marker {
  display: none;
}

.home__system-summary-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.home__system-toggle {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid var(--hm-ink-light);
  border-bottom: 1.5px solid var(--hm-ink-light);
  transform: rotate(45deg);
  margin-top: 0.35rem;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.home__system-details:not([open]) .home__system-toggle {
  transform: rotate(-45deg);
}

.home__system-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.home__system-label {
  font-weight: 600;
  color: var(--hm-beam);
  min-width: 0;
}

.home__system-meta {
  font-size: 0.8rem;
  color: var(--hm-ink-light);
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.home__system-recommendation {
  color: var(--hm-ink-mid);
  margin-top: 0.2rem;
}

.home__system-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.home__system-actions form {
  margin: 0;
}

.home__system-link {
  color: inherit;
  text-decoration: none;
}

.home__system-link:hover {
  text-decoration: underline;
}

.home__system-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--hm-beam);
}

.home__section-empty {
  margin: 0;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home__empty {
  margin: 0;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
}

.home__projects {
  display: grid;
  gap: 0.9rem;
}

/* ── Upcoming Care section (ALM-2773) ─────────────────────────────── */

.home__care-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.home__care-item {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--hm-card);
  border-left: 4px solid var(--hm-rule);
}

.home__care-item--overdue  { border-left-color: var(--hm-overdue); }
.home__care-item--upcoming { border-left-color: var(--hm-upcoming); }

.home__care-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.home__care-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hm-ink);
}

.home__care-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.home__care-badge--overdue  { background: var(--hm-overdue); }
.home__care-badge--upcoming { background: var(--hm-upcoming); }

.home__care-meta {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  line-height: 1.45;
}

/* ────────────────────────────────────────────────────────────────── */

.home__project-form-inner {
  display: grid;
  gap: 0.65rem;
}

.home__project-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hm-ink-mid);
}

.home__project-form input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
}

.home__project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home__project-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--hm-rule);
  background: var(--hm-plaster);
  color: var(--hm-ink-mid);
  cursor: pointer;
}

.home__project-chip:hover {
  border-color: var(--hm-beam);
  color: var(--hm-beam);
}

.home__system--new {
  border-color: rgba(44, 74, 62, 0.38);
}

.home__projects-cta-mobile {
  display: block;
}

.home__floating-project-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
}

.home-form__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-form__fieldset {
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--hm-card);
}

.home-form__fieldset legend {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  color: var(--hm-beam);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.home-form__fieldset--report {
  border-color: var(--hm-beam);
  background: var(--hm-plaster-warm);
  padding: 1.2rem 1.3rem 1.3rem;
}

.home-form__report-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--hm-beam);
  font-weight: 600;
}

/* Styled drop-zone for the inspection-report file input (ALM-552).
 * The underlying <input type="file"> is visually hidden but kept in the DOM
 * so the form still works without JS and remains keyboard-accessible. */
.home-form__dropzone {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--hm-card);
  border: 1px dashed var(--hm-beam);
  border-radius: 12px;
  color: var(--hm-ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-form__dropzone:hover { background: var(--hm-plaster-warm); }

.home-form__dropzone:focus-within {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 2px;
}

.home-form__dropzone--over {
  background: var(--hm-plaster-warm);
  border-style: solid;
}

/* `pointer-events: none` on children keeps dragenter/dragleave on the
 * parent label only — otherwise the cursor crossing into a child fires
 * dragleave on the parent and the --over highlight flickers (ALM-563). */
.home-form__dropzone-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--hm-beam);
  pointer-events: none;
}

.home-form__dropzone-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--hm-beam);
  font-weight: 600;
  pointer-events: none;
}

.home-form__dropzone-sub {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--hm-ink-mid);
}

.home-form__dropzone-filename {
  color: var(--hm-beam);
  font-weight: 600;
  word-break: break-word;
  pointer-events: none;
}

.home-form__dropzone-error {
  margin: 0.4rem 0 0;
  color: var(--hm-danger, #b3261e);
  font-weight: 500;
}

.home-form__error-message {
  margin: 0.4rem 0 0;
  color: var(--hm-danger, #b3261e);
  font-weight: 500;
}

/* Visually hide the file input but keep it focusable and submittable. */
.home-form__dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-form__hint--attached {
  margin: 0.4rem 0 0;
  color: var(--hm-beam);
  font-weight: 500;
}

.home-form__hint--report-fallback {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--hm-ink-light);
}

.home-form__details {
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-card);
  padding: 0.4rem 0.4rem;
}

.home-form__details[open] {
  padding: 0.4rem 1.1rem 1.1rem;
}

.home-form__details-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}

.home-form__details-summary::-webkit-details-marker {
  display: none;
}

.home-form__details-summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--hm-beam);
  line-height: 1;
}

.home-form__details[open] > .home-form__details-summary::after {
  content: "−";
}

.home-form__details-summary:hover {
  background: var(--hm-plaster-warm);
}

.home-form__details-summary:focus-visible {
  outline: 2px solid var(--hm-beam);
  outline-offset: 2px;
}

.home-form__details-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hm-beam);
}

.home-form__details-meta {
  font-size: 0.8rem;
  color: var(--hm-ink-light);
  font-weight: 400;
}

.home-form__details[open] > .home-form__fieldset {
  margin-top: 1rem;
}

.home-form__hint {
  margin: 0 0 0.85rem;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
}

.home-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.home-form__field label {
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  font-weight: 600;
}

.home-form__field--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.home-form__field .home-form__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--hm-ink);
  cursor: pointer;
  font-weight: 500;
}

.home-form__radio input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--hm-beam);
}

.home-form__solar-question {
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  font-weight: 600;
}

.home-form__solar-details {
  border-top: 1px solid var(--hm-rule);
  padding-top: 0.85rem;
  margin-top: 0.4rem;
}

.home-form__field input[type="text"],
.home-form__field input[type="number"],
.home-form__field input[type="date"],
.home-form__field textarea {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
}

/* PlaceAutocompleteElement has a closed shadow root, so the input[type=text]
   rule above never matches it and JS shadow-piercing is inert in production.
   Style the host for border/radius. --gmp-mat-* tokens cross the closed
   boundary to suppress the widget's own outline and surface so only the host
   border is visible. Inherited props (font, color) cascade automatically.
   No overflow:hidden — that clips the predictions dropdown. */
.home-form__field gmp-place-autocomplete {
  color-scheme: light;
  --gmp-mat-color-outline-decorative: transparent;
  --gmp-mat-color-surface: var(--hm-plaster);
  --gmp-mat-color-on-surface: var(--hm-ink);
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
  font: inherit;
  box-sizing: border-box;
}

.home-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-form__system {
  border-top: 1px solid var(--hm-rule);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

.home-form__system:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.home-form__system-label {
  margin: 0 0 0.5rem;
  color: var(--hm-beam);
  font-size: 1rem;
}

.home-form__errors {
  background: #F8E5E0;
  border: 1px solid var(--hm-overdue);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--hm-overdue);
}

.home-form__errors h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.home-form__errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.home-form__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.home-form__actions--sticky-onboarding {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 0.5rem;
  padding: 0.7rem 0 env(safe-area-inset-bottom, 0);
  background: linear-gradient(to top, var(--hm-plaster) 68%, rgba(246, 241, 233, 0));
}

.home-form__year-question {
  display: block;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.home-form__year-picker {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.home-form__year-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home-form__year-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--hm-rule);
  background: var(--hm-plaster);
  color: var(--hm-ink-mid);
  cursor: pointer;
  line-height: 1.2;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.home-form__year-chip:hover {
  border-color: var(--hm-beam);
  color: var(--hm-beam);
}

.home-form__year-chip:focus-visible {
  outline: 2px solid var(--hm-beam);
  outline-offset: 2px;
}

.home-form__year-chip--active {
  background: var(--hm-beam);
  border-color: var(--hm-beam);
  color: var(--hm-card);
}

.home-form__year-exact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-form__year-exact-label {
  font-size: 0.78rem;
  color: var(--hm-ink-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-form__year-exact input[type="number"] {
  font: inherit;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
  max-width: 8rem;
}

.home-form__skip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  padding: 0.25rem 0.55rem;
  width: fit-content;
  border: 1px solid var(--hm-rule);
  border-radius: 999px;
  background: var(--hm-plaster);
  color: var(--hm-ink-mid);
  font-size: 0.78rem;
  cursor: pointer;
}

.home-form__skip-checkbox {
  margin: 0;
  accent-color: var(--hm-beam);
}

.home-form__field--photo {
  margin-top: 0.4rem;
}

.home-form__photo-input {
  /* Visually hidden but keyboard accessible — the visible label is the
     affordance, and clicking it triggers the file picker. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-form__photo-label {
  display: block;
  cursor: pointer;
}

.home-form__photo-affordance {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-plaster);
  color: var(--hm-ink-mid);
  transition: border-color 120ms ease, background 120ms ease;
}

.home-form__photo-label:hover .home-form__photo-affordance,
.home-form__photo-input:focus-visible + .home-form__photo-affordance {
  border-color: var(--hm-beam);
  background: var(--hm-card);
}

.home-form__photo-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.home-form__photo-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.home-form__photo-text strong {
  color: var(--hm-beam);
  font-size: 0.9rem;
}

.home-form__photo-text small {
  color: var(--hm-ink-light);
  font-size: 0.78rem;
  line-height: 1.4;
}

.home-form__photo-preview {
  margin: 0.5rem 0 0;
}

.home-form__photo-thumb {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid var(--hm-rule);
  object-fit: cover;
}

.home__system-photo {
  margin: 0.4rem 0 0;
}

.home__system-photo img {
  display: block;
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid var(--hm-rule);
  object-fit: cover;
}

.home__drawer {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--hm-rule);
  border-radius: 10px;
  background: var(--hm-plaster);
}

.home__drawer-grid {
  display: grid;
  gap: 0.6rem;
}

.home__drawer-grid label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--hm-ink-mid);
}

.home__drawer-grid input,
.home__drawer-grid select,
.home__drawer-grid textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-card);
  color: var(--hm-ink);
}

.home__drawer-multiselect {
  min-height: 5.5rem;
}

.home__drawer-actions {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.5rem;
}

.home__drawer-errors {
  margin-bottom: 0.6rem;
  background: #F8E5E0;
  border: 1px solid var(--hm-overdue);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  color: var(--hm-overdue);
}

.home__drawer-errors ul {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
}

@media (min-width: 720px) {
  .home__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home__projects-cta-mobile {
    display: none;
  }
  .home-form__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .home,
  .home-form {
    padding-inline: 1rem;
  }

  .home__hero,
  .home-form__hero {
    padding-top: 1.1rem;
  }

  .home__decision-stepper-list {
    gap: 0.35rem;
  }

  .home__decision-step-label {
    font-size: 0.68rem;
  }

  .home__facts {
    grid-template-columns: 1fr;
  }

  .home__system {
    padding-inline: 0.8rem;
  }

  .home__system-summary {
    gap: 0.5rem;
  }

  .home__system-row {
    align-items: flex-start;
  }

  .home__system-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home__system-actions .home__btn,
  .home__system-actions form,
  .home__system-actions form .home__btn {
    width: 100%;
    text-align: center;
  }
}

/* ALM-311: post-onboarding home screen — projects-led layout. */
.home--projects {
  padding-bottom: 6rem;
}

/* ── Direction B two-pane layout (ALM-2202) ──────────────────────────────────
   Desktop (≥ 900px): chat left, priorities rail right.
   Mobile (< 900px): single column, chat above rail (ALM-2203 adds the
   segmented toggle for mobile). */

.home__mobile-pane-toggle {
  display: none;
}

.home--two-pane {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 900px) {
  .home--two-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 0;
    min-height: calc(100vh - 60px); /* 60px ≈ site-header height */
  }

  .home__left-pane {
    padding: 1.25rem 1.5rem 2rem;
    border-right: 1px solid var(--hm-rule);
    min-height: calc(100vh - 60px);
  }

  .home__right-pane {
    padding: 1.25rem 1.25rem 2rem;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  /* Expand the chat thread height in two-pane — use most of the left column */
  .home--two-pane .home__chat {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .home--two-pane .home__chat-thread {
    max-height: calc(100vh - 280px);
    min-height: 300px;
  }

  .home--two-pane .home__chat-header {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--hm-rule);
  }

  .home--two-pane .home__chat-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 899px) {
  .home--two-pane {
    padding: 1.25rem 1rem 4rem;
  }

  .home__mobile-pane-toggle {
    display: block;
    position: sticky;
    top: 0.75rem;
    z-index: 5;
    margin: 0 0 1rem;
  }

  .home__mobile-pane-toggle-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid rgba(44, 74, 62, 0.16);
    border-radius: 999px;
    background: rgba(246, 241, 233, 0.94);
    backdrop-filter: blur(10px);
  }

  .home__mobile-pane-toggle-button {
    appearance: none;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--hm-ink-mid);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.7rem 0.9rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }

  .home__mobile-pane-toggle-button[data-state="active"] {
    background: var(--hm-beam);
    color: var(--hm-card);
    box-shadow: 0 6px 18px rgba(44, 74, 62, 0.16);
  }

  .home__mobile-pane-toggle-button:focus-visible {
    outline: 2px solid rgba(44, 74, 62, 0.45);
    outline-offset: 2px;
  }

  .home__left-pane,
  .home__right-pane {
    min-width: 0;
  }

  .home__right-pane {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* Priorities rail (right pane) */
.home__priorities-rail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home__priorities-rail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hm-rule);
}

.home__priorities-rail-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--hm-beam);
}

.home__priorities-rail-count {
  font-size: 0.8rem;
  color: var(--hm-ink-light);
  white-space: nowrap;
}

.home__priorities-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.home__priorities-rail-cta {
  margin-top: 0.5rem;
}

.home__priorities-rail-cta .home__btn {
  width: 100%;
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}

/* Rail card */
.home__rail-card {
  border: 1px solid var(--hm-rule);
  border-radius: 10px;
  background: var(--hm-card);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.home__rail-card:hover {
  border-color: rgba(44, 74, 62, 0.35);
  box-shadow: 0 2px 8px rgba(42, 37, 32, 0.06);
}

.home__rail-card--committed {
  border-left: 3px solid var(--hm-beam-light);
}

.home__rail-card-link {
  display: block;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: inherit;
}

.home__rail-card-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.home__rail-card-rank {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hm-beam);
  background: #EDF1EE;
  border: 1px solid rgba(44, 74, 62, 0.2);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.home__rail-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hm-beam);
  line-height: 1.3;
  flex: 1 1 auto;
}

.home__rail-card-call {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  color: var(--hm-ink-mid);
  line-height: 1.4;
}

.home__rail-card-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--hm-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home__visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.home__inline-link {
  color: var(--hm-beam);
  text-decoration: underline;
}

.home__snapshot { padding-top: 1rem; }

.home__snapshot-systems {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home__snapshot-chip {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  color: var(--hm-ink-mid);
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
}

.home__snapshot-chip-label { color: var(--hm-beam); font-weight: 600; }
.home__snapshot-chip-meta  { color: var(--hm-ink-light); font-size: 0.75rem; }

.home__snapshot-status {
  display: block;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

.home__snapshot-status--processing {
  background: #FBF3DC;
  color: #6B5005;
  border: 1px solid #ECD68A;
}

.home__snapshot-status--failed {
  background: #F8E5E0;
  color: var(--hm-overdue);
  border: 1px solid #E8B7AC;
}

.home__snapshot-status-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.home__snapshot-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(196, 154, 60, 0.2);
  border-top-color: var(--hm-honey);
  border-radius: 50%;
  animation: home-snapshot-spin 1s linear infinite;
}

@keyframes home-snapshot-spin { to { transform: rotate(360deg); } }

.home__snapshot-sparse {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--hm-ink-mid);
}

.home__projects { padding-top: 0.5rem; }

.home--welcome {
  max-width: 860px;
}

.home__welcome-hero {
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--hm-rule);
}

.home__welcome-summary {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-card);
  display: grid;
  gap: 1rem;
}

.home__welcome-kicker {
  margin: 0 0 0.25rem;
  color: var(--hm-ink-light);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home__welcome-summary h2 {
  margin: 0 0 0.25rem;
  color: var(--hm-beam);
  font-size: 1.2rem;
  line-height: 1.25;
}

.home__welcome-summary p {
  margin: 0;
  color: var(--hm-ink-mid);
  line-height: 1.45;
}

.home__welcome-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.home__welcome-facts div {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
}

.home__welcome-facts dt {
  margin: 0 0 0.2rem;
  color: var(--hm-ink-light);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home__welcome-facts dd {
  margin: 0;
  color: var(--hm-beam);
  font-size: 0.95rem;
  font-weight: 700;
}

.home__welcome-actions {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hm-rule);
}

.home__welcome-actions h2 {
  margin: 0 0 0.75rem;
  color: var(--hm-beam);
  font-size: 1.1rem;
}

.home__welcome-actions ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.home__welcome-actions li {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: rgba(254, 252, 248, 0.68);
  color: var(--hm-ink-mid);
  line-height: 1.45;
}

.home__welcome-actions strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--hm-beam);
}

.home__projects-head { margin-bottom: 0.75rem; }

.home__project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home__project-card {
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.home__project-card--blocked { border-color: rgba(184, 84, 64, 0.35); }

.home__project-card--new {
  border-color: rgba(44, 74, 62, 0.45);
  box-shadow: 0 0 0 3px rgba(44, 74, 62, 0.08);
}

.home__project-card-open {
  align-self: flex-start;
}

.home__project-card--parked {
  background: var(--hm-plaster-warm);
  opacity: 0.78;
}
.home__project-card--parked .home__project-card-title { color: var(--hm-ink-mid); }

.home__project-card--done {
  background: var(--hm-plaster-warm);
  opacity: 0.62;
}
.home__project-card--done .home__project-card-title {
  color: var(--hm-ink-light);
  text-decoration: line-through;
}

.home__chip--status {
  background: var(--hm-plaster-deep);
  color: var(--hm-ink-mid);
  border-color: var(--hm-rule);
}
.home__chip--status-parked {
  background: #F1ECE0;
  color: #6B5005;
  border-color: rgba(196, 154, 60, 0.35);
}
.home__chip--status-done {
  background: #EDF1EE;
  color: var(--hm-beam);
  border-color: rgba(44, 74, 62, 0.2);
}

.home__project-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.home__project-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hm-beam);
  line-height: 1.3;
  flex: 1 1 auto;
}

.home__project-card-menu {
  position: relative;
  margin: 0;
}

.home__project-card-menu-toggle {
  list-style: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--hm-ink-mid);
}

.home__project-card-menu-toggle::-webkit-details-marker { display: none; }
.home__project-card-menu-toggle:hover { border-color: var(--hm-rule); background: var(--hm-plaster-warm); }

.home__project-card-menu-list {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  box-shadow: 0 6px 18px rgba(42, 37, 32, 0.08);
  z-index: 5;
}

.home__project-card-menu-item {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--hm-ink);
  cursor: pointer;
}

.home__project-card-menu-item:hover { background: var(--hm-plaster-warm); }

.home__project-card-menu-item--disabled {
  color: var(--hm-ink-light);
  cursor: not-allowed;
}

.home__project-card-menu-item--disabled:hover { background: transparent; }

.home__project-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home__chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--hm-rule);
  background: var(--hm-plaster-warm);
  color: var(--hm-ink-mid);
}

.home__chip--priority {
  background: #EDF1EE;
  color: var(--hm-beam);
  border-color: rgba(44, 74, 62, 0.2);
}

.home__chip--blocked {
  background: #F8E5E0;
  color: var(--hm-overdue);
  border-color: rgba(184, 84, 64, 0.25);
}

/* ALM-314 — compact rough-cost chip rendered inside the chip row of
   the home project card. The frame element itself is the inline
   wrapper so the spinner styling applies to whichever sub-state is
   currently rendered (idle button, chip link, or failure block). */
.home__cost-chip-frame {
  display: inline-flex;
  align-items: center;
}

.home__cost-chip-frame[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}

.home__cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.home__cost-chip--failed {
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 100%;
}

.home__cost-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(44, 74, 62, 0.2);
  background: #EDF1EE;
  color: var(--hm-beam);
  text-decoration: none;
}

.home__cost-chip-link:hover { text-decoration: underline; }

.home__cost-chip-range { font-variant-numeric: tabular-nums; }

.home__cost-chip-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(44, 74, 62, 0.12);
  color: var(--hm-beam);
  text-transform: uppercase;
  cursor: help;
}

.home__cost-chip-reestimate-form,
.home__cost-chip-idle-form,
.home__cost-chip-retry-form {
  display: inline-flex;
  margin: 0;
}

.home__cost-chip-error {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #F8E5E0;
  color: var(--hm-overdue);
  border: 1px solid rgba(184, 84, 64, 0.25);
}

.home__cost-chip-error-detail {
  font-size: 0.7rem;
  color: var(--hm-ink-mid);
}

.home__project-card-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--hm-rule);
}

.home__project-card-form--hidden { display: none; }

.home__project-card-form-label {
  font-size: 0.8rem;
  color: var(--hm-ink-mid);
  flex: 0 0 100%;
}

.home__project-card-form-input {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--hm-rule);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--hm-ink);
  background: var(--hm-plaster);
}

.home__project-card-form-actions { display: flex; gap: 0.4rem; }

.home__project-card-error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--hm-overdue);
}

.home__btn--small {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.home__btn--ghost {
  background: transparent;
  border: 1px solid var(--hm-rule);
  color: var(--hm-ink-mid);
}

.home__btn--primary {
  background: var(--hm-beam);
  color: var(--hm-card);
  border: 1px solid var(--hm-beam);
}

.home__btn--primary:hover { background: var(--hm-beam-light); border-color: var(--hm-beam-light); }

.home__add-project { font-weight: 600; }

.home__projects-empty {
  background: var(--hm-card);
  border: 1px dashed var(--hm-rule);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.home__projects-empty-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--hm-beam);
}

.home__projects-empty-note {
  margin: 0;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
}

.home__projects-empty-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home__starter-chip {
  background: var(--hm-plaster-warm);
  border: 1px solid var(--hm-rule);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  color: var(--hm-beam);
  cursor: pointer;
  font-weight: 500;
}

.home__starter-chip:hover {
  background: var(--hm-plaster-deep);
}

.home__projects-empty-cta { margin-top: 0.4rem; }

.home__sticky-cta {
  position: sticky;
  bottom: 0;
  margin: 1rem -1.25rem 0;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(180deg, rgba(246, 241, 233, 0) 0%, var(--hm-plaster) 35%);
  display: flex;
  justify-content: center;
  z-index: 4;
}

.home__sticky-cta .home__add-project {
  width: min(420px, 100%);
  padding: 0.8rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  box-shadow: 0 8px 18px rgba(42, 37, 32, 0.12);
}

.home__details {
  margin-top: 1.5rem;
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
  background: var(--hm-card);
  overflow: hidden;
}

.home__details-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}

.home__details-summary::-webkit-details-marker { display: none; }

.home__details-summary::after {
  content: "▾";
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  transition: transform 0.15s ease;
}

.home__details[open] > .home__details-summary::after {
  transform: rotate(180deg);
}

.home__details-summary-label {
  font-weight: 600;
  color: var(--hm-beam);
  font-size: 0.95rem;
}

.home__details-summary-meta {
  font-size: 0.8rem;
  color: var(--hm-ink-mid);
}

.home__details > .home__section { padding: 0.5rem 1rem 1rem; }
.home__details > #home-inspection-status { padding: 0.5rem 1rem 0; }

@media (max-width: 719px) {
  .home__floating-project-cta {
    display: none;
  }
}

/* Standalone textarea styles (ALM-552). Used outside .home-form__field —
 * notably the option-notes textarea on option-show, which lives inside a
 * Turbo frame, not the onboarding form. Without this rule it falls back
 * to the browser's monospace / fixed-width default. */
.home-form__textarea,
.home__option-notes-textarea {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
  line-height: 1.5;
  resize: vertical;
  min-height: 6.5rem;
}

.home-form__textarea:focus,
.home__option-notes-textarea:focus {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 1px;
  border-color: var(--hm-beam-light);
}

/* Cost-estimate CTA + regenerate buttons (ALM-552). These render on
 * decision-show and need to read as secondary outlined pills sitting next
 * to the green primary CTAs, not browser-default buttons. */
.cost-estimate__idle,
.cost-estimate__result {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cost-estimate__cta-form,
.cost-estimate__regenerate-form {
  margin: 0;
}

.cost-estimate__regenerate-form { margin-top: 0.75rem; }

.cost-estimate__cta-button,
.cost-estimate__regenerate-button {
  display: inline-block;
  background: transparent;
  color: var(--hm-beam);
  border: 1px solid var(--hm-beam);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.cost-estimate__cta-button:hover,
.cost-estimate__regenerate-button:hover {
  background: var(--hm-plaster-warm);
}

.cost-estimate__cta-button[aria-busy="true"],
.cost-estimate__regenerate-button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.cost-estimate__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hm-ink-light);
}

/* ALM-640 — Phase 1 chat surface on /home. The thread is a fixed-height
 * scrolling region (auto-scrolls to the bottom on new turns via the
 * chat-autoscroll Stimulus controller); the form sits underneath. ALM-1183
 * (Pattern C) moved captured-priority cards INSIDE the thread so they read
 * as inline conversational artifacts instead of a parallel sidebar. */
.home__chat {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--hm-card);
  border: 1px solid var(--hm-rule);
  border-radius: 12px;
}

.home__chat-header {
  margin: 0 0 0.85rem;
}

.home__chat-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: var(--hm-beam);
}

.home__chat-eyebrow {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
  line-height: 1.4;
}

.home__chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
  background: var(--hm-plaster);
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
}

.home__chat-empty {
  margin: 0;
  padding: 1.25rem 0.75rem;
  text-align: center;
  color: var(--hm-ink-light);
  font-size: 0.9rem;
  font-style: italic;
}

.chat-turn {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--hm-rule);
  background: var(--hm-card);
}

.chat-turn-user {
  align-self: flex-end;
  background: var(--hm-beam);
  border-color: var(--hm-beam);
  color: var(--hm-plaster);
}

.chat-turn-assistant {
  align-self: flex-start;
  background: var(--hm-plaster-warm);
}

.chat-turn-typing {
  max-width: 10rem;
}

.chat-turn-typing-dots {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.chat-turn-typing-dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--hm-ink-mid);
  opacity: 0.35;
  animation: chat-turn-typing-pulse 1.1s ease-in-out infinite;
}

.chat-turn-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-turn-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-turn-typing-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-1px); }
}

.chat-turn-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hm-ink-mid);
  font-size: 0.9rem;
  line-height: 1.35;
}

.chat-turn-progress + .chat-turn-body:not(:empty) {
  margin-top: 0.5rem;
}

.chat-turn-progress-pulse {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hm-beam);
  animation: chat-turn-progress-pulse 1.4s ease-in-out infinite;
}

@keyframes chat-turn-progress-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.9; transform: scale(1); }
}

.chat-turn-meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  opacity: 0.7;
}

.chat-turn-body {
  font-size: 0.95rem;
  line-height: 1.4;
}

.chat-turn-body p { margin: 0 0 0.4rem; }
.chat-turn-body p:last-child { margin-bottom: 0; }

/* ALM-1395 — a streaming turn's body is raw text nodes (escaped deltas), not
 * rendered markdown, and it now stays that way when finalization appends
 * instead of replacing. pre-wrap keeps the paragraph breaks readable; the
 * final/reload render drops the streaming class and renders markdown. */
.chat-turn-streaming .chat-turn-body { white-space: pre-wrap; }

/* ALM-658 — markdown rendering for assistant turns. Lists indent inside the
 * bubble; inline code gets a faint background so it reads as code, not prose. */
.chat-turn-body ul,
.chat-turn-body ol {
  margin: 0 0 0.4rem;
  padding-left: 1.25rem;
}
.chat-turn-body ul:last-child,
.chat-turn-body ol:last-child { margin-bottom: 0; }
.chat-turn-body li { margin: 0 0 0.15rem; }
.chat-turn-body li:last-child { margin-bottom: 0; }
.chat-turn-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(44, 74, 62, 0.08);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}
.chat-turn-user .chat-turn-body code {
  background: rgba(246, 241, 233, 0.18);
  color: inherit;
}
.chat-turn-body pre {
  margin: 0 0 0.4rem;
  padding: 0.5rem 0.65rem;
  background: rgba(44, 74, 62, 0.08);
  border-radius: 6px;
  overflow-x: auto;
}
.chat-turn-body pre code {
  background: transparent;
  padding: 0;
}
.chat-turn-body blockquote {
  margin: 0 0 0.4rem;
  padding-left: 0.65rem;
  border-left: 2px solid var(--hm-rule);
  color: var(--hm-ink-mid);
}
.chat-turn-body a {
  color: var(--hm-beam);
  text-decoration: underline;
}
.chat-turn-user .chat-turn-body a { color: inherit; }

/* ALM-665 — h1/h2/h3/h4 and table support in assistant turns.
   Sizes step down so h1 > h2 > h3/h4, preventing browser-default
   inversion where h3 (1.17rem) renders larger than the 1rem h1. */
.chat-turn-body h1 { font-size: 1rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }
.chat-turn-body h2 { font-size: 0.95rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }
.chat-turn-body h3,
.chat-turn-body h4 { font-size: 0.88rem; font-weight: 600; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
.chat-turn-body h1:first-child,
.chat-turn-body h2:first-child,
.chat-turn-body h3:first-child,
.chat-turn-body h4:first-child { margin-top: 0; }
.chat-turn-body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.88em;
  margin: 0 0 0.4rem;
}
.chat-turn-body th,
.chat-turn-body td {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--hm-rule);
  text-align: left;
}
.chat-turn-body td { overflow-wrap: anywhere; }
.chat-turn-body th { font-weight: 600; }

.home__chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.home__chat-suggested-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.home__chat-suggested-prompt {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.25;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--hm-rule);
  background: var(--hm-plaster);
  color: var(--hm-ink-mid);
  cursor: pointer;
}

.home__chat-suggested-prompt:hover,
.home__chat-suggested-prompt:focus-visible {
  border-color: var(--hm-beam-light);
  color: var(--hm-beam);
  outline: none;
}

/* ALM-657 — composer is a textarea sized like a single-line input by
 * default; the chat-form Stimulus controller grows the height as the user
 * types (capped at ~6 rows; scrolls beyond). `resize: none` hides the
 * native grab handle so it stays a chat composer, not a resizable box.
 * `box-sizing: border-box` keeps padding inside the JS-managed pixel
 * height so the autosize math doesn't overshoot by 2× padding each row. */
.home__chat-input {
  flex: 1;
  box-sizing: border-box;
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-plaster);
  color: var(--hm-ink);
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  min-height: 2.4rem;
}

.home__chat-input:focus {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 1px;
  border-color: var(--hm-beam-light);
}

/* ALM-1181 — icon-only round submit. Enter is the primary submit path; the
 * button is a small affordance for pointer + screen-reader users. Fixed
 * square dimensions so the icon stays centered regardless of textarea
 * autosize growth. */
.home__chat-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  font: inherit;
  border-radius: 999px;
  border: 1px solid var(--hm-beam);
  background: var(--hm-beam);
  color: var(--hm-plaster);
  cursor: pointer;
}

.home__chat-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.home__chat-submit-icon {
  display: block;
}

/* ALM-1183 — captured-priority card inside the chat thread. Quiet
 * conversational artifact: small check icon stands in for the old
 * "Captured priority" eyebrow label, the name reads as prose until the
 * homeowner hovers/focuses for inline edit. Left-aligned in the same
 * column as assistant turns, with a soft beam tint so it reads as an
 * outcome marker rather than another message bubble. */
.captured-priority {
  align-self: flex-start;
  max-width: 85%;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hm-rule);
  border-left: 3px solid var(--hm-beam-light);
  border-radius: 8px;
  background: var(--hm-card);
}

.captured-priority-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.4rem;
  color: var(--hm-beam-light);
}

.captured-priority-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.captured-priority-name {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--hm-ink);
}

.captured-priority-name:hover,
.captured-priority-name:focus {
  border-color: var(--hm-rule);
  background: var(--hm-plaster);
  outline: none;
}

.captured-priority-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.82rem;
  color: var(--hm-ink-light);
  font-style: italic;
}

/* ALM-1184 — inline recommendation card. Same beam-tint family as the
 * captured-priority card so both read as conversational artifacts, but
 * with structured options/tradeoffs instead of a single editable name.
 * Wider max-width because options + tradeoffs need horizontal room. */
.chat-recommendation {
  align-self: flex-start;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--hm-rule);
  border-left: 3px solid var(--hm-beam-light);
  border-radius: 8px;
  background: var(--hm-card);
}

.chat-recommendation-header {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.chat-recommendation-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.4rem;
  color: var(--hm-beam-light);
}

.chat-recommendation-question {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hm-ink);
  line-height: 1.35;
}

.chat-recommendation-options,
.chat-recommendation-tradeoffs {
  margin: 0;
  padding: 0;
}

.chat-recommendation-options ul,
.chat-recommendation-tradeoffs ul {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.chat-recommendation-options li,
.chat-recommendation-tradeoffs li {
  font-size: 0.88rem;
  color: var(--hm-ink);
  line-height: 1.4;
}

.chat-recommendation-tradeoffs-heading {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hm-ink-light);
}

/* ALM-1838 — shown when the recommendation's payload options diverge from
 * the live option set (homeowner refreshed options after the recommendation). */
.chat-recommendation-snapshot-note {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--hm-ink-light);
  font-style: italic;
}

.chat-recommendation-option-label,
.chat-recommendation-tradeoff-label {
  font-weight: 600;
  margin-right: 0.25rem;
}

.chat-recommendation-option-summary,
.chat-recommendation-tradeoff-summary {
  color: var(--hm-ink);
}

.chat-recommendation-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.82rem;
  color: var(--hm-ink-light);
  font-style: italic;
}

/* ALM-1259 — committed-position block. The pick is the loudest element on
 * the card: the card exists to take a position, the options are supporting
 * evidence. Beam tint ties it to the assistant voice. */
.chat-recommendation-position {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--hm-beam-light) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-recommendation-pick {
  margin: 0;
  font-size: 0.95rem;
  color: var(--hm-ink);
  line-height: 1.35;
}

.chat-recommendation-reasoning {
  margin: 0;
  font-size: 0.88rem;
  color: var(--hm-ink);
  line-height: 1.45;
}

.chat-recommendation-option--picked {
  list-style: none;
  margin-left: -1.1rem;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--hm-beam-light) 8%, transparent);
}

.chat-recommendation-pick-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hm-card);
  background: var(--hm-beam-light);
  vertical-align: middle;
}

.chat-recommendation-option-cost {
  margin-left: 0.35rem;
  margin-right: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hm-ink-light);
  white-space: nowrap;
}

.chat-recommendation-goal-link {
  margin: 0;
  font-size: 0.85rem;
}

.chat-recommendation-goal-link a {
  color: var(--hm-beam-light);
  font-weight: 600;
  text-decoration: none;
}

.chat-recommendation-goal-link a:hover {
  text-decoration: underline;
}

.chat-recommendation-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hm-rule);
}

.chat-recommendation-action {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--hm-rule);
  background: transparent;
  color: var(--hm-ink);
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.4;
}

.chat-recommendation-action:hover {
  background: color-mix(in srgb, var(--hm-ink) 6%, transparent);
}

.chat-recommendation-action:focus-visible {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 2px;
}

.chat-recommendation-action--save {
  background: color-mix(in srgb, var(--hm-beam-light) 10%, var(--hm-card));
  color: var(--hm-beam-light);
  border-color: color-mix(in srgb, var(--hm-beam-light) 35%, transparent);
}

.chat-recommendation-action--save:hover {
  background: color-mix(in srgb, var(--hm-beam-light) 18%, var(--hm-card));
}

.chat-recommendation-action--dismiss {
  color: var(--hm-ink-light);
  border-color: var(--hm-rule);
}

.chat-recommendation-action--dismiss:hover {
  color: var(--hm-ink-mid);
  background: color-mix(in srgb, var(--hm-ink) 5%, transparent);
}

.chat-recommendation-state-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hm-rule);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hm-ink-light);
}

.chat-recommendation-undo {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid var(--hm-rule);
  background: transparent;
  color: var(--hm-ink-light);
  line-height: 1.4;
}

.chat-recommendation-undo:hover {
  background: color-mix(in srgb, var(--hm-ink) 6%, transparent);
}

.chat-recommendation-undo:focus-visible {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 2px;
}

/* ── Home Membership block (ALM-1251, ALM-3142) ───────────────────────
   Subscribe surface on /home and /home/plan, plus the active-member card.
   Rendered by homes/_membership; hidden entirely until at least one real
   recurring price id is configured. */

.home__membership-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home__membership-price {
  margin: 0;
  color: var(--hm-beam);
  font-size: 1.05rem;
}

.home__membership-price strong { font-size: 1.4rem; }
.home__membership-price span { color: var(--hm-ink-light); }

.home__membership-benefits {
  margin: 0.75rem 0 1rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  color: var(--hm-ink);
  font-size: 0.95rem;
}

.home__membership-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.home__membership-plan {
  appearance: none;
  display: grid;
  gap: 0.35rem;
  min-height: 8.5rem;
  padding: 0.9rem;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--hm-ink);
  text-align: left;
  cursor: pointer;
}

.home__membership-plan[data-state="active"],
.home__membership-plan[aria-checked="true"] {
  border-color: var(--hm-beam);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hm-beam) 14%, transparent);
}

.home__membership-plan:focus-visible {
  outline: 2px solid var(--hm-beam-light);
  outline-offset: 2px;
}

.home__membership-plan-kicker {
  min-height: 2.4em;
  color: var(--hm-beam);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.home__membership-plan-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.home__membership-plan-price {
  color: var(--hm-ink);
  font-size: 0.9rem;
}

.home__membership-plan-price strong {
  color: var(--hm-beam);
  font-size: 1.45rem;
}

.home__membership-plan-price span {
  color: var(--hm-ink-light);
}

.home__membership-cta { font-weight: 600; }

.home__membership-fineprint {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--hm-ink-light);
}

.home__membership-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #E8F0EB;
  color: var(--hm-beam);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* =============================================================
 * ALM-2189 — Empty-to-rich onboarding arc
 * ============================================================= */

/* Chat pane welcome message (replaces "No messages yet.") */
.home__chat-welcome {
  padding: 1.25rem 0.75rem;
  text-align: center;
}

.home__chat-welcome-headline {
  margin: 0;
  font-size: 0.95rem;
  color: var(--hm-beam);
  font-weight: 500;
  line-height: 1.5;
}

.home__chat-welcome-prompt {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--hm-ink-mid);
  line-height: 1.5;
  font-style: italic;
}

/* Snapshot richness greeting (shows on /home/overview below address) */
.home__snapshot-greeting {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--hm-ink-mid);
  line-height: 1.5;
  font-style: italic;
}

/* ALM-3846 — loading state shown in the priorities rail while a broadcast is
   expected (user has chat turns but no goals yet). Replaces the onboarding card
   during the background-job window. */
.home__priorities-loading {
  background: var(--hm-card);
  border: 1px dashed var(--hm-rule);
  border-radius: 12px;
  padding: 1.25rem 1rem;
}

.home__priorities-loading-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--hm-ink-mid);
}

/* Three-step onboarding card in the priorities rail */
.home__onboarding {
  background: var(--hm-card);
  border: 1px dashed var(--hm-rule);
  border-radius: 12px;
  padding: 1.25rem 1rem;
}

.home__onboarding-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--hm-beam);
  font-weight: 600;
}

.home__onboarding-subtitle {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--hm-ink-mid);
}

.home__onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home__onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.home__onboarding-step-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--hm-plaster-deep);
  border: 1px solid var(--hm-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hm-ink-mid);
  line-height: 1;
}

.home__onboarding-step--done .home__onboarding-step-icon {
  background: var(--hm-beam);
  border-color: var(--hm-beam);
  color: #fff;
}

.home__onboarding-step-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home__onboarding-step-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hm-ink);
  line-height: 1.4;
}

.home__onboarding-step--done .home__onboarding-step-label {
  color: var(--hm-ink-mid);
  text-decoration: line-through;
  text-decoration-color: var(--hm-rule);
}

.home__onboarding-step-note {
  font-size: 0.8rem;
  color: var(--hm-ink-light);
  line-height: 1.4;
}

.home__onboarding-step--done .home__onboarding-step-note {
  text-decoration: none;
}

.home__onboarding-step-cta {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--hm-beam);
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.home__onboarding-step-cta:hover {
  text-decoration: underline;
}

/* ALM-3221 — Plaid bank accounts section (homes#plan) */
.home__banks-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home__bank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hm-rule, #e5e7eb);
  border-radius: 8px;
  background: var(--hm-surface-alt, #fafafa);
}

.home__bank-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home__bank-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--hm-ink, #111827);
}

.home__bank-meta {
  font-size: 0.8rem;
  color: var(--hm-ink-light, #6b7280);
}