/* Woodlynn 3D Timber Screen Calculator. All rules are scoped to .wl3d so they
   cannot affect the rest of the Divi site. */
.wl3d{
  --bg:#F9F9FA; --panel:#FFFFFF; --ink:#001212; --muted:#646464; --line:#DCDDE1;
  --accent:#00D000; --accent-ink:#001212; --accent-deep:#1B8A3E; --gold:#F0D996;
  --timber:#C9A67A; --timber-deep:#9A7448;
  --pass:#1B8A3E; --pass-bg:#E6F4EA; --fail:#CF2E2E; --fail-bg:#FBE8E8;
  --stage-top:#FFFFFF; --stage-bot:#ECEEF1;
  --f-display:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.wl3d,.wl3d *{box-sizing:border-box}
.wl3d{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wl3d .wrap{max-width:1280px;margin:0 auto;display:grid;gap:18px}
.wl3d header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.wl3d .wl3d-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;margin:0;text-wrap:balance}
.wl3d .wl3d-title{color:var(--accent-deep)}
.wl3d .wl3d-title span{color:var(--muted);font-weight:500}
.wl3d .brand-rule{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 64px,var(--gold) 64px 112px,transparent 112px)}
.wl3d .sub{color:var(--muted);margin:0;font-size:.9rem}
.wl3d .bench{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.wl3d .bench{grid-template-columns:minmax(0,1fr)}}
.wl3d .panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:16px}
.wl3d .group{display:grid;gap:10px}
.wl3d .group h2{font-family:var(--f-body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0}
.wl3d .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wl3d label{display:grid;gap:4px;font-size:.82rem;font-weight:500;min-width:0}
.wl3d input,.wl3d select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;min-width:0}
.wl3d input{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wl3d input:focus-visible,.wl3d select:focus-visible,.wl3d button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wl3d input:disabled{opacity:.45}
.wl3d .hint{font-size:.76rem;color:var(--muted);margin:0}
.wl3d .stepper{display:flex;align-items:center;gap:8px}
.wl3d .stepper button:not(.btn){width:38px;height:38px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.2rem;cursor:pointer}
.wl3d .stepper button:not(.btn):hover{border-color:var(--accent-deep)}
.wl3d .timber-chip{display:inline-block;width:.8em;height:.8em;border-radius:2px;background:var(--timber);vertical-align:-.05em;margin-right:6px;border:1px solid var(--timber-deep)}
.wl3d .stepper output{font-family:var(--f-mono);font-size:1.3rem;min-width:3ch;text-align:center}
.wl3d .swatches{display:flex;flex-wrap:wrap;gap:6px}
.wl3d .sw{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:4px 10px 4px 4px;font-size:.8rem;cursor:pointer}
.wl3d .sw i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.15)}
.wl3d .sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wl3d .sw:disabled{opacity:.35;cursor:not-allowed}

.wl3d .stage{display:grid;gap:12px;min-width:0}
.wl3d .viewer{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(var(--stage-top),var(--stage-bot));aspect-ratio:16/10;max-width:100%}
@media (max-width:600px){.wl3d .viewer{aspect-ratio:4/5}}
.wl3d #wl3d_gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.wl3d .views{position:absolute;top:10px;left:10px;display:flex;gap:4px;flex-wrap:wrap}
.wl3d .views button{font:500 .78rem var(--f-body);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
.wl3d .views button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wl3d .dims{position:absolute;right:10px;bottom:10px;font:400 .75rem var(--f-mono);background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.wl3d .help{position:absolute;left:10px;bottom:10px;font-size:.72rem;color:var(--muted)}
.wl3d .fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}

.wl3d .results{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px}
.wl3d .banner{font-weight:600;font-size:.9rem;padding:8px 12px;border-radius:6px}
.wl3d .banner.pass{background:var(--pass-bg);color:var(--pass)}
.wl3d .banner.fail{background:var(--fail-bg);color:var(--fail)}
.wl3d .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.wl3d .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl3d .stat{display:grid;gap:2px}
.wl3d .stat dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wl3d .stat dd{margin:0;font:500 1.35rem var(--f-mono);font-variant-numeric:tabular-nums}
.wl3d .stat dd small{font-size:.8rem;color:var(--muted);margin-left:2px}
.wl3d .cut{display:grid;gap:8px}
.wl3d .cut h3{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.wl3d .badges{display:flex;flex-wrap:wrap;gap:6px}
.wl3d .badge{font:500 .85rem var(--f-mono);border:1px solid var(--line);border-left:6px solid var(--timber);border-radius:4px;padding:4px 10px;background:var(--bg)}
.wl3d .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wl3d .btn{font:600 .88rem var(--f-body);background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:9px 16px;cursor:pointer}
.wl3d .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.wl3d .section{margin:0;display:grid;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px}
.wl3d .section svg{width:100%;height:auto;display:block}
.wl3d .section figcaption{font-size:.76rem;color:var(--muted)}
.wl3d .sec-wood{fill:var(--timber)} .wl3d .sec-fill{fill:var(--timber);opacity:.65} .wl3d .sec-line{stroke:var(--ink);stroke-width:1;fill:none}
.wl3d .sec-wood{stroke:none} .wl3d .sec-txt{fill:var(--muted);font:500 9px var(--f-mono)}
.wl3d .field-err{margin:0;font-size:.8rem;font-weight:600;color:var(--fail)}
.wl3d input[aria-invalid="true"]{border-color:var(--fail);box-shadow:inset 0 0 0 1px var(--fail)}
.wl3d .results.blocked{opacity:.45;pointer-events:none}
.wl3d .toast{font-size:.82rem;color:var(--pass)}
.wl3d textarea{width:100%;font:400 .8rem var(--f-mono);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px;min-height:120px}
.wl3d .err{color:var(--fail);font-weight:600}
@media (prefers-reduced-motion: reduce){.wl3d,.wl3d *{transition:none!important}}

/* Divi resets: theme styles for p, headings, inputs and buttons inside the calculator */
.wl3d [hidden]{display:none!important}
.wl3d p,.wl3d h2,.wl3d h3,.wl3d figure{padding:0}
.wl3d h2,.wl3d h3{line-height:1.25}
.wl3d .wl3d-title{font-size:clamp(1.4rem,2.4vw,1.9rem);padding:0;line-height:1.2}
.wl3d input,.wl3d select,.wl3d textarea{box-shadow:none;height:auto;line-height:1.4;margin:0}
.wl3d select{-webkit-appearance:auto;appearance:auto}
.wl3d button{line-height:1.2;margin:0;text-transform:none;letter-spacing:normal}
.wl3d input,.wl3d .stat dd,.wl3d .stepper output,.wl3d .badge,.wl3d .dims{font-variant-numeric:tabular-nums}