/* ==========================================================================
   STEEL AGE — The Map of Omskos
   Loaded after steelage.css, builder.css and ground.css: the Weaver's three
   panels (a leaf, the stone, a leaf) with the map filling the stone.
   ========================================================================== */

/* the three panels share their top and bottom lines: the stone takes the sheets' margins */
main.omskos{grid-template-rows:minmax(0,1fr)}
main.omskos .stone{grid-template-rows:auto minmax(0,1fr) auto;margin:4.19vh 0;min-height:0}
main.omskos .leaf.bench{min-height:0}
main.omskos .leaf.bench{padding-bottom:clamp(26px,4.6vh,52px)}   /* the last line of a card breathes before the sheet's edge */
main.omskos .stone-head{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:1em;row-gap:.25em;align-items:center}
main.omskos .stone-head .how{grid-column:1;margin:0;font-family:'Crimson Text',serif;font-style:italic;font-size:.92em;color:#e9dcb2}
main.omskos .stone-head .status{grid-column:1}
main.omskos .stone-head .map-controls{grid-column:2;grid-row:1/3}
.counts{margin-top:.8em}
.map-wrap{position:relative;min-height:0;height:100%;min-height:52vh;background:#1b1a14;box-shadow:0 0 0 1px rgba(255,244,203,.18),0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.map-wrap canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;outline:none}
.map-wrap canvas:active{cursor:grabbing}
.map-controls{gap:.35em;display:flex;align-items:center}
.map-controls .chip{min-width:2.2em;text-align:center}
.stone .chip:disabled{opacity:.4}

/* the places */
.bench .field input[type=search]{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)}
.places{list-style:none;margin:.5em 0 0;padding:0;max-height:62vh;overflow:auto;overscroll-behavior:contain;display:grid;gap:2px;font-size:.92em;scrollbar-width:thin;scrollbar-color:rgba(154,122,58,.6) transparent}
/* on a desk the list does not scroll on its own: the rail scrolls as one, with the one bar at the sheet's edge */
@media (min-width:961px){
  main.omskos .leaf.bench.left .places{max-height:none;overflow:visible}
}
main.omskos .leaf.bench{scrollbar-width:thin;scrollbar-color:rgba(154,122,58,.6) transparent}
.places li button{all:unset;display:flex;justify-content:space-between;align-items:baseline;gap:.6em;width:100%;box-sizing:border-box;padding:.28em .4em;cursor:pointer;border-bottom:1px dotted rgba(154,122,58,.35)}
.places li button:hover,.places li button:focus-visible{background:rgba(154,122,58,.14)}
.places li b{font-weight:600}
.places li small{font-family:'Cinzel',serif;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:#7a5f2a}

/* the key: the map's colours, on the map itself, in the scale bar's dark glass; the Key chip shows or hides it */
.map-key{position:absolute;top:10px;right:10px;z-index:2;max-width:min(46%,21em);padding:.55em .7em .45em;background:rgba(27,26,20,.78);border:1px solid rgba(255,244,203,.22);color:#e9dcb2;font-size:.78em;line-height:1.25;backdrop-filter:blur(2px);pointer-events:none}
.map-key[hidden]{display:none}
.legend{margin:0;grid-template-columns:1fr 1fr;column-gap:.8em;row-gap:.22em;font-size:1em}
.legend li{grid-template-columns:1.1em 1fr;grid-template-rows:auto;column-gap:.4em;align-items:center}
.legend li b{font-weight:600;line-height:1.2;color:#e9dcb2}
.legend li i{grid-row:auto;width:1em;height:1em;border:1px solid rgba(255,244,203,.35)}
.map-key .counts{margin:.45em 0 0;padding-top:.35em;border-top:1px solid rgba(255,244,203,.18);font-family:'Crimson Text',serif;font-style:italic;font-size:.95em;color:#cfc19a}

/* the hex card */
.hex-card{margin-top:0;min-height:13em}
.hex-card .hex-id{margin:0;display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap}
.hex-card .hex-id .label{margin:0;flex:0 0 auto}
.hex-card .hex-id i{display:inline-block;width:.95em;height:.95em;border:1px solid rgba(44,36,27,.45);align-self:center}
.hex-card .hex-id code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;color:var(--ink-soft)}
.hex-card h3{font-family:'Cinzel',serif;font-weight:600;font-size:1.3em;letter-spacing:.06em;margin:.3em 0 .15em}
.hex-card .hex-line{margin:0;font-size:.95em;color:var(--ink-soft)}
/* the ground's card, from Chapter VIII: the marks, the miles, the note, the words behind a fold */
.tcard{margin-top:1em;padding:.7em 0 .5em;border-top:1px solid rgba(154,122,58,.45)}
.tcard .label{margin:0 0 .25em}
.tcard h4{font-family:'Cinzel',serif;font-weight:600;font-size:1.12em;letter-spacing:.06em;margin:.1em 0 .45em}
.tcard .art{display:block;width:100%;height:auto;margin:.15em 0 .7em;mix-blend-mode:multiply}
.tcard blockquote{margin:0 0 .65em;padding:0 0 0 .7em;border-left:2px solid rgba(154,122,58,.5);font-style:italic;font-size:.95em;line-height:1.4;color:var(--ink-soft)}
.tcard blockquote cite{display:block;margin-top:.3em;font-style:normal;font-family:'Cinzel',serif;font-size:.6em;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a}
.tcard dl{display:grid;grid-template-columns:1fr 1fr;gap:.1em .9em;margin:0}
.tcard dl div{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;padding:.14em 0;border-bottom:1px dotted rgba(154,122,58,.35)}
.tcard dt{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a}
.tcard dd{margin:0;font-weight:600}
.tcard .pace-title{margin:.65em 0 .1em;font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:#7a5f2a}
.tcard .note{margin:.55em 0 0;font-size:.92em;line-height:1.35}
.tcard details{margin-top:.5em;font-size:.92em;line-height:1.45}
.tcard summary{cursor:pointer;font-family:'Cinzel',serif;font-size:.66em;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a}
.tcard summary:hover{text-decoration:underline}
.tcard details p{margin:.55em 0 0}
.tcard.none .hint{margin-top:.1em}
.near{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:2px;font-size:.92em}
.near li{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;border-bottom:1px dotted rgba(154,122,58,.35);padding:.2em 0}
.near li button{all:unset;cursor:pointer;font-weight:600}
.near li button:hover{text-decoration:underline}
.near li small{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a}
.counts{font-size:.9em}
.counts b{font-family:ui-monospace,Menlo,monospace;font-weight:400;font-size:.9em}

@media (max-width:960px){
  main.omskos .stone{margin:0}
  .map-wrap{height:62vh;min-height:360px}
  .map-key{max-width:min(62%,19em);font-size:.7em;top:8px;right:8px}
  .places{max-height:40vh}
}