/* =====================================================================
   PAGE · Start your site (apply.html)
   Page-scoped additions on top of site.css §25 (Forms). Tokens only.
   .apply / .apply-index   section index beside a long form (sticky, progress ticks)
   .proj / .proj-more      bordered repeatable group inside a fieldset
   ===================================================================== */

/* Layout: section index on the left, the form on the right */
.apply {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 72px;
}
.apply.is-done { grid-template-columns: minmax(0, 1fr); }
.apply.is-done .apply-index { display: none; }
.apply__main { min-width: 0; }

/* ---------- section index ("In this form") ---------- */
.apply-index { position: sticky; top: 28px; padding-top: 40px; }
.apply-index__title { margin-bottom: 14px; }   /* with .label */
.apply-index__list { position: relative; display: grid; gap: 4px; }
.apply-index__list::before {   /* the trail between the numbers */
  content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px;
  border-left: 1.5px dashed var(--paw);
}
.apply-index__list > li { position: relative; }
.apply-index__list a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 44px; padding: 2px 6px 2px 0;
  color: var(--ink-2); text-decoration: none; font-weight: 500; line-height: 1.25;
  border-radius: var(--radius);
}
.apply-index__list a:hover { color: var(--ink); }
.apply-index__list a:hover .apply-index__name { text-decoration: underline; text-underline-offset: .2em; }
.apply-index__no {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1.5px solid var(--rule); border-radius: 50%; background: var(--bg);
  font: 700 .875rem/1 var(--f-text); color: var(--ink);
}
.apply-index__name .req { margin-left: 2px; }
.apply-index__list a[aria-current] { color: var(--ink); font-weight: 700; }
.apply-index__list a[aria-current] .apply-index__no {
  background: var(--aud-fill, var(--btn)); color: var(--aud-on, var(--btn-ink));
  border-color: var(--rule); box-shadow: var(--print-shadow-xs);
}
/* a small tick once a section has something in it */
.apply-index__list li.is-filled .apply-index__no::before {
  content: ""; position: absolute; right: -7px; top: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ok);
}
.apply-index__list li.is-filled .apply-index__no::after {
  content: ""; position: absolute; right: -3px; top: -2px; width: 10px; height: 10px; background: var(--ok);
  -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat;
}
.apply-index__note { display: block; margin: -4px 0 4px 50px; font-size: 1.0625rem; }

/* ---------- the form: roomy, one chapter at a time ---------- */
.apply-form .fieldset { margin-bottom: 64px; scroll-margin-top: 24px; }
.apply-form .fieldset__legend { font-size: 1.65rem; }
.apply .fieldset__no { background: var(--aud-ground, var(--bg)); }
.apply-form .fieldset__note { max-width: 58ch; margin-bottom: 24px; }
.apply-form .field { margin-bottom: 24px; }

/* project cards: Project 1 open, 2 and 3 behind "Add a … project" */
.proj {
  padding: 22px 24px 2px;
  background-color: var(--bg); background-image: var(--texture); background-size: var(--texture-size);
  border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.proj__title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 1.3rem; line-height: 1.2; }
.proj__title::before {   /* painted trail blaze, as on the sub-tabs */
  content: ""; width: 10px; height: 15px; flex: none;
  background: var(--aud, var(--leader)); border-radius: 1px;
}
.proj-more { margin-top: 20px; }
.proj-more > summary { color: var(--ink); }

/* send row: a double rule closes the form, like the end of a plate */
.apply-send { margin-top: 0; padding-top: 30px; border-top: 4px double var(--rule); }
.apply-send .btn { min-width: 180px; }

/* hero extras */
.apply-hero__req { margin-top: 18px; font-size: 1.0625rem; color: var(--ink-2); }
.apply-hero__req .req { margin: 0 1px; }
.apply-hero__more { margin-top: 4px; font-size: 1.0625rem; color: var(--ink-2); }
.apply-hero__more .link-arrow { margin-left: 4px; }

#done { scroll-margin-top: 24px; }

@media (max-width: 980px) {
  .apply { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 56px; }
  .apply-index { display: none; }
}
@media (max-width: 720px) {
  .apply { padding-top: 40px; }
  .apply-form .fieldset { margin-bottom: 48px; }
  .apply-form .fieldset__legend { font-size: 1.4rem; }
  .proj { padding: 18px 14px 2px; }
  .apply-send .btn { width: 100%; }
}

@media (forced-colors: active) {
  .proj, .apply-index__no { border-color: CanvasText; }
  .apply-index__list li.is-filled .apply-index__no::before,
  .apply-index__list li.is-filled .apply-index__no::after { display: none; }
  .apply-index__list a[aria-current] .apply-index__no { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* short numbered entries (record, hobbies): label beside the field, like a ruled list */
.field-rows { display: grid; gap: 12px; }
.field-rows > .field { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; column-gap: 16px; margin-bottom: 0; }
.field-rows .field__label { font-family: var(--f-display); font-style: italic; font-weight: 700; color: var(--ink-2); }
.apply-form textarea { min-height: 116px; }
@media (max-width: 400px) {
  .field-rows > .field { grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 10px; }
}

/* phones: the three look tiles become compact rows, swatch on the right */
@media (max-width: 560px) {
  .apply .tiles { gap: 10px; }
  .apply .tile { grid-template-columns: auto minmax(0, 1fr) 64px; align-items: center; padding: 12px 14px; }
  .apply .tile input { margin: 0; }
  .apply .tile__swatch { grid-column: auto; height: 34px; }
}
.apply.is-done #done { max-width: 860px; }

/* academics.html: grouped choices inside a section, and square checkbox tiles ("Pages you want") */
.acad-pages { min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.acad-pages > legend { margin-bottom: 10px; padding: 0; }
.tiles--check { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.tiles--check .tile { align-items: center; padding: 12px 14px; }
.tile input[type="checkbox"] { border-radius: 3px; }
.tile input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); position: relative; }
.tile input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 3px; background: var(--bg);
  -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat;
}
@media (max-width: 560px) {
  .apply .tiles--check .tile { grid-template-columns: auto minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .tile input[type="checkbox"]:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .tile input[type="checkbox"]:checked::after { background: HighlightText; }
}