/* Engly: a quiet overview around the existing gradebook and planner. */
:root {
  --bg: #191b1d;
  --surface: #212426;
  --surface2: #2a2e31;
  --line: #404447;
  --soft-line: #303437;
  --text: #eeede9;
  --muted: #afb2b4;
  --accent: #d4d7d7;
  --accent-bg: #2c3033;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: var(--sans);
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  height: 82px;
  padding: 0 clamp(24px, 3.7vw, 64px);
  background: var(--bg);
}
.brand-copy { border: 0; padding: 0; }
.brand strong {
  font-family: var(--sans);
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.055em;
}
.brand small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .06em; }
.nav { margin: 0; gap: 30px; padding-left: 34px; border-left: 1px solid var(--soft-line); }
.nav-button { font-size: 13px; padding: 0; }
.nav-button.active { font-weight: 500; }
.nav-button.active:after { bottom: 0; height: 2px; background: var(--text); }
.top-tools { gap: 19px; min-width: 0; }
.term-tools { gap: 12px; margin: 0; }
.term-tools select { font-size: 12px; min-height: 34px; padding: 6px 30px 6px 10px; }
.term-tabs { gap: 2px; border: 1px solid var(--line); border-radius: 4px; padding: 3px; }
.term-tabs button { font-size: 12px; padding: 3px 11px; border: 0; border-radius: 2px; }
.term-tabs button.active { background: #373c40; color: var(--text); }
.save-state { font-size: 11px; }
.save-state svg { color: #b8c1bc; }
.tools-divider { height: 24px; }
.icon-btn { width: 33px; height: 33px; }
.shell { max-width: 1500px; padding: 32px clamp(24px, 3.7vw, 64px) 48px; }
.page-heading { margin-bottom: 24px; align-items: flex-end; }
.eyebrow { font-size: 9px; letter-spacing: .14em; margin-bottom: 10px; }
h1 { font-size: clamp(32px, 3vw, 42px); font-weight: 500; letter-spacing: -.04em; }
h2, .course-goal h3, .planner-aside h3, .empty-state h3 { font-weight: 500; letter-spacing: -.025em; }
.course-heading h2 { font-size: 30px; }
.dialog-header h2 { font-size: 27px; }
.course-goal h3, .planner-aside h3 { font-size: 23px; }
.sample-badge, .preview-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 4px 7px;
  border-radius: 3px;
  font: 10px/1.2 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.sample-notice { padding: 8px 0; margin: 0 0 20px; background: transparent; border: 0; font-size: 11px; }
.sample-notice .text-btn { font-size: 11px; }
.btn { border-color: #60676b; }
.btn.solid { background: var(--text); color: #202326; border-color: var(--text); }
.btn.solid:hover { background: #d5d6d2; border-color: #d5d6d2; }
.notice.info { background: var(--surface); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; }
.overview-panel { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-width: 0; }
.semester-summary { display: flex; flex-direction: column; padding: 24px 27px; }
.panel-label { font: 500 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ccd0d1; }
.summary-main { display: flex; align-items: center; gap: 35px; margin: 16px 0 12px; }
.summary-number { font-size: clamp(55px, 5.9vw, 82px); font-weight: 450; line-height: 1.05; letter-spacing: -.055em; }
.summary-number span { font-size: .38em; margin-left: 6px; color: #c5c9ca; letter-spacing: -.02em; }
.summary-goal { border-left: 1px solid #53595d; padding-left: 26px; }
.summary-goal label { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.summary-goal .goal-input { width: 88px; font-size: 31px; font-weight: 450; padding: 0 22px 0 0; letter-spacing: -.03em; }
.summary-goal .percent-wrap { display: inline-block; }
.summary-goal .percent-wrap:after { right: 5px; font-size: 19px; }
.summary-context { font-size: 12px; color: var(--text); }
.summary-basis { font-size: 11px; color: var(--muted); margin-top: 4px; margin-bottom: 24px; }
.semester-stats { display: grid; grid-template-columns: 1fr 1.1fr .7fr; gap: 18px; padding-top: 20px; margin: auto 0 0; border-top: 1px solid #505659; }
.semester-stats > div + div { padding-left: 17px; border-left: 1px solid var(--line); }
.semester-stats dt { color: var(--muted); text-transform: uppercase; letter-spacing: .065em; font-size: 9px; white-space: nowrap; }
.semester-stats dd { margin: 6px 0 0; font-size: 24px; font-weight: 450; font-variant-numeric: tabular-nums; line-height: 1.1; }
.semester-stats dd span { font-size: 17px; color: #c5c9ca; }

.deadline-panel { padding: 22px 25px 15px; }
.panel-heading { display: flex; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading .text-btn { margin-left: auto; font-size: 10px; padding: 0; }
.deadline-title, .deadline-row { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.deadline-featured { padding: 15px 0 16px; }
.deadline-panel h3 { font-size: 14px; font-weight: 500; line-height: 1.4; }
.deadline-panel article p { color: var(--muted); font-size: 10px; margin-top: 3px; }
.due-label { font-size: 10px; white-space: nowrap; color: #d3d6d7; background: #33383b; border: 1px solid #454b4f; border-radius: 3px; padding: 3px 7px; }
.poll-preview { margin-top: 14px; }
.poll-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.poll-heading h4 { margin: 0; font-weight: 450; font-size: 12px; }
.poll-heading > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.poll-control { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.poll-control > span { font-size: 10px; color: #ccd0d1; }
.poll-control input[type=range] { flex: 1; width: 0; min-width: 30px; padding: 0; height: 5px; border: 0; appearance: none; border-radius: 5px; background: linear-gradient(to right,#b9c1c4 70%,#4e5559 70%); opacity: 1; }
.poll-control input::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #e1e3e2; border: 1px solid #d0d6d8; }
.poll-control input::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #e1e3e2; border: 1px solid #d0d6d8; }
.poll-vote { min-height: 25px; padding: 3px 9px; font-size: 10px; }
.poll-vote:disabled { opacity: .55; }
.deadline-panel .poll-preview p { font-size: 9px; margin-top: 7px; color: #9fa6a9; }
.deadline-row { padding: 13px 0; border-top: 1px solid var(--line); align-items: center; }
.deadline-row h3 { font-size: 12px; }
.deadline-row .due-label { background: transparent; border-color: transparent; color: var(--muted); }
.deadline-disclaimer { font-size: 9px; color: #9fa6a9; margin-top: 3px; }
.deadlines-intro { margin-bottom: 25px; color: #d4d7d7; font-size: 13px; }
.deadlines-intro > span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.deadline-panel-full { max-width: 850px; padding: 25px 30px; }
.deadline-panel-full .deadline-featured { padding-top: 25px; padding-bottom: 25px; }
.deadline-panel-full .deadline-row { padding-top: 20px; padding-bottom: 20px; }
.deadline-panel-full h3 { font-size: 16px; }
.deadline-panel-full .poll-preview { max-width: 600px; margin-top: 22px; }

.courses-overview { margin-top: 32px; }
.courses-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #555b5e; }
.courses-heading > div { display: flex; align-items: baseline; gap: 16px; }
.courses-heading h2 { font-size: 25px; letter-spacing: -.025em; }
.courses-heading span { font-size: 11px; color: var(--muted); }
.courses-heading .btn { font-size: 11px; min-height: 33px; padding: 6px 12px; }
.course-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
.overview-course { position: relative; border-bottom: 1px solid var(--line); padding: 18px 0 17px; min-width: 0; }
.overview-course:nth-child(even):before { position: absolute; content: ''; left: -28px; top: 19px; bottom: 18px; width: 1px; background: var(--line); }
.course-open { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; border-radius: 2px; }
.course-open:hover .course-name { color: white; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #777f83; }
.overview-course-copy { min-width: 0; }
.course-code { font-weight: 450; font-size: 10px; letter-spacing: .07em; color: #c3c8ca; }
.course-name { max-width: none; display: block; font-size: 14px; color: var(--text); margin-top: 4px; line-height: 1.4; }
.overview-grade { flex-shrink: 0; font-size: 30px; letter-spacing: -.035em; line-height: 1.2; }
.overview-grade small { font-size: 15px; color: #bcc3c6; margin-left: 2px; }
.course-open > svg { width: 15px; height: 15px; color: var(--muted); }
.overview-course-meta { display: flex; gap: 16px; justify-content: space-between; align-items: center; min-height: 23px; margin-top: 11px; }
.overview-course-meta > span { font-size: 10px; color: var(--muted); white-space: nowrap; }
.course-progress { flex: 1; max-width: 68%; background: #444a4e; height: 4px; overflow: hidden; border-radius: 6px; }
.course-progress > span { height: 100%; display: block; background: #bec7cb; border-radius: inherit; }
.overview-course-meta .btn { font-size: 10px; padding: 3px 9px; min-height: 26px; }
.course-overview-grid > .empty-state { grid-column: 1 / -1; }
.course-page { max-width: 1050px; margin: 0 auto; border-top: 1px solid var(--line); }
.course-page .course-detail { display: block; padding: 24px 0; }
.course-page .mobile-back { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; padding: 0; margin-bottom: 25px; }
.course-page .mobile-back svg { width: 15px; height: 15px; }

@media (max-width: 1150px) {
  .topbar { gap: 25px; padding-left: 25px; padding-right: 25px; }
  .nav { gap: 23px; padding-left: 25px; }
  .top-tools { gap: 12px; }
  .save-state span { display: none; }
  .tools-divider { display: none; }
  .overview-grid { gap: 18px; }
  .semester-summary { padding: 23px; }
  .summary-main { gap: 23px; }
  .summary-goal { padding-left: 20px; }
  .summary-number { font-size: 64px; }
  .deadline-panel { padding-left: 21px; padding-right: 21px; }
  .course-overview-grid { column-gap: 44px; }
  .overview-course:nth-child(even):before { left: -22px; }
}
@media (max-width: 850px) {
  .topbar { gap: 18px; }
  .brand strong { font-size: 30px; }
  .brand small { display: block; }
  .nav { gap: 18px; padding-left: 18px; margin: 0; }
  .nav-button { font-size: 12px; }
  .top-tools { gap: 8px; }
  .term-tools { gap: 7px; }
  .term-tools select { font-size: 11px; }
  .term-tabs button { font-size: 11px; padding: 4px 8px; }
  .save-state { display: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .summary-main { margin: 20px 0 12px; }
  .semester-stats { padding-top: 19px; }
  .summary-number { font-size: 76px; }
  .semester-summary { padding: 25px; }
  .deadline-panel { padding: 22px 25px 16px; }
  .poll-heading > span { font-size: 10px; }
  .course-name { font-size: 13px; }
  .overview-grade { font-size: 26px; }
}
@media (max-width: 650px) {
  .topbar { height: auto; padding: 18px 20px 0; grid-template-columns: 1fr auto; gap: 14px 8px; }
  .brand strong { font-size: 30px; letter-spacing: -.055em; }
  .brand small { font-size: 9px; }
  .top-tools { grid-column: 2; grid-row: 1; gap: 7px; }
  .term-tools { gap: 6px; }
  .term-tools select { min-height: 30px; padding: 5px 23px 5px 8px; background-position: right 5px center; font-size: 10px; }
  .term-tabs { padding: 2px; }
  .term-tabs button { font-size: 10px; padding: 3px 7px; }
  .top-tools .icon-btn { height: 27px; width: 26px; }
  .top-tools .icon-btn svg { width: 17px; height: 17px; }
  .nav { grid-column: 1 / -1; min-height: 41px; gap: 28px; padding: 0; border-left: 0; }
  .nav-button { font-size: 12px; padding-bottom: 13px; padding-top: 9px; }
  .nav-button.active:after { bottom: -1px; }
  .shell { padding: 26px 20px 35px; }
  .page-heading { margin-bottom: 15px; }
  .eyebrow { font-size: 8px; letter-spacing: .09em; max-width: 290px; }
  h1 { font-size: 32px; }
  .title-row { gap: 12px; }
  .sample-badge { font-size: 9px; padding: 4px 6px; }
  .sample-notice { font-size: 10px; flex-wrap: wrap; gap: 3px; margin-bottom: 18px; padding: 3px 0; }
  .sample-notice .text-btn { font-size: 10px; }
  .overview-grid { gap: 16px; }
  .semester-summary { padding: 22px; }
  .summary-main { gap: 22px; margin-top: 18px; margin-bottom: 13px; }
  .summary-number { font-size: 65px; }
  .summary-goal { padding-left: 20px; }
  .summary-goal .goal-input { font-size: 28px; width: 79px; }
  .summary-context { font-size: 11px; }
  .summary-basis { font-size: 10px; margin-bottom: 22px; }
  .semester-stats { grid-template-columns: 1fr 1.1fr .7fr; gap: 11px; }
  .semester-stats > div + div { padding-left: 11px; }
  .semester-stats dt { font-size: 8px; letter-spacing: .02em; }
  .semester-stats dd { font-size: 22px; }
  .semester-stats dd span { font-size: 14px; }
  .deadline-panel { padding: 20px 20px 15px; }
  .deadline-title { gap: 12px; }
  .deadline-panel h3 { font-size: 13px; }
  .poll-heading { gap: 8px; flex-wrap: wrap; }
  .poll-heading h4 { font-size: 11px; }
  .poll-heading > span { font-size: 9px; }
  .poll-control { gap: 8px; }
  .poll-control > span { font-size: 9px; }
  .deadline-panel .poll-preview p, .deadline-disclaimer { font-size: 8px; }
  .deadline-row { gap: 10px; }
  .deadline-row h3 { font-size: 11px; }
  .due-label { font-size: 9px; }
  .courses-overview { margin-top: 30px; }
  .courses-heading { padding-bottom: 13px; gap: 10px; }
  .courses-heading > div { display: block; }
  .courses-heading h2 { font-size: 24px; }
  .courses-heading span { font-size: 10px; }
  .courses-heading .btn { font-size: 10px; padding: 6px 10px; }
  .course-overview-grid { grid-template-columns: 1fr; }
  .overview-course { padding: 18px 0; }
  .overview-course:nth-child(even):before { display: none; }
  .course-code { font-size: 9px; }
  .course-name { font-size: 13px; }
  .overview-grade { font-size: 28px; }
  .overview-course-meta > span { font-size: 9px; }
  .course-progress { max-width: 68%; }
  .course-page .course-detail { padding-top: 20px; }
  .course-page .course-heading h2 { font-size: 28px; }
  .deadline-panel-full { padding: 22px; }
}