/* ============================================================================
   SWIMSTREAM — Component styles for the interactive demo widgets.
   Loaded after swimstream.css. Uses the same token layer.
   ========================================================================== */

/* ---------------------------------------------------- Demo 1: Portfolio chat */
.pf-log {
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}
.pf-log::-webkit-scrollbar { width: 6px; }
.pf-log::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
.pf-msg { display: flex; }
.pf-msg--user { justify-content: flex-end; }
.pf-bubble {
  max-width: 86%;
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  font-size: .88rem;
  line-height: 1.55;
  border: 1px solid var(--border);
}
.pf-msg--user .pf-bubble {
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 24%, var(--card)), var(--card));
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  color: var(--ink-strong);
  border-bottom-right-radius: 4px;
}
.pf-msg--ai .pf-bubble {
  background: var(--bg-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.pf-answer { margin: 0; }
.pf-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.pf-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pf-bounce 1.2s var(--ease) infinite;
}
.pf-dots i:nth-child(2) { animation-delay: .15s; }
.pf-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pf-bounce { 0%,80%,100%{ transform: translateY(0); opacity:.4 } 40%{ transform: translateY(-4px); opacity:1 } }

.pf-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-q {
  appearance: none; cursor: pointer;
  font-family: inherit; font-size: .76rem; color: var(--muted);
  background: var(--wash); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .4em .8em;
  transition: all var(--t) var(--ease); text-align: left;
}
.pf-q:hover { color: var(--ink-strong); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset; transform: translateY(-1px); }

/* ---------------------------------------------- Demo 2: Workflow generator */
.wf-out { display: grid; gap: 14px; }
.wf-out > * { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wf-out.in > * { animation: wf-in .5s var(--ease-out); }
  .wf-out.in > *:nth-child(2){ animation-delay:.05s } .wf-out.in > *:nth-child(3){ animation-delay:.1s }
  .wf-out.in > *:nth-child(4){ animation-delay:.15s } .wf-out.in > *:nth-child(5){ animation-delay:.2s }
}
@keyframes wf-in { from { transform: translateY(10px) } to { transform: none } }

.wf-block { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem 1rem; }
.wf-block__h {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .5em;
}
.wf-block__h b { color: var(--accent); font-weight: 500; }
.wf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px){ .wf-grid2 { grid-template-columns: 1fr; } }

.wf-item { display: flex; flex-direction: column; gap: 2px; padding: .55rem 0; border-bottom: 1px dashed var(--border); }
.wf-item:last-child { border-bottom: 0; }
.wf-item__t { font-size: .9rem; font-weight: 500; color: var(--ink-strong); }
.wf-item__d { font-size: .8rem; color: var(--muted); }

.ep { display: flex; align-items: center; gap: .6em; padding: .35rem 0; }
.ep__m { font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 700;
  padding: .16em .5em; border-radius: var(--r-xs); min-width: 46px; text-align: center; }
.ep__m--get { color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); }
.ep__m--post { color: var(--emerald); background: color-mix(in oklab, var(--emerald) 14%, transparent); }
.ep__p { font-size: .8rem; color: var(--ink); }

.wf-auto { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.wf-auto li { font-size: .84rem; color: var(--ink); }
.wf-auto li::marker { color: var(--primary-2); }

.ph { display: flex; gap: .8em; padding: .5rem 0; }
.ph__n { color: var(--primary-2); font-size: .8rem; padding-top: .1em; }
.ph div { display: flex; flex-direction: column; }
.ph b { font-size: .88rem; color: var(--ink-strong); font-weight: 500; }
.ph span { font-size: .8rem; color: var(--muted); }

.wf-empty { text-align: center; color: var(--faint); display: grid; place-content: center; gap: 10px; padding: 2rem 1rem; }

.skel-row { height: 14px; margin: 8px 0; }

/* ---------------------------------------------- Demo 3: API response */
.api-status {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: 'JetBrains Mono', monospace; font-size: .76rem; font-weight: 500;
  padding: .35em .8em; border-radius: var(--r-pill); border: 1px solid var(--border);
}
.api-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.api-status.is-ok { color: var(--emerald); }
.api-status.is-ok .dot { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
.api-status.is-err { color: var(--warning); }
.api-status.is-err .dot { background: var(--warning); box-shadow: 0 0 8px var(--warning); }

/* ---------------------------------------------- Demo 4: Code review */
.cr-warn {
  display: flex; gap: .7em; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--warning) 32%, transparent);
  font-size: .84rem; color: var(--ink);
}
.cr-warn b { color: var(--warning); }
.cr-note {
  display: flex; gap: .7em; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  font-size: .84rem; color: var(--ink);
}
.cr-note b { color: var(--accent); }
.cr-approve.is-approved { background: linear-gradient(135deg, var(--emerald), color-mix(in oklab,var(--accent) 50%, var(--emerald))); color:#04150e; }
.cr-stamp {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: var(--emerald);
}
.cr-stamp::before { content: "✓"; display: grid; place-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: color-mix(in oklab, var(--emerald) 18%, transparent); }

/* ---------------------------------------------- Stack constellation */
.stack-group { display: flex; flex-direction: column; gap: .8rem; }
.stack-group__h { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); }
.stack-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-chip {
  font-size: .85rem; color: var(--ink);
  padding: .5em .85em; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--border);
  transition: all var(--t) var(--ease); cursor: default;
}
.stack-chip:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: var(--glow-primary); color: var(--ink-strong); }

.stack-wrap {
  display: grid; gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-bottom: clamp(24px, 3vw, 36px);
}
.stack-note { margin-top: .5rem; padding: 1.3rem 1.5rem; }
.stack-note__flow { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  font-size: .82rem; color: var(--ink); }
.stack-note__flow .mono { background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .35em .7em; }
.stack-note__arrow { width: 22px; height: 1px; background: linear-gradient(90deg, var(--primary-2), var(--accent)); position: relative; }
.stack-note__arrow::after { content: ""; position: absolute; right: 0; top: -2px;
  border-left: 4px solid var(--accent); border-block: 2.5px solid transparent; }

/* ---------------------------------------------- Case study cards */
.case-flow { display: grid; gap: 10px; }
.case-step { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
.case-step__k { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); padding-top: .2em; }
.case-step__v { font-size: .9rem; color: var(--ink); line-height: 1.5; }
.case-step + .case-step { border-top: 1px dashed var(--border); padding-top: 10px; }

.case-card { display: flex; flex-direction: column; padding: 1.5rem; }
.case-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.case-card__idx { font-size: 1.1rem; color: var(--faint); }
.case-card__title { font-size: 1.3rem; margin-bottom: 1.1rem; }
.case-card__cta { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.2rem;
  font-size: .86rem; font-weight: 500; color: var(--accent); transition: gap var(--t) var(--ease); }
.case-card:hover .case-card__cta { gap: .9em; }

/* ---------------------------------------------- Philosophy list */
.principle { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.principle:last-child { border-bottom: 0; }
.principle__n { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--primary-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: .3em .6em; }
.principle__t { font-size: 1.05rem; font-weight: 500; color: var(--ink-strong); margin-bottom: .25rem; }
.principle__d { font-size: .92rem; color: var(--muted); }

/* ---------------------------------------------- Builds grid */
.builds-grid {
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.build-card { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.build-ico {
  width: 42px; height: 42px; display: grid; place-content: center;
  border-radius: var(--r-md); color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
  transition: all var(--t) var(--ease); margin-bottom: .3rem;
}
.build-card:hover .build-ico { color: var(--primary-2); transform: translateY(-2px);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.build-card__t { font-size: 1rem; }
.build-card__d { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------- Shared demo-card chrome */
.demo-head { display: flex; align-items: flex-start; gap: 1rem; }
.demo-title { font-size: 1.15rem; margin-top: .5rem; }
.demo-sub { font-size: .85rem; color: var(--muted); margin-top: .35rem; max-width: 52ch; }
.demo-row { display: flex; gap: .6rem; align-items: stretch; }
.demo-row .textarea { flex: 1; min-height: 58px; }
.demo-row .input { flex: 1; }
.demo-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: .7rem; }
.cr-approve-bar { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem;
  padding-top: 1rem; border-top: 1px solid var(--border); }

/* ---------------------------------------------- Intake */
.intake-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .intake-grid { grid-template-columns: 1fr; } }
.intake-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.intake-points li { display: flex; align-items: flex-start; gap: .7em; font-size: .92rem; color: var(--ink); }
.intake-points__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: .5em; flex-shrink: 0;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.intake-aside { margin-top: 1.8rem; padding: 1.2rem 1.3rem; }
.intake-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .intake-form-grid { grid-template-columns: 1fr; } }
.intake-success { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; }
.intake-success__check { width: 56px; height: 56px; display: grid; place-content: center; border-radius: 50%;
  font-size: 1.6rem; color: var(--emerald); margin-bottom: 1rem;
  background: color-mix(in oklab, var(--emerald) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--emerald) 36%, transparent); }

/* ---------------------------------------------- Case study page */
.cs-crumb { display: flex; align-items: center; gap: .6em; font-size: .76rem; color: var(--muted); }
.cs-crumb a { color: var(--muted); transition: color var(--t) var(--ease); }
.cs-crumb a:hover { color: var(--accent); }
.cs-crumb span { color: var(--border-2); }
.cs-head { margin-top: 1.4rem; }
.cs-title { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: 1rem; }
.cs-summary { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); margin-top: 1rem; max-width: 62ch; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.6rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--border); }
.cs-meta dt { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cs-meta dd { margin: .35rem 0 0; font-size: .95rem; color: var(--ink-strong); font-weight: 500; }
.cs-body { display: grid; gap: clamp(40px, 6vw, 64px); }
.cs-block__k { color: var(--accent); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.cs-block__h { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: .7rem 0 1rem; }
.cs-block p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 64ch; }
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 620px) { .cs-metrics { grid-template-columns: 1fr; } }
.cs-metric { padding: 1.2rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.cs-metric__n { display: block; font-size: 1.9rem; font-weight: 600; color: var(--ink-strong);
  background: linear-gradient(100deg, var(--primary-2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-metric__l { display: block; font-size: .82rem; color: var(--muted); margin-top: .3rem; }

/* image placeholder (per house style — striped, mono label) */
.ph-img {
  display: grid; place-content: center;
  background-image: repeating-linear-gradient(135deg, var(--wash) 0 12px, transparent 12px 24px);
  border: 1px dashed var(--border-2); border-radius: var(--r-md);
  color: var(--faint); font-family: 'JetBrains Mono', monospace; font-size: .74rem;
  letter-spacing: .06em; text-align: center; padding: 1rem;
}