/* ── Grade table ──────────────────────────────────── */
.grade-table{width:100%;border-collapse:collapse;font-size:.875rem;margin-bottom:1rem}
.grade-table th,.grade-table td{padding:.45rem .75rem;border:1px solid var(--color-border);text-align:left;vertical-align:middle}
.grade-table thead tr{background:var(--color-surface-2);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted)}
.grade-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.grade-table td:nth-child(2),.grade-table td:nth-child(4){font-weight:700;color:var(--color-text)}

/* ── Classification badges ────────────────────────── */
.cls-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.cls-list li{display:flex;align-items:center;gap:.75rem;font-size:.9rem}
/* .badge is defined once globally in style.css (pill) - no override here, for consistency. */

/* ── Tab navigation ───────────────────────────────── */
.calc-tabs{display:flex;gap:.375rem;margin-bottom:1.5rem;border-bottom:1px solid var(--color-border);padding-bottom:0}
.calc-tabs button,.calc-tabs a{background:none;border:none;padding:.6rem 1.1rem;font-size:.875rem;font-weight:500;color:var(--color-text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0;transition:color .15s,border-color .15s;text-decoration:none;display:inline-block}
.calc-tabs button:hover,.calc-tabs a:hover{color:var(--color-text)}
.calc-tabs button.active,.calc-tabs a.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ── Tab panels ───────────────────────────────────── */
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── University banner ────────────────────────────── */
.uni-banner{display:flex;align-items:center;gap:1.25rem;padding:1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:1.5rem}
.uni-banner img{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.uni-banner h1,.uni-banner .uni-abbr{font-size:1.5rem;font-weight:800;margin:0 0 .2rem}
.uni-banner p{margin:0;font-size:.875rem;color:var(--color-text-muted)}
.page-intro{margin-bottom:1.25rem}
.page-intro h1{font-size:1.75rem;font-weight:800;line-height:1.2;margin:0 0 .4rem}
.page-intro p{margin:0;max-width:700px;color:var(--color-text-muted);font-size:.95rem}

/* ── Course rows ──────────────────────────────────── */
.course-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.course-row .grade-sel{flex:1;min-width:0}
.course-row .credit-sel{width:110px;flex-shrink:0}
.remove-btn{background:none;border:1px solid var(--color-border);border-radius:6px;padding:.3rem .55rem;color:var(--color-text-muted);cursor:pointer;font-size:.9rem;line-height:1;flex-shrink:0;transition:border-color .15s,color .15s}
.remove-btn:hover{border-color:var(--color-error,#fb7185);color:var(--color-error,#fb7185)}
.course-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}

/* Scanned rows stack the course label above the controls so the code stays
   readable on a phone instead of squeezing four fields onto one line. */
.course-row.has-code{flex-direction:column;align-items:stretch;gap:.4rem;padding:.55rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface)}
.course-row.has-code .course-controls{display:flex;gap:.5rem;align-items:center}
.course-row.has-code .grade-sel{flex:1;min-width:0}
.course-lbl{font-size:.8rem;padding:.35rem .5rem}

/* ── Scan status ──────────────────────────────────── */
.scan-note{padding:.6rem .8rem;border-radius:6px;font-size:.85rem;margin-bottom:.85rem;border-left:3px solid;background:var(--color-surface-2)}
.scan-note-info{border-color:var(--color-text-muted)}
.scan-note-warn{border-color:#f59e0b}
.scan-note-error{border-color:var(--color-error,#fb7185)}

/* ── Result box ───────────────────────────────────── */
.calc-result{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem;text-align:center;margin-top:1.25rem}
.calc-result-value{font-size:3.5rem;font-weight:800;line-height:1;color:var(--color-primary);font-family:var(--font-mono)}
.calc-result-class{font-size:1rem;font-weight:600;margin-top:.5rem;padding:.25rem .75rem;border-radius:20px;display:inline-block}
.calc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.75rem;margin-top:1.25rem}
.stat-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:.65rem .75rem}
.stat-box .sl{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.stat-box .sv{font-size:1.1rem;font-weight:700;margin-top:.2rem;font-family:var(--font-mono)}
.motivation{margin-top:1rem;padding:.65rem .9rem;border-left:3px solid;border-radius:6px;background:var(--color-surface);font-size:.85rem;font-weight:500}
.scale-pct{font-size:.8rem;color:var(--color-text-muted);margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--color-border)}
.scale-pct a{color:var(--color-primary);font-weight:600;text-decoration:none}
.scale-pct a:hover{text-decoration:underline}

/* ── Planner current-progress block ──────────────── */
.progress-block{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:6px;padding:.9rem;margin-bottom:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.progress-block label{font-size:.78rem;font-weight:600;color:var(--color-text-muted);display:block;margin-bottom:.25rem}

/* ── Target bar ───────────────────────────────────── */
.target-bar{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:6px;padding:.9rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.target-bar label{font-size:.85rem;font-weight:600}
.target-bar select{padding:.4rem .65rem;font-size:.85rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text)}
#planner-msg{font-size:.85rem;margin-top:.5rem;width:100%}

/* ── Works section headings ───────────────────────── */
.works-h2{font-size:1.15rem;font-weight:700;margin:1.5rem 0 .75rem}
.works-h3{font-size:.95rem;font-weight:700;margin:1.25rem 0 .6rem}
.works-note{font-size:.8rem;color:var(--color-text-muted);margin-top:-.75rem;margin-bottom:1rem}
.works-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border)}

@media(max-width:500px){
  .calc-stats{grid-template-columns:1fr 1fr}
  .progress-block{grid-template-columns:1fr}
  .uni-banner img{width:42px;height:42px}
}

/* ── Year planner ─────────────────────────────────── */
.yp-h2{font-size:1.15rem;font-weight:700;margin:0 0 .35rem}
.yp-sub{font-size:.9rem;margin-bottom:1.15rem}
.yp-setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.85rem;margin-bottom:.65rem;align-items:end}
.yp-field label{display:block;font-size:.78rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.3rem}
.yp-hint{font-weight:400;opacity:.75}
.yp-load{font-size:.82rem;color:var(--color-text-muted);margin:0 0 1.15rem;padding:.5rem .7rem;border-left:3px solid var(--color-border);border-radius:0 6px 6px 0;background:var(--color-surface-2)}
.yp-load-warn{border-left-color:#f59e0b;color:var(--color-text)}
.yp-empty{font-size:.88rem;color:var(--color-text-muted);text-align:center;padding:1.75rem 1rem;border:1px dashed var(--color-border);border-radius:var(--radius);margin:0}

.yp-quick{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--color-text-muted);margin-bottom:.75rem}
.yp-qbtn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:.22rem .65rem;font-size:.78rem;font-weight:600;color:var(--color-text);cursor:pointer;transition:border-color .15s,color .15s}
.yp-qbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.yp-qbtn-clear{color:var(--color-text-muted)}

.yp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.7rem}
@media(min-width:760px){.yp-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.yp-grid{grid-template-columns:repeat(4,1fr)}}
.yp-course{border:1px solid var(--color-border);border-left:3px solid var(--yp-tint,var(--color-border));border-radius:8px;padding:.7rem .75rem;background:var(--color-surface);transition:border-left-color .2s}
.yp-course-hd{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}
.yp-course-name{font-size:.82rem;font-weight:600;margin:0}
.yp-chip{font-size:.68rem;font-weight:600;letter-spacing:.03em;color:var(--color-text-muted);background:var(--color-surface-2);border-radius:20px;padding:.1rem .45rem;white-space:nowrap}
.yp-course-ft{font-size:.73rem;color:var(--color-text-muted);margin-top:.4rem;font-family:var(--font-mono)}

.yp-reslabel{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:.25rem}
.yp-delta{font-size:.9rem;font-weight:600;margin-top:.6rem;font-family:var(--font-mono)}
.yp-delta span{font-weight:400;font-family:var(--font-sans,inherit);color:var(--color-text-muted);font-size:.82rem}
.yp-delta.up{color:#059669}.yp-delta.down{color:var(--color-error,#fb7185)}.yp-delta.flat{color:var(--color-text-muted)}
.yp-cum{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--color-border);font-size:.88rem}
.yp-cum .badge{margin-left:.4rem}
.yp-cum em{display:block;font-style:normal;font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}
.yp-partial{font-size:.78rem;color:var(--color-text-muted);margin:.85rem 0 0}

@media(max-width:500px){
  .yp-grid{grid-template-columns:1fr}
  .yp-setup{grid-template-columns:1fr 1fr}
}

/* ── Sticky result banner ─────────────────────────── */
.yp-banner{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);
  padding:.8rem 1.05rem;margin:0 0 1.1rem;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.yp-banner-idle{opacity:.75;box-shadow:none}
.yp-b-main{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.yp-b-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);flex:0 0 100%}
.yp-b-val{font-size:2.2rem;font-weight:800;line-height:1;font-family:var(--font-mono)}
.yp-b-delta{font-size:1rem;font-weight:700;font-family:var(--font-mono);white-space:nowrap}
.yp-b-delta span{display:block;font-family:inherit;font-weight:400;font-size:.72rem;color:var(--color-text-muted)}
.yp-b-delta.up{color:#059669}.yp-b-delta.down{color:var(--color-error,#fb7185)}.yp-b-delta.flat{color:var(--color-text-muted)}
.yp-b-side{display:flex;gap:1.1rem;margin-left:auto}
.yp-b-side span{font-size:.95rem;font-weight:700;font-family:var(--font-mono);white-space:nowrap}
.yp-b-side em{display:block;font-style:normal;font-weight:400;font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--color-text-muted);font-family:var(--font-sans,inherit)}
.yp-b-hint{margin:0;font-size:.82rem;color:var(--color-text-muted)}
.yp-math{font-size:.8rem;color:var(--color-text-muted);font-family:var(--font-mono);margin:1rem 0 0;
  padding-top:.85rem;border-top:1px solid var(--color-border);line-height:1.6}
@media(max-width:620px){
  .yp-banner{gap:.6rem .9rem;padding:.7rem .8rem}
  .yp-b-val{font-size:1.75rem}
  .yp-b-side{margin-left:0;flex:1 1 100%;justify-content:space-between;gap:.5rem}
  .yp-b-side span{font-size:.85rem}
}

/* Inline override for derived prior credits - exception path only */
.yp-link{background:none;border:none;padding:0;font:inherit;font-size:.8rem;color:var(--color-primary);
  text-decoration:underline;cursor:pointer}
.yp-link:hover{opacity:.8}
.yp-cr-input{width:5.5rem;padding:.12rem .4rem;font:inherit;font-size:.8rem;font-family:var(--font-mono);
  border:1px solid var(--color-border);border-radius:5px;background:var(--color-surface);
  color:var(--color-text);margin:0 .3rem}

/* ── Classic planner: locked row (paywall) ────────── */
.course-row.pla-locked{position:relative;opacity:.55;pointer-events:auto}
.course-row.pla-locked .grade-sel{pointer-events:none}
.pla-lock-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--color-surface);border:1px dashed var(--color-border);border-radius:6px;
  font-size:.8rem;font-weight:600;color:var(--color-primary);cursor:pointer;z-index:1}

/* ── Year/classification planner: locked course card (paywall) ── */
.yp-course.yp-locked{position:relative;opacity:.55}
.yp-course.yp-locked .yp-sel{pointer-events:none}
.yp-lock-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.35rem;
  background:var(--color-surface);border:1px dashed var(--color-border);border-radius:8px;
  font-size:.78rem;font-weight:600;color:var(--color-primary);cursor:pointer;z-index:1}
.yp-setup-cur{margin-top:-.15rem}

/* ── Other universities directory ─────────────────── */
.other-unis{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--color-border)}
.other-unis h2{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin:0 0 .75rem}
.other-unis-links{display:flex;flex-wrap:wrap;gap:.5rem}
.other-unis-links a{display:inline-block;padding:.35rem .7rem;font-size:.8125rem;font-weight:600;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);text-decoration:none;transition:color .15s,border-color .15s}
.other-unis-links a:hover{color:var(--color-primary);border-color:var(--color-primary)}

/* ── FAQ ──────────────────────────────────────────── */
.faq{margin:2.5rem 0 0}
.faq h2{font-size:1.125rem;font-weight:700;margin:0 0 .75rem}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);margin-bottom:.5rem;overflow:hidden}
.faq-item summary{padding:.85rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.1rem;font-weight:400;color:var(--color-text-muted);flex-shrink:0}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--color-primary)}
.faq-item p{margin:0;padding:0 1rem 1rem;font-size:.875rem;line-height:1.65;color:var(--color-text-muted)}
/* Reserve the calculator/planner's first-render height so the FAQ below doesn't
   jump when engine.js fills them in (layout shift). Values are the smallest first
   render across all universities at each width, so the reservation never exceeds
   the real content; re-measure if the initial calculator/planner markup changes. */
#tab-cal:empty{min-height:148px}#tab-pla:empty{min-height:456px}
@media(max-width:768px){#tab-cal:empty{min-height:139px}#tab-pla:empty{min-height:429px}}
@media(max-width:480px){#tab-cal:empty{min-height:165px}#tab-pla:empty{min-height:437px}}
