/* ERW CommandPython — course home, enrolment, progress and assessment pages.
   Cloned from the ERW CommandPMO AI-901 course home so both read as one family. */

:root{--navy:#021937;--orange:#fc2b03;--bg:#f2f4f7;--line:#dfe4ea;--txt:#555;--mut:#78828f}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt)}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}
header{background:var(--navy);padding:26px 0}
.hd{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logobox{background:#fff;border-radius:8px;padding:8px 12px;display:inline-flex;align-items:center}
.logobox img{height:58px;display:block}
.hd h1{color:var(--orange);font-size:19px;letter-spacing:.13em;font-weight:800}
.hd h2{color:#fff;font-size:14px;font-weight:500;margin-top:3px}
.subline{color:#8fa0b5;font-size:12.5px;margin-top:14px;letter-spacing:.03em}
.beta{background:var(--orange);color:#fff;padding:13px 0;font-size:14.5px;font-weight:600;text-align:center}
.beta span{opacity:.85;font-weight:400}
/* ---- the welcome, from Coach Ritchie -------------------------------------
The first thing a visitor meets. It is the ASSISTANT greeting them, not
R. Wingo, so it says what it is in its first sentence and names him as the
person who marks the work. That sentence is the whole reason this is safe
to do: the card carries his face and a version of his name, and without it
a visitor would reasonably conclude they had been greeted by the man. */
.hello{display:flex;gap:22px;align-items:flex-start;background:#fff;
border:1px solid var(--line);border-left:4px solid var(--orange);
border-radius:9px;padding:24px 26px;margin:22px 0}
.hello-pic{width:96px;height:96px;flex:none;border-radius:12px;display:block;
object-fit:cover;background:var(--navy)}
.hello-who{color:var(--navy);font-size:12px;letter-spacing:.15em;
font-weight:800;text-transform:uppercase;margin-bottom:10px}
.hello-who::after{content:"";display:block;width:44px;height:2px;
background:var(--orange);margin-top:7px}
.hello p{font-size:15px;margin-bottom:11px}
.hello p:last-child{margin-bottom:0}
.hello b{color:var(--navy)}
/* The play control on the welcome. Coach Ritchie's own face, exactly as the
session pages do it — students know that avatar AS the assistant, and the
card's first sentence already says he is software and names R. Wingo as the
person who marks the work, so hearing it read in a synthetic voice is in
character rather than a deception. */
.hsay{float:right;margin:0 0 6px 12px;background:#fff1ed;border:1px solid var(--orange);
border-radius:999px;color:#b32a08;cursor:pointer;font:inherit;font-size:12px;
font-weight:600;line-height:1;padding:4px 12px 4px 4px;display:inline-flex;
align-items:center;gap:8px}
.hsay:hover{background:#ffe4dc}
.hsay:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hsay.on{background:var(--navy);border-color:var(--navy);color:#fff}
.hsay img{width:24px;height:24px;border-radius:50%;flex:none;display:block;
object-fit:cover;background:#dfe4ea}
.hsay.on img{box-shadow:0 0 0 2px var(--orange);animation:hsayPulse 1.6s ease-in-out infinite}
@keyframes hsayPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media print{.hsay{display:none}}
.hello-sig{margin-top:14px;font-size:13.5px;color:var(--mut)}
.hello-sig b{display:block;color:var(--navy);font-size:15px;letter-spacing:0}
@media(max-width:620px){.hello{flex-direction:column;gap:16px}
.hello-pic{width:82px;height:82px}}
section{background:#fff;border:1px solid var(--line);border-radius:9px;padding:26px 28px;margin:22px 0}
h3.sh{color:var(--navy);font-size:12px;letter-spacing:.15em;font-weight:800;margin-bottom:16px;text-transform:uppercase}
h3.sh::after{content:"";display:block;width:44px;height:2px;background:var(--orange);margin-top:7px}
.lead{font-size:15px;margin-bottom:18px}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.step{background:var(--bg);border-left:3px solid var(--navy);border-radius:5px;padding:13px 15px}
.step:nth-child(even){border-left-color:var(--orange)}
.step b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}
.step p{font-size:13px;color:var(--mut);line-height:1.5}
.pick{background:var(--navy);color:#fff;border-radius:9px;padding:24px 26px;margin:22px 0}
.pick h3{color:var(--orange);font-size:12px;letter-spacing:.15em;font-weight:800;text-transform:uppercase;margin-bottom:12px}
.pick p{color:#c6d0dc;font-size:14.5px;margin-bottom:10px}
.pick b{color:#fff}
.when{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.when div{background:rgba(255,255,255,.07);border-left:3px solid var(--orange);border-radius:4px;padding:11px 13px}
.when b{display:block;color:#fff;font-size:12.5px;letter-spacing:.05em;margin-bottom:3px}
.when p{color:#a9b7c6;font-size:12.5px;margin:0;line-height:1.5}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.tracks{grid-template-columns:1fr}}
.track{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:8px;padding:20px 22px}
.track.b{border-top-color:var(--orange)}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#fff;background:var(--navy);padding:3px 9px;border-radius:3px;margin-bottom:10px}
.track.b .tag{background:var(--orange)}
.track h4{color:var(--navy);font-size:17px;margin-bottom:4px}
.track .who{font-size:13px;color:var(--mut);font-style:italic;margin-bottom:14px}
.track dl{font-size:13.5px}
.track dt{color:var(--navy);font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;margin-top:13px}
.track dd{margin-top:3px;color:var(--txt);line-height:1.55}
.track ul{list-style:none;margin-top:3px}
.track li{font-size:13.5px;padding-left:15px;position:relative;margin-bottom:4px;line-height:1.5}
.track li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--orange);border-radius:50%}
.honest{background:#fff6f4;border-left:3px solid var(--orange);border-radius:4px;padding:11px 13px;margin-top:14px;font-size:13px;line-height:1.55}
.honest b{color:var(--navy)}
table.cmp{width:100%;border-collapse:collapse;margin-top:6px;font-size:13.5px}
table.cmp th{background:var(--navy);color:#fff;text-align:left;padding:9px 12px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
table.cmp th:first-child{width:34%}
table.cmp td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp tr:nth-child(even) td{background:#fafbfc}
table.cmp td:first-child{color:var(--navy);font-weight:600}
.week{border:1px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden}
.wkhead{background:var(--navy);color:#fff;padding:12px 17px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wknum{background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:3px 9px;border-radius:3px}
.wkhead h3{font-size:15px;font-weight:600;flex:1}
.wklink{color:#fff;font-size:12.5px;text-decoration:none;border:1px solid rgba(255,255,255,.4);padding:5px 12px;border-radius:4px}
.wklink:hover{background:rgba(255,255,255,.12)}
ol.sessions{list-style:none}
ol.sessions li{display:flex;align-items:center;gap:13px;padding:10px 17px;border-top:1px solid var(--line);font-size:14px}
ol.sessions li:first-child{border-top:none}
.sn{background:var(--bg);color:var(--navy);font-weight:700;font-size:12px;width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex:none}
.st{flex:1}
a.sub{font-size:12.5px;color:var(--orange);text-decoration:none;font-weight:600;white-space:nowrap}
a.sub:hover{text-decoration:underline}
a.sub.off{color:#b9c0c9;pointer-events:none;font-weight:500;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:7px;padding:14px 16px}
.card a{color:var(--navy);font-weight:600;text-decoration:none;font-size:14px}
.card a:hover{color:var(--orange)}
.card a.off{color:#b9c0c9;pointer-events:none;font-style:italic}
.card p{font-size:12.5px;color:var(--mut);margin-top:4px}
.rules li{font-size:14px;margin-bottom:9px;padding-left:17px;position:relative;list-style:none}
.rules li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--orange);border-radius:1px;transform:rotate(45deg)}
.rules b{color:var(--navy)}

.gflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:22px}
.gstep{background:var(--bg);border-left:3px solid var(--navy);border-radius:5px;padding:13px 15px;position:relative}
.gstep:nth-child(even){border-left-color:var(--orange)}
.gstep .n{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--orange)}
.gstep b{display:block;color:var(--navy);font-size:14px;margin:3px 0 4px}
.gstep p{font-size:12.5px;color:var(--mut);line-height:1.5}
.sample{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:6px}
.sample-h{background:var(--navy);color:#fff;padding:12px 17px;font-size:13px;display:flex;
align-items:center;gap:12px;flex-wrap:wrap}
.sample-h .sc{margin-left:auto;background:#0b6e3b;color:#fff;font-weight:800;font-size:15px;
padding:3px 12px;border-radius:4px}
.sample-b{padding:17px 19px;font-size:13.5px;line-height:1.62}
.sample-b h5{color:var(--navy);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
margin:15px 0 6px;font-weight:800}
.sample-b h5:first-child{margin-top:0}
.sample-b ul{list-style:none}
.sample-b li{padding-left:16px;position:relative;margin-bottom:5px}
.sample-b li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
background:var(--orange);border-radius:50%}
.rub{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
.rub th{background:#f2f4f7;color:var(--navy);text-align:left;padding:7px 10px;font-size:10.5px;
letter-spacing:.06em;text-transform:uppercase}
.rub td{padding:7px 10px;border-top:1px solid var(--line)}
.rub td:last-child{text-align:right;font-weight:700;color:var(--navy);white-space:nowrap}
.gnote{background:#fff6f4;border-left:3px solid var(--orange);border-radius:5px;padding:13px 16px;
margin-top:18px;font-size:13.5px;line-height:1.6}
.gnote b{color:var(--navy)}
footer{background:var(--navy);color:#8fa0b5;font-size:12px;padding:20px 0;margin-top:26px}
.ft{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cta{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 30px;border-radius:6px;margin-top:6px}
.cta.off{background:#3a4757;color:#9aa7b6;pointer-events:none;font-style:italic;font-weight:500}
/* The buy button on each plan card. Full width so it reads as the card's
action rather than as a footnote to the bullet list above it. */
.buy{display:block;text-align:center;background:var(--orange);color:#fff;text-decoration:none;
font-weight:700;font-size:14px;padding:11px 16px;border-radius:6px;margin-top:16px}
.buy:hover{background:#c4491f}
.buy.quiet{background:#fff;color:var(--navy);border:2px solid var(--line);padding:9px 16px}
.buy.quiet:hover{background:var(--bg);border-color:#b9c2cd}
a.off{color:#b9c0c9;pointer-events:none;font-style:italic}

/* --------------------------------------------------- sign-in furniture
Painted by gate.js: the identity line in the navbar, the guest banner on a
session page, and the Google button host. */
.whoami { margin-left:auto; font-size:12.5px; font-weight:700; color:#c6d0dc; text-decoration:none; white-space:nowrap; }
.whoami:hover { color:#fff; }
.guestbar { background:#fff7f5; border:1px solid #fc2b03; border-radius:6px; padding:10px 14px; margin:0 0 12px; font-size:13.5px; color:#021937; }
.guestbar a { color:#fc2b03; font-weight:700; }
.gsi-host { display:inline-block; min-height:44px; }