/* ── Reside Smart Insights ────────────────────────────────────────────
   A card in the rail has about four seconds of a renter's attention and
   320px to use it in. Everything below serves that: it has to be read at
   a glance, it has to look like it belongs to Reside rather than to a
   notification system, and it has to leave without being closed.

   The visual language is the site's own — hairline, small caps eyebrow,
   2px corners, no fills. One thing is added: a 2px edge down the left in
   teal, amber or bronze, which is the only colour a card carries and the
   only signal of what kind of thing it is saying.

   The entrance is deliberate rather than decorative. The card wipes in
   from its own right edge and its lines follow one at a time, so it
   reads as something being set down beside the listing — not as a panel
   flying in. Nothing bounces, nothing scales, nothing pulses.

   Tokens only: no colour is defined here, so both themes and any future
   palette change carry through untouched.                             */

/* ── The rail ──
   Bottom right on desktop: the corner the contact card already owns, and
   the one place on this page where nothing is being read. Fixed, so it
   never moves the listing by a pixel. */
.si-rail {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;                       /* over the page, under the lightbox */
  width: 330px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;              /* the page underneath stays clickable */
}
.si-slot { pointer-events: auto; position: relative; }

/* ── The card ── */
.si-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left-width: 2px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 15px 34px 16px 17px;      /* room on the right for the × */
  overflow: hidden;
}
/* The one colour on the card, and it means what it means everywhere else
   on Reside: teal a good outcome, amber worth your attention, bronze a
   plain fact. */
.si-good  { border-left-color: var(--teal-border); }
.si-watch { border-left-color: var(--amber-border); }
.si-plain { border-left-color: var(--bronze); }

.si-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 10px;
}

.si-list { list-style: none; margin: 0; padding: 0; }
.si-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  padding: 3px 0;
}
.si-sentence {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 6px;
}
.si-sentence:last-of-type { margin-bottom: 0; }

/* Two markers, and they carry meaning: a tick is something the listing
   confirms, a dot something it simply states. Never a cross, never a
   warning triangle — this system doesn't grade homes. */
.si-mark { flex: none; width: 13px; height: 13px; align-self: center; }
svg.si-mark { color: var(--teal-ink); }
.si-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bronze);
  margin: 0 5px;
}

/* What the last home was — quieter than the differences it introduces. */
.si-context {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 9px;
}

/* Six vitals in two columns: one column would be a list, and a list of
   six is not a ten-second overview. */
.si-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 14px;
}
.si-cell { font-size: 13px; line-height: 1.35; color: var(--ink); }
.si-cell.is-good { color: var(--teal-ink); }

/* ── Dismiss ──
   Present but recessive: it darkens on hover and is never the first
   thing the eye lands on. Full 32px target regardless. */
.si-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--bronze);
  opacity: .55;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: opacity var(--trans-fast), color var(--trans-fast);
}
.si-close svg { width: 13px; height: 13px; }
.si-close:hover, .si-close:focus-visible { opacity: 1; color: var(--ink); }

/* ── The life bar ──
   The timer, drawn. It sits on the bottom hairline of the card, one
   pixel tall, and it is why a card can leave on its own without the
   disappearance feeling arbitrary. js/insight-rail.js owns its duration;
   the transform origin is the only thing decided here. */
.si-life {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: transparent;
  overflow: hidden;
}
.si-life i {
  display: block;
  height: 100%;
  background: var(--bronze);
  opacity: .45;
  transform-origin: left center;
  transform: scaleX(1);
}

/* ── Arrival ──
   The card wipes in from its right edge while sliding a few pixels left,
   then its lines arrive one at a time. The clip is what makes it read as
   being set down rather than flown in — the card is never seen in a
   place it isn't going to stay. */
.si-slot {
  opacity: 0;
  transform: translateX(16px);
  clip-path: inset(0 0 0 100%);
  transition:
    opacity .34s var(--expo-out),
    transform .52s var(--expo-out),
    clip-path .52s var(--expo-out);
}
.si-slot.si-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0%);
}
.si-slot.si-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}

/* The lines follow the card in, 55ms apart. --i is set per line in
   js/insights.js, so the stagger survives any number of them. */
.si-slot .si-item,
.si-slot .si-cell,
.si-slot .si-sentence,
.si-slot .si-context {
  opacity: 0;
  transform: translateY(4px);
}
.si-slot.si-in .si-item,
.si-slot.si-in .si-cell,
.si-slot.si-in .si-sentence,
.si-slot.si-in .si-context {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .4s var(--expo-out);
  transition-delay: calc(160ms + var(--i, 0) * 55ms);
}
.si-slot.si-in .si-context { transition-delay: 130ms; }

/* Motion is the one thing here that is decoration. Without it the card
   still arrives, still times out, still reads the same. */
@media (prefers-reduced-motion: reduce) {
  .si-slot,
  .si-slot.si-in .si-item,
  .si-slot.si-in .si-cell,
  .si-slot.si-in .si-sentence,
  .si-slot.si-in .si-context {
    transition: opacity .2s linear;
    transform: none;
    clip-path: none;
  }
  .si-slot { clip-path: none; }
}

/* ── Phones ──
   Full width above the sticky contact bar, which is the one thing on a
   phone that must never be covered — it is how you reach the landlord.
   --mcta-h is published by the page when that bar is showing. */
@media (max-width: 900px) {
  .si-rail {
    right: 16px; left: 16px;
    width: auto;
    bottom: calc(16px + var(--mcta-h, 0px));
  }
  .si-card { padding: 14px 32px 15px 15px; }
  .si-slot { transform: translateY(14px); clip-path: none; }
  .si-slot.si-in { transform: none; }
}

/* ── Listing freshness ──
   The one insight that is not a card. It belongs to Listing Activity,
   which was already a section about dates, and says what those dates
   mean so nobody has to subtract them. */
.si-fresh {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}