/* Application preview uses the same palette, body/mono faces, radius and shell
   tokens as the SciHack campaign. This sheet is loaded only by this prototype. */
:root {
  --ink:var(--event-text);
  --muted:var(--event-muted);
  --line:var(--event-border);
  --blue:var(--event-focus);
  --bg:var(--event-bg);
  scroll-behavior:auto;
  scroll-padding-top:24px;
}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font-style:normal}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.app-header,.design-bar,.app-footer{padding-inline:max(var(--event-gutter),calc((100% - var(--event-width))/2))}
.app-header{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:88px;border-bottom:1px solid #22262e}
.app-brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.app-brand>span:first-child{font:700 22px/1.2 var(--event-body);letter-spacing:-.03em}
.app-brand-meta{font:10px/1.4 var(--event-mono);letter-spacing:.08em;color:var(--muted)}
.app-icon{display:inline-block;flex:none;width:18px;height:18px;vertical-align:-3px;pointer-events:none}
.aside-fine .app-icon{width:12px;height:12px;vertical-align:-2px}
.app-footer a{display:inline-flex;align-items:center;gap:8px}
.back-link{gap:8px;min-height:44px;display:inline-flex;align-items:center;color:var(--muted);font-size:14px;flex-shrink:0}
.back-link:hover{color:var(--ink)}
.design-bar{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:8px;border-bottom:1px solid #202630;background:#11151c}
.design-bar p{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);line-height:1.5}
.design-bar strong{font:400 12px/1.5 var(--event-mono);letter-spacing:.04em;color:var(--ink)}
.design-bar nav{display:flex;gap:4px}
.design-bar button{border:1px solid transparent;border-radius:var(--event-radius);background:transparent;color:var(--muted);padding:8px 12px;min-height:44px;font-size:12px}
.design-bar button[aria-pressed=true]{color:var(--ink);background:var(--event-panel);border-color:var(--line)}
.design-bar button:hover{color:var(--ink)}
.application-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:80px;width:min(var(--event-width),calc(100% - var(--event-gutter)*2));margin:0 auto;padding:64px 0 80px;min-height:calc(100svh - 152px)}
.application-aside{align-self:start;position:sticky;top:32px}
.eyebrow{font:12px/1.5 var(--event-mono);letter-spacing:.04em;color:var(--muted)}
.application-aside h1{margin-top:24px;font-size:48px;line-height:1.15;letter-spacing:-.04em;font-weight:700}
.application-aside h1 span{color:inherit}
.aside-copy{font-size:14px;line-height:1.8;color:var(--muted);margin-top:24px;max-width:340px}
.event-facts{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;padding:24px 0;border-block:1px solid var(--line)}
.event-facts dt{color:var(--muted);font:12px/1.5 var(--event-mono);margin-bottom:8px}
.event-facts dd{font-size:14px;font-weight:400}
.application-deadlines{margin-top:24px;color:var(--muted);font-size:14px;line-height:1.8}
.application-deadlines span{font-size:12px}
#team-name-field{display:grid;gap:24px}
.choice-fieldset legend em{font-style:normal;color:var(--muted)}
.step-nav{list-style:none;padding:0;margin:24px 0}
.step-nav button{width:100%;display:flex;align-items:center;gap:16px;border:0;background:none;padding:12px 0;min-height:48px;color:var(--muted);font-size:14px;text-align:left}
.step-nav button span{font:12px/1.5 var(--event-mono);color:var(--muted);min-width:24px}
.step-nav button[aria-current=step]{color:var(--ink);font-weight:600}
.step-nav button[aria-current=step] span{color:var(--ink)}
.step-nav i{height:4px;width:4px;margin-left:auto;border-radius:50%;background:transparent}
.step-nav [aria-current=step] i{background:var(--event-accent)}
.step-nav button:disabled{opacity:.6}
.aside-fine{font-size:12px;line-height:1.8;color:var(--muted)}
.application-main{max-width:760px;min-width:0;scroll-margin-top:24px}
.form-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--muted);font-size:14px;white-space:nowrap}
.text-button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.progress-track{height:1px;background:var(--line);margin:32px 0}
.progress-track span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(.25);transition:transform 500ms cubic-bezier(.22,1,.36,1)}
#application-form{position:relative}
.application-step-ghost{position:absolute;inset:0 0 auto;max-height:100%;overflow:clip;pointer-events:none;z-index:1}
.form-step{padding:0;margin:0;border:0;display:grid;gap:24px;min-width:0}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;line-height:1.5}
.field em{color:var(--muted);font-style:normal}
.field input,.field select,.field textarea{width:100%;min-width:0;min-height:52px;padding:12px 16px;color:var(--ink);background:var(--event-panel);border:1px solid var(--line);border-radius:var(--event-radius);line-height:1.5;font-size:16px}
.field textarea{resize:vertical;min-height:128px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field small,.field-note{font-size:14px;line-height:1.8;color:var(--muted)}
.choice-fieldset{padding:0;margin:0;border:0;min-width:0}
.choice-fieldset legend{font-size:16px;line-height:1.5;margin-bottom:16px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.choice{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--event-radius);background:transparent;cursor:pointer;min-width:0}
.choice:hover{border-color:var(--muted)}
.choice:has(input:checked){border-color:var(--blue);background:var(--event-panel)}
.choice:has(input:disabled){cursor:default;opacity:.6}
.choice input{flex:none;width:16px;height:16px;accent-color:var(--blue);margin:4px 0 0}
.choice strong{display:block;font-size:16px;line-height:1.5;font-weight:600}
.choice small{display:block;color:var(--muted);font-size:14px;line-height:1.8;margin-top:4px}
.choice-check{display:none}
.inline-check{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.8;color:var(--muted);margin-top:16px;min-height:44px;cursor:pointer}
.inline-check input,.consent input{width:18px;height:18px;flex:none;accent-color:var(--blue)}
.skill-list{display:flex;flex-wrap:wrap;gap:8px}
.skill-list label{cursor:pointer}
.skill-list input{position:absolute;opacity:0;width:1px;height:1px}
.skill-list span{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:var(--event-radius);color:var(--muted);font-size:14px;line-height:1.5}
.skill-list label:hover span{border-color:var(--muted)}
.skill-list input:checked+span{background:var(--event-panel);border-color:var(--blue);color:var(--ink)}
.skill-list input:focus-visible+span{outline:2px solid var(--blue);outline-offset:4px}
.stacked-choices{display:grid;gap:12px}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.step-caption{font:12px/1.5 var(--event-mono);color:var(--muted)}
.form-actions .button:last-child{margin-left:auto}
.button{width:auto;justify-content:center;gap:24px;min-height:52px;padding:12px 24px;border-radius:var(--event-radius);font-size:16px;font-weight:600;line-height:1.5;transition:background 300ms cubic-bezier(.22,1,.36,1),color 300ms cubic-bezier(.22,1,.36,1),border-color 300ms cubic-bezier(.22,1,.36,1)}
.button>span{font:inherit}
.button-light{background:var(--ink);color:#0b0d12}
.button-light:hover{background:#cfddf0}
.button-outline{background:transparent;color:var(--ink);border-color:var(--muted)}
.button-outline:hover{background:var(--event-panel);border-color:var(--blue)}
.button:active:not(:disabled),.text-button:active:not(:disabled){transform:translateY(1px)}
.form-error{padding:16px;margin-bottom:24px;border:1px solid #ae7968;border-radius:var(--event-radius);color:#edbdaa;background:#2d1d18;font-size:14px;line-height:1.5}
.application-summary{border-block:1px solid var(--line);padding:24px 0;background:transparent}
.application-summary h3{font-size:24px;line-height:1.3;margin:0 0 24px}
.application-summary dl{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;font-size:16px;line-height:1.8}
.application-summary dt{color:var(--muted);font-size:14px}
.application-summary dd{white-space:pre-wrap;overflow-wrap:anywhere}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.8;cursor:pointer}
.consent input{margin-top:4px}
.preview-note{padding:16px;border:1px solid var(--line);border-radius:var(--event-radius)}
.result-view{max-width:820px;margin:0 auto;padding:64px 24px 80px;text-align:center;min-height:calc(100svh - 220px)}
.received-mark{width:64px;height:64px;border:1px solid var(--line);color:var(--ink);border-radius:50%;display:grid;place-items:center;font-size:24px;margin:24px auto}
.result-view h1{font-size:48px;letter-spacing:-.04em;line-height:1.2}
.result-view h1 span{color:var(--muted)}
.result-lead{font-size:16px;line-height:1.8;color:var(--muted);max-width:540px;margin:24px auto 32px}
.application-receipt{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:16px;border-block:1px solid var(--line);padding:24px 0;max-width:540px;margin:0 auto;font-size:16px;line-height:1.5}
.application-receipt>span{color:var(--muted);font-size:14px}
.application-receipt strong{font-weight:500;overflow-wrap:anywhere}
.pending-status{color:var(--ink)}
.review-timeline{display:flex;justify-content:center;gap:32px;list-style:none;padding:0;margin:32px 0;font-size:14px;color:var(--muted)}
.review-timeline li{display:flex;align-items:center;gap:8px}
.review-timeline span{font:12px/1.5 var(--event-mono)}
.review-timeline .complete,.review-timeline .active{color:var(--ink)}
.review-timeline .active{text-decoration:underline;text-underline-offset:6px}
.result-actions{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.demo-footnote{color:var(--muted);font-size:12px;line-height:1.8;margin-top:24px}
.ticket-view{width:min(var(--event-width),calc(100% - var(--event-gutter)*2));margin:auto;padding:64px 0;min-height:calc(100svh - 200px)}
.ticket-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ticket-heading h1{font-size:48px;line-height:1.2;letter-spacing:-.04em;margin:12px 0}
.ticket-heading h1 span{color:inherit}
.ticket-heading p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.8}
.sample-label{flex:none;border:1px solid var(--line);border-radius:var(--event-radius);padding:8px 12px;font:12px/1.5 var(--event-mono);letter-spacing:.04em;color:var(--muted)}
.ticket-stage{position:relative;perspective:1600px;padding:32px 40px 24px}
.ticket-glow{position:absolute;inset:8% 0 -10%;background:radial-gradient(ellipse at 32% 48%,#163e744d,transparent 62%),radial-gradient(ellipse at 78% 52%,#214f6c38,transparent 63%);pointer-events:none;filter:blur(25px)}
.ticket-art{position:relative;transform:rotateX(var(--ticket-x,0deg)) rotateY(var(--ticket-y,0deg));transition:transform 420ms cubic-bezier(.2,.8,.2,1);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 24px 24px #0006);will-change:transform}
.ticket-art[data-interactive=true]{cursor:grab}
.ticket-art[data-dragging=true]{cursor:grabbing;transition:transform 45ms linear}
.ticket-art svg{display:block;width:100%;height:auto}
.ticket-gesture-hint{text-align:center;color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}
.ticket-actions{display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap;margin-top:24px}
.ticket-notice{font-size:14px;color:var(--ink);min-height:0;margin:12px 0}
.ticket-notice:empty{display:none}
.ticket-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px;margin:24px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.ticket-details div{display:flex;flex-direction:column;gap:8px;min-width:0}
.ticket-details span{font-size:14px;color:var(--muted)}
.ticket-details strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.ticket-view>.demo-footnote{text-align:center}
.app-footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:24px;border-top:1px solid var(--line);color:var(--muted);font:12px/1.5 var(--event-mono);letter-spacing:.04em}
.app-footer a{font-family:var(--event-body);font-size:14px;letter-spacing:0}
@media(max-width:1100px){
  :root{--event-gutter:32px}
  .application-layout{grid-template-columns:260px minmax(0,1fr);gap:48px}
  .application-aside h1{font-size:36px}
  .field-grid{grid-template-columns:minmax(0,1fr)}
  .ticket-heading h1{font-size:36px}
}
@media(max-width:760px){
  :root{--event-gutter:20px}
  .app-header{min-height:72px;gap:16px}
  .app-brand>span:first-child{font-size:20px}
  .app-brand-meta{font-size:9px}
  .back-link{font-size:12px;gap:8px}
  .design-bar p span{display:none}
  .design-bar nav{width:100%;gap:4px}
  .design-bar nav button{flex:1}
  .application-layout{display:block;padding:32px 0 48px}
  .application-aside{position:static;margin-bottom:32px}
  .application-aside h1{font-size:36px;margin-top:16px}
  .aside-copy,.event-facts,.aside-fine{display:none}
  .step-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:24px 0 0;border-bottom:1px solid var(--line)}
  .step-nav button{flex-direction:column;align-items:flex-start;gap:8px;font-size:12px;min-height:72px;padding:12px 0}
  .step-nav i{display:none}
  .step-nav [aria-current=step]{border-bottom:2px solid var(--ink)}
  .form-heading .text-button{font-size:12px;gap:8px}
  .choice-grid{grid-template-columns:minmax(0,1fr)}
  .field-grid{gap:24px}
  .form-actions{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:12px}
  .form-actions .step-caption{grid-row:1;grid-column:1/-1}
  .form-actions .button{grid-row:2;padding-inline:16px;font-size:14px;gap:12px;white-space:nowrap}
  .form-actions #previous-step{grid-column:1;justify-self:start}
  .form-actions #next-step{grid-column:2;margin-left:0}
  .application-summary dl{grid-template-columns:80px minmax(0,1fr);gap:16px;font-size:14px}
  .consent{font-size:14px}
  .result-view{padding-top:40px}
  .result-view h1{font-size:36px}
  .result-lead{font-size:14px}
  .application-receipt{font-size:14px}
  .review-timeline{gap:12px;justify-content:space-between;font-size:12px}
  .review-timeline li{flex-direction:column;gap:8px}
  .ticket-view{padding-top:32px}
  .ticket-heading{display:block}
  .ticket-heading h1{font-size:36px}
  .ticket-heading p:not(.eyebrow){font-size:14px}
  .sample-label{display:inline-block;margin-top:16px}
  .ticket-stage{padding:32px 0 16px}
  .ticket-actions{gap:16px}
  .ticket-actions .button{padding-inline:16px;font-size:14px}
  .ticket-actions .text-button{font-size:14px}
  .ticket-details{grid-template-columns:1fr;gap:16px}
  .ticket-details div{flex-direction:row;justify-content:space-between;gap:16px}
  .ticket-details strong{text-align:right}
  .ticket-view>.demo-footnote{text-align:left}
  .app-footer span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .ticket-art{transform:none!important;will-change:auto;cursor:default!important}
  .ticket-gesture-hint{display:none}
}
@media print{
  :root{--ink:#00356b;--muted:#444;--line:#aaa}
  body{background:white!important;color:#00356b!important}
  .app-header,.app-footer,.skip-link,.application-aside,.form-heading,.form-actions,.result-actions,#session-signin{display:none!important}
  .application-layout,.result-view{display:block;width:100%;padding:0;margin:0;min-height:0;text-align:left}
  [hidden]{display:none!important}
  .field input,.field select,.field textarea{background:white;color:#00356b;border-color:#aaa}
  @page{margin:15mm}
}

/* Preserve the established form layout and reduced-motion behavior. */
.design-bar nav{margin-left:auto}
html[data-review-freeze=true] .progress-track span{transition:none!important}
html[data-review-freeze=true] .ticket-art{transform:none!important;transition:none!important}

/* Native form selects share the event chevron with balanced input gutters. */
html[data-application-mode=live] .field select,
.scihack-partnership-page .scihack-partnership .field>select{appearance:none;-webkit-appearance:none;padding-inline-end:48px;background-image:url("/scihack/select-chevron.svg");background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px}
@media(forced-colors:active){html[data-application-mode=live] .field select,.scihack-partnership-page .scihack-partnership .field>select{appearance:auto;-webkit-appearance:auto;padding-inline-end:16px;background-image:none}}
@media(max-width:760px){.design-bar p{flex:1}.design-bar nav{order:3}.design-bar .staging-tools-wrap{margin-left:auto}}
@media print{[data-review-ui],.review-root{display:none!important}}

/* Reveal only the resolved initial view; the header and layout stay still. */
html[data-application-mode=live] #main{min-height:calc(100svh - 152px)}
.application-loading{display:block}
@keyframes scihack-application-entry{from{opacity:0}to{opacity:1}}
html[data-application-mode=live][data-application-entry-ready]:not([data-application-entry-settled]) #main{animation:scihack-application-entry 300ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){html[data-application-mode=live] #main{animation:none!important}}
@media print{html[data-application-mode=live] #main{animation:none!important;min-height:0}.application-loading{display:none!important}}
