/* ==========================================================================
   STEEL AGE — The Weaver, Scene ground on the site
   Loaded after steelage.css and builder.css. Three panels on the spread, as
   Tessera: a leaf for the weaver's form, the stone in the middle (the woven
   site), and a leaf for the battlemat cut from it. Below 960px the three
   stack, stone first.
   ========================================================================== */

main.ground{display:grid;grid-template-columns:minmax(230px,19%) 1fr minmax(260px,22%);gap:0;background:var(--brown)}
main.ground .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.ground .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 .row{gap:.5em;display:flex;align-items:flex-end}
.bench .row > .field{min-width:0;flex:1}
.bench .row > .field.narrow{flex:0 0 6.2em;min-width:6.2em}
.bench [hidden]{display:none!important}
.bench .field{display:block;margin-top:.45em;font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#7a5f2a}
.bench .field select,.bench .field input[type=text],.bench .field input[type=number]{display:block;width:100%;margin-top:.3em;padding:.5em .6em;font:inherit;font-family:'Crimson Text',serif;font-size:1.5em;letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(255,250,236,.65);border:1px solid rgba(154,122,58,.6)}
.bench .field select{padding-right:1.8em}
.bench .field input[type=range]{display:block;width:100%;margin-top:.4em;accent-color:#7a5f2a}
.bench .field output{color:var(--ink-soft);letter-spacing:0;text-transform:none;font-family:ui-monospace,Menlo,monospace;margin-left:.5em}
.bench .inline-actions{margin-top:.8em}
.bench .cta{font-size:.72em;padding:.55em 1.1em}
.bench .cta:disabled{opacity:.45;cursor:default}
.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,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}
.bench .aside p{margin-top:.5em;text-align:left}
.bench .aside p:first-of-type{margin-top:0}
.toggles{display:flex;flex-wrap:wrap;gap:.4em 1em;margin-top:.6em}
.toggle{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:#7a5f2a;display:inline-flex;align-items:center;gap:.45em;cursor:pointer}
.toggle input{accent-color:#7a5f2a}

/* the stone: the site on the book's dark page */
main.ground .stone{display:grid;grid-template-rows:auto 1fr auto;gap:.6em;min-width:0;padding:4.19vh 2vw;background:#1b1a14;color:#e9dcb2}
.stone-head{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.stone .status{margin:0;font-family:'Cinzel',serif;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:#d9c48f}
.stone .status.bad{color:#ff9b73}
.stone .toggle{color:#d9c48f}
.site-wrap{position:relative;min-height:0;display:grid;place-items:center}
.site-wrap canvas{max-width:100%;height:auto;display:block;box-shadow:0 0 0 1px rgba(255,244,203,.18),0 18px 40px rgba(0,0,0,.45)}
.site-wrap #gBox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:crosshair;box-shadow:none;touch-action:none}
.stone-actions{justify-content:center;gap:.5em;display:flex;flex-wrap:wrap}
.stone .chip{font-size:.66em;padding:.5em .8em;color:#e9dcb2;border-color:rgba(233,220,178,.45);background:rgba(255,244,203,.06)}
.stone .chip:hover{border-color:#fff4cb}

/* the right leaf: the battlemat */
.mat-wrap[hidden]{display:none}
.mat-wrap{margin-top:.6em;background:#1b1a14;padding:.4em;display:grid;place-items:center;max-height:46vh;overflow:auto}
.mat-wrap canvas{max-width:100%;height:auto;display:block;image-rendering:auto}
.key{list-style:none;margin:.3em 0 0;padding:0;display:grid;gap:.3em;font-size:.86em}
.key li{display:grid;grid-template-columns:1.4em 1fr;grid-template-rows:auto auto;column-gap:.5em;align-items:center}
.key li i{grid-row:1/3;width:1.3em;height:1.3em;border:1px solid rgba(44,36,27,.45)}
.key li i.canopy{background:radial-gradient(circle,#2b4a2b 0 35%,#8a9a6a 36%)}
.key li i.band{background:linear-gradient(90deg,#8a8a70,#4a4a3a)}
.key li b{font-weight:600}
.key li small{color:var(--ink-soft);font-size:.8em;line-height:1.3}

@media (max-width:960px){
  main.ground{grid-template-columns:1fr}
  main.ground .leaf.bench,main.ground .leaf.bench.right{margin:3vh 4vw}
  main.ground .stone{order:-1;padding:3vh 4vw}
  .mat-wrap{max-height:none}
}