/* ============================================================
   syllabus-map.css — the "what this session contributes to the
   official syllabus" banner, shared by EVERY class page in both
   decks (FSWD UI23PC510CS/511CS and OOP-through-Java UI24PC320CS).

   WHY THIS FILE EXISTS
   Labs already quote their official Programming Exercise word for
   word. Students asked the obvious follow-up question about the
   theory classes: "which part of the syllabus is THIS hour?"
   This banner answers that in one glance, at the top of the class.

   AUTHORITY NOTE (important, and stated on the banner itself):
   the UDC content units are the final word on ORDER. The official
   syllabus lists topics; the UDC deliberately reshuffles some of
   them for a better learning progression. So this banner names the
   official UNIT and the official TOPIC WORDS the session delivers,
   without claiming the official document teaches them in this
   sequence.

   One file, linked from every deck, so the component can be
   corrected in a single place.
   ============================================================ */

.sylmap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(18px,4vw,44px);
}

.sylmap-in{
  margin:clamp(18px,2.4vw,30px) 0 0;
  border-radius:18px;
  background:#0F172A;                 /* the deck's terminal ink */
  border:2px dashed rgba(148,163,184,.55);
  padding:clamp(15px,1.8vw,22px) clamp(17px,2vw,26px);
  color:#E2E8F0;
  box-shadow:0 6px 18px rgba(15,23,42,.16);
}

/* the little monospace key line */
.sylmap-k{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(8.8px,.8vw,10.2px);
  font-weight:700;
  letter-spacing:.16em;
  color:#6EE7B7;
  margin:0 0 10px;
}
.sylmap-k svg{
  width:13px;height:13px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* the verbatim syllabus words */
.sylmap-q{
  margin:0;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(14px,1.45vw,19px);
  line-height:1.55;
  color:#F8FAFC;
}
.sylmap-q b{font-style:normal;font-weight:800;color:#FDE68A;}

/* the plain-words gloss under the quote */
.sylmap-p{
  margin:11px 0 0;
  font-size:clamp(12px,1.02vw,14px);
  line-height:1.62;
  color:#CBD5E1;
}
.sylmap-p b{color:#F8FAFC;}
.sylmap-p code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.88em;font-weight:700;
  background:rgba(148,163,184,.16);
  border:1px solid rgba(148,163,184,.34);
  border-radius:5px;
  padding:1px 6px;
  color:#A7F3D0;
  white-space:nowrap;
}

/* unit / exercise pills */
.sylmap-tags{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:12px;
}
.sylmap-tag{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(8.5px,.76vw,9.8px);
  font-weight:700;
  letter-spacing:.12em;
  border-radius:999px;
  padding:5px 11px;
  background:rgba(110,231,183,.13);
  border:1px solid rgba(110,231,183,.5);
  color:#A7F3D0;
  white-space:nowrap;
}
.sylmap-tag.is-course{
  background:rgba(253,230,138,.12);
  border-color:rgba(253,230,138,.5);
  color:#FDE68A;
}
.sylmap-tag.is-note{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.42);
  color:#CBD5E1;
}

@media (max-width:640px){
  .sylmap-in{border-radius:14px;}
  .sylmap-q{font-size:14px;}
}

/* respect the decks' reduced-motion contract: nothing here animates,
   so there is deliberately no transition to disable. */