/* showcase.css — one shop's screens, in that shop's design standard.
   Tokens lifted from Hustler's Mansion's ivory theme rather than approximated:
   the whole claim is that the app is wearing someone else's system, so the
   values have to actually be theirs. */

.sc {
  --hm-bg: #F4F1EA;
  --hm-surf: #FFFFFF;
  --hm-surf2: #FAF6EC;
  --hm-text: #1A1A1A;
  --hm-mute: #6B675E;
  --hm-faint: #A29E90;
  --hm-accent: #856011;
  --hm-accent-weak: #F2E8CF;
  --hm-green: #157A40;
  --hm-green-weak: #E6F6EC;
  --hm-orange: #8A5C00;
  --hm-orange-weak: #F7EBD3;
  --hm-line: #E8E2D4;
  --hm-shadow: 0 1px 2px rgba(60,50,20,.06), 0 8px 28px rgba(60,50,20,.07);
  --hm-r: 14px;
}

.sc-stage {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
}
@media (max-width: 899px) {
  .sc-stage { min-height: 440px; margin-top: 8px; }
}

.sc-panel {
  position: absolute;
  width: 268px;
  border-radius: 22px;
  background: var(--hm-bg);
  border: 1px solid var(--hm-line);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 50px -20px rgba(60,50,20,.28), 0 2px 6px rgba(60,50,20,.06);
  /* transform / opacity / z-index are set per panel in showcase.js — see SCATTER */
  transition:
    transform 720ms cubic-bezier(.22,.61,.36,1),
    opacity 520ms ease,
    box-shadow 520ms ease;
}
.sc-panel.front { box-shadow: 0 34px 70px -22px rgba(60,50,20,.38), 0 0 0 1px rgba(133,96,17,.22); }
@media (max-width: 899px) { .sc-panel { width: min(268px, 78vw); } }

.sc-screen {
  position: relative;
  height: 372px;
  overflow: hidden;            /* the Money body travels inside this window */
  color: var(--hm-text);
  font-family: var(--font-ui, system-ui), sans-serif;
}
@media (max-width: 899px) { .sc-screen { height: 340px; } }

.sc-tag {
  display: block;
  padding: 8px 15px 10px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hm-faint);
  border-top: 1px solid var(--hm-line);
  background: var(--hm-surf2);
}
.sc-panel.front .sc-tag { color: var(--hm-accent); }

/* ── the app's own top bar ────────────────────────────────────────────── */
.sc-top {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  background: var(--hm-surf);
  border-bottom: 1px solid var(--hm-line);
  position: relative; z-index: 2;
}
.sc-ham {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  background: var(--hm-accent-weak); position: relative;
}
.sc-ham::before, .sc-ham::after {
  content: ''; position: absolute; left: 5px; right: 5px; height: 1.5px;
  border-radius: 1px; background: var(--hm-accent);
}
.sc-ham::before { top: 8px; } .sc-ham::after { top: 12.5px; }
.sc-wm {
  font-family: var(--font-display, Georgia), serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.sc-tabname { margin-left: auto; font-size: 10.5px; color: var(--hm-mute); }

/* The body is what moves when a screen has more to show than fits. */
.sc-body {
  padding: 13px 13px 16px;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.sc-h {
  margin: 0 0 9px;
  font-family: var(--font-display, Georgia), serif;
  font-size: 19px; font-weight: 700; text-align: center; letter-spacing: -.01em;
}
.sc-pills { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.sc-pills span {
  font-size: 9px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  color: var(--hm-mute); background: var(--hm-surf); border: 1px solid var(--hm-line);
  white-space: nowrap;
}
.sc-pills span.on { background: var(--hm-accent); color: #fff; border-color: transparent; }
.sc-lede { margin: 0 0 10px; text-align: center; font-size: 9.5px; line-height: 1.5; color: var(--hm-mute); }

/* ── cards ───────────────────────────────────────────────────────────── */
.sc-card {
  background: var(--hm-surf);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r);
  box-shadow: var(--hm-shadow);
  padding: 11px;
  margin-bottom: 8px;
  text-align: center;
}
.sc-hero { padding: 15px 11px 13px; background: linear-gradient(180deg, #fff, var(--hm-surf2)); }
.sc-hero .sc-fig { font-size: 31px; }
.sc-fig {
  display: block;
  font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sc-card span { display: block; font-size: 9.5px; color: var(--hm-mute); margin-top: 3px; }
.sc-card em { display: block; font-style: normal; font-size: 9px; color: var(--hm-faint); margin-top: 2px; }
.sc-warn .sc-fig { color: var(--hm-orange); }

.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-grid .sc-card { margin-bottom: 8px; }

.sc-secth {
  text-align: center; font-family: var(--font-display, Georgia), serif;
  font-size: 12.5px; font-weight: 700; margin: 4px 0 8px;
}

/* ── deposits — what actually landed ─────────────────────────────────── */
.sc-dep {
  background: var(--hm-surf); border: 1px solid var(--hm-line);
  border-radius: var(--hm-r); box-shadow: var(--hm-shadow);
  padding: 9px 11px; margin-bottom: 7px; text-align: left;
  opacity: 0; transform: translateY(8px);
}
.sc-depv { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-land {
  font-size: 8.5px; font-weight: 700; padding: 2.5px 7px; border-radius: 999px;
  background: var(--hm-green-weak); color: var(--hm-green);
}
.sc-depm { font-size: 8.5px; color: var(--hm-mute); margin-top: 3px; }

/* ── rows (schedule, clients) ────────────────────────────────────────── */
.sc-row {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 10px;
  opacity: 0; transform: translateY(8px);
}
.sc-time { font-size: 9.5px; color: var(--hm-mute); width: 48px; flex: none; font-variant-numeric: tabular-nums; }
.sc-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sc-who b { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-who em { font-style: normal; font-size: 9px; color: var(--hm-mute); }
.sc-pill {
  margin-left: auto; font-size: 8.5px; font-weight: 700;
  padding: 2.5px 7px; border-radius: 999px; white-space: nowrap;
}
.sc-pill.ok   { background: var(--hm-green-weak); color: var(--hm-green); }
.sc-pill.owe  { background: var(--hm-orange-weak); color: var(--hm-orange); }
.sc-pill.next { background: var(--hm-accent-weak); color: var(--hm-accent); }
.sc-cuts { margin-left: auto; font-size: 9.5px; color: var(--hm-mute); font-variant-numeric: tabular-nums; }
.sc-av {
  width: 25px; height: 25px; flex: none; border-radius: 50%;
  background: var(--hm-accent-weak); color: var(--hm-accent);
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}

/* ── goal bar ────────────────────────────────────────────────────────── */
.sc-bar { text-align: left; }
.sc-barhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.sc-barhead span { font-size: 9.5px; color: var(--hm-mute); margin: 0; }
.sc-barhead .sc-fig { font-size: 15px; }
.sc-track { display: block; height: 6px; border-radius: 3px; background: var(--hm-accent-weak); overflow: hidden; }
.sc-fill {
  display: block; height: 100%; width: var(--w); border-radius: 3px;
  background: var(--hm-accent);
  transform: scaleX(0); transform-origin: left center;
}
.sc-fill.go { animation: scGrow .8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes scGrow { to { transform: scaleX(1); } }

/* ── the booking page: the one screen a CLIENT sees, so it stays dark ── */
.sc-panel.dark { background: #12120E; border-color: #2E2C24; }
.sc-bk { color: #F4F1E8; padding: 15px 14px; }
.sc-bkhead { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sc-mono { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.sc-bkhead b { display: block; font-family: var(--font-display, Georgia), serif; font-size: 14px; font-weight: 700; }
.sc-bkhead span { font-size: 9.5px; color: #A9A292; }
.sc-bknote {
  margin: 0 0 12px; padding-left: 9px; border-left: 2px solid #C6993E;
  font-size: 10px; line-height: 1.5; color: #A9A292;
}
.sc-bkkick { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #A9A292; margin-bottom: 7px; }
.sc-svc {
  display: flex; align-items: center; justify-content: space-between;
  background: #1D1D17; border: 1px solid #2E2C24; border-radius: 11px;
  padding: 9px 11px; margin-bottom: 6px;
  opacity: 0; transform: translateY(8px);
}
.sc-svc b { display: block; font-size: 11.5px; font-weight: 600; }
.sc-svc em { font-style: normal; font-size: 9.5px; color: #A9A292; }
.sc-price { font-size: 12.5px; font-weight: 700; color: #C6993E; font-variant-numeric: tabular-nums; }
.sc-panel.dark .sc-tag { background: #1D1D17; border-top-color: #2E2C24; color: #A9A292; }
.sc-panel.dark.front .sc-tag { color: #C6993E; }

/* Each row arriving a beat after the one above it. */
.sc-row.in, .sc-svc.in, .sc-dep.in {
  animation: scIn .44s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes scIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sc-panel, .sc-body { transition: none !important; }
  .sc-row, .sc-svc, .sc-dep { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sc-fill { transform: scaleX(1) !important; animation: none !important; }
}