/* =============================================================================
   ODUEX feature-teardown.css
   Signature feature 3: "Where is your business leaking?" The interactive
   operations teardown. Loaded by the two pages that carry the block:
   the homepage (section 7) and /teardown/.

     <link rel="stylesheet" href="/assets/css/feature-teardown.css">

   CONTRACT COMPLIANCE
   - Every selector is scoped to .teardown. Nothing here can reach another
     component.
   - No token is redefined. No ad-hoc colour, duration or easing. Lengths that
     are not spacing (component widths, stroke widths, control sizes) follow the
     same convention core.css uses for .nav-drawer-body and .wa-pill.
   - No font-family declaration. The display face is borrowed by putting the
     existing .display-3 class on the question titles; the mono face by putting
     the existing .mono class on the small labels.
   - Gold budget, counted per viewport:
       question phase  the current rail segment + the selected option dot = 2
       final question  the current rail segment + the primary button        = 2
       results         the submit button + the two required markers         = 2
     Leaks are amber (--warn), never gold: a leak is a warning, not a flourish.
   - The leak pulse runs a FINITE three iterations and then rests on a solid
     amber ring. "Maximum one ambient infinite loop per viewport" is
     non-negotiable, and a map can hold four leaks at once.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. READY GATE
   The static written offer is the default state. teardown.js adds .is-ready to
   the section only once it has successfully mounted, which is what swaps in the
   diagnostic. Gated this way (rather than on the `js` flag from boot.js) a
   failure to load teardown.js leaves a working offer on screen instead of a
   dead widget, the same reasoning that gates .disclosure-panel on .js-ready.
   -------------------------------------------------------------------------- */

.teardown .td-app{ display: none; }
.teardown.is-ready .td-app{ display: block; }
.teardown.is-ready .td-static{ display: none; }

.teardown .td-static .panel > * + *{ margin-top: var(--space-5); }

/* -----------------------------------------------------------------------------
   2. LAYOUT
   Questions left, map right. Single column below 1024px, map underneath.
   -------------------------------------------------------------------------- */

.teardown .td-grid{
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px){
  .teardown .td-grid{
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-16);
  }
  .teardown .td-col-map{
    position: sticky;
    top: calc(var(--nav-h) + var(--space-6));
  }
}

/* -----------------------------------------------------------------------------
   3. PROGRESS RAIL
   Five segments. Answered steps are ink, the current step is the one gold
   moment on screen while the questions are running, unreached steps are a
   hairline. Each segment is a real button so a visitor can go back and change
   an answer with the keyboard.
   -------------------------------------------------------------------------- */

.teardown .td-rail{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.teardown .td-rail-track{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  flex: 1 1 auto;
  margin: 0;
}

.teardown .td-rail-step{
  display: block;
  width: 100%;
  height: 40px;             /* a 40px hit area around a 3px rail */
  padding: 0;
  border-radius: var(--r-sm);
  position: relative;
}
.teardown .td-rail-step::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transform: scaleY(1);
  transition: background-color var(--d-base) var(--ease-out-quart),
              transform var(--d-base) var(--ease-out-quart);
}
.teardown .td-rail-step:not([disabled]):hover::before{ background: var(--ink-faint); }
.teardown .td-rail-seg.is-done .td-rail-step::before{ background: var(--ink); }
.teardown .td-rail-seg.is-current .td-rail-step::before{
  background: var(--gold-surface);
  transform: scaleY(1.6);
}
.teardown .td-rail-step[disabled]{ cursor: default; }

.teardown .td-rail-count{
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   4. QUESTIONS
   One at a time, big type, chunky targets. The entrance is an animation rather
   than a transition from an invisible base state: if the class is never added
   the question is simply visible, which is the safe failure.
   -------------------------------------------------------------------------- */

/* A floor height so the layout does not jump between a three-option question
   and a five-option one. teardown.js releases it on the results view, where
   every question is hidden and the floor would otherwise open a gap between
   the rail and the headline. */
.teardown .td-stage{ min-height: 340px; }
.teardown.is-result .td-stage{ min-height: 0; }
.teardown.is-result .td-rail{ margin-bottom: var(--space-10); }

.teardown .td-q:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-3);
  border-radius: var(--r-md);
}
.teardown .td-q.is-in{
  animation: td-enter var(--d-base) var(--ease-out-expo) both;
}

@keyframes td-enter{
  from{ opacity: 0; transform: translateX(14px); }
  to{ opacity: 1; transform: none; }
}

.teardown .td-q-title{
  display: block;
  margin-bottom: var(--space-6);
  max-width: var(--measure-narrow);
}
.teardown .td-q .hint{ margin-bottom: var(--space-4); max-width: var(--measure-narrow); }

.teardown .td-options{
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure-narrow);
}

.teardown .td-option{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight-ui);
  transition: transform var(--d-fast) var(--ease-out-quart),
              background-color var(--d-fast) var(--ease-out-quart),
              border-color var(--d-fast) var(--ease-out-quart),
              box-shadow var(--d-fast) var(--ease-out-quart);
}
.teardown .td-option:hover{
  background: var(--paper-card);
  border: 1px solid var(--ink-faint);
  box-shadow: var(--elev-1);
}
.teardown .td-option:active{ transform: scale(0.99); }
.teardown .td-option[aria-checked="true"]{
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--elev-1);
}

.teardown .td-option-dot{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--control-line);
  background: var(--paper);
  transition: border-width var(--d-fast) var(--ease-out-quart);
}
.teardown .td-option[aria-checked="true"] .td-option-dot{
  border: 6px solid var(--gold-surface);
}
.teardown .td-option-label{ flex: 1 1 auto; }

.teardown .td-q .field textarea{ max-width: var(--measure-narrow); }
.teardown .td-q .btn-row{ margin-top: var(--space-6); }

.teardown .td-nav{ margin-top: var(--space-8); }
.teardown .td-nav[hidden]{ display: none; }

/* -----------------------------------------------------------------------------
   5. RESULTS
   -------------------------------------------------------------------------- */

.teardown .td-result{
  animation: td-enter var(--d-base) var(--ease-out-expo) both;
}
.teardown .td-result-title{
  margin-bottom: var(--space-6);
  max-width: var(--measure-narrow);
}
.teardown .td-result-title:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-2);
}

.teardown .td-leaks{
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-10);
}
.teardown .td-leaks:empty{ display: none; margin-bottom: 0; }

.teardown .td-leak{
  position: relative;
  padding-left: var(--space-8);
}
.teardown .td-leak::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--warn);
}
.teardown .td-leak-name{
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: var(--space-1);
}
.teardown .td-leak-text{
  display: block;
  color: var(--ink-body);
  max-width: none;
}

.teardown .td-result-note{
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-10);
  color: var(--ink-body);
}

.teardown .td-ask{
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.teardown .td-ask > p{ margin-bottom: var(--space-6); }
.teardown .td-ask .enquiry-form{ max-width: var(--measure-narrow); }

.teardown .td-sent{
  padding: var(--space-6);
  border: 1px solid var(--gold-tint-32);
  border-radius: var(--r-lg);
  background: var(--gold-tint-08);
  color: var(--ink);
  max-width: var(--measure-narrow);
}

.teardown .td-alt{
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.teardown .td-or{
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.teardown .td-restart-row{ margin-top: var(--space-8); max-width: none; }

/* -----------------------------------------------------------------------------
   6. THE MAP
   A single SVG capped near its natural size, so the type inside it stays at a
   readable rendered size on every viewport instead of scaling with the column.
   -------------------------------------------------------------------------- */

.teardown .td-map{
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* The column has to say what it is before there is anything in it. Without
   this the map area is a blank 380px void beside question one for as long as
   the visitor takes to answer, which on the homepage is a two-column band. */
.teardown .td-map-cap{
  display: grid;
  gap: var(--space-1);
  max-width: 380px;
  margin: 0 auto var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.teardown .td-map-cap-k{
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.teardown .td-map-cap-v{
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* Connectors carry meaning, so they sit at --ink-faint (5.3:1) rather than at a
   decorative hairline. pathLength="1" normalises every path so one dash value
   works for all of them. */
.teardown .td-link{
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--d-slow) var(--ease-out-expo),
              stroke var(--d-base) var(--ease-out-quart);
}
.teardown .td-link.is-drawn{ stroke-dashoffset: 0; }
/* The last hop when leaks were found: the flow does not fully arrive. */
.teardown .td-link.is-broken{ stroke: var(--warn); }

/* An empty stage box sits at a decorative hairline. Once it holds an answer it
   carries meaning, so it steps up to --control-line (3.67:1 on paper), the
   token for a boundary a reader has to be able to see, not just sense. */
.teardown .td-node-box{
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1;
  transition: stroke var(--d-base) var(--ease-out-quart);
}
.teardown .td-node.is-in .td-node-box{ stroke: var(--control-line); }
.teardown .td-node.is-leak .td-node-box{ stroke: var(--warn); }


/* The pulse lives on its own ring so the node border itself never animates.
   Three iterations, then it rests solid. Finite by design. */
.teardown .td-node-ring{
  fill: none;
  stroke: var(--warn);
  stroke-width: 2;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out-quart);
}
.teardown .td-node.is-leak .td-node-ring{
  opacity: 1;
  animation: td-leak-pulse 2400ms var(--ease-out-quart) 3;
}
@keyframes td-leak-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.28; }
}

/* SVG text is painted with `fill`, set explicitly rather than inherited
   through currentColor, because the two colour specs disagree about when
   currentColor resolves inside an SVG subtree, and a leak label that renders
   in the wrong colour is not a bug worth relying on the browser to avoid. */
/* The stage label is legible from the first paint at full contrast. It is what
   makes an empty column mean something rather than read as a rendering fault:
   the visitor can see INTAKE / SEEN BY / RECORDED / FOLLOW-UP / OUTCOME before
   answering anything, so the map states what it is about to map. */
.teardown .td-node-kind{
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  fill: var(--ink-muted);
}

/* Only the answer itself arrives per step. That is what "the map builds itself
   node by node" describes: the frame is the diagram, the values are the run. */
.teardown .td-node-value{
  font-size: var(--fs-sm);
  fill: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-base) var(--ease-out-expo),
              transform var(--d-base) var(--ease-out-expo);
}
.teardown .td-node.is-in .td-node-value{ opacity: 1; transform: none; }

.teardown .td-leader{
  fill: none;
  stroke: var(--warn);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--d-base) var(--ease-out-expo);
}
.teardown .td-node.is-leak .td-leader{ stroke-dashoffset: 0; }

.teardown .td-leak-label{
  opacity: 0;
  fill: var(--warn);
  transition: opacity var(--d-base) var(--ease-out-expo);
}
.teardown .td-node.is-leak .td-leak-label{ opacity: 1; }
.teardown .td-leak-tag{
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
}
/* Deliberately not .td-leak-text: that class belongs to the results list and
   carries body copy. The map label is its own class so the two can never
   inherit each other's size. */
.teardown .td-leak-phrase{ font-size: var(--fs-xs); }

/* Restoring a saved run must not replay five animations at once. */
.teardown .td-map.is-instant *{
  transition: none !important;
  animation: none !important;
}

.teardown .td-map-note{
  display: grid;
  gap: var(--space-1);
  max-width: 380px;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.teardown .td-map-note-k{
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--ink-muted);
}
.teardown .td-map-note-v{
  color: var(--ink-body);
  font-size: var(--fs-sm);
}

/* -----------------------------------------------------------------------------
   7. SMALL VIEWPORTS
   "No animation below 480px except reveals and the drawer." The map still
   builds; it simply arrives at each state instantly.
   -------------------------------------------------------------------------- */

@media (max-width: 479px){
  .teardown .td-stage{ min-height: 0; }
  .teardown .td-q.is-in,
  .teardown .td-result{ animation: none; }
  .teardown .td-node-value,
  .teardown .td-link,
  .teardown .td-leader,
  .teardown .td-leak-label,
  .teardown .td-node-box,
  .teardown .td-node-ring{ transition: none; }
  .teardown .td-node.is-in .td-node-value{ transform: none; }
  .teardown .td-node.is-leak .td-node-ring{ animation: none; }
}

/* -----------------------------------------------------------------------------
   8. REDUCED MOTION
   core.css already neutralises durations globally. These rules are the explicit
   statement of the requirement: the map draws instantly per step, with no path
   animation and no pulse. teardown.js mirrors this by skipping the entrance
   class dance entirely rather than running it at zero duration.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .teardown .td-q.is-in,
  .teardown .td-result{ animation: none !important; }
  .teardown .td-node-value{ transform: none !important; transition: none !important; }
  .teardown .td-link{ transition: none !important; }
  .teardown .td-link.is-drawn{ stroke-dashoffset: 0 !important; }
  .teardown .td-leader{ transition: none !important; }
  .teardown .td-node.is-leak .td-leader{ stroke-dashoffset: 0 !important; }
  .teardown .td-node.is-leak .td-node-ring{ animation: none !important; }
  .teardown .td-option:hover,
  .teardown .td-option:active{ transform: none !important; }
  .teardown .td-rail-seg.is-current .td-rail-step::before{ transform: none !important; }
}