/* The College Application Process: the High School Graduation Plan's
   write-in boxes (2026-11-03). Loaded by course.json assets.css on every page
   of this course only. The boxes come from learning.css (.lesson-case,
   .lesson-case-ask, .lesson-case-input); this file only tunes them for a page
   that is mostly boxes. Mobile first: every group stacks; from 760px a group's
   boxes sit side by side, in tracks that can always shrink to the screen
   (min(100%, 220px)), never a bare 1fr (notes/phone-width.md). Brand colours
   only; teal as text is the darker #1f6e73. */
.lesson-layout .prose .plan-fields { border-left-color: #f59070; }
.lesson-layout .prose .plan-field { margin: 0 0 .9em; min-width: 0; }
.lesson-layout .prose .plan-fields .lesson-case-ask { margin: .9em 0 .35em; font-size: 1rem; }
.lesson-layout .prose .plan-field-prompt { margin: 0 0 .4em; font-size: .95rem; color: #63697a; }
.lesson-layout .prose .plan-fields .lesson-case-input { min-height: 56px; }
.lesson-layout .prose .plan-fields .lesson-case-input[rows="4"] { min-height: 110px; }
.lesson-layout .prose .plan-fields .lesson-case-input[rows="6"] { min-height: 150px; }
.lesson-layout .prose .plan-fields .lesson-case-input[rows="14"] { min-height: 320px; }
.lesson-layout .prose .plan-group { min-width: 0; margin: 1.2em 0; padding: 10px 14px 4px; border: 1px solid #a7b1c2; border-radius: 10px; }
.lesson-layout .prose .plan-group legend { padding: 0 6px; font-weight: 700; color: #30455c; }
.lesson-layout .prose .plan-group .lesson-case-ask { margin-top: .5em; font-size: .95rem; font-weight: 600; }
.lesson-layout .prose .plan-example { margin: .2em 0 1.2em; }
.lesson-layout .prose .plan-example-label { margin: 0 0 .3em; font-weight: 700; color: #63697a; }
.lesson-layout .prose .plan-example blockquote { margin: 0; }
.lesson-layout .prose .plan-saved { margin: .8em 0 0; font-weight: 600; color: #1f6e73; }
.lesson-layout .prose .plan-left-out { margin: 1em 0; }
@media (min-width: 760px) {
  .lesson-layout .prose .plan-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 14px; }
}
/* A web address written out as a link's words (Lesson 2's Amherst page) has
   no spaces to break at; let it wrap instead of widening a phone's page. */
.lesson-layout .prose a { overflow-wrap: anywhere; }

/* The College Plan form (Phase 1, 2026-11-05): form.college-plan, written by
   scripts/render-college-plan.mjs and run by college-plan.js. Mobile first:
   every field is full width; the five college cards on Lesson 2 sit two
   across from 760px, in tracks that can shrink (min(100%, 260px)). */
.lesson-layout .prose .college-plan { margin: 1.6em 0; padding: 16px; border: 2px solid #30455c; border-radius: 14px; background: #fff; min-width: 0; }
.lesson-layout .prose .college-plan .kicker { margin: 0 0 .3em; font-weight: 700; color: #30455c; }
.lesson-layout .prose .cp-status { margin: 0 0 1em; font-size: .95rem; color: #63697a; }
.lesson-layout .prose .cp-heading { margin: 1.2em 0 .4em; font-size: 1.05rem; color: #30455c; }
.lesson-layout .prose .cp-field { margin: 0 0 1em; min-width: 0; border: 0; padding: 0; }
.lesson-layout .prose .cp-label { display: block; margin: 0 0 .35em; font-weight: 600; color: #30455c; }
.lesson-layout .prose .cp-req { color: #30455c; }
.lesson-layout .prose .cp-field input[type="text"],
.lesson-layout .prose .cp-field input[type="url"],
.lesson-layout .prose .cp-field input[type="date"],
.lesson-layout .prose .cp-field select,
.lesson-layout .prose .cp-field textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #a7b1c2; border-radius: 10px; background: #fff; color: #30455c; }
.lesson-layout .prose .cp-field textarea { min-height: 84px; }
.lesson-layout .prose .cp-short input { max-width: 240px; }
.lesson-layout .prose .cp-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lesson-layout .prose .cp-option { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }
.lesson-layout .prose .cp-group { margin: 0 0 1em; padding: 10px 14px 2px; border: 1px solid #a7b1c2; border-radius: 10px; min-width: 0; }
.lesson-layout .prose .cp-group > legend { padding: 0 6px; font-weight: 700; color: #30455c; }
.lesson-layout .prose .cp-computed { padding: 10px 14px; border-left: 4px solid #07c4c8; background: #e6ecf0; border-radius: 6px; }
.lesson-layout .prose .cp-computed .cp-out { margin: 0; color: #30455c; }
.lesson-layout .prose .cp-missing { margin: .6em 0 0; font-weight: 600; color: #30455c; }
.lesson-layout .prose .cp-account { margin: 1em 0 0; padding: 10px 14px; border-left: 4px solid #f59070; background: #e6ecf0; border-radius: 6px; }
.lesson-layout .prose .cp-account p { margin: .3em 0; }
.lesson-layout .prose .cp-fine { margin: .6em 0 0; font-size: .9rem; color: #63697a; }
.lesson-layout .prose .college-plan .btn { white-space: normal; }
@media (min-width: 760px) {
  .lesson-layout .prose .college-plan[data-plan-page="lesson-2"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 14px; }
  .lesson-layout .prose .college-plan[data-plan-page="lesson-2"] > :not(.cp-group) { grid-column: 1 / -1; }
}