/* ============================================================
   Provider Portal — sticky quote action bar + badge chips
   Two surfaces share this file: the fixed bottom Send bar on the
   quote page (with its live "Homeowner sees" mirror), and the
   self-asserted owned-by badge chips on the profile. Tokens only.
   ============================================================ */

/* Wider job column for rhythm; reserve bottom space to clear the fixed bar. */
.portal-wrap.job {
  max-width: 600px;
  padding-bottom: calc(var(--ha-space-16) + var(--ha-space-5) + env(safe-area-inset-bottom));
}

/* ---------- Sticky quote action bar ---------- */
/* Fixed to the viewport, centered. White surface + sheet shadow (the floating
   tier) so it reads above scrolling content; page reserves bottom space. */
.quote-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--ha-surface);
  border-top: 1px solid var(--ha-border);
  box-shadow: var(--ha-shadow-sheet);
  padding-bottom: calc(var(--ha-space-3) + env(safe-area-inset-bottom));
  padding-top: var(--ha-space-3);
}
.quote-bar-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--ha-space-4);
  display: flex;
  align-items: center;
  gap: var(--ha-space-4);
}
/* The running mirror of the homeowner-facing price, stacked label over number. */
.quote-bar-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.quote-bar-preview .lab {
  font-size: var(--ha-fs-caption);
  color: var(--ha-ink-muted);
}
.quote-bar-preview .num {
  font-size: var(--ha-fs-h3);
  line-height: var(--ha-lh-h3);
  font-weight: var(--ha-weight-bold);
  color: var(--ha-blue-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The single primary Send control: comfortable tap target, never full-width. */
.quote-bar .portal-btn {
  flex: none;
  min-height: 44px;
  padding-left: var(--ha-space-6);
  padding-right: var(--ha-space-6);
}

/* ---------- Quote-page calm cues ---------- */
/* A quiet reassurance line under the price field. */
.quote-autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ha-fs-caption);
  color: var(--ha-ink-muted);
  margin: var(--ha-space-3) 0 0;
}
.quote-autosave svg { width: 14px; height: 14px; color: var(--ha-success); flex: none; }

/* The "Optional extras" label that subordinates the power options below the
   hero price field — small, muted, on the 4px grid. */
.quote-optional-eyebrow {
  font-size: var(--ha-fs-caption);
  font-weight: var(--ha-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ha-ink-muted);
  margin: var(--ha-space-5) 0 var(--ha-space-1);
}

/* Hero price field: the dead-simple primary path. Taller, calmer, navy-led so
   the bottom-line number is unmistakably the main thing to fill in. */
.quote .quote-panel[data-mode="fixed"] > .price-field { padding: 14px 18px; }
.quote .quote-panel[data-mode="fixed"] > .price-field .cur { font-size: var(--ha-fs-h2); }
.quote .quote-panel[data-mode="fixed"] > .price-field input { font-size: var(--ha-fs-h1); }

/* The ONE sanctioned gold use: a small gold dot marking the homeowner's
   preferred days on the calendar (chip-sized seasoning, never a surface). The
   day's blue tint fill + border comes from portal_job.css; gold is only this
   dot accent on top, never a border (which would over-use gold and read muddy). */
label.cal-day.is-preferred::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ha-gold-base);
}
label.cal-day.is-preferred:has(input:checked)::after { background: var(--ha-on-primary); }

/* ---------- Owned-by badge chips (profile) ---------- */
/* Honest self-asserted claim chips: navy/neutral, NO teal verified check.
   Hidden checkbox + :has toggle posts with JS off (mirrors .quote-mode). */
.badge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ha-space-2);
}
.badge-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--ha-radius-pill);
  border: 1px solid var(--ha-border);
  background: var(--ha-surface);
  color: var(--ha-blue-primary);
  font-size: var(--ha-fs-small);
  font-weight: var(--ha-weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.badge-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.badge-chip-tick {
  width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  transition: width 120ms ease;
}
.badge-chip-tick svg { width: 14px; height: 14px; flex: none; }
.badge-chip:hover { border-color: var(--ha-blue-accent); background: var(--ha-portal-hover); }
.badge-chip:has(input:checked) {
  background: var(--ha-blue-primary);
  border-color: var(--ha-blue-primary);
  color: var(--ha-on-primary);
  font-weight: var(--ha-weight-bold);
}
.badge-chip:has(input:checked) .badge-chip-tick { width: 16px; }
.badge-chip:has(input:focus-visible) { box-shadow: var(--ha-portal-focus); }

/* Custom badges: each existing label is an editable filled chip; the + button
   reveals another blank. Empty inputs post harmlessly (rejected server-side). */
.custom-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ha-space-2);
}
.custom-badge { display: inline-flex; }
.custom-badge-input {
  min-height: 44px;
  width: 160px;
  max-width: 100%;
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-pill);
  padding: 0 14px;
  font: inherit;
  font-size: var(--ha-fs-small);
  color: var(--ha-blue-primary);
  background: var(--ha-surface);
  outline: none;
}
.custom-badge-input:focus {
  border-color: var(--ha-blue-accent);
  box-shadow: var(--ha-portal-focus);
}
.badge-add {
  margin-top: var(--ha-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--ha-radius-pill);
  border: 1px dashed var(--ha-border);
  background: var(--ha-surface);
  color: var(--ha-blue-text);
  font: inherit;
  font-size: var(--ha-fs-small);
  font-weight: var(--ha-weight-medium);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.badge-add svg { width: 15px; height: 15px; }
.badge-add:hover { border-color: var(--ha-blue-accent); background: var(--ha-portal-hover); }
.badge-add:focus-visible { outline: none; box-shadow: var(--ha-portal-focus); }