/* Chapters 7–11 — Product & Trust: workspace · onboarding · Hermes · reporting · engineering.
   Calm proof layer. Default state of every animated element is its FINAL state; the
   `.is-drawn` classes (added by ch-product.js only when motion is allowed) replay it. */

/* ─────────────────────────────────────────────────────────────
   Shared: .shot-frame — the product-window mock
   ───────────────────────────────────────────────────────────── */

.shot {
  margin: 0 auto;
  max-width: var(--shot-max, 960px);
}

.shot-frame {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.shot-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raise);
  border-bottom: 1px solid var(--card-line);
}
.shot-dots { display: flex; gap: 6px; }
.shot-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-ghost);
}
.shot-crumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.shot-body {
  padding: var(--sp-6);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.shot-cap {
  margin-top: var(--sp-3);
  font-size: var(--size-small);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
}

/* State chips shared by the mocks */
.pchip {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 600; line-height: 1.6;
  padding: 0.1em 0.7em; border-radius: 999px;
  white-space: nowrap;
}
.pchip-ok   { color: var(--green-text);  background: rgba(63, 164, 106, 0.14); }
.pchip-wait { color: var(--accent-text); background: rgba(232, 99, 10, 0.13); }
.pchip-ai   { color: var(--cyan-text);   background: rgba(53, 182, 206, 0.14); }

/* ─────────────────────────────────────────────────────────────
   7 · Departure workspace
   ───────────────────────────────────────────────────────────── */

.ws-head {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: space-between; flex-wrap: wrap;
}
.ws-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.3;
}

.ws-tabs {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
  border-bottom: 1px solid var(--card-line);
}
.ws-tab {
  padding-bottom: var(--sp-3);
  margin-bottom: -1px;
  font-size: var(--size-small); font-weight: 500;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ws-tab.is-on { color: var(--ink); border-bottom-color: var(--orange); }

.ws-day { margin-top: var(--sp-6); }
.ws-daykey {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin-bottom: var(--sp-1);
}
.ws-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--card-line);
}
.ws-row-main { flex: 1 1 auto; min-width: 0; }
.ws-name { font-weight: 500; }
.ws-svc { font-size: var(--size-small); color: var(--ink-mute); }

/* ─────────────────────────────────────────────────────────────
   8 · Onboarding — documents → structured result
   ───────────────────────────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr);
  align-items: center;
  gap: var(--sp-6);
}
.flow-docs { display: grid; gap: var(--sp-3); }

.doc-token {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-card);
}
.doc-token svg { flex: 0 0 auto; color: var(--ink-mute); }
.doc-name {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
}

.flow-arrow { color: var(--orange); display: block; }
.flow-arrow-v { display: none; }
.flow-arrow .arrow-shaft { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.flow-arrow .arrow-head { fill: currentColor; }

.flow.is-drawn .arrow-shaft {
  animation: shaftDraw 520ms var(--ease-out) 180ms backwards;
}
.flow.is-drawn .arrow-head {
  animation: pFadeIn 260ms var(--ease-out) 600ms backwards;
}
@keyframes shaftDraw {
  from { stroke-dasharray: 120; stroke-dashoffset: 120; }
  to   { stroke-dasharray: 120; stroke-dashoffset: 0; }
}
@keyframes pFadeIn { from { opacity: 0; } }

.result-card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}
.result-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; margin-bottom: var(--sp-2);
}
.result-row {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--card-line);
}
.result-num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 1.05rem; color: var(--accent-text);
  min-width: 3.4ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.result-label { font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   9 · Hermes panel
   ───────────────────────────────────────────────────────────── */

.hermes-panel {
  max-width: 420px; margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.hermes-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--card-line);
}
.hermes-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.hermes-body { display: grid; gap: var(--sp-3); padding: var(--sp-4); }

.bubble {
  position: relative;
  max-width: 90%;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.95rem; line-height: 1.5;
}
.bubble-you {
  justify-self: end;
  background: var(--bg);
  border-radius: 12px 12px 4px 12px;
}
.bubble-ai {
  justify-self: start;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px 12px 12px 4px;
}
.b-typed { display: none; }
.bubble.is-typing .b-full { visibility: hidden; }
.bubble.is-typing .b-typed {
  display: block;
  position: absolute;
  inset: var(--sp-3) var(--sp-4);
}
.bubble.is-typing .b-typed::after {
  content: ""; display: inline-block;
  width: 2px; height: 0.95em; margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent-text);
}
.hermes-foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--card-line);
  font-size: var(--size-small); line-height: 1.5;
  color: var(--ink-faint);
}

/* ─────────────────────────────────────────────────────────────
   10 · Reporting — the interactive chapter
   ───────────────────────────────────────────────────────────── */

.rep-q {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
}
.rep-q-text { flex: 1 1 auto; min-width: 0; }
.rep-send { flex: 0 0 auto; color: var(--accent-text); }

.rep-answer { margin-top: var(--sp-6); }
.rep-note {
  margin-top: var(--sp-6);
  font-size: var(--size-small); line-height: 1.5;
  color: var(--ink-faint);
}

.rep-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.rep-chip {
  font-family: var(--font-body);
  font-size: var(--size-small); font-weight: 500; line-height: 1.4;
  padding: 0.6em 1.15em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.rep-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.rep-chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.rep-chip[aria-pressed="true"] {
  background: rgba(232, 99, 10, 0.12);
  color: var(--accent-text);
  border-color: transparent;
}

/* Charts (hand-built SVG; geometry is computed in px so text never rescales) */
.chart { display: block; }
.chart .c-name { fill: var(--ink); font-family: var(--font-body); font-size: 13px; }
.chart .c-axis { fill: var(--ink-mute); font-family: var(--font-body); font-size: 12.5px; }
.chart .c-val  { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 12.5px; }
.chart .c-grid { stroke: var(--line); stroke-width: 1; }
.chart .bar-track { fill: var(--line); }
.chart .bar-cyan { fill: var(--cyan-deep); }
.chart .bar-orange { fill: var(--orange); }
.chart .c-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart .c-line-now  { stroke: var(--orange); stroke-width: 2; }
.chart .c-line-last { stroke: var(--ink-faint); stroke-width: 1.5; }

.chart .bar-fill { transform-origin: left center; transform-box: fill-box; }
.chart.is-drawn .bar-fill {
  animation: barGrow 400ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes barGrow { from { transform: scaleX(0); } }
.chart.is-drawn .c-line {
  animation: lineDraw 520ms var(--ease-out) backwards;
}
@keyframes lineDraw {
  from { stroke-dasharray: 100; stroke-dashoffset: 100; }
  to   { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
.chart.is-drawn .c-val,
.chart.is-drawn .c-legend { animation: pFadeIn 280ms var(--ease-out) 240ms backwards; }

/* ─────────────────────────────────────────────────────────────
   11 · Engineering — dark spec sheet
   ───────────────────────────────────────────────────────────── */

.spec-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
}
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-key {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.4em;
}
.spec-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--size-h3); line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.spec-body { color: var(--ink-mute); max-width: 60ch; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: var(--sp-4); }
  .flow-arrow-h { display: none; }
  .flow-arrow-v { display: block; margin: 0 auto; }
}

@media (max-width: 760px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-6) 0; }
  .spec-key { padding-top: 0; }
}

@media (max-width: 720px) {
  .shot-body { padding: var(--sp-4); }
  .ws-tabs {
    gap: var(--sp-3) var(--sp-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ws-tabs::-webkit-scrollbar { display: none; }
  .rep-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-1);
  }
  .rep-chips::-webkit-scrollbar { display: none; }
  .rep-chip { white-space: nowrap; flex: 0 0 auto; }
  .ws-row { align-items: flex-start; gap: var(--sp-3); }
  .result-card { padding: var(--sp-4); }
  .bubble { max-width: 96%; }
  .rep-q { border-radius: var(--radius); }
}