/* Compass Training artwork (see courseArt.js). Shared by the in-app course player and the
   public administrator CE player. Colors come from the course theme via --ca1 / --ca2,
   set on the player's root element. */
.ca-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* The course banner: gradient, title on the left, illustration on the right. */
.ca-banner { position: relative; overflow: hidden; border-radius: 14px; color: #fff; min-height: 150px; box-sizing: border-box;
  background: linear-gradient(120deg, var(--ca1, #12314f) 0%, var(--ca1, #12314f) 35%, var(--ca2, #17a2a2) 100%);
  padding: 18px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ca-banner .ca-hero { position: absolute; right: 0; top: 0; height: 100%; width: auto; aspect-ratio: 360 / 150; max-width: 62%; pointer-events: none; }
.ca-banner > * { position: relative; }
.ca-banner-text { max-width: 58%; }
.ca-banner-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; font-weight: 600; }
.ca-banner-title { font-size: 21px; font-weight: 750; line-height: 1.25; margin-top: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.ca-banner-sub { font-size: 13px; opacity: .9; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.ca-banner-actions { margin-top: 12px; }
.ca-banner .btn { background: rgba(255,255,255,.95); color: var(--ca1, #12314f); border-color: transparent; }
.ca-banner .btn:hover { background: #fff; }

/* Section heading with its picture chip. */
.ca-sec-h { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.ca-chip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ca1, #12314f), var(--ca2, #17a2a2)); box-shadow: 0 4px 12px -4px var(--ca2, #17a2a2); }
.ca-sec-kicker { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ca2, #17a2a2); font-weight: 700; }
.ca-sec-h h2, .ca-sec-h h1 { margin: 0 !important; }

/* "What you will learn": the first list of the first section, as a grid of cards. */
ul.ca-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 4px 0 16px; padding: 0; list-style: none; }
.ca-goals li { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; line-height: 1.45; font-size: 14px;
  background: color-mix(in srgb, var(--ca2, #17a2a2) 7%, #fff); border: 1px solid color-mix(in srgb, var(--ca2, #17a2a2) 25%, #fff); }
.ca-goals .ca-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--ca2, #17a2a2); }

/* Bulleted lists get small colored markers. */
ul.ca-list { list-style: none; padding-left: 4px; }
ul.ca-list > li { position: relative; padding-left: 22px; }
ul.ca-list > li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ca2, #17a2a2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca2, #17a2a2) 20%, transparent); }

/* Numbered steps as a timeline. */
ol.ca-steps { list-style: none; counter-reset: castep; padding-left: 0; margin: 0 0 16px; }
ol.ca-steps > li { counter-increment: castep; position: relative; padding: 2px 0 14px 44px; line-height: 1.5; }
ol.ca-steps > li::before { content: counter(castep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--ca1, #12314f), var(--ca2, #17a2a2)); }
ol.ca-steps > li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px;
  background: color-mix(in srgb, var(--ca2, #17a2a2) 30%, transparent); }

/* Callouts with an icon in a circle. */
.ca-callout { display: flex; gap: 12px; align-items: flex-start; border-left-width: 4px !important; }
.ca-callout-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #fff; }
.ca-callout-body { min-width: 0; flex: 1; }
.ca-callout.tc-info .ca-callout-ic, .ca-callout.info .ca-callout-ic { color: #2563eb; }
.ca-callout.tc-tip .ca-callout-ic, .ca-callout.tip .ca-callout-ic { color: #0d9488; }
.ca-callout.tc-warn .ca-callout-ic, .ca-callout.warn .ca-callout-ic { color: #d97706; }
.ca-callout.tc-danger .ca-callout-ic, .ca-callout.danger .ca-callout-ic { color: #dc2626; }
.ca-callout.tc-done .ca-callout-ic, .ca-callout.done .ca-callout-ic { color: #16a34a; }

/* Do / don't comparison with icon headers. */
.ca-compare-h { display: flex; align-items: center; gap: 8px; }
.tc-bad .ca-compare-h { color: #b91c1c; }
.tc-good .ca-compare-h { color: #15803d; }

/* Written reflection prompt. */
.ca-reflect-label { display: flex !important; gap: 10px; align-items: flex-start; }
.ca-reflect-label .ca-icon { color: var(--ca2, #17a2a2); margin-top: 1px; }

/* Last section. */
.ca-finish-box { border-radius: 12px; padding: 6px 12px 12px; margin: 0 0 14px; text-align: center;
  background: color-mix(in srgb, var(--ca2, #17a2a2) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ca2, #17a2a2) 25%, #fff); }
.ca-finish { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.ca-finish-box b { display: block; color: var(--ca1, #12314f); }

/* Course list thumbnails. */
.ca-tile { display: block; flex-shrink: 0; border-radius: 12px; box-shadow: 0 3px 10px -4px rgba(15, 44, 73, .45); }
.ca-row { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .ca-banner { min-height: 0; flex-direction: column; }
  .ca-banner .ca-hero { max-width: none; opacity: .35; }
  .ca-banner-text { max-width: 100%; }
  .ca-banner-title { font-size: 18px; }
}

/* ---- Diagrams and scenes (CourseArt.block): flow, stats, timeline, scene ---- */
.ca-fig { margin: 4px 0 18px; border-radius: 14px; padding: 14px; box-sizing: border-box;
  background: color-mix(in srgb, var(--ca2, #17a2a2) 5%, #fff); border: 1px solid color-mix(in srgb, var(--ca2, #17a2a2) 22%, #fff); }
.ca-fig-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ca1, #12314f); margin: 0 0 12px; font-size: 15px; }
.ca-fig-h .ca-icon { color: var(--ca2, #17a2a2); }
.ca-fig .ca-t-danger { --tn: #dc2626; } .ca-fig .ca-t-warn { --tn: #d97706; } .ca-fig .ca-t-good { --tn: #16a34a; } .ca-fig .ca-t-info { --tn: #2563eb; }

/* Flowchart */
.ca-flow-steps { display: flex; gap: 6px; align-items: stretch; }
.ca-flow-down .ca-flow-steps { flex-direction: column; align-items: stretch; }
.ca-flow-step { flex: 1 1 0; min-width: 0; background: #fff; border-radius: 12px; padding: 12px; line-height: 1.45; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--tn, var(--ca2, #17a2a2)) 30%, #fff); border-top: 4px solid var(--tn, var(--ca2, #17a2a2));
  box-shadow: 0 2px 8px -4px rgba(15, 44, 73, .25); display: flex; flex-direction: column; gap: 4px; }
.ca-flow-down .ca-flow-step { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; border-top-width: 1px; border-left: 4px solid var(--tn, var(--ca2, #17a2a2)); }
.ca-flow-down .ca-flow-top { display: contents; }
.ca-flow-down .ca-flow-ic { grid-row: 1 / span 4; }
.ca-flow-down .ca-flow-br { grid-column: 2; }
.ca-flow-top { display: flex; align-items: center; gap: 8px; }
.ca-flow-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: var(--tn, linear-gradient(135deg, var(--ca1, #12314f), var(--ca2, #17a2a2))); }
.ca-flow-n { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tn, var(--ca2, #17a2a2)); white-space: nowrap; }
.ca-flow-title { color: var(--ca1, #12314f); }
.ca-flow-t { color: #334155; }
.ca-flow-arr { flex: 0 0 22px; display: grid; place-items: center; color: var(--ca2, #17a2a2); }
.ca-flow-down .ca-flow-arr { flex-basis: 20px; transform: rotate(90deg); }
.ca-flow-br { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; grid-column: 2; }
.ca-flow-b { border-radius: 8px; padding: 6px 8px; font-size: 13px; background: color-mix(in srgb, var(--tn, #64748b) 10%, #fff); border: 1px dashed color-mix(in srgb, var(--tn, #64748b) 45%, #fff); }
.ca-flow-b b { color: var(--tn, #334155); }

/* Infographic tiles */
.ca-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ca-stat { background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tn, var(--ca2, #17a2a2)) 25%, #fff); }
.ca-stat::after { content: ''; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: var(--tn, var(--ca2, #17a2a2)); opacity: .08; }
.ca-stat-ic { color: var(--tn, var(--ca2, #17a2a2)); }
.ca-stat-v { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--tn, var(--ca1, #12314f)); letter-spacing: -.01em; }
.ca-stat-l { font-size: 13px; line-height: 1.4; color: #334155; }

/* Timeline / ladder */
.ca-tl-items { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; position: relative; }
.ca-tl-items::before { content: ''; position: absolute; left: 18px; right: 18px; top: 17px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ca1, #12314f), var(--ca2, #17a2a2)); opacity: .5; }
.ca-tl-items li { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; color: #334155; }
.ca-tl-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; position: relative;
  background: var(--tn, var(--ca2, #17a2a2)); box-shadow: 0 0 0 4px #fff; }
.ca-tl-when { color: var(--tn, var(--ca1, #12314f)); font-size: 14px; }

/* Scenario: a setting photograph with the title over it, then the story and dialogue. */
.ca-scene { padding: 0; overflow: hidden; background: #fff; }
.ca-scene-art { position: relative; line-height: 0; background: #1e293b; }
.ca-scene-img { width: 100%; height: auto; aspect-ratio: 640 / 230; object-fit: cover; display: block; }
.ca-scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.05) 0%, rgba(15,23,42,.15) 45%, rgba(15,23,42,.72) 100%); }
.ca-scene-head { position: absolute; left: 18px; right: 18px; bottom: 14px; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ca-scene-kicker { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ca-scene-title { display: block; font-size: 19px; font-weight: 750; margin-top: 3px; }
.ca-scene-body { padding: 14px 16px 12px; line-height: 1.5; }
.ca-scene-body p { margin: 0 0 8px; color: #334155; }
.ca-talk { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.ca-bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; position: relative; }
.ca-bubble .ca-who { display: block; font-size: 11px; font-weight: 700; opacity: .8; margin-bottom: 1px; }
.ca-left { align-self: flex-start; background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
.ca-right { align-self: flex-end; background: color-mix(in srgb, var(--ca2, #17a2a2) 16%, #fff); color: #0f2c49; border-bottom-right-radius: 4px; }
.ca-credit { display: block; text-align: right; font-size: 11px; color: #94a3b8; margin-top: 6px; }

/* Photographs: the welcome-section cover and photo blocks. */
.ca-photo { margin: 4px 0 18px; border-radius: 14px; overflow: hidden; background: #f1f5f9; }
.ca-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1.45; object-fit: cover; }
.ca-photo.ca-cover img { aspect-ratio: 3 / 1.1; }
.ca-photo figcaption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 12px; font-size: 13px; color: #334155; line-height: 1.4; }
.ca-photo figcaption small { margin-left: auto; font-size: 11px; color: #94a3b8; white-space: nowrap; }

@media (max-width: 760px) {
  .ca-banner { min-height: 0; flex-direction: column; }
  .ca-banner .ca-hero { max-width: none; opacity: .35; }
  .ca-banner-text { max-width: 100%; }
  .ca-banner-title { font-size: 18px; }
}