/* ===========================================================================
   InvestVerdict — the learning marker and its panel
   ---------------------------------------------------------------------------
   The marker has to be findable without being loud. It sits beside the label,
   not the input, because the question a learner has is about the CONCEPT, not
   about the box.

   It is drawn in the InvestVerdict gold, because that is the brand and because
   a learning cue is an INVITATION, not an alarm. Amber already means "you must
   fill this" and red means "this is wrong" on these screens; a heavy third
   colour competing with both is how people stop reading colour at all. The
   panel header is cream with a gold rule rather than a solid slab — a dark
   block of colour with reversed-out text is the hardest thing on the page to
   read, and a title is the one line that must be effortless.
   =========================================================================== */

.iv-learn{
  display:inline-grid; place-items:center;
  width:16px; height:16px; margin-left:6px; padding:0;
  vertical-align:middle;
  border:1px solid #9bbf9b; border-radius:50%;
  background:#eef4ee; color:#1f7a3d;
  font:700 10px/1 'DM Sans', system-ui, sans-serif;
  cursor:pointer; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.iv-learn:hover{ background:#3c7d3f; color:#fff; border-color:#3c7d3f; transform:scale(1.12); }
.iv-learn:focus-visible{ outline:2px solid #3c7d3f; outline-offset:2px; }

/* ── the panel ────────────────────────────────────────────────────────────
   Centred and modal rather than a tooltip: this is several paragraphs of
   teaching, and a hover card that vanishes when the mouse drifts cannot be
   read, let alone read twice. It also has to work on a phone, where hover
   does not exist at all. */
.iv-teach{
  position:fixed; inset:0; z-index:10000;
  display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(5,17,31,.55);
}
.iv-teach.open{ display:flex; }

.iv-teach-card{
  background:#fff; color:#20272f;
  width:100%; max-width:600px; max-height:84vh;
  display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  font-family:'DM Sans', system-ui, sans-serif;
}
.iv-teach-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px 14px;
  background:#f3f8f3; color:#1d1d1d;
  border-bottom:1px solid #c9d3c9; box-shadow:inset 0 3px 0 #3c7d3f;
}
.iv-teach-head h3{
  margin:0; flex:1;
  font-size:17px; font-weight:700; letter-spacing:.2px; color:#20272f;
}
.iv-teach-x{
  border:1px solid #c9d3c9; background:#fff; color:#6d675a;
  width:28px; height:28px; border-radius:7px;
  font-size:20px; line-height:1; cursor:pointer;
}
.iv-teach-x:hover{ background:#e8efe8; color:#1d1d1d; }

.iv-teach-body{ padding:6px 20px 20px; overflow-y:auto; }

/* Each section keeps its own heading so the five questions stay visually
   separate — a learner scanning for "where do I find this" should not have to
   read the definition again to get to it. */
.iv-teach-sec{ padding:14px 0; border-bottom:1px solid #e6ece6; }
.iv-teach-sec:last-child{ border-bottom:0; }
.iv-teach-k{
  display:block; margin-bottom:5px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#2f6b32;
}
.iv-teach-sec p{ margin:0; font-size:13.5px; line-height:1.62; color:#333; }

/* "Watch out for" is the section that stops real mistakes. It is the only part
   of this panel allowed to be red, and it is ruled and tinted so that a learner
   skimming the panel cannot miss it — the other four sections teach, this one
   prevents. */
.iv-teach-sec:last-child{
  background:#fdecea; border-left:4px solid #c0392b;
  border-radius:8px; padding:12px 14px; margin-top:6px;
}
.iv-teach-sec:last-child .iv-teach-k{ color:#c0392b; }
.iv-teach-sec:last-child p{ color:#8c2820; }

@media (max-width:640px){
  .iv-teach{ padding:0; align-items:flex-end; }
  .iv-teach-card{ max-width:none; max-height:90vh; border-radius:14px 14px 0 0; }
}