/* Cameralla Course Widget — front end
   Everything is scoped under .cmrla-course so it never clashes with the theme. */

.cmrla-course {
  --cc-orange: #fe9705;
  --cc-orange-d: #e07f00;     /* fills and hovers — set from Course settings */
  --cc-orange-text: #a25a00;  /* orange TEXT on light backgrounds: 4.8:1 on the soft orange, 5.3:1 on white */
  --cc-orange-soft: #fff3e0;
  --cc-ink: #1d1c1a;
  --cc-slate: #5b6770;
  --cc-muted: #6b7178;        /* 4.9:1 on white — #8a8f94 was 3.3:1 and failed AA */
  --cc-bg: #faf6f0;
  --cc-card: #ffffff;
  --cc-line: rgba(20, 20, 18, .10);
  --cc-line2: rgba(20, 20, 18, .18);
  --cc-ok: #1d9e75;
  --cc-radius: 20px;
  --cc-shadow: 0 14px 44px -22px rgba(20, 20, 18, .28);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--cc-ink);
  line-height: 1.5;
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  padding: 24px;
  display: block;
  -webkit-font-smoothing: antialiased;
}
.cmrla-course, .cmrla-course * { box-sizing: border-box; }
.cmrla-course { width: 100%; }

/* Elementor (and other builders) put the shortcode in a flex row where the widget
   is sized to its content instead of the container, which makes the course look
   narrow for no obvious reason. Only widened when it is the sole child, so real
   multi-column layouts are left alone. */
.e-con:has(> .elementor-widget:only-child .cmrla-course) > .elementor-widget,
.elementor-container:has(> .elementor-column:only-child .cmrla-course) > .elementor-column {
  width: 100%;
  flex-grow: 1;
  min-width: 0;
}

/* Full-bleed: escape a narrow theme/Elementor container entirely.
   --cc-sbw is the scrollbar width, set by the script, so this never creates
   a horizontal scrollbar on Windows. */
.cmrla-course.cc-bleed {
  width: calc(100vw - var(--cc-sbw, 0px));
  max-width: calc(100vw - var(--cc-sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--cc-sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--cc-sbw, 0px) / 2));
  border-radius: 0;
  padding-left: max(24px, 4vw);
  padding-right: max(24px, 4vw);
}
.cmrla-course .cc-wrap { max-width: var(--cc-max, 1180px); margin: 0 auto; }
.cmrla-course .cc-card {
  background: var(--cc-card); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
}
.cmrla-course [hidden] { display: none !important; }

/* ------------------------------------------------------ language switcher */
.cmrla-course .cc-langbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 4px 16px;
}
.cmrla-course .cc-langlabel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--cc-muted); font-weight: 500;
}
.cmrla-course .cc-langlabel svg { width: 15px; height: 15px; }
.cmrla-course .cc-langbtns {
  display: inline-flex; gap: 4px; background: #fff; padding: 4px;
  border: 1px solid var(--cc-line); border-radius: 999px;
}
.cmrla-course .cc-langbtn {
  appearance: none; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cc-slate);
  padding: 7px 15px; border-radius: 999px; transition: background .15s, color .15s;
}
.cmrla-course .cc-lang-short { display: none; }
.cmrla-course .cc-langbtn:hover { background: #faf7f2; color: var(--cc-ink); }
.cmrla-course .cc-langbtn.is-active { background: var(--cc-orange-soft); color: var(--cc-orange-text); }
.cmrla-course .cc-langbtn:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 2px; }

/* ------------------------------------------------------------------ layout */
/* minmax(0,…) rather than plain fr: a grid track defaults to a minimum of its
   content's min-content size, so one long, non-wrapping lesson title (Norwegian
   and German run longer than English) would otherwise push the whole widget
   wider than the screen. */
.cmrla-course .cc-top {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px; align-items: stretch;
}
.cmrla-course .cc-top > *,
.cmrla-course .cc-lessons-inner,
.cmrla-course .cc-list,
.cmrla-course .cc-lesson,
.cmrla-course .cc-lh,
.cmrla-course .cc-notespanel,
.cmrla-course .cc-meta { min-width: 0; }

/* ------------------------------------------------------------------ player */
.cmrla-course .cc-player {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--cc-radius); overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 62% 18%, rgba(255,255,255,.20), transparent 52%),
              linear-gradient(180deg, #8198a7 0%, #5b7382 32%, #3a4d59 72%, #243038 100%);
}
.cmrla-course .cc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 26%, transparent 52%, rgba(0,0,0,.62));
}
.cmrla-course .cc-embed { position: absolute; inset: 0; z-index: 5; display: none; background: #000; }
.cmrla-course .cc-player.cc-playing .cc-embed { display: block; }
.cmrla-course .cc-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmrla-course .cc-player.cc-playing .cc-scrim,
.cmrla-course .cc-player.cc-playing .cc-play,
.cmrla-course .cc-player.cc-playing .cc-cta,
.cmrla-course .cc-player.cc-playing .cc-pcap,
.cmrla-course .cc-player.cc-playing .cc-ptime,
.cmrla-course .cc-player.cc-playing .cc-prog,
.cmrla-course .cc-player.cc-playing .cc-pill-left { display: none; }

.cmrla-course .cc-pill {
  position: absolute; top: 16px; z-index: 3; background: #fff; color: var(--cc-orange-text);
  font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.cmrla-course .cc-pill svg { width: 13px; height: 13px; }
.cmrla-course .cc-pill-left { left: 16px; cursor: default; }
.cmrla-course .cc-pill-right { right: 16px; opacity: .92; }
.cmrla-course .cc-pill-right:hover { opacity: 1; }

.cmrla-course .cc-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  color: var(--cc-orange); box-shadow: 0 12px 34px -10px rgba(0,0,0,.45);
  transition: transform .15s; padding: 0;
}
.cmrla-course .cc-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.cmrla-course .cc-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cmrla-course .cc-play svg { width: 30px; height: 30px; margin-left: 5px; }

.cmrla-course .cc-cta {
  position: absolute; left: 50%; top: calc(50% + 62px); transform: translateX(-50%); z-index: 3;
  pointer-events: none; text-align: center;
}
.cmrla-course .cc-cta-label {
  display: inline-block; background: rgba(0,0,0,.42); backdrop-filter: blur(4px);
  padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.cmrla-course .cc-pcap {
  position: absolute; left: 18px; bottom: 24px; right: 96px; z-index: 3;
  font-size: 15px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.cmrla-course .cc-ptime {
  position: absolute; right: 18px; bottom: 24px; z-index: 3;
  font-size: 15px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.cmrla-course .cc-prog {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: rgba(255,255,255,.32);
}
.cmrla-course .cc-prog > i { display: block; height: 100%; width: 0; background: #fff; transition: width .3s; }

/* overlays: up next, locked, course complete */
.cmrla-course .cc-upnext,
.cmrla-course .cc-locked,
.cmrla-course .cc-done {
  position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 14, 12, .82); backdrop-filter: blur(6px); text-align: center; padding: 24px;
}
.cmrla-course .cc-upnext-eyebrow,
.cmrla-course .cc-done-in p {
  display: block; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7); font-weight: 600;
}
.cmrla-course .cc-upnext-title { display: block; font-size: 21px; font-weight: 600; margin: 8px 0 4px; }
.cmrla-course .cc-upnext-count { display: block; font-size: 13.5px; color: rgba(255,255,255,.72); }
.cmrla-course .cc-upnext-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.cmrla-course .cc-btn {
  appearance: none; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; transition: background .15s;
}
.cmrla-course .cc-btn:hover { background: rgba(255,255,255,.14); }
.cmrla-course .cc-btn-solid {
  background: var(--cc-orange); border-color: var(--cc-orange); color: #fff; text-decoration: none;
  display: inline-block;
}
.cmrla-course .cc-btn-solid:hover { background: var(--cc-orange-d); border-color: var(--cc-orange-d); }
.cmrla-course .cc-locked-ic, .cmrla-course .cc-done-ic {
  display: flex; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  align-items: center; justify-content: center; background: rgba(255,255,255,.14);
}
.cmrla-course .cc-done-ic { background: var(--cc-ok); }
.cmrla-course .cc-locked-ic svg, .cmrla-course .cc-done-ic svg { width: 24px; height: 24px; }
.cmrla-course .cc-locked-in b, .cmrla-course .cc-done-in b { display: block; font-size: 20px; font-weight: 600; }
.cmrla-course .cc-done-in p { margin: 10px auto 18px; max-width: 42ch; text-transform: none; letter-spacing: 0; font-size: 14px; }
.cmrla-course .cc-locked-cta {
  display: inline-block; margin-top: 14px; color: #fff; background: var(--cc-orange);
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 13.5px; text-decoration: none;
}

/* ----------------------------------------------------------- lesson list */
.cmrla-course .cc-lessons { position: relative; box-shadow: none; }
.cmrla-course .cc-lessons-inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 18px 12px; }
.cmrla-course .cc-lh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cmrla-course .cc-lh b { font-size: 16px; font-weight: 600; }
.cmrla-course .cc-lh span { font-size: 13px; color: var(--cc-muted); white-space: nowrap; }
.cmrla-course .cc-bar { height: 4px; background: var(--cc-line); border-radius: 999px; margin: 13px 0 8px; overflow: hidden; flex: none; }
.cmrla-course .cc-bar > i { display: block; height: 100%; width: 0; background: var(--cc-ok); border-radius: 999px; transition: width .35s; }
.cmrla-course .cc-list {
  flex: 1; overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.cmrla-course .cc-list.is-short { -webkit-mask-image: none; mask-image: none; }

.cmrla-course .cc-lesson {
  display: flex; align-items: center; gap: 13px; padding: 11px 9px; border-radius: 13px;
  cursor: pointer; transition: background .12s; position: relative;
}
.cmrla-course .cc-lesson:hover { background: #faf7f2; }
.cmrla-course .cc-lesson:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: -2px; }
.cmrla-course .cc-lesson.active { background: var(--cc-orange-soft); }
.cmrla-course .cc-lesson[data-locked="1"] { opacity: .72; }

.cmrla-course .cc-ic {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 600; background: #ececec; color: var(--cc-muted);
}
.cmrla-course .cc-ic svg { width: 15px; height: 15px; }
.cmrla-course .cc-ic-check, .cmrla-course .cc-ic-play, .cmrla-course .cc-ic-lock { display: none; }
.cmrla-course .cc-lesson.is-done .cc-ic { background: var(--cc-ok); color: #fff; }
.cmrla-course .cc-lesson.is-done .cc-ic-num { display: none; }
.cmrla-course .cc-lesson.is-done .cc-ic-check { display: block; }
.cmrla-course .cc-lesson.active .cc-ic { background: var(--cc-orange); color: #fff; }
.cmrla-course .cc-lesson.active .cc-ic-num,
.cmrla-course .cc-lesson.active .cc-ic-check { display: none; }
.cmrla-course .cc-lesson.active .cc-ic-play { display: block; }
.cmrla-course .cc-lesson[data-locked="1"] .cc-ic-num,
.cmrla-course .cc-lesson[data-locked="1"] .cc-ic-check,
.cmrla-course .cc-lesson[data-locked="1"] .cc-ic-play { display: none; }
.cmrla-course .cc-lesson[data-locked="1"] .cc-ic-lock { display: block; }

.cmrla-course .cc-tt { flex: 1; min-width: 0; }
.cmrla-course .cc-tt b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmrla-course .cc-tt .cc-sub { font-size: 12.5px; color: var(--cc-muted); }
.cmrla-course .cc-time { font-size: 13px; color: var(--cc-muted); white-space: nowrap; }
.cmrla-course .cc-lesson.active .cc-tt b,
.cmrla-course .cc-lesson.active .cc-time,
.cmrla-course .cc-lesson.active .cc-tt .cc-sub { color: var(--cc-orange-text); }

/* thin per-lesson resume bar */
.cmrla-course .cc-resume {
  position: absolute; left: 52px; right: 9px; bottom: 5px; height: 2px;
  background: var(--cc-line); border-radius: 999px; overflow: hidden;
}
.cmrla-course .cc-resume > i { display: block; height: 100%; background: var(--cc-orange); }

.cmrla-course .cc-reset {
  appearance: none; background: none; border: none; border-top: 1px solid var(--cc-line);
  cursor: pointer; font: inherit; width: 100%; text-align: left;
  font-size: 12px; color: var(--cc-muted); display: flex; align-items: center; gap: 6px;
  padding: 10px 4px 2px; margin-top: 6px;
}
.cmrla-course .cc-reset:hover { color: var(--cc-slate); }
.cmrla-course .cc-reset svg { width: 13px; height: 13px; }

/* --------------------------------------------------------- lesson notes */
.cmrla-course .cc-notespanel { margin-top: 18px; padding: 4px 22px 20px; }
.cmrla-course .cc-ntabs {
  display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--cc-line);
  margin-bottom: 16px; flex-wrap: wrap;
}
.cmrla-course .cc-ntabs-scroll { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cmrla-course .cc-ntab {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--cc-muted);
  padding: 14px 12px; margin-bottom: -1px;
}
.cmrla-course .cc-ntab:hover { color: var(--cc-slate); }
.cmrla-course .cc-ntab.is-active { color: var(--cc-orange-text); border-bottom-color: var(--cc-orange); }
.cmrla-course .cc-markdone {
  margin-left: auto; appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--cc-line2); background: #fff; color: var(--cc-slate);
}
.cmrla-course .cc-markdone svg { width: 13px; height: 13px; }
.cmrla-course .cc-markdone:hover { border-color: var(--cc-ok); color: var(--cc-ok); }
.cmrla-course .cc-markdone.is-done { background: var(--cc-ok); border-color: var(--cc-ok); color: #fff; }
.cmrla-course .cc-npanel { color: var(--cc-slate); font-size: 15px; line-height: 1.65; max-width: 76ch; }
.cmrla-course .cc-npanel p { margin: 0 0 12px; }
.cmrla-course .cc-npanel p:last-child { margin-bottom: 0; }
.cmrla-course .cc-npanel .cc-empty { color: var(--cc-muted); font-style: italic; }
.cmrla-course .cc-reslink {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600;
  color: var(--cc-orange-text); background: var(--cc-orange-soft); padding: 10px 17px; border-radius: 999px;
}
.cmrla-course .cc-reslink svg { width: 16px; height: 16px; }
.cmrla-course .cc-practice-cta { display: inline-block; margin-top: 6px; }

/* -------------------------------------------------------------- meta bar */
.cmrla-course .cc-meta { margin-top: 18px; padding: 16px 22px; display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; }
.cmrla-course .cc-m { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cc-slate); }
.cmrla-course .cc-m svg { width: 17px; height: 17px; color: var(--cc-muted); flex: none; }
.cmrla-course .cc-m b { color: var(--cc-ink); font-weight: 600; }
.cmrla-course .cc-taught {
  border-bottom: 1.6px dashed var(--cc-muted); font-weight: 600; color: var(--cc-ink);
  padding-bottom: 1px; cursor: pointer;
}
.cmrla-course .cc-taught:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 3px; }
.cmrla-course .cc-lightpill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--cc-orange-soft); color: var(--cc-orange-text); font-weight: 600; font-size: 13.5px;
  padding: 8px 15px; border-radius: 999px;
}
.cmrla-course .cc-lightpill svg { width: 14px; height: 14px; }

.cmrla-course .cc-desc { margin: 32px 4px 6px; max-width: 760px; color: var(--cc-slate); font-size: 15.5px; line-height: 1.65; }
.cmrla-course .cc-desc p { margin: 0 0 14px; }

/* ------------------------------------------------------------- AI block */
.cmrla-course .cc-aihead { margin: 42px 4px 4px; font-size: 27px; font-weight: 600; letter-spacing: -.01em; color: var(--cc-ink); }
.cmrla-course .cc-aisub { margin: 0 4px 18px; color: var(--cc-slate); font-size: 15.5px; }
.cmrla-course .cc-aicard {
  padding: 32px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 32px; align-items: center;
}
.cmrla-course .cc-aicard > * { min-width: 0; }
.cmrla-course .cc-eyebrow { color: var(--cc-orange-text); font-weight: 700; font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; }
.cmrla-course .cc-aicard h3 { font-size: 27px; font-weight: 600; margin: 11px 0 13px; letter-spacing: -.01em; color: var(--cc-ink); }
.cmrla-course .cc-aicard p { color: var(--cc-slate); font-size: 15px; line-height: 1.65; max-width: 48ch; margin: 0; }
.cmrla-course .cc-fbpill {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; max-width: 100%;
  margin-top: 20px; border: 1px solid var(--cc-line);
  border-radius: 999px; padding: 7px 16px 7px 15px; font-size: 13.5px; color: var(--cc-slate); background: #fff;
}
.cmrla-course .cc-lab { display: inline-flex; align-items: center; gap: 7px; color: var(--cc-orange-text); font-weight: 600; }
.cmrla-course .cc-lab svg { width: 15px; height: 15px; }
.cmrla-course .cc-cnt { background: var(--cc-orange-soft); color: var(--cc-orange-text); font-weight: 600; padding: 5px 11px; border-radius: 999px; margin: 0 9px; }
.cmrla-course .cc-buy { color: var(--cc-orange-text); font-weight: 600; margin-left: 11px; text-decoration: none; }
.cmrla-course .cc-drop {
  border: 2px dashed var(--cc-line2); border-radius: 18px; padding: 42px 24px; text-align: center;
  cursor: pointer; transition: .18s; background: #fff; display: block; text-decoration: none; color: inherit;
}
.cmrla-course .cc-drop:hover { border-color: var(--cc-orange); background: #fffdf8; }
.cmrla-course .cc-circ {
  width: 66px; height: 66px; border-radius: 50%; background: var(--cc-orange-soft); color: var(--cc-orange);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.cmrla-course .cc-circ svg { width: 26px; height: 26px; }
.cmrla-course .cc-drop b { display: block; font-size: 18px; font-weight: 600; color: var(--cc-ink); }
.cmrla-course .cc-drop span { display: block; margin-top: 6px; font-size: 13px; color: var(--cc-muted); }

/* ---------------------------------------------------------------- modal */
.cmrla-course .cc-modal {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 12, 8, .55);
}
.cmrla-course .cc-modal.cc-open { display: flex; }
.cmrla-course .cc-modal-card {
  position: relative; background: #fff; border-radius: 22px; max-width: 460px; width: 100%;
  padding: 30px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); max-height: 88vh; overflow-y: auto;
}
.cmrla-course .cc-modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #f2ece3; color: var(--cc-slate); cursor: pointer; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.cmrla-course .cc-modal-close:hover { background: #e7ddd0; }
.cmrla-course .cc-bio-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cmrla-course .cc-bio-avatar {
  flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--cc-orange-soft);
  color: var(--cc-orange-text); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; background-size: cover; background-position: center;
}
.cmrla-course .cc-bio-name { font-size: 18px; font-weight: 600; color: var(--cc-ink); }
.cmrla-course .cc-bio-role { font-size: 13px; color: var(--cc-muted); }
.cmrla-course .cc-bio-text { font-size: 14.5px; line-height: 1.6; color: var(--cc-slate); margin: 0 0 16px; }
.cmrla-course .cc-bio-text p { margin: 0 0 12px; }
.cmrla-course .cc-bio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmrla-course .cc-bio-chip {
  font-size: 12px; font-weight: 500; color: var(--cc-orange-text); background: var(--cc-orange-soft);
  padding: 5px 11px; border-radius: 999px;
}
.cmrla-course .cc-bio-link { margin: 16px 0 0; font-size: 13.5px; }
.cmrla-course .cc-bio-link a { color: var(--cc-orange-text); font-weight: 600; text-decoration: none; }

/* signed-out note */
.cmrla-course .cc-note-signedout { margin: 10px 4px 0; font-size: 12.5px; color: var(--cc-muted); }

/* --------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .cmrla-course { padding: 16px; }
  .cmrla-course .cc-top { grid-template-columns: minmax(0, 1fr); }
  .cmrla-course .cc-lessons-inner { position: static; }
  .cmrla-course .cc-list { overflow: visible; max-height: none; }
  .cmrla-course .cc-lessons { max-height: none; }
}
@media (max-width: 680px) {
  .cmrla-course .cc-aicard { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .cmrla-course .cc-aihead { font-size: 23px; }
  .cmrla-course .cc-meta { gap: 12px 18px; }
  .cmrla-course .cc-lightpill { margin-left: 0; }
  .cmrla-course .cc-play { width: 64px; height: 64px; }
  .cmrla-course .cc-play svg { width: 24px; height: 24px; }
  /* The player is only ~200px tall on a phone — the CTA chip would land on top
     of the chapter caption, and the lesson list already says "Continue watching". */
  .cmrla-course .cc-cta { display: none; }
  /* Phone: globe icon + buttons only. The wording is kept for screen readers
     (and stays on the switcher's aria-label), just not painted. */
  .cmrla-course .cc-langlabel > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .cmrla-course .cc-langbar { gap: 10px; }
  .cmrla-course .cc-langlabel { gap: 0; }
  .cmrla-course .cc-pcap { font-size: 13.5px; right: 80px; bottom: 18px; }
  .cmrla-course .cc-ptime { font-size: 13.5px; bottom: 18px; }
  .cmrla-course .cc-notespanel { padding: 0 16px 18px; }
  /* Tabs stay on one line and scroll sideways instead of wrapping into a ragged
     block. The complete button sits below them, outside the scroller. */
  .cmrla-course .cc-ntabs { flex-wrap: wrap; }
  .cmrla-course .cc-ntabs-scroll {
    flex: 1 0 100%; flex-wrap: nowrap;
    /* overflow-y must be stated explicitly: setting only overflow-x makes the
       other axis compute to auto, and the active tab's 1px underline offset is
       then enough to let the row be dragged vertically as well. */
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cmrla-course .cc-ntabs-scroll::-webkit-scrollbar { display: none; }
  /* No negative offset inside the scroller — it is what created that 1px. */
  .cmrla-course .cc-ntab { flex: 0 0 auto; padding: 14px 10px; margin-bottom: 0; }
  .cmrla-course .cc-markdone { flex: 0 0 auto; }

  /* --- language switcher: ISO codes, and touch targets that clear 44px --- */
  .cmrla-course .cc-lang-full { display: none; }
  .cmrla-course .cc-lang-short { display: inline; letter-spacing: .03em; }
  .cmrla-course .cc-langbtn {
    min-height: 44px; min-width: 48px; padding: 7px 12px; font-size: 14px;
  }
  .cmrla-course .cc-langbtns { padding: 3px; }

  /* --- everything tappable gets a real target --- */
  .cmrla-course .cc-markdone { margin: 6px 0 10px; min-height: 44px; padding: 11px 16px; }
  .cmrla-course .cc-reset { min-height: 44px; padding: 12px 4px 8px; }
  /* Inline links get a 44px tap area from a pseudo-element, so the dashed
     underline and the pill keep sitting tight against the text. */
  .cmrla-course .cc-taught, .cmrla-course .cc-buy { position: relative; }
  .cmrla-course .cc-taught::after, .cmrla-course .cc-buy::after {
    content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
    transform: translateY(-50%); height: 44px;
  }
  .cmrla-course .cc-modal-close { width: 42px; height: 42px; font-size: 24px; }

  /* --- lesson header stacks rather than cramming two counts onto one line --- */
  .cmrla-course .cc-lh { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cmrla-course .cc-lh span { white-space: normal; }
  .cmrla-course .cc-bar { margin: 10px 0 8px; }

  /* --- overlays: the player is only ~180px tall here --- */
  .cmrla-course .cc-upnext, .cmrla-course .cc-locked, .cmrla-course .cc-done { padding: 14px; }
  .cmrla-course .cc-upnext-title { font-size: 16px; margin: 5px 0 2px; }
  .cmrla-course .cc-upnext-eyebrow, .cmrla-course .cc-done-in p { font-size: 11px; letter-spacing: .1em; }
  .cmrla-course .cc-upnext-count { font-size: 12.5px; }
  .cmrla-course .cc-upnext-btns { margin-top: 12px; gap: 8px; }
  .cmrla-course .cc-btn { padding: 10px 14px; font-size: 13px; }
  .cmrla-course .cc-locked-ic, .cmrla-course .cc-done-ic { width: 44px; height: 44px; margin-bottom: 10px; }
  .cmrla-course .cc-locked-in b, .cmrla-course .cc-done-in b { font-size: 17px; }
  .cmrla-course .cc-done-in p { margin: 8px auto 12px; font-size: 13px; }
  /* On a phone there is no room to ellipsize a long title into meaninglessness —
     let it wrap onto a second line instead. */
  .cmrla-course .cc-tt b {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; line-height: 1.3;
  }
  .cmrla-course .cc-lesson { align-items: flex-start; }
  .cmrla-course .cc-ic { margin-top: 1px; }
  .cmrla-course .cc-time { align-self: flex-start; margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmrla-course *, .cmrla-course *::before, .cmrla-course *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ------------------------------------------------- the AI photographer 1.4 */
/* The card itself is unchanged. What is added here is the live upload state
   and the scorecard panel that appears under it. */

.cmrla-course .cc-drop-live {
  width: 100%; font: inherit; -webkit-appearance: none; appearance: none;
}
.cmrla-course .cc-drop-live.is-over { border-color: var(--cc-orange); background: var(--cc-orange-soft); }
.cmrla-course .cc-drop-live.is-busy { cursor: progress; opacity: .65; }
.cmrla-course .cc-drop-live[disabled] { pointer-events: none; }

.cmrla-course .cc-aimsg {
  margin: 14px 4px 0; font-size: 14.5px; line-height: 1.55; color: var(--cc-slate);
}
.cmrla-course .cc-aimsg a { color: var(--cc-orange-text); font-weight: 600; }
.cmrla-course .cc-aimsg.is-bad { color: #9b2c2c; }
.cmrla-course .cc-aimsg.is-busy { color: var(--cc-orange-text); }

/* The scorecard ---------------------------------------------------------- */

.cmrla-course .cc-airesult { margin-top: 18px; }
.cmrla-course .cc-sc { padding: 28px; }
.cmrla-course .cc-sc-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.cmrla-course .cc-sc-top h4 {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--cc-ink);
}
.cmrla-course .cc-sc-avg { display: flex; align-items: baseline; gap: 8px; }
.cmrla-course .cc-sc-avg b { font-size: 30px; font-weight: 700; color: var(--cc-orange-text); line-height: 1; }
.cmrla-course .cc-sc-avg span { font-size: 13px; color: var(--cc-muted); }
.cmrla-course .cc-sc-sum {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--cc-slate); max-width: 62ch;
}

.cmrla-course .cc-sc-scores { list-style: none; margin: 22px 0 0; padding: 0; }
.cmrla-course .cc-sc-scores li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--cc-line);
}
.cmrla-course .cc-sc-scores li:last-child { border-bottom: 0; }
.cmrla-course .cc-sc-name { font-size: 15px; font-weight: 500; color: var(--cc-ink); }
.cmrla-course .cc-stars { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.cmrla-course .cc-star { display: inline-flex; width: 17px; height: 17px; color: var(--cc-line2); }
.cmrla-course .cc-star.is-on { color: var(--cc-orange); }
.cmrla-course .cc-star svg { width: 100%; height: 100%; }

.cmrla-course .cc-sc-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px;
}
.cmrla-course .cc-sc-cols h5 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cc-muted);
}
.cmrla-course .cc-sc-keep { margin: 0; padding-left: 18px; }
.cmrla-course .cc-sc-keep li { font-size: 14.5px; line-height: 1.6; color: var(--cc-slate); margin-bottom: 6px; }
.cmrla-course .cc-sc-try { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cc-slate); }

.cmrla-course .cc-sc-princ {
  list-style: none; margin: 24px 0 0; padding: 16px 18px; border-radius: 14px;
  background: var(--cc-orange-soft);
}
.cmrla-course .cc-sc-princ li { font-size: 14.5px; line-height: 1.6; color: var(--cc-slate); margin-bottom: 8px; }
.cmrla-course .cc-sc-princ li:last-child { margin-bottom: 0; }
.cmrla-course .cc-sc-princ b { color: var(--cc-ink); }

.cmrla-course .cc-sc-file { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cc-line); }
.cmrla-course .cc-sc-file h5 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cc-muted);
}
.cmrla-course .cc-sc-file p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--cc-slate); }
.cmrla-course .cc-sc-facts { font-variant-numeric: tabular-nums; color: var(--cc-ink); }
.cmrla-course .cc-sc-note { margin: 18px 0 0; font-size: 13px; color: var(--cc-muted); }

@media (max-width: 680px) {
  .cmrla-course .cc-sc { padding: 22px; }
  .cmrla-course .cc-sc-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cmrla-course .cc-sc-scores li { flex-wrap: wrap; gap: 6px; }
  .cmrla-course .cc-drop-live { min-height: 44px; }
}

/* --------------------------------- saved scorecards, photo and print (1.5.0) */

.cmrla-course .cc-sc-top { gap: 18px; }
.cmrla-course .cc-sc-title { flex: 1 1 auto; min-width: 0; }
.cmrla-course .cc-sc-when { margin-top: 4px; font-size: 13px; color: var(--cc-muted); }
.cmrla-course .cc-sc-photo {
  flex: 0 0 auto; width: 150px; height: 94px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--cc-line); display: block; align-self: center;
}

.cmrla-course .cc-sc-actions { margin-top: 16px; }
.cmrla-course .cc-sc-print {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--cc-orange-text); border: 1px solid var(--cc-line2);
  border-radius: 999px; padding: 10px 18px; min-height: 44px; transition: .18s;
}
.cmrla-course .cc-sc-print:hover { border-color: var(--cc-orange); background: var(--cc-orange-soft); }

.cmrla-course .cc-sc-history { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cc-line); }
.cmrla-course .cc-sc-history h5 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cc-muted);
}
.cmrla-course .cc-sc-old {
  font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--cc-line2);
  border-radius: 14px; padding: 8px 14px 8px 8px; margin: 0 8px 8px 0; min-height: 44px;
  display: inline-flex; align-items: center; gap: 10px; transition: .18s;
}
.cmrla-course .cc-sc-old:hover { border-color: var(--cc-orange); background: #fffdf8; }
.cmrla-course .cc-sc-old img { width: 46px; height: 34px; object-fit: cover; border-radius: 8px; display: block; }
.cmrla-course .cc-sc-old span { font-size: 13.5px; color: var(--cc-slate); }
.cmrla-course .cc-sc-old b { font-size: 14px; color: var(--cc-orange-text); font-variant-numeric: tabular-nums; }

@media (max-width: 680px) {
  .cmrla-course .cc-sc-photo { width: 100%; height: 150px; order: 3; }
  .cmrla-course .cc-sc-print { width: 100%; }
}

/* Print: lift the scorecard out and hide the page around it. */
#cmrla-print-root { display: none; }
@media print {
  html.cmrla-printing,
  html.cmrla-printing body { background: #fff !important; margin: 0; padding: 0; }
  html.cmrla-printing body > *:not(#cmrla-print-root) { display: none !important; }
  html.cmrla-printing #cmrla-print-root { display: block !important; padding: 0; }
  html.cmrla-printing #cmrla-print-root .cc-sc {
    box-shadow: none; border: 0; padding: 0; max-width: 100%;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html.cmrla-printing #cmrla-print-root .cc-sc-actions,
  html.cmrla-printing #cmrla-print-root .cc-sc-history { display: none !important; }

  /* Nothing that reads as one block should be split across two pages, and no
     heading should be the last thing on a page. */
  html.cmrla-printing #cmrla-print-root .cc-sc-scores,
  html.cmrla-printing #cmrla-print-root .cc-sc-scores li,
  html.cmrla-printing #cmrla-print-root .cc-sc-cols > div,
  html.cmrla-printing #cmrla-print-root .cc-sc-keep li,
  html.cmrla-printing #cmrla-print-root .cc-sc-princ,
  html.cmrla-printing #cmrla-print-root .cc-sc-princ li,
  html.cmrla-printing #cmrla-print-root .cc-sc-file,
  html.cmrla-printing #cmrla-print-root .cc-sc-note { break-inside: avoid; }
  html.cmrla-printing #cmrla-print-root h4,
  html.cmrla-printing #cmrla-print-root h5 { break-after: avoid; }

  /* Tightened for paper. The screen spacing pushed the file section onto a
     second, almost empty page; a typical scorecard now lands on one. Type sizes
     are untouched — only the air between blocks. */
  html.cmrla-printing #cmrla-print-root .cc-sc-sum { margin-top: 10px; max-width: none; }
  html.cmrla-printing #cmrla-print-root .cc-sc-photo { width: 128px; height: 80px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-scores { margin-top: 14px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-scores li { padding: 6px 0; }
  html.cmrla-printing #cmrla-print-root .cc-sc-cols { margin-top: 16px; gap: 18px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-keep li { margin-bottom: 4px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-princ { margin-top: 16px; padding: 12px 14px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-princ li { margin-bottom: 6px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-file { margin-top: 16px; padding-top: 14px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-file p { margin-bottom: 4px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-note { margin-top: 12px; }

  /* Paper carries smaller type comfortably than a screen does — roughly 10pt
     body here — and the saving is what keeps a long Opus-length scorecard on a
     single sheet. */
  html.cmrla-printing #cmrla-print-root .cc-sc-top h4 { font-size: 18px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-avg b { font-size: 25px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-sum { font-size: 13.5px; line-height: 1.5; }
  html.cmrla-printing #cmrla-print-root .cc-sc-name { font-size: 13px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-keep li,
  html.cmrla-printing #cmrla-print-root .cc-sc-try,
  html.cmrla-printing #cmrla-print-root .cc-sc-princ li,
  html.cmrla-printing #cmrla-print-root .cc-sc-file p { font-size: 12.5px; line-height: 1.5; }
  html.cmrla-printing #cmrla-print-root .cc-sc-cols h5,
  html.cmrla-printing #cmrla-print-root .cc-sc-file h5 { margin-bottom: 6px; }
  html.cmrla-printing #cmrla-print-root .cc-sc-note { font-size: 11.5px; }
  html.cmrla-printing #cmrla-print-root .cc-star { width: 15px; height: 15px; }
}