/* One frame for all five Home information widgets, in either visual design. */
.home-widget, html[data-design] .home-widget {
  border:var(--home-widget-border-width,1px) var(--home-widget-border-style,solid) var(--home-widget-border-color,var(--border,#bac5c0));
  border-radius:var(--home-widget-radius,12px);
  box-shadow:var(--home-widget-shadow,0 3px 10px #253b3210);
}
.home-widget-preview { padding:22px 24px; margin:18px 0; background:var(--surface); display:flex; align-items:center; gap:16px; }
.home-widget-preview > svg { flex:none; }
.home-widget-preview > span { min-width:0; flex:1; display:grid; gap:5px; }
.home-widget-preview strong { font-size:1.35rem; }
.home-widget-preview small { color:var(--muted); }
@media (forced-colors:active), print { html[data-design] .home-widget { box-shadow:none; } }
.home-overview { align-items:start; margin-top:28px; }
.home-overview-panel { container-type:inline-size; min-width:0; padding:0; overflow:hidden; background:var(--surface); }
.home-overview-header { padding:22px 24px; display:grid; grid-template-columns:max-content minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:5px; color:var(--text,#263f3e); }
.home-overview-panel.is-open .home-overview-header { border-bottom:var(--home-widget-border-width,1px) var(--home-widget-border-style,solid) var(--home-widget-border-color,var(--border)); }
.home-overview-title { display:flex; align-items:center; gap:16px; min-width:0; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; }
.home-overview-title > svg { flex:none; }
.home-overview-title > span { min-width:0; white-space:nowrap; }
.home-overview-title:focus-visible { outline:2px solid var(--primary); outline-offset:5px; border-radius:3px; }
.home-overview-context { display:flex; align-items:center; justify-self:end; gap:4px; grid-column:2; grid-row:1; min-width:0; max-width:100%; }
.home-overview-description { grid-column:1 / -1; grid-row:2; margin-left:42px; }
.home-overview-context:empty { display:none; }
.overview-create-group { white-space:nowrap; }
.overview-group-actions { display:flex; justify-content:flex-end; padding-top:16px; border-top:1px solid var(--border); }
.overview-semester-name { font-weight:650; font-size:16px; text-decoration:none; color:var(--text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.overview-collapse { grid-column:3; grid-row:1; }
.overview-collapse[aria-expanded=false] svg { transform:rotate(-90deg); }
.home-overview-body { padding:8px 24px 18px; min-height:170px; }
.home-overview-body[hidden] { display:none; }
.overview-column-labels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; padding:18px 0 12px; }
.overview-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:22px; min-height:98px; padding:18px 0; border-top:1px solid var(--border); }
.overview-primary-link { font-weight:650; font-size:16px; line-height:1.45; text-decoration:none; color:var(--text); overflow-wrap:anywhere; }
.overview-primary-link:hover,.overview-semester-name:hover,.overview-plan-link:hover { color:var(--primary); text-decoration:underline; }
.overview-row-detail { min-width:0; display:grid; gap:6px; }
.overview-choice { display:flex; align-items:center; gap:4px; min-width:0; }
.overview-plan-link { color:var(--text); font-size:14px; font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
.overview-switcher { position:relative; flex:none; width:36px; height:36px; border:0; border-radius:7px; display:grid; place-items:center; color:var(--muted); background:transparent; }
.overview-switcher:hover { color:var(--primary); }
.overview-switcher:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
.overview-switcher select { position:absolute; inset:0; width:100%; height:100%; min-width:0; opacity:0; cursor:pointer; }
.overview-plan-progress { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; color:var(--primary); }
.overview-plan-progress progress { width:100%; min-width:0; height:6px; }
.overview-create-plan { justify-self:start; text-align:left; font-size:12px; font-weight:400; line-height:1.5; text-decoration:underline; text-underline-offset:3px; }
.overview-muted { color:var(--muted); font-size:12px; line-height:1.5; }
.overview-room-link { display:flex; align-items:center; gap:7px; padding:5px 0; min-width:0; text-align:left; font-size:14px; font-weight:650; }
.overview-room-link span { overflow-wrap:anywhere; }
.overview-room-link svg { flex:none; }
.overview-empty { padding:24px 0; color:var(--muted); font-size:14px; line-height:1.6; }
.overview-empty p { margin:0 0 16px; }
.semester-active-control { display:flex; align-items:flex-start; gap:12px; padding:16px 20px; margin:0 0 22px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.semester-active-control input { margin-top:4px; width:18px; height:18px; accent-color:var(--primary); }
.semester-active-control span { display:grid; gap:4px; }
.semester-active-control small { color:var(--muted); }
@media(max-width:1100px){.home-overview-body{padding:8px 18px 16px}.overview-row,.overview-column-labels{gap:14px}}
@media(max-width:700px){.home-overview{grid-template-columns:minmax(0,1fr)}.home-overview-header{padding:18px 14px;column-gap:10px}.home-overview-title{gap:10px}.home-overview-description{margin-left:36px}.overview-row{min-height:88px}.overview-primary-link{font-size:15px}}

/* Keep semester and title together even when a panel is narrow. */
@container (max-width:400px){
  .home-overview-header:has(.home-overview-context:not(:empty)) .home-overview-title > svg{display:none}
  .home-overview-header:has(.home-overview-context:not(:empty)) .home-overview-description{margin-left:0}
}

.overview-exam-date { display:flex; gap:8px; align-items:flex-start; margin:2px 0 3px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--exam-countdown-color,var(--primary)) 24%,var(--border)); border-radius:7px; background:color-mix(in srgb,var(--exam-countdown-color,var(--primary)) 7%,var(--surface)); }
.overview-exam-date > svg { flex:none; color:var(--exam-countdown-color,var(--primary)); margin-top:2px; }
.overview-exam-date > span { display:grid; gap:3px; min-width:0; }
.overview-exam-date strong { color:var(--exam-countdown-color,var(--primary)); font-size:14px; line-height:1.4; }
.overview-exam-date span span { color:var(--exam-countdown-color,var(--muted)); font-size:12px; line-height:1.4; }
.overview-upcoming-exam { color:var(--text); text-decoration:none; font-size:14px; font-weight:650; }
.overview-exam-link:hover .overview-exam-date,.overview-upcoming-exam:hover .overview-exam-date { border-color:var(--exam-countdown-color,var(--primary)); }
.overview-next-exam { color:var(--exam-countdown-color,var(--primary)); }
@container (max-width:400px) { .overview-exam-date { padding:8px; gap:5px; } .overview-exam-date > svg { display:none; } }

.overview-exam-link { display:block; flex:1; min-width:0; color:inherit; text-decoration:none; }
.overview-exam-link .overview-exam-date { overflow-wrap:anywhere; }
.overview-exam-link:focus-visible,.overview-upcoming-exam:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:7px; }

/* Give the semester room for a compact grade column without growing the row. */
@media(min-width:761px) { .home-overview { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.home-semester-panel .overview-row,.home-semester-panel .overview-column-labels { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 58px; gap:16px; }
.overview-course-grade { color:var(--text); font-size:16px; font-weight:650; text-align:right; text-decoration:none; font-variant-numeric:tabular-nums; }
.overview-course-grade:hover { color:var(--primary); text-decoration:underline; }
.home-semester-panel .overview-column-labels > span:last-child { text-align:right; }
@container(max-width:420px) {
  .home-semester-panel .overview-row,.home-semester-panel .overview-column-labels { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 44px; gap:9px; }
  .overview-course-grade { font-size:14px; }
}