/* Applicaa web brand — self-hosted fonts + signature devices for the standalone port.
 * Pairs with the brand token overrides in index.html's <style type="text/tailwindcss">.
 * Plain CSS only (this file is NOT processed by the Tailwind CDN). */

/* ---- Self-hosted fonts (same-origin under Prepros → /fonts/…) ------------- */
@font-face { font-family: "Proxima Nova"; src: url("fonts/ProximaNova-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("fonts/ProximaNova-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("fonts/ProximaNova-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Base type: Inter body, Proxima Nova headings ------------------------ */
body { font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, "Proxima Nova", "Inter", sans-serif); letter-spacing: -0.01em; }

/* ---- Signature device: one coral highlight word inside a navy headline --- */
.orange-title, .coral-title { color: var(--primary); }

/* ---- Signature device: eyebrow label (Proxima Bold, uppercase, tracked) -- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading, "Proxima Nova", sans-serif);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-accent, #ca4136);
}

/* ---- Micro-motion + brand (info-blue) focus ring ------------------------- */
a, button { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(52, 120, 247, .22); }

/* Opt-in hover lift for primary CTAs (add class="btn-lift" in markup) */
.btn-lift:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(236, 99, 75, .30); }

/* ---- Brand gradient helpers (hero wash / CTA band / navy panel) ---------- */
.bg-g-cool { background-image: linear-gradient(162deg, #e9f1fe 0%, #f4f5f9 58%, #f4f5f9 100%); }
.bg-g-warm { background-image: linear-gradient(135deg, #ec634b 0%, #d44a33 100%); }
.bg-g-navy { background-image: linear-gradient(158deg, #16265f 0%, #0f1a4f 52%, #1b2f74 100%); }

/* Soft brand elevation (add class="card-brand" for the DS card shadow) */
.card-brand { box-shadow: 0 8px 24px rgba(15, 26, 79, .08); }

/* Subtle decorative dotted grid for atmospheric panels (opt-in) */
.brand-dots { background-image: radial-gradient(rgba(15,26,79,.06) 1px, transparent 1px); background-size: 22px 22px; }

/* ---- Results-day vertical timeline (scroll progress rail + reveal) ------- */
.tl { position: relative; }
.tl-list { list-style: none; margin: 0; padding: 0; }

/* The continuous rail behind the steps + the coral progress fill (JS height) */
.tl-rail {
  position: absolute; left: 15px; top: 10px; bottom: 10px; width: 3px;
  background: var(--rule, #e6e8ef); border-radius: 3px; overflow: hidden;
}
.tl-rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, #ec634b 0%, #d44a33 100%);
  transition: height .12s linear;
}
@media (min-width: 768px) { .tl-rail { left: 19px; } }

/* Each step: content sits to the right of the rail; node dot sits on it */
.tl-item { position: relative; padding-left: 3rem; padding-bottom: 1.25rem; }
.tl-item:last-child { padding-bottom: 0; }
@media (min-width: 768px) { .tl-item { padding-left: 3.75rem; } }

.tl-node {
  position: absolute; top: 2px; left: 7px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; border: 3px solid var(--rule, #e6e8ef);
  box-shadow: 0 0 0 4px var(--background, #f4f5f9);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
@media (min-width: 768px) { .tl-node { left: 11px; } }
.tl-node.is-reached {
  background: #ec634b; border-color: #ec634b; transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(236, 99, 75, .16);
}

.tl-card {
  border-radius: .75rem; background: #fff; padding: 1rem 1.25rem;
  box-shadow: 0 6px 20px rgba(15, 26, 79, .06);
}
.tl-time {
  font-family: var(--font-heading, "Proxima Nova", sans-serif);
  font-weight: 700; font-size: 1.125rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: .3rem;
}

/* Scroll reveal (JS adds .is-in) */
.tl-item { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tl-item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; transition: none; }
  .tl-rail-fill, .tl-node { transition: none; }
}

/* ---- Meet Emma — animated chat preview ----------------------------------- */
.emma-stage {
  border-radius: 1.5rem; padding: clamp(1rem, 3vw, 1.75rem);
  background: linear-gradient(158deg, #e9f1fe 0%, #f4f5f9 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 26, 79, .05);
}
.emma-chat {
  background: #fff; border-radius: 1.1rem; padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 16px 48px rgba(15, 26, 79, .14);
}
.emma-chat-log {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .6rem; min-height: 288px; overflow: hidden;
}

/* Message bubbles (hidden until the JS sequence reveals them) */
.emma-msg {
  display: none; max-width: 88%; padding: .7rem 1rem;
  border-radius: 1.1rem; font-size: .92rem; line-height: 1.45;
}
.emma-msg.is-shown { display: block; animation: emma-in .34s ease both; }
.emma-msg-bot  { align-self: flex-start; background: #0f1a4f; color: #fff; border-bottom-left-radius: .35rem; }
.emma-msg-user { align-self: flex-end; background: #eef1f7; color: #0f1a4f; font-weight: 500; border-bottom-right-radius: .35rem; }

/* Quick-action buttons under Emma's last reply */
.emma-actions { display: none; gap: .5rem; margin-top: .1rem; }
.emma-actions.is-shown { display: flex; animation: emma-in .34s ease both; }
.emma-btn-primary, .emma-btn-ghost {
  border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .82rem; line-height: 1;
}
.emma-btn-primary { background: #ec634b; color: #fff; }
.emma-btn-ghost { background: #fff; color: #0f1a4f; border: 1px solid var(--rule, #e6e8ef); }

/* Typing indicator (reused between Emma replies) */
.emma-typing {
  display: none; align-self: flex-start; padding: .75rem 1rem;
  background: #0f1a4f; border-radius: 1.1rem; border-bottom-left-radius: .35rem;
}
.emma-typing.is-shown { display: inline-flex; gap: 4px; align-items: center; }
.emma-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55);
  animation: emma-bounce 1.2s infinite ease-in-out;
}
.emma-typing span:nth-child(2) { animation-delay: .15s; }
.emma-typing span:nth-child(3) { animation-delay: .3s; }

/* Input row + suggestion chips (static chrome) */
.emma-chat-input {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule, #e6e8ef);
}
.emma-chat-avatar {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #ec634b; color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.emma-chat-caret { width: 2px; height: 1.15rem; background: #ec634b; animation: emma-blink 1.1s step-end infinite; }
.emma-chat-send {
  flex: none; margin-left: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #ec634b; color: #fff; display: flex; align-items: center; justify-content: center;
}
.emma-chat-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rule, #e6e8ef);
}
.emma-chip {
  border: 1px solid var(--rule, #e6e8ef); border-radius: 999px;
  padding: .4rem .8rem; font-size: .8rem; color: var(--muted-foreground, #4d5b7f);
}

@keyframes emma-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes emma-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes emma-blink { 50% { opacity: 0; } }

/* ---- Loading ellipsis — cycles ".", "..", "..." (school detail fetch) ---- */
.loading-dots::after {
  content: ".";
  animation: loading-dots 1.2s infinite;
}
@keyframes loading-dots {
  0%   { content: "."; }
  33%  { content: ".."; }
  66%  { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-dots::after { content: "…"; animation: none; }
}