/* The student pages' one-screen layout (owner 2026-10-29: "all-in-1 screen for all the info instead of scrolling up
   and down"; the sidebar design chosen the same day). Loaded after vsmf.css by the apply page (body.page-apply) and the
   application page (body.page-status). layout.js builds the rows (the form's sections, the application page's cards)
   and opens one at a time; every rule that sets that grid or hides something hangs on a class layout.js adds
   (#apply-form.sidebar, .sec-off, .pane-list, .pane-off, #f-email.as-text), so without it the pages keep vsmf.css's
   single column with every field. Typography (owner 2026-10-29: "not new line for many things"): a short item stays on
   one line (a label with its value, the Application ID, a chip, a heading, a button); running sentences wrap without
   a lone last word; no ellipsis on a name, ID, amount or date. Tokens, fonts and minimum sizes come from vsmf.css. */

/* The frame: header, a short title row, the screen's content, a one-line footer, in the window's height. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
.wrap{width:min(1360px,100% - 48px)}
.hero{padding:14px 0 2px}
.hero h1{font-size:28px;margin:0}
.layout{padding:14px 0 12px;gap:20px}
.site-foot{padding:9px 0;font-size:14.5px}
.site-foot .partner{flex-basis:auto}
.form{padding:22px 24px}
.stage-title{font-size:24px}
.form .stage-title+.hint{font-size:16px}
.form fieldset{margin-top:16px;padding-top:16px}
.form label,.form .lbl{font-size:15px;margin:12px 0 4px}
.form input,.form select{min-height:44px;padding:9px 12px}
.form textarea{min-height:88px}
.facts{margin-top:16px}
.facts>div{padding:10px 0}
.submit{margin-top:16px}
.switch:not(input){margin-top:8px}
.card{padding:18px 20px}
/* the fact cards, tighter: the marker and its text keep their places, the lines come closer */
aside .card h2{font-size:18px;margin-bottom:10px}
aside .card .know li,aside .card ol.numbered li{font-size:15px;line-height:1.38}
aside .know,aside .card ol.numbered{gap:9px}
aside .know b{display:inline;margin-right:4px}
aside .know li::before{top:7px}
aside .card+.card{margin-top:12px}
/* --side: the column left of the main card (the facts panel, the form's rows, the application page's rows). The
   content grids and the title row share it, so the step bar starts and ends on the card's edges. */
.page-apply{--side:420px}
.page-apply:has(#stage-form:not(.hidden)){--side:minmax(260px,330px)}
.page-status{--side:330px}
@media (min-width:1000px) and (max-width:1199px){
  .page-apply{--side:520px}
  .page-apply:has(#stage-start:not(.hidden)){--side:440px}
}
@media (min-width:1200px){
  .page-apply{--side:480px}
  .page-apply:has(#stage-form:not(.hidden)){--side:380px}
}
/* The step bar spans the card under it, the first step on its left edge, the last on its right edge, the others
   evenly between (owner 2026-10-29: "the 1-4 is stretched out above the length of this form"); still one row. The
   title sits over the left column; where the content is one column the title has a row of its own. */
.steps{max-width:none}
.steps li{flex:2 1 0}
.steps li:first-child,.steps li:last-child{flex:1 1 0}
.steps li:first-child{align-items:flex-start;text-align:left;background-position:right 0 top 13px;background-size:calc(100% - 14px) 2px}
.steps li:last-child{align-items:flex-end;text-align:right;background-position:left 0 top 13px;background-size:calc(100% - 14px) 2px}
.page-apply .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 20px;align-items:center}
.page-apply .hero .steps{margin:0}
@media (min-width:760px) and (max-width:999px){
  /* the title's own row costs height; the space around it gives it back */
  .page-apply .hero{padding-top:8px}
  .page-apply .hero .wrap{row-gap:6px}
  .page-apply .layout{padding-top:8px}
}
@media (min-width:760px){
  .page-apply:has(#stage-form:not(.hidden)) .hero .wrap{grid-template-columns:var(--side) minmax(0,1fr)}
}
@media (min-width:760px) and (max-width:1199px){
  .page-apply:has(#stage-form:not(.hidden)) .hero h1{font-size:24px}
}
@media (min-width:1000px){
  .page-apply .hero .wrap{grid-template-columns:var(--side) minmax(0,1fr)}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .hero{padding:12px 0 0}
  .hero h1{font-size:24px}
  .hero .steps{margin:12px 0 0}
  .layout{padding:12px 0 24px}
  .form{padding:18px 16px 20px}
  .layout>aside .card{padding:18px 20px}
}

/* ---------------------------------------------------------------------------------------------------------------
   Start, code and continue: the festival facts on a festival-colour panel beside the form from 1000px; below that
   the form first, the two fact cards side by side under it (one above the other on a phone). The form screen gives
   the panel's room to the form. */
@media (max-width:999px){
  .layout{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:760px) and (max-width:999px){
  .layout>aside{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .layout>aside .card+.card{margin-top:0}
  .layout>aside .card{padding:14px 16px}
  .layout>aside .know,.layout>aside .card ol.numbered{gap:7px}
}
@media (min-width:1000px){
  .layout{grid-template-columns:var(--side) minmax(0,1fr)}
  .layout>aside{grid-column:1;grid-row:1;background:var(--brand);border-radius:18px;padding:6px 8px;align-self:stretch}
  .layout>aside .card{background:none;box-shadow:none;padding:10px 14px}
  .layout>aside .card h2,.layout>aside .know b{color:var(--on-tint)}
  .layout>aside .card li,.layout>aside .card p{color:color-mix(in srgb,var(--on-tint) 86%,var(--brand))}
  .layout>aside .know li::before{background:var(--on-tint)}
  .layout>aside ol.numbered li::before{background:color-mix(in srgb,var(--on-tint) 18%,var(--brand));color:var(--on-tint)}
  .layout>aside a{color:var(--on-tint)}
  .layout>aside .card+.card{border-top:1px solid color-mix(in srgb,var(--on-tint) 25%,var(--brand));border-radius:0}
  .layout>aside .know,.layout>aside .card ol.numbered{gap:7px}
}
@media (min-width:1200px){
  .layout>aside .card{padding:12px 16px}
  .layout>aside .know,.layout>aside .card ol.numbered{gap:9px}
}
.layout:has(#stage-form:not(.hidden)){grid-template-columns:minmax(0,1fr)}
.layout:has(#stage-form:not(.hidden))>aside{display:none}

/* "What you need" for the program picked, then who can apply and when (owner 2026-10-29: the application portal's
   information on the apply page itself): one festival-colour panel beside the form, under it on a phone */
.need-for{display:block;font:400 15px/1.35 var(--ui);margin-top:2px}
.need-tip{font-size:14.5px;line-height:1.4;margin:10px 0 0;text-wrap:balance}
.need-who{font-size:15px;line-height:1.38;margin-top:12px;padding-top:12px;border-top:1px solid var(--sep)}
.need-who b{color:var(--text);margin-right:4px}
@media (min-width:1000px){
  .layout>aside .need-who{border-top-color:color-mix(in srgb,var(--on-tint) 25%,var(--brand))}
  .layout>aside .need-who b{color:var(--on-tint)}
}
@media (min-width:1200px){
  /* one heading line: "What you need for the Opera Institute" */
  .need-for{display:inline;margin:0 0 0 4px}
}
@media (min-width:1000px){
  /* the two cards read as one panel, set close */
  #need-list{gap:5px}
  .layout>aside .card .know li,.layout>aside .card ol.numbered li,.layout>aside p{line-height:1.33}
  .page-apply .hero{padding-top:10px}
  .page-apply .layout{padding-top:10px}
  .layout>aside .card{padding:10px 14px}
  .layout>aside .card h2{margin-bottom:8px}
  .need-who{margin-top:8px;padding-top:8px}
  .layout>aside .card+.card{margin-top:0;padding-top:10px}
  .layout>aside .card ol.numbered{gap:6px}
}
@media (min-width:760px) and (max-width:999px){
  /* one festival-colour panel under the form: what you need on the left; who can apply and after you apply on the right */
  .layout>aside{display:block;columns:2;column-gap:28px;background:var(--brand);border-radius:18px;padding:16px 20px}
  .layout>aside #good-to-know{display:contents}
  .layout>aside #good-to-know>*,.layout>aside .after{break-inside:avoid}
  .layout>aside .need-who{margin:12px 0 0;padding:0;border:0}
  .layout>aside .after{background:none;box-shadow:none;padding:12px 0 0;margin:0}
  .layout>aside .after h2{color:var(--on-tint)}
  .layout>aside .after li{color:color-mix(in srgb,var(--on-tint) 86%,var(--brand))}
  .layout>aside ol.numbered li::before{background:color-mix(in srgb,var(--on-tint) 18%,var(--brand));color:var(--on-tint)}
  .need-for{display:inline;margin:0 0 0 4px}
}
@media (max-width:759px){
  /* the facts, one line each: the label and its value */
  #start-form .facts>div{flex-wrap:nowrap;column-gap:8px}
}
@media (max-width:999px){
  #good-to-know{background:var(--brand)}
  #good-to-know h2,#good-to-know .know b,#good-to-know a{color:var(--on-tint)}
  #good-to-know li,#good-to-know p{color:color-mix(in srgb,var(--on-tint) 86%,var(--brand))}
  #good-to-know .know li::before{background:var(--on-tint)}
  #good-to-know .need-who{border-top-color:color-mix(in srgb,var(--on-tint) 25%,var(--brand))}
  #good-to-know .need-who b{color:var(--on-tint)}
}

/* the start card: the facts on one row and the note beside the button from 760px; the two programs side by side,
   except at 1000-1199px where their names would run past the card's edge: there one above the other, three lines
   each (the name and the tick, who it is for and the dates, what you do) */
@media (min-width:760px){
  #start-form .facts{margin-top:10px}
  #start-form .submit{flex-wrap:nowrap}
  #start-form .submit .secure{flex:1 1 200px;text-wrap:balance}
}
@media (min-width:1200px){
  /* the facts as three columns, each label over its value (the design) */
  #start-form dl.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:8px 16px}
  #start-form dl.facts>div{display:grid;gap:0;padding:0;border:0;align-content:start}
  #start-form dl.facts dd{margin:0;text-align:left;line-height:1.35}
  #start-form dl.facts dt{font-size:14.5px;line-height:1.35}
}
@media (min-width:1000px){
  #start-form{padding:18px 24px 14px}
  #start-form .pick{margin-top:6px}
  #start-form .pick .prog{padding:9px 14px}
  #start-form .facts>div{padding:8px 0}
  #start-form .pick em{margin-top:2px}
  #start-form>fieldset{margin-top:8px;padding-top:8px}
  #start-form>fieldset:first-of-type{margin-top:12px;padding-top:0}
  #start-form .submit{margin-top:12px}
  #start-form .switch{margin-top:2px}
}
@media (min-width:1000px) and (max-width:1199px){
  #start-form .pick{grid-template-columns:1fr;gap:8px}
}
@media (min-width:1000px){
  /* three lines: the name and the tick; who it is for and the dates (the dates take a line of their own when the two
     do not fit); what you do */
  #start-form .prog-body{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
  #start-form .prog-head{flex:1 0 100%;order:1}
  #start-form .prog-who{order:2;flex:0 0 auto}
  #start-form .pick em{order:3;flex:0 0 auto;margin:0}
  #start-form .prog-what{order:4;flex:1 0 100%}
}

/* ---------------------------------------------------------------------------------------------------------------
   The form: each section is a row with its answers and whether it is done; the open section sits beside the rows
   on a wide screen and under its row on a phone (an accordion). */
#apply-form legend{font-size:20px}
#links .link-row{display:grid;gap:4px}
#apply-form.sidebar{background:none;box-shadow:none;padding:0;display:grid;gap:8px}
#apply-form.sidebar>fieldset{margin-top:0;border-top:0;padding-top:0}
#apply-form.sidebar>.sec{background:var(--cell);border-radius:16px;padding:18px 20px 20px;box-shadow:var(--shadow)}
#apply-form .sec-off{display:none}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;text-align:left;border:0;background:var(--cell);color:var(--text);padding:9px 16px;min-height:56px;cursor:pointer;font:inherit;border-radius:14px;box-shadow:var(--shadow)}
.sec-title{font:600 16px/1.3 var(--ui);white-space:nowrap}
.sec-sub{grid-column:1/-1;font-size:15px;line-height:1.35;color:var(--sec)}
.sec-state{grid-column:2;grid-row:1;font:600 14.5px/1 var(--ui);border-radius:999px;padding:5px 10px;background:var(--badge-bg);color:var(--badge-fg);white-space:nowrap}
.sec-head.done .sec-state{background:var(--ok-bg);color:var(--ok)}
.sec-head.optional .sec-state{background:var(--track);color:var(--sec)}
.sec-head.error .sec-state{background:var(--bad-bg);color:var(--bad)}
.sec-head.open{box-shadow:0 0 0 2px var(--tint)}
.sec>.sec-next{margin-top:16px;width:auto}
#sec-audition>.sec-next{grid-column:1/-1;justify-self:start}
/* The Application ID card: the ID on one line, the progress bar with "88% done · Saved" on the next */
.sidebar>#app-bar{position:static;margin:0 0 4px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 14px}
.sidebar #app-bar .app-id{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.sidebar #app-bar .app-id small{display:inline;white-space:nowrap}
.sidebar #app-bar .app-id b{margin:0}
.sidebar #app-bar .app-id span{display:none}
.sidebar #app-bar .progress{grid-column:1}
.sidebar #app-bar .progress-text{grid-column:2;display:flex;align-items:baseline;gap:6px;max-width:none;text-align:left;white-space:nowrap}
.sidebar #app-bar .progress-text .pct{white-space:nowrap}
.sidebar #app-bar .saved{display:inline;font-size:15px}
.sidebar #app-bar .saved:not(:empty)::before{content:"\00b7";color:var(--sec);margin-right:6px}
.sidebar #app-bar .progress-text:has(.saved.bad){grid-column:1/-1;flex-wrap:wrap;white-space:normal}
@media (min-width:760px){
  #apply-form.sidebar{grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:repeat(7,auto) 1fr;column-gap:20px;row-gap:7px;align-items:start}
  #apply-form.sidebar>#app-bar,#apply-form.sidebar>.sec-head{grid-column:1}
  #apply-form.sidebar>.sec{grid-column:2;grid-row:1/-1;align-self:start}
  #apply-form.sidebar>.sec-head.open{background:color-mix(in srgb,var(--tint) 7%,var(--cell))}
}
@media (min-width:760px) and (max-width:1199px){
  /* one line across the top: the ID, the bar, "88% done · Saved"; the rows and the open section below it */
  #apply-form.sidebar>#app-bar{grid-column:1/-1;grid-template-columns:auto minmax(80px,1fr) auto;margin:0;padding:8px 14px}
  #apply-form.sidebar>.sec{grid-row:2/-1;padding-top:14px}
  .sidebar #app-bar .app-id{grid-column:1}
  .sidebar #app-bar .progress{grid-column:2}
  .sidebar #app-bar .progress-text{grid-column:3}
  #sec-audition .col-r>.lbl{margin-top:4px}
  #sec-audition>.sec-next{margin-top:12px}
}
@media (min-width:760px) and (max-width:999px){
  /* a narrow open section: one field per row, the audition in one column */
  #apply-form.sidebar .row{grid-template-columns:1fr}
  #sec-audition .col-r>.lbl{margin-top:16px}
}
@media (min-width:1000px){
  /* the audition in two columns: what you sing or play, the recording links */
  #sec-audition:not(.sec-off){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  #sec-audition>legend{grid-column:1/-1}
}
@media (min-width:1200px){
  #sec-audition .col-r>.lbl{margin-top:12px}
}
@media (min-width:900px){
  #links .link-row{grid-template-columns:150px minmax(0,1fr);align-items:center;column-gap:12px}
  #links .link-kind{margin:0}
  #links{gap:8px}
}
@media (max-width:759px){
  #apply-form.sidebar>.sec{margin:-4px 0 8px}
}
@media (max-width:560px){
  /* a full-width bar under the header, so the ID and its label share one line */
  #apply-form.sidebar>#app-bar{position:sticky;top:61px;z-index:5;margin:0 -16px 4px;padding:10px 16px;border-radius:0;border-left:0;border-right:0}
}
/* the signed-in email: text in the field's place, the whole address always shown */
#f-email.as-text{display:none}
.email-shown{font:400 17px/1.3 var(--ui);color:var(--text);margin:0;padding:2px 0 0;overflow-wrap:anywhere}
.email-shown+.hint{margin-top:4px}
.email-shown .em-piece{white-space:nowrap}

/* buttons, chips, headings and short labels keep one line; running sentences wrap without a lone last word */
.btn,.linkbtn,.tag,.steps li,.pane-title,.facts dt,.facts dd,.sum dt,.sum dd,legend,.prog-head b,.pick em,.pay b,.pay small,.pay .amt{white-space:nowrap}
h1,h2,.stage-title{text-wrap:balance}
p,li,dd,.form label,.sec-sub,.pane-sub,.prog-what,.upload-state{text-wrap:pretty}
.opt>span{text-wrap:balance}
.know a,.site-foot a,.switch .linkbtn{white-space:nowrap}

/* ---------------------------------------------------------------------------------------------------------------
   The application page. The title, the progress and the step bar share one short band; the cards are rows with a
   line each, the open one beside the rows (under its row on a phone). */
.page-status .hero{padding:12px 0 4px}
.page-status .hero h1{font-size:28px;margin:2px 0 0}
.page-status .lede{margin-top:4px;font-size:16px;max-width:none}
.page-status .journey{margin-top:10px;padding:10px 14px;gap:6px}
.page-status .status-grid{grid-template-columns:minmax(0,1fr);padding:12px 0 12px;gap:16px}
.page-status .status-grid>div:not(.pane-list){display:contents}
.page-status .status-grid .card{gap:10px;padding:16px 18px}
.page-status .pay li{padding:8px 0}
.page-status .pay li.net .amt{font-size:21px}
.page-status .uploads{gap:10px;margin-top:4px}
.page-status .up{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start}
.page-status .up label{margin:0;font-size:15px}
.page-status .card .upload-state{margin:0;font-size:14.5px;line-height:1.4}
.page-status .up input[type=file]{min-height:44px;padding:8px}
/* label and value on one row, in the next payment and the program card */
.page-status .status-grid .sum,.page-status #np-facts{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px}
.page-status .status-grid .sum dt{font-size:16px}
.page-status .status-grid .sum dd,.page-status #np-facts dd{text-align:right;font-size:16px;margin:0}
/* a payment: its name and date on one line, the amount and its tag beside them; on a phone the date and tag on a
   second line under the name and the amount */
.page-status .pay li>span:first-child{display:flex;flex-wrap:wrap;column-gap:10px;align-items:baseline}
.page-status .status-grid>.pane-list{display:grid;gap:16px}
.pane-list>.pane-off{display:none}
.pane-btn{display:grid;gap:2px;width:100%;text-align:left;border:0;background:var(--cell);color:var(--text);padding:12px 16px;min-height:60px;cursor:pointer;font:inherit;border-radius:14px;box-shadow:var(--shadow)}
.pane-btn[aria-pressed=true]{box-shadow:0 0 0 2px var(--tint)}
.pane-title{font:600 16px/1.3 var(--ui)}
.pane-sub{font-size:15px;line-height:1.35;color:var(--sec)}
@media (min-width:900px){
  /* the title, the line above it and the lede on the left; the progress and the step bar over the open card */
  .page-status .hero .wrap{display:grid;grid-template-columns:var(--side) minmax(0,1fr);column-gap:16px;align-items:start}
  .page-status #kick{grid-column:1;grid-row:1}
  .page-status #title{grid-column:1;grid-row:2}
  .page-status #lede{grid-column:1;grid-row:3/span 2}
  .page-status #journey{grid-column:2;grid-row:1/span 3;margin:0;max-width:none}
  .page-status #track{grid-column:2;grid-row:1/span 4;margin:0;align-self:center}
  .page-status #journey:not(.hidden)~#track{grid-row:4;margin-top:10px}
  .page-status .next-pay .actions{flex-wrap:nowrap}
  .page-status .next-pay .btn{padding:12px 16px}
  .page-status .uploads{grid-template-columns:1fr 1fr;column-gap:20px}
  .page-status .up[data-up=essay],.page-status .uploads>.note{grid-column:1/-1}
  .pane-list{grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:repeat(6,auto) 1fr;column-gap:20px;align-items:start}
  .pane-list>.pane-btn{grid-column:1}
  .pane-list>.pane{grid-column:2;grid-row:1/-1}
  .pane-btn[aria-pressed=true]{background:color-mix(in srgb,var(--tint) 7%,var(--cell))}
}
@media (min-width:900px) and (max-width:1199px){
  .page-status .hero h1{font-size:24px}
  .page-status .pay li{padding:6px 0}
  .page-status .journey{padding:8px 12px;gap:4px}
  .page-status .journey-next{font-size:15px}
  .page-status #journey:not(.hidden)~#track{margin-top:6px}
  .page-status .status-grid{padding:10px 0}
}
@media (min-width:1200px){
  .page-status .uploads{grid-template-columns:1fr 1fr 1fr}
  .page-status .up[data-up=essay]{grid-column:auto}
}
@media (max-width:899px){
  .pane-list>.pane{margin:-2px 0 6px}
}
@media (max-width:560px){
  .page-status .pay li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name amt" "when tag";row-gap:2px;column-gap:12px}
  .page-status .pay li>span:first-child{display:contents}
  .page-status .pay li b{grid-area:name}
  .page-status .pay li small{grid-area:when}
  .page-status .pay li .amt{grid-area:amt;text-align:right}
  .page-status .pay li .tag{grid-area:tag;justify-self:end;grid-column:auto}
}