/* SU-12a — shared Fields-derived tokens + components. COPY / DESIGN DRAFT.
   Provenance and intentional accessibility adaptations: DESIGN-HANDOFF-FROM-FIELDS.md. */
@font-face{font-family:Inter;src:url('fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Plex;src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{
 --ink:#000000;--paper:#ffffff;--grey:#555555;--soft:#e2e2e2;--wash:#f2f2f2;--accent:#ffe500;
 --font-sans:Inter,sans-serif;--font-mono:Plex,monospace;
 --text-display:64px;--text-phone:38px;--text-section:32px;--text-card:24px;--text-lead:20px;--text-body:16px;
 --leading-body:1.65;--leading-tight:1.08;--tracking-tight:-.035em;--tracking-meta:.06em;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;--s10:56px;--s11:64px;--s12:72px;
 --max:1440px;--gutter:48px;--gap:24px;--touch:48px;--rule:1px;--focus:2px;--paste:280px;--icon:24px;--logo:20px;
 --motion:.25s;--spin-stiffness:48;--phone-break:700px;--split-break:1050px;
}
*{box-sizing:border-box}body,h1,h2,h3,p,figure,dl,dd{margin:0}body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);font-weight:400;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;color:var(--ink)}
a{color:inherit;text-underline-offset:var(--s1)}button,a,input,textarea,select,summary{touch-action:manipulation}button,summary{cursor:pointer}button:disabled{cursor:default}button,a,summary{min-height:var(--touch)}a{display:inline-flex;align-items:center}p a{display:inline-flex}button{background:var(--paper);border:var(--rule) solid var(--ink)}
:focus-visible{outline:var(--focus) solid var(--ink);outline-offset:var(--s1)}[hidden]{display:none!important}h1{font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:600}h2{font-size:var(--text-section);line-height:1.2;letter-spacing:var(--tracking-tight);font-weight:600}h3{font-size:var(--text-card);line-height:1.25;letter-spacing:var(--tracking-tight);font-weight:500}
.wrap{max-width:var(--max);padding:0 var(--gutter);margin:auto}.site-header{border-bottom:var(--rule) solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:var(--s6);min-height:var(--s12)}.logo img{height:var(--logo);max-width:100%}.header-nav{display:flex;gap:var(--s6);align-items:center}.header-nav a{text-decoration:none}.header-nav a:last-child{border-bottom:var(--rule) solid var(--ink)}.meta{font-family:var(--font-mono);font-size:var(--text-body);letter-spacing:var(--tracking-meta);line-height:1.5}.muted{color:var(--grey)}.eyebrow{text-transform:uppercase}.draft{padding:var(--s3) 0;border-bottom:var(--rule) solid var(--soft);display:flex;justify-content:space-between;gap:var(--s4);color:var(--grey)}
.page-head{padding:var(--s8) 0 var(--s7);display:grid;grid-template-columns:7fr 5fr;gap:var(--s9);align-items:end}.page-head .meta{margin-bottom:var(--s4)}.lead{font-size:var(--text-lead);line-height:1.5}.page-head p+p{margin-top:var(--s4)}
.guided{display:grid;grid-template-columns:3fr 9fr;gap:var(--s9);border-top:var(--rule) solid var(--ink);padding-top:var(--s6)}.rail{align-self:start;position:sticky;top:var(--s6)}.steps{list-style:none;padding:0;margin:0}.steps a{display:flex;gap:var(--s4);padding:var(--s4) var(--s3);border-top:var(--rule) solid var(--soft);text-decoration:none;line-height:1.4}.steps a[aria-current=step]{background:var(--accent);border-color:var(--ink)}.steps .num{font-family:var(--font-mono)}.rail-note{border-top:var(--rule) solid var(--ink);margin-top:var(--s7);padding-top:var(--s4)}.workspace{min-width:0}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6);margin-bottom:var(--s5)}.stack>*+*{margin-top:var(--s6)}.panel{border:var(--rule) solid var(--ink);padding:var(--s6)}.section{border-top:var(--rule) solid var(--ink);padding-top:var(--s4);margin-top:var(--s10);scroll-margin-top:var(--s6)}.section:first-child{margin-top:0}.section>p{margin:var(--s4) 0 var(--s5)}.flow-sections>.section+.section{margin-top:var(--s10)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:var(--touch);padding:var(--s3) var(--s5);border:var(--rule) solid var(--ink);font-weight:500;line-height:1.35;text-align:center}.btn.primary{background:var(--ink);color:var(--paper)}.btn.accent{background:var(--accent)}.btn:disabled{background:var(--wash);color:var(--grey);border-color:var(--grey)}.btn:hover:not(:disabled){text-decoration:underline}.text-link{border:0;border-bottom:var(--rule) solid var(--ink);background:var(--paper);padding:var(--s2) 0;text-align:left}.foot-actions{display:flex;justify-content:space-between;gap:var(--s6);align-items:center;border-top:var(--rule) solid var(--ink);padding:var(--s6) 0;margin-top:var(--s7)}
.paste-layout{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6)}.paste-box{grid-column:1/-1}.paste-box textarea{min-height:var(--paste)}.howto{background:var(--ink);color:var(--paper);min-height:var(--paste);padding:var(--s6);display:flex;flex-direction:column;justify-content:space-between}.play{width:var(--s11);height:var(--s11);display:grid;place-items:center;border:var(--rule) solid var(--paper);font-size:var(--text-card)}.explain{list-style:none;padding:0;margin:0}.explain li{display:flex;gap:var(--s4);border-top:var(--rule) solid var(--soft);padding:var(--s4) 0}.explain span{font-family:var(--font-mono)}
label{display:flex;flex-direction:column;gap:var(--s2);min-width:0}input,textarea,select{width:100%;max-width:100%;min-height:var(--touch);background:var(--paper);border:var(--rule) solid var(--ink);border-radius:0;padding:var(--s3);resize:vertical}input::placeholder,textarea::placeholder{color:var(--grey);opacity:1}.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}.full{grid-column:1/-1}.req{font-weight:600}.field-label{display:flex;gap:var(--s2);justify-content:space-between}.badge{display:inline-flex;align-items:center;padding:var(--s1) var(--s2);border:var(--rule) solid var(--ink);font-size:var(--text-body);line-height:1.5}.badge.active{background:var(--accent)}.notice{border-left:var(--s1) solid var(--ink);background:var(--wash);padding:var(--s4) var(--s5)}.confirmation{border-top:var(--rule) solid var(--ink);padding:var(--s5) 0;display:grid;grid-template-columns:1fr auto;gap:var(--s6)}.confirmation.current{border:var(--rule) solid var(--ink);padding:var(--s6);margin-bottom:var(--s5)}.confirmation h3{margin:var(--s2) 0 var(--s3)}.confirmation .actions{align-self:center}.confirmation input{margin:var(--s3) 0}.confirmation .source{color:var(--grey)}.confirmation .state{margin-bottom:var(--s3)}
.gallery-tools{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6)}.tile{border-top:var(--rule) solid var(--ink);padding-top:var(--s3);min-width:0}.tile-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}.tile .drawing{aspect-ratio:3/2}.tile label{margin-top:var(--s4)}.tile .actions{margin:var(--s3) 0}.tile.is-cover .drawing{outline:var(--s1) solid var(--accent);outline-offset:calc(-1 * var(--s1))}.drag{border:0;padding:var(--s2);cursor:grab}.dropzone{width:100%;border:var(--rule) dashed var(--ink);padding:var(--s7);margin:var(--s6) 0;text-align:left;background:var(--wash)}.dropzone strong{display:block;font-size:var(--text-card);font-weight:500}.drawing{display:block;width:100%;height:auto;background:var(--wash)}.art-paper{fill:var(--paper)}.art-wash{fill:var(--wash)}.art-soft{fill:var(--soft)}.art-grey{fill:var(--grey)}.art-ink{fill:var(--ink)}.art-line{fill:none;stroke:var(--ink);stroke-width:1}.art-light{fill:none;stroke:var(--soft);stroke-width:1}.image-caption{margin-top:var(--s2);color:var(--grey)}
.split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s9);align-items:start;border-top:var(--rule) solid var(--ink);padding-top:var(--s6)}.preview{position:sticky;top:var(--s6);min-width:0;border-left:var(--rule) solid var(--ink);padding-left:var(--s6)}.preview summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border-bottom:var(--rule) solid var(--ink);padding-bottom:var(--s3)}.preview h2{margin:var(--s5) 0 var(--s3)}.preview .drawing{margin-top:var(--s5)}.preview .mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.checklist{list-style:none;padding:0;margin:var(--s5) 0}.checklist li{border-bottom:var(--rule) solid var(--soft);padding:var(--s2) 0}.checklist a{width:100%;text-decoration:none;justify-content:space-between}.blockers{border:var(--rule) solid var(--ink);padding:var(--s6);margin-top:var(--s6)}.blockers h3{margin-bottom:var(--s3)}.blockers ul{padding-left:var(--s5);margin:var(--s3) 0}.blockers a{width:100%}.blockers .btn{width:100%;margin-top:var(--s4)}.check-label{display:flex;flex-direction:row;align-items:center;gap:var(--s4);min-height:var(--touch);padding:var(--s3) 0}.check-label input{width:var(--touch);height:var(--touch);min-width:var(--touch);accent-color:var(--ink)}
.cross-button{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border:0;background:var(--paper);min-width:0}.cross{position:relative;display:inline-block;width:var(--icon);height:var(--icon);flex:none}.cross:before,.cross:after{content:'';position:absolute;top:50%;left:50%;background:var(--ink);transform:translate(-50%,-50%)}.cross:before{width:var(--icon);height:var(--s1)}.cross:after{width:var(--s1);height:var(--icon)}
.sent-layout{display:grid;grid-template-columns:7fr 5fr;gap:var(--s9)}.receipt{background:var(--accent);padding:var(--s7)}.receipt h2{margin:var(--s4) 0}.receipt .meta{overflow-wrap:anywhere}.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding:var(--s5) 0}.facts dt{color:var(--grey)}.facts dd{font-weight:500}.sent-layout .actions{margin-top:var(--s5)}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9)}.status-grid .panel{align-self:start}.timeline{padding-left:var(--s6)}.timeline li{padding:var(--s3) 0}.dashboard-top{display:flex;justify-content:space-between;gap:var(--s6);margin:var(--s6) 0}.project-row{display:grid;grid-template-columns:3fr 2fr 2fr 2fr 2fr;gap:var(--s6);border-top:var(--rule) solid var(--ink);padding:var(--s5) 0;align-items:center}.project-row>div{min-width:0;overflow-wrap:anywhere}.project-row.head{color:var(--grey)}.project-row .mobile-label{display:none}.project-row .btn{width:100%}.index-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9)}.screen-list{list-style:none;padding:0}.screen-list a{display:flex;justify-content:space-between;border-top:var(--rule) solid var(--soft);padding:var(--s3) 0}.footer{margin-top:var(--s10);border-top:var(--rule) solid var(--ink);padding:var(--s5) 0;display:flex;justify-content:space-between;gap:var(--s6);color:var(--grey)}.feedback{min-height:var(--touch);margin-top:var(--s3);font-weight:500}.blank-space{padding-top:var(--s6)}
@media(max-width:1050px){.guided{grid-template-columns:1fr;gap:var(--s6)}.rail{position:static}.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.steps a{height:100%;flex-direction:column;gap:var(--s2)}.rail-note{display:none}.split{gap:var(--s6)}.split .gallery,.split .fields,.split .paste-layout{grid-template-columns:1fr}.split .confirmation{grid-template-columns:1fr}.preview{padding-left:var(--s4)}}
@media(max-width:700px){:root{--gutter:20px;--gap:16px;--text-display:38px}.site-header{flex-wrap:wrap;gap:0;padding:var(--s3) 0}.header-nav{gap:var(--s4);width:100%;justify-content:space-between}.draft{flex-direction:column;gap:var(--s1)}.page-head{grid-template-columns:1fr;gap:var(--s5);padding:var(--s7) 0}.guided,.split,.sent-layout,.status-grid,.index-grid{grid-template-columns:1fr;gap:var(--s6)}.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}.steps a{justify-content:center;align-items:center;padding:var(--s3);min-height:var(--touch)}.steps a span:not(.num){display:none}.rail-note{display:none}.paste-layout,.gallery,.fields{grid-template-columns:1fr}.confirmation{grid-template-columns:1fr;gap:var(--s4)}.confirmation.current,.panel,.blockers,.receipt{padding:var(--s5)}.section-title{flex-direction:column;gap:var(--s2)}.foot-actions{align-items:stretch;flex-direction:column}.actions .btn{flex:1 1 auto}.howto{min-height:var(--paste)}.preview{position:static;grid-row:1;border:var(--rule) solid var(--ink);padding:var(--s4)}.preview h2{font-size:var(--text-card)}.preview .mini-gallery{display:none}.preview .drawing{max-height:var(--paste)}.dashboard-top{flex-direction:column}.project-row{grid-template-columns:1fr 1fr;gap:var(--s4)}.project-row.head{display:none}.project-row>div:first-child{grid-column:1/-1}.project-row .mobile-label{display:block;color:var(--grey)}.footer{flex-direction:column;gap:var(--s2)}.facts{grid-template-columns:1fr}.text-link{white-space:normal}.logo img{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}