/* NewMedSkills LMS — learner surfaces.
   Tailwind (CDN) carries the layout; this file holds the few things utilities express
   badly: the derived course artwork, the completion ring, line-clamping, and the two
   arrow shapes the brand runs through every surface.
   Scoped to lms-* so nothing here can reach the staff console (con-*) or the candidate
   portal (cp-*) — three design systems share this codebase and must not blend.
   Colour comes from the shared tokens (cms/static/cms/design/tokens/colors.css), with
   fallbacks that mirror them. */

/* ---- Derived course artwork -------------------------------------------------
   A tinted band, a domain glyph held at low contrast, and the module code. The image
   area is deliberately short: a course tile is read title-first, and the 16:9 block it
   replaced pushed every word below the fold of the card. */
.lms-art { position: relative; overflow: hidden; background: var(--art-tint, var(--greige-300, #efe9e0)); }
.lms-art__glyph { position: absolute; right: -14px; bottom: -18px; width: 108px; height: 108px;
  color: var(--art-ink, var(--brown-700, #4f3631)); opacity: .13; pointer-events: none; }
.lms-art__glyph svg { width: 100%; height: 100%; }
.lms-art__code { position: absolute; left: 12px; top: 11px; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; color: var(--art-ink, var(--brown-700, #4f3631)); opacity: .78; }
.lms-art__rule { position: absolute; left: 12px; right: 12px; bottom: 11px; height: 2px;
  border-radius: 2px; background: var(--art-ink, var(--brown-700, #4f3631)); opacity: .18; }
.lms-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Completion ring ---------------------------------------------------------
   A percentage bar reads as decoration at tile scale; a ring reads as a state. */
.lms-ring { display: block; color: var(--c-600, #d1472f); flex: none; }
.lms-ring--muted { color: var(--brown-300, #b5a7a1); }

/* ---- Text clamping ----------------------------------------------------------- */
.lms-clamp-1, .lms-clamp-2, .lms-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; }
.lms-clamp-1 { -webkit-line-clamp: 1; }
.lms-clamp-2 { -webkit-line-clamp: 2; }
.lms-clamp-3 { -webkit-line-clamp: 3; }

/* ---- Card ------------------------------------------------------------------- */
.lms-card { transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
.lms-card:hover { border-color: var(--greige-600, #c4b9b2); box-shadow: 0 8px 26px -12px rgba(57,30,26,.22); }
.lms-card:focus-within { border-color: var(--c-500, #ff5122); }
@media (prefers-reduced-motion: no-preference) {
  .lms-card:hover { transform: translateY(-2px); }
}

/* ---- Domain chip ------------------------------------------------------------- */
.lms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.6;
  background: var(--art-tint, var(--greige-300, #efe9e0)); color: var(--art-ink, var(--brown-700, #4f3631));
  white-space: nowrap; }
.lms-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: .55; flex: none; }

/* ---- Section heading rule ---------------------------------------------------- */
.lms-rule { display: flex; align-items: center; gap: 12px; }
.lms-rule::after { content: ''; flex: 1; height: 1px; background: var(--greige-400, #e3ddd2); }

/* ---- Arrow CTA ---------------------------------------------------------------
   The mark is built from arrows and the guide runs that shape through every primary
   CTA; the public site already does (.pub-cta). Colour stays with the Tailwind
   utilities on the element — this class only cuts the point, from the shared geometry
   tokens. A clipped box cannot show a border, a box-shadow or the UA focus ring, so
   focus squares the notch off and draws its own outline, exactly as .pub-cta does.
   Give the point room: pr-* about three steps more than pl-*. Element selectors so the
   shape outranks the utilities Tailwind injects after this sheet. */
a.lms-cta, button.lms-cta {
  clip-path: var(--arrow-clip, polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%));
  border-radius: var(--arrow-radius, 10px) 0 0 var(--arrow-radius, 10px);
}
a.lms-cta:focus-visible, button.lms-cta:focus-visible {
  clip-path: none; border-radius: var(--arrow-radius, 10px);
  outline: 3px solid var(--c-700, #ac3e33); outline-offset: 3px;
}

/* ---- Eyebrow badge -------------------------------------------------------------
   Section labels wear the same arrow at label scale. The guide reserves all-caps for
   eyebrows, so the tracking lives here rather than in each template. The default is
   the brand tint with orange-700 text (4.7:1 — the only orange that carries text this
   small); --quiet is the neutral for section heads that should not compete. */
.lms-eyebrow { display: inline-flex; align-items: center; padding: 3px 24px 3px 10px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap;
  color: var(--c-700, #ac3e33); background: var(--c-100, #faddd0);
  clip-path: var(--arrow-clip, polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%));
  border-radius: var(--arrow-radius, 10px) 0 0 var(--arrow-radius, 10px); }
.lms-eyebrow--quiet { color: var(--brown-600, #5f4742); background: var(--greige-300, #efe9e0); }