/* PlanetForge — tool-specific components. Foundation in ../assets/base.css */

:root{
  --pad:clamp(14px,2vw,36px);
  --planet-x:88%;--planet-y:74%;   /* keep the backdrop planet clear of the rail */
}
[hidden]{display:none!important}
body{font-size:15px}
h1{font-size:clamp(1.4rem,2.4vw,2rem)}
.intro{max-width:86ch}
kbd{background:var(--inset);border:1px solid var(--glass-border);border-bottom-width:2px;border-radius:5px;padding:0 .32rem;font-size:.8em;font-family:inherit;color:var(--text)}

/* ---- app layout: control rail + workspace ---------------------- */
.app{display:grid;grid-template-columns:300px 1fr;gap:1.2rem;margin:1rem 0;align-items:start}
@media(max-width:900px){.app{grid-template-columns:1fr}}
.panel{
  border-radius:var(--r-lg);
  background:var(--glass-sheen),var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-edge),var(--shadow);
}
.side{padding:1rem;display:flex;flex-direction:column;gap:1.1rem;max-height:calc(100vh - 116px);overflow-y:auto;position:sticky;top:92px}
@media(max-width:900px){.side{position:static;max-height:none}}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:.55rem;
}
.sec-head small{letter-spacing:0;text-transform:none;color:var(--faint);font-weight:500}

/* ---- fields ------------------------------------------------------ */
.row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:.45rem 0}
.field{display:block;font-size:.74rem;font-weight:600;color:var(--dim);margin:.7rem 0}
.field output{float:right;color:var(--text)}
.field input[type=range]{width:100%;accent-color:var(--accent);margin-top:.4rem;display:block}
.field select{
  display:block;width:100%;margin-top:.3rem;font:inherit;font-size:.84rem;color:var(--text);
  background:var(--inset);border:1px solid var(--glass-border);border-radius:9px;
  padding:.4rem .5rem;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.field input[type=color]{
  display:block;width:100%;height:2rem;margin-top:.3rem;border:1px solid var(--glass-border);
  border-radius:9px;background:var(--inset);padding:2px;cursor:pointer;
}
.check{font-size:.76rem;margin:.55rem 0}
.hint{font-size:.72rem;color:var(--faint);line-height:1.7;margin-top:.55rem}

/* button size variants */
.btn{padding:8px 13px;font-size:.8rem;gap:6px}
.btn.tiny{padding:5px 10px;font-size:.7rem}
.btn.wide{width:100%;margin-top:.45rem}
.sec-head .btn.tiny{margin:0}

/* ---- OBJ drop button ---------------------------------------------- */
.drop{
  width:100%;padding:1rem .8rem;border:1.5px dashed var(--border-2);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:inherit;text-align:center;
  transition:border-color .2s,background .2s;
}
.drop:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.drop strong{display:block;margin-bottom:.2rem}
.drop small{color:var(--dim);font-size:.72rem;line-height:1.5}

/* ---- paint tools --------------------------------------------------- */
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.ptool{
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:12px;
  padding:.55rem .2rem;color:var(--dim);cursor:pointer;font:inherit;font-size:1.05rem;text-align:center;
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.ptool:hover{color:var(--text);transform:translateY(-2px)}
.ptool small{display:block;font-size:.62rem;font-weight:600;margin-top:.25rem;letter-spacing:.04em}
.ptool.active{
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.brush-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.38rem;margin:.35rem 0 .6rem}
.brush-preset{position:relative;aspect-ratio:1;border:1px solid var(--glass-border);border-radius:10px;background:rgba(255,255,255,.035);color:var(--dim);cursor:pointer;padding:.3rem;font:inherit;font-size:.57rem;overflow:hidden}
.brush-preset i{display:block;width:28px;height:28px;margin:auto auto .2rem;border-radius:50%;background:currentColor;filter:opacity(.72)}
.brush-preset.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.brush-preset[data-shape=splatter] i,.brush-preset[data-shape=speckle] i,.brush-preset[data-shape=spray] i,.brush-preset[data-shape=dirt] i{background:radial-gradient(circle at 20% 25%,currentColor 0 8%,transparent 9%),radial-gradient(circle at 65% 35%,currentColor 0 15%,transparent 16%),radial-gradient(circle at 42% 75%,currentColor 0 10%,transparent 11%)}
.brush-preset[data-shape=scratches] i,.brush-preset[data-shape=cracks] i{border-radius:0;background:repeating-linear-gradient(70deg,transparent 0 5px,currentColor 6px 7px,transparent 8px 11px)}
.brush-preset[data-shape=stars] i{border-radius:0;clip-path:polygon(50% 0,61% 35%,100% 38%,69% 59%,79% 100%,50% 75%,21% 100%,31% 59%,0 38%,39% 35%)}
.brush-preset[data-shape=soft] i{background:radial-gradient(circle,currentColor,transparent 70%)}
.material-swatch{height:34px;border-radius:9px;border:1px solid var(--glass-border);background:#888;margin:.35rem 0}

/* ---- layers -------------------------------------------------------- */
.layers{display:flex;flex-direction:column;gap:.35rem;max-height:200px;overflow-y:auto;margin-bottom:.45rem}
.layer-row{
  display:flex;align-items:center;gap:.3rem;font-size:.76rem;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:999px;
  padding:.28rem .6rem;transition:border-color .2s,background .2s;
}
.layer-row:hover{background:rgba(255,255,255,.07)}
.layer-row.sel{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
.lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.lbtn{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:.72rem;padding:.05rem .18rem}
.lbtn:hover:not(:disabled){color:var(--text)}
.lbtn:disabled{opacity:.25;cursor:default}
.lbtn.off{opacity:.3}

/* ---- workspace & mode toolbar --------------------------------------- */
.workspace{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.canvas-toolbar{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  padding:.45rem .6rem;border-radius:999px;
  background:var(--glass-sheen),var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-edge),var(--shadow-sm);
}
.mode-tab{
  background:transparent;border:1px solid transparent;color:var(--dim);
  border-radius:999px;padding:.32rem .75rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:.4rem;
  transition:background .2s,color .2s,box-shadow .2s;
}
.mode-tab b{
  font-size:.62rem;font-weight:700;border:1px solid var(--border-2);border-radius:50%;
  width:1.15rem;height:1.15rem;display:grid;place-items:center;
}
.mode-tab:hover{color:var(--text);background:rgba(255,255,255,.06)}
.mode-tab.active{color:var(--text);background:var(--glass-strong);border-color:var(--glass-border);box-shadow:var(--glass-edge),var(--shadow-sm)}
.mode-tab.active b{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.tool-divider{width:1px;height:1.2rem;background:var(--border-2);margin:0 .2rem}
.mini-btn{
  background:transparent;border:1px solid transparent;color:var(--dim);border-radius:999px;
  padding:.24rem .6rem;font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s;
}
.mini-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}
.mini-btn.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tool-info{margin-left:auto;font-size:.72rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-mode{font-size:.7rem;color:var(--dim);display:flex;align-items:center;gap:.35rem}
.view-mode select{font:inherit;color:var(--text);background:var(--inset);border:1px solid var(--glass-border);border-radius:999px;padding:.22rem .5rem}

/* ---- panes ------------------------------------------------------------ */
.pane{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--inset);border:1px solid var(--glass-border);
  box-shadow:var(--glass-edge),var(--shadow-md);
}
.pane canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.pane .gpu-canvas{z-index:0;pointer-events:none}.pane canvas:not(.gpu-canvas){z-index:1}.pane .canvas-label{z-index:2}
.canvas-label{
  position:absolute;top:10px;left:10px;pointer-events:none;
  font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  background:rgba(10,11,12,.55);border:1px solid var(--glass-border);border-radius:999px;padding:.25rem .6rem;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* UV mode: two panes side by side. Heights are viewport-capped so the
   full-width grid never pushes the canvases off-screen. */
.uv-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.uv-grid .pane{height:clamp(320px,calc(100vh - 320px),660px)}
@media(max-width:900px){
  .uv-grid{grid-template-columns:1fr}
  .uv-grid .pane{height:min(80vw,460px)}
}

/* Paint canvas stays square at every selected texture resolution. */
.paint-pane{
  width:max(280px,min(100%,calc(100vh - 300px)));aspect-ratio:1;margin:0 auto;
  background:
    linear-gradient(45deg,rgba(255,255,255,.045) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.045) 75%),
    linear-gradient(45deg,rgba(255,255,255,.045) 25%,rgba(0,0,0,.28) 25%,rgba(0,0,0,.28) 75%,rgba(255,255,255,.045) 75%);
  background-size:24px 24px;background-position:0 0,12px 12px;
}
.paint-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:.9rem}
.paint-grid .paint-pane,.paint-grid .paint-preview{width:100%;aspect-ratio:1;margin:0}
.paint-preview canvas{cursor:grab}
@media(max-width:900px){.paint-grid{grid-template-columns:1fr}.paint-grid>div{max-width:620px;margin:auto!important}}
.paint-pane canvas{cursor:crosshair}

/* material mode: environment backgrounds */
.material-pane{height:clamp(320px,calc(100vh - 300px),680px)}
.material-pane{background:radial-gradient(circle at 50% 42%,#2c3034,#141518 72%)}
.material-pane[data-env=courtyard]{background:radial-gradient(circle at 50% 30%,#3a3d33,#171816 75%)}
.material-pane[data-env=night]{background:radial-gradient(circle at 50% 40%,#1b2028,#0c0e12 75%)}
.material-pane canvas{cursor:grab}
.material-pane canvas:active{cursor:grabbing}
#modelCanvas{cursor:grab}
#modelCanvas:active{cursor:grabbing}
#uvCanvas{cursor:crosshair}

/* ---- toast ---------------------------------------------------------- */
#toast{
  position:fixed;right:18px;bottom:18px;z-index:200;
  padding:.6rem 1rem;border-radius:999px;font-size:.85rem;color:var(--text);
  background:var(--glass-sheen),var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-edge),var(--shadow-md);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;
}
#toast.show{opacity:1;transform:none}