/* ThermoCraft forms, the sample tray and the contact page, on the v3 tokens (October 6, 2026). Loaded by pages
   with forms. One added token: error red. Headings follow the one scale: section heads use .h2, everything
   inside a form or card is the sans h3. */
:root{--error:#a12a1b}

/* Fields */
.form{display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label,.field legend{font-weight:600;font-size:.9375rem}
.field .hint{font-size:.8125rem;color:var(--c-grey)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;font:16px var(--f-sans);color:var(--c-ink);background:#fff;border:1px solid var(--c-line-strong);border-radius:var(--radius);transition:border-color var(--d-quick) var(--ease-swift)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--c-ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-bronze);outline-offset:1px;border-color:var(--c-ink)}
.form-row{display:grid;gap:18px}
@media (min-width:700px){.form-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:.8125rem;color:var(--c-grey)}
.form-sub{font:600 var(--t-h3)/1.3 var(--f-sans)}
.submit-row{margin-top:6px}
.confirm{border-left:2px solid var(--c-bronze);padding:24px;background:rgba(23,23,23,.05)}
.dark .confirm{background:rgba(237,235,231,.06)}
.confirm[hidden]{display:none}

/* Author display rules beat [hidden]; restore it for everything these pages toggle */
form[hidden],.error-summary[hidden],.field-error[hidden],.tray-list[hidden],.tray-empty[hidden],[data-tray-more][hidden]{display:none!important}

/* Field furniture */
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field legend{padding:0;margin:0 0 6px}
.field .hint{margin:-2px 0 0}
fieldset.field > .hint{margin:0 0 8px}
.req{font-weight:400;font-size:13px;color:var(--c-grey);margin-left:4px;white-space:nowrap}
.field select{-webkit-appearance:none;appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center/14px 9px;cursor:pointer}
.field textarea{min-height:140px}
.form-sub{font-size:clamp(26px,2.4vw,32px);margin:14px 0 0;padding-top:22px;border-top:1px solid var(--c-line)}
.form-sub:first-of-type{margin-top:0;padding-top:0;border-top:0}
.qty-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}

/* Checkbox tiles: the whole tile is the label, 48 px minimum */
.choices{display:grid;gap:10px}
@media (min-width:560px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choices-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.choices-compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
.field .choices-compact .choice{padding:12px 10px;gap:10px;font-size:15px}
.choice strong,.choice small{overflow-wrap:anywhere}
.field .choice{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 14px;background:#fff;border:1px solid var(--c-line-strong);border-radius:var(--radius);cursor:pointer;font-weight:400;font-size:16px;line-height:1.35}
.field .choice input[type=checkbox]{flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;accent-color:var(--c-ink);cursor:pointer}
.field .choice input[type=checkbox]:focus{outline:none}
.choice strong{display:block;font-weight:600}
.choice small{display:block;font-size:13.5px;color:var(--c-grey);margin-top:2px}
.choice:has(input:checked){border-color:var(--c-ink);background:#f1eee8;box-shadow:inset 0 0 0 1px var(--c-ink)}
.choice:has(input:focus-visible){outline:3px solid var(--c-bronze);outline-offset:2px;border-color:var(--c-ink)}
.choice-single{max-width:640px}

/* Errors */
.field-error{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--error);font-weight:600;font-size:14.5px;line-height:1.4}
.field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--error);color:#fff;font-size:13px;line-height:1}
.field.has-error{border-left:3px solid var(--error);padding-left:13px}
.has-error > input,.has-error > select,.has-error > textarea,.has-error .qty-row input,.has-error .choice{border-color:var(--error)}
.has-error > input,.has-error > select,.has-error > textarea{border-width:2px}
.error-summary{background:#fff;border:3px solid var(--error);padding:18px 20px}
.error-summary h2{font:700 19px/1.3 var(--f-sans);letter-spacing:0;margin:0 0 8px}
.error-summary h2:focus{outline:none}
.error-summary ul{margin:0;padding-left:20px}
.error-summary li{margin:4px 0}
.error-summary a{color:var(--error);font-weight:600}

/* Submit row, notes and confirmation */
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:6px}
.submit-row .btn{min-width:220px}
.review-note{margin:0;font-size:13.5px;color:var(--c-grey)}
.review-note::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-bronze);margin-right:8px;vertical-align:1px}
.form-note{margin:0}
.confirm h2,.confirm h3{font:600 var(--t-h3)/1.3 var(--f-sans);margin-bottom:.4em}
.confirm h2:focus{outline:2px solid var(--c-bronze);outline-offset:6px}
.confirm h2:focus:not(:focus-visible){outline:none}
.confirm p{margin:0 0 12px}
.confirm .actions{margin-top:20px}

/* Samples page */
.req-layout{display:grid;gap:clamp(28px,4vw,48px);grid-template-areas:"tray" "next" "form"}
.req-layout > .tray{grid-area:tray}
.req-layout > .next-steps{grid-area:next}
.req-layout > .req-form{grid-area:form}
@media (min-width:960px){
  .req-layout{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"tray next" "form next";column-gap:clamp(40px,5vw,72px)}
  .req-layout > .next-steps{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
}
.tray{background:rgba(23,23,23,.05);padding:clamp(18px,3vw,32px)}
.tray-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-bottom:16px}
.tray-head h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0}
.tray-head h2:focus{outline:none}
.tray-n{font:600 13px/1 var(--f-sans);letter-spacing:.02em;background:var(--c-ink);color:var(--c-bone);padding:6px 10px;border-radius:13px}
.tray-n:empty{display:none}
.tray-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:700px){.tray-list{grid-template-columns:1fr 1fr}}
.tray-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--c-bone);border:1px solid var(--c-line);padding:8px 10px 8px 8px}
.tray-thumb{display:block;width:64px;height:64px;background:#d3cec6;overflow:hidden}
.tray-thumb img{width:100%;height:100%;object-fit:cover}
.tray-species{display:block;font-weight:600;font-size:1rem;line-height:1.25}
.tray-surface{display:block;font-size:14px;line-height:1.35;color:var(--c-grey)}
.tray-remove{min-height:48px;padding:8px 14px;background:transparent;border:1.5px solid var(--c-ink);border-radius:var(--radius);font:600 14px var(--f-sans);color:var(--c-ink);cursor:pointer}
.tray-remove:hover{background:var(--c-ink);color:var(--c-bone)}
@media (max-width:420px){.tray-item{grid-template-columns:56px minmax(0,1fr) auto;gap:10px}.tray-thumb{width:56px;height:56px}.tray-remove{padding:8px 10px}}
.tray-empty p{margin:0 0 14px}
.tray-empty .btn{margin-bottom:14px}
.tray-more{font-size:15px}
.next-steps{border-top:1px solid var(--c-ink);padding-top:20px}
.next-steps h2{font:600 var(--t-h3)/1.3 var(--f-sans);margin-bottom:var(--s-4)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:16px}
.steps li{counter-increment:step;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline}
.steps li::before{content:"0" counter(step);font:600 .8125rem/1.6 var(--f-sans);letter-spacing:.08em;color:var(--c-bronze)}
.steps p{margin:0}
.flush-top{padding-top:0}

/* Contact page */
.contact-layout{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:960px){
  .contact-layout{grid-template-columns:340px minmax(0,1fr)}
  .contact-aside{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
}
.contact-aside{display:grid;gap:18px;align-content:start}
.contact-card{background:rgba(23,23,23,.05);padding:clamp(20px,3vw,30px)}
.contact-card h2{font:600 var(--t-h3)/1.3 var(--f-sans);margin:var(--s-3) 0 var(--s-3)}
.contact-card address{font-style:normal;margin:0 0 18px}
.contact-card .contact-phone{font:600 var(--t-h3)/1.3 var(--f-sans);margin:0 0 4px}
.contact-card .contact-email{font:600 1.0625rem/1.4 var(--f-sans);margin:0 0 12px}
.contact-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:0 0 18px;font-size:15px}
.contact-dl dt{font-weight:600;color:var(--c-grey)}
.contact-dl dd{margin:0;min-width:0}
.placeholder{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.op-line{font-size:14px;color:var(--c-grey);border-top:1px solid var(--c-line);padding-top:14px;margin:0}
.aside-note{border-top:1px solid var(--c-ink);padding-top:16px}
.aside-note h2{font:600 var(--t-h3)/1.3 var(--f-sans);margin-bottom:6px}
.aside-note p{font-size:.9375rem;margin-bottom:var(--s-3)}