/* ===================================================================
   Moby — tenant portal redesign, loaded on every /tenant/ page AFTER
   css/customer/_layout.css (tenant/_layout.html), so rules here win.

   The tenant shell still speaks the customer app's design language —
   same tokens, radii, shadows, buttons — this file only adds what the
   redesign introduced (delivery tracker, progress segments, hero cards,
   menu rows, chat bubbles, the toast overlay) and re-tunes shared
   pieces where the tenant screens are specified differently (bigger
   wizard type, stacked urgency options, the 50×30 switch).

   Everything colour here resolves from tokens or color-mix over tokens
   — an org's brand re-tint (partials/_brand_theme.html moves --teal,
   and --accent follows) restyles all of it with no rule knowing. The
   two pinned urgency literals live in customer/report_issue.css and are
   reused via its classes, not repeated here.
   =================================================================== */

/* ── Buttons: taller hero variants + ghosts ────────────────────────── */
.btn-primary--lg {
  height: 54px;
  font-size: 16px;
  gap: 8px;
}
.btn-primary--lg .ti { font-size: 20px; }

.btn-primary--xl {
  height: 56px;
  font-size: 16px;
  gap: 8px;
}
.btn-primary--xl .ti { font-size: 20px; }

.btn-ghost-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  background: none;
  color: var(--danger-deep);
  border: 1.5px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
  text-decoration: none;
}
.btn-ghost-danger:hover { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.btn-ghost-danger .ti { font-size: 17px; }
.btn-ghost-danger--tall { height: 48px; font-size: 14.5px; }

.btn-ghost-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 50px;
  background: none;
  color: var(--accent-deep);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
  text-decoration: none;
}
.btn-ghost-accent:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* A quiet text-only action ("Back to home", "Go back"). */
.btn-ghost-muted {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  background: none;
  color: var(--text-secondary);
  border: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost-muted:hover { color: var(--ink); }

/* Dashed affordance — "send us a document" and friends. */
.btn-dashed-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: none;
  color: var(--accent-deep);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-dashed-accent:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.btn-dashed-accent .ti { font-size: 17px; }

/* ── Icon circles — the 44px tinted disc every card leads with ─────── */
.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.icon-circle--sm { width: 30px; height: 30px; font-size: 15px; }
.icon-circle--lg { width: 48px; height: 48px; font-size: 24px; }

.icon-circle--accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-deep); }
/* On the navy hero card the tint has to glow, not grey out. */
.icon-circle--on-dark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.icon-circle--amber  { background: var(--status-wait-bg); color: var(--status-wait-fg); }
.icon-circle--good   { background: var(--status-good-bg); color: var(--success); }
.icon-circle--danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.icon-circle--muted  { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--text-secondary); }

/* ── Hero card — the navy statement card (visit booked, rent, moving in) */
.hero-card {
  display: block;
  width: 100%;
  text-align: start;
  background: var(--hero-ground);
  border: none;
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card-lifted);
  color: var(--hero-ink);
  font-family: var(--font-body);
}
a.hero-card, button.hero-card { cursor: pointer; }
.hero-card--row { display: flex; align-items: center; gap: 14px; }
.hero-card--row > .ti-chevron-right { color: var(--text-on-dark); font-size: 18px; flex-shrink: 0; }
.hero-body { flex: 1; min-width: 0; }

.hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 2px;
}
.hero-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--hero-ink);
}
.hero-title--lg { font-size: 17px; }
.hero-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-on-dark);
  margin-top: 1px;
  line-height: 1.45;
}
.hero-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--white);
  margin: 0 0 2px;
}

/* ── Engineer-on-site card — the tenant's cut of the visit clock ───── */
.live-card { display: flex; flex-direction: column; gap: 2px; }
.live-card__eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: tenant-live-pulse 1.6s ease-in-out infinite;
}
@keyframes tenant-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
.live-clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 6px;
}
.live-clock [data-vt-elapsed] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--hero-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.live-clock__unit { font-size: 12.5px; color: var(--text-on-dark); }
/* The home hero's inline ticking figure. */
.hero-title [data-vt-elapsed] { font-variant-numeric: tabular-nums; }

/* ── Home ──────────────────────────────────────────────────────────── */
.home-greeting {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
.home-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.home-address .ti { font-size: 14px; }

.section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 2px -6px;
}
.section-row .section-title { margin: 0; }
.see-all {
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 4px;
  text-decoration: none;
}

/* ── Progress segments — the 4-step bar under a report title ───────── */
.seg-bar { display: flex; align-items: center; gap: 8px; width: 100%; }
.seg-track { flex: 1; display: flex; gap: 4px; }
.seg { flex: 1; height: 5px; border-radius: 3px; background: var(--mist); }
.seg--on { background: var(--accent); }
.seg--done { background: var(--success); }
.seg-phrase {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.seg-phrase--done { color: var(--success); }

/* ── Delivery tracker — the report detail's "where things are" ─────── */
.tracker { display: flex; flex-direction: column; }
.tracker-step { display: flex; gap: 14px; }
.tracker-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  flex-shrink: 0;
}
.tracker-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--paper);
  color: var(--border);
  border: 2px solid var(--mist);
  box-sizing: border-box;
}
.tracker-step--done .tracker-dot {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.tracker-step--current .tracker-dot {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-deep);
  border-color: var(--accent);
}
.tracker-line { width: 2px; flex: 1; min-height: 22px; background: var(--mist); }
.tracker-line--past { background: var(--accent); }
.tracker-body { padding: 4px 0 18px; min-width: 0; }
.tracker-step:last-child .tracker-body { padding-bottom: 2px; }
.tracker-label { font-size: 14.5px; font-weight: 600; color: var(--text-tertiary); }
.tracker-step--done .tracker-label { color: var(--ink); }
.tracker-step--current .tracker-label { color: var(--accent-deep); }
.tracker-detail {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.45;
}

/* ── Wizard — sizes the redesign specifies over report_issue.css ───── */
.wizard-screen { display: flex; flex-direction: column; flex: 1; }
.wizard-foot { margin-top: auto; padding-top: 18px; }
.wizard-foot + .wizard-foot { padding-top: 8px; }

.wizard-title { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
.wizard-sub { font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

.wizard-back-btn,
.wizard-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.wizard-back-btn .ti { font-size: 22px; }
.wizard-close-btn { color: var(--text-secondary); }
.wizard-close-btn .ti { font-size: 20px; }
.wizard-close-btn:hover { background: var(--mist); }

/* Triage / big option cards */
.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: start;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: var(--font-body);
}
.option-card:hover { border-color: var(--accent); }
.option-card--danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.option-card--danger:hover { border-color: var(--danger); }
.option-body { flex: 1; min-width: 0; }
.option-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.option-sub {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

/* Emergency call cards */
.call-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}
.call-card-info { flex: 1; min-width: 0; }
.call-card-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.call-card-sub { display: block; font-size: 13px; color: var(--text-secondary); }
.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.call-btn .ti { font-size: 16px; }
.call-btn--danger { background: var(--danger); }
.call-btn--ink { background: var(--ink); }
.call-btn--accent { background: var(--accent); }

/* Category grid — roomier than the customer's (100px tiles, 30px icons) */
.wizard-cat-card { min-height: 100px; padding: 20px 12px 18px; gap: 9px; }
.wizard-cat-icon { font-size: 30px; }
.wizard-cat-name { font-size: 13px; }

/* Issue list — taller rows, bigger type */
.wizard-issue-item { min-height: 58px; font-size: 15px; padding: 16px; }
.wizard-issue-name { font-size: 15px; }

/* Details step: the 76px photo drop */
.wizard-photo-label--drop {
  justify-content: center;
  min-height: 76px;
  font-size: 14.5px;
  background: var(--white);
  border-color: var(--border);
}
.wizard-photo-label--drop .ti { font-size: 24px; }

/* Urgency — two stacked full-width rows, colours from report_issue.css */
.wizard-priority-group--stack { flex-direction: column; }
.wizard-priority-group--stack .wizard-priority-chip {
  justify-content: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  font-size: 14.5px;
  background: var(--white);
  border-radius: var(--radius-md);
}
.wizard-priority-group--stack .wizard-priority-chip .ti { font-size: 18px; }

/* Review — rows are buttons back into their step */
.wizard-review-row {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mist);
  cursor: pointer;
  text-align: start;
  font-family: var(--font-body);
  padding: 14px 0;
}
.wizard-review-row:last-child { border-bottom: none; }
div.wizard-review-row { cursor: default; }
.wizard-review-label { font-size: 12.5px; }
.wizard-review-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.wizard-review-value .ti-pencil { font-size: 14px; color: var(--accent-deep); }

/* Done screen */
.done-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 10px 0;
}
.done-check {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--status-good-bg);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  animation: tenant-popin 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.done-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  margin: 22px 0 8px;
}
.done-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 26px;
  line-height: 1.55;
  max-width: 280px;
}
.done-next { width: 100%; text-align: start; }
.done-next-rows { display: flex; flex-direction: column; gap: 12px; }
.done-next-row {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.done-next-row .ti { color: var(--accent-deep); font-size: 18px; flex-shrink: 0; }

@keyframes tenant-popin {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .done-check { animation: none; }
}

/* The quiet centred footnote under a primary action. Also defined (at
   11.5px) in customer/report_issue.css for the wizard page — this copy
   is the one every OTHER tenant page resolves; the redesign sets it a
   step larger. */
.wizard-submit-note {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── More / menu rows ──────────────────────────────────────────────────
   .menu-card / .menu-row and friends now live in common/_components.css:
   the customer portal's More screen is the same component, and it had a
   second implementation of it (.profile-menu / .profile-menu-item) that
   had drifted to single-line rows with grey icons. One definition, so the
   two More screens can't diverge again. Nothing tenant-specific was left
   behind here — if this portal ever needs its own values, they go back in
   this file as an override, which loads after the shared sheet. */

/* ── Onboarding checklist ("get set up before you move in") ────────── */
.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  text-align: start;
  background: var(--paper);
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  color: inherit;
  text-decoration: none;
}
.task-row:hover { background: var(--mist); }
.task-body { flex: 1; min-width: 0; }
.task-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.task-row--done .task-label { text-decoration: line-through; }
.task-sub { display: block; font-size: 12px; color: var(--text-secondary); }
.task-row > .ti-chevron-right { color: var(--border); font-size: 16px; flex-shrink: 0; }

/* ── Messages list ─────────────────────────────────────────────────── */
.chat-rows { display: flex; flex-direction: column; gap: 10px; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: start;
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-body);
}
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-row-time { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.chat-row-preview {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Chat thread (full-screen, chrome hidden) ──────────────────────── */
.content--flush { padding: 0; gap: 0; overflow: hidden; }

.thread-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mist);
  background: var(--white);
  flex-shrink: 0;
}
.thread-head-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.thread-head-sub { font-size: 12px; color: var(--text-secondary); }
.thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 78%;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.bubble--mine {
  align-self: flex-end;
  background: var(--accent);
  color: var(--white);
  border-radius: 16px 16px 4px 16px;
}
.bubble--theirs {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow-card);
}
.bubble-stamp { align-self: center; font-size: 11px; color: var(--text-secondary); }
.bubble-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bubble-attachments img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.bubble-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 8px;
}
.bubble--mine .bubble-doc { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.thread-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--white);
  border-top: 1px solid var(--mist);
  flex-shrink: 0;
}
.thread-compose .form-control { flex: 1; min-width: 0; }
.thread-attach {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 19px;
  padding: 4px;
}
.thread-send {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
}
.thread-send:hover { background: var(--accent-deep); }

/* ── Tenancy ───────────────────────────────────────────────────────── */
.card--outlined-accent { border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 18px;
  font-size: 13.5px;
  margin: 0;
}
.facts dt { color: var(--text-secondary); font-weight: 400; }
.facts dd { margin: 0; font-weight: 500; color: var(--ink); }

.card-divider { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mist); }

.sig-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sig-count { font-size: 11.5px; font-weight: 600; color: var(--status-wait-fg); }
.sig-count--complete { color: var(--success); }
.sig-rows { display: flex; flex-direction: column; gap: 10px; }
.sig-row { display: flex; align-items: center; gap: 10px; }
.sig-body { flex: 1; min-width: 0; }
.sig-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sig-party { display: block; font-size: 11.5px; color: var(--text-secondary); }
.sig-when {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.sig-when--awaiting { color: var(--status-wait-fg); }

.doc-rows { display: flex; flex-direction: column; gap: 8px; }
.doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  text-align: start;
  background: var(--paper);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-body);
}
.doc-row:hover { background: var(--mist); }
.doc-row > .ti:first-child { font-size: 20px; color: var(--accent-deep); flex-shrink: 0; }
.doc-body { flex: 1; min-width: 0; }
.doc-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-kind { display: block; font-size: 11.5px; color: var(--text-secondary); }
.doc-row > .ti-eye { font-size: 16px; color: var(--text-secondary); flex-shrink: 0; }

.upload-panel {
  margin-top: 10px;
  padding: 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload-panel-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-option { display: block; cursor: pointer; position: relative; }
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  transition: all 0.15s;
}
.type-option input:checked + .type-chip {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* ── Evidence card, the tenant's friendlier chrome ─────────────────── */
/* The count pill reads as "waiting on you", not "hidden". */
.svc-badge--hidden { background: var(--status-wait-bg); color: var(--status-wait-fg); }

.evidence-choice {
  position: relative;
  justify-content: center;
  height: 46px;
  border: 2px solid var(--mist);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.evidence-choice input { position: absolute; opacity: 0; pointer-events: none; }
.evidence-choice:has(input:checked) { color: var(--accent-deep); }

/* ── Rating stars: 44px tap targets ────────────────────────────────── */
.rating-pick { gap: 10px; }
.rating-pick label { font-size: 34px; padding: 3px 4px; }

/* The notifications switch was overridden here to 50×30 — a THIRD size for
   one control, on top of the contractor sheet's 42×24 and the customer
   sheet's 44×24, and this page linked the customer's sheet as well, so which
   one won came down to link order. One definition in
   common/_components.css now. */

/* ── Subpage header variants ───────────────────────────────────────── */
.subpage-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--accent-deep); }
.subpage-header--detail { align-items: flex-start; }
.subpage-header--detail h1 { font-size: 18px; line-height: 1.25; }
.subpage-header--detail .subpage-back { margin-top: 2px; }

/* ── Messages tab unread dot ───────────────────────────────────────── */
.tabbar .nav-link { position: relative; }
.tabbar .nav-link .nav-dot {
  position: absolute;
  top: 2px;
  inset-inline-end: 26%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.sidebar-nav .nav-link .nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* ── Toast — flashes float as a navy pill over the screen top ──────── */
.screen { position: relative; }
.flash-stack {
  position: absolute;
  top: calc(74px + env(safe-area-inset-top, 0px));
  inset-inline-start: 18px;
  inset-inline-end: 18px;
  /* Above .home-switch-panel (50), which drops out of the topbar across
     the same strip: realtime.js raises its degraded-connection toast on a
     timer, so it can land while the switcher is open. */
  z-index: 51;
}
.flash-message,
.flash-message--success,
.flash-message--danger,
.flash-message--warning,
.flash-message--info {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 30%, transparent);
  animation: tenant-fadeup 0.25s ease;
}
.flash-message--dismissing { opacity: 0; transform: translateY(-6px); }
.flash-message--success .flash-icon { color: var(--success); }
.flash-message--danger .flash-icon { color: var(--danger); }
.flash-message--warning .flash-icon { color: var(--warning); }
.flash-message--info .flash-icon { color: var(--accent); }

@keyframes tenant-fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flash-message { animation: none; }
}

/* ── The home switcher ────────────────────────────────────────────────
   One person can rent two homes now, so the chrome has to say which one
   the portal is about and let them change it. Rendered in both the
   sidebar brand block and the topbar brand block, and only when there is
   more than one — the ordinary tenant never sees it.

   The rows inside come from common/_components.css (.menu-card /
   .menu-row): a list of tappable choices is exactly what the More screen
   is already built from, and a second set of rules for the same shape is
   how two lists start disagreeing. Only the disclosure around them is
   this portal's own, which is why it lives here and not in _components. */
.home-switch {
  position: relative;
  margin-top: 10px;
}
.home-switch-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.home-switch-summary::-webkit-details-marker { display: none; }
.home-switch-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-switch-summary > .ti {
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.home-switch[open] .home-switch-summary > .ti { transform: rotate(180deg); }

/* Overlays rather than pushing the page down: in the topbar this sits in
   a fixed-height bar, and reflowing it would move every row of the screen
   underneath whenever somebody opened the list to look. */
.home-switch-panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  padding-top: 6px;
}
.home-switch-hint {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* display:contents so the button stays .menu-card's own layout child —
   same reason the logout form does it. */
.home-switch-form { display: contents; }

/* On a phone the topbar is near the right edge, so the panel hangs off
   the left of its trigger instead of overflowing the viewport. */
@media (max-width: 640px) {
  .home-switch-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}