/*
  905Wood — Hyvä Light UI for /bins
  File: 905wood-hyva-light-bins.css
  Theme: Light-first, clean, fast. CSP-safe. No external imports.
  Author: ChatGPT
*/

/* ---------- CSS Variables (Hyvä Light tokens) ---------- */
:root{
  --hyva-bg: #f8fafc;            /* slate-50 */
  --hyva-surface: #ffffff;       /* white */
  --hyva-elevated: #fbfdff;      /* subtle tint */
  --hyva-text: #0f172a;          /* slate-900 */
  --hyva-muted: #475569;         /* slate-600 */
  --hyva-subtle: #64748b;        /* slate-500 */
  --hyva-border: #e2e8f0;        /* slate-200 */
  --hyva-ring: #93c5fd;          /* blue-300 */
  --hyva-brand: #2563eb;         /* blue-600 */
  --hyva-brand-600: #2563eb;
  --hyva-brand-700: #1d4ed8;
  --hyva-accent: #16a34a;        /* green-600 */
  --hyva-warning: #f59e0b;       /* amber-500 */
  --hyva-danger: #ef4444;        /* red-500 */

  --hyva-radius: 16px;
  --hyva-radius-sm: 12px;
  --hyva-radius-lg: 20px;
  --hyva-shadow: 0 10px 20px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --hyva-shadow-sm: 0 4px 10px rgba(15,23,42,.06);
  --hyva-spacing: clamp(12px, 2vw, 20px);
  --hyva-maxw: 1168px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--hyva-text);
  background: radial-gradient(1200px 600px at 50% -200px, #eef2ff 0%, transparent 40%), var(--hyva-bg);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width:100%;
  max-width: var(--hyva-maxw);
  margin-inline:auto;
  padding-inline: var(--hyva-spacing);
}

h1,h2,h3{line-height:1.2; margin:0 0 .4em}
h1{font-size: clamp(28px, 3.2vw, 40px); letter-spacing:-.015em}
h2{font-size: clamp(20px, 2.2vw, 28px)}
h3{font-size: clamp(18px, 1.8vw, 22px)}

p{margin:.25rem 0 .75rem; color: var(--hyva-muted)}

/* ---------- Top Nav ---------- */
.top-nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid var(--hyva-border);
}
.top-nav .nav-content{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: .6rem;
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--hyva-text)}
.logo i{color: var(--hyva-brand)}
.nav-controls{display:flex; gap:.5rem}
.nav-controls button{
  border:1px solid var(--hyva-border);
  background: var(--hyva-surface);
  padding:.55rem .7rem; border-radius:12px; cursor:pointer;
  color: var(--hyva-subtle);
  transition: border-color .2s, box-shadow .2s, color .2s, transform .08s;
}
.nav-controls button:hover{color:var(--hyva-brand); border-color:#cfe0ff; box-shadow: var(--hyva-shadow-sm)}
.nav-controls button:active{transform: translateY(1px)}
.nav-controls button:focus-visible{outline:3px solid var(--hyva-ring); outline-offset:2px}

/* ---------- Page Header ---------- */
.page-header{
  padding-block: clamp(18px,3vw,28px);
}
.page-header .subtitle{max-width:72ch}
.search-bar{
  margin-top: .8rem;
  display:flex; gap:.5rem; align-items:center;
  background: var(--hyva-surface);
  border:1px solid var(--hyva-border);
  border-radius: var(--hyva-radius);
  padding:.35rem;
  box-shadow: var(--hyva-shadow-sm);
}
.search-bar input{
  flex:1; border:0; outline:0; padding:.7rem .9rem; border-radius:12px; font-size: .98rem;
  background: transparent; color: var(--hyva-text);
}
.search-bar button{
  appearance:none; border:0; cursor:pointer;
  padding:.7rem .9rem; border-radius:12px;
  color:#fff; background: var(--hyva-brand);
  transition: filter .15s ease;
}
.search-bar button:hover{filter:brightness(1.05)}
.search-bar button:focus-visible{outline:3px solid var(--hyva-ring); outline-offset:2px}

/* ---------- Sections / Cards ---------- */
section{
  background: var(--hyva-surface);
  border:1px solid var(--hyva-border);
  border-radius: var(--hyva-radius);
  box-shadow: var(--hyva-shadow);
  padding: clamp(14px, 2.2vw, 22px);
  margin-block: clamp(12px, 1.8vw, 20px);
}
.section-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom: .8rem;
}
.section-header h2{display:flex; align-items:center; gap:.6rem}
.section-header .controls{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.section-header .filter-chips{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- Buttons / Chips ---------- */
.btn, .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:12px; border:1px solid var(--hyva-border);
  background: var(--hyva-elevated); color: var(--hyva-text);
  cursor:pointer; transition: box-shadow .2s, transform .08s, border-color .2s, background .2s;
  text-decoration:none; font-weight:500;
}
.btn:hover, .chip:hover{box-shadow: var(--hyva-shadow-sm); border-color:#cfe0ff}
.btn:active, .chip:active{transform: translateY(1px)}
.btn-primary{background: var(--hyva-brand); color:#fff; border-color: transparent}
.btn-primary:hover{filter: brightness(1.05)}
.btn-outline{background:#fff}
.chip.active{background: rgba(37,99,235,.09); color: var(--hyva-brand); border-color:#cfe0ff}

/* ---------- Tables ---------- */
.table-wrapper{width:100%; overflow:auto; border-radius:12px; border:1px solid var(--hyva-border); background: #fff}
table{width:100%; border-collapse:collapse; font-size:.97rem}
.dimensions-table thead th,
.clearance-table thead th{
  text-align:left; font-weight:600; color: var(--hyva-subtle);
  background: #f8fafc; position:sticky; top:0;
  border-bottom:1px solid var(--hyva-border);
  padding:.75rem .9rem;
}
.dimensions-table tbody td,
.clearance-table tbody td{
  padding:.8rem .9rem; border-bottom:1px solid var(--hyva-border);
}
.dimensions-table tbody tr:hover,
.clearance-table tbody tr:hover{background:#f9fbff}

/* Size pill for first column */
.size-column{
  font-weight:700;
  color: var(--hyva-brand);
}

/* Numeric alignment */
th[data-sort="number"], td[data-sort="number"]{text-align:right}

/* ---------- Uses Grid ---------- */
.uses-container{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}
.use-card{
  background: var(--hyva-elevated);
  border:1px solid var(--hyva-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--hyva-shadow-sm);
  transition: transform .12s, box-shadow .2s;
}
.use-card:hover{transform: translateY(-1px); box-shadow: var(--hyva-shadow)}

/* ---------- Materials ---------- */
.materials-content{display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(12px, 2vw, 18px)}
@media (max-width: 900px){ .materials-content{grid-template-columns: 1fr} }
.materials-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px;
}
.material-chip{
  padding:.6rem .8rem; border:1px dashed var(--hyva-border); border-radius:12px; background:#fff; color:var(--hyva-text);
}
.restricted-materials{
  background: #fff7ed; border:1px solid #fed7aa;
  border-radius: 12px; padding: 12px 14px;
}
.restricted-materials h3{margin-top:0; color:#9a3412}

/* ---------- Calculator ---------- */
.calculator-container{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 18px)}
@media (max-width: 900px){ .calculator-container{grid-template-columns: 1fr} }
.calculator-form{
  background: var(--hyva-elevated);
  border:1px solid var(--hyva-border);
  border-radius:14px; padding:14px; box-shadow: var(--hyva-shadow-sm);
}
.form-group{display:grid; gap:.35rem; margin-bottom:.8rem}
label{font-weight:600; color:var(--hyva-subtle)}
input[type="text"], input[type="number"], select{
  width:100%; padding:.65rem .8rem;
  border:1px solid var(--hyva-border); border-radius:12px; background:#fff; color: var(--hyva-text);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus{outline:none; border-color:#cfe0ff; box-shadow: 0 0 0 3px rgba(147,197,253,.35)}

/* ---------- Modal ---------- */
.modal{display:none; position:fixed; inset:0; background: rgba(15,23,42,.45); z-index:100}
.modal.open{display:grid; place-items:center}
.modal-content{
  width:min(720px, 92%); background:#fff; border-radius:16px; border:1px solid var(--hyva-border);
  box-shadow: var(--hyva-shadow); padding:18px; position:relative;
}
.close-modal{
  position:absolute; top:10px; right:12px; font-size:24px; line-height:1; cursor:pointer; color: var(--hyva-subtle);
}

/* ---------- Toasts ---------- */
.toast-container{position:fixed; bottom:16px; right:16px; display:grid; gap:10px; z-index:110}
.toast{
  background:#111827; color:#fff; padding:.7rem .9rem; border-radius:12px; box-shadow: var(--hyva-shadow-sm);
  animation: toast-in .18s ease-out;
}
@keyframes toast-in{from{transform: translateY(8px); opacity:0} to{transform: translateY(0); opacity:1}}

/* ---------- Utilities ---------- */
.loading-indicator{
  color: var(--hyva-subtle);
  padding:.5rem 0;
}
.table-responsive{width:100%; overflow:auto}
.chart-container{position:relative; height:360px; max-width:100%}
@media (max-width:640px){ .chart-container{height:280px} }

/* Focus ring */
:where(a,button,[role="button"],input,select){
  outline: none;
}
:where(a,button,[role="button"],input,select):focus-visible{
  box-shadow: 0 0 0 3px var(--hyva-ring);
  border-color: #cfe0ff;
}

/* Animations reduced */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- Page-specific fine-tuning ---------- */
#specifications .controls select{
  border-radius:12px; padding:.55rem .8rem; border:1px solid var(--hyva-border); background:#fff;
}
#specifications .controls .btn i{font-size:.95em}
#common-uses .chip{background:#fff}
.clearance-table th:nth-child(2), .clearance-table td:nth-child(2){min-width:180px}
.cost-estimate{margin-top:.6rem; font-weight:600; color: var(--hyva-accent)}
/* End of file */