/* EMPOWERea course shell, from ea-tokens.css: the side panel (syllabus and module pages), the footer, the phone and
   tablet top bar, tooltips and reduced motion. The panel sits in a grid column inside the page width, never fixed to the edge. */
@scope (html) to (.testForm, [id^=my_quiz_id]) {  /* nothing in here reaches the quiz runner, which renders exactly as GMAT's */
/* Side panel: a plan-preview panel in a 300 px column at 1200 and up; above the rows (syllabus) or under them (module) below that */
.ea-course main:has(> .app-menu) { display:grid; width:100%; grid-template-columns:minmax(0,1fr) 300px; align-items:start; column-gap:32px; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin:0 auto!important; }
.ea-course main:has(> .app-menu) > .container-fluid { max-width:none; min-width:0; }
.ea-course main > .app-menu { position:sticky!important; top:24px; right:auto; width:auto; height:auto; max-height:calc(100vh - 48px); overflow:auto; transform:none!important; padding:var(--pad-panel); border:var(--panel-line); border-radius:var(--r-panel); background:var(--g-panel); box-shadow:var(--panel-shadow); -webkit-backdrop-filter:var(--panel-blur); backdrop-filter:var(--panel-blur); }
.ea-course .app-menu > .p-4 { padding:0!important; }
.ea-course .app-menu .scroll { height:auto!important; max-height:none; margin:0; padding:0; }
.ea-course .app-menu .app-menu-button, .ea-course .app-menu .ps__rail-y, .ea-course .app-menu .ps__rail-x { display:none!important; }
.ea-course .app-menu :is(h5.card-title,p.text-small) { margin:0 0 12px; color:var(--eyebrow-card)!important; font-size:var(--fs-eyebrow); font-weight:var(--w-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.ea-course .app-menu ul.mb-5 { margin-bottom:var(--gap-l)!important; }
.ea-course .app-menu a.rotate-arrow-icon { align-items:center!important; } .ea-course .app-menu a.rotate-arrow-icon > i { margin-top:0!important; }   /* a module page's Content list: the chevron sits on its label's center (10-11 audit: 3.2px low) */
.ea-course .app-menu #progress_total { margin-bottom:var(--gap-l); padding-bottom:var(--gap-l); border-bottom:1px solid var(--line-top); }
.ea-course .app-menu #progress_total .mb-4 { margin-bottom:var(--gap-m)!important; }
.ea-course .app-menu #progress_total p { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 var(--gap-s)!important; color:var(--ink-row); font-size:var(--fs-meta); font-weight:var(--w-ui); }
.ea-course .app-menu #progress_total p span { float:none!important; color:var(--track-meta)!important; font-size:var(--fs-tag); font-weight:var(--w-meta); }
.ea-course .app-menu #progress_total:has(#progress_mod_total) { display:grid; grid-template-columns:1fr auto; align-items:baseline; }
.ea-course .app-menu #progress_mod_total, .ea-course .app-menu #progress_mod_total p { display:contents; }
.ea-course .app-menu #progress_mod_total p { font-size:0; }
.ea-course .app-menu #progress_mod_total p span { grid-row:1; grid-column:2; font-size:var(--fs-meta); }
.ea-course .app-menu #progress_mod_total .progress { grid-column:1 / -1; }
.ea-course .progress { height:7px; overflow:hidden; border-radius:var(--r-round); background:var(--track); }
.ea-course .progress-bar { border-radius:var(--r-round); background:var(--g-track)!important; }

/* Panel options (Study plan, Official Guide version, Module format): one segmented control each, never raw radios */
.ea-course .app-menu ul.list-unstyled:has(.custom-control) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0; border:0; background:none; }
.ea-course .app-menu ul.list-unstyled:has(#category_all) > li:first-child { grid-column:1 / -1; }   /* EA sells 2 plans (no 3 month), so Whole course takes its own row and the 2 plans share the next */
.ea-course .app-menu ul.list-unstyled:has(.custom-control) > li { min-width:0; } .ea-course .app-menu ul.list-unstyled > li.is-wide { grid-column:1 / -1; }  /* Integrated Reasoning, by its full name, takes the row */   /* Study Plan and Score Booster: equal two-column grids, every option the same width (Justin 10-10: "this needs to be redesigned") */
.ea-course .app-menu .custom-control { margin:0!important; }
.ea-course .app-menu .custom-control-input { position:absolute; opacity:0; }
.ea-course .app-menu .custom-control-label { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; padding:0 12px; border:1px solid var(--line-row); border-radius:var(--r-btn); background:#fff; color:var(--ink-row); font-size:var(--fs-meta); font-weight:var(--w-ui); white-space:nowrap; transition:border-color var(--t),background var(--t),color var(--t); }   /* each option its own tile (Justin 10-10: "i meant let's improve the style") */
.ea-course .app-menu .custom-control-label::before { display:none!important; }
.ea-course .app-menu .custom-control-label:hover { border-color:var(--line-hover); }
.ea-course .app-menu .custom-control-input:checked ~ .custom-control-label { border-color:var(--line-on); background:var(--row-on-bg); color:var(--ink-title); box-shadow:inset 0 0 0 1px var(--line-on); }
.ea-course .app-menu .custom-control-input:checked ~ .custom-control-label::before { display:block!important; width:6px!important; height:6px!important; border:0!important; border-radius:50%!important; background:var(--row-on)!important; }   /* the chosen tile carries a dot, so the choice reads at a glance */
.ea-course .app-menu .custom-control-input:focus-visible ~ .custom-control-label { outline:var(--focus-outline); }

/* Module contents list in the panel */
.ea-course .app-menu .submenu > li > a { display:flex; gap:var(--gap-s); padding:var(--gap-xs) 0; color:var(--ink-row); font-size:var(--fs-meta); font-weight:var(--w-ui); text-decoration:none; }
.ea-course .app-menu .inner-level-menu { margin:2px 0 var(--gap-s); padding-left:var(--gap-m); }
.ea-course .app-menu .inner-level-menu a { display:flex; gap:var(--gap-s); padding:5px 0; color:var(--meta); font-size:var(--fs-small); text-decoration:none; }
.ea-course .app-menu :is(.submenu,.inner-level-menu) a:hover { color:var(--blue); }
.ea-course .app-menu :is(.submenu,.inner-level-menu) i { flex:0 0 12px; color:var(--tag); font-size:var(--fs-small); line-height:inherit; }
.ea-course .app-menu .inner-level-menu a:not(:has(i))::before { content:"\e071"; flex:0 0 12px; margin-right:10px; color:var(--tag); font:normal var(--fs-small) simple-line-icons; line-height:inherit; }  /* video and podcast rows: get_icon() draws types 1 to 4 only, so they get the play glyph here, the same box as the <i> beside the other rows (10-07: their titles sat 10 px left) */
.ea-course .app-menu p.text-small:has(+ ul.mb-5):not(:has(+ ul.mb-5 > li)), .ea-course .app-menu p.text-small + ul.mb-5:not(:has(li)) { display:none; }  /* Module Format with nothing under it (a quiz-only module) */

/* Footer: quiet, on the ground, one hairline above it, like the login page's foot */
.ea-course footer.ea-footer { position:static; height:auto; margin:0!important; padding:var(--gap-xl) var(--gutter) 40px; border-top:1px solid var(--hair); background:transparent; }
.ea-course .ea-footer-inner { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap-xl); }
.ea-course .ea-footer-brand img { width:180px; height:auto; }
.ea-course .ea-footer-brand p { max-width:470px; margin:var(--gap-m) 0 var(--gap-s); color:var(--foot); font-size:var(--fs-small); line-height:1.6; }
.ea-course .ea-footer-brand small { color:var(--faint); font-size:var(--fs-small); }
.ea-course .ea-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:var(--gap-s); }
.ea-course .ea-footer nav strong { margin-bottom:var(--gap-xs); color:var(--eyebrow-card); font-size:var(--fs-eyebrow); font-weight:var(--w-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.ea-course .ea-footer nav a { color:var(--foot); font-size:var(--fs-meta); text-decoration:none; }
.ea-course .ea-footer nav a:hover { color:var(--blue); }

.ea-course .tooltip-inner { padding:7px 10px; border-radius:var(--r-mark); background:var(--ink-title); font:600 var(--fs-small) var(--font); }

@media (max-width:1199px) {
  .ea-course main:has(> .app-menu) { display:flex; flex-direction:column; gap:var(--gap-l); }
  .ea-course main > .app-menu { position:static!important; max-height:none; width:100%; }
  .ea-course main:has(.ea-syllabus) :is(.container-fluid,.app-row,.app-row > .col-12,.app-row > .col-12 > .mb-2) { display:contents; }
  .ea-course main:has(.ea-syllabus) > .app-menu { order:1; } .ea-course main .ea-syllabus { order:2; }  /* the page title first, then Study Plan, then the rows (10-07: the panel sat above "Work the plan") */
  .ea-course main:has(.ea-syllabus) > .app-menu #progress_total { display:none; }  /* the head's Modules complete card carries it */
}
@media (max-width:1023px) {
  .ea-course .ea-nav { grid-template-columns:1fr auto auto; gap:var(--gap-s); }
  .ea-course .ea-nav-burger { display:inline-flex; }
  .ea-course .ea-nav-account { width:var(--btn-h); padding:0; } .ea-course .ea-nav-account .name { display:none; } .ea-course .ea-nav-account img { margin-right:0; }  /* once the name hides, the avatar button is a square like the burger (10-08: a wide box on iPad) */
  .ea-course .ea-nav-links { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; flex-direction:column; gap:2px; padding:var(--gap-xs); border:var(--card-line); border-radius:var(--r-panel); background:#fff; box-shadow:var(--float-shadow); }
  .ea-course.ea-menu-open .ea-nav-links { display:flex; }
  .ea-course .ea-nav-links a { min-height:48px; padding:0 var(--gap-m); border-radius:var(--r-btn); }
  .ea-course .ea-nav-links a.active { background:var(--row-on-bg); }
  .ea-course .ea-nav-links a.active::after { display:none; }
}
@media (max-width:560px) {
  .ea-course { --gutter:16px; --pad-card:var(--pad-card-sm); --r-card:var(--r-panel); }
  .ea-course .ea-nav { height:var(--bar-h-sm); }
  .ea-course .ea-nav-brand img { width:180px; }
  .ea-course main { padding-top:29px!important; }
  .ea-course .ea-head > p, .ea-course .ea-lead { font-size:var(--fs-body); }
  .ea-course .ea-footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
  .ea-course .ea-footer-brand { grid-column:1 / -1; }
  /* The help button (the support widget's puzzle, /customer/styles.css) joins the top bar left of the avatar and scrolls with the page, so it never
     sits on a card, a control or a line of text (10-11 UI list: it covered Review Later, 6% to go, a question's last lines and a tile).
     Open, it returns to its corner as the panel's close button. */
  .ea-course .support-messenger { position:static; }
  .ea-course .support-launcher:not([aria-expanded="true"]) { position:absolute; top:calc((var(--bar-h-sm) - var(--btn-h)) / 2); right:calc(var(--gutter) + 2 * (var(--btn-h) + var(--gap-s))); bottom:auto; z-index:1031; width:var(--btn-h); min-width:var(--btn-h); height:var(--btn-h); border:1px solid var(--line-2); border-radius:var(--r-btn); background:var(--row-bg); box-shadow:none; }
  .ea-course .support-launcher:not([aria-expanded="true"]) .support-puzzle { width:24px; height:24px; }
}
@media (prefers-reduced-motion:reduce) { .ea-course *, .ea-course *::before { transition:none!important; animation:none!important; } }
}