/* ===========================================================================
   InvestVerdict — "what do I do next" cues
   ---------------------------------------------------------------------------
   Two different questions get two different colours, and they are never mixed:

     AMBER  — something is waiting on you (an input the numbers need)
     GOLD   — the way forward (the next screen, once this one is done)

   Red is left alone. Red already means "this is wrong" in the tie-out checks,
   and an empty box you have not filled yet is not a mistake — telling somebody
   they have erred when they simply have not got there yet is how people learn
   to ignore warnings.

   Every cue removes itself the moment it is satisfied. A hint that stays lit
   after you have done the thing stops being read.
   =========================================================================== */

:root{
  --iv-need: #b8860b;              /* amber — waiting on you        */
  --iv-need-bg: rgba(201,152,42,.10);
  --iv-need-ring: rgba(201,152,42,.45);
  --iv-next: #c9982a;              /* gold — the way forward        */
}

/* ── an input the calculation is waiting for ─────────────────────────────── */
.iv-need{
  background: var(--iv-need-bg) !important;
  border-color: var(--iv-need-ring) !important;
  box-shadow: 0 0 0 3px rgba(201,152,42,.13);
  transition: box-shadow .18s ease, background .18s ease;
}
.iv-need:focus{
  box-shadow: 0 0 0 3px rgba(201,152,42,.28);
  outline: none;
}

/* A short word next to the box saying WHY it matters. Placed after the field
   rather than as a tooltip — a hint you have to hover for is a hint nobody
   sees on a phone. */
.iv-need-tag{
  display:inline-block; margin-left:7px; vertical-align:middle;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--iv-need); background:var(--iv-need-bg);
  border:1px solid var(--iv-need-ring); border-radius:999px; padding:2px 8px;
  white-space:nowrap;
}

/* ── the way to the next screen ──────────────────────────────────────────── */
.iv-next{
  position: relative;
  box-shadow: 0 0 0 0 rgba(201,152,42,.55);
  animation: iv-pulse 2.4s ease-out infinite;
  border-radius: 10px;
}
@keyframes iv-pulse{
  0%   { box-shadow: 0 0 0 0   rgba(201,152,42,.50); }
  70%  { box-shadow: 0 0 0 12px rgba(201,152,42,0); }
  100% { box-shadow: 0 0 0 0   rgba(201,152,42,0); }
}
/* Someone who has asked not to see motion still needs to know where to go —
   they get the ring, just not the movement. */
@media (prefers-reduced-motion: reduce){
  .iv-next{ animation: none; box-shadow: 0 0 0 3px rgba(201,152,42,.45); }
}

/* ── the bar that says what is still missing ─────────────────────────────── */
.iv-todo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 0 16px; padding:11px 14px;
  background:var(--iv-need-bg); border:1px solid var(--iv-need-ring);
  border-left:4px solid var(--iv-need); border-radius:10px;
  font-size:13px; line-height:1.5;
}
.iv-todo b{ color:var(--iv-need); }
.iv-todo .iv-go{
  margin-left:auto; background:var(--iv-next); color:#12203a;
  font-weight:700; font-size:12.5px; border:0; border-radius:8px;
  padding:7px 14px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.iv-todo.iv-done{
  background:rgba(21,122,76,.08); border-color:rgba(21,122,76,.35);
  border-left-color:#157a4c;
}
.iv-todo.iv-done b{ color:#157a4c; }