/* ============================================================================
   css/walkthrough.css — Guided audit walkthrough (phase 1: Keyword Rankings)
   ----------------------------------------------------------------------------
   The overlay Arnold drives on a screenshare. Four beats per module:
     1  finding    — the modal panel carrying the argument
     2  reveal     — the demo interstitial (the honest beat, spoken over)
     3  data       — overlay docks to a bottom bar so the REAL tab is visible
     4  ask        — the modal returns with the one question only they can answer

   Everything here is inert unless js/walkthrough.js mounts #wt-root, which only
   happens behind the ?walkthrough= URL flag. No rule in this file selects a bare
   dashboard element except one scoped to body.wt-docked, so a tenant who never
   passes the flag cannot be affected by the stylesheet merely loading.

   THREE VISUAL DEFECTS THIS PROJECT HAS ALREADY SHIPPED — guarded here AND
   asserted in tests/walkthrough-render-verify.mjs, because each one passed a
   "does the element exist" check:
     a) stretched pills — a pill in a flex COLUMN inherits align-items:stretch
        and spans the whole card. Every pill row below sets align-items:center
        and every pill sets align-self:center + width:fit-content.
     b) floating button over content — the docked bar is position:fixed, so it
        would sit ON TOP of the last rows of the tab. body.wt-docked pays for
        its own height in scroll padding (--wt-dock-h) instead.
     c) ragged inline label — the metric value and its label share a baseline
        via an explicit grid, never inline-block guesswork.
   ========================================================================== */

#wt-root {
  --wt-dock-h: 76px;
  --wt-max: 620px;
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* The scrim belongs to the MODAL beats only. While docked the overlay must
     not intercept clicks anywhere except the bar itself, or the prospect
     cannot scroll or click the real tab we just revealed. */
  background: rgba(15, 27, 43, 0.62);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}

#wt-root[hidden] { display: none; }

/* ── Beat 3: docked. Scrim off, pointer-events off, bar pinned bottom. ────── */
#wt-root.wt-mode-data {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  align-items: flex-end;
  justify-content: stretch;
  padding: 0;
}
#wt-root.wt-mode-data .wt-dock { pointer-events: auto; }

/* Defect (b): the fixed bar pays for its own height so it never covers the
   last rows of the tab it just revealed. --wt-dock-h is MEASURED and written
   onto :root by _syncDockHeight() — the bar wraps to roughly double height on
   a phone, so the 76px here is only a pre-measurement fallback. */
body.wt-docked #main-content { padding-bottom: calc(var(--wt-dock-h, 76px) + 16px); }

/* The walkthrough is shown TO A PROSPECT, so the internal agency tooling has to
   go for its duration — the same suppression audit mode already applies in
   css/audit.css, for the same reason. It also removes the one element the
   docked bar would otherwise sit on top of (the create FAB, bottom-right). */
body.wt-active #tc-create-fab,
body.wt-active [data-tc-add-task],
body.wt-active .tc-add-task { display: none !important; }

/* ── The modal card (beats 1, 2, 4) ───────────────────────────────────────── */
.wt-card {
  width: 100%;
  max-width: var(--wt-max);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1A2940);
  border: 1px solid var(--border, #E6EBF2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 27, 43, 0.28);
  padding: 26px 28px 22px;
  font-family: inherit;
}

.wt-eyebrow {
  display: flex;
  align-items: center;      /* defect (a): never stretch the children */
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #5E6C82);
}
.wt-step {
  align-self: center;       /* defect (a) */
  width: fit-content;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg-tint, #F0F4F8);
  color: var(--text-secondary, #455570);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.wt-card h2 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary, #1A2940);
}
.wt-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary, #455570); }
.wt-card p:last-of-type { margin-bottom: 0; }

/* ── The measured number (beat 1) ─────────────────────────────────────────── */
/* Defect (c): value and label are grid cells on a shared baseline, not inline
   blocks that go ragged the moment the value changes width. */
.wt-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  margin: 16px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--border, #E6EBF2);
  border-left: 4px solid var(--tc-primary, #6AABB5);
  border-radius: 10px;
  background: var(--bg-card-soft, #FAFBFC);
}
.wt-metric-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary, #1A2940);
  font-variant-numeric: tabular-nums;
}
.wt-metric-label { font-size: 14px; line-height: 1.45; color: var(--text-secondary, #455570); }
.wt-metric-basis {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #5E6C82);
}

/* HONESTY GATE. When the metric cannot be computed we render this instead of a
   number. It must never look like a measurement, so it carries no big figure
   and no colour that reads as a result. */
/* The LOADING state shares this shape but must never share its wording: an
   in-flight fetch is not an absence. See _syncDockHeight's sibling note in
   js/walkthrough.js. */
.wt-metric.wt-metric-unmeasured,
.wt-metric.wt-metric-loading { border-left-color: var(--text-muted, #5E6C82); }
.wt-metric.wt-metric-unmeasured .wt-metric-value,
.wt-metric.wt-metric-loading .wt-metric-value { display: none; }
.wt-metric.wt-metric-unmeasured .wt-metric-label,
.wt-metric.wt-metric-loading .wt-metric-label {
  grid-column: 1 / -1;
  font-weight: 600;
  color: var(--text-secondary, #455570);
}
.wt-metric.wt-metric-loading .wt-metric-label { color: var(--text-muted, #5E6C82); font-weight: 500; }

/* ── Beat 2: the demo interstitial ────────────────────────────────────────── */
.wt-card.wt-card-reveal { border-top: 5px solid var(--chart-orange, #F29900); }
.wt-demo-flag {
  display: flex;
  align-items: center;      /* defect (a) */
  gap: 9px;
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(242, 153, 0, 0.14);
  color: #8A5A00;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.wt-demo-flag::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chart-orange, #F29900);
}
.wt-reason {
  margin: 14px 0 0;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--bg-tint, #F0F4F8);
  border: 1px solid var(--border, #E6EBF2);
}
.wt-reason-label {
  display: block;           /* defect (c): its own line, never ragged beside the text */
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #5E6C82);
}
.wt-reason-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary, #455570); }

/* ── Beat 4: the ask. Control shapes mirror the onboarding hub. ───────────── */
.wt-question { margin: 4px 0 14px; font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--text-primary, #1A2940); }
.wt-guess {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-card-soft, #FAFBFC);
  border: 1px solid var(--border, #E6EBF2);
}
.wt-guess-label {
  display: block;           /* defect (c) */
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #5E6C82);
}
.wt-guess-value { margin: 0 0 7px; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--text-primary, #1A2940); }
.wt-guess-basis { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted, #5E6C82); }

.wt-editor { margin: 0 0 14px; }
.wt-editor[hidden] { display: none; }
.wt-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 74px;
  padding: 11px 13px;
  border: 1.5px solid var(--border-strong, #D4DBE6);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary, #1A2940);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.wt-input:focus-visible { outline: 3px solid rgba(26, 115, 232, 0.35); outline-offset: 1px; border-color: #1A73E8; }
.wt-input[aria-invalid="true"] { border-color: var(--chart-red, #D93025); }

.wt-saved {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(30, 142, 62, 0.09);
  border: 1px solid rgba(30, 142, 62, 0.28);
  font-size: 14px;
  line-height: 1.5;
  color: #14622C;
}
.wt-saved[hidden] { display: none; }
.wt-saved.wt-saved-err {
  background: rgba(217, 48, 37, 0.08);
  border-color: rgba(217, 48, 37, 0.3);
  color: #A3231B;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.wt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;      /* defect (a) */
  gap: 10px;
  margin-top: 20px;
}
.wt-btn {
  align-self: center;       /* defect (a) */
  width: fit-content;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 11px 18px;
  border: 1.5px solid var(--border-strong, #D4DBE6);
  border-radius: 100px;
  background: #fff;
  color: var(--text-primary, #1A2940);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.wt-btn:hover { border-color: var(--tc-primary-dk, #3F8B97); color: var(--tc-primary-dk, #3F8B97); }
.wt-btn:focus-visible { outline: 3px solid rgba(26, 115, 232, 0.4); outline-offset: 2px; }
.wt-btn:active { transform: scale(0.98); }
.wt-btn-primary { background: var(--tc-primary-dk, #3F8B97); border-color: var(--tc-primary-dk, #3F8B97); color: #fff; }
.wt-btn-primary:hover { background: #35757F; border-color: #35757F; color: #fff; }
.wt-btn-quiet { border-color: transparent; background: transparent; color: var(--text-muted, #5E6C82); }
.wt-btn-quiet:hover { background: var(--bg-tint, #F0F4F8); color: var(--text-secondary, #455570); }
.wt-btn[aria-pressed="true"] { background: #0E6F64; border-color: #0E6F64; color: #fff; }
.wt-btn[aria-pressed="true"]:hover { background: #0B5A51; border-color: #0B5A51; color: #fff; }
.wt-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Beat 3: the docked bar ───────────────────────────────────────────────── */
.wt-dock {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--wt-dock-h);
  display: flex;
  align-items: center;      /* defect (a) */
  gap: 14px;
  padding: 12px 20px;
  background: #10233A;
  border-top: 3px solid var(--chart-orange, #F29900);
  box-shadow: 0 -8px 28px rgba(15, 27, 43, 0.3);
  color: #fff;
}
.wt-dock-text { flex: 1 1 220px; min-width: 0; }
.wt-dock-title { margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #fff; }
.wt-dock-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.76); }
.wt-dock-actions {
  display: flex;
  align-items: center;      /* defect (a) */
  gap: 9px;
  flex: 0 0 auto;
}
.wt-dock .wt-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.wt-dock .wt-btn:hover { background: rgba(255, 255, 255, 0.19); border-color: #fff; color: #fff; }
.wt-dock .wt-btn-primary { background: var(--chart-orange, #F29900); border-color: var(--chart-orange, #F29900); color: #241800; }
.wt-dock .wt-btn-primary:hover { background: #FFB020; border-color: #FFB020; color: #241800; }

/* ── Phone. 390px is the width the render-verify asserts against. ─────────── */
@media (max-width: 640px) {
  #wt-root { padding: 12px; align-items: flex-end; }
  #wt-root:not(.wt-mode-data) { padding-bottom: 12px; }
  .wt-card { padding: 20px 18px 18px; max-height: calc(100vh - 24px); border-radius: 14px; }
  .wt-card h2 { font-size: 20px; }
  .wt-metric-value { font-size: 26px; }
  /* One column so a long label can never squeeze the number to a ragged wrap. */
  .wt-metric { grid-template-columns: 1fr; row-gap: 2px; }
  .wt-metric-label, .wt-metric-basis { grid-column: 1 / -1; }
  .wt-actions .wt-btn { flex: 1 1 100%; width: auto; text-align: center; }
  .wt-dock { flex-wrap: wrap; padding: 11px 14px; gap: 10px; }
  .wt-dock-text { flex: 1 1 100%; }
  .wt-dock-actions { flex: 1 1 100%; }
  .wt-dock-actions .wt-btn { flex: 1 1 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-btn { transition: none; }
  .wt-btn:active { transform: none; }
}