/* StlColor — extras: palettes, adjustments, symmetry, auto-colorize,
   stats, color-history, measure-tool readout, cross-promo, tabs. */

/* Pointer Events: prevent browser default scroll/zoom on the viewport so
   single-finger drags reach paint/orbit instead of becoming a page scroll. */
#vp{touch-action:none}

/* ── Tab navigation (sidebar) — prominent, always visible ──────── */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 14px;border-bottom:2px solid var(--ac);background:var(--sf2);position:sticky;top:0;z-index:8;flex-shrink:0;box-shadow:inset 0 -1px 0 var(--bd)}
.tab{background:var(--sf);border:1.5px solid var(--bd);border-radius:10px;padding:10px 4px;color:var(--txd);cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;text-align:center;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:4px;letter-spacing:.2px}
.tab:hover{color:var(--tx);background:var(--sf3);border-color:var(--ac2);transform:translateY(-1px)}
.tab.a{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#1a0e06;border-color:var(--ac);box-shadow:0 4px 12px rgba(255,120,73,.35)}
.tab .tab-icon{font-size:18px;line-height:1}
.tab-content{display:none}
.tab-content.a{display:block;animation:tabFade .22s ease}
@keyframes tabFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

/* When inside a tab, sections are always expanded — no collapse UI */
.tab-content .sec-collapsible{padding:14px 22px}
.tab-content .sec-collapsible .stl::after{display:none}
.tab-content .sec-collapsible .stl{cursor:default;margin-bottom:12px;padding:0}


/* Palette section */
.palette-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:10px}
.palette-swatch{width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.palette-swatch:hover{transform:scale(1.15);border-color:var(--ac);z-index:2}

/* Adjustments grid */
.adj-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.adj-btn{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:9px 8px;color:var(--tx);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .12s;text-align:center;display:flex;align-items:center;justify-content:center;gap:5px}
.adj-btn:hover{background:var(--sf3);border-color:var(--ac);color:var(--ac)}

/* Symmetry row */
.sym-row{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.sym-label{font-size:11px;font-weight:600;color:var(--txd);flex:1;letter-spacing:.3px}
.sym-btn{background:var(--sf2);border:1.5px solid var(--bd);border-radius:8px;padding:6px 12px;color:var(--txd);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;transition:all .12s;min-width:34px}
.sym-btn:hover{color:var(--tx);border-color:var(--ac)}
.sym-btn.a{background:var(--ag);border-color:var(--ac);color:var(--ac)}

/* Stats */
.stats-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:6px}
.stats-grid .k{color:var(--txd)}
.stats-grid .v{color:var(--tx);text-align:right}
.stats-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.stats-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:12px;background:var(--sf2);font-size:10px;font-family:'IBM Plex Mono',monospace;border:1px solid var(--bd);color:var(--tx)}
.stats-chip .dot{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* Color history chips */
.history-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:24px}
.history-chip{width:22px;height:22px;border-radius:6px;cursor:pointer;border:1.5px solid var(--bd);transition:transform .1s,border-color .1s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.history-chip:hover{transform:scale(1.15);border-color:var(--ac);z-index:2}

/* Quick-action row */
.qa-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.qa-btn{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:8px 6px;color:var(--tx);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .12s;display:flex;align-items:center;justify-content:center;gap:4px}
.qa-btn:hover{background:var(--sf3);border-color:var(--ac);color:var(--ac)}

/* Measure-tool readout pill (inside viewport) */
.measure-pill{position:absolute;top:68px;right:14px;background:rgba(11,13,20,.9);backdrop-filter:blur(14px);border:1px solid var(--ac);border-radius:10px;padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx);z-index:6;display:none;box-shadow:var(--sh-m)}
.measure-pill.vis{display:block}
.measure-pill strong{color:var(--ac);font-weight:700;letter-spacing:.2px}

/* Cross-promo — simpler, cards with side-border */
.cross-promo{padding:14px 22px 10px;border-top:1px solid var(--bd);margin-top:auto}
.cp-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--txmute);margin-bottom:10px}
.cp-link{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:5px 0;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);text-decoration:none;transition:all .15s;border-left:3px solid var(--sf3)}
.cp-link:hover{background:var(--sf3);border-color:var(--ac);border-left-color:var(--ac)}
.cp-link .cp-icon{font-size:20px;flex-shrink:0}
.cp-link strong{display:block;font-size:12px;font-weight:600;color:var(--tx)}
.cp-link p{font-size:10px;color:var(--txd);margin:2px 0 0;line-height:1.3}

/* ── Orbit arrows (viewport overlay) ──────────────────────────── */
.orbit-pad{position:absolute;bottom:60px;right:14px;display:grid;grid-template-columns:36px 36px 36px;grid-template-rows:36px 36px 36px;gap:4px;z-index:6;pointer-events:none;padding:6px;background:rgba(20,24,40,.7);backdrop-filter:blur(16px);border:1px solid var(--bd);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.orbit-pad .ob{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;pointer-events:all;padding:0;user-select:none}
.orbit-pad .ob:hover,.orbit-pad .ob:active{color:var(--ac);border-color:var(--ac);background:var(--ag)}
.orbit-pad .ob.up{grid-column:2;grid-row:1}
.orbit-pad .ob.left{grid-column:1;grid-row:2}
.orbit-pad .ob.center{grid-column:2;grid-row:2;font-size:14px}
.orbit-pad .ob.right{grid-column:3;grid-row:2}
.orbit-pad .ob.down{grid-column:2;grid-row:3}
.orbit-pad .ob.rotcw{grid-column:3;grid-row:1;font-size:11px}
.orbit-pad .ob.rotccw{grid-column:1;grid-row:1;font-size:11px}
.orbit-pad .ob.zoomout{grid-column:1;grid-row:3;font-size:16px}
.orbit-pad .ob.zoomin{grid-column:3;grid-row:3;font-size:14px}
.orbit-pad .ob.center.a{color:var(--ac);border-color:var(--ac);background:var(--ag)}
body.light .orbit-pad .ob{background:rgba(255,255,255,.9);color:#2b3150}

/* Collapsible sections */
.sec-collapsible .stl{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding:0}
.sec-collapsible .stl::after{content:"▼";font-size:9px;transition:transform .2s;opacity:.5;margin-left:6px}
.sec-collapsible.open .stl::after{transform:rotate(0deg);opacity:1;color:var(--ac)}
.sec-collapsible:not(.open) .stl::after{transform:rotate(-90deg)}
.sec-collapsible:not(.open) > :not(.stl){display:none !important}
.sec-collapsible.open{padding-bottom:14px}
.sec-collapsible{padding:14px 22px}
.sec-collapsible:not(.open){padding-bottom:14px}
.sec-collapsible .stl{padding:0 0 4px}
.sec-collapsible.open .stl{margin-bottom:12px;padding-bottom:0}

/* Export dropdown (multi-format) */
.export-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;margin-top:8px}
.export-btn{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:8px 4px;color:var(--tx);cursor:pointer;font-family:inherit;font-size:10px;font-weight:700;transition:all .12s;text-align:center;letter-spacing:.3px}
.export-btn:hover{background:var(--sf3);border-color:var(--ac);color:var(--ac)}

/* Mobile adjustments for these panels */
@media (max-width:500px){
  .palette-swatches{grid-template-columns:repeat(8,1fr);gap:5px}
  .palette-swatch{border-radius:5px}
  .history-chip{width:28px;height:28px}
  .measure-pill{top:auto;bottom:180px;right:auto;left:50%;transform:translateX(-50%)}
  .orbit-pad{bottom:130px;right:14px;grid-template-columns:40px 40px 40px;grid-template-rows:40px 40px 40px}
}
@media (max-width:900px){
  .orbit-pad{bottom:90px}
}
@media (hover:none) and (pointer:coarse){
  .palette-swatch,.history-chip{min-width:30px;min-height:30px}
  .adj-btn,.qa-btn{min-height:40px}
  .sym-btn{min-height:40px;padding:8px 14px}
}