/* ============================================================
   The six live screens inside the /crm walkthrough stage.

   REPLACES the six public/img/crm/*.webp screenshots. Those were 1800x1125
   captures shown through `width:125.79%; margin-left:-25.79%` inside an
   `aspect-ratio:1431/1125; overflow:hidden` box - the negative margin cropped
   the app's own sidebar off (the tour draws its own rail), and the fixed
   aspect ratio then sliced whatever fell past the bottom. Every screen was cut
   mid-row: Stays lost Claire Dunwoody, Home lost "Recently added", Nudges lost
   Hemi Tapaeru. Re-cropping the files would only move the cut. Live screens
   have no crop to get wrong: they FLOW, so a row either fits or is not there.

   A HAND PORT, same contract as css/crm-ui.css. Source of truth is
   ~/Code/web/directstay-app (read only from here; there is no build step
   joining the two repos and there should not be):

     app/(app)/dashboard/page.tsx     StatRow, ArrivingSoonCard,
                                      NeedsAttentionCard, RecentlyAddedCard
     app/(app)/guests/page.tsx        GuestsClient table
     app/(app)/stays/page.tsx         StaysBoard ledger
     app/(app)/nudges/page.tsx        NudgesBoard "Due now"
     app/(app)/automations/page.tsx   AutomationsList + the four tabs
     app/tokens.css                   every value below

   Guest data is the app's own preview fixture. Never real guest data.

   ---- SIZING ----
   `.crm-tour__screens` is a size container. Every screen sets its own
   font-size from the container width, and everything inside is expressed in
   em, so 1em == 16px of the source design at every viewport. That is what
   lets these scale exactly like the images did while still reflowing rather
   than cropping. Change the 1431 and you change the whole port's scale.

   ---- PALETTE ----
   Deliberately the DARK app, not the light one. The tour's chrome and rail
   (css/crm-tour.css) are #131118 / #17151d; light screens inside a dark shell
   read as a screenshot pasted into a window rather than as the window's own
   content. css/crm-ui.css ports the LIGHT app for the homepage spotlight -
   the two are different surfaces on purpose, not a drift.
   ============================================================ */

.crm-tour__screens{
  container-type: inline-size;
  container-name: crmscr;
}

.crm-scr{
  /* 16 source px / 1431 source px of stage width = 1.118cqw */
  font-size: 1.118cqw;

  /* app/tokens.css, dark surface */
  --s-bg: #131118;
  --s-panel: #1a1822;
  --s-panel-2: #201d2a;
  --s-line: rgb(243 243 245 / .07);
  --s-line-2: rgb(243 243 245 / .11);
  --s-ink: #f3f3f5;
  --s-muted: rgb(243 243 245 / .52);
  --s-dim: rgb(243 243 245 / .34);
  --s-accent: #7c3aed;
  --s-accent-soft: rgb(124 58 237 / .16);
  --s-accent-line: rgb(124 58 237 / .38);
  --s-accent-text: #b794f6;
  --s-good: #4ade80;
  --s-bad: #f87171;
  --s-radius: 0.75em;

  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5em 1.5em 0;
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--sans, inherit);
  line-height: 1.35;
  overflow: hidden;
}

/* ---------------- topbar ---------------- */

.crm-scr__top{
  flex: none;
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1.6em;
}
.crm-scr__title{
  margin: 0;
  font-size: 1.55em;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.crm-scr__search{
  display: flex;
  align-items: center;
  gap: .55em;
  min-width: 0;
  flex: 0 1 24em;
  height: 2.4em;
  padding: 0 1em;
  border-radius: 999px;
  background: var(--s-panel);
  color: var(--s-dim);
  font-size: .82em;
  white-space: nowrap;
  overflow: hidden;
}
.crm-scr__search svg{flex: none; width: 1.05em; height: 1.05em}
.crm-scr__top-actions{margin-left: auto; display: flex; gap: .6em; flex: none}

.crm-scr__btn{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: 2.4em;
  padding: 0 1.1em;
  border-radius: 999px;
  background: var(--s-panel);
  color: var(--s-ink);
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
}
.crm-scr__btn--accent{background: var(--s-accent); color: #fff}
.crm-scr__btn--signal{background: #f5ff63; color: #19171c}

/* ---------------- shared table ---------------- */

.crm-scr__table{
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--s-radius);
  background: var(--s-panel);
  overflow: hidden;
}
.crm-scr__tr{
  display: grid;
  align-items: center;
  gap: 1em;
  padding: 0 1.2em;
  height: 3.4em;
  border-bottom: 1px solid var(--s-line);
}
.crm-scr__tr:last-child{border-bottom: 0}
.crm-scr__tr--head{
  height: 2.9em;
  color: var(--s-dim);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-scr__tr--head .crm-scr__cell{color: inherit}

.crm-scr__cell{
  min-width: 0;
  font-size: .84em;
  color: var(--s-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-scr__cell--strong{color: var(--s-ink); font-weight: 650}
.crm-scr__cell--num{font-variant-numeric: tabular-nums}

.crm-scr__who{display: flex; align-items: center; gap: .7em; min-width: 0}
.crm-scr__av{
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--s-accent);
  color: #fff;
  font-size: .62em;
  font-weight: 750;
  letter-spacing: .02em;
}
.crm-scr__who-text{min-width: 0}
.crm-scr__who-name{
  display: block;
  color: var(--s-ink);
  font-size: .84em;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-scr__who-sub{
  display: block;
  margin-top: .1em;
  color: var(--s-dim);
  font-size: .72em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-scr__tag{
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .6em;
  border-radius: 999px;
  border: 1px solid var(--s-line-2);
  font-size: .72em;
  font-weight: 650;
  color: var(--s-muted);
}
.crm-scr__tag--none{border-color: transparent; color: var(--s-dim)}
.crm-scr__tag--warn{
  border-color: rgb(248 113 113 / .38);
  background: rgb(248 113 113 / .12);
  color: var(--s-bad);
}
.crm-scr__tag--accent{
  border-color: var(--s-accent-line);
  background: var(--s-accent-soft);
  color: var(--s-accent-text);
}
.crm-scr__tag--good{
  border-color: rgb(74 222 128 / .34);
  background: rgb(74 222 128 / .1);
  color: var(--s-good);
}

/* ============================================================
   01 HOME - the inbox
   ============================================================ */

.crm-scr--home .crm-scr__split{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 21em minmax(0, 1fr);
  gap: 1em;
}
.crm-scr__panel{
  min-height: 0;
  border-radius: var(--s-radius);
  background: var(--s-panel);
  overflow: hidden;
}
.crm-scr__panel-head{
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 1em 1.1em .8em;
}
.crm-scr__panel-head h4{
  margin: 0;
  font-size: .92em;
  font-weight: 700;
}
.crm-scr__panel-head span{
  margin-left: auto;
  color: var(--s-accent-text);
  font-size: .76em;
  font-weight: 650;
}

.crm-scr__chan{display: flex; gap: .5em; padding: 0 1.1em .9em}
.crm-scr__chan i{
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: .55em;
  background: var(--s-panel-2);
}
.crm-scr__chan svg{width: 1.15em; height: 1.15em}

.crm-scr__conv{
  display: flex;
  gap: .7em;
  padding: .75em 1.1em;
  border-top: 1px solid var(--s-line);
}
.crm-scr__conv-mark{flex: none; width: 1.5em; height: 1.5em; margin-top: .1em}
.crm-scr__conv-mark svg{width: 100%; height: 100%}
.crm-scr__conv-body{min-width: 0; flex: 1 1 auto}
.crm-scr__conv-top{display: flex; align-items: baseline; gap: .6em}
.crm-scr__conv-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: .84em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-scr__conv-time{flex: none; color: var(--s-dim); font-size: .72em}
.crm-scr__conv-text{
  margin: .25em 0 .4em;
  color: var(--s-muted);
  font-size: .78em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-scr__conv-foot{display: flex; align-items: center; gap: .5em}
.crm-scr__conv-chan{color: var(--s-dim); font-size: .7em; font-weight: 650}

/* the assistant pane */
.crm-scr__assist{
  display: flex;
  flex-direction: column;
  padding: 1.2em;
  gap: .9em;
}
.crm-scr__assist-msg{display: flex; gap: .75em}
.crm-scr__assist-badge{
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  overflow: hidden;
  background: var(--s-accent);
}
.crm-scr__assist-badge img{width: 100%; height: 100%; object-fit: cover}
.crm-scr__assist-text{margin: 0; font-size: .84em; line-height: 1.5; color: var(--s-ink)}
.crm-scr__assist-text + .crm-scr__assist-text{margin-top: .7em}
.crm-scr__assist-text b{font-weight: 750}

.crm-scr__chips{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6em;
  margin-top: .3em;
}
.crm-scr__chip{
  padding: .65em .9em;
  border-radius: .55em;
  background: var(--s-panel-2);
  color: var(--s-muted);
  font-size: .78em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-scr__composer{
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .7em;
  height: 3em;
  padding: 0 1em;
  border-radius: 999px;
  border: 1px solid var(--s-accent-line);
  background: var(--s-panel-2);
  color: var(--s-dim);
  font-size: .84em;
}
.crm-scr__composer-text{flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden}
.crm-scr__caret{
  display: inline-block;
  width: .08em;
  height: 1.05em;
  margin-left: .05em;
  vertical-align: -.18em;
  background: var(--s-accent-text);
}
.crm-scr__composer-send{
  flex: none;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--s-panel);
  color: var(--s-muted);
}
.crm-scr__composer-send svg{width: 1em; height: 1em}
.crm-scr__note{
  margin: .55em 0 0;
  text-align: center;
  color: var(--s-dim);
  font-size: .7em;
}

/* ============================================================
   02 DASHBOARD - the stat row and the two columns
   ============================================================ */

.crm-scr__stats{
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9em;
  margin-bottom: 1em;
}
.crm-scr__stat{
  padding: 1em 1.1em 1.1em;
  border-radius: var(--s-radius);
  border: 1px solid transparent;
  background: var(--s-panel);
}
.crm-scr__stat.is-focus{
  border-color: var(--s-accent-line);
  background: linear-gradient(var(--s-accent-soft), var(--s-accent-soft)), var(--s-panel);
}
.crm-scr__stat-label{
  display: block;
  color: var(--s-dim);
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-scr__stat-value{
  display: block;
  margin: .35em 0 .2em;
  font-size: 1.85em;
  font-weight: 750;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.crm-scr__stat-foot{display: block; font-size: .72em; font-weight: 650; color: var(--s-good)}
.crm-scr__stat-foot--warn{color: var(--s-bad)}

.crm-scr__cols{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: .9em;
}
.crm-scr__card{
  min-height: 0;
  border-radius: var(--s-radius);
  background: var(--s-panel);
  overflow: hidden;
}
.crm-scr__card-head{
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding: 1em 1.1em .7em;
}
.crm-scr__card-head h4{margin: 0; font-size: 1em; font-weight: 700}
.crm-scr__card-head span{margin-left: auto; color: var(--s-dim); font-size: .74em}

.crm-scr__arrival{
  display: flex;
  align-items: baseline;
  gap: .8em;
  padding: .6em 1.1em;
  border-top: 1px solid var(--s-line);
}
.crm-scr__arrival-who{flex: 1 1 auto; min-width: 0}
.crm-scr__arrival-name{display: block; font-size: .84em; font-weight: 650}
.crm-scr__arrival-sub{display: block; margin-top: .1em; color: var(--s-dim); font-size: .72em}
.crm-scr__arrival-when{flex: none; color: var(--s-muted); font-size: .78em; font-weight: 650}

.crm-scr__attn{
  margin: .8em 1.1em;
  padding: .9em 1em;
  border-radius: .65em;
  background: var(--s-panel-2);
}
.crm-scr__attn-head{display: flex; align-items: center; gap: .7em}
.crm-scr__attn-text{
  margin: .6em 0 .8em;
  color: var(--s-muted);
  font-size: .78em;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-scr__attn-acts{display: flex; gap: .5em}

/* ============================================================
   03 GUESTS / 04 STAYS - the two ledgers
   ============================================================ */

.crm-scr__filters{
  flex: none;
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1em;
}
.crm-scr__filter{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 2.3em;
  padding: 0 .9em;
  border-radius: 999px;
  border: 1px solid var(--s-line-2);
  color: var(--s-muted);
  font-size: .8em;
  font-weight: 650;
  white-space: nowrap;
}
.crm-scr__filter-count{margin-left: auto; color: var(--s-dim); font-size: .78em}

.crm-scr--guests .crm-scr__tr{
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1fr) 3.2em minmax(0, .95fr) minmax(0, 1.05fr) 5.6em;
}
.crm-scr--stays .crm-scr__tr{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.15fr) 4.4em 4.6em 4.6em minmax(0, .85fr) 4.8em;
}
.crm-scr--nudges .crm-scr__tr{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.25fr) 4.6em 5.4em;
}

/* ============================================================
   06 AUTOMATIONS - tabs and the two cards
   ============================================================ */

.crm-scr__tabs{
  flex: none;
  display: flex;
  gap: 1.6em;
  margin-bottom: 1.2em;
  border-bottom: 1px solid var(--s-line);
}
.crm-scr__tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding-bottom: .7em;
  color: var(--s-dim);
  font-size: .86em;
  font-weight: 650;
}
.crm-scr__tab.is-active{color: var(--s-accent-text)}
.crm-scr__tab.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--s-accent);
}

.crm-scr__autos{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 1em;
}
.crm-scr__auto{
  padding: 1.2em;
  border-radius: var(--s-radius);
  border: 1px solid var(--s-line-2);
  background: var(--s-panel);
}
.crm-scr__auto--off{border-style: dashed; opacity: .78}
.crm-scr__auto-head{display: flex; align-items: center; gap: .8em}
.crm-scr__auto-head h4{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05em;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.crm-scr__switch{
  flex: none;
  width: 2.6em;
  height: 1.45em;
  border-radius: 999px;
  background: var(--s-panel-2);
  position: relative;
}
.crm-scr__switch::after{
  content: "";
  position: absolute;
  top: .2em;
  left: .2em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: var(--s-dim);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.crm-scr__switch.is-on{background: var(--s-accent)}
.crm-scr__switch.is-on::after{background: #fff; transform: translateX(1.15em)}
.crm-scr__auto-state{flex: none; color: var(--s-muted); font-size: .8em; font-weight: 650}

.crm-scr__auto-when{
  display: flex;
  align-items: center;
  gap: .45em;
  margin: .8em 0 .5em;
  color: var(--s-muted);
  font-size: .8em;
}
.crm-scr__auto-desc{
  margin: 0 0 .9em;
  color: var(--s-muted);
  font-size: .82em;
  line-height: 1.45;
}
.crm-scr__auto-chips{display: flex; align-items: center; gap: .5em; flex-wrap: wrap}

.crm-scr__auto-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8em;
  margin: 1em 0 0;
  padding-top: .9em;
  border-top: 1px solid var(--s-line);
}
.crm-scr__auto-stat span{
  display: block;
  color: var(--s-dim);
  font-size: .66em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-scr__auto-stat b{
  display: block;
  margin-top: .2em;
  font-size: 1.25em;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.crm-scr__auto-stat b.is-bad{color: var(--s-bad)}
.crm-scr__auto-stat b.is-accent{color: var(--s-accent-text)}

/* The run line: one bar that advances along the automation. It is the only
   thing on this screen that moves, and it moves because a run is happening. */
.crm-scr__run{
  position: relative;
  height: 2px;
  margin-top: 1em;
  border-radius: 2px;
  background: var(--s-line-2);
  overflow: hidden;
}
.crm-scr__run i{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--s-accent);
}

/* ---------------- motion hooks ----------------
   Everything the driver writes to. Each is a plain custom property or a class,
   never an inline transition: the driver is the clock, and a CSS transition on
   top of a scroll-driven value is two clocks fighting. */

.crm-scr [data-scr-fade]{opacity: 0}
.crm-scr [data-scr-wipe]{clip-path: inset(0 0 100% 0)}

/* ---------------- fallback: no JS / reduced motion ----------------
   The markup IS the end state. Nothing here is half-typed or half-arrived, so
   with no driver every screen simply reads as a finished screen. */

.crm-tour:not(.crm-tour--live) .crm-scr [data-scr-fade],
.crm-tour:not(.crm-tour--live) .crm-scr [data-scr-wipe]{opacity: 1; clip-path: none}

@media (prefers-reduced-motion: reduce){
  .crm-scr [data-scr-fade]{opacity: 1}
  .crm-scr [data-scr-wipe]{clip-path: none}
  .crm-scr__caret{display: none}
}

/* ---------------- no-JS stacked fallback ----------------
   Without the driver the six screens stack, so each needs a real height rather
   than the absolute fill it gets when live. */

.crm-tour:not(.crm-tour--live) .crm-scr{
  aspect-ratio: 1431 / 1125;
  height: auto;
}

/* ---------------- narrow ----------------
   Under 1000px the stage drops below the copy and gets narrower; the two-column
   screens collapse to their primary column rather than shrinking type past
   legibility. Same rule the app itself uses at its own breakpoint. */

@container crmscr (max-width: 620px){
  .crm-scr{padding: 1.1em 1.1em 0}
  .crm-scr--home .crm-scr__split{grid-template-columns: minmax(0, 1fr)}
  .crm-scr--home .crm-scr__panel--convos{display: none}
  .crm-scr__stats{grid-template-columns: 1fr 1fr}
  .crm-scr__cols{grid-template-columns: minmax(0, 1fr)}
  .crm-scr__cols .crm-scr__card:last-child{display: none}
  .crm-scr__autos{grid-template-columns: minmax(0, 1fr)}
  .crm-scr__autos .crm-scr__auto:last-child{display: none}
  .crm-scr--guests .crm-scr__tr{grid-template-columns: minmax(0, 1.3fr) 3.2em minmax(0, 1fr) 5.6em}
  .crm-scr--guests .crm-scr__cell--hide,
  .crm-scr--stays .crm-scr__cell--hide,
  .crm-scr--nudges .crm-scr__cell--hide{display: none}
  .crm-scr--stays .crm-scr__tr{grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 4.6em 4.8em}
  .crm-scr--nudges .crm-scr__tr{grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 5.4em}
}