/* Shared tokens, layout, controls and reusable components.
 * Page compositions: home.css, design-templates.css, error-state.css.
 * Gallery examples: design-gallery.css. Print contract: print.css. */

:root,[data-theme="light"] {
 color-scheme:light;
 --canvas:#f6f7f2;--surface:#fff;--surface-soft:#edf2ec;--ink:#142e35;
 --muted:#4c6267;--subtle:#d8e2db;--border:#c1cec7;--input-border:#6b8179;
 --accent:#17614c;--accent-hover:#104a39;--on-accent:#fff;
 --accent-soft:#e4efe6;--accent-ink:#17513e;--focus:#7540b5;
 --navy:#132f37;--on-navy:#f6faf5;--on-navy-muted:#c8d7d6;
 --warning-bg:#fff0d8;--warning-ink:#704400;--danger-bg:#fbe8e2;--danger-ink:#8c3324;
 --fair-bg:#f1eddd;--fair-ink:#67501c;--brand-mark-ink:#f6f7f2;
 --shadow:0 12px 40px #17362b0a;--shadow-raised:0 18px 50px #17362b12;
 --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --text-xs:.8125rem;--text-sm:.9375rem;--text-base:1rem;--text-md:1.125rem;
 --text-lg:clamp(1.25rem,1.1rem + .65vw,1.5rem);
 --text-xl:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);
 --text-2xl:clamp(2.25rem,1.7rem + 2.3vw,3.75rem);
 --text-display:clamp(2.625rem,1.5rem + 4.4vw,5.25rem);
 --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
 --space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;
 --radius-sm:.5rem;--radius:1rem;--radius-lg:1.5rem;--radius-pill:999px;
 --content:72rem;--measure:70ch;
}
@media(prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) {
  color-scheme:dark;--canvas:#101e24;--surface:#172b32;--surface-soft:#20373c;
  --ink:#edf4ef;--muted:#b6c7c9;--subtle:#2b454b;--border:#496169;--input-border:#8aa4a7;
  --accent:#a8dfbd;--accent-hover:#c5efd3;--on-accent:#123c2d;
  --accent-soft:#25493a;--accent-ink:#c1e9cc;--focus:#d5b2ff;
  --navy:#0b171c;--on-navy:#f6faf5;--on-navy-muted:#c8d7d6;
  --warning-bg:#423719;--warning-ink:#ffe0a4;--danger-bg:#482b28;--danger-ink:#ffc8ba;
  --fair-bg:#3c3726;--fair-ink:#eddbac;--brand-mark-ink:#123c2d;
  --shadow:0 12px 40px #00000015;--shadow-raised:0 18px 50px #00000025;
 }
}
[data-theme="dark"] {
 color-scheme:dark;--canvas:#101e24;--surface:#172b32;--surface-soft:#20373c;
 --ink:#edf4ef;--muted:#b6c7c9;--subtle:#2b454b;--border:#496169;--input-border:#8aa4a7;
 --accent:#a8dfbd;--accent-hover:#c5efd3;--on-accent:#123c2d;
 --accent-soft:#25493a;--accent-ink:#c1e9cc;--focus:#d5b2ff;
 --navy:#0b171c;--on-navy:#f6faf5;--on-navy-muted:#c8d7d6;
 --warning-bg:#423719;--warning-ink:#ffe0a4;--danger-bg:#482b28;--danger-ink:#ffc8ba;
 --fair-bg:#3c3726;--fair-ink:#eddbac;--brand-mark-ink:#123c2d;
 --shadow:0 12px 40px #00000015;--shadow-raised:0 18px 50px #00000025;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:1.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:var(--text-base)/1.6 var(--font)}
body,input,button,select,textarea{font-family:var(--font)}
h1,h2,h3,h4,p,ul,ol,dl,figure,fieldset{margin:0}
h1,h2,h3,h4{line-height:1.12;font-weight:740;letter-spacing:-.035em;overflow-wrap:break-word}
h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4{font-size:var(--text-md)}
/* Keep the quote form's existing title size in standalone and embedded contexts. */
#shipping-quote-title{font-size:var(--text-xl)}
p,li,dd,a,label,summary{overflow-wrap:break-word}
p{max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:.075em}
a:hover{text-decoration-thickness:.13em}button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
button{cursor:pointer}button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[tabindex="-1"]:focus:not(:focus-visible){outline:0}
img,svg{max-width:100%}svg{flex-shrink:0}img{height:auto}input,select,textarea{min-width:0;max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}
.container{width:min(calc(100% - 2.5rem),var(--content));margin-inline:auto}
.section{padding-block:var(--space-7)}
.site-main{min-height:50vh}.stack>*+*{margin-top:var(--space-5)}
.cluster,.actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.grid-2{display:grid;gap:var(--space-5)}.grid-2>*{min-width:0}
.fine,.microcopy,.field-help{font-size:var(--text-sm);color:var(--muted);line-height:1.55}
.muted{color:var(--muted)}.text-accent{color:var(--accent)}
.eyebrow{font-size:var(--text-xs);font-weight:750;letter-spacing:.11em;text-transform:uppercase;line-height:1.5;color:var(--accent)}
.icon{width:1.5rem;height:1.5rem;vertical-align:middle}.status-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:currentColor;margin-right:.5rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-10rem;z-index:100;padding:1rem;background:var(--surface);border:2px solid var(--focus);border-radius:var(--radius-sm)}
.skip:focus{top:1rem}
.site-header{border-bottom:1px solid var(--subtle);background:var(--canvas)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:1.25rem;position:relative}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font-size:1rem;font-weight:550;letter-spacing:-.035em;line-height:1.15;flex-shrink:1}
.brand>span{min-width:0}.brand strong{font-weight:800}.brand small{display:block;color:var(--muted);font-size:.6875rem;letter-spacing:.01em;margin-top:.4rem;font-weight:550}
.brand-mark{width:2.5rem;height:2.5rem;color:var(--accent)}
.desktop-nav{display:none}.mobile-nav{flex-shrink:0}.mobile-nav summary{display:flex;gap:.4rem;align-items:center;min-height:44px;padding:.5rem .2rem;cursor:pointer;list-style:none;font-size:var(--text-sm);font-weight:700}
.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary svg{width:1.25rem;height:1.25rem}
/* The open disclosure takes a full row so later keyboard stops stay below it. */
.mobile-nav[open]{flex-basis:100%;min-width:0}
.mobile-nav[open] summary{color:var(--accent);justify-content:flex-end}
.mobile-nav:not([open]) nav{display:none}
.mobile-nav nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-raised);padding:.5rem;display:grid}
.mobile-nav nav a{scroll-margin-block:var(--space-2);padding:.8rem 1rem;color:var(--ink);font-weight:650;text-decoration:none;border-radius:var(--radius-sm)}
.mobile-nav nav a:hover{background:var(--surface-soft)}
/* Keep the safe flex disclosure as the fallback. Only browsers with the native
 * content wrapper can share the header grid without overlaying the brand. */
@supports selector(::details-content){
 .site-header{container-type:inline-size}
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:0 var(--space-4)}
 .header-inner>.brand{grid-area:1/1;z-index:1;justify-self:start}
 .mobile-nav{grid-area:1/1/3/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;min-width:0}
 .mobile-nav summary{grid-area:1/2;position:relative;z-index:2}
 .mobile-nav::details-content{grid-area:2/1/3/3}
 .mobile-nav nav{margin-top:var(--space-4)}
 @container (width < 18rem){
  .header-inner>.brand{grid-column:1/-1}
  .mobile-nav{grid-row:1/4}
  .mobile-nav summary{grid-row:2;margin-top:var(--space-4)}
  .mobile-nav::details-content{grid-row:3}
 }
 @media(min-width:60rem){
  .header-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4)}
 }
}
.button{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;min-width:0;max-width:100%;min-height:3.125rem;padding:.8rem min(1.25rem,5vw);border:1px solid transparent;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font-size:var(--text-sm);line-height:1.35;font-weight:720;text-decoration:none;text-align:center;white-space:normal;overflow-wrap:anywhere}
.button:hover{background:var(--accent-hover);text-decoration:none}.button .icon{width:1.125rem;height:1.125rem}
.button-secondary{background:transparent;border-color:var(--input-border);color:var(--ink)}
.button-secondary:hover{background:var(--surface-soft)}
.button-quiet{background:transparent;color:var(--accent);padding-inline:.5rem}
.button-quiet:hover{background:var(--accent-soft)}
.button:disabled,.button[aria-disabled="true"]{background:var(--surface-soft);color:var(--muted);border-color:var(--border);box-shadow:none}
.text-link{display:inline-flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;font-size:var(--text-sm);font-weight:720;min-height:44px;max-width:100%}
.text-link span{flex-shrink:0}
.site-footer{border-top:1px solid var(--subtle);margin-top:var(--space-7);padding-block:var(--space-7) var(--space-6);background:var(--surface)}
.footer-grid{display:grid;gap:var(--space-6)}.footer-brand{display:inline-flex;gap:.7rem;align-items:center;color:var(--ink);font-weight:800;font-size:1.125rem;text-decoration:none;letter-spacing:-.025em}
.brand-dot{color:var(--accent);font-size:1.5rem}.footer-grid p{font-size:var(--text-xs);color:var(--muted);margin-top:.75rem}
.footer-grid h2{font-size:var(--text-xs);font-weight:750;letter-spacing:.02em;margin-bottom:var(--space-4);line-height:1.5}
.footer-grid nav a{display:block;width:fit-content;min-height:44px;color:var(--muted);font-size:var(--text-sm)}
.disclosures{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--subtle);color:var(--muted);font-size:var(--text-xs)}.disclosures p+p{margin-top:.5rem}

/* Forms and calculator shells: errors are explicit text, never just a color. */
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0}.field>label,.field-label,legend{font-size:var(--text-sm);font-weight:700;line-height:1.5}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;min-height:3.125rem;border:1px solid var(--input-border);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:.7rem .85rem;line-height:1.45}
textarea{resize:vertical;min-height:7rem}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* Let long native options wrap: WebKit otherwise leaks their nowrap width beyond narrow fields. */
select{white-space:normal}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-soft);color:var(--muted);opacity:1}
[aria-invalid="true"]{border-color:var(--danger-ink)!important;box-shadow:0 0 0 1px var(--danger-ink)}
.field-error{font-size:var(--text-sm);color:var(--danger-ink);font-weight:600;line-height:1.5}
fieldset{padding:0;border:0;min-width:0}legend{margin-bottom:.75rem}
.choice{display:flex;align-items:flex-start;gap:.75rem;font-size:var(--text-sm);min-height:44px;padding-block:.6rem}
.choice>span{min-width:0}
.shipping-quote .choice{max-width:var(--measure)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);width:1.25rem;height:1.25rem;flex-shrink:0;margin:.1rem 0 0}
.segmented{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-soft)}
.segmented label{position:relative;flex:1;min-width:5rem;text-align:center;cursor:pointer;font-size:var(--text-sm);font-weight:650}
.segmented input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;margin:0}
.segmented span{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem .75rem;border:1px solid transparent;border-radius:.35rem}
.segmented input:checked+span{background:var(--surface);border-color:var(--input-border);color:var(--accent-ink)}
.segmented input:checked+span::before{content:"";width:.45rem;height:.75rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-.2rem;flex-shrink:0}.segmented input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.calculator-layout{display:grid;align-items:start;gap:var(--space-5)}.calculator-layout>*{min-width:0}
.form-panel{background:var(--surface);border:1px solid var(--border);padding:var(--space-5);border-radius:var(--radius)}
.form-panel h2,.form-panel h3{font-size:1.25rem;margin-bottom:var(--space-5)}
.result-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:var(--space-5);box-shadow:var(--shadow)}
.result-card .eyebrow{margin-bottom:.75rem}.result-label{font-size:var(--text-sm);font-weight:700}
.result-value{font-size:clamp(2.25rem,2rem + 1.5vw,3.5rem);line-height:1.15;letter-spacing:-.05em;font-weight:750;font-variant-numeric:tabular-nums;margin-block:.5rem}
.result-value small{font-size:1rem;font-weight:550;color:var(--muted);letter-spacing:0}
.result-lines{margin-block:var(--space-5)}.result-lines>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem var(--space-4);padding-block:.75rem;border-top:1px solid var(--subtle);font-size:var(--text-sm)}
.result-lines dt{color:var(--muted);min-width:0;flex:1 1 10rem}.result-lines dd{margin:0 0 0 auto;max-width:100%;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}.result-card .button{width:100%}
.callout{padding:var(--space-5);border:1px solid currentColor;border-left-width:4px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-ink)}
/* Notice hierarchy stays compact regardless of its semantic heading level.
 * Explicit result labels keep their own, smaller worksheet treatment. */
.callout :is(h2,h3,h4):not(.result-label){font-size:var(--text-base);line-height:1.45;letter-spacing:-.01em;margin-block:0 .5rem}.callout p{font-size:var(--text-sm)}
.callout--trick{background:var(--danger-bg);color:var(--danger-ink)}.callout--watch{background:var(--warning-bg);color:var(--warning-ink)}
.table-wrap{max-width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}caption{text-align:left;padding:var(--space-5);font-weight:700;font-size:var(--text-base)}
th,td{text-align:left;padding:.9rem 1rem;border-top:1px solid var(--subtle);overflow-wrap:anywhere}
th{font-size:var(--text-xs);background:var(--surface-soft);font-weight:750;vertical-align:bottom}td{vertical-align:top}
.num{text-align:right;font-variant-numeric:tabular-nums}.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}.faq summary{padding:1.1rem 1.5rem 1.1rem 0;cursor:pointer;font-weight:650;line-height:1.5}.faq details>div{padding:0 0 var(--space-5);color:var(--muted);font-size:var(--text-sm)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem .75rem;list-style:none;padding:0;color:var(--muted);font-size:var(--text-xs)}
.breadcrumbs li+li::before{content:"/";margin-right:.75rem}.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.page-heading{padding-block:var(--space-7);max-width:52rem}.page-heading h1{margin-block:var(--space-4)}.page-heading>p:not(.eyebrow){color:var(--muted);font-size:var(--text-md)}
@media(min-width:40rem){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:60rem){
 .header-inner{padding-block:1.5rem}.brand{font-size:1.125rem}.brand small{font-size:.6875rem}
 .desktop-nav{display:flex;align-items:center;gap:1.75rem}.desktop-nav>a{font-size:var(--text-sm);font-weight:650;text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}.desktop-nav>a:hover{text-decoration:underline}.desktop-nav>.button{font-size:var(--text-xs);min-height:44px}
 .mobile-nav{display:none}
 .section{padding-block:var(--space-8)}

 .calculator-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-6)}

}
/* A tall contents panel must scroll its focused links inside the viewport. */
@media(min-width:60rem) and (min-height:48rem){
 .calculator-results{position:sticky;top:var(--space-5)}

}
@media(max-width:25rem){.brand small{display:none}.brand{font-size:.9rem;gap:.5rem}.brand-mark{width:2rem;height:2rem}.container{width:calc(100% - 2rem)}.disclosure-panel{flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.button{transition:background-color .15s ease}.tool-card{transition:border-color .15s ease}.tool-card:focus-within{border-color:var(--accent)}}
@media(forced-colors:active){.button,.icon-tile{border:1px solid ButtonText}.brand-mark{forced-color-adjust:none}.status-dot{background:CanvasText}}
/* Print styles follow in print.css so a printed result never inherits dark ink. */

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(forced-colors:active){.segmented span{border:1px solid ButtonText}}