/* 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;
}

/* The stack floats on its own light. The halo lives on the STAGE rather than
   on each panel, so the pile reads as one object catching light instead of
   five things each with their own shadow. */
.sc-stage::before {
  content: '';
  position: absolute;
  inset: 6% 4% 10%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(133,96,17,.16), rgba(133,96,17,.05) 60%, transparent 78%),
    radial-gradient(closest-side, rgba(46,88,148,.08), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.sc-panel { z-index: 1; }

.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,.34),
              0 0 0 1px rgba(133,96,17,.20),
              0 0 40px -6px 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; }
}