/* Zone editor. Inherits the library's palette, type and grid through .hl-root,
   so it reads as part of the same site rather than a separate tool. */

#hamina-editor{outline:none}

.ed-load{padding:20px 0 8px}
.ed-load textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid var(--hl-rule);border-radius:2px;background:var(--hl-card);
  color:var(--hl-ink);font-family:var(--hl-mono);font-size:12.5px;line-height:1.6;
  resize:vertical
}
.ed-load textarea:focus{outline:2px solid var(--hl-accent);outline-offset:1px}

.ed-main{
  display:grid;grid-template-columns:1fr 340px;gap:18px;
  align-items:start;padding:14px 0 8px
}
.ed-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.ed-stage{border:1px solid var(--hl-rule);border-radius:2px;background:var(--hl-card);overflow:hidden}

.ed-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 10px;border-bottom:1px solid var(--hl-rule2);background:var(--hl-sheet)
}
.ed-tool{
  border:1px solid var(--hl-rule);background:var(--hl-card);color:var(--hl-ink2);
  padding:5px 9px;border-radius:2px;cursor:pointer;
  font-family:var(--hl-mono);font-size:10.5px;letter-spacing:.06em;white-space:nowrap
}
.ed-tool:hover{border-color:var(--hl-accent);color:var(--hl-accent)}
.ed-tool.ed-mini{padding:3px 7px;font-size:10px}
.ed-sep{
  width:3px;height:24px;border-radius:2px;background:var(--hl-grad);
  flex:none;margin:0 4px
}
.ed-flex{flex:1}
.ed-readout{
  font-family:var(--hl-mono);font-size:10.5px;color:var(--hl-ink3);
  letter-spacing:.06em;white-space:nowrap
}

.ed-plan{position:relative;background:#fff;cursor:crosshair;user-select:none}
.ed-elev{border-top:1px solid var(--hl-rule2);background:rgba(17,26,33,.02)}
.ed-svg{display:block;width:100%;height:auto}

.ed-grid line{stroke:#111A21;stroke-opacity:.07;stroke-width:1}
.ed-grid line.ed-axis{stroke-opacity:.22}
.ed-rule{stroke:#111A21;stroke-opacity:.09;stroke-width:1}
.ed-ground{stroke:#111A21;stroke-width:1.4}
.ed-tick{fill:var(--hl-ink3);font-family:var(--hl-mono);font-size:9px;text-anchor:end}
.ed-zone{cursor:pointer}
.ed-zone.is-sel{cursor:move}
.ed-marquee{fill:var(--hl-accent);fill-opacity:.08;stroke:var(--hl-accent);
  stroke-width:1;stroke-dasharray:4 3}

.ed-help{
  margin:0;padding:9px 12px;border-top:1px solid var(--hl-rule2);
  font-size:12px;color:var(--hl-ink2);background:var(--hl-sheet)
}

.ed-rail{display:flex;flex-direction:column;gap:12px}
.ed-panel{
  border:1px solid var(--hl-rule);border-radius:2px;background:var(--hl-card);padding:14px 15px
}
.ed-panel h3{
  font-family:var(--hl-cond);font-size:15px;font-weight:700;margin:0 0 10px;
  letter-spacing:.01em;text-transform:uppercase
}
.ed-note{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--hl-ink2)}

.ed-rotate{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:5px}
.ed-rotate .ed-tool{padding:6px 2px;text-align:center;font-size:10px}

.ed-inline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px}
.ed-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-panel label{
  display:block;font-family:var(--hl-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--hl-ink3);margin:0
}
.ed-panel input[type=text],.ed-panel select{
  width:100%;box-sizing:border-box;margin-top:3px;padding:6px 8px;
  border:1px solid var(--hl-rule);border-radius:2px;background:#fff;color:var(--hl-ink);
  font-family:var(--hl-mono);font-size:12px
}
.ed-inline input[type=text]{width:auto;flex:0 1 80px;margin-top:0}
.ed-inline select{width:auto;flex:0 0 auto;margin-top:0}
.ed-panel input:focus,.ed-panel select:focus{outline:2px solid var(--hl-accent);outline-offset:1px}

.ed-check{
  display:flex;gap:8px;align-items:flex-start;margin-top:9px;
  font-family:var(--hl-body);font-size:12px;text-transform:none;letter-spacing:0;
  color:var(--hl-ink2);cursor:pointer
}
.ed-check input{width:auto;margin:2px 0 0;accent-color:var(--hl-accent)}

.hl-root .hl-btn.hl-small{padding:6px 11px;font-size:10px}

.ed-types-panel{padding:16px 18px}
.ed-types-table{width:100%;border-collapse:collapse;font-size:13px}
.ed-types-table th{
  font-family:var(--hl-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--hl-ink3);font-weight:500;text-align:left;padding:0 10px 8px 0;
  border-bottom:1px solid var(--hl-rule);white-space:nowrap
}
.ed-types-table td{
  padding:6px 10px 6px 0;border-bottom:1px solid var(--hl-rule2);vertical-align:middle
}
.ed-types-table tr.is-sel td{background:rgba(142,47,92,.06)}
.ed-c-sw{width:72px}
.ed-c-band{width:82px;text-align:right}
.ed-c-db{width:82px;text-align:right}
.ed-c-n{width:56px;text-align:right}
.ed-types-table td.ed-c-band,.ed-types-table td.ed-c-db{text-align:right}
.ed-types-table td.ed-c-n{text-align:right}

.ed-swatch{
  display:block;width:54px;height:24px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(17,26,33,.28);position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)
}
.ed-swatch input{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;margin:0;cursor:pointer
}
.ed-swatch:hover{border-color:var(--hl-accent)}
.ed-hex{
  display:block;margin-top:3px;font-family:var(--hl-mono);font-size:9.5px;
  letter-spacing:.03em;color:var(--hl-ink3)
}
.ed-tname{
  width:100%;box-sizing:border-box;padding:5px 7px;
  border:1px solid transparent;border-radius:2px;background:transparent;
  color:var(--hl-ink);font-family:var(--hl-body);font-size:13px
}
.ed-tname:hover{border-color:var(--hl-rule);background:#fff}
.ed-num{
  width:100%;box-sizing:border-box;padding:5px 7px;text-align:right;
  border:1px solid var(--hl-rule);border-radius:2px;background:#fff;color:var(--hl-ink);
  font-family:var(--hl-mono);font-size:12px
}
.ed-db{border-color:var(--hl-accent);font-weight:500}
.ed-tname:focus,.ed-num:focus{outline:2px solid var(--hl-accent);outline-offset:1px}

/* rotation: direction is stated, not left to be inferred from an arrow */
.ed-rot-group{margin-bottom:9px}
.ed-rot-label{
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
  font-family:var(--hl-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--hl-ink3)
}
.ed-arrow{font-size:15px;line-height:1;color:var(--hl-accent)}
.ed-rotate{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ed-rotate .ed-tool{padding:7px 2px;text-align:center;font-size:10.5px}
.ed-ccw .ed-tool:hover{border-color:#1F6F8B;color:#1F6F8B}
.ed-cw .ed-tool:hover{border-color:var(--hl-accent);color:var(--hl-accent)}

/* every dimension field states its unit */
.ed-unit{position:relative;display:block;margin-top:3px}
.ed-unit input{width:100%;box-sizing:border-box;padding-right:26px !important;margin-top:0 !important}
.ed-unit i{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-style:normal;font-family:var(--hl-mono);font-size:11px;color:var(--hl-ink3);
  pointer-events:none
}
.ed-unit.ed-narrow{display:inline-block;width:74px;margin-top:0}

.ed-credit{
  margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--hl-ink2)
}
.ed-credit a{color:var(--hl-accent)}

@media (max-width:1000px){
  .ed-main{grid-template-columns:1fr}
  .ed-rail{order:2}
  .ed-types-table{font-size:12px}
  .ed-c-band,.ed-c-db{width:66px}
  .ed-c-sw{width:62px}
}

/* Joel Crane's tool came first; the credit belongs where people will read it,
   not tucked into a footer. */
.ed-inspiration{
  margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--hl-ink3);max-width:74ch
}
.ed-inspiration a{color:var(--hl-ink2)}

/* the row for the selected zone's type, and the way back to the full list */
.ed-types-table tr.is-sel td{
  background:rgba(142,47,92,.09);
  box-shadow:inset 2px 0 0 var(--hl-accent)
}
.ed-types-table tr.is-sel .ed-tname{font-weight:600}
.ed-link{
  border:0;background:none;padding:0;cursor:pointer;
  color:var(--hl-accent);font:inherit;text-decoration:underline
}

.hl-root .hl-btn.hl-go{background:var(--hl-ok);border-color:var(--hl-ok);color:#fff}
.hl-root .hl-btn.hl-go:hover{background:#17573E;border-color:#17573E}
.hl-root .hl-btn:disabled{opacity:.4;cursor:not-allowed}
.hl-root .hl-btn.hl-go:disabled:hover{background:var(--hl-ok);border-color:var(--hl-ok)}
.ed-load .hl-actions{align-items:center;gap:10px;margin-top:12px}
}

/* site styling, continued: the editor's own chrome */
.hl-root .ed-bar{
  background:var(--hl-card);border-bottom:1px solid var(--hl-rule2);
  border-radius:var(--hl-radius) var(--hl-radius) 0 0
}
.hl-root .ed-stage{overflow:hidden}
.hl-root .ed-help{background:var(--hl-card);border-top:1px solid var(--hl-rule2)}
.hl-root .ed-elev{background:#fff;border-top:1px solid var(--hl-rule2)}
.hl-root .ed-rot-label,
.hl-root .ed-panel label,
.hl-root .ed-types-table th{font-family:inherit;letter-spacing:.02em}
.hl-root .ed-types-table th{text-transform:none;font-size:11.5px}
.hl-root .ed-rot-label{text-transform:none;font-size:12px}
.hl-root .ed-panel label{text-transform:none;font-size:12px}
.hl-root .ed-types-table tr.is-sel td{background:var(--hl-accent-soft)}
.hl-root .ed-swatch{border-radius:6px}

/* plan / 3D switch in the editor toolbar */
.hl-root .ed-tool.is-on{
  background:var(--hl-grad);border-color:transparent;color:#fff
}
.hl-root .ed-tool.is-on:hover{
  background:var(--hl-grad);border-color:transparent;color:#fff;filter:brightness(1.08)
}

/* the mode pair sits apart from the plain tools */
.hl-root .ed-bar .ed-tool[data-ed="mode-plan"],
.hl-root .ed-bar .ed-tool[data-ed="mode-3d"]{padding:5px 14px;letter-spacing:.04em}