/*
 * AUXARA.IO — product UI imagery: the hero app-frame (Dialer console) + the proof-card
 * vignettes (compliance engine, coach scorecard). These hand-built mini-UIs ARE the site's
 * images — real product surfaces, not stock renders. Tokens only (Gate-11).
 */

/* ---------- hero app frame: a glass cockpit window ---------- */
.app-frame {
  margin-top: var(--space-16);
  background: var(--glass);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-top), var(--shadow-raised), var(--shadow-card-glow);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.af-bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--glass-soft);
}
.af-dots { display: inline-flex; gap: var(--space-1); }
.af-dots span { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--line-strong); }
.af-name { font-weight: var(--weight-bold); font-size: var(--small); color: var(--text); letter-spacing: var(--tracking-display); }
.af-name .dot { color: var(--iris); }
.chip-env {
  font-family: var(--font-mono); font-size: var(--micro); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ok); border: 1px solid oklch(0.7 0.16 158 / 0.35); background: oklch(0.7 0.16 158 / 0.08);
  padding: 1px var(--space-2); border-radius: var(--radius-full);
}
.af-meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--micro); color: var(--text-faint); }

.af-body { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; }
.af-col { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.af-col + .af-col { border-left: 1px solid var(--line); }
.af-h {
  font-family: var(--font-mono); font-size: var(--micro); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-faint);
  display: flex; justify-content: space-between; gap: var(--space-3);
}
.af-h em { font-style: normal; color: var(--iris); text-transform: none; letter-spacing: 0; }

/* queue column */
.q-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--micro);
}
.q-row.is-active { background: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-top), var(--shadow-card-glow); }
.q-name { color: var(--text); font-weight: var(--weight-medium); }
.q-num { font-family: var(--font-mono); color: var(--text-faint); }
.q-state { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--micro); }
.st-booked { color: var(--ok); }
.st-live { color: var(--iris-strong); animation: pulse 1200ms var(--ease-standard) infinite; }
.st-queued { color: var(--text-faint); }
.st-noans { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .st-live { animation: none; } }

/* active call column */
.call-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.call-name { font-weight: var(--weight-bold); color: var(--text); font-size: var(--body); }
.call-tag {
  font-family: var(--font-mono); font-size: var(--micro); color: var(--iris-soft);
  border: 1px solid var(--glass-edge); background: var(--iris-wash);
  padding: 1px var(--space-2); border-radius: var(--radius-full);
}
.call-timer { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: var(--small); }
.call-sub { font-size: var(--micro); color: var(--text-faint); }
.ai-draft {
  display: grid; gap: var(--space-2);
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius-md);
  box-shadow: var(--glass-top);
  padding: var(--space-4);
}
.ai-draft-h { font-family: var(--font-mono); font-size: var(--micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--iris); }
.ai-draft-body { font-size: var(--micro); color: var(--text-soft); line-height: var(--leading-normal); }
.ai-draft-act { display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--micro); }
.ai-draft-act .a { color: var(--ok); }
.ai-draft-act .b { color: var(--text-faint); }
.call-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.call-actions span {
  font-size: var(--micro); color: var(--text-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

/* compliance column */
.c-row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--micro); color: var(--text-soft);
  border-bottom: 1px solid var(--line); padding-block: var(--space-2);
}
.c-row em { font-style: normal; font-family: var(--font-mono); color: var(--ok); }
.af-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.af-tile {
  display: grid; gap: 2px; padding: var(--space-3);
  background: var(--glass-soft); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.af-tile b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--subhead); color: var(--text); }
.af-tile i { font-style: normal; font-size: var(--micro); color: var(--text-faint); }

/* ---------- proof-card vignettes ---------- */
.ui-vignette {
  display: grid; gap: var(--space-2);
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius-lg);
  box-shadow: var(--glass-top);
  padding: var(--space-5);
}
.uv-h {
  font-family: var(--font-mono); font-size: var(--micro); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-faint);
  display: flex; justify-content: space-between; gap: var(--space-3);
}
.uv-h em { font-style: normal; color: var(--iris); text-transform: none; letter-spacing: 0; }
.uv-score { display: grid; gap: var(--space-2); }
.uv-crit { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: baseline; }
.uv-crit-l { font-size: var(--micro); color: var(--text-soft); }
.uv-crit-r { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--micro); color: var(--text); }
.uv-bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.uv-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand-mark); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-standard); }
.in .uv-bar span, .uv-bar.static span { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .uv-bar span { transition: none; transform: scaleX(1); } }
.uv-note { display: grid; gap: 2px; font-size: var(--micro); color: var(--text-soft); line-height: var(--leading-normal); border-left: 2px solid var(--iris); padding-left: var(--space-3); margin-top: var(--space-1); }
.uv-note b { color: var(--iris-soft); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--micro); }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .af-body { grid-template-columns: 1fr 1.4fr; }
  .af-side { display: none; }
  .af-meta { display: none; }
}
@media (max-width: 640px) {
  .af-body { grid-template-columns: 1fr; }
  .af-col + .af-col { border-left: 0; border-top: 1px solid var(--line); }
  .af-queue { display: none; }
}