/* EMPOWERea course chrome, built only from ea-tokens.css: ground, type, the login top bar, page header, cards, buttons,
   pills, status dot, fields, checkboxes, menus, notices and modals. Every rule hangs off body.ea-course. */
:root:has(> body.ea-course) { background:#fbfcff; }  /* the login canvas, its --paper, under the ground */
@scope (html) to (.testForm, [id^=my_quiz_id]) {  /* nothing in here reaches the quiz runner, which renders exactly as GMAT's */
/* Ground: the login shell's gradient with its fading 72 px grid */
body.ea-course { display:flex; flex-direction:column; min-height:100vh; margin:0; padding-bottom:0!important; border-radius:0!important; background:var(--g-ground) fixed; color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body); overflow-x:hidden; }
body.ea-course::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.25; background-image:var(--g-grid); background-size:72px 72px; -webkit-mask-image:linear-gradient(135deg,#000,transparent 72%); mask-image:linear-gradient(135deg,#000,transparent 72%); }
.ea-course :is(p,li,td,th,label,input,button,select,textarea,.btn) { font-family:var(--font); }
.ea-course :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5) { color:var(--ink); font-family:var(--font); }
.ea-course a { color:var(--link); }
.ea-course .material-symbols-outlined { font-family:"Material Symbols Outlined"!important; font-weight:normal; font-style:normal; font-size:18px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-grid; place-items:center; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; font-feature-settings:"liga"; font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24; flex:0 0 auto; }
.ea-course :focus-visible { outline:var(--focus-outline); outline-offset:3px; }
.ea-course .text-muted { color:var(--muted)!important; }
/* Top bar: the login's auth-nav, logo left, links center, account right, one hairline under it */
.ea-course .ea-nav { position:relative; z-index:1030; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--gap-l); width:calc(100% - 2 * var(--gutter)); max-width:var(--wrap); height:var(--bar-h); margin:0 auto; border-bottom:1px solid var(--hair); }
.ea-course .ea-nav-brand img { display:block; width:238px; height:auto; }
.ea-course .ea-nav-links { display:flex; justify-content:center; align-self:stretch; gap:var(--gap-xl); }
.ea-course .ea-nav-links a { position:relative; display:inline-flex; align-items:center; gap:var(--gap-s); color:var(--ink-back); font-size:var(--fs-ui); font-weight:var(--w-meta); text-decoration:none; transition:color var(--t); }
.ea-course .ea-nav-links a:hover { color:var(--blue); }
.ea-course .ea-nav-links a.active { color:var(--ink-title); }
.ea-course .ea-nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--g-rule); }
.ea-course :is(.ea-nav-account,.ea-nav-burger,.ea-quiet,.cim_review,.btn-outline-primary,.btn-secondary,.btn-light,.btn-outline-dark,.btn-outline-secondary) { border:1px solid var(--line-2)!important; background:var(--row-bg)!important; color:var(--ink-row)!important; box-shadow:none!important; transition:transform var(--t),border-color var(--t),background var(--t); }   /* secondary: white with a line (its box: Buttons, below) */
.ea-course :is(.ea-nav-account,.ea-nav-burger,.ea-quiet,.btn-outline-primary,.btn-secondary,.btn-light,.btn-outline-dark,.btn-outline-secondary):hover { border-color:var(--line-hover)!important; background:var(--hover-bg)!important; transform:var(--lift); }
.ea-course .ea-nav-account img { width:28px; height:28px; margin-right:calc(-1 * var(--gap-s)); border-radius:50%; object-fit:cover; }
.ea-course .ea-nav-burger { display:none; box-sizing:border-box; align-items:center; justify-content:center; width:var(--btn-h); height:var(--btn-h); padding:0; border-radius:var(--r-btn)!important; cursor:pointer; }
/* Page: the login layout's width and rhythm, and its eyebrow plus headline */
.ea-course main { margin:0!important; padding:var(--gap-xl) var(--gutter) 72px!important; }
.ea-course main > .container-fluid { max-width:var(--wrap); margin:0 auto; padding:0; }
.ea-course main .app-row { padding-right:0!important; }
.ea-course .ea-head { margin-bottom:var(--gap-xl); }
.ea-course .ea-head h1, .ea-course .ea-display { display:block; margin:var(--gap-l) 0 0; color:var(--ink); font-size:var(--fs-display); font-weight:var(--w-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance; }
.ea-course .ea-head h1 em { font-style:normal; color:transparent; background:var(--g-type); -webkit-background-clip:text; background-clip:text; }
.ea-course .ea-head > p, .ea-course .ea-lead { max-width:620px; margin:var(--gap-l) 0 0; color:var(--body); font-size:var(--fs-lead); line-height:var(--lh-body); letter-spacing:-.012em; }
.ea-course .ea-eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--eyebrow); font-size:var(--fs-label); font-weight:var(--w-label); letter-spacing:var(--ls-rule); text-transform:uppercase; }
.ea-course .ea-eyebrow::before { content:""; width:31px; height:2px; border-radius:2px; background:var(--g-rule); }
.ea-course .ea-tag { color:var(--eyebrow-card); font-size:var(--fs-eyebrow); font-weight:var(--w-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }

/* Surfaces: .card is the plan-preview panel; .ea-card-lg the login card; .ea-command the landing course card */
.ea-course .card { 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 .card .card-body { padding:var(--pad-panel); }
.ea-course .card-title, .ea-course .card h5, .ea-course main h5.mb-4 { margin-bottom:var(--gap-m); color:var(--ink-card); font-size:var(--fs-card); font-weight:var(--w-card); line-height:1.25; letter-spacing:var(--ls-card); }
.ea-course .ea-card-lg { position:relative; padding:var(--pad-card); border:var(--card-line); border-radius:var(--r-card); background:var(--card-bg); box-shadow:var(--card-shadow); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); }
.ea-course .ea-command { position:relative; overflow:hidden; padding:var(--pad-command); border:var(--command-line); border-radius:var(--r-command); background:var(--g-command); box-shadow:var(--command-shadow); }
.ea-course .ea-command-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--gap-m); padding-bottom:21px; border-bottom:1px solid var(--line-top); }
.ea-course .ea-command-top strong { display:block; margin-top:var(--gap-xs); color:var(--ink-row); font-size:21px; font-weight:var(--w-card); letter-spacing:-.02em; }
.ea-course .ea-feature { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:var(--pad-feature); border-radius:var(--r-feature); background:var(--g-feature); box-shadow:var(--feature-shadow); color:#fff; }
.ea-course .ea-feature strong { color:#fff; font-size:38px; font-weight:var(--w-card); letter-spacing:-.05em; line-height:1; }
.ea-course .ea-feature small { display:block; color:var(--feature-meta); font-size:var(--fs-tag); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.ea-course .ea-feature b { color:#fff; font-size:19px; font-weight:var(--w-card); }

/* Buttons: three roles, one box (Justin 10-11: "button texts, all element alignment is so fucking retarded"). Every button, every link drawn
   as one and the quiz runner's own (ea-quiz.css) is 44px tall, 0 18px padding, 14px/720 in sentence case, radius --r-btn. Primary fills with
   --g-cta (the login's .auth-submit), secondary is white with a --line-2 line (its Google button), quiet is bare. A syllabus row's Resume is a
   primary, Review Later and Actions are secondaries, the dashboard's Analytics chip is a secondary drawn on navy. */
.ea-course :is(.btn,.ea-cta,.ea-quiet,.ea-nav-account,.cim_review,.ea-mint) { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:var(--gap-s); height:var(--btn-h); min-height:0; padding:0 18px; border-radius:var(--r-btn)!important; font-family:var(--font); font-size:var(--fs-ui); font-weight:var(--w-ui); line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; text-decoration:none!important; cursor:pointer; }
.ea-course :is(.btn-primary,.ea-cta,.ea-lesson-go b) { border:1px solid rgba(255,255,255,.34)!important; background:var(--g-cta)!important; color:#fff!important; box-shadow:none!important; transition:transform var(--t),filter var(--t); }
/* A syllabus row's Resume is the compact row action: it fills the row's 88 by 44 action slot at 36px, where the check tile and the arrow sit centered (ea-syllabus.css) */
.ea-course .ea-lesson-go b { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:100%; height:36px; padding:0; border-radius:var(--r-btn); font-size:var(--fs-ui); font-weight:var(--w-ui); line-height:1; }
.ea-course :is(.btn-primary,.ea-cta):hover { filter:saturate(1.08) brightness(1.04); transform:var(--lift); }
.ea-course :is(.btn-primary,.ea-cta,.ea-quiet,.btn-outline-primary,.btn-secondary):active { transform:var(--press); }
.ea-course :is(.btn-primary,.ea-cta) .material-symbols-outlined { transition:transform var(--t); }
.ea-course :is(.btn-primary,.ea-cta):hover .material-symbols-outlined { transform:translateX(3px); }
.ea-course .btn.disabled, .ea-course .btn:disabled { opacity:.55; transform:none; }

/* Pills, status dot, check tile and track: the landing's 1 + 2 MONTH pill, the login's READY dot and progress track */
/* A pill is one component everywhere: 28px tall, 0 10px, a 1px line, 12px/720 in sentence case, fully round (the syllabus status pills too) */
.ea-course .ea-pill, .ea-course .badge { box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--gap-xs); height:28px; padding:0 10px; border:1px solid transparent; border-radius:var(--r-round); background:var(--pill-bg)!important; color:var(--pill-ink); font-size:var(--fs-small); font-weight:var(--w-ui); line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; }
.ea-course .ea-status { display:inline-flex; align-items:center; gap:var(--gap-xs); color:var(--ok-ink); font-size:var(--fs-small); font-weight:var(--w-ui); letter-spacing:0; text-transform:none; white-space:nowrap; }
.ea-course .ea-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px var(--ok-halo); }
.ea-course .ea-check { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:var(--r-mark); background:var(--check-bg); color:var(--check-ink); font-size:16px; }
.ea-course .ea-track { display:block; height:7px; overflow:hidden; border-radius:var(--r-round); background:var(--track); }
.ea-course .ea-track > i { display:block; width:var(--p); height:100%; border-radius:inherit; background:var(--g-track); }

/* Fields: the login inputs, labels and focus ring; checkboxes and radios as the session row's check tile */
.ea-course .form-control, .ea-course select, .ea-course textarea, .ea-course input:is([type=text],[type=email],[type=password],[type=number],[type=tel],[type=date]) { height:var(--field-h); padding:0 14px; border:1px solid var(--line)!important; border-radius:var(--r-field)!important; outline:none; background:var(--field); color:var(--ink-field); font-size:var(--fs-input); font-weight:var(--w-ui); box-shadow:none; transition:border-color var(--t),box-shadow var(--t),background var(--t); }
.ea-course textarea { height:auto; padding:14px; }
.ea-course :is(.form-control,select,textarea,input):focus { border-color:var(--focus-line)!important; background:#fff; box-shadow:var(--focus-ring); }
.ea-course .input-group { flex-wrap:nowrap; }
.ea-course .input-group > .form-control { border-radius:var(--r-field)!important; }
.ea-course .input-group-text { display:none; }
.ea-course .form-group label:not(.custom-control-label) { display:block; margin-bottom:7px; color:var(--ink-label); font-size:var(--fs-label); font-weight:var(--w-ui); letter-spacing:0; text-transform:none; }
.ea-course .custom-control { padding-left:0; }
.ea-course .custom-control-label { position:relative; display:inline-flex; align-items:center; gap:10px; color:var(--ink-row); font-size:var(--fs-ui); font-weight:600; cursor:pointer; }
.ea-course .custom-control-label::before { content:""; position:static!important; order:-1; width:24px!important; height:24px!important; border:2px solid var(--row-on)!important; border-radius:var(--r-mark)!important; background:var(--field) no-repeat center/14px!important; box-shadow:none!important; }  /* 2px in the checked blue, so an empty box reads as a box (10-09) */
.ea-course .custom-control-label::after { display:none; }
.ea-course .custom-radio .custom-control-label::before { border-radius:50%!important; }
.ea-course .custom-control-input:checked ~ .custom-control-label::before { border-color:var(--row-on)!important; background-color:var(--row-on)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")!important; }
.ea-course .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-image:radial-gradient(#fff 0 4px,transparent 4.5px)!important; }

/* Menus, notices, modals */
.ea-course .dropdown-menu { padding:var(--gap-xs); border:var(--card-line); border-radius:var(--r-btn); background:#fff; box-shadow:var(--float-shadow); }
.ea-course .dropdown-item { display:flex; align-items:center; gap:var(--gap-s); padding:10px 12px; border-radius:var(--r-note); color:var(--ink-row); font-size:var(--fs-ui); font-weight:var(--w-ui); }
.ea-course .dropdown-item:hover, .ea-course .dropdown-item:focus { background:var(--row-on-bg); color:var(--ink-title); }
.ea-course .alert { margin:0 0 var(--gap-m); padding:11px 13px; border:1px solid var(--notice-line); border-radius:var(--r-note); background:var(--notice-bg); color:var(--notice-ink); font-size:var(--fs-meta); line-height:1.45; }
.ea-course .alert :is(a,b,strong) { color:inherit; }
.ea-course .alert-danger { border-color:var(--err-line); background:var(--err-bg); color:var(--err); }
.ea-course .alert-success { border-color:transparent; background:var(--ok-bg); color:var(--ok-ink); }
.ea-course .modal-content { padding:var(--pad-card-sm); border:var(--card-line); border-radius:var(--r-panel); background:#fff; box-shadow:var(--card-shadow); }
.ea-course .modal-header, .ea-course .modal-footer { padding:0 0 var(--gap-m); border:0; }
.ea-course .modal-footer { padding:var(--gap-m) 0 0; gap:var(--gap-s); }
.ea-course .modal-title { color:var(--ink-title); font-size:var(--fs-card); font-weight:var(--w-card); letter-spacing:var(--ls-card); }
.ea-course .modal-body { padding:0; color:var(--body); font-size:var(--fs-ui); }
}
