/* Small, shared interaction cues; no external runtime or simulated progress. */
:root {
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --route-quick: #aa2d00;
  --route-detail: #176567;
}
button, .button, .text-button, input, textarea, select {
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease, transform 180ms var(--motion-ease);
}
button:not(:disabled):active, .button:not(:disabled):active { transform: scale(.975); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid #176567;
  outline-offset: 3px;
}
button.primary:not(:disabled):hover, .button.primary:not(:disabled):hover,
.chat-submit:not(:disabled):hover { box-shadow: 0 4px 12px #18232120; }
.route-screen .route-card {
  --route-color: var(--route-quick);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--route-color);
  border: 1px solid #ffffff20;
  box-shadow: 0 3px 10px #1923220a;
  transition: transform 260ms var(--motion-ease), box-shadow 260ms ease;
}
.route-screen #choose-detail { --route-color: var(--route-detail); }
.route-screen .route-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: -110px;
  top: -100px;
  border-radius: 50%;
  background: #ffffff0a;
  transition: transform 420ms var(--motion-ease), background-color 260ms ease;
  pointer-events: none;
}
.route-screen .route-card::after {
  content: '↗';
  position: absolute;
  right: 22px;
  bottom: 15px;
  font-size: 23px;
  color: #ffffffb3;
  transition: transform 260ms var(--motion-ease), color 180ms ease;
  pointer-events: none;
}
.route-screen .route-card svg {
  transition: transform 320ms var(--motion-ease);
}
.route-screen .route-card .route-sub { padding-right: 15px; }
.route-screen .route-card:focus-visible { outline-color: var(--route-color); }
.route-screen .route-card:not(:disabled):active { transform: scale(.985); }
.route-screen .route-card:disabled,
.route-screen .route-card:disabled:hover {
  background: var(--route-color);
  opacity: .6;
  transform: none;
  box-shadow: none;
}
/* Keep checkboxes recognizable: multiple choices are not on/off switches. */
.regen-targets label, .chat-targets label, .standard-row {
  transition: color 180ms ease, background-color 180ms ease;
}
.regen-targets label:has(input:checked), .standard-row:has(input:checked) {
  color: #305c3a;
}
.standard-row:has(input:checked) { background: #eaf2e7; }
.chat-targets label:has(input:checked) { color: #603c87; }
input[type=checkbox]:checked { animation: check-settle 240ms var(--motion-ease); }
.icon-button svg, .icon svg { transition: transform 220ms var(--motion-ease); }
/* One loader in the actual status heading, not a percentage bar. */
.assessment-progress .progress-current { border-left-color: #176567; }
.assessment-progress .progress-current::after { display: none; animation: none; }
.assessment-progress .progress-eyebrow {
  color: #176567;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.assessment-progress .progress-eyebrow::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid #d7e6df;
  border-top-color: #176567;
  border-right-color: #176567;
  border-radius: 50%;
  animation: motion-orbit 1100ms linear infinite;
}
.assessment-progress .progress-step {
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}
.assessment-progress .progress-step.current {
  border-color: #176567;
  background: #eff7f4;
  color: #176567;
}
.assessment-progress .progress-step.current .progress-number {
  border-color: #176567;
  background: #176567;
  color: white;
}
.assessment-progress[data-failed=true] .progress-current { border-left-color: #96351d; }
.assessment-progress[data-failed=true] .progress-eyebrow { color: #96351d; }
.assessment-progress[data-failed=true] .progress-eyebrow::before { display: none; }
.assessment-progress[data-connection=lost] .progress-eyebrow::before { animation-play-state: paused; }
@media (hover:hover) and (pointer:fine) {
  .route-screen .route-card:not(:disabled):hover {
    background: var(--route-color);
    transform: translateY(-4px);
    box-shadow: 0 10px 22px #17232120;
  }
  .route-screen .route-card:not(:disabled):hover::before {
    transform: scale(1.22);
    background: #ffffff10;
  }
  .route-screen .route-card:not(:disabled):hover::after {
    transform: translate(2px,-2px);
    color: white;
  }
  .route-screen .route-card:not(:disabled):hover svg { transform: translateY(-2px) rotate(-5deg); }
  .icon-button:not(:disabled):hover svg, .icon:not(:disabled):hover svg { transform: scale(1.08); }
}
@keyframes check-settle { 0% { transform: scale(.87); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes motion-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  button, .button, .text-button, input, textarea, select,
  .route-screen .route-card, .route-screen .route-card::before,
  .route-screen .route-card::after, .route-screen .route-card svg,
  .regen-targets label, .chat-targets label, .standard-row,
  .icon-button svg, .icon svg,
  .assessment-progress .progress-step { transition: none; }
  input[type=checkbox]:checked, .assessment-progress .progress-eyebrow::before,
  .status[data-kind=busy]::before, .busy-spinner { animation: none; }
  button:not(:disabled):active, .button:not(:disabled):active,
  .route-screen .route-card:not(:disabled):hover,
  .route-screen .route-card:not(:disabled):active,
  .route-screen .route-card:not(:disabled):hover::before,
  .route-screen .route-card:not(:disabled):hover::after,
  .route-screen .route-card:not(:disabled):hover svg,
  .icon-button:not(:disabled):hover svg, .icon:not(:disabled):hover svg { transform: none; }
}
@media (forced-colors:active) {
  .route-screen .route-card { border: 2px solid ButtonText; }
  .assessment-progress .progress-eyebrow::before { border-color: GrayText; border-top-color: Highlight; }
}