/*
 * theme.css — Flowline design tokens.
 * Bold-geometric: flat colour blocks, thick strokes, zero radius, no shadow.
 * Retuned to WhatsApp's OWN brand palette, since the product IS a WhatsApp
 * automation workshop: --accent is WhatsApp's dark teal header colour
 * (#075e54), --x-wire is WhatsApp's bright brand green (#25d366), and the
 * phone mock-up's outgoing bubble and its read-receipt ticks use WhatsApp's
 * real light-green bubble and blue-tick colours (--x-bubble-out, --x-clay).
 * Canvas/surface/ink stay the warm paper ground already approved. Opens
 * light; dark set follows, using WhatsApp's own dark-mode equivalents.
 */

:root {
  --canvas: #f6f3ec;
  --surface: #fbfaf6;
  --surface-2: #eee8d9;
  --border: #ddd6c4;
  --border-strong: #14140f;
  --ink: #14140f;
  --muted: #65645f;
  --accent: #075e54;
  --accent-hover: #054840;
  --accent-ink: #f6f3ec;
  --accent-text: #0c6b5e;
  --accent-strong: #0e6b5c;
  --accent-soft: #d7f2ea;
  --accent-border: #075e54;
  --success: #075e54;
  --success-ink: #f6f3ec;
  --success-soft: #d7f2ea;
  --success-strong: #0e6b5c;
  --warning: #b0562a;
  --warning-ink: #fbfaf6;
  --warning-soft: #f3e0d2;
  --warning-strong: #954621;
  --danger: #a4302a;
  --danger-ink: #fbfaf6;
  --danger-soft: #f3dcd8;
  --danger-strong: #8a2622;
  --chart-1: #075e54;
  --chart-2: #25d366;
  --chart-3: #34b7f1;
  --chart-4: #14140f;
  --chart-5: #c1682f;
  --chart-6: #a4302a;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --shadow-xs: none;
  --btn-weight: 700;
  --card-pad: 2rem;
  --measure: 62ch;
  --caps: uppercase;
  --caps-tracking: 0.04em;

  /* App-owned tokens (--x-*): WhatsApp's own brand marks.
     --x-wire is the brand green wire running down the page; --x-clay is the
     read-receipt blue used for the second flat block and the chat ticks;
     --x-bubble-out/-ink are the real outgoing-bubble colours in the phone
     mock; --x-band/--x-dark are the tinted and statement bands. */
  --x-wire: #25d366;
  --x-clay: #1d8fd1;
  --x-clay-soft: #d6eefc;
  --x-clay-ink: #14140f;
  --x-bubble-out: #d9fdd3;
  --x-bubble-out-ink: #0b3d2e;
  --x-band: #eee8d9;
  --x-dark: #14140f;
  --x-dark-ink: #f6f3ec;
}

html[data-theme="dark"] {
  --canvas: #14140f;
  --surface: #1b1b14;
  --surface-2: #23231a;
  --border: #38382c;
  --border-strong: #f6f3ec;
  --ink: #f6f3ec;
  --muted: #a8a696;
  --accent: #25d366;
  --accent-hover: #33e075;
  --accent-ink: #0c1510;
  --accent-text: #4ecb92;
  --accent-strong: #63d6a1;
  --accent-soft: #17322a;
  --accent-border: #25d366;
  --success: #25d366;
  --success-ink: #0c1510;
  --success-soft: #17322a;
  --success-strong: #63d6a1;
  --warning: #d97a44;
  --warning-ink: #14140f;
  --warning-soft: #3a2a1c;
  --warning-strong: #eda06e;
  --danger: #cf5951;
  --danger-ink: #14140f;
  --danger-soft: #3a2220;
  --danger-strong: #e28a83;
  --chart-1: #25d366;
  --chart-2: #34b7f1;
  --chart-3: #63d6a1;
  --chart-4: #f6f3ec;
  --chart-5: #e0955f;
  --chart-6: #cf5951;

  --x-wire: #25d366;
  --x-clay: #53c6f5;
  --x-clay-soft: #123044;
  --x-clay-ink: #0b2530;
  --x-bubble-out: #005c4b;
  --x-bubble-out-ink: #e9edef;
  --x-band: #1b1b14;
  --x-dark: #0b0b08;
  --x-dark-ink: #f6f3ec;
}

/*
 * app.css — Nodeline Sessions' own page: the wire, the nodes, the phone
 * mock-up and the flow diagram. Nothing here re-declares a primitive
 * (.card, .btn, .input, …) — only classes named for what they are.
 * Compiled: @apply and nested utilities resolve here exactly as in
 * tailwind/components.css. Colours are tokens only.
 */

/* ---- The wire + its nodes ------------------------------------------------ */
.wire-rail {
  position: relative;
}

.node-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 1rem;
  padding-block: 3.5rem;
  position: relative;
}
@media (width >= 48rem) {
  .node-row {
    grid-template-columns: 4rem 1fr;
    column-gap: 2.5rem;
    padding-block: 5.5rem;
  }
}

.node-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.wire-line {
  width: 3px;
  flex: 1 1 auto;
  background: var(--x-wire);
}
.wire-line-hidden {
  background: transparent;
}

.node-shape {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
}
@media (width >= 48rem) {
  .node-shape { width: 3.25rem; height: 3.25rem; }
}
.node-shape-circle {
  border-radius: 999px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.node-content {
  min-width: 0;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* A section that bleeds full-viewport-width behind a page kept at max-w-6xl. */
.band-tint,
.band-dark {
  position: relative;
}
.band-tint::before,
.band-dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
}
.band-tint::before { background: var(--x-band); }
.band-dark::before { background: var(--x-dark); }
/* A real background-color on the row itself too (not only the bleed pseudo-
   element): contrast is measured against an ancestor's own background, and
   a decorative ::before behind it is invisible to that check. */
.band-tint { background: var(--x-band); }
.band-dark { background: var(--x-dark); color: var(--x-dark-ink); }
.band-dark .mono-tag { color: var(--x-dark-ink); opacity: 0.7; }
.band-dark .node-shape {
  background: var(--x-dark);
  border-color: var(--x-dark-ink);
  color: var(--x-dark-ink);
}
.band-dark .wire-line { background: var(--x-dark-ink); }

/* ---- Hero headline: types itself once on load ---------------------------- */
.hero-headline {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.5rem, 5.4vw + 1rem, 5.25rem);
  color: var(--ink);
  min-height: 1.9em;
}
@media (width >= 48rem) {
  .hero-headline { min-height: 2.9em; }
}
.hero-headline .caret {
  display: inline-block;
  width: 0.09em;
  margin-left: 0.05em;
  background: var(--x-wire);
  animation: caret-blink 900ms steps(1) infinite;
}
html.reduced-motion .hero-headline .caret { animation: none; }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- Phone mock-up: a WhatsApp-style chat, composed ----------------------- */
.phone-frame {
  width: min(19rem, 82vw);
  border: 3px solid var(--ink);
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--surface);
  justify-self: center;
}
.phone-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1rem;
}
.phone-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-ink) 22%, transparent);
}
.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  min-height: 15rem;
  background: color-mix(in srgb, var(--x-wire) 7%, var(--surface));
}
.bubble {
  max-width: 82%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
}
.bubble-in { align-self: flex-start; background: var(--surface-2); color: var(--ink); }
.bubble-out {
  align-self: flex-end;
  background: var(--x-bubble-out);
  color: var(--x-bubble-out-ink);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: flex-end;
  text-align: right;
}
.bubble-out .icon { color: var(--x-clay); }

/* ---- Flow diagram: the four-block flow attendees build -------------------- */
.flow-diagram {
  border: 3px solid var(--ink);
  background: var(--surface);
}
.flow-diagram-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 3px solid var(--ink);
  background: var(--surface-2);
}
.flow-diagram-head .dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
}
.flow-diagram-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}
@media (width >= 48rem) {
  .flow-diagram-body { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
}
.flow-step { display: flex; align-items: center; gap: 0.75rem; }
.flow-step-box {
  flex: 1 1 auto;
  border: 2px solid var(--ink);
  background: var(--canvas);
  padding: 0.85rem 1rem;
}
@media (width >= 48rem) {
  .flow-step-box { min-width: 11rem; }
}
.flow-arrow {
  display: flex;
  flex-shrink: 0;
  color: var(--muted);
  transform: rotate(90deg);
}
@media (width >= 48rem) {
  .flow-arrow { transform: none; }
}

/* ---- Curriculum flow-list --------------------------------------------------- */
.flow-list-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 1.1rem;
  border-top: 2px solid var(--border);
}
.flow-list-row:first-child { border-top: none; padding-top: 0; }
.flow-list-tag {
  flex-shrink: 0;
  width: 7rem;
  padding-top: 0.15rem;
}

/* ---- Host pull-quote --------------------------------------------------------- */
.host-quote {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--display-tracking);
  line-height: 1.25;
  font-size: clamp(1.5rem, 2.6vw + 1rem, 2.5rem);
}

.node-dl-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  color: var(--ink);
}

/* ---- Closing statement ------------------------------------------------------ */
.closing {
  padding-block: 7rem;
  background: var(--x-band);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.closing-headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.25rem, 5vw + 1rem, 4.75rem);
  color: var(--ink);
}