/* Material calculator pages and the /calculators hub (26 Oct 2026). Loads after home-night.css and uses its body.night tokens. */
.c-hero{padding:56px 0 26px}
.c-crumb{font-size:13.5px;color:var(--n-mut);margin-bottom:18px}
.c-crumb a{color:var(--n-mut)} .c-crumb a:hover{color:var(--n-ink)}
.c-hero h1{font-size:clamp(32px,4vw,52px);line-height:1.05;margin:12px 0 14px;text-wrap:balance}
.c-hero p{color:var(--n-mut);font-size:18px;max-width:700px;margin:0}
.c-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;align-items:start;padding-bottom:70px}
.c-card{padding:24px}
.c-sec{font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--n-mut);margin:18px 0 8px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.c-sec:first-child{margin-top:0}
.c-hint{font:500 12.5px Inter,sans-serif;letter-spacing:0;text-transform:none;color:var(--n-mut);opacity:.8}
.c-mats,.c-depths{display:flex;flex-wrap:wrap;gap:6px;align-items:end}
.c-b{display:flex;flex-direction:column;align-items:flex-start;gap:1px;font:600 14px Inter,sans-serif;padding:9px 12px 9px 34px;border-radius:10px;border:1px solid var(--n-line);background:var(--n-glass2);color:var(--n-ink2);cursor:pointer;position:relative;text-align:left}
.c-b small{font:500 11.5px Inter,sans-serif;color:var(--n-mut)}
.c-b::before{content:'';position:absolute;left:11px;top:11px;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--n-mut);opacity:.7}
.c-b[aria-pressed="true"]{border-color:var(--n-c);background:rgba(59,232,255,.08);color:var(--n-ink)}
.c-b[aria-pressed="true"]::before{opacity:1;border-color:var(--n-c);background:var(--n-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2303121A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.c-row{display:grid;grid-template-columns:1.2fr 1fr 1fr auto 28px;gap:8px;align-items:end;margin-bottom:8px}
.c-f{display:grid;gap:4px;min-width:0}
.c-f span{font:600 11.5px Inter,sans-serif;color:var(--n-mut)}
.c-f input,.c-f select{width:100%;min-width:0;font:600 16px "JetBrains Mono",monospace;color:var(--n-ink);background:var(--n-bg);border:1px solid var(--n-line);border-radius:9px;padding:9px 10px}
.c-f select{font-family:Inter,sans-serif;font-size:15px}
.c-f input:focus,.c-f select:focus{outline:none;border-color:var(--n-c)}
.c-gap{visibility:hidden}
.c-sf{font:700 13px "JetBrains Mono",monospace;color:var(--n-cT);white-space:nowrap;padding-bottom:11px}
.c-x{width:28px;height:38px;border:0;border-radius:8px;background:none;color:var(--n-mut);font-size:20px;cursor:pointer}
.c-x:hover{color:var(--n-ink);background:var(--n-glass2)}
.c-add{border:1px dashed var(--n-line);background:none;color:var(--n-cT);font:600 13.5px Inter,sans-serif;border-radius:9px;padding:8px 12px;cursor:pointer}
.c-dother{width:110px}
.c-out{margin-top:22px;padding:20px;border-radius:16px;background:var(--n-bg);border:1px solid var(--n-line)}
.c-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--n-line)}
.c-big b{font:800 46px/1 Sora,sans-serif;letter-spacing:-.04em;color:var(--n-cT)}
html:not([data-mode="light"]) .c-big b{text-shadow:0 0 22px rgba(59,232,255,.35)}
.c-big span{font:600 15px Inter,sans-serif;color:var(--n-mut)}
.c-lines{display:grid;margin-top:6px}
.c-lines div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--n-line);font-size:14.5px;color:var(--n-mut)}
.c-lines b{font:600 14.5px "JetBrains Mono",monospace;color:var(--n-ink);text-align:right}
.c-price{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:14px;color:var(--n-mut)}
.c-price b{font:700 15px "JetBrains Mono",monospace;color:var(--n-amT)}
.c-note{margin:12px 0 0;font-size:13.5px;color:var(--n-mut)}
.c-go{margin-top:18px}
.c-fine{font-size:13px;color:var(--n-mut);margin:10px 0 0}
.c-side{display:grid;gap:16px}
.c-side .n-box{padding:22px}
.c-side h2{font-size:19px;margin:0 0 8px}
.c-side p,.c-side li{font-size:14.5px;color:var(--n-mut);margin:0}
.c-side ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.c-side code{font:600 13px "JetBrains Mono",monospace;color:var(--n-ink2);background:var(--n-bg);border:1px solid var(--n-line);border-radius:6px;padding:2px 6px}
.c-faq{padding-bottom:60px}
.c-faq h2{font-size:clamp(26px,2.6vw,34px);margin:0 0 16px}
.c-faq details{border-top:1px solid var(--n-line);padding:14px 0}
.c-faq summary{cursor:pointer;font:600 16.5px Inter,sans-serif;color:var(--n-ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::after{content:'+';color:var(--n-cT);font-weight:700}
.c-faq details[open] summary::after{content:'–'}
.c-faq details p{margin:10px 0 0;color:var(--n-mut);font-size:15.5px;max-width:820px}
.c-more{padding-bottom:90px}
.c-more h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 16px}
/* "Not sure of the size?" (27 Oct, choice A): the words to one side, a sample yard traced in cyan beside them.
   The line is the homepage's n-ln / nDraw, drawn once when the picture scrolls into view (.arm hides it, .on draws it);
   a stroke-dashoffset animation on two paths, no filters, so it stays light on the GPU. */
.c-measure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:40px;position:relative;overflow:hidden}
.c-measure::before{content:'';position:absolute;inset:-40%;background:radial-gradient(circle at 75% 60%,rgba(59,232,255,.16),transparent 50%);pointer-events:none}
.c-measure>*{position:relative}
.c-mtext .n-sub{margin:14px 0 0}
.c-mtext .n-btnrow{margin-top:26px}
.c-trace{margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--n-line);background:#04070F url(home/calc-yard-800.webp) center/cover no-repeat}
html[data-mode="light"] .c-trace{background-color:#F3F6FB;background-image:url(home/calc-yard-lite-800.webp)}
.c-trace svg{display:block;width:100%;height:100%}
.c-trace .n-ln{stroke:var(--n-c);stroke-width:3;stroke-dasharray:1000;stroke-dashoffset:0;animation:none;filter:none}
.c-trace .c-glow{stroke-width:10;opacity:.28}
.c-trace .c-pop circle{fill:#fff;stroke:var(--n-c);stroke-width:2.5}
.c-trace .c-tag rect{fill:rgba(4,10,20,.86);stroke:var(--n-c)}
.c-trace .c-tag text{font:700 13px "JetBrains Mono",monospace;fill:#BFF6FF}
@media (max-width:600px){.c-trace .c-tag{transform-box:view-box;transform-origin:314px 277px;transform:scale(1.55)}}
.c-trace.arm .n-ln{stroke-dashoffset:1000}
.c-trace.arm .c-pop{opacity:0;transition:opacity .5s}
.c-trace.on .n-ln{animation:nDraw 2.4s cubic-bezier(.6,.1,.2,1) .2s forwards}
.c-trace.on .c-pop{opacity:1;transition-delay:2.5s}
@media (prefers-reduced-motion:reduce){
  .c-trace.arm .n-ln,.c-trace.on .n-ln{animation:none;stroke-dashoffset:0}
  .c-trace.arm .c-pop{opacity:1;transition:none}
}
@media (max-width:860px){.c-measure{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}}
@media (max-width:1000px){.c-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .c-row{grid-template-columns:1fr 1fr;padding:10px;border:1px solid var(--n-line);border-radius:12px}
  .c-row .c-f:first-child{grid-column:1/-1}
  .c-sf{padding-bottom:0}
  .c-card{padding:16px}
  .c-big b{font-size:38px}
}