/* Course selection and the first adventure. */
.map-heading{align-items:flex-end;flex-wrap:wrap}
.map-heading>div:first-child{flex:1;min-width:260px}
.course-filters{display:flex;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;flex-shrink:0;gap:10px;width:545px;max-width:100%;margin-left:auto}
.course-filter{min-width:0}
.course-filter>label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:0 3px 7px}
.course-select{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--green)}
.course-select select{appearance:none;cursor:pointer;border:0;background:transparent;color:var(--green);font-size:13px;font-weight:700;padding:11px 4px;min-width:64px;width:100%}
.course-select>svg{flex-shrink:0;pointer-events:none}
.grade-term-select{width:110px}
.subject-select{width:105px}
.course-select option.selected{font-weight:700;color:var(--green)}
.subject-select option.available{color:var(--green);font-weight:700}
.subject-select option:disabled{color:#92988b;font-weight:400}
.course-book-filter{width:min(310px,100%)}
.course-book-filter .book-select{width:100%;margin:0;min-height:44px;flex-shrink:1}
.course-book-filter .book-select select{min-width:0;flex:1;text-overflow:ellipsis;width:100%;font-size:12px}
.grade-term-modal{max-width:540px;text-align:center}
.grade-term-modal .big-emoji{font-size:38px;margin-bottom:10px}
.grade-term-modal h2{font-size:24px;line-height:1.4}
.grade-term-modal>p{font-size:13px;line-height:1.8;margin:13px 0 22px;color:var(--muted)}
.initial-course-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0 16px}
.initial-course-field{min-width:0;text-align:left}
.initial-course-field>label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 4px 9px}
.initial-select{position:relative;display:flex;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--canvas);transition:border-color .18s,box-shadow .18s}
.initial-select select{appearance:none;width:100%;min-height:60px;border:0;border-radius:14px;background:transparent;padding:17px 40px 17px 16px;font-size:16px;line-height:1.5;color:var(--muted);cursor:pointer}
.initial-select>svg{position:absolute;right:15px;color:var(--muted);pointer-events:none}
.initial-select.selected{border-color:var(--green);background:var(--surface)}
.initial-select.selected select{color:var(--green);font-weight:700}
.initial-select:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #7c94782a}
.initial-course-preview{font-size:12px;line-height:1.8;color:var(--muted);margin:16px 0 0}
.initial-course-preview strong{color:var(--green);margin-left:5px}
.grade-term-modal form>.muted{font-size:12px;line-height:1.7;margin:20px 0 15px}
/* The quote shares the map header with the weather. */
.world-map .map-top{gap:16px;flex-wrap:wrap;align-items:flex-start}
.map-top>div:first-child{min-width:0;flex:0 1 190px}
.map-ambient{display:flex;align-items:flex-start;justify-content:flex-end;gap:16px;flex:1 1 280px;min-width:0}
.map-note{flex:1;min-width:0;max-width:300px;text-align:left}
.map-note>span{font-size:10px;color:var(--muted)}
.map-note blockquote{font-size:12px;line-height:1.65;margin:5px 0;overflow-wrap:anywhere;color:var(--ink)}
.map-note blockquote small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.map-note footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--muted)}
.map-note .text-button{flex-shrink:0;font-size:10px;padding:3px 0}
.map-ambient .weather-button{flex:0 1 125px;min-width:85px;max-width:150px;justify-content:flex-end;margin-top:0}
@media(max-width:760px){
  .course-filters{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
  .grade-term-select,.subject-select{width:auto}
  .course-book-filter{width:100%;grid-column:1/-1}
  .course-book-filter .book-select{background:var(--surface)}
  .map-ambient{justify-content:space-between}
  .map-note{max-width:none}
}
@media(max-width:480px){
  .initial-course-fields{gap:12px;margin-top:20px}
  .initial-select select{min-height:54px;padding:15px 32px 15px 12px;font-size:14px}
  .initial-select>svg{right:10px}
  .grade-term-modal h2{font-size:21px}
  .grade-term-modal>p{font-size:12px;margin-bottom:16px}
  .grade-term-modal form>.muted{margin:14px 0;font-size:11px}
  .world-map .map-top{gap:14px}
  .map-ambient{gap:12px;flex-basis:100%}
  .map-ambient .weather-button{flex-basis:105px;max-width:110px}
}