/* viewer layout; controls and type come from cwandt.css + style.css */
main { display: flex; flex: 1 1 auto; min-height: 0; }
#viewport { flex: 1 1 auto; position: relative; min-width: 0; }
#viewport canvas { display: block; }
footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 6px var(--sp-4); border-top: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-12); color: var(--ink-faint); flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.drop {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8);
  color: var(--ink-faint); font-size: var(--fs-14); pointer-events: none;
}
.drop-hint { font-size: var(--fs-12); }
#viewport.dragover { outline: var(--bw-bold) solid var(--ink); outline-offset: -2px; }
button.ghost.on { border-color: var(--ink); }
/* the preset dropdown dresses as a toolbar button */
select.ghost {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 10px 28px 10px 18px; font-weight: 700; font-size: var(--fs-14);
  text-transform: uppercase; letter-spacing: 0.06em; border-color: var(--rule);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: opacity var(--dur-fast) var(--ease);
}
select.ghost:hover { opacity: 0.55; }
:root[data-theme="dark"] select.ghost { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23fff'/%3E%3C/svg%3E"); }
#viewport canvas.oncap { cursor: grab; }
#viewport canvas.oncap:active { cursor: grabbing; }
.sect { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); letter-spacing: var(--ls-label); }
.sect input[type=range] { width: 120px; accent-color: var(--ink); }
.sect button { font-size: var(--fs-12); padding: 4px 8px; }
.drop[hidden] { display: none; }
#look { font: inherit; font-size: var(--fs-12); border: var(--bw-hair) solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0; height: 36px; }
.measure-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mlabel { position: absolute; pointer-events: auto; cursor: pointer; transform: translate(-50%, -140%); background: var(--paper); color: var(--ink); border: var(--bw-hair) solid var(--signal-red); padding: 1px 6px; font-size: var(--fs-12); white-space: nowrap; }
/* markup, shared by both viewports */
.markup-tools { position: absolute; right: var(--sp-3); top: var(--sp-3); display: flex; gap: var(--sp-1); z-index: 2; }
.markup-tools button { font-size: var(--fs-12); padding: 4px 8px; background: var(--paper); }
.note-label, .note-input { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: var(--paper); color: var(--ink); border: var(--bw-hair) solid var(--signal-red); padding: 1px 6px; font: inherit; font-size: var(--fs-12); white-space: nowrap; pointer-events: none; }
.note-input { pointer-events: auto; width: 180px; outline: none; border-radius: 0; }
.note-label[hidden] { display: none; }
/* body list */
.bodies { position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: 2; display: flex; flex-direction: column; gap: 2px; max-height: 60%; overflow: auto; background: var(--paper); border: var(--bw-hair) solid var(--rule); padding: var(--sp-2); font-size: var(--fs-12); letter-spacing: var(--ls-label); }
.bodies[hidden] { display: none; }
.bodies label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; white-space: nowrap; }
.bodies input { accent-color: var(--ink); margin: 0; }
.bodies span:hover { text-decoration: underline; }
.load-error { color: var(--signal-red); max-width: 60ch; }
.load-error:empty { display: none; }

/* right-click menu and hover tips */
#ctx { position: fixed; z-index: 20; display: flex; flex-direction: column; min-width: 200px; background: var(--paper); border: var(--bw-hair) solid var(--ink); padding: 2px; }
#ctx[hidden] { display: none; }
#ctx button { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); border: 0; border-left: 2px solid transparent; padding: 5px 8px; font-size: var(--fs-12); text-align: left; }
#ctx button.on { border-left-color: var(--ink); }
#ctx hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: 2px 0; }
#ctx kbd, #tip kbd { font: inherit; color: var(--ink-faint); }
#tip { position: fixed; z-index: 21; background: var(--paper); color: var(--ink); border: var(--bw-hair) solid var(--ink); padding: 3px 7px; font-size: var(--fs-12); letter-spacing: var(--ls-label); pointer-events: none; white-space: nowrap; }
#tip[hidden] { display: none; }