/* ==========================================================================
   Concrete Calculator Hub — supplemental stylesheet
   Tailwind (CDN, configured to DESIGN.md tokens) handles layout/utility
   classes on every page. This file covers only what Tailwind utilities
   can't express cleanly: accordion animation, focus rings, print, etc.
   ========================================================================== */

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; background: #F4F4F5; }
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: 20px; line-height: 1; vertical-align: middle;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 4px; }

/* Focus state: crisp orange box, no blur */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid #C2410C;
  outline-offset: 1px;
}

/* FAQ accordion */
.faq-content { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.faq-item.open .faq-content { max-height: 600px; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .18s ease; }

/* Shape selector active state (JS toggles this class) */
.shape-btn.is-active { background: #FFF7ED; border: 2px solid #18181B; }
.shape-btn.is-active .shape-icon { background: #C2410C; color: #fff; }
.shape-btn { border: 1px solid transparent; }

/* Waste chip active state */
.waste-chip.is-active { background: #C2410C; color: #fff; font-weight: 700; }

/* Preset chip active */
.preset-chip.is-active { border: 2px solid #18181B; background: #FFF7ED; }

/* Field group visibility toggle */
[data-fields-for].is-hidden, [data-diagram-for].is-hidden { display: none !important; }

/* Mobile nav */
.mobile-nav { display: none; }
.mobile-nav.is-open { display: block; }

/* Copy toast */
.copied-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #18181B; color: #fff; padding: .6rem 1rem; border-radius: 4px;
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 200;
}
.copied-toast.show { opacity: 1; }

/* Diagram box svg sizing */
.diagram-box svg { width: 100%; height: 100%; }

/* Hard-edge stamp shadow used on primary CTAs, matching DESIGN.md elevation rule */
.stamp-shadow { box-shadow: 2px 2px 0px #18181B; }
.stamp-shadow:active { transform: translate(1px, 1px); box-shadow: none; }

@media print {
  .site-header, .mobile-nav, .site-footer, .no-print { display: none !important; }
}