/* builder.css — SHARED merch-builder chrome (tee.html + hat.html).
   Phone-first and one-screen: dense flat rows instead of boxy fieldsets,
   a single product view with tabs, a hover magnifier lens, and a sticky
   preview on small screens so options and shirt are visible together.
   Page-specific geometry (printzones, hat zones, sketch views) stays inline
   in each page. Tokens come from site.css. */

:root{
  --line-strong:#d5cdb8;
  --focus-ring:0 0 0 3px rgba(194,70,45,.13);
  --preview-bg:#e9e1cd;
}

.app{display:grid;grid-template-columns:minmax(300px,370px) 1fr;min-height:calc(100vh - 52px);}
/* desktop: the PAGE never scrolls — nav + app fill the viewport exactly;
   if the panel is a hair taller it scrolls internally, invisibly */
@media (min-width:901px){
  body{height:100vh;overflow:hidden;display:flex;flex-direction:column;}
  .site-nav{flex:0 0 auto;}
  .app{flex:1;min-height:0;overflow:hidden;}
  .panel{overflow-y:auto;}
}
.panel{padding:10px 16px 0;border-right:1px solid var(--line);font-family:var(--font-ui);background:var(--paper);display:flex;flex-direction:column;}
.panel h1{font-size:19px;margin:2px 0 2px;font-family:var(--font-body);}
.panel .lede{color:var(--muted);font-size:11.5px;margin:0 0 6px;}

/* flat, dense sections */
fieldset{border:0;border-top:1px dashed var(--line);border-radius:0;margin:0;padding:7px 0 9px;background:transparent;box-shadow:none;min-width:0;}
legend{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:0 8px 0 0;font-weight:700;}
label{display:block;font-size:11px;color:var(--muted);margin:6px 0 3px;font-weight:600;}
input[type=text],textarea,select{width:100%;font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink);}
input[type=text]:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);}
textarea{resize:vertical;line-height:1.45;}
/* collapsed-until-you-need-it long text (the greatest hits) */
textarea.grow{min-height:34px;height:34px;transition:height .18s ease;overflow:hidden;}
textarea.grow:focus{height:120px;overflow:auto;}
input[type=file]{font-size:11.5px;max-width:100%;}
/* inputs that print on the shirt LOOK like the shirt (the tour-back type) */
.printy{font-family:'Oswald',system-ui,sans-serif !important;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.printy::placeholder{font-weight:400;opacity:.55;}
.row2{display:flex;gap:8px;align-items:flex-end;}
.row2>*{flex:1;min-width:0;}

.status{font-size:11.5px;font-weight:600;margin-top:5px;display:none;}
.status.working{display:block;color:#1e40af;}
.status.error{display:block;color:#b91c1c;}
.status.done{display:block;color:#15803d;}

.choices{display:flex;gap:6px;flex-wrap:wrap;}
.choice{border:2px solid var(--line);border-radius:7px;background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:6px 10px;cursor:pointer;}
.choice.on{border-color:var(--accent);color:var(--ink);}
.choice:disabled{opacity:.45;cursor:default;}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(194,70,45,.25);}

#styleRow{display:flex;gap:8px;}
.stylecard{flex:1;border:2px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;padding:5px;text-align:center;font:inherit;font-size:10.5px;font-weight:600;color:var(--muted);}
.stylecard.on{border-color:var(--accent);color:var(--ink);}
.stylecard:disabled{opacity:.45;cursor:default;}
.stylecard .well{height:46px;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:3px;overflow:hidden;}
.stylecard img{max-height:42px;image-rendering:pixelated;}
.stylecard .maskmini{width:52px;height:40px;}
.maskart,.maskmini{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}

.toolbar{position:sticky;bottom:0;display:flex;gap:10px;padding:9px 0;background:var(--paper);border-top:1px solid var(--line);margin-top:auto;}
button.primary{font:inherit;font-size:14px;font-weight:700;border:0;border-radius:8px;padding:9px 14px;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 4px 0 var(--accent-press);}
button.primary:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-press);}
button.primary:disabled{opacity:.55;cursor:default;box-shadow:none;}
.buynote{font-size:10.5px;color:var(--muted);align-self:center;line-height:1.3;}

/* ---------- preview: one product, view tabs, magnifier ----------
   The product sits ON the turf (Zack's call) — merch laid out on the field */
.preview{
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.24) 100%),
    url("/img/turf-tile.jpg") repeat;
  background-size:cover, 520px auto;
  padding:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.stage{display:flex;flex-direction:column;align-items:center;}
.viewtabs{display:flex;gap:8px;justify-content:center;margin-bottom:12px;font-family:var(--font-ui);}
.vtab{position:relative;border:2px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 16px;cursor:pointer;}
.vtab.on{border-color:var(--accent);color:var(--ink);}
.vtab.filled::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.vtab[hidden]{display:none;}

/* the magnifier lens — small, square-ish, shaded (builder.js drives it) */
.lenswrap{position:relative;}
.lens{
  position:absolute;z-index:30;pointer-events:none;
  width:110px;height:110px;border-radius:10px;overflow:hidden;
  transform:translate(-50%,-50%);
  border:2px solid var(--ink);background:var(--preview-bg);
  box-shadow:0 8px 18px rgba(0,0,0,.32);
}
.lens::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -18px 22px rgba(0,0,0,.22), inset 0 14px 18px rgba(255,255,255,.08);
}
.lens .lensclone{position:absolute;left:0;top:0;transform-origin:0 0;}
@media (hover:hover){ .lenswrap{cursor:zoom-in;} }
/* click = MEGA zoom: the product scales up and pans under the pointer */
.lenswrap.mega{overflow:hidden;cursor:zoom-out;touch-action:none;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.25);}

/* ---------- phones: preview stays pinned while options scroll ---------- */
@media (max-width:900px){
  .app{display:flex;flex-direction:column-reverse;justify-content:flex-end;}
  .panel{border-right:0;padding:8px 14px 0;}
  .preview{
    position:sticky;top:52px;z-index:20;
    padding:8px 10px 10px;
    box-shadow:0 6px 14px rgba(0,0,0,.14);
  }
  .viewtabs{margin-bottom:6px;}
  .vtab{padding:5px 12px;font-size:11.5px;}
}