/* ==========================================================================
   STEEL AGE — Tessera, the mosaic workbench
   Loaded after steelage.css and builder.css. Three panels on the spread: a
   leaf for the hand (tools, colours), the stone in the middle (the token on
   the book's dark page), and a leaf for the layers and the picture. Below
   960px the three stack, stone first.
   ========================================================================== */

main.tessera{display:grid;grid-template-columns:minmax(220px,17%) 1fr minmax(250px,20%);gap:0;background:var(--brown)}
main.tessera .leaf.bench{
  margin:4.19vh 0 4.19vh 4.19vh;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(12px,2vh,26px) clamp(12px,1.2vw,22px);font-size:clamp(12.5px,1.5vh,17px);
}
main.tessera .leaf.bench.right{margin:4.19vh 4.19vh 4.19vh 0}
.bench h1{font-size:clamp(18px,2.6vh,30px)}
.bench h1 .num{color:var(--gold);margin-right:.3em}
.bench .kicker{font-size:1.05em;margin:.3em 0 0}
.bench .label{margin:1.1em 0 .4em}
.bench .hint{font-style:italic;font-size:.85em;line-height:1.4;color:var(--ink-soft);margin-top:.45em}
.bench .chips{gap:.35em}
.bench .chip{font-size:.66em;padding:.5em .75em}
.bench .chip.filebtn{cursor:pointer}
.bench .row{gap:.5em}
.bench .row > .field{min-width:0}
.bench .row > .field.narrow{flex:0 0 5.6em;min-width:5.6em}
.bench .field select{padding:.4em 1.8em .4em .6em;font-size:.92em}
.bench .inline-actions{margin-top:.5em}
.bench .cta{font-size:.72em;padding:.55em 1.1em}

/* the hand */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:.3em;max-width:16em}
.sw{appearance:none;border:1px solid rgba(44,36,27,.45);aspect-ratio:1;cursor:pointer;padding:0;position:relative}
.sw:hover{border-color:var(--gold)}
.sw.on{outline:2px solid var(--gold);outline-offset:1px}
.cur-wrap{display:flex;align-items:center;gap:.6em;margin-top:.6em}
.cur-chip{width:2.2em;height:2.2em;border:1px solid rgba(44,36,27,.55);flex:none}
.cur-pick{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#7a5f2a;display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.cur-pick input[type=color]{width:2.6em;height:1.9em;border:1px solid rgba(154,122,58,.6);background:none;padding:1px;cursor:pointer}
.hexout{font-family:ui-monospace,Menlo,monospace;font-size:1.05em;letter-spacing:.04em;text-transform:none;color:var(--ink-soft)}
.how-aside{margin-top:1.4em;float:none;width:auto}
.bench .aside{padding-left:1em;font-size:.84em;line-height:1.45;color:var(--ink-soft);
  background-image:linear-gradient(180deg,rgba(154,122,58,0) 0%,rgba(154,122,58,.2) 4%,rgba(154,122,58,.7) 11%,rgba(154,122,58,.78) 45%,rgba(154,122,58,.55) 70%,rgba(154,122,58,.68) 88%,rgba(154,122,58,.18) 97%,rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:1px 100%;background-position:left top}
.bench .aside h3{font-family:'Cinzel',serif;font-weight:600;font-size:.82em;letter-spacing:.13em;text-transform:uppercase;color:#7a5f2a;margin:0 0 .3em;padding-bottom:.28em;
  background-image:linear-gradient(90deg,rgba(154,122,58,0) 0%,rgba(154,122,58,.55) 6%,rgba(154,122,58,.8) 30%,rgba(154,122,58,.6) 70%,rgba(154,122,58,.18) 94%,rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:100% 1px;background-position:left bottom}
.bench .aside p{margin-top:.5em;text-align:left}
.bench .aside p:first-of-type{margin-top:0}

/* the stone: the token on the book's dark page */
.plate.stone{display:flex;min-width:0}
.plate.stone .page{position:relative;flex:1;min-width:0;margin:4.19vh 2.6vh;background:var(--brown)}
.plate.stone .page::before,.plate.stone .page::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--gold);z-index:2}
.plate.stone .page::before{inset:0}
.plate.stone .page::after{inset:7px;opacity:.55}
#stage{position:absolute;inset:8px;overflow:hidden;cursor:crosshair;
  background:radial-gradient(120% 120% at 50% -10%,#2a1f16 0%,#1a1410 60%,#120d09 100%);touch-action:none}
#board{display:block;width:100%;height:100%}
#readout{
  position:absolute;left:14px;bottom:12px;pointer-events:none;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85;
}
#zoomctl{position:absolute;right:14px;bottom:12px;display:flex;gap:4px}
#zoomctl .chip{background:linear-gradient(180deg,#2c1f13,var(--brown));color:#f4e6c2;border-color:var(--gold);font-size:12px;padding:.35em .7em;min-width:2.2em}
/* the at-size column: the token at board scales, down the right edge */
#sizestrip{
  position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 10px 8px;background:rgba(20,13,7,.72);border:1px solid rgba(154,122,58,.55);
}
#sizestrip .cell{display:flex;flex-direction:column;align-items:center;gap:4px}
#sizestrip canvas{display:block;background:transparent}
#sizestrip .sl{font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.toast{
  position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  padding:.5em 1em;background:rgba(20,13,7,.92);border:1px solid var(--gold);color:#f2e3ba;
  font-family:'Crimson Text',serif;font-style:italic;font-size:14px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* the layers */
#layers{margin-top:.1em}
.layer{display:flex;align-items:center;gap:.5em;padding:.4em .5em;margin-bottom:.25em;cursor:pointer;
  background:rgba(255,255,255,.26);border:1px solid rgba(154,122,58,.5);font-size:.92em}
.layer:hover{border-color:var(--gold)}
.layer.on{background:rgba(255,255,255,.6);border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.layer .eye{appearance:none;border:0;background:none;cursor:pointer;color:#5a4520;font-size:1em;width:1.4em;padding:0}
.layer .eye.off{opacity:.3}
.layer .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}
.layer .nm[contenteditable="true"]{background:#fff;padding:0 .2em}
.layer .cnt{font-family:'Cinzel',serif;font-size:.68em;letter-spacing:.08em;color:#9a7a3a}
.layer-btns{margin-top:.4em}

/* the picture's sliders */
.fieldlbl{display:flex;justify-content:space-between;font-family:'Cinzel',serif;font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:#7a5f2a;margin:.7em 0 .15em}
.slider{width:100%;accent-color:#9a7a3a;height:1.1em}
#refTools .chips{margin-top:.6em}

/* narrow screens: the stone first, then the hand, then the layers */
@media (max-width:960px), (max-height:460px){
  main.tessera{display:flex;flex-direction:column}
  main.tessera .leaf.bench,main.tessera .leaf.bench.right{margin:14px;overflow:visible}
  .plate.stone{order:-1;height:88vw;max-height:560px;padding:0}
  .plate.stone .page{margin:14px 14px 0}
  #sizestrip{display:none !important}
  .bench h1{font-size:22px}
}