:root {
  --bg: #f7f8fa;
  --fg: #1a1d23;
  --muted: #5c6570;
  --border: #e2e6eb;
  --accent: #2563eb;
  --max: 42rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
}

.wrap {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.site-header, .site-footer {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.site-footer {
  border-bottom: 0;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-header .wrap,
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

.brand {
  margin: 0;
  font-weight: 650;
}

nav a {
  color: var(--accent);
  text-decoration: none;
}

nav a:hover { text-decoration: underline; }

main { padding: 2rem 0 1rem; }

h1 { margin: 0 0 0.5rem; line-height: 1.2; font-size: clamp(1.6rem, 4vw, 2.1rem); }

.lede { color: var(--muted); margin-top: 0; }

code {
  font-size: 0.92em;
  background: #eef1f5;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
.card{background:#fff;border:1px solid var(--border);border-radius:.6rem;padding:1rem 1.2rem;margin:1rem 0}
form.row{display:flex;gap:.5rem;flex-wrap:wrap}
input,select,button,textarea{font:inherit;padding:.55rem .7rem;border:1px solid var(--border);border-radius:.4rem;max-width:100%}
button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer}
button.secondary{background:#fff;color:var(--accent)}
.big{font-size:3rem;font-weight:700;margin:.2rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
td,th{border:1px solid var(--border);padding:.35rem .5rem;text-align:left}
.err{color:#b91c1c}
textarea{width:100%;min-height:7rem;font-family:ui-monospace,monospace}
details{margin:.5rem 0}summary{font-weight:600;cursor:pointer}
.tablewrap{overflow-x:auto}

/* ---- Design system v1 (Design Lead, 2026-10-07) ---- */
:root{--accent-ink:#fff;--accent-soft:#eaf1ff;--ok:#15803d;--warn:#b45309;--radius:.7rem}
a{color:var(--accent)}
.brand a{display:inline-flex;align-items:center;gap:.5rem}
.brand svg{width:1.6rem;height:1.6rem;flex:none}
nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
nav a{padding:.35rem 0}
@media (max-width:30rem){.site-header .wrap{flex-wrap:wrap;gap:.25rem}}
button,input,select,textarea{min-height:2.75rem}
button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.secondary{background:#fff;color:var(--accent)}
button:hover{filter:brightness(.95)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.card{border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.tool-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.out-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.4rem}
.out-head button{min-height:2.25rem;padding:.3rem .7rem;font-size:.9rem}
.field-err{color:#b91c1c;font-size:.92rem;min-height:1.4em;margin:.2rem 0 0}
.result{min-height:9.5rem;margin-top:1rem;padding:1rem;border-radius:var(--radius);background:var(--accent-soft)}
.result[hidden]{display:block;visibility:hidden}
.verdict{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-weight:700;font-size:.95rem;color:#fff}
.v-unlikely{background:#64748b}.v-possible{background:var(--warn)}.v-likely{background:var(--accent)}
.big{line-height:1.05}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .9rem}
.stat b{display:block;font-size:2rem;line-height:1.1}
.stat span{color:var(--muted);font-size:.88rem}
.stat.main{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.grid-table table{font-size:.9rem}
@media (min-width:40rem){.grid-cols{columns:2;column-gap:1.2rem}.grid-cols table{break-inside:avoid}}
details{border:1px solid var(--border);border-radius:.5rem;padding:.6rem .8rem;background:#fff}
details[open] summary{margin-bottom:.4rem}
input[aria-invalid=true]{border-color:#b91c1c}
:root{--accent:#166534;--accent-soft:#ecf6ef}
@media (max-width:34rem){#courses thead{display:none}#courses,#courses tbody{display:block}#courses tr{display:grid;grid-template-columns:1fr 4.5rem 4.5rem 2.75rem;gap:.35rem;padding:.4rem 0;border-bottom:1px solid var(--border)}#courses td{border:0;padding:0}#courses td:first-child{grid-column:1/-1}#courses input,#courses select{width:100%!important}#courses td:nth-child(4) select{width:100%}}
@media (max-width:34rem){#courses tr{grid-template-columns:4.5rem 4.5rem 1fr 2.75rem}}
.gpa-scale{height:.4rem;border-radius:999px;margin:.8rem 0 .2rem;background:linear-gradient(90deg,#dc2626,#f59e0b 50%,#16a34a)}
.site-header{border-top:4px solid var(--accent)}
/* ---- v2 modern look (Design Lead) ---- */
.sky{background:linear-gradient(170deg,#0f2f1c 0,#166534 15rem,#a7d8b5 24rem,#f0f7f2 30rem) no-repeat,#f0f7f2}
.sky .site-header{background:transparent;border:0;color:#fff}.sky .site-header nav a{color:#fff;opacity:.9}
.sky main>h1{color:#fff;letter-spacing:-.02em}.sky main>.lede{color:#e6f2ee}
.sky .card{background:rgba(255,255,255,.92);border:0;border-radius:1.3rem;box-shadow:0 10px 30px rgba(11,31,51,.13);padding:1.2rem}
.sky section>h2{letter-spacing:-.01em}
.sky button{border-radius:999px;font-weight:650}.sky input,.sky select{border-radius:.7rem}
.stat{border-radius:.9rem}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}
.sky main>.lede{color:#fff;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sky td,.sky th{border:0;border-bottom:1px solid var(--border)}.sky select{background:#fff;border:1px solid var(--border)}
.diagram{margin:1rem 0;background:#fff;border-radius:1rem;padding:.8rem;box-shadow:0 2px 10px rgba(11,31,51,.06)}.diagram svg{width:100%;height:auto;display:block}.diagram figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
#out{min-height:19.5rem}

/* MINOR-60 (2026-10-07): no horizontal overflow at 360px */
.tablewrap{max-width:100%;overflow-x:auto}.card,.result,main>section{min-width:0;max-width:100%}
#rows input,#rows select,#scale input{width:100%;min-width:3.5rem;max-width:7rem;padding:.45rem .4rem}
#rows td,#scale td{padding:.3rem .25rem}
.card label input{max-width:100%}
.tablewrap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* MINOR-69: reserve space for JS-built course rows and results */
[data-tool] #rows{display:table-row-group}[data-tool] .card .tablewrap{min-height:14.5rem}[data-tool] .result{min-height:6.5rem}

/* a11y: h2 styled like the former h3 (browser default h3 metrics) */
h2.as-h3{font-size:1.17em;margin:1em 0;letter-spacing:normal}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}