/* /demo/tenancy — chapter screens. Builds on walkthrough.css (--wt-* vars)
   so the demo reads as the same product the walkthrough demo shows.
   Designed at 390px first; the timeline is a bottom sheet on phones and a
   right rail from 900px up. */

.td-shell { max-width: 520px; margin: 0 auto; padding: 0 16px 96px; }

/* App bar: demo label + role chip + chapter menu. Always visible. */
.td-appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; margin: 0 -16px;
  background: var(--wt-card); border-bottom: 1px solid var(--wt-line);
}
.td-appbar .t { font-weight: 800; font-size: 15px; color: var(--wt-navy); }
.td-role {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--wt-teal-soft); color: var(--wt-teal); white-space: nowrap;
}
.td-menu { position: relative; }
.td-menu > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--wt-muted); padding: 6px 8px; border-radius: 8px; }
.td-menu > summary::-webkit-details-marker { display: none; }
.td-menu[open] > summary { background: #eef2f1; }
.td-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 220px; padding: 6px; margin: 0; list-style: none;
  background: var(--wt-card); border: 1px solid var(--wt-line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(33, 23, 71, .18);
}
.td-menu-list a { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: inherit; text-decoration: none; }
.td-menu-list a:hover { background: #eef2f1; }
.td-menu-list a.cur { background: var(--wt-teal-soft); color: var(--wt-teal); font-weight: 700; }
.td-menu-list a .n { font-size: 12px; color: var(--wt-muted); min-width: 14px; }

.td-kicker { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--wt-teal); margin: 18px 0 4px; }
.td-h1 { font-size: 23px; font-weight: 800; color: var(--wt-navy); line-height: 1.2; margin: 0 0 6px; }
.td-lead { font-size: 14.5px; color: var(--wt-muted); margin: 0 0 14px; }

.td-card {
  background: var(--wt-card); border: 1px solid var(--wt-line); border-radius: 14px;
  padding: 14px 16px; margin: 10px 0;
}
.td-card .h { font-weight: 800; color: var(--wt-navy); font-size: 15.5px; margin-bottom: 6px; }
.td-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--wt-line); font-size: 14px; }
.td-row:last-child { border-bottom: 0; }
.td-row .k { color: var(--wt-muted); }
.td-row .v { font-weight: 600; text-align: right; }

/* Evidence badges — same tones as the portal's priority labels; strings come
   from EvidenceLanguage at render time. */
.td-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.td-badge.low { background: var(--wt-good-bg); color: var(--wt-good-fg); }
.td-badge.medium { background: #eef2f1; color: var(--wt-muted); }

.td-claim { padding: 8px 0; border-bottom: 1px solid var(--wt-line); font-size: 14px; }
.td-claim:last-child { border-bottom: 0; }
.td-claim .k { color: var(--wt-muted); font-size: 12.5px; }
.td-claim .v { font-weight: 600; margin: 1px 0 4px; }

/* Side-by-side applicants (Chapter 2). Stays two-up even at 390px. */
.td-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-compare .td-card { margin: 0; }

/* Primary chapter action. */
.td-action { margin: 14px 0 6px; }
.td-action .wt-btn { width: 100%; }

/* "Do this for real" — persistent, small, below the chapter action. */
.td-real { text-align: center; margin: 10px 0 4px; font-size: 13.5px; }
.td-real a { color: var(--wt-teal); font-weight: 700; text-decoration: none; }

/* Beats reveal as the visitor acts. */
.td-beat[hidden] { display: none; }
.td-done {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--wt-good-fg);
  background: var(--wt-good-bg); border-radius: 999px; padding: 4px 10px; margin-top: 8px;
}

/* The tenant email panel: a phone-shaped frame titled "What Sam receives".
   Inside, the REAL email hero partial (Views/EmailActions/_Hero.cshtml) —
   these ea-* rules mirror _EmailActionLayout.cshtml so it renders the same. */
.td-phone {
  background: var(--wt-navy); border-radius: 20px; padding: 14px;
  margin: 12px 0; box-shadow: 0 16px 40px rgba(33, 23, 71, .22);
}
.td-phone .cap { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: rgba(255, 255, 255, .75); margin-bottom: 8px; }
.td-phone .scr { background: #f4f6f5; border-radius: 12px; padding: 12px; }
.td-phone .ea-hero { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--wt-line); border-radius: 10px; background: #fff; }
.td-phone .ea-hero-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--wt-teal); }
.td-phone .ea-hero-heading { margin-top: 2px; font-size: 15.5px; font-weight: 700; color: var(--wt-navy); }
.td-phone .ea-hero-amount { margin-top: 6px; font-size: 26px; font-weight: 800; color: var(--wt-navy); font-variant-numeric: tabular-nums; }
.td-phone .ea-hero-lines { margin: 6px 0 0; padding: 0; list-style: none; color: var(--wt-muted); font-size: 13.5px; }
.td-phone .ea-hero-lines li { padding: 2px 0; }
.td-phone .wt-btn { width: 100%; margin-top: 8px; }
.td-phone .alt { display: block; text-align: center; font-size: 13px; color: var(--wt-muted); margin-top: 8px; }
.td-phone button.alt { background: none; border: 0; width: 100%; cursor: pointer; }

/* Notice trail: Delivered → Viewed → Acknowledged, lighting up in sequence. */
.td-trail { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.td-trail span {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #eef2f1; color: var(--wt-muted); transition: background .25s, color .25s;
}
.td-trail span.on { background: var(--wt-good-bg); color: var(--wt-good-fg); }

/* Message thread (Chapter 5c). */
.td-msg { display: flex; gap: 8px; margin-top: 8px; font-size: 14px; }
.td-msg .who { font-weight: 700; color: var(--wt-navy); }
.td-msg .bubble { background: #eef2f1; border-radius: 12px; padding: 8px 12px; }

/* Condition report rows (Chapter 4) — the walkthrough demo's record idiom. */
.td-croom { border: 1px solid var(--wt-line); border-radius: 12px; background: var(--wt-card); padding: 10px 12px; margin-top: 8px; }
.td-croom .t { font-weight: 800; color: var(--wt-navy); font-size: 14.5px; }
.td-croom .t span { font-weight: 600; color: var(--wt-muted); font-size: 12.5px; margin-left: 6px; }
.td-citem { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--wt-line); font-size: 13.5px; }
.td-citem:last-child { border-bottom: 0; }
.td-citem .c { font-size: 12.5px; color: var(--wt-muted); }
.td-citem img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wt-line); }
.td-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.td-chip.good { background: var(--wt-good-bg); color: var(--wt-good-fg); }
.td-chip.worn { background: var(--wt-worn-bg); color: var(--wt-worn-fg); }

/* The disagree ledger reuses the portal's _EntryList markup. */
.rent-entry-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.rent-entry-list li { padding: 5px 0; border-bottom: 1px solid var(--wt-line); }
.rent-entry-list li:last-child { border-bottom: 0; }
.rent-entry-list li.superseded { text-decoration: line-through; color: var(--wt-muted); }

/* Final record rows (Chapters 6–7). */
.td-record { border: 1px solid var(--wt-line); border-radius: 14px; background: var(--wt-card); padding: 12px 14px; margin-top: 10px; }
.td-record .h { font-weight: 800; color: var(--wt-navy); margin-bottom: 4px; }
.td-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }

/* Timeline: right rail ≥900px, bottom sheet below. */
.td-layout { display: block; }
.td-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-timeline-head .t { font-weight: 800; color: var(--wt-navy); font-size: 14.5px; }
.td-timeline-head .n { font-size: 12.5px; color: var(--wt-muted); font-weight: 700; }
.td-entries { list-style: none; margin: 8px 0 0; padding: 0; }
.td-entry { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--wt-line); font-size: 13.5px; }
.td-entry:last-child { border-bottom: 0; }
.td-entry .ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.td-entry .ico.low { background: var(--wt-good-bg); color: var(--wt-good-fg); }
.td-entry .ico.medium { background: var(--wt-worn-bg); color: var(--wt-worn-fg); }
.td-entry .lbl { font-weight: 600; }
.td-entry .sub { color: var(--wt-muted); font-size: 12.5px; margin-top: 1px; }
.td-entry.new { animation: td-slide-in .28s ease-out; }
@keyframes td-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td-entry.new { animation: none; }
  .td-trail span { transition: none; }
}

@media (max-width: 899.98px) {
  .td-timeline {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--wt-card); border-top: 1px solid var(--wt-line);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(33, 23, 71, .14);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(calc(100% - 46px));
    transition: transform .25s ease-out;
    max-height: 70vh; overflow: hidden;
  }
  .td-timeline.open, .td-timeline.peek { transform: none; }
  .td-timeline.open .td-entries, .td-timeline.peek .td-entries { overflow-y: auto; max-height: calc(70vh - 56px); }
  .td-timeline-head { cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .td-timeline { transition: none; } }
}

@media (min-width: 900px) {
  .td-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; max-width: 900px; margin: 0 auto; }
  .td-shell { max-width: none; margin: 0; padding-bottom: 40px; }
  .td-timeline { position: sticky; top: 70px; align-self: start; background: var(--wt-card); border: 1px solid var(--wt-line); border-radius: 14px; padding: 12px 16px; margin-top: 18px; max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* Chapter 7 interstitial flip. */
.td-flip { background: var(--wt-navy); color: #fff; border-radius: 16px; padding: 22px 18px; margin: 14px 0; text-align: center; }
.td-flip .big { font-family: Montserrat, Nunito, sans-serif; font-weight: 800; font-size: 22px; }
.td-flip .sub { opacity: .85; font-size: 14px; margin-top: 4px; }

/* Finale. */
.td-receipt { border: 1px solid rgba(37, 149, 145, .4); background: var(--wt-teal-soft); border-radius: 16px; padding: 16px; margin: 14px 0; }
.td-receipt .big { font-weight: 800; color: var(--wt-navy); font-size: 18px; }
.td-receipt .stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.td-receipt .stats div { font-size: 13px; color: var(--wt-muted); }
.td-receipt .stats strong { display: block; font-size: 19px; color: var(--wt-navy); font-variant-numeric: tabular-nums; }
.td-flipline { font-size: 15.5px; font-weight: 700; color: var(--wt-navy); margin: 14px 0 10px; }
.td-cta .wt-btn { width: 100%; margin-top: 8px; }
.td-cta .small { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--wt-muted); }
.td-leadform { border-top: 1px solid var(--wt-line); margin-top: 18px; padding-top: 14px; font-size: 14px; }
.td-leadform .row { display: flex; gap: 8px; margin-top: 8px; }
.td-leadform input[type="email"] { flex: 1; border: 1px solid var(--wt-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; min-width: 0; }