/* CEE 226 EIO-LCA Explorer — course stylesheet v0.3 (2026-09-10).
   Stanford identity pairing: Source Sans 3 (headings, controls, tables) + Source Serif 4 (reading text),
   vendored in fonts.css. Palette from identity.stanford.edu: Cardinal red #8C1515 (brand rule),
   Cardinal dark #820000, Digital red #B1040E (interactive), Black #2E2D29, Cool grey #53565A,
   Digital blue #006CB8 / dark #00548F (links). White-only, matching Stanford Sites. WCAG AA:
   body text ≥ 4.5:1, headings ≥ 3:1 (all tokens below checked against #FFFFFF). */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F4F4F4; --ink:#2E2D29; --muted:#5F5E5A;
  --line:#D5D5D4; --line-strong:#2E2D29; --cardinal:#8C1515; --cardinal-dark:#820000;
  --accent:#B1040E; --accent-ink:#820000; --accent-soft:#F8E8E8; --err:#B1040E;
  --on-accent:#FFFFFF; --control-border:#767674; --link:#006CB8; --link-hover:#00548F;
  --sans:"Source Sans 3","Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none !important}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:17px/1.5 var(--sans);padding:0 0 64px}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
a{color:var(--link)}
a:hover,a:focus{color:var(--link-hover)}
h1{font-size:34px;font-weight:900;line-height:1.15;letter-spacing:-.005em;margin:26px 0 8px}
h2{font-size:23px;font-weight:700;line-height:1.2;margin:34px 0 10px}
h3{font-size:17.5px;font-weight:700;margin:26px 0 8px}
p{margin:0 0 12px}
.dek{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);max-width:66ch;margin-bottom:18px}
.prose{font-family:var(--serif);font-size:18px;line-height:1.55;max-width:70ch}
.prose h2,.prose h3{font-family:var(--sans)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 12px}
.prose li{margin:0 0 6px}
.subtle{color:var(--muted);font-weight:400;font-size:.86em}
.note{font-family:var(--serif);color:var(--muted);font-size:15px;line-height:1.5;max-width:75ch;margin-top:10px}
.err{color:var(--err);margin-top:16px}

/* Masthead (text-only Stanford identity; no logo files) */
.brandbar{background:var(--cardinal);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 0}
.brandbar .wrap{display:flex;justify-content:space-between;gap:12px}
.brandbar a{color:#fff;text-decoration:none}
.masthead{border-bottom:3px solid var(--cardinal);padding:18px 0 0}
.masthead .lockup{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.masthead .home{text-decoration:none;color:var(--ink)}
.masthead .unit{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cardinal-dark)}
.masthead .tool{display:block;font-size:30px;font-weight:900;line-height:1.1;margin-top:2px}
.masthead .course{font-size:15px;font-weight:600;color:var(--muted);text-align:right}
.masthead .nav{display:flex;flex-wrap:wrap;gap:2px 22px;margin-top:14px;font-weight:600;font-size:16px}
.masthead .nav a{color:var(--ink);text-decoration:none;padding:8px 0 10px;border-bottom:3px solid transparent;margin-bottom:-3px}
.masthead .nav a:hover,.masthead .nav a:focus{color:var(--cardinal-dark);border-bottom-color:var(--cardinal)}
.masthead .nav a[aria-current="page"]{color:var(--cardinal-dark);border-bottom-color:var(--cardinal)}
.stamp{font-family:var(--mono);font-size:12px;color:var(--muted)}
.masthead .stamp{display:block;margin:10px 0 0;padding-bottom:10px}
.attrib{font-family:var(--serif);font-size:15px;color:var(--muted);margin:14px 0 0;max-width:80ch}
.usestrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin:22px 0 8px;border:1px solid var(--line);border-left:4px solid var(--cardinal)}
.usestrip > div{padding:14px 16px;font-size:15.5px;line-height:1.45}
.usestrip > div + div{border-left:1px solid var(--line)}
.usestrip strong{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cardinal-dark);margin-bottom:4px}

/* Legacy header class kept for any page still using it */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:3px solid var(--cardinal);flex-wrap:wrap}
.bar .home{text-decoration:none;font-weight:700;color:var(--ink)}

/* Panels, forms, controls */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px;margin-top:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.field{display:flex;flex-direction:column;gap:4px;position:relative}
.field.grow{width:100%}
.field span,.field > label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
input,select{background:#fff;color:var(--ink);border:1px solid var(--control-border);border-radius:3px;padding:8px 10px;font:15.5px var(--sans)}
input:focus,select:focus,button:focus,a:focus{outline:2px solid var(--link);outline-offset:2px}
button{background:#fff;color:var(--ink);border:1px solid var(--control-border);border-radius:3px;padding:9px 14px;font:600 15px var(--sans);cursor:pointer}
button:hover{border-color:var(--ink)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
button.primary:hover{background:var(--cardinal-dark);border-color:var(--cardinal-dark)}
button.mini{padding:2px 8px;font-size:12px}
.results{position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:0 0 4px 4px;box-shadow:0 6px 18px rgba(0,0,0,.12);display:flex;flex-direction:column;max-height:320px;overflow:auto}
.results button{border:none;border-bottom:1px solid var(--line);border-radius:0;text-align:left;background:var(--surface);font-weight:400}
.results button:hover{background:var(--surface2)}
.results button.active{background:var(--surface2);box-shadow:inset 3px 0 0 var(--ink);font-weight:600}
.results .empty{padding:10px 12px;display:block}
.chosen{margin-top:10px;padding:7px 12px;background:var(--surface2);color:var(--ink);border:1px solid var(--line);border-radius:3px;font-weight:600;display:inline-block}
.chosen .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.chosen code{font-family:var(--mono);font-weight:400;font-size:14px}
.banner{margin-top:14px;padding:10px 14px;border-left:4px solid var(--cardinal);background:var(--surface2);font-size:15px}
.banner.error{border-left-color:var(--err);color:var(--err)}
.banner.stale{border-left-color:var(--err);color:var(--err);margin-bottom:12px}
.formmsg{margin-top:10px;color:var(--err);font-size:14px;font-weight:600}
/* clip-path form needs no positioned ancestor: `position:absolute` escaped .tablewrap and
   forced the page to 478px at a 320px viewport (WCAG 1.4.10 reflow). */
.sr{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;display:inline-block}
#staleBanner:empty,#formMsg:empty,#loading:empty,#loadError:empty{display:none}
.hint{margin-top:8px;color:var(--muted);font-size:14px;max-width:78ch}
.code{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-left:4px}
.flag{color:var(--err);font-size:12px;font-weight:700;margin-left:6px}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
table caption{text-align:left;font-size:12.5px;color:var(--muted);padding:8px 14px;border-bottom:1px solid var(--line)}
th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--line-strong);white-space:nowrap}
th[scope="colgroup"]{text-align:left}
th[scope="row"]{font-weight:400;text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px;text-transform:none;letter-spacing:normal;color:var(--ink);white-space:normal}
tr:last-child th[scope="row"]{border-bottom:none}
td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.grouphead th{background:var(--surface2);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cardinal-dark);border-bottom:1px solid var(--line)}
tr.drv td{background:var(--surface2);font-size:13.5px;color:var(--muted)}
tr.sum td{font-weight:700;border-top:2px solid var(--line-strong)}

/* Cards (landing page) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:16px}
.card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--cardinal);border-radius:0;padding:18px;display:block;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--ink);border-top-color:var(--cardinal-dark)}
.card h3{margin:0 0 6px;color:var(--cardinal-dark)}
.card p{font-family:var(--serif);font-size:15px;color:var(--muted);margin:0}
footer{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);font-family:var(--serif)}
footer .fine{font-family:var(--sans);font-size:12.5px;margin-top:8px}
@media (max-width:640px){
  h1{font-size:28px}
  .masthead .tool{font-size:24px}
  .masthead .course{text-align:left}
}

/* v0.4 (2026-09-10): eiolca.net-style numbered steps, collapsed help, results category, ranked sectors */
.intro{font-family:var(--serif);font-size:18px;line-height:1.5;max-width:70ch;margin:18px 0 6px}
.steps{margin-top:6px}
.step{display:grid;grid-template-columns:44px 1fr;gap:0 14px;padding:16px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:none}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--cardinal);color:#fff;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.step h2{font-size:19px;margin:6px 0 8px}
.step .body{min-width:0}
.step .fixed{font-size:16px}
details.help{margin-top:8px;font-size:15px;max-width:78ch}
details.help summary{cursor:pointer;color:var(--link);font-weight:600;list-style:none;display:inline}
details.help summary::-webkit-details-marker{display:none}
details.help summary::before{content:"Show details"}
details.help[open] summary::before{content:"Hide details"}
details.help summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
details.help summary:hover,details.help summary:focus{color:var(--link-hover)}
details.help > div{font-family:var(--serif);color:var(--ink);margin-top:6px;line-height:1.5}
.browse{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.browse .field{min-width:260px;flex:1}
fieldset.mode{border:0;padding:0;margin:0;flex-basis:100%;min-width:0}
fieldset.mode legend{padding:0;margin-bottom:4px}
.radios{display:flex;gap:20px;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;cursor:pointer}
.radio input{width:18px;height:18px;margin:0;accent-color:#B1040E}
.step h2{position:relative}
button.info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-left:8px;border:1.5px solid var(--muted);border-radius:50%;background:none;color:var(--muted);font:italic 700 12px/1 var(--serif);vertical-align:2px;cursor:help}
button.info:hover,button.info:focus-visible,button.info[aria-expanded="true"]{border-color:var(--link);color:var(--link)}
.tip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:min(46ch,84vw);padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.12);font:400 14px/1.45 var(--sans);letter-spacing:normal;text-transform:none;color:var(--ink)}
.tip::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
button.info:hover + .tip,button.info:focus-visible + .tip,.tip:hover,.tip.open{display:block}
.combo-wrap{position:relative;width:230px;max-width:100%}
.combo-wrap input{width:100%;box-sizing:border-box;padding-right:30px}
.combo-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);border:0;background:none;padding:4px 9px;font-size:14px;line-height:1;color:var(--muted);cursor:pointer}
.combo-toggle:hover{color:var(--ink)}
.viewrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 6px}
button.mini[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
th .sort{display:block;width:100%;white-space:normal;text-align:inherit;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
th[aria-sort="descending"] .sort{text-decoration:underline solid;color:var(--ink)}
.actions .mini{margin-right:4px}
/* Ranked tables: fixed column proportions inside the content width so no window width cuts them off;
   headings wrap instead of forcing wide columns; the sector column keeps 30% */
.ranked table{table-layout:fixed}
.ranked col.sec{width:30%}
.ranked thead th{white-space:normal;text-transform:none;letter-spacing:.01em;font-size:12px;line-height:1.3;vertical-align:bottom;overflow-wrap:break-word;padding:10px 10px}
.ranked thead th:first-child{text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.ranked th[scope="row"],.ranked td{overflow-wrap:break-word}
.ranked.wide table{font-size:13px}
.ranked.wide thead th{padding:8px 6px}
.ranked.wide td,.ranked.wide th[scope="row"]{padding:6px 6px;font-size:13px}
.ranked.wide td .subtle{display:block;font-size:11px}
@media (max-width:640px){ .ranked table{table-layout:auto} .ranked.wide table{min-width:720px} }
.or{color:var(--muted);font-size:14px;margin:10px 0 0}
.runrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.runrow .preset{font-size:14px}
#results h2{margin-top:30px}
.ranked caption{font-size:12.5px}
.ranked th.sec{max-width:38ch;font-weight:400}
.ranked th.num,.ranked td.num{white-space:nowrap}
.legend{color:var(--muted);font-size:14px;margin-top:8px}
.toc{font-size:15px;margin:8px 0 18px;padding-left:1.2em}
.toc li{margin:2px 0}
.doc table{font-size:14px}
@media (max-width:640px){ .step{grid-template-columns:36px 1fr;gap:0 10px} .step .n{width:28px;height:28px;font-size:14px} }
.modelline{font-size:15px;color:var(--muted);margin:0 0 6px}