/* Answer interactives (batch 2, 2026-10-22). Card matches .ans-chart (answer-charts.css); builders add rules below. */
.ans-ix{margin:34px 0 8px}
/* 2026-11-11 watched review: while the placer measures a card's states to reserve the tallest height, nothing inside animates (answer-interactive.js) */
.ans-ix .ix-measuring,.ans-ix .ix-measuring *{transition:none!important;animation:none!important}
.ans-ix figcaption{margin-top:10px;font-size:14px;color:var(--muted)}

/* Design lane 2026-10-22 (answer-interactives-b1.js). Previous: answer-interactives-old-2026-10-22-empty.css.
   Card = the cs4 chart card: mineral body, chamfered corners, steel top rule, light arch-wave head band (reuses .ans-chart-head/.ans-chart-field).
   Controls: the site's aluminium segmented control (segmented-controls.js) for 2 or 3 choices; aluminium chips for longer lists.
   Orange is never text: it marks the contact dot, the chair-time bar and the takeaway rule, always on an ink keyline or beside ink.
   Measured (WCAG 2.x relative luminance, 2026-10-22): ink #203846 on mineral #f5f7f7 11.4:1, on band and table column #e8eff3 10.5:1, on chip silver 10.5:1 to 7.6:1
   (#eceeee to #c9cdcd); white on pressed chip steel 5.5:1 to 7.2:1 (#4f6d80 to #3f5b6c); white on the site segmented thumb 5.1:1 at its mid stop #56737f (3.8:1 at the
   top stop #68869a, above the text line; site component, not changed here); muted #506875 on mineral 5.5:1, on off tile #eceeee 5.0:1; white on steel badge 5.2:1;
   ink on gum pink #f3cdd2 8.4:1, on tongue #eaa7b0 6.2:1; steel label #4c7288 on mineral 4.8:1; disabled chip text #63727a 3.4:1 (disabled, exempt).
   Non-text: steel bar vs silver track 4.1:1; orange chair bar vs track 2.1:1 so it carries an ink keyline (ink vs orange 4.7:1). Focus: 3px ink ring, white inner ring on steel. */
.ans-ix .ix-card{--chamfer:14px;position:relative;padding:0 28px 24px;background:var(--mineral);color:var(--ink);border-top:2px solid var(--steel);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.ans-ix .ix-card.in:not(.still) .ans-chart-field>i{animation:ans-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
.ans-ix h3{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:600;max-width:34em}
.ans-ix p{margin:0;color:var(--ink)}
.ans-ix .ix-intro{margin-top:18px;font-size:16.5px;line-height:1.5;max-width:46em}

/* controls */
.ans-ix .ix-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.ans-ix .ix-ctl+.ix-ctl{margin-top:12px}
.ans-ix .ix-ctl-lab{position:relative;padding-bottom:7px;font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel)}
.ans-ix .ix-ctl-lab::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--steel);opacity:.65}
/* before segmented-controls.js measures the thumb (or if it never loads) the pressed button carries the steel itself */
.ans-ix .ix-seg{display:inline-flex;max-width:100%;padding:5px;border-radius:999px;background:linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,40,52,.28),0 6px 14px -6px rgba(0,0,0,.35)}
.ans-ix .ix-seg>button{min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:600 16px/1.2 var(--font);white-space:nowrap;cursor:pointer}
.ans-ix .ix-seg>button[aria-pressed=true]{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.28)}
.ans-ix .ix-seg:not([data-dio-segmented-ready])>button[aria-pressed=true]{background:linear-gradient(180deg,#4f6d80 0%,#476577 45%,#3f5b6c 100%);color:#fff}
.ans-ix .ix-seg>button:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff}

.ans-ix .ix-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border:0;border-radius:6px;
  background:linear-gradient(180deg,#eceeee 0%,#dfe2e2 50%,#d4d7d7 100%);color:var(--ink);font:600 15.5px/1.25 var(--font);text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,40,52,.25),inset 0 0 0 1px rgba(32,56,70,.14)}
.ans-ix .ix-chip[aria-pressed=true]{background:linear-gradient(180deg,#4f6d80 0%,#476577 45%,#3f5b6c 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.35)}
.ans-ix .ix-chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:inset 0 0 0 2px #fff}
@media(hover:hover){.ans-ix .ix-chip:not([aria-pressed=true]):not([aria-disabled=true]):hover{background:linear-gradient(180deg,#f3f4f4 0%,#e6e9e9 50%,#dadddd 100%)}}
.ans-ix .ix-chip[aria-disabled=true]{color:#63727a;cursor:default;opacity:.75}

/* stage and result */
.ans-ix .ix-stage{margin-top:18px}
.ans-ix .ix-svg{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.ans-ix .ix-svg text{font-size:12.5px;fill:var(--ink);paint-order:stroke;stroke:#f5f7f7;stroke-width:3px;stroke-linejoin:round}
.ans-ix .ix-svg text.ix-lab{font-size:12.5px;font-weight:600}
.ans-ix .ix-svg text.ix-big{font-size:21px;font-weight:650}
.ans-ix .ix-out{margin-top:16px;min-height:4.6em;font-size:16.5px;line-height:1.5;max-width:46em}
.ans-ix .ix-out strong{display:block;font-weight:650}
.ans-ix .ix-out span{display:block;margin-top:2px}
.ans-ix .ix-out ul{margin:6px 0 0;padding-left:20px;color:var(--ink)}
.ans-ix .ix-out li{margin:3px 0}
.ans-ix .ix-out .ix-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--ink);font-weight:600;text-underline-offset:5px}
.ans-ix .ix-stats p{margin:0 0 4px}
.ans-ix .ix-stats strong{display:inline}
.ans-ix .ix-take{margin-top:22px;padding:2px 0 2px 18px;border-left:4px solid var(--orange);font-size:17px;line-height:1.55;font-weight:500;max-width:46em}
.ans-ix .ix-fine{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:60em}
.ans-ix .ix-fine+.ix-fine{margin-top:8px}

/* small settle motion: fades and one ping, all under a second; off under reduced motion */
.ans-ix .ix-fade{transition:opacity .45s ease}
.ans-ix .ix-slot,.ans-ix .ix-slot>g{transition:transform .5s cubic-bezier(.22,.7,.25,1)}
.ans-ix .ix-slot>g{transform-box:fill-box;transform-origin:50% 0}
.ans-ix .ix-pop{transform-box:fill-box;transform-origin:center;animation:ix-pop .35s ease-out both}
@keyframes ix-pop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.ans-ix .ix-ping{transform-box:fill-box;transform-origin:center;animation:ix-ping .6s ease-out 2 both}
@keyframes ix-ping{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.ans-ix .ix-part{transition:opacity .4s ease}
.ans-ix .ix-part.dim{opacity:.4}
.ans-ix .ix-part.on path,.ans-ix .ix-part.on rect{stroke-width:3.2}

/* golden-ratio table */
.ans-ix .ix-table{margin-top:14px;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.ans-ix .ix-table th,.ans-ix .ix-table td{padding:7px 14px 7px 0;text-align:left;border-bottom:1px solid var(--rule)}
.ans-ix .ix-table thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:650}
.ans-ix .ix-table td{padding-left:10px}
.ans-ix .ix-table[data-col=rule] .c-rule,.ans-ix .ix-table[data-col=real] .c-real{background:#e8eff3;font-weight:650;color:var(--ink)}

/* calendar vs chair */
.ans-ix .ix-week{position:relative;height:30px;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#eceeee 0%,#e3e6e6 45%,#d9dcdc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,40,52,.16),inset 0 0 0 1px rgba(32,56,70,.12)}
.ans-ix .ix-week>i{position:absolute;top:0;bottom:0;width:1px;background:rgba(32,56,70,.28);z-index:2}
.ans-ix .ix-week-bar{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);
  transition:width .9s cubic-bezier(.22,.7,.25,1),background .3s}
/* chair time: about 4 to 6 hours of a 168-hour week. Solid to 4 h (2.4%), soft edge to 6 h (3.6%) */
.ans-ix .ix-week.is-chair .ix-week-bar{width:3.6%;min-width:10px;background:linear-gradient(90deg,#ed873c 0%,#ed873c 66%,rgba(237,135,60,.35) 100%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ans-ix .ix-week-ends{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:13.5px;color:var(--muted)}

/* travel track */
.ans-ix .ix-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:ix}
.ans-ix .ix-track li{position:relative;margin:0;padding:12px 12px 14px;background:#fff;border-top:3px solid var(--steel);font-size:15px;line-height:1.4;color:var(--ink);counter-increment:ix}
.ans-ix .ix-track li::before{content:counter(ix);display:block;font-size:12px;letter-spacing:.12em;font-weight:650;color:var(--steel)}
.ans-ix .ix-track li.is-hi{border-top-color:var(--orange);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ans-ix .ix-track strong{display:block;font-weight:650;margin-bottom:2px}
.ans-ix .ix-track span{display:block}
.ans-ix .ix-day{display:grid;gap:6px;margin-top:4px}
.ans-ix .ix-day em{font-style:normal;font-size:13.5px;color:var(--muted)}
.ans-ix .ix-pill{display:block;padding:6px 10px;border-radius:999px;background:#e8eff3;font-size:13.5px;line-height:1.3;animation:ix-pop .35s ease-out both}
.ans-ix .ix-pill b{display:block;font-weight:650}

/* warranty tiles */
.ans-ix .ix-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;color:var(--ink)}
.ans-ix .ix-tiles li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;background:#fff;border-left:3px solid var(--steel);font-size:15.5px;line-height:1.4;transition:background .3s,border-color .3s}
.ans-ix .ix-tiles li.off{background:#eceeee;border-left-color:var(--muted);color:var(--muted)}
.ans-ix .ix-mark{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--steel);color:#fff;font-size:13px;font-weight:700;line-height:1}
.ans-ix .ix-tiles li.off .ix-mark{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--muted)}
.ans-ix .ix-terms{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:16px 0 0;font-size:15.5px;line-height:1.45}
.ans-ix .ix-terms dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel);padding-top:3px}
.ans-ix .ix-terms dd{margin:0}

/* fork test and reasons */
.ans-ix .ix-foods,.ans-ix .ix-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ans-ix .ix-food{justify-content:space-between}
.ans-ix .ix-badge{flex:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.ans-ix .ix-badge:empty{display:none}
.ans-ix .ix-food.tested.ok .ix-badge{padding:2px 7px;border-radius:999px;background:var(--steel);color:#fff}
.ans-ix .ix-food.tested.wait .ix-badge{padding:1px 6px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ans-ix .ix-food[aria-pressed=true].ok .ix-badge{background:#fff;color:var(--ink)}
.ans-ix .ix-verdict{padding:12px 16px;background:#fff;border-left:3px solid var(--steel)}

/* shade key */
.ans-ix .ix-key{display:flex;justify-content:space-between;gap:12px;max-width:520px;margin-top:8px;font-size:14px;color:var(--muted)}
.ans-ix .ix-key.is-final span:first-child::before{content:'\2191  '}
.ans-ix .ix-key.is-final span:last-child::after{content:'  \2193'}

/* week steps */
.ans-ix .ix-range{flex:1 1 220px;max-width:420px;min-height:44px;margin:0;accent-color:var(--steel);cursor:pointer}
.ans-ix .ix-range:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ans-ix .ix-meter{margin-top:6px;max-width:520px;height:14px;border-radius:3px;overflow:hidden;background:linear-gradient(180deg,#eceeee 0%,#e3e6e6 45%,#d9dcdc 100%);box-shadow:inset 0 0 0 1px rgba(32,56,70,.12)}
.ans-ix .ix-meter>span{display:block;height:100%;width:40%;background:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);transition:width .5s cubic-bezier(.22,.7,.25,1)}
.ans-ix .ix-meter-t{margin-top:6px;font-size:14px;color:var(--muted)}

@media(max-width:700px){
  .ans-ix .ix-card{--chamfer:10px;padding:0 16px 18px}
  .ans-ix .ans-chart-head{margin:0 -16px;padding:18px 16px 16px}
  .ans-ix h3{font-size:19px}
  .ans-ix .ix-seg>button{padding:12px 14px;font-size:15px}
  .ans-ix .ix-svg text,.ans-ix .ix-svg text.ix-lab{font-size:17px}
  .ans-ix .ix-svg text.ix-big{font-size:28px}
  .ans-ix .ix-take{font-size:16.5px;padding-left:14px}
  .ans-ix .ix-track{grid-template-columns:1fr;gap:6px}
  .ans-ix .ix-track li{display:grid;grid-template-columns:1.6em minmax(0,1fr);column-gap:8px;padding:10px 12px}
  .ans-ix .ix-track li::before{grid-row:1/span 3;padding-top:2px}
  .ans-ix .ix-day{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .ans-ix .ix-day em{grid-column:1/-1}
  .ans-ix .ix-tiles{grid-template-columns:1fr}
  .ans-ix .ix-terms{grid-template-columns:1fr;gap:2px}
  .ans-ix .ix-terms dd+dt{margin-top:10px}
  .ans-ix .ix-foods,.ans-ix .ix-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ans-ix .ix-chip{padding:10px 12px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.ans-ix *,.ans-ix *::before,.ans-ix *::after{animation:none!important;transition:none!important}}
html.reduce-motion .ans-ix *,html.reduce-motion .ans-ix *::before,html.reduce-motion .ans-ix *::after{animation:none!important;transition:none!important}
.ans-ix .ix-card.still *{animation:none!important}