/* ===== deployment additions: footer, legal pages, 404 ===== */
#btnExport{ width:100%; }

.site-footer{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:6px var(--space-5); font-size:var(--text-xs); color:var(--text-muted);
  background:var(--topbar-bg); border-top:1px solid var(--border);
}
.site-footer a, .page a{ color:var(--accent-strong); text-underline-offset:2px; }
.site-footer-links{ white-space:nowrap; }
@media (max-width:640px){
  .site-footer{ padding:6px var(--space-3); gap:var(--space-2); }
}

/* standalone pages (terms, 404) */
body.page{ overflow:auto; height:auto; min-height:100vh; }
.page main{ width:100%; max-width:680px; margin:0 auto; padding:var(--space-6) var(--space-5) 56px; line-height:1.55; flex:1 0 auto; }
.page h1{ font-size:28px; margin:var(--space-5) 0 var(--space-2); letter-spacing:-.01em; }
.page h2{ font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-2); }
.page p, .page li{ color:#dbe6ee; font-size:var(--text-md); }
.page .lead{ color:var(--text-muted); }
.page .btn{ display:inline-block; text-decoration:none; margin-top:var(--space-4); color:var(--accent-contrast); }
.page .big{ font-size:72px; font-weight:700; color:var(--accent); line-height:1; margin:var(--space-6) 0 0; font-variant-numeric:tabular-nums; }
a.brand{ text-decoration:none; color:inherit; }

/* Reserve space for blocks that scripts fill in, so the panel doesn't jump on load. */
.tool-shade #presets{ min-height:200px; }
.tool-shade #shapeFields{ min-height:76px; }
.tool-shade #nodeList{ min-height:374px; }
@media (max-width:860px){ .tool-shade #presets{ min-height:190px; } }
@media (max-width:480px){ .tool-shade #presets{ min-height:270px; } }

/* ===== tool tabs (Shade / Base / Lamp) ===== */
.tabs{ display:flex; gap:2px; padding:3px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-pill); }
.tab{
  padding:6px 16px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600;
  color:var(--text-muted); text-decoration:none;
  transition:background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.tab:active{ transform:scale(0.96); }
.tab[aria-current="page"]{ background:var(--accent); color:var(--accent-contrast); }
@media (hover:hover) and (pointer:fine){
  .tab:not([aria-current="page"]):hover{ color:var(--text); background:rgba(255,255,255,0.08); }
}
@media (max-width:640px){
  .topbar{ flex-wrap:wrap; row-gap:8px; padding-bottom:8px; }
  .tabs{ order:3; width:100%; justify-content:stretch; }
  .tab{ flex:1; text-align:center; padding:7px 10px; }
}