/* Screen-only field theme. Print and PDF retain their drawing-sheet styling. */
:root {
 --navy:#14283f; --navy-light:#233e58; --khaki:#ff9600;
 --khaki-pale:#e9f3fa; --paper:#f4f7fa; --surface:#fff;
 --ink:#14283f; --muted:#52606d; --line:#cdd3d8;
}
body { color:var(--ink); background:var(--paper); }
.panel { border-color:var(--line); background:#fff; box-shadow:0 2px 8px #14283f05; }
h1,h2,h3 { color:var(--navy); }
h2 { font-weight:750; }
.intro p { font-size:15px; color:var(--muted); }
.eyebrow,.resultheading .eyebrow { color:#235677; font-size:12px; font-weight:750; }
.precision,.precision b { color:var(--muted); font-size:12px; }
.inputs { padding:24px; }
.inputs .entryunitsnote { color:var(--muted); font-size:13px; line-height:1.6; }
.inputstep .field { margin-bottom:22px; }
.inputstep label,.jobdetailsbody label { color:var(--ink); font-size:15px; font-weight:750; line-height:1.4; }
.inputstep input,.inputstep select,.jobdetailsbody input,.jobdetailsbody textarea {
 min-height:54px; height:auto; padding:13px 12px; font-size:18px;
 font-weight:650; color:var(--ink); background:#fff;
 border:1.5px solid #8793a0; border-radius:8px;
}
.inputstep input[readonly] { background:#f0f2f3; color:#465563; border-color:#a1aab2; }
.inputstep .suffix input { padding-right:48px; }
.suffix>span { color:#465563; font-size:13px; font-weight:650; top:50%; transform:translateY(-50%); }
.inputstep .field p,.helpnote,.stepintro,.savednote,.cutnotice,
.examplesbody p,.examplesbody button small,.entryhelp p,.disclosurebody p,
.measurementguide dd,.measurementhelpbody p,.disclaimer p,.framenote {
 color:var(--muted); font-size:13px; line-height:1.65;
}
.stepintro { margin-top:10px; margin-bottom:22px; }
.inputstep h3 { font-size:25px; font-weight:750; line-height:1.3; }
#seathelp { color:var(--ink); font-weight:750; }
input::placeholder,textarea::placeholder { color:#596775; opacity:1; font-weight:400; }
input:focus,select:focus,textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px #14283f18; }
button:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible {
 outline:3px solid #0079bd; outline-offset:3px;
}
.flowprogress,.flowprogress span:first-child { color:var(--ink); }
.flowprogress span:first-child { font-size:17px; font-weight:800; }
.flowsteps { background:#edf5fb; border:1px solid #a7c8df; padding:7px; gap:8px; box-shadow:none; }
.flowsteps button { background:#fff; border:1.5px solid #8793a0; color:var(--ink); font-size:16px; min-height:100px; box-shadow:none; }
.flowsteps button b { background:#e9f3fa; color:var(--ink); font-size:23px; width:38px; height:38px; }
.flowsteps button.complete { background:#fff; color:var(--ink); border-color:#8793a0; }
.flowsteps button[aria-current="step"] { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 3px 0 #ff9600; }
.flowsteps button[aria-current="step"] b { background:#ffb449; color:var(--navy); }
.roofchoices button { border:1.5px solid #8793a0; min-height:84px; }
.roofchoices strong { font-size:20px; font-weight:750; }
.roofchoices small { color:var(--muted); font-size:13px; }
.roofchoices button[aria-pressed="true"] { background:var(--navy); color:white; border-color:var(--navy); }
.roofchoices button[aria-pressed="true"] small { color:#d5eafb; }
.calculationmode,.rafterspanfield { background:#fff; border:1px solid #a1aab2; border-radius:9px; box-shadow:none; }
.presets span { color:var(--muted); font-size:12px; }
.presets button { background:#e9f3fa; color:var(--ink); border:1px solid #99bad0; min-height:46px; min-width:56px; font-size:14px; font-weight:700; }
.advanced { border-color:#cdd3d8; }
.advanced>summary,.measurementhelp>summary,.examples>summary,
.inputrecap>summary,.formulas>summary,.validation>summary {
 color:var(--ink); min-height:48px; font-size:14px; font-weight:650;
}
.advanced>summary span { color:var(--muted); font-size:12px; }
summary:after { color:#465563; font-size:21px; }
.examplesbody button { font-size:13px; color:var(--ink); background:#fff; border-color:#a1aab2; min-height:48px; }
.flowactions { border-top:1px solid #d9dee1; padding-top:14px; }
.flowactions .calculate { min-height:56px; font-size:17px; font-weight:750; background:var(--navy); color:#fff; border-color:var(--navy); }
.flowactions .calculate:hover { background:#233e58; }
.flowactions .calculate span { color:#d5eafb; }
.flowactions>button:first-child { min-height:56px; font-size:15px; color:var(--ink); background:#fff; border-color:#8793a0; }
.usesaved { color:#235677; font-size:13px; }
.mobiletabs { background:#edf5fb; border-color:#a1aab2; }
.mobiletabs button,.mobiletabs button span { color:#465563; font-size:15px; font-weight:700; }
.mobiletabs button[aria-pressed="true"],.mobiletabs button[aria-pressed="true"] span { color:#fff; background:var(--navy); }
.unitcontrol { background:#e9f3fa; border:1px solid #a7c8df; box-shadow:none; }
.unitbuttons button { color:var(--ink); border:1.5px solid #8793a0; background:#fff; min-height:54px; }
.unitbuttons button[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:none; }
.unitcontrol p,.unitsheading>span,#pdfstatus { color:var(--muted); font-size:13px; line-height:1.6; }
.pitchsummary { background:#fff; border:1px solid #cdd3d8; border-left:4px solid var(--navy); font-size:17px; }
.heightdependency { background:#edf5fb; border-color:#ff9600; color:var(--ink); }
.metric { border-color:#b8c1c9; background:#fff; padding:18px 14px; }
.metric .letter { color:#fff; background:var(--navy); font-size:14px; font-weight:800; width:29px; height:29px; }
.metric .value { font-size:clamp(21px,1.7vw,27px); font-weight:750; letter-spacing:-.4px; }
.metric small { color:var(--muted); font-size:12px; }
.metric:first-child { background:var(--navy); border-color:var(--navy); }
.metric:first-child .letter { color:var(--navy); background:#ffb449; }
.metric:first-child small { color:#e0e6eb; }
.drawing,.framepanel,.detailpanel { background:#fff; }
.drawingmeta,.legend,.framelegend,.detailpanel .sectionhead>span,#secondary { color:#52606d; font-size:12px; line-height:1.6; }
.legend { flex-wrap:wrap; }
#drawingzoom,#framezoom { background:#edf5fb; color:var(--ink); border-color:#91b4cb; min-height:46px; font-size:13px; font-weight:700; }
.framevalues dt,.inputrecap dt { color:var(--muted); font-size:12px; line-height:1.5; }
.framevalues dd { color:var(--ink); font-size:18px; font-weight:700; }
.inputrecap dd { color:var(--ink); font-size:15px; }
#secondary b { color:var(--ink); font-size:16px; font-weight:700; }
.framenote { font-size:12px; }
#checkbadge,#checkscount { color:#52606d; font-size:12px; }
.flowwarnings,.inputchecks.haswarnings,.referencewarning { background:#fff5df; border-color:#b99650; }
.flowwarnings,.flowwarnings strong,.flowwarnings p,#checksbody,.referencewarning strong,.referencewarning p { color:#674d1e; font-size:13px; line-height:1.65; }
#checksbody .checkscope { color:#52606d; font-size:12px; }
.flowerror,#error { color:#8e3426; background:#fff1ed; border-left:4px solid #a43c2e; font-size:14px; }
input[aria-invalid="true"],select[aria-invalid="true"] { border:2px solid #a43c2e; background:#fff8f5; }
.cutnotice a { color:#235677; font-weight:650; }
.disclaimer .testpattern { background:#e9f3fa; color:var(--ink); }
footer { color:#52606d; font-size:12px; }
@media (max-width:760px) {
 .inputs { padding:22px 18px; }
 .flowsteps button { font-size:15px; }
 .inputstep label,.jobdetailsbody label { font-size:16px; }
 .inputstep .field p,.stepintro,.savednote,.cutnotice { font-size:14px; }
 .flowactions .calculate { font-size:17px; }
 .unitbuttons button { font-size:14px; }
 .metric .value { font-size:clamp(23px,6vw,29px); }
 .drawing .sectionhead,.framepanel .sectionhead { flex-wrap:wrap; }
 .drawingactions { flex-wrap:wrap; }
 .framevalues dd { font-size:17px; }
 #pdfstatus { font-size:14px; }
}
@media (max-width:340px) {
 header .brandlogo { width:42px; height:42px; }
 header .brandwordmark { width:110px; }
 .printbutton { padding:9px; font-size:10px; }
 .flowsteps { gap:5px; padding:5px; }
 .flowsteps button { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { button { transition:none; } }

.empty-sheet{display:none;padding:28px}.empty-sheet h2{font-size:23px}.empty-sheet p{font-size:15px;line-height:1.7;color:#52606d;max-width:440px}body[data-empty="true"] .results>.empty-sheet{display:block}body[data-empty="true"] .results>:not(.empty-sheet){display:none!important}select:has(option[value=""]:checked){color:#52606d}@media print{.empty-sheet{display:none!important}}

/* Larger original RafterCut logo and matching supplied lettering. */
header{min-height:112px;padding-top:12px;padding-bottom:12px}header .brand{gap:16px}header .brandlogo{width:88px;height:88px;border-radius:18px}header .brandwordmark{width:220px;height:auto;display:block}header .brandcopy{flex-shrink:1}
@media(max-width:760px){header{min-height:88px;gap:10px;padding:12px 14px}header .brand{gap:10px}header .brandlogo{width:64px;height:64px;border-radius:13px}header .brandwordmark{width:168px;height:auto}header .printbutton{flex-shrink:0}}
@media(max-width:359px){header .brandlogo{width:56px;height:56px}header .brandwordmark{width:142px}}

/* Compact first screen and an explicit review before PDF export. */
main{padding-top:22px}.languagebar{margin-bottom:14px}.intro{margin-bottom:20px}.intro p{margin-top:7px}.inputs .entryunitsnote{margin:0 0 12px}.inputs .sectionhead{margin-bottom:14px}
.reviewpanel{order:1;padding:22px;border:1px solid #99bad0;border-left:4px solid #14283f}.reviewpanel>p{font-size:14px;line-height:1.5;color:#52606d;margin:7px 0 18px}.reviewpanel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}.reviewpanel dl>div{min-width:0}.reviewpanel dt{font-size:12px;line-height:1.5;color:#52606d}.reviewpanel dd{margin:4px 0 0;font-size:17px;font-weight:750;line-height:1.45;overflow-wrap:anywhere}.reviewactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:15px;border-top:1px solid #cdd3d8}.reviewactions button{min-height:46px;padding:10px 14px;border:1px solid #8793a0;background:#fff;border-radius:7px;color:#14283f;font-weight:650}.reviewpanel[hidden]{display:none!important}
@media(max-width:760px){main{padding-top:14px}.languagebar{margin-bottom:10px}.intro{margin-bottom:14px}.intro .eyebrow{display:none}.intro h1{font-size:25px;line-height:1.2}.intro p{font-size:14px}.inputs{padding-top:18px}.inputs .entryunitsnote{font-size:13px}.reviewpanel{padding:18px}.reviewpanel dl{gap:14px}.reviewpanel dd{font-size:16px}header{min-height:80px;padding-top:9px;padding-bottom:9px}header .brandlogo{width:60px;height:60px}header .brandwordmark{width:158px}.flowprogress{margin-top:14px}}
@media(max-width:359px){header .brandlogo{width:52px;height:52px}header .brandwordmark{width:136px}.reviewpanel dl{grid-template-columns:1fr}.reviewactions button{flex:1;padding-left:8px;padding-right:8px}}

/* Simple numbered steps and recognizable roof-style choices. */
.flowsteps button{min-height:64px;font-size:20px;font-weight:800;justify-content:center}.flowsteps button>span{white-space:nowrap}.roofchoices button{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 10px}.rooficon{display:block;width:104px;max-width:100%;height:64px;flex:none}.roofwall{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}.roofplane{fill:#ffd9a3;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}.roofline{fill:none;stroke:currentColor;stroke-width:2;opacity:.55}.roofchoices button[aria-pressed="true"] .roofplane{fill:#ffb449}.roofchoices strong{line-height:1.3}.roofchoices small{line-height:1.4}@media(max-width:380px){.flowsteps button{min-height:62px;font-size:18px}.rooficon{width:94px;height:58px}}

/* Consistent, prominent headings throughout the three input steps. */
:root{--input-heading-size:20px}.flowsteps button{font-size:var(--input-heading-size)}.inputstep h3,.inputstep label,.jobdetailsbody label,.inputs .sectionhead h2,.jobdetails>summary,.inputstep .advanced>summary{font-size:var(--input-heading-size);font-weight:800;line-height:1.3;color:var(--ink)}.inputstep label{margin-bottom:10px}.spanlabel{flex-wrap:wrap;align-items:center;gap:4px 10px}.spanlabel label{flex:1 1 180px;margin:0}.spanlabel button{flex:none;font-size:12px;min-height:40px}.inputstep .row{align-items:start}.flowsteps{margin-bottom:16px}#step0>.stepintro{margin:4px 0 12px;line-height:1.4}#step0>h3{margin:0}#step0>.field{margin-bottom:18px}.inputstep .advanced>summary{font-size:var(--input-heading-size)}
@media(max-width:760px){.flowsteps button,.inputstep h3,.inputstep label,.jobdetailsbody label,.inputs .sectionhead h2,.jobdetails>summary,.inputstep .advanced>summary{font-size:var(--input-heading-size)}.inputstep .row{grid-template-columns:1fr;gap:0}.flowsteps{margin-bottom:14px}#step0>.stepintro{margin:3px 0 10px}.spanlabel label{flex-basis:180px}}

.calcmodeheading{font-size:var(--input-heading-size);font-weight:800;line-height:1.3;margin-bottom:12px;color:var(--ink)}.calcmodechoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.calcmodechoices button{min-width:0;min-height:56px;border:1.5px solid #8793a0;border-radius:8px;background:#fff;color:#14283f;font-size:16px;font-weight:750;line-height:1.3;padding:12px 8px}.calcmodechoices button[aria-pressed="true"]{background:#14283f;color:#fff;border-color:#14283f;box-shadow:0 3px 0 #ff9600}.calcmodechoices button:hover{border-color:#14283f}.calculationmode select[hidden]{display:none!important}

#ridgecustom{margin-top:14px}#ridgecustom[hidden]{display:none!important}

/* Keep the job heading readable in both mobile disclosure states. */
@media(max-width:760px){.inputs .jobdetails:not([open])>summary{color:#fff}.inputs .jobdetails:not([open])>summary::after{color:#ffb449}#form>.jobdetails[open]{background:#e9f3fa}.inputs .jobdetails[open]>summary,.inputs .jobdetails[open]>summary::after{color:#14283f}.inputs .jobdetails>summary>#jobsummary{color:#14283f}}

/* Field review sequence: building overview, entered measurements, rafter layout. */
.results .jobheader{order:0}.results .resultheading{order:1}.results .pitchsummary{order:2}.results .unitcontrol{order:3}.results .framepanel{order:4}.results .reviewpanel{order:5}.results .sheetexportbar{order:6}.results .referencewarning{order:7}.results .inputchecks{order:8}.results .metrics{order:9}.results .drawing{order:10}.results .detailpanel{order:11}.results .inputrecap{order:12}.results .formulas{order:13}.results .validation{order:14}.results .disclaimer{order:15}

/* Keep the same live building overview available during every input step. */
.results .framepanel{display:block!important}body[data-empty="true"] .results>.printframepage{display:contents!important}body[data-empty="true"] .results>.empty-sheet{display:none!important}body.invalid .results>:not(.printframepage):not(.empty-sheet){display:none!important}
@media(max-width:760px){body[data-mobile-view="setup"] .results{display:flex!important}body[data-mobile-view="setup"] .results>:not(.printframepage){display:none!important}body[data-mobile-view="setup"] .results>.printframepage{display:contents!important}body[data-mobile-view="setup"] .results .framepanel{display:block!important;margin-top:0}}

/* One input page: visible sections and a persistent phone action. */
#form .inputstep{min-height:0;padding:0;margin:28px 0 0;scroll-margin-top:90px}
#form .inputstep>h3{font-size:23px;font-weight:800;letter-spacing:-.3px;padding:12px 15px;margin:0 0 22px;border-left:4px solid #ff9600;border-radius:0 8px 8px 0;background:#e9f3fa;color:#14283f}
#form #step0{margin-top:22px}
#form .roofstylelabel{font-size:18px;font-weight:750;color:#14283f;margin:0 0 12px}
#form .flowactions{display:block}
#form .flowactions #flownext{width:100%;background:#14283f;color:#fff;border:1px solid #14283f;font-size:17px;font-weight:800;min-height:56px;border-radius:9px}
#form input,#form select,#form button{scroll-margin-top:100px;scroll-margin-bottom:100px}
@media(max-width:760px){
 body[data-mobile-view="setup"] main{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 #form .flowactions{position:fixed;bottom:0;left:0;right:0;z-index:25;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#f4f7fa;border-top:1px solid #d9d1bf;box-shadow:0 -4px 18px #14283f12}
 #form .inputstep{margin-top:30px}
 #form .inputstep>h3{font-size:23px;padding:12px 14px}
 #form .savednote{margin-top:22px}
}

@media screen{
 .results #metrics{display:none!important}
 .drawingwithdimensions{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:10px;align-items:center}
 .drawingwithdimensions .drawingscroll{min-width:0}
 .drawingwithdimensions .mobiledimensions{display:grid;gap:0;border-left:1px solid #d9dfe3;padding-left:10px}
 #mobiledimensions .metric,#mobiledimensions .metric:last-child{display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 5px;min-height:0;padding:9px 0;background:transparent;color:#14283f;border:0;border-bottom:1px solid #e3e5e5;border-radius:0;box-shadow:none;grid-column:auto}
 #mobiledimensions .metric:last-child{border-bottom:0}
 #mobiledimensions .metric .letter{grid-column:1;grid-row:1;margin:0;width:20px;height:20px;font-size:12px;background:#14283f;color:white;display:flex;align-items:center;justify-content:center}
 #mobiledimensions .metric .value,#mobiledimensions .metric:last-child .value{grid-column:2;grid-row:1;font-size:14px;line-height:1.4;font-weight:750;overflow-wrap:anywhere;color:#14283f}
 #mobiledimensions .metric small,#mobiledimensions .metric:last-child small{grid-column:2;grid-row:2;margin:0;font-size:10px;line-height:1.35;color:#586775}
 .drawingwithdimensions:has(.enlarged){grid-template-columns:minmax(0,1fr)}
 .drawingwithdimensions:has(.enlarged) .mobiledimensions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;border-left:0;padding-left:0}
 .drawingwithdimensions .drawingscroll:not(.enlarged) #drawing .dim-text{font-size:19px}
}
@media(max-width:360px){.drawingwithdimensions{grid-template-columns:minmax(0,1fr) 105px;gap:6px}#mobiledimensions .metric .value{font-size:13px}}

@media(min-width:761px){
 .drawingwithdimensions{grid-template-columns:minmax(0,1fr) 160px;gap:20px}
 #mobiledimensions .metric{padding:13px 0}
 #mobiledimensions .metric .value,#mobiledimensions .metric:last-child .value{font-size:18px}
 #mobiledimensions .metric small,#mobiledimensions .metric:last-child small{font-size:12px}
 .drawingwithdimensions #drawing svg{min-width:0;width:100%}
}
/* Give the drawing the full card width on phones and tablets. */
@media(max-width:1100px){
 .drawingwithdimensions{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
 .drawingwithdimensions .mobiledimensions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;border-left:0;border-top:1px solid #d9dfe3;padding:8px 0 0}
 .drawingwithdimensions .drawingscroll:not(.enlarged) #drawing svg{width:100%;min-width:0;max-height:none}
 #mobiledimensions .metric,#mobiledimensions .metric:last-child{padding:8px 0}
}

#form .field .ridgeassemblyinfo{font-size:16px;font-weight:750;color:#14283f;line-height:1.5;margin:10px 0 18px;padding:10px 12px;background:#e9f3fa;border-radius:6px}

#form .field .ridgeexample{font-size:12px;line-height:1.6;padding:10px 12px;background:#edf5fb;border-radius:6px;color:#526171}

.tailchoices{display:grid;grid-template-columns:1fr;gap:9px}.tailchoices button{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid #8793a0;border-radius:9px;background:white;color:#14283f;text-align:left;min-height:84px}.tailchoices strong{font-size:16px;line-height:1.4}.tailchoices .rooficon{width:90px;height:64px}.tailchoices button[aria-pressed="true"]{background:#14283f;color:white;border-color:#14283f}.tailchoices button[aria-pressed="true"] .roofplane{fill:#ffb449}

/* Field readability polish: calm supporting panels, full-width drawings. */
.panel{border-color:#dce1e4;box-shadow:none}
.results{gap:20px}
.inputs{padding:24px}
#form .inputstep{margin-top:32px}
#form .inputstep>h3{padding:12px 14px;margin-bottom:24px;background:#e9f3fa;border-left:3px solid #ff9600;font-size:22px}
#form .inputstep .field{margin-bottom:24px}
#form .inputstep label{font-size:17px;line-height:1.4;margin-bottom:9px}
#form .spanlabel label{margin-bottom:0}
#form .inputstep .field p{margin-top:8px;line-height:1.6}
#form .rafterspanfield,#form .calculationmode{padding:16px;background:#f6f7f7;border:0;border-radius:8px}
#form .calculationmode{margin-top:24px}
#form .inputstep .advanced{margin-top:24px;border-color:#dce1e4}
#form .inputstep .advanced>summary{font-size:17px;padding-top:16px;padding-bottom:16px}
.unitcontrol{background:#fff;border-color:#a7c8df;border-left:3px solid #ff9600;padding:18px 20px}
.unitbuttons button[aria-pressed="true"]{box-shadow:inset 0 -3px #ff9600}
.reviewpanel{border:0;border-top:1px solid #dce1e4;border-bottom:1px solid #dce1e4;border-radius:0;padding:24px 20px;background:transparent}
.pitchsummary{border:0;border-left:3px solid #ff9600;border-radius:0;background:transparent;margin:0;padding:10px 16px}
.inputchecks:not(.haswarnings){border:0;border-radius:0;background:transparent;box-shadow:none}
.inputrecap,.formulas,.validation{border-width:1px 0 0;border-radius:0;background:transparent;box-shadow:none}
.drawing,.detailpanel,.framepanel{padding:24px 20px 18px;border-color:#cbd3da}
.drawing .sectionhead,.detailpanel .sectionhead,.framepanel .sectionhead{margin-bottom:16px}
.drawing .sectionhead h2,.detailpanel .sectionhead h2,.framepanel .sectionhead h2{font-size:20px;letter-spacing:-.3px}
.drawingmeta{font-size:12px;line-height:1.7;margin-bottom:12px}
.drawingwithdimensions{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.drawingwithdimensions .drawingscroll #drawing svg{min-width:0;width:100%;max-height:none}
.drawingwithdimensions .drawingscroll.enlarged #drawing svg{min-width:850px}
.drawingwithdimensions .mobiledimensions,.drawingwithdimensions:has(.enlarged) .mobiledimensions{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px;border-left:0;border-top:1px solid #dce1e4;padding:12px 0 8px}
#mobiledimensions .metric,#mobiledimensions .metric:last-child{grid-template-columns:24px minmax(0,1fr);gap:5px 8px;padding:10px 0;border-bottom:0;align-content:start}
#mobiledimensions .metric .letter{width:24px;height:24px;font-size:13px;border-radius:5px}
#mobiledimensions .metric .value,#mobiledimensions .metric:last-child .value{font-size:17px;letter-spacing:0;line-height:1.4;white-space:normal;font-variant-numeric:tabular-nums}
#mobiledimensions .metric small,#mobiledimensions .metric:last-child small{font-size:12px;line-height:1.5}
#drawing svg .dimension,#detail svg .dimension,#detail .detail-dimension,.frameviewport svg .frame-dim{stroke:#657789;stroke-width:1.5}
#drawing svg .ref,.frameviewport svg .frame-ref{stroke:#95a2ae}
.drawingwithdimensions .drawingscroll:not(.enlarged) #drawing .dimension{stroke-width:1.5}
#drawingzoom,#framezoom{background:#fff;border-color:#a9b4bd;border-radius:8px}
.legend{padding-top:14px;gap:16px;color:#52606d}
@media(max-width:1200px){
 .drawingwithdimensions .mobiledimensions,.drawingwithdimensions:has(.enlarged) .mobiledimensions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .inputs{padding:20px 18px}
 .results{gap:16px}
 #form .inputstep label{font-size:18px}
 #form .inputstep>h3{font-size:22px;margin-bottom:22px}
 .drawing,.detailpanel,.framepanel{padding:20px 12px 16px}
 .drawing .sectionhead,.detailpanel .sectionhead,.framepanel .sectionhead{gap:10px;margin-bottom:12px}
 .drawing .sectionhead h2,.detailpanel .sectionhead h2,.framepanel .sectionhead h2{font-size:19px}
 .drawingmeta{font-size:11px;margin-bottom:10px}
 .drawingwithdimensions .mobiledimensions,.drawingwithdimensions:has(.enlarged) .mobiledimensions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
 #mobiledimensions .metric,#mobiledimensions .metric:last-child{border-bottom:1px solid #e7eaed;padding:12px 0}
 #mobiledimensions .metric:last-child{border-bottom:0}
 #mobiledimensions .metric .value,#mobiledimensions .metric:last-child .value{font-size:17px}
 .unitcontrol{padding:16px 12px}
 .reviewpanel{padding:20px 12px}
}
@media(max-width:359px){
 #mobiledimensions .metric .value,#mobiledimensions .metric:last-child .value{font-size:15px}
 .drawingwithdimensions .mobiledimensions{column-gap:10px}
}

/* Keep the dimension reference alongside the desktop drawing. */
@media(min-width:1101px){
 .drawingwithdimensions{grid-template-columns:minmax(0,1fr) 160px;gap:20px;align-items:center}
 .drawingwithdimensions .mobiledimensions{grid-template-columns:minmax(0,1fr);gap:0;border-top:0;border-left:1px solid #dce1e4;padding:0 0 0 16px}
 #mobiledimensions .metric,#mobiledimensions .metric:last-child{padding:13px 0;border-bottom:1px solid #e7eaed}
 #mobiledimensions .metric:last-child{border-bottom:0}
 .drawingwithdimensions:has(.enlarged){grid-template-columns:minmax(0,1fr)}
 .drawingwithdimensions:has(.enlarged) .mobiledimensions{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px;border-left:0;border-top:1px solid #dce1e4;padding:12px 0 8px}
}

/* Strong, clearly tappable phone navigation in the existing brand palette. */
@media(max-width:760px){
 .mobiletabs{background:#fff;border:1px solid #cbd3da;box-shadow:0 4px 12px #14283f12;padding:6px;gap:8px;border-radius:12px;isolation:isolate}
 .mobiletabs button{min-height:58px;padding:10px 8px;gap:8px;border:1.5px solid #14283f;border-radius:8px;background:#fff;color:#14283f;font-size:17px;font-weight:800;line-height:1.25;box-shadow:none}
 .mobiletabs button span{font-size:17px;font-weight:800;line-height:1.25;color:inherit;background:transparent}
 .mobiletabs button[aria-pressed="true"]{background:#14283f;color:#fff;border-color:#14283f;box-shadow:inset 0 -5px #ff9600}
 .mobiletabs button[aria-pressed="true"] span{color:inherit;background:transparent}
 .mobiletabs .viewtabicon{display:block;width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .mobiletabs button:focus-visible{outline:3px solid #0079bd;outline-offset:3px}
}
@media(max-width:359px){
 .mobiletabs{gap:6px;padding:5px}
 .mobiletabs button,.mobiletabs button span{font-size:15px}
 .mobiletabs button{gap:6px;padding:10px 6px}
 .mobiletabs .viewtabicon{width:18px;height:18px}
}

/* FramerCAD identity; supplied artwork kept intact. */
header .brandcopy{display:flex;flex-direction:column;gap:4px;min-width:0}
header .productname{font-size:29px;line-height:1.1;color:#fff;font-weight:800}
header .parentbrand{font-size:14px;color:#fff;line-height:1.3}
header .parentbrand b{font-style:italic}header .parentbrand b span{color:#ff9800}
header .brandlogo{object-fit:contain;background:white}
@media(max-width:760px){header .productname{font-size:24px}header .parentbrand{font-size:12px}}
@media(max-width:359px){header .productname{font-size:21px}}

/* Approved Precision Grid identity. Decorative drafting stays out of cut sheets. */
:root{--navy:#08263f;--navy-light:#123e5d;--khaki:#ff9600;--khaki-pale:#e9f3fa;--paper:#f4f7fa;--ink:#14283f;--blue:#009fe8}
header.precisionheader{position:relative;isolation:isolate;overflow:hidden;min-height:154px;height:auto;padding:12px 4% 14px;border-bottom:4px solid #ff9600;background-color:#06243c;background-image:linear-gradient(#1598dc20 1px,transparent 1px),linear-gradient(90deg,#1598dc20 1px,transparent 1px),linear-gradient(#1598dc18 1px,transparent 1px),linear-gradient(90deg,#1598dc18 1px,transparent 1px);background-size:64px 64px,64px 64px,16px 16px,16px 16px}
.headerdraft{position:absolute;inset:0;width:100%;height:100%;opacity:.32;pointer-events:none;z-index:-1}
header .precisionbrand{display:block;position:relative;width:390px;max-width:calc(100% - 100px);flex:none;letter-spacing:0;padding-bottom:12px}
header .headerart{display:block;width:100%;height:auto;object-fit:contain}
header .headertool{display:block;margin:-12px 0 0 29%;font-size:24px;line-height:1;font-weight:800;font-style:italic;color:white;text-shadow:0 2px 3px #001424}
header .printbutton{border:1.5px solid #d6eafb;background:#08263fed;border-radius:9px;min-height:46px;font-size:14px;position:relative;flex-shrink:0}
header .printbutton:hover{background:#164c70}
header .printbutton svg{width:23px;height:23px}
#form .inputstep>h3{background:#e9f3fa;border-left-color:#ff9600}
#form .rafterspanfield,#form .calculationmode{background:#f0f6fa}
.jobdetails{border-color:#a7c8df;background:#e9f3fa}
.jobdetails>summary{color:#14283f}
#jobsummary{background:#fff;color:#14283f}
.unitcontrol{border-color:#a7c8df;border-left-color:#ff9600}
.languagebar select{border-color:#91b4cb}
.roofchoices button[aria-pressed="true"],.tailchoices button[aria-pressed="true"],.calcmodechoices button[aria-pressed="true"]{background:#08263f;border-color:#08263f;box-shadow:inset 0 -3px #ff9600}
.presets button{background:#e9f3fa;border-color:#91b4cb}
.presets button:hover,.reviewactions button:hover,#drawingzoom:hover,#framezoom:hover{background:#e9f3fa;border-color:#0079bd}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#0079bd}
input:focus,select:focus,textarea:focus{border-color:#0079bd;box-shadow:0 0 0 3px #009fe820}
.flowactions .calculate,#exportpdf{background:#08263f;color:#fff;border-color:#08263f;box-shadow:inset 0 -3px #ff9600}
.flowactions .calculate span{color:#ffb449}
@media(max-width:760px){
 header.precisionheader{min-height:112px;padding:8px 14px 12px;gap:12px}
 header .precisionbrand{width:280px;max-width:calc(100% - 58px);padding-bottom:5px;flex:0 1 280px}
 header .headertool{font-size:19px;margin-top:-8px}
 header .printbutton{width:46px;height:46px;min-width:46px;padding:10px}
 .headerdraft{opacity:.2}
 .mobiletabs{border-color:#a7c8df;background:#fff}
 .mobiletabs button{border-color:#8db6d1}
 .mobiletabs button[aria-pressed="true"]{background:#e2f1fc;color:#08263f;border-color:#7bb8df;box-shadow:inset 0 -4px #ff9600}
 .inputs .jobdetails:not([open]){background:#08263f;border-color:#ff9600}
 .inputs .jobdetails:not([open])>summary{color:white}
}
@media(max-width:359px){header.precisionheader{padding-left:10px;padding-right:10px;gap:8px;min-height:102px}header .precisionbrand{max-width:calc(100% - 54px)}header .headertool{font-size:17px;margin-top:-6px}}

/* Compact Blueprint Detail header, matched to the selected reference. */
header.precisionheader{min-height:0;height:124px;padding:6px 4%;display:grid;grid-template-columns:minmax(240px,360px) minmax(160px,230px) auto;gap:24px;justify-content:space-between;align-items:center;border-bottom:4px solid #ff9600;box-shadow:inset 0 -7px #009fe8}
header .precisionbrand{width:100%;max-width:none;min-width:0;padding:0;margin:0}
header .headerart{width:100%;height:auto;max-height:108px;object-fit:contain;object-position:left center}
.headerframing{display:block;width:100%;height:108px;opacity:.9;pointer-events:none}
header .printbutton{justify-self:end;padding:10px 14px;min-height:44px}
.headerdraft{opacity:.18}
nav.mobiletabs{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin:0;position:sticky;top:0;z-index:20;border:0;border-bottom:1px solid #a0bfd4;border-radius:0;background:#fff;box-shadow:0 3px 8px #08263f0a;isolation:isolate}
nav.mobiletabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:0;border-radius:0;background:#fff;color:#14283f;padding:9px 16px;font-size:15px;font-weight:750;box-shadow:none}
nav.mobiletabs button+button{border-left:1px solid #b8d3e5}
nav.mobiletabs button span{font-size:15px;font-weight:750;line-height:1.2;background:transparent;color:inherit}
nav.mobiletabs button[aria-pressed="true"]{background:#dff0fc;color:#08263f;box-shadow:inset 0 -2px #009fe8}
nav.mobiletabs button[aria-pressed="true"] span{background:transparent;color:inherit}
nav.mobiletabs .viewtabicon{display:block;width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{padding-top:14px}.languagebar{margin-bottom:10px}.intro{margin-bottom:18px}
@media(min-width:1101px){.languagebar{float:right;position:relative;z-index:1;margin-bottom:0}.intro{min-height:65px;padding-right:340px}.intro .precision{display:none}.workspace{clear:both}}
@media(max-width:760px){header.precisionheader{height:104px;min-height:0;padding:5px 12px;grid-template-columns:minmax(0,1fr) 78px 44px;gap:7px}header .precisionbrand{width:100%;max-width:none;min-width:0}header .headerart{max-height:86px}header .headerframing{height:85px;width:100%}header .printbutton{width:44px;min-width:44px;height:44px;padding:10px}header .printbutton>span{display:none}main{padding-top:12px}.languagebar{margin-bottom:12px}nav.mobiletabs button{min-height:46px;padding:9px 6px;font-size:15px}nav.mobiletabs .viewtabicon{width:21px;height:21px}}
@media(max-width:359px){header.precisionheader{grid-template-columns:minmax(0,1fr) 44px;height:94px;gap:9px}.headerframing{display:none}}

/* Independent brand and application images, positioned as one header composition. */
header .precisionbrand{position:relative;aspect-ratio:2.8;width:100%;max-width:310px;height:auto}
header .headerart{position:absolute;top:-8%;left:0;width:100%;height:auto;max-height:none}
header .applicationmark{position:absolute;left:30%;bottom:0;width:60%;height:32%;overflow:hidden;display:block}
header .applicationmark img{display:block;width:100%;height:auto;transform:translateY(-22%)}
@media(max-width:760px){header .precisionbrand{max-width:none}header .headerart{max-height:none}}

/* Let both image rows size the banner; reserve space above its accent rules. */
header.precisionheader{height:auto;min-height:0;padding-top:8px;padding-bottom:24px}
header .precisionbrand{aspect-ratio:auto;height:auto}
header .headerart{position:static;display:block;width:100%;height:auto;max-height:none}
header .applicationmark{position:relative;left:auto;bottom:auto;display:block;width:60%;height:auto;aspect-ratio:5.2;margin:-7% 0 0 30%;overflow:hidden}
header .applicationmark img{width:100%;height:auto;transform:translateY(-22%)}
@media(max-width:760px){header.precisionheader{height:auto;min-height:0;padding-top:8px;padding-bottom:22px}}
@media(max-width:359px){header.precisionheader{height:auto;min-height:0;padding-bottom:22px}}

/* Decorative CAD removed from title bar; retain blueprint paper. */
header.precisionheader{grid-template-columns:minmax(0,360px) auto}
@media(max-width:760px){header.precisionheader{grid-template-columns:minmax(0,1fr) 44px}header .precisionbrand{max-width:280px}}
@media(max-width:359px){header.precisionheader{grid-template-columns:minmax(0,1fr) 44px}}

/* FramerCAD platform emblem and independent application wordmark. */
header.precisionheader{grid-template-columns:minmax(0,460px) auto;padding:8px 4% 16px;gap:24px;height:auto;min-height:0}
header .precisionbrand{display:grid;grid-template-columns:28% minmax(0,1fr);align-items:center;gap:14px;width:100%;max-width:460px;aspect-ratio:auto;height:auto}
header .brandemblem{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
header .brandwords{display:flex;flex-direction:column;align-items:center;min-width:0;padding-left:12px;border-left:1px solid #83bdd56b}
header .platformwordmark{display:block;width:100%;height:auto}
header .productwordmark{display:block;width:65%;height:auto;margin-top:-3%}
@media(max-width:760px){header.precisionheader{grid-template-columns:minmax(0,1fr) 44px;gap:12px;padding:8px 12px 16px}header .precisionbrand{max-width:360px;grid-template-columns:26% minmax(0,1fr);gap:7px}header .brandwords{padding-left:7px}header .productwordmark{width:70%}}
@media(max-width:359px){header.precisionheader{gap:6px;padding-left:8px;padding-right:8px}header .precisionbrand{gap:5px}header .brandwords{padding-left:5px}}

/* Full FramerCAD signature with responsive Rafter Cutsheets title. */
header.precisionheader{grid-template-columns:minmax(0,760px) auto;gap:22px;padding:10px 4% 18px;border-top:2px solid #009fe8;border-bottom:3px solid #ff9600;box-shadow:none;background-size:64px 64px,64px 64px,16px 16px,16px 16px}
header .cutsheetsbrand{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;max-width:760px;width:100%;align-items:center}
header .fullbrandlogo{display:flex;flex-direction:column;align-items:center;width:100%;padding:0}
header .fullbrandlogo .brandemblem{width:92%;height:auto}
header .brandcaption{display:block;width:100%;height:auto;margin-top:-17%}
header .cutsheetstitle{display:flex;flex-wrap:nowrap;align-items:center;gap:.22em;border-left:1px solid #b8ddf599;padding:14px 0 14px 24px;min-width:0;color:#fff;font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-stretch:condensed;font-weight:950;font-style:italic;font-size:clamp(26px,4.1vw,52px);line-height:1.05;letter-spacing:-.045em;text-shadow:2px 3px 3px #0009}
header .cutsheetstitle>span{white-space:nowrap;display:block}
header .cutsheetstitle>span:last-child{color:#ffab00;background:linear-gradient(#ffe252 10%,#ffad00 48%,#ff7c00 90%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(2px 3px 2px #0008);text-shadow:none}
header .printbutton{border:2px solid #daedff;background:#05233b;color:#fff;border-radius:12px;font-size:20px;font-weight:900;font-style:italic;box-shadow:inset 0 1px 2px #fff3}
/* Angled blue navigation tabs, matching the supplied artwork. */
nav.mobiletabs{display:flex;align-items:stretch;gap:0;min-height:48px;padding:0 20px;border-bottom:3px solid #ff9600;background:linear-gradient(#093251,#031c34);box-shadow:none;overflow:hidden}
nav.mobiletabs button{position:relative;isolation:isolate;flex:0 1 230px;min-width:0;min-height:48px;padding:8px 24px;border:0;background:transparent;color:white;border-radius:0;box-shadow:none}
nav.mobiletabs button+button{border:0}
nav.mobiletabs button:before{content:'';position:absolute;inset:0 -3px -2px;z-index:-1;background:linear-gradient(#397b9f,#154568 65%,#0d314f);border:1px solid #72c8f2;border-bottom:0;border-radius:13px 13px 0 0;transform:perspective(100px) rotateX(12deg);transform-origin:bottom}
nav.mobiletabs button[aria-pressed="true"]{background:transparent;color:white;box-shadow:none}
nav.mobiletabs button[aria-pressed="true"]:before{background:linear-gradient(#26a9f4,#0056b8 55%,#003166);border:2px solid #ff9600;border-bottom:0;box-shadow:inset 0 2px 3px #fff5}
nav.mobiletabs button span{font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.6px;color:#fff;text-shadow:1px 2px 2px #00182c;background:none;line-height:1.15}
nav.mobiletabs button[aria-pressed="true"] span{color:white;background:none}
nav.mobiletabs .viewtabicon{display:none}
nav.mobiletabs button:focus-visible{outline:3px solid white;outline-offset:-5px}
@media(max-width:760px){header.precisionheader{grid-template-columns:minmax(0,1fr) 44px;gap:12px;padding:10px 12px 15px}header .cutsheetsbrand{grid-template-columns:80px minmax(0,1fr);gap:12px;max-width:440px}header .cutsheetstitle{flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 8px 12px;font-size:clamp(22px,5.3vw,38px);letter-spacing:-.055em}header .printbutton{padding:8px;width:44px;min-width:44px;height:44px}nav.mobiletabs{padding:0 12px;min-height:46px}nav.mobiletabs button{flex:0 1 180px;padding:8px 12px;min-height:46px}nav.mobiletabs button span{font-size:20px}}
@media(max-width:359px){header.precisionheader{gap:8px;padding-left:8px;padding-right:8px}header .cutsheetsbrand{grid-template-columns:65px minmax(0,1fr);gap:8px}header .cutsheetstitle{font-size:20px;padding-left:8px}nav.mobiletabs button span{font-size:18px}}
/* Refined application title: smaller, lighter lettering. */
header .cutsheetstitle{font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:clamp(23px,3.2vw,40px);letter-spacing:-.035em;text-shadow:1px 2px 2px #0006}
@media(max-width:760px){header .cutsheetstitle{font-size:clamp(19px,4.5vw,30px);font-weight:700}}
@media(max-width:359px){header .cutsheetstitle{font-size:17px}}
/* Restrained finish: clear hierarchy without heavy effects. */
header .cutsheetstitle{font-weight:600;text-shadow:none;letter-spacing:-.025em}
header .cutsheetstitle>span:last-child{background:none;-webkit-text-fill-color:#ffa51f;color:#ffa51f;filter:none;text-shadow:none}
header .printbutton{font-style:normal;font-size:16px;font-weight:650;box-shadow:none;border-width:1px;border-radius:8px}
nav.mobiletabs button:before{background:linear-gradient(#24516e,#173d59);box-shadow:none;border-color:#527c98}
nav.mobiletabs button[aria-pressed="true"]:before{background:linear-gradient(#1474b4,#09508a);border-width:1px;border-color:#ffa51f;box-shadow:none}
nav.mobiletabs button span{font-weight:700;text-shadow:none;letter-spacing:-.3px;font-size:20px}
@media(max-width:760px){header .cutsheetstitle{font-weight:600}nav.mobiletabs button span{font-size:18px}}

/* Enlarge the full logo into its surrounding blue space. */
header .fullbrandlogo{transform:scale(1.1);transform-origin:center}

/* Keep the brand banner and view tabs together while scrolling. */
.sitechrome{position:sticky;top:0;z-index:40;background:#06243c;box-shadow:0 3px 8px #061e3426}
.sitechrome nav.mobiletabs{position:relative;top:auto}
html{scroll-padding-top:calc(var(--sitechrome-height,200px) + 12px)}
#form .inputstep,#form input,#form select,#form button{scroll-margin-top:12px}

/* Workflow line and right-aligned navigation beneath Export. */
header.precisionheader{border-bottom:0;padding-bottom:10px}
header .cutsheetstitle{display:grid;grid-template-columns:max-content max-content;column-gap:.22em;row-gap:5px;align-items:center}
header .cutsheetstitle .realtime{grid-column:1/-1;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;line-height:1.2;letter-spacing:.14em;font-weight:600;font-style:normal;color:#c3dceb}
.headerbottom{display:flex;align-items:end;gap:24px;padding:0 4%;border-bottom:3px solid #ff9600;background:#06243c}
.fieldworkflow{flex:1;margin:0;padding:12px 0 14px;color:#d9e8f3;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:.025em;white-space:nowrap}
.fieldworkflow span{color:#ffa51f;padding:0 6px}
.headerbottom nav.mobiletabs{flex:0 0 400px;justify-content:flex-end;min-height:46px;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
.headerbottom nav.mobiletabs button{flex:1;min-height:46px}
@media(max-width:900px) and (min-width:761px){.headerbottom{gap:16px}.headerbottom nav.mobiletabs{flex-basis:340px}.fieldworkflow{font-size:12px}.fieldworkflow span{padding:0 3px}}
@media(max-width:760px){header .cutsheetstitle{grid-template-columns:minmax(0,1fr);row-gap:1px}header .cutsheetstitle .realtime{font-size:10px;margin-bottom:4px;letter-spacing:.1em}header.precisionheader{grid-template-columns:minmax(0,1fr) 60px;gap:10px}header .printbutton{display:flex;flex-direction:column;justify-content:center;gap:3px;width:60px;min-width:60px;height:56px;padding:5px}header .printbutton>span{display:block;font-size:10px;font-weight:600;line-height:1}header .printbutton svg{width:21px;height:21px}.headerbottom{flex-wrap:wrap;gap:0;padding:0 12px}.fieldworkflow{flex:1 0 100%;font-size:11px;line-height:1.3;padding:3px 0 10px;text-align:center}.fieldworkflow span{padding:0 3px}.headerbottom nav.mobiletabs{flex:0 1 300px;margin-left:auto;min-height:42px}.headerbottom nav.mobiletabs button{min-height:42px;padding:7px 12px}.headerbottom nav.mobiletabs button span{font-size:16px}}
@media(max-width:359px){header .cutsheetsbrand{grid-template-columns:58px minmax(0,1fr);gap:6px}header .cutsheetstitle{font-size:15px;padding-left:6px}.fieldworkflow{font-size:10px}.headerbottom nav.mobiletabs{flex-basis:270px}}
/* Orange brand accents carried into the working interface. */
:root{--accent-orange:#f59a23;--orange-soft:#fff3e3;--khaki-pale:#fff3e3}
#form .inputstep>h3{background:#fff3e3;border-left:4px solid #f59a23}
.jobdetails{background:#fff7ed;border-color:#e4bf8d}
#form>.jobdetails[open]{background:#fff7ed}
.inputs .jobdetails:not([open]){border-color:#e4a343}
.inputs .jobdetails>summary::after{color:#bd6305}
.roofchoices button[aria-pressed="true"],.tailchoices button[aria-pressed="true"],.calcmodechoices button[aria-pressed="true"]{border-color:#f59a23;box-shadow:inset 0 -3px #f59a23}
.unitcontrol{border-color:#e7c69a;border-left:4px solid #f59a23}
.presets button{background:#fff7ed;border-color:#d8b68c}
.presets button:hover,.reviewactions button:hover,#drawingzoom:hover,#framezoom:hover{background:#fff3e3;border-color:#c67515}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#b65e06}
input:focus,select:focus,textarea:focus{border-color:#b65e06;box-shadow:0 0 0 3px #f59a2326}
.flowactions .calculate,#exportpdf{background:#f59a23;color:#08263f;border-color:#d77c0d;box-shadow:none;font-weight:750}
.flowactions .calculate:hover,#exportpdf:hover{background:#ffac42}
.flowactions .calculate span{color:#08263f}
header .printbutton{border-color:#f59a23;color:#ffb64e}
header .printbutton:hover{background:#173c55}
.pitchsummary{border-left-color:#f59a23}
.drawing .sectionhead h2,.detailpanel .sectionhead h2,.framepanel .sectionhead h2{border-left:3px solid #f59a23;padding-left:10px}

/* Tabs sit over the blueprint banner, with no separate navy strip. */
header.precisionheader{padding-bottom:44px}
.sitechrome .headerbottom{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;justify-content:flex-end;align-items:end;padding:0 4%;background:transparent;border-bottom:3px solid #ff9600;gap:0;pointer-events:none}
.sitechrome .headerbottom nav.mobiletabs{margin-left:auto;pointer-events:auto;background:none}
.jobheader>div:first-child{flex:1}
.sheetbrand{gap:24px}
.sheetworkflow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;flex:1;margin:0;color:#173b54;font-size:clamp(12px,1.35vw,18px);line-height:1.6;font-weight:600;letter-spacing:.015em;text-align:center}
.sheetworkflow span{white-space:nowrap}
.sheetworkflow b{font-size:12px;font-weight:500;color:#c46b09}
@media(max-width:760px){header.precisionheader{padding-bottom:44px}.sitechrome .headerbottom{height:44px;padding:0 12px;flex-wrap:nowrap}.sheetbrand{gap:14px;width:100%}.sheetbrand img{width:72px;height:72px}.sheetworkflow{font-size:12px;gap:5px;line-height:1.8}.jobheader>div:first-child{width:100%}}

/* Compact banner, single-line mobile title, and corner export icon. */
header.precisionheader{grid-template-columns:minmax(0,1fr);padding-top:8px;padding-bottom:22px;padding-right:calc(4% + 56px)}
header .printbutton{position:absolute;top:12px;right:4%;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;gap:0}
header .printbutton svg{width:22px;height:22px}
header .printbutton>span{display:none}
@media(max-width:760px){
 header.precisionheader{grid-template-columns:minmax(0,1fr);padding:8px 60px 32px 12px;gap:0}
 header .cutsheetsbrand{grid-template-columns:68px minmax(0,1fr);width:100%;max-width:none;gap:10px}
 header .cutsheetstitle{grid-template-columns:max-content max-content;column-gap:.22em;row-gap:4px;font-size:clamp(13px,3.65vw,23px);padding:6px 0 6px 9px;white-space:nowrap;letter-spacing:-.035em}
 header .cutsheetstitle .realtime{grid-column:1/-1;margin-bottom:0;font-size:9px;letter-spacing:.1em}
 header .printbutton{top:8px;right:10px;width:44px;min-width:44px;height:44px;min-height:44px;padding:11px}
 header .printbutton svg{width:20px;height:20px}
 .sitechrome .headerbottom{height:37px;padding:0 12px}
 .sitechrome .headerbottom nav.mobiletabs{flex:0 1 250px;min-height:34px}
 .sitechrome .headerbottom nav.mobiletabs button{min-height:34px;padding:6px 10px}
 .sitechrome .headerbottom nav.mobiletabs button span{font-size:14px;line-height:1.2}
}
@media(max-width:359px){header.precisionheader{padding-left:8px;padding-right:54px}header .cutsheetsbrand{grid-template-columns:56px minmax(0,1fr);gap:6px}header .cutsheetstitle{font-size:12px;padding-left:6px}header .printbutton{right:6px}.sitechrome .headerbottom nav.mobiletabs{flex-basis:226px}}

/* Approved RafterCAD logo, replacing the composed FramerCAD mark. */
header .fullbrandlogo .raftercadheaderlogo{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}

/* Remove the introductory heading space. */
.intro{min-height:0;padding:0;margin:0}
.languagebar{margin-bottom:14px}

/* Larger phone title; desktop and tablet sizes retained. */
@media(max-width:600px){header .cutsheetstitle{font-size:clamp(16px,4.5vw,27px)}header .cutsheetstitle .realtime{font-size:11px;letter-spacing:.1em;line-height:1.3}}
@media(max-width:359px){header .cutsheetstitle{font-size:14.5px}header .cutsheetstitle .realtime{font-size:10px}}

/* Phone-only logo fills the left banner area; title shifts with its column. */
@media(max-width:600px){header.precisionheader{padding-bottom:18px}header .cutsheetsbrand{grid-template-columns:84px minmax(0,1fr);gap:10px}header .fullbrandlogo{transform:scale(1.1)}header .cutsheetstitle{padding-left:9px}}
@media(max-width:359px){header .cutsheetsbrand{grid-template-columns:68px minmax(0,1fr);gap:6px}header.precisionheader{padding-bottom:20px}header .cutsheetstitle{padding-left:6px}}

/* Pair the overhang distance with its measurement endpoint. */
.overhangpair{margin-bottom:24px}
.overhangpair:has(#overhangfield[hidden]){display:none}
.overhangpair .overhangpairhelp{font-size:12px;line-height:1.6;color:#526170;margin:8px 0 0}
@media(max-width:760px){
 #form .overhangpair{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:8px 10px;align-items:start}
 #form .overhangpair:has(#overhangfield[hidden]){display:none}
 #form .overhangpair>.field{min-width:0;margin:0}
 #form .overhangpair label{font-size:14px;line-height:1.3;min-height:37px;margin:0 0 7px;display:flex;align-items:flex-end}
 #form .overhangpair input,#form .overhangpair select{width:100%;min-width:0;height:52px;min-height:52px;font-size:16px;padding:10px 9px}
 #form .overhangpair select{font-size:16px;padding-right:24px}
 #form .overhangpairhelp{grid-column:1/-1;margin:0;font-size:12px}
}

.overhanglabelbreak{display:none}
@media(max-width:760px){.overhanglabelbreak{display:block}#form .overhangpair label{min-height:37px;align-items:flex-start}}
/* Real-proportion tail choices, using shared calculation geometry. */
.tailchoices .tailprofileicon{width:96px;height:84px;overflow:visible}
.tailprofileicon .roofwall{fill:#e7edf1;stroke:currentColor;stroke-width:.65;stroke-linejoin:miter}
.tailprofileicon .roofplane{stroke-width:.65;stroke-linejoin:miter}
.tailprofileicon .tailsubfascia{fill:#ffad42;stroke:currentColor;stroke-width:.45;stroke-linejoin:miter}
.tailchoices button[aria-pressed="true"] .roofwall{fill:#ffffff18}

/* Keep the individual cutting layout immediately after the overall roof view. */
.results .framepanel{order:4}
.results .drawing{order:5}
.results .detailpanel{order:6}
.results .reviewpanel{order:7}
.results .sheetexportbar{order:8}
.results .referencewarning{order:9}
.results .inputchecks{order:10}
.results .metrics{order:11}

/* One continuous cutting sheet, directly after the roof check. */
.results .printdiagrampage{display:block;order:5;min-width:0;background:#fff;border:1px solid #cbd3da;border-radius:13px;overflow:hidden}
.results .printdiagrampage .drawing,.results .printdiagrampage .detailpanel{border:0;border-radius:0;margin:0;background:transparent}
.results .printdiagrampage .detailpanel{border-top:1px solid #dce1e4}

/* Present the results as a single document, with continuous section dividers. */
.results{gap:0;background:#fff;border:1px solid #cbd3da;border-radius:10px;box-shadow:0 3px 14px #14283f08;overflow:hidden}
.results .panel,.results .printdiagrampage,.results .unitcontrol,.results .pitchsummary{border:0;border-radius:0;box-shadow:none;background:transparent;margin:0}
.results .jobheader{padding:24px;border-bottom:2px solid #f59a23}
.results .pitchsummary{padding:20px 24px 12px;font-size:16px}
.results .unitcontrol{padding:12px 24px 24px}
.results .framepanel,.results .printdiagrampage,.results .reviewpanel,.results .inputrecap,.results .formulas,.results .validation,.results .disclaimer,.results .inputchecks{border-top:1px solid #dce1e4}
.results .framepanel,.results .drawing,.results .detailpanel,.results .reviewpanel,.results .inputrecap,.results .formulas,.results .validation,.results .disclaimer,.results .inputchecks{padding:24px}
.results .printdiagrampage .drawing,.results .printdiagrampage .detailpanel{padding:24px}
.results .sheetexportbar{margin:0;padding:20px 24px;border-top:1px solid #dce1e4}
.results .referencewarning{margin:0;padding:16px 24px}
.results .sectionhead h2{font-size:20px;line-height:1.3}
@media(max-width:760px){
 .results{border-radius:8px}
 .results .jobheader,.results .framepanel,.results .reviewpanel,.results .inputrecap,.results .formulas,.results .validation,.results .disclaimer,.results .inputchecks,.results .printdiagrampage .drawing,.results .printdiagrampage .detailpanel{padding:20px 14px}
 .results .pitchsummary{padding:18px 14px 10px}
 .results .unitcontrol{padding:10px 14px 20px}
 .results .sheetexportbar,.results .referencewarning{padding:18px 14px}
 .results .sectionhead h2{font-size:19px}
}

/* The selected tab outlines its complete working document. */
.workspace>.setup{border-radius:10px}
body[data-mobile-view="setup"] .workspace>.setup,
body[data-mobile-view="sheet"] .workspace>.results{outline:4px solid #1474b4;outline-offset:0;box-shadow:0 0 0 6px #ffa51f,0 5px 16px #09508a26}