/* /education — the Student Program page. Tokens only (paper and model spaces). */

/* "You are": two big choice cards instead of small radio rows (owner 2026-11-03). */
.ed-roles-set { border: 0; padding: 0; margin: 0 0 1.5rem; }
.ed-roles { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .ed-roles { grid-template-columns: 1fr 1fr; } }
.form-cc label.ed-role {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .25rem;
  align-items: center; margin: 0; padding: 1.5rem 1.5rem 1.5rem 1.25rem; min-height: 7rem; cursor: pointer;
  border: var(--pen-1) solid var(--line); border-radius: var(--radius); background: var(--sheet);
}
.ed-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ed-role .bi { grid-row: 1 / span 2; font-size: 2.5rem; line-height: 1; color: var(--ink-2); }
.ed-role-t { grid-column: 2; align-self: end; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.ed-role-l { grid-column: 2; align-self: start; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-2); }
.form-cc label.ed-role:hover { border-color: var(--ink-2); }
.form-cc label.ed-role:has(input:checked) { border: 5px solid var(--action); padding: calc(1.5rem - 4px) calc(1.5rem - 4px) calc(1.5rem - 4px) calc(1.25rem - 4px); }
.ed-role:has(input:checked) .bi { color: var(--action); }
.ed-role:has(input:focus-visible) { outline: var(--pen-2) solid var(--action); outline-offset: 3px; }

/* Hero: room between the lede and the two buttons. */
.page-education .page-head .btn-row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Step and price cards (How it works, When you finish school): real gaps between cards and around them. */
.ed-cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .ed-cards-3 { grid-template-columns: repeat(3, 1fr); } .ed-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ed-cards-4 { grid-template-columns: repeat(4, 1fr); } }
.ed-card { display: flex; flex-direction: column; padding: 1.75rem 1.5rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.ed-card > * { margin: 0; }
.ed-card-k { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: .5rem; }
.ed-card-h { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; margin-bottom: .75rem; }
.ed-card-p { color: var(--ink-2); line-height: 1.55; }
.ed-price { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; margin-bottom: 1rem; color: var(--ink); }
.ed-path .ed-card.is-first { border: var(--pen-3) solid var(--action); padding: calc(1.75rem - 1px) calc(1.5rem - 1px); }
.ed-path .ed-card.is-first .ed-price { color: var(--action); }
.ed-note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.page-education .ed-miss { margin-top: 2.5rem; }
.page-education .ed-miss .hint { margin-bottom: 0; }

/* Two-column sections (Teaching, Already in the program?): body text at the page's reading size. */
.page-education .split p { font-size: 1.125rem; line-height: 1.6; }
.page-education .split .ed-actions { margin-top: 1.5rem; }
.page-education #check .form-cc { margin-top: 1.25rem; }

/* Line up step, title, price and text across the cards in a row, even when a title wraps (owner 2026-11-03: "align"). */
.ed-cards .ed-card-h { min-height: 2.5em; }                    /* fallback: room for two-line titles */
@supports (grid-template-rows: subgrid) {
  .ed-cards { grid-auto-rows: auto; }
  .ed-cards-3 > .ed-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .ed-cards-4 > .ed-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .ed-cards .ed-card-h { min-height: 0; align-self: end; }
  .ed-cards .ed-card > * { align-self: start; }
  .ed-cards .ed-card > .ed-card-h { align-self: start; }
}

/* Group header over the path cards (owner 2026-11-03): step 1 = in school; steps 2-4 = "only if you want to upgrade your version".
   Drawn like a dimension line spanning the cards. Shown when the four cards are in one row; narrower screens tag each card instead. */
.ed-path-head { display: none; }
.ed-tag { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; font-size: .8125rem; font-weight: 700; color: var(--action); border: var(--pen-1) solid var(--action); border-radius: var(--radius); }
@media (min-width: 1200px) {
  .ed-path-head { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.25rem; margin-top: 2rem; }
  .ed-path-head + .ed-cards { margin-top: 1rem; }
  .ed-group { position: relative; margin: 0; padding: 0 0 .9rem; text-align: center; border-bottom: var(--pen-2) solid var(--ink-2); }
  .ed-group::before, .ed-group::after { content: ""; position: absolute; bottom: -.5rem; width: 0; height: 1rem; border-left: var(--pen-2) solid var(--ink-2); }
  .ed-group::before { left: 0; } .ed-group::after { right: 0; }
  .ed-group-free { grid-column: 1; border-color: var(--action); }
  .ed-group-free::before, .ed-group-free::after { border-color: var(--action); }
  .ed-group-up { grid-column: 2 / span 3; }
  .ed-group-t { display: block; font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
  .ed-group-free .ed-group-t { color: var(--action); }
  .ed-group-l { display: block; margin-top: .25rem; font-size: var(--fs-sm); color: var(--ink-2); }
  .ed-path .ed-tag { display: none; }
}
.ed-tag.is-free { color: var(--on-action); background: var(--action); }
@media (min-width: 1200px) { .ed-group-free .ed-group-l { color: var(--action); } }
@media (min-width: 1200px) { .ed-path-head { align-items: end; } .ed-group-free .ed-group-l { font-weight: 700; } }
/* "OPTIONAL" badge on the upgrade bracket (owner 2026-11-03 asked for it in capitals, an exception to the no-all-caps rule). */
.ed-opt { display: inline-block; margin-right: .5rem; padding: .15rem .55rem; font-size: .875rem; font-weight: 700; letter-spacing: .04em; vertical-align: .15em;
  color: var(--ink); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.ed-opt-k { font-weight: 700; color: var(--ink); }

/* The apply form follows the role card (owner 2026-11-03: "make the form dynamic to the student/teacher").
   Pure CSS from the checked radio; the server's data-role covers browsers without :has(). Hidden fields still post; the service ignores them. */
.ed-apply [data-show="educator"] { display: none; }
.ed-apply[data-role="educator"] [data-show="educator"] { display: revert; }
.ed-apply[data-role="educator"] [data-show="student"] { display: none; }
.ed-apply:has(input[name="role"][value="educator"]:checked) [data-show="educator"] { display: revert; }
.ed-apply:has(input[name="role"][value="educator"]:checked) [data-show="student"] { display: none; }
.ed-apply:has(input[name="role"][value="student"]:checked) [data-show="student"] { display: revert; }
.ed-apply:has(input[name="role"][value="student"]:checked) [data-show="educator"] { display: none; }

/* "After you finish school" is the opposite of the visitor's theme (owner 2026-11-03). Same tokens as .ge-invert in great-eight.css. */
.ed-invert {
  color-scheme: dark;
  --sheet: #10161D; --sheet-2: #18212B; --ink: #EEF3F8; --ink-2: #C3CDD8; --grid: #2A3542; --line: #6C7A8A; --placeholder: #7FA9DC;
  --layer-red: #FF5A6E; --layer-ochre: #F2C230; --layer-green: #4BD37B; --layer-cyan: #3FD6E6;
  --layer-blue: #6E95FF; --layer-magenta: #F06BDC; --layer-orange: #FF9A3C; --layer-violet: #A78BFA;
  --action: #6E95FF; --on-action: #10161D;
  background: var(--sheet); color: var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-space="paper"]) .ed-invert {
  color-scheme: light;
  --sheet: #FFFFFF; --sheet-2: #F3F6F8; --ink: #17202B; --ink-2: #34404E; --grid: #D5DDE5; --line: #7A8796; --placeholder: #6F9FD8;
  --layer-red: #B3122E; --layer-ochre: #8A6200; --layer-green: #17703A; --layer-cyan: #00707E;
  --layer-blue: #1E48C8; --layer-magenta: #9A1F86; --layer-orange: #A84A00; --layer-violet: #5B3CC4;
  --action: #1E48C8; --on-action: #FFFFFF; } }
:root[data-space="model"] .ed-invert {
  color-scheme: light;
  --sheet: #FFFFFF; --sheet-2: #F3F6F8; --ink: #17202B; --ink-2: #34404E; --grid: #D5DDE5; --line: #7A8796; --placeholder: #6F9FD8;
  --layer-red: #B3122E; --layer-ochre: #8A6200; --layer-green: #17703A; --layer-cyan: #00707E;
  --layer-blue: #1E48C8; --layer-magenta: #9A1F86; --layer-orange: #A84A00; --layer-violet: #5B3CC4;
  --action: #1E48C8; --on-action: #FFFFFF;
}