/* Leadstrium Course Studio 1.2.9
   MasterStudy-native lesson surface.
   Contract: Course Studio styles .lcsx-experience and descendants only.
   It never owns Curriculum, Discussions, navigation, completion, player geometry or scrolling. */

:root{
  --lcsx-navy:#0b1b2c;
  --lcsx-navy2:#10283e;
  --lcsx-gold:#d9a82e;
  --lcsx-gold2:#f2c85e;
  --lcsx-purple:#6d28d9;
  --lcsx-purple2:#9a5cf6;
}

.lcsx-experience{
  --lcsx-surface:#0b1b2c;
  --lcsx-surface-2:#10283e;
  --lcsx-surface-3:#07131f;
  --lcsx-text:#e9eef5;
  --lcsx-muted:#a9b6c6;
  --lcsx-line:rgba(217,168,46,.24);
  --lcsx-soft-line:rgba(255,255,255,.09);
  --lcsx-shadow:0 22px 58px rgba(2,8,15,.28);
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  container-name:lcsx;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:18px 0 36px;
  color:var(--lcsx-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.lcsx-experience *{box-sizing:border-box;min-width:0}
.lcsx-experience a{color:inherit}
.lcsx-experience img,.lcsx-experience video,.lcsx-experience iframe,.lcsx-experience table{max-width:100%}
.lcsx-experience iframe,.lcsx-experience video{width:100%}
.lcsx-experience pre{max-width:100%;overflow:auto}
.lcsx-experience table{display:block;overflow-x:auto;border-collapse:collapse}

/* Standalone presentation: still premium when the content is rendered outside the MasterStudy player. */
.lcsx-experience:not(.lcsx-masterstudy-native){
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(180deg,var(--lcsx-surface) 0%,var(--lcsx-surface-3) 100%);
  box-shadow:var(--lcsx-shadow);
}

/* MASTERSTUDY NATIVE MODE --------------------------------------------------
   MasterStudy owns the outer lesson shell. We inherit its mode and make the
   Studio content feel native rather than drawing a second app inside it. */
.lcsx-masterstudy-native{
  --lcsx-surface:#ffffff;
  --lcsx-surface-2:#f6f8fb;
  --lcsx-surface-3:#eef1f7;
  --lcsx-text:#001931;
  --lcsx-muted:#4d5e6f;
  --lcsx-line:#dbe0e9;
  --lcsx-soft-line:#e7ebf0;
  --lcsx-shadow:0 10px 28px rgba(0,25,49,.07);
  background:transparent;
  box-shadow:none;
  border-radius:0;
  margin-top:0;
}
.lcsx-masterstudy-native.lcsx-host-dark{
  --lcsx-surface:#1e1e1e;
  --lcsx-surface-2:#242424;
  --lcsx-surface-3:#171717;
  --lcsx-text:#ffffff;
  --lcsx-muted:rgba(255,255,255,.70);
  --lcsx-line:#2d2d2d;
  --lcsx-soft-line:#333333;
  --lcsx-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* MasterStudy already renders lesson type/title. Avoid duplicate learner chrome. */
.lcsx-masterstudy-native>.lcsx-reading-progress,
.lcsx-masterstudy-native>.lcsx-lesson-header,
.lcsx-masterstudy-native>.lcsx-lesson-footer,
.lcsx-masterstudy-native>.lcsx-hero .lcsx-hero-copy{display:none!important}
.lcsx-empty-section{display:none!important}
.lcsx-duplicate-title-section>header{display:none!important}

/* Standalone heading */
.lcsx-reading-progress{position:sticky;top:0;z-index:40;height:4px;background:rgba(255,255,255,.07)}
.lcsx-reading-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--lcsx-purple2),var(--lcsx-gold2))}
.lcsx-lesson-header{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;padding:30px 32px 24px;border-bottom:1px solid var(--lcsx-line)}
.lcsx-lesson-id{border-right:1px solid var(--lcsx-soft-line);padding-right:18px;display:flex;flex-direction:column;justify-content:center}
.lcsx-lesson-id span{color:var(--lcsx-gold);font-size:10px;letter-spacing:.14em;font-weight:800}
.lcsx-lesson-id strong{font-family:Georgia,"Times New Roman",serif;font-size:32px;color:var(--lcsx-text)}
.lcsx-kicker{display:block;color:var(--lcsx-purple2);font-size:10px;letter-spacing:.16em;font-weight:900;margin-bottom:8px}
.lcsx-header-copy h1{margin:0;color:var(--lcsx-text);font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(30px,5cqi,52px);line-height:1.08;letter-spacing:-.025em}
.lcsx-deck{margin-top:13px;color:var(--lcsx-muted);max-width:760px;font-size:15px}.lcsx-deck p{margin:0}

/* Hero visual becomes a native lesson figure, not another page shell. */
.lcsx-hero{position:relative;margin:0 0 24px;overflow:hidden;border:1px solid var(--lcsx-line);border-radius:14px;background:var(--lcsx-surface-3);box-shadow:var(--lcsx-shadow)}
.lcsx-hero img{display:block;width:100%;height:auto;max-height:540px;object-fit:contain;object-position:center;margin:auto}
.lcsx-hero-shade{display:none}
.lcsx-hero-copy{padding:16px 20px;border-top:1px solid var(--lcsx-line);background:var(--lcsx-surface)}
.lcsx-hero-copy span{display:block;color:var(--lcsx-purple2);font-size:9px;letter-spacing:.12em;font-weight:800;margin-bottom:4px}
.lcsx-hero-copy strong{display:block;color:var(--lcsx-text);font:600 20px/1.2 Georgia,serif}
.lcsx-hero-copy em{display:block;margin-top:6px;color:var(--lcsx-muted);font-style:normal;font-size:13px}
.lcsx-image-caption{padding:9px 13px;color:var(--lcsx-muted);font-size:12px;border-top:1px solid var(--lcsx-line);background:var(--lcsx-surface)}

/* Native reading flow: never create a competing sidebar inside MasterStudy. */
.lcsx-layout{display:block;width:100%}
.lcsx-main{width:100%;padding:0}
.lcsx-rail{display:grid;grid-template-columns:1fr;gap:12px;padding:4px 0 0;margin-top:24px}

.lcsx-section{margin:0 0 18px;border:1px solid var(--lcsx-line);border-radius:13px;background:var(--lcsx-surface);box-shadow:var(--lcsx-shadow);overflow:hidden}
.lcsx-section>header{display:flex;align-items:flex-start;gap:11px;padding:14px 18px;border-bottom:1px solid var(--lcsx-line);background:var(--lcsx-surface-2)}
.lcsx-section>header h1,.lcsx-section>header h2,.lcsx-section>header h3{margin:0!important;padding:0!important;color:var(--lcsx-text)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:20px!important;line-height:1.28!important;font-weight:600!important}
.lcsx-section-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:1px solid rgba(217,168,46,.45);color:var(--lcsx-gold);font-size:12px;font-weight:900}
.lcsx-section-body{padding:18px;color:var(--lcsx-muted);font-size:15px;line-height:1.72}
.lcsx-section-body p{margin:0 0 15px;color:inherit}.lcsx-section-body p:last-child{margin-bottom:0}
.lcsx-section-body ul,.lcsx-section-body ol{margin:0 0 15px;padding-left:22px}.lcsx-section-body li{margin:6px 0;color:inherit}
.lcsx-section-body strong{color:var(--lcsx-text)}

/* Personalized/course author blocks from CSV get a gentle treatment without relying on course-specific selectors. */
.lcsx-section-body>[class*="personal-note"],.lcsx-section-body>[class*="scenario"],.lcsx-section-body>[class*="practice"],.lcsx-section-body>[class*="key-takeaway"],.lcsx-callout{
  margin:0 0 16px;padding:15px 16px;border-radius:10px;border-left:3px solid var(--lcsx-purple2);background:color-mix(in srgb,var(--lcsx-surface-2) 88%,var(--lcsx-purple) 12%);color:var(--lcsx-muted)
}

.lcsx-inline-visual,.lcsx-inline-media,.em-oshe-inline-learning-aid{margin:20px 0;border:1px solid var(--lcsx-line);border-radius:12px;overflow:hidden;background:var(--lcsx-surface-3);box-shadow:var(--lcsx-shadow)}
.lcsx-inline-visual img,.lcsx-inline-media img,.em-oshe-inline-learning-aid img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;margin:auto}
.lcsx-inline-visual figcaption,.lcsx-inline-media figcaption,.em-oshe-inline-learning-aid figcaption{padding:9px 13px;color:var(--lcsx-muted);font-size:12px;border-top:1px solid var(--lcsx-line);background:var(--lcsx-surface)}
.lcsx-inline-visual.is-contained{max-width:760px;margin-left:auto;margin-right:auto}.lcsx-inline-visual.is-card{max-width:560px}

.lcsx-card-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:15px 0}
.lcsx-card,.lcsx-domain-card,.lcsx-rail-card{padding:16px;border:1px solid var(--lcsx-line);border-radius:12px;background:var(--lcsx-surface);box-shadow:var(--lcsx-shadow)}
.lcsx-card strong,.lcsx-domain-card strong{display:block;color:var(--lcsx-text);font-size:13px;letter-spacing:.025em;text-transform:uppercase;margin-bottom:7px}
.lcsx-card p,.lcsx-domain-card p{font-size:13px;color:var(--lcsx-muted);margin:0}
.lcsx-rail-kicker{display:block;color:var(--lcsx-gold);font-weight:900;font-size:9px;letter-spacing:.14em;margin-bottom:10px}
.lcsx-check-list,.lcsx-concept-list{list-style:none!important;margin:0!important;padding:0!important}
.lcsx-check-list li{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--lcsx-soft-line);font-size:13px;color:var(--lcsx-muted)}.lcsx-check-list li:last-child{border-bottom:0}
.lcsx-check-list span{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--lcsx-gold);color:#07131f;font-size:10px;font-weight:900}
.lcsx-concept-list li{position:relative;padding:6px 0 6px 14px;color:var(--lcsx-muted);font-size:13px}.lcsx-concept-list li:before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--lcsx-purple2)}
.lcsx-next-card strong{display:block;color:var(--lcsx-text);font:600 17px/1.25 Georgia,serif}.lcsx-next-card p{font-size:12px;color:var(--lcsx-muted);margin:7px 0 0}

.lcsx-lesson-footer{display:flex;justify-content:space-between;gap:14px;padding:16px 24px;border-top:1px solid var(--lcsx-line);color:var(--lcsx-muted);font-size:9px;letter-spacing:.07em;text-transform:uppercase}.lcsx-lesson-footer strong{color:var(--lcsx-gold);font-weight:800}


/* MASTERSTUDY STRICT BOUNDED INTEGRATION -----------------------------------
   MasterStudy owns the entire course-player formatting tree, including the
   native lesson wrapper, Curriculum, Discussions, navigation, completion,
   scrolling and all sidebar/open-state geometry. Course Studio intentionally
   targets none of those elements. The Studio experience is a normal child of
   the native lesson output and fills only the width MasterStudy grants it. */
.lcsx-masterstudy-native{
  width:100%;
  max-width:100%;
  margin:0 0 36px;
  padding:0;
}

/* Make the native lane look deliberate: media may fill the lane while prose
   remains readable. No viewport breakout, negative margins or parent mutation. */
.lcsx-masterstudy-native .lcsx-hero,
.lcsx-masterstudy-native .lcsx-section,
.lcsx-masterstudy-native .lcsx-inline-visual,
.lcsx-masterstudy-native .lcsx-inline-media,
.lcsx-masterstudy-native .em-oshe-inline-learning-aid,
.lcsx-masterstudy-native .lcsx-rail{
  width:100%;
  max-width:100%;
}
.lcsx-masterstudy-native .lcsx-section-body>p,
.lcsx-masterstudy-native .lcsx-section-body>ul,
.lcsx-masterstudy-native .lcsx-section-body>ol,
.lcsx-masterstudy-native .lcsx-section-body>.em-oshe-personal-note,
.lcsx-masterstudy-native .lcsx-section-body>.em-oshe-scenario,
.lcsx-masterstudy-native .lcsx-section-body>.em-oshe-practice,
.lcsx-masterstudy-native .lcsx-section-body>.em-oshe-key-takeaway{
  max-width:72ch;
}

/* The package-level module banner is redundant directly beneath the lesson hero. */
.lcsx-masterstudy-native .em-oshe-module-banner{display:none!important}

/* Responsive behavior is based on the lesson content container, not the browser viewport. */
@container lcsx (max-width:419px){
  .lcsx-hero{border-radius:10px;margin-bottom:14px}.lcsx-hero img{max-height:none}
  .lcsx-section{border-radius:10px;margin-bottom:12px}.lcsx-section>header{padding:12px}.lcsx-section>header h2,.lcsx-section>header h3{font-size:17px!important}
  .lcsx-section-body{padding:13px;font-size:14px}.lcsx-section-icon{width:25px;height:25px;flex-basis:25px}
  .lcsx-inline-visual,.lcsx-inline-media,.em-oshe-inline-learning-aid{margin:14px 0;border-radius:9px}.lcsx-rail-card{padding:13px}
}
@container lcsx (min-width:420px) and (max-width:619px){
  .lcsx-section-body{padding:16px}.lcsx-section>header{padding:13px 15px}.lcsx-section>header h2,.lcsx-section>header h3{font-size:18px!important}
}
@container lcsx (min-width:620px){
  .lcsx-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lcsx-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container lcsx (min-width:820px){
  .lcsx-section-body{padding:20px 22px;font-size:16px}.lcsx-section>header{padding:15px 20px}.lcsx-section>header h2,.lcsx-section>header h3{font-size:21px!important}
  .lcsx-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Fallback when container queries are unavailable. */
@supports not (container-type:inline-size){
  .lcsx-experience[data-lcsx-size="lg"] .lcsx-rail,.lcsx-experience[data-lcsx-size="xl"] .lcsx-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lcsx-experience[data-lcsx-size="xl"] .lcsx-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.lcsx-experience *{scroll-behavior:auto!important;transition:none!important}}
