/* FirstCall — the owner's app, embedded on /firstcall.
   One navigable iPhone frame driven by firstcall.js. Scoped under .fc-embed.

   The design handoff specifies Nocturne blurple; on scre.me the same
   components wear the site's red, exactly as the console and Tip Ledger do
   — components read token names, the theme re-tunes them. */

.fc-embed {
  --app-bg: oklch(0.13 0.018 20);
  --card: oklch(0.19 0.024 20);
  --card-2: oklch(0.23 0.028 20);
  --sunken: oklch(0.16 0.02 20);
  --tint: color-mix(in srgb, oklch(0.62 0.16 22) 15%, oklch(0.17 0.022 20));
  --line: color-mix(in srgb, #ede9e9 13%, transparent);
  --line-2: color-mix(in srgb, #ede9e9 7%, transparent);
  --accent: oklch(0.62 0.16 22);
  --accent-3: oklch(0.80 0.08 22);
  --accent-2: oklch(0.88 0.05 22);
  --text: oklch(0.94 0.008 20);
  --dim: oklch(0.72 0.02 20);
  --dim-2: oklch(0.60 0.02 20);
  --dim-3: oklch(0.48 0.02 20);
  --good: oklch(0.72 0.09 155);
  --warn: oklch(0.80 0.11 75);
  --bad: oklch(0.66 0.16 25);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
}

/* — stage — */
.fc-stage { display: flex; gap: 56px; align-items: flex-start; padding: 8px 0 0; }
.fc-aside { width: 340px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.fc-aside h3 { font-family: 'Unbounded', sans-serif; font-size: 21px; font-weight: 500; margin: 0; }
.fc-aside p { font-size: 14px; line-height: 1.6; color: var(--dim); margin: 0; }
.fc-aside .fc-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-3); }
.fc-aside ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fc-aside li { font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.fc-aside li b { color: var(--text); font-weight: 500; }
.fc-hr { height: 1px; background: linear-gradient(to right, var(--line), transparent); }

@media (max-width: 1080px) {
  .fc-stage { flex-direction: column; align-items: center; gap: 40px; }
  .fc-aside { width: 100%; max-width: 600px; }
}

/* — iPhone bezel (presentation only) — */
.fc-phone {
  width: 402px; height: 874px; flex: none; position: relative; overflow: hidden;
  border-radius: 48px; background: #000;
  box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  -webkit-font-smoothing: antialiased;
}
.fc-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 50;
}
.fc-status { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; padding: 21px 26px 19px; box-sizing: border-box; }
.fc-status .t { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 1.5px;
  font-family: -apple-system, 'SF Pro', system-ui, sans-serif; font-weight: 590; font-size: 17px; line-height: 22px; color: #fff; }
.fc-status .r { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 1px; }
.fc-home { position: absolute; bottom: 0; left: 0; right: 0; z-index: 60; height: 34px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; pointer-events: none; }
.fc-home span { width: 139px; height: 5px; border-radius: 100px; background: rgba(255,255,255,.7); }

.fc-body { height: 100%; background: var(--app-bg); display: flex; flex-direction: column; overflow: hidden; }
.fc-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fc-scroll {
  flex: 1; overflow-y: auto; min-height: 0; padding: 2px 20px 26px;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: none; animation: fcRise .2s ease;
}
.fc-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* A flex column that scrolls will happily squash its children to fit.
   Every card must keep its natural height and let the container scroll. */
.fc-scroll > * { flex: none; }
@keyframes fcRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-scroll { animation: none; } }

/* — header — */
.fc-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 62px 20px 10px; }
.fc-venue { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: left; }
.fc-venue-g { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim-3); }
.fc-venue-n { font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--text); }
.fc-venue svg { color: var(--dim-2); }
.fc-status-r { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim-2); white-space: nowrap; }

.fc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dim-3); }
.fc-dot.live { background: var(--accent); animation: pulseDot 2s ease-in-out infinite; }
.fc-dot.off { background: var(--dim-3); }
@media (prefers-reduced-motion: reduce) { .fc-dot.live { animation: none; } }

.fc-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-2);
}
.fc-avatar.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 9.5px; }

/* — type — */
.fc-h1 { font-family: 'Unbounded', sans-serif; font-size: 25px; line-height: 1.12; font-weight: 500; margin: 2px 0 6px; }
.fc-h2 { font-family: 'Unbounded', sans-serif; font-size: 21px; line-height: 1.15; font-weight: 500; margin: 4px 0 2px; }
.fc-eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-3); margin: 12px 0 1px; }
.fc-lede { font-size: 13px; line-height: 1.55; color: var(--dim-2); margin: 0 0 6px; }
.fc-note { border-radius: 11px; padding: 12px 13px; background: var(--sunken); font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.fc-note b { color: var(--text); font-weight: 500; }
.fc-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--accent-3); }
.fc-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fc-num { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--dim); white-space: nowrap; }

/* — cards — */
.fc-card {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--card);
  padding: 13px 14px; color: inherit; font-family: inherit;
}
.fc-press { cursor: pointer; transition: background .12s; }
.fc-press:hover { background: var(--card-2); }
.fc-card.sel { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--tint); }
.fc-card-t { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.fc-card-s { font-size: 11.5px; color: var(--dim-2); margin-top: 2px; line-height: 1.45; }
.fc-card-b { font-size: 12.5px; color: var(--dim); margin-top: 7px; line-height: 1.5; }
.fc-card-m { font-size: 11px; color: var(--accent-3); margin-top: 8px; }
.fc-more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-more-chev { color: var(--dim-3); transform: rotate(-90deg); display: inline-flex; }

.fc-vrow { display: flex; align-items: center; gap: 10px; }
.fc-vrow-t { flex: 1; min-width: 0; }
.fc-vstats { display: flex; gap: 18px; margin-top: 11px; }
.fc-vstats div { display: flex; flex-direction: column; gap: 1px; }
.fc-vstats b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fc-vstats b.warnv { color: var(--warn); }
.fc-vstats span { font-size: 10px; color: var(--dim-2); }

/* — tiles — */
.fc-tiles, .fc-detail-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fc-tile { border-radius: 10px; background: var(--card); padding: 11px 12px; }
.fc-tile-v { font-size: 19px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fc-tile-v.accent { color: var(--accent-3); }
.fc-tile-l { font-size: 10px; color: var(--dim-2); margin-top: 2px; }
.fc-hero-stats { display: flex; gap: 20px; }
.fc-hero-stats .fc-tile { background: none; padding: 0; }

/* — hero, per room —
   The headline image each room carries. Drawn in CSS rather than shipped as
   photographs: no request, no weight, and it survives the dark ground the
   way a room shot dark is meant to. Replaced by the venue's own upload. */
.fc-hero { border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: linear-gradient(150deg, var(--tint), var(--sunken) 62%); }
.fc-hero-art { height: 140px; position: relative; }
.fc-hero-body { padding: 13px 14px 14px; }
.fc-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fc-hero-live { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.fc-brand-hero { height: 112px; border-radius: 12px; overflow: hidden; background: var(--card); }
.fc-brand-hero .fc-hero-art { height: 100%; }

/* The Foundry — a leather bar: cans over the rail, bottles behind, stools. */
.fc-hero-v1 .fc-hero-art {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20402%20140%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M92%2012v20M201%2012v20M310%2012v20%22%20stroke-width=%221%22%20opacity=%22.3%22/%3E%3Cpath%20d=%22M80%2032h24l-5%2010H85zM189%2032h24l-5%2010h-14zM298%2032h24l-5%2010h-14z%22%20stroke-width=%221.2%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M28%2060h346%22%20stroke-width=%221%22%20opacity=%22.22%22/%3E%3Cpath%20d=%22M20%20104h362%22%20stroke-width=%221.5%22%20opacity=%22.5%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20opacity=%22.14%22%3E%3Cpath%20d=%22M92%2042%2062%20104h60z%22/%3E%3Cpath%20d=%22M201%2042l-30%2062h60z%22/%3E%3Cpath%20d=%22M310%2042l-30%2062h60z%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20opacity=%22.17%22%3E%3Crect%20x=%2244%22%20y=%2242%22%20width=%226%22%20height=%2218%22%20rx=%222.5%22/%3E%3Crect%20x=%2256%22%20y=%2237%22%20width=%227%22%20height=%2223%22%20rx=%223%22/%3E%3Crect%20x=%2269%22%20y=%2245%22%20width=%226%22%20height=%2215%22%20rx=%222.5%22/%3E%3Crect%20x=%22128%22%20y=%2240%22%20width=%227%22%20height=%2220%22%20rx=%223%22/%3E%3Crect%20x=%22141%22%20y=%2246%22%20width=%226%22%20height=%2214%22%20rx=%222.5%22/%3E%3Crect%20x=%22152%22%20y=%2236%22%20width=%227%22%20height=%2224%22%20rx=%223%22/%3E%3Crect%20x=%22236%22%20y=%2244%22%20width=%226%22%20height=%2216%22%20rx=%222.5%22/%3E%3Crect%20x=%22247%22%20y=%2238%22%20width=%227%22%20height=%2222%22%20rx=%223%22/%3E%3Crect%20x=%22260%22%20y=%2246%22%20width=%226%22%20height=%2214%22%20rx=%222.5%22/%3E%3Crect%20x=%22330%22%20y=%2239%22%20width=%227%22%20height=%2221%22%20rx=%223%22/%3E%3Crect%20x=%22343%22%20y=%2245%22%20width=%226%22%20height=%2215%22%20rx=%222.5%22/%3E%3Crect%20x=%22354%22%20y=%2242%22%20width=%227%22%20height=%2218%22%20rx=%223%22/%3E%3C/g%3E%3Cg%20fill=%22%230a0608%22%20opacity=%22.9%22%3E%3Cpath%20d=%22M52%20104v-9a9%209%200%200%201%2018%200v9zM118%20104v-9a9%209%200%200%201%2018%200v9zM184%20104v-9a9%209%200%200%201%2018%200v9zM250%20104v-9a9%209%200%200%201%2018%200v9zM316%20104v-9a9%209%200%200%201%2018%200v9z%22/%3E%3Crect%20x=%220%22%20y=%22106%22%20width=%22402%22%20height=%2234%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(36% 106% at 23% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
    radial-gradient(36% 106% at 50% 0%, color-mix(in srgb, var(--accent-3) 30%, transparent), transparent 60%),
    radial-gradient(36% 106% at 77% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%),
    linear-gradient(180deg, oklch(0.17 0.03 20), oklch(0.10 0.014 20));
  background-size: cover;
}
/* Velvet Rail — the backbar lit from behind, bottles in rhythm. */
.fc-hero-v2 .fc-hero-art {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20402%20140%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M30%2044h342M30%2078h342%22%20stroke-width=%221%22%20opacity=%22.3%22/%3E%3Cpath%20d=%22M124%2010v12M278%2010v12%22%20stroke-width=%221%22%20opacity=%22.32%22/%3E%3Cpath%20d=%22M113%2022h22l-6%2011h-10zM267%2022h22l-6%2011h-10z%22%20stroke-width=%221.1%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M14%20108h374%22%20stroke-width=%221.5%22%20opacity=%22.5%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20opacity=%22.2%22%3E%3Crect%20x=%2242%22%20y=%2224%22%20width=%227%22%20height=%2220%22%20rx=%223%22/%3E%3Crect%20x=%2256%22%20y=%2218%22%20width=%228%22%20height=%2226%22%20rx=%223.5%22/%3E%3Crect%20x=%2272%22%20y=%2228%22%20width=%227%22%20height=%2216%22%20rx=%223%22/%3E%3Crect%20x=%2287%22%20y=%2221%22%20width=%228%22%20height=%2223%22%20rx=%223.5%22/%3E%3Crect%20x=%22147%22%20y=%2226%22%20width=%227%22%20height=%2218%22%20rx=%223%22/%3E%3Crect%20x=%22162%22%20y=%2219%22%20width=%228%22%20height=%2225%22%20rx=%223.5%22/%3E%3Crect%20x=%22178%22%20y=%2229%22%20width=%227%22%20height=%2215%22%20rx=%223%22/%3E%3Crect%20x=%22193%22%20y=%2222%22%20width=%228%22%20height=%2222%22%20rx=%223.5%22/%3E%3Crect%20x=%22209%22%20y=%2227%22%20width=%227%22%20height=%2217%22%20rx=%223%22/%3E%3Crect%20x=%22305%22%20y=%2220%22%20width=%228%22%20height=%2224%22%20rx=%223.5%22/%3E%3Crect%20x=%22321%22%20y=%2228%22%20width=%227%22%20height=%2216%22%20rx=%223%22/%3E%3Crect%20x=%22336%22%20y=%2223%22%20width=%228%22%20height=%2221%22%20rx=%223.5%22/%3E%3Crect%20x=%22352%22%20y=%2229%22%20width=%227%22%20height=%2215%22%20rx=%223%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20opacity=%22.15%22%3E%3Crect%20x=%2248%22%20y=%2256%22%20width=%228%22%20height=%2222%22%20rx=%223.5%22/%3E%3Crect%20x=%2264%22%20y=%2262%22%20width=%227%22%20height=%2216%22%20rx=%223%22/%3E%3Crect%20x=%2279%22%20y=%2254%22%20width=%228%22%20height=%2224%22%20rx=%223.5%22/%3E%3Crect%20x=%22156%22%20y=%2258%22%20width=%227%22%20height=%2220%22%20rx=%223%22/%3E%3Crect%20x=%22171%22%20y=%2253%22%20width=%228%22%20height=%2225%22%20rx=%223.5%22/%3E%3Crect%20x=%22187%22%20y=%2261%22%20width=%227%22%20height=%2217%22%20rx=%223%22/%3E%3Crect%20x=%22202%22%20y=%2256%22%20width=%228%22%20height=%2222%22%20rx=%223.5%22/%3E%3Crect%20x=%22298%22%20y=%2260%22%20width=%227%22%20height=%2218%22%20rx=%223%22/%3E%3Crect%20x=%22313%22%20y=%2254%22%20width=%228%22%20height=%2224%22%20rx=%223.5%22/%3E%3Crect%20x=%22329%22%20y=%2262%22%20width=%227%22%20height=%2216%22%20rx=%223%22/%3E%3Crect%20x=%22344%22%20y=%2257%22%20width=%228%22%20height=%2221%22%20rx=%223.5%22/%3E%3C/g%3E%3Cg%20fill=%22%230a0608%22%20opacity=%22.92%22%3E%3Crect%20x=%220%22%20y=%22110%22%20width=%22402%22%20height=%2230%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 64% at 50% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 66%),
    radial-gradient(84% 46% at 50% -6%, color-mix(in srgb, var(--accent-3) 22%, transparent), transparent 70%),
    linear-gradient(180deg, oklch(0.16 0.028 20), oklch(0.10 0.014 20));
  background-size: cover;
}
/* Substation — the rig, four beams, the booth, a room in front of it. */
.fc-hero-v3 .fc-hero-art {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20402%20140%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M24%2020h354M24%2028h354%22%20stroke-width=%221.1%22%20opacity=%22.28%22/%3E%3Cpath%20d=%22M24%2020l354%208M378%2020%2024%2028%22%20stroke-width=%22.6%22%20opacity=%22.16%22/%3E%3Cpath%20d=%22M76%2028v7M164%2028v7M238%2028v7M326%2028v7%22%20stroke-width=%221%22%20opacity=%22.4%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20opacity=%22.13%22%3E%3Cpath%20d=%22M76%2035%2044%2096h64z%22/%3E%3Cpath%20d=%22M164%2035l-32%2061h64z%22/%3E%3Cpath%20d=%22M238%2035l-32%2061h64z%22/%3E%3Cpath%20d=%22M326%2035l-32%2061h64z%22/%3E%3C/g%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%221.2%22%20opacity=%22.45%22%3E%3Cpath%20d=%22M150%2096V74h102v22%22/%3E%3Cpath%20d=%22M166%2082h20M216%2082h20%22/%3E%3C/g%3E%3Cg%20fill=%22%230a0608%22%20opacity=%22.92%22%3E%3Ccircle%20cx=%2226%22%20cy=%22112%22%20r=%2210%22/%3E%3Ccircle%20cx=%2258%22%20cy=%22116%22%20r=%229%22/%3E%3Ccircle%20cx=%2290%22%20cy=%22110%22%20r=%2210%22/%3E%3Ccircle%20cx=%22122%22%20cy=%22115%22%20r=%229%22/%3E%3Ccircle%20cx=%22290%22%20cy=%22110%22%20r=%2210%22/%3E%3Ccircle%20cx=%22322%22%20cy=%22115%22%20r=%229%22/%3E%3Ccircle%20cx=%22354%22%20cy=%22110%22%20r=%2210%22/%3E%3Ccircle%20cx=%22386%22%20cy=%22115%22%20r=%229%22/%3E%3Crect%20x=%220%22%20y=%22118%22%20width=%22402%22%20height=%2222%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%),
    radial-gradient(90% 44% at 50% 104%, color-mix(in srgb, var(--accent-3) 24%, transparent), transparent 64%),
    linear-gradient(180deg, oklch(0.15 0.025 20), oklch(0.09 0.012 20));
  background-size: cover;
}
.fc-hero-group { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* — chart — */
.fc-chart { display: flex; align-items: flex-end; gap: 5px; height: 104px; padding-top: 4px; }
.fc-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.fc-bar { width: 100%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.fc-bar.peak { background: var(--accent); }
.fc-bar-x { font-size: 9.5px; color: var(--dim-3); height: 11px; }

/* — tags & chips — */
.fc-tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 7px;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fc-tag.ok { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.fc-tag.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.fc-tag.bad { background: color-mix(in srgb, var(--bad) 20%, transparent); color: oklch(0.82 0.10 25); }
.fc-tag.info { background: var(--line); color: var(--dim); }
.fc-tag.outline { border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-3); }
.fc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.fc-chip { border: 1px solid var(--line); background: none; color: var(--dim-2); cursor: pointer;
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-family: inherit; }
.fc-chip.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* — calls — */
.fc-call { display: block; width: 100%; text-align: left; box-sizing: border-box; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--card); padding: 12px 14px; color: inherit; font-family: inherit; transition: background .12s; }
.fc-call:hover { background: var(--card-2); }
.fc-call-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.fc-call-time { font-size: 11px; color: var(--dim-3); font-variant-numeric: tabular-nums; }
.fc-flag { border-radius: 11px; padding: 12px 13px; font-size: 12.5px; line-height: 1.55; color: var(--dim);
  background: var(--sunken); border-left: 2px solid var(--dim-3); }
.fc-flag.warn { border-left-color: var(--warn); }
.fc-flag.bad { border-left-color: var(--bad); }
.fc-flag b { display: block; color: var(--text); font-weight: 500; margin-bottom: 3px; }
.fc-wave { display: flex; align-items: center; gap: 2px; height: 40px; padding: 4px 0; }
.fc-wave span { flex: 1; background: color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 1px; }
.fc-transcript { display: flex; flex-direction: column; gap: 8px; }
.fc-line { border-radius: 11px; padding: 10px 12px; background: var(--card); }
.fc-line.agent { background: var(--tint); }
.fc-who { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-3); }
.fc-line p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.fc-line.agent p { color: var(--text); }

/* — follow-ups — */
.fc-issue { border-radius: 12px; background: var(--card); overflow: hidden; border-left: 2px solid var(--dim-3); }
.fc-issue.warn { border-left-color: var(--warn); }
.fc-issue.bad { border-left-color: var(--bad); }
.fc-issue-head { display: block; width: 100%; text-align: left; box-sizing: border-box; cursor: pointer;
  border: 0; background: none; padding: 12px 14px; color: inherit; font-family: inherit; }
.fc-issue-kind { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.fc-issue-v { font-size: 10px; color: var(--dim-2); }
.fc-issue-w { font-size: 10px; color: var(--dim-3); font-variant-numeric: tabular-nums; }
.fc-issue-body { padding: 0 14px 13px; animation: fcRise .18s ease; }
.fc-issue-body p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.fc-issue-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--dim-2); font-size: 13px; }
.fc-empty svg { color: var(--good); }

/* — buttons — */
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border-radius: 10px; font-family: inherit; font-size: 13.5px; padding: 10px 16px; background: transparent; }
.fc-btn-primary { border: 1px solid var(--accent); color: var(--accent-2); }
.fc-btn-primary:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fc-btn-secondary { border: 1px solid var(--line); color: var(--text); }
.fc-btn-secondary:hover { background: color-mix(in srgb, #fff 6%, transparent); }
.fc-btn-ghost { border: 1px solid transparent; color: var(--dim-2); }
.fc-btn-ghost:hover { color: var(--text); }
.fc-btn.fc-sm { font-size: 12px; padding: 8px 13px; border-radius: 9px; }
.fc-block { width: 100%; min-height: 46px; }
.fc-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  color: var(--accent-3); font-family: inherit; font-size: 12.5px; padding: 0; margin: 4px 0 2px; align-self: flex-start; }

/* — form controls — */
.fc-field { display: flex; flex-direction: column; gap: 6px; }
.fc-field span { font-size: 11.5px; color: var(--dim-2); }
.fc-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, #000 26%, transparent); color: var(--text);
  font-family: inherit; font-size: 13.5px; padding: 12px 13px; min-height: 44px; }
.fc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fc-input::placeholder { color: var(--dim-3); }
.fc-textarea { min-height: 0; line-height: 1.5; resize: none; }

.fc-sliders { display: flex; flex-direction: column; gap: 15px; }
.fc-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.fc-slider-top b { color: var(--accent-3); font-weight: 500; }
/* accent-color alone leaves the unfilled track at the browser's light
   default, which reads as a bright bar across a dark screen. Both tracks
   are drawn explicitly instead. */
.fc-slider input[type=range] {
  width: 100%; height: 22px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fc-slider input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fc-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: color-mix(in srgb, #000 45%, var(--card-2));
}
.fc-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--app-bg); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.fc-slider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: color-mix(in srgb, #000 45%, var(--card-2));
}
.fc-slider input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.fc-slider input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--app-bg); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.fc-switch { width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; flex: none;
  background: color-mix(in srgb, #000 30%, transparent); padding: 0; position: relative; transition: background .15s; }
.fc-switch span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--dim-2); transition: transform .15s, background .15s; }
.fc-switch.on { background: color-mix(in srgb, var(--accent) 40%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.fc-switch.on span { transform: translateX(18px); background: var(--accent-2); }
.fc-rule-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-rule.locked { border-color: color-mix(in srgb, var(--bad) 26%, transparent); }

.fc-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--dim);
  font-family: inherit; font-size: 12px; padding: 7px 13px; }
.fc-toggle.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-3); }
.fc-agent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.fc-preview { border-radius: 12px; padding: 14px; background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: 13.5px; line-height: 1.55; color: var(--accent-2); }

.fc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 12px; color: var(--dim-2); }
.fc-kv b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.fc-meter { height: 6px; border-radius: 999px; background: color-mix(in srgb, #000 40%, transparent); overflow: hidden; margin-top: 11px; }
.fc-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* — knowledge cards — */
.fc-kb { border-radius: 12px; background: var(--card); overflow: hidden; }
.fc-kb.open { background: var(--card-2); }
.fc-kb-head { display: block; width: 100%; text-align: left; box-sizing: border-box; cursor: pointer;
  border: 0; background: none; padding: 12px 14px; color: inherit; font-family: inherit; }
.fc-kb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.fc-kb-body { padding: 0 14px 13px; display: flex; flex-direction: column; gap: 10px; animation: fcRise .18s ease; }

/* — branding — */
.fc-brand { display: flex; gap: 10px; }
.fc-brand-mark { width: 88px; height: 88px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 500; letter-spacing: .04em; color: var(--accent-2);
  background: radial-gradient(120% 120% at 30% 12%, var(--tint), var(--card) 72%);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.fc-brand-word { flex: 1; height: 88px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  padding: 0 14px; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-2); background: radial-gradient(120% 140% at 70% 10%, var(--tint), var(--card) 74%); }
.fc-swatches { display: flex; gap: 9px; }
.fc-swatch { width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer; }
.fc-swatch.sel { box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--text); }

/* — tab bar — */
.fc-tabs { flex: none; display: flex; padding: 9px 8px 26px; z-index: 10;
  background: color-mix(in srgb, var(--app-bg) 94%, transparent); backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line-2); }
.fc-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  background: none; border: 0; padding: 6px 0 2px; color: var(--dim-3); font-family: inherit; font-size: 10px; }
.fc-tab.on { color: var(--accent-3); }
.fc-tab-i { position: relative; display: inline-flex; }
.fc-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--accent); color: oklch(0.16 0.02 20);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* — switcher sheet — */
.fc-sheet-wrap { position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.fc-sheet { width: 100%; box-sizing: border-box; border-radius: 20px 20px 0 0; background: var(--card-2);
  padding: 10px 16px 34px; display: flex; flex-direction: column; gap: 8px; animation: fcSheet .24s cubic-bezier(.2,.8,.2,1); }
@keyframes fcSheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-sheet { animation: none; } }
.fc-sheet-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line); align-self: center; margin-bottom: 6px; }
.fc-sheet-h { font-size: 12px; color: var(--dim-2); display: flex; justify-content: space-between; gap: 10px; padding: 0 2px 4px; }
.fc-sheet-h span { color: var(--dim-3); font-size: 11px; }
.fc-sheet-row { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; background: var(--card); padding: 12px 13px; color: inherit; font-family: inherit; text-align: left; }
.fc-sheet-row:hover { background: color-mix(in srgb, #fff 5%, var(--card)); }
.fc-sheet-row.sel { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--tint); }
.fc-sheet-row svg { color: var(--accent-3); flex: none; }

/* — publish bar & toast — */
.fc-publish, .fc-toast {
  position: absolute; left: 14px; right: 14px; bottom: 96px; z-index: 65;
  border-radius: 12px; padding: 12px 13px; background: var(--sunken);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 12px 30px rgba(0,0,0,.6);
  font-size: 12.5px; animation: fcRise .2s ease;
}
.fc-publish { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dim); }
.fc-toast { bottom: 150px; text-align: center; color: var(--accent-2); }

/* — sign in — */
.fc-signin { padding: 74px 26px 26px; justify-content: space-between; }
.fc-signin::before { content: ''; position: absolute; top: -150px; left: -90px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%); pointer-events: none; }
.fc-signin-top, .fc-signin-bot { position: relative; display: flex; flex-direction: column; gap: 13px; }
.fc-signin-bot { gap: 12px; }
.fc-lockup { display: flex; align-items: center; gap: 10px; }
.fc-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); color: var(--accent); }
.fc-lockup-a { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.fc-lockup-b { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-3); }
.fc-signin-h { font-family: 'Unbounded', sans-serif; font-size: 29px; line-height: 1.14; font-weight: 500; margin: 12px 0 0; }
.fc-signin-p { font-size: 13.5px; line-height: 1.55; color: var(--dim-2); margin: 0; max-width: 300px; }
.fc-signin-foot { text-align: center; font-size: 11px; color: var(--dim-3); padding-top: 2px; }

/* — small screens: the device scales bodily rather than reflowing —
   an app screenshot that reflows is no longer the app. */
/* transform: scale() shrinks the phone visually but leaves its 402px layout
   box behind, which pushes the page sideways. The negative margins reclaim
   exactly the width and height the scale gives back. */
@media (max-width: 470px) {
  .fc-phone {
    transform: scale(.84); transform-origin: top center;
    margin: 0 -32px -140px;
  }
}
@media (max-width: 400px) {
  .fc-phone {
    transform: scale(.72);
    margin: 0 -56px -245px;
  }
}