/* 0019 layout only. Type, controls, colours and focus use owner-portfolio/style.css. */
html{scroll-padding-top:24px}
main{max-width:1080px}
.top-nav{align-items:center;justify-content:space-between;padding:4px 0 22px;border-bottom:1px solid #bac9ce}
.top-nav a{display:inline-flex;align-items:center;min-height:44px}
.brand{font-size:1.4rem;font-weight:850;letter-spacing:-.04em;color:#172b34;text-decoration:none}.brand span{color:#075b68}
.intro{padding:32px 0 0;max-width:850px}.intro .eyebrow{margin:0 0 12px}
.intro h1{margin:0 0 12px;font-size:clamp(1.75rem,4vw,2.6rem)}
.lead{font-size:clamp(1.18rem,2.5vw,1.4rem);line-height:1.65;margin:0 0 16px}
.intro-actions{align-items:center;margin:24px 0 14px}
.start-link{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:10px 18px;border:1px solid #075b68;border-radius:6px;background:#075b68;color:white;font-weight:700;text-decoration:none}
.help{margin:20px 0 28px;border-top:1px solid #bac9ce;border-bottom:1px solid #bac9ce}
summary{cursor:pointer;font-weight:650;min-height:48px;padding:12px 0}
.help div{padding:0 0 14px}.help p{margin:10px 0}.help ol{padding-left:1.5em}
.section-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.section-heading h2{margin:0 0 4px}.step{display:inline-grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid #bac9ce;border-radius:50%;color:#075b68;font-weight:750;background:#f2f5f5}
#rows fieldset{margin:24px 0;padding:24px;background:#fafcfc}
#rows legend{padding:0 8px}#rows fieldset button{margin-top:18px}
#rows input:disabled,#rows select:disabled{background:#f2f5f5;color:#425862;border-color:#bac9ce}
.form-actions{justify-content:space-between;align-items:center}.form-actions button{min-width:160px}
.status:empty{min-height:0;margin:0}.status{overflow-wrap:anywhere}
.empty-note{padding:24px;background:#f2f5f5;border-radius:8px;color:#425862}
.outfit-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.outfit-head h3{margin:0;font-size:1.2rem}.total{font-size:clamp(1.7rem,4vw,2.1rem);font-weight:750;margin:8px 0;line-height:1.4}
.budget-note{margin:0 0 20px;color:#425862}
.outfit-items{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.outfit-items li{padding:18px;border:1px solid #bac9ce;border-radius:8px;overflow-wrap:anywhere}
.item-kind{color:#425862}.item-name{display:block;font-weight:750;margin:6px 0}.item-detail{display:block}.item-price{display:block;margin-top:10px;font-weight:700}
#outfit-summary{overflow-wrap:anywhere}#outfit-summary p{max-width:75ch}
#result-details{margin-top:24px;border-top:1px solid #bac9ce}#result-details label{margin:8px 0 0}
.edit-link{display:inline-flex;align-items:center;min-height:46px;padding:8px 0}
.draft-section h2{margin-top:0}.draft-section .hint{margin-top:14px}.reset-area{margin-top:24px;padding-top:20px;border-top:1px solid #bac9ce}
footer{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}footer a{display:inline-flex;align-items:center;min-height:44px}
.skip-link{position:absolute;left:12px;top:-100px;padding:12px;background:white;z-index:10}.skip-link:focus{top:12px}
@media(max-width:600px){.intro{padding-top:24px}.desktop-break{display:none}.section-heading{gap:12px}.outfit-items{grid-template-columns:1fr}.form-actions{align-items:stretch}.form-actions button{flex:1 1 150px}#rows fieldset{padding:16px}.intro-actions>*{flex:1 1 auto}.draft-section .actions button{width:100%}}