/*
 * Design tokens + typography scale mirrored from DESIGN.md (the DARVIS
 * dashboard's design system). This app has no build step / no Tailwind, so
 * these are hand-rolled CSS custom properties + utility classes rather than
 * a `@theme` block — same tokens, same scale, plain CSS.
 */

:root {
  /* Palette */
  --color-purple: #7D287F;
  --color-purple-deep: #3A0E3C;
  --color-purple-deeper: #2B0A2D;
  --color-purple-dark: #4A1050;
  --color-gold: #D8A428;
  --color-gold-light: #E8BC50;
  --color-gold-shadow: #B08820;
  --color-tint: #F4E8F5;
  --color-tint-subtle: #FAF4FB;
  --color-white: #FFFFFF;
  --color-gray-100: #F0EFEB;
  --color-gray-200: #E5E3DD;
  --color-gray-400: #9CA3AF;
  --color-gray-600: #4B5563;
  --color-gray-800: #1F2937;
  --color-text: #1A1A1A;
  --color-success: #16A34A;
  --color-success-light: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-error: #DC2626;
  --color-error-light: #FEF2F2;
  --color-error-border: #FECACA;

  --font-sans: 'Fira Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-white);
  color: var(--color-text);
}

a { color: var(--color-purple); }
a:hover { color: var(--color-purple-dark); }
button { font-family: inherit; }
input, textarea { font-family: inherit; }

/* ============================================================
   Typography scale — mirrors DESIGN.md's type-* classes.
   Mobile-first; desktop values apply at the 768px breakpoint.
   Weights are capped at 600 per brand rule (no 700+ anywhere).
   ============================================================ */

.type-h1 { font-family: var(--font-sans); font-weight: 600; font-size: 32px; line-height: 44px; margin: 0; }
.type-h2 { font-family: var(--font-sans); font-weight: 600; font-size: 28px; line-height: 36px; margin: 0; }
.type-h3 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 30px; margin: 0; }
.type-h4 { font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 24px; margin: 0; }
.type-h5 { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; margin: 0; }
.type-t1 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 24px; }
.type-t2 { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 20px; }
.type-t3 { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; }
.type-b1 { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 20px; }
.type-b2 { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; }
.type-c1 { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; }
.type-c2 { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; }
.type-c3 { font-family: var(--font-sans); font-weight: 300; font-size: 10px; line-height: 16px; }

@media (min-width: 768px) {
  .type-h1 { font-size: 38px; line-height: 52px; }
  .type-h2 { font-size: 34px; line-height: 44px; }
  .type-h3 { font-size: 28px; line-height: 36px; }
  .type-h4 { font-size: 24px; line-height: 28px; }
  .type-h5 { font-size: 20px; line-height: 24px; }
  .type-t1 { font-size: 20px; line-height: 24px; }
  .type-t2 { font-size: 16px; line-height: 24px; }
  .type-t3 { font-size: 16px; line-height: 24px; }
  .type-b1 { font-size: 20px; line-height: 24px; }
  .type-b2 { font-size: 16px; line-height: 24px; }
  .type-c1 { font-size: 14px; line-height: 20px; }
  .type-c2 { font-size: 14px; line-height: 20px; }
  .type-c3 { font-size: 12px; line-height: 16px; }
}

/* Eyebrow: a pure modifier, always paired with `type-c1` in markup
   (`class="type-c1 eyebrow"`) rather than declaring its own size — one
   caption size for the whole app, no off-scale one-offs. Gold-light reads
   well on the dark purple-deep header (final card); everywhere else
   (white/tint cards) we use full-strength gold — gold-light's contrast on
   white is too low for reliable readability at this size. */
.eyebrow { letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold-shadow); }
.eyebrow-on-dark { color: var(--color-gold-light); }

/* ============================================================
   Layout
   ============================================================ */

.page {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topbar {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
}

/* Logo — full horizontal lockup on wider screens, icon mark only once
   the topbar doesn't have room for the full wordmark next to the page
   title, the classroom caption and the Restart button. */
.logo-full { display: block; height: 26px; width: auto; }
.logo-icon { display: none; height: 28px; width: auto; }
.topbar-caption { display: inline; }

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .logo-full { display: none; }
  .logo-icon { display: block; }
  .topbar-caption { display: none; }
}

.content {
  width: 100%;
  max-width: 860px;
  padding: 28px 20px 70px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card { background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: 12px; box-shadow: 0 1px 2px rgba(43,10,45,0.04), 0 4px 16px rgba(43,10,45,0.06); }

/* ============================================================
   Buttons — gold is the primary-CTA color; dark text on gold for
   contrast (white-on-gold fails WCAG AA at this saturation).
   ============================================================ */

.btn { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 12px 22px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--color-gold); color: var(--color-purple-deep); border-color: var(--color-gold); }
.btn-primary:hover:not(:disabled) { background: var(--color-gold-shadow); border-color: var(--color-gold-shadow); }
.btn-secondary { background: transparent; color: var(--color-purple); border-color: var(--color-purple); }
.btn-secondary:hover:not(:disabled) { background: var(--color-purple); color: var(--color-white); }
.btn-ghost { background: transparent; color: var(--color-gray-600); border-color: transparent; padding: 10px 6px; }
.btn-ghost:hover:not(:disabled) { color: var(--color-purple); }

.field-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--color-text); letter-spacing: .01em; }

.text-input, .textarea { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 15px; color: var(--color-text); background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: 8px; padding: 12px 14px; }
.text-input:focus, .textarea:focus { outline: 2px solid transparent; border-color: var(--color-purple); box-shadow: 0 0 0 3px rgba(125,40,127,0.15); }
.textarea { resize: vertical; line-height: 1.55; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--color-gray-200); background: var(--color-white); font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text); cursor: pointer; text-align: left; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.chip:hover { border-color: var(--color-purple); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(125,40,127,0.12); }

.situation-card { text-align: left; padding: 18px; border-radius: 12px; border: 1.5px solid var(--color-gray-200); background: var(--color-white); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.situation-card:hover { border-color: var(--color-purple); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(125,40,127,0.14); }

/* ============================================================
   Badges — solid pill, white text. Color is chosen by semantic
   meaning, never ad hoc: success/error map straight to the brand's
   status tokens; "caution" (a third tier this app needs that the
   brand palette doesn't define) uses gold rather than inventing a
   new hue; anything else neutral/informational uses purple or gray.
   ============================================================ */

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--color-white); white-space: nowrap; }
.badge-success { background: var(--color-success); }
.badge-error { background: var(--color-error); }
.badge-caution { background: var(--color-gold-shadow); }
.badge-purple { background: var(--color-purple); }
.badge-neutral { background: var(--color-gray-600); }

.warning-text { font-family: var(--font-sans); font-size: 12px; color: var(--color-error); }
.warning-text.hidden { display: none; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.between { justify-content: space-between; }
.align-center { align-items: center; }
.wrap { flex-wrap: wrap; }
.divider-top { padding-top: 8px; border-top: 1.5px solid var(--color-gray-200); }

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Stepper — replaces the old plain dots with numbered/checked
   circles so progress reads as "steps completed", not a loading bar.
   ============================================================ */

.step-dot { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.step-dot-done { background: var(--color-purple); color: var(--color-white); }
.step-dot-current { background: var(--color-white); color: var(--color-purple); border: 2px solid var(--color-purple); }
.step-dot-upcoming { background: var(--color-white); color: var(--color-gray-400); border: 1.5px solid var(--color-gray-200); }
.step-connector { flex: 1; height: 2px; min-width: 8px; }
.step-connector-done { background: var(--color-purple); }
.step-connector-upcoming { background: var(--color-gray-200); }

/* ============================================================
   Hero — the one gradient moment on the intro screen.
   ============================================================ */

.hero-gradient { background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-deep) 65%, var(--color-purple-deeper) 100%); }

/* ============================================================
   Chat bubbles — message comparisons (Step 6, final card) read as
   a conversation rather than plain gray boxes. Tail-left/right just
   squares one corner to hint direction; colors carry the meaning:
   gray = your original words, tint = the other person, success = your
   improved version.
   ============================================================ */

.bubble { padding: 12px 16px; border-radius: 16px; font-family: var(--font-sans); }
.bubble-tail-left { border-bottom-left-radius: 4px; }
.bubble-tail-right { border-bottom-right-radius: 4px; }
.bubble-you { background: var(--color-gray-100); color: var(--color-text); }
.bubble-them { background: var(--color-tint); color: var(--color-text); }
.bubble-improved { background: var(--color-success-light); border: 1.5px solid var(--color-success-border); color: var(--color-text); }
.bubble-row { display: flex; }
.bubble-row.justify-end { justify-content: flex-end; }
.bubble-row .bubble { max-width: 88%; }

/* ============================================================
   Feedback icons — small line icons next to category labels
   (Step 5) and inside ideal/caution/avoid badges (Step 3) so a
   run of similar-looking cards is scannable at a glance.
   ============================================================ */

.feedback-icon { flex-shrink: 0; }