/* Slipway 3D view: the canvas and what the viewer draws over it. Owner: viewer.
   Every value comes from tokens.css. The markup is made by js/viewer/index.js. */

/* ------------------------------------------------------------------ the view fills the window */
.view {
  position: absolute; inset: 0;
  background: radial-gradient(115% 85% at 50% 40%, var(--space-core) 0%, var(--space-mid) 46%, var(--space-edge) 100%);
}
.view__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.view__canvas:active { cursor: grabbing; }
/* the player view: nothing is grabbed, the mouse looks around */
.view__canvas.is-player, .view__canvas.is-player:active { cursor: crosshair; }
/* a frame around the whole window would follow a player everywhere: the line under the view says instead who has the keyboard */
.view__canvas.is-player:focus-visible { outline: none; }
/* how the player view is used: one line above the tools, in the area the panels leave free */
.view__walk {
  position: absolute; left: var(--free-left, 0); right: var(--free-right, 0); bottom: calc(var(--free-bottom, 0px) + var(--s-3));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1) var(--s-4);
  margin: 0 auto; padding: var(--s-2) var(--s-4); width: fit-content; max-width: calc(100% - var(--free-left, 0px) - var(--free-right, 0px) - var(--s-4) * 2);
  border: var(--hair) solid var(--warm-line); border-radius: var(--r-2); background: var(--hull-glass);
  color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-snug); pointer-events: none;
}
.view__walk.is-away { border-color: var(--line-strong); }
.view__walk > b { color: var(--warm); font-weight: 600; }
.view__walk span { white-space: nowrap; }
.view__walk kbd { margin-right: var(--s-1); }
.view__walk .num { color: var(--ink); font-weight: 500; }
/* how fast the view is drawn and what it holds: a card in the top left corner of the area the panels leave free, shown on request */
.view__meter {
  position: absolute; left: calc(var(--free-left, 0px) + var(--s-3)); top: calc(var(--free-top, 0px) + var(--s-3));
  max-width: min(var(--w-menu), calc(100% - var(--free-left, 0px) - var(--free-right, 0px) - var(--s-3) * 2));
  padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--line-strong); border-radius: var(--r-2); background: var(--hull-glass);
  color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-snug); pointer-events: none;
}
.view__meter dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; }
.view__meter dt { color: var(--ink-3); white-space: nowrap; }
.view__meter dd { margin: 0; min-width: 0; }
.view__meter dd b { color: var(--ink); font-weight: 600; }
.view__meter dd b.is-rest { color: var(--ink-3); }
.view__meter dd small { display: block; color: var(--ink-3); font-size: inherit; }
/* in the split view the two tags of the line are at that height: the card goes under them */
.split:not([hidden]) ~ .view__meter { top: calc(var(--free-top, 0px) + var(--s-3) + var(--h-control)); }
.view__canvas:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
.view__leaders, .view__labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.vleader { stroke: var(--warm-line); stroke-width: var(--hair); }

/* ------------------------------------------------------------------ labels placed by the viewer (left and top come from a transform) */
.vlabel {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-1) var(--s-3); white-space: nowrap;
  border: var(--hair) solid var(--line-strong); border-radius: var(--r-1); background: var(--hull-glass);
  color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-tight);
}
.vlabel b { font-weight: 600; }
.vlabel i { font: 400 var(--fs-small)/var(--lh-tight) var(--font-num); font-style: normal; color: var(--ink); }
.vlabel small { font: 400 var(--fs-label)/var(--lh-tight) var(--font-num); color: var(--ink-3); }
.vlabel--zone { border-color: var(--cold-line); color: var(--cold); }
.vlabel--grid { background: transparent; border-color: transparent; color: var(--ink-2); }
.vlabel--core { flex-direction: column; align-items: flex-start; gap: var(--hair); border-color: var(--warm-line); color: var(--warm); }
.vlabel--core i { font: 400 var(--fs-small)/var(--lh-tight) var(--font-ui); color: var(--ink-2); }
/* while the arrow keys move the core unit */
.vlabel--core.is-moving { border-color: var(--warm); background: var(--hull); }
.vlabel--core.is-moving i { color: var(--ink); }
.vlabel--dim { flex-direction: column; align-items: center; gap: var(--hair); }
.vlabel--scan { flex-direction: column; align-items: flex-start; gap: var(--hair); border-color: var(--cold-line); color: var(--cold-strong); }
.vlabel--scan.is-failed { border-color: var(--hot-line); color: var(--hot); }
/* the start screen explains the box, the core and the grid: a title line and one sentence */
.vlabel--teach { flex-direction: column; align-items: flex-start; gap: var(--s-1); max-width: 15rem; padding: var(--s-2) var(--s-3); white-space: normal; background: var(--hull); }
.vlabel--teach > span { display: flex; align-items: baseline; gap: var(--s-3); white-space: nowrap; }
.vlabel--teach small { font: 400 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--ink-2); }
.vlabel--teach.vlabel--core small, .vlabel--teach.vlabel--zone small { color: var(--ink-2); }
.vlabel--grid, .vlabel--teach:not(.vlabel--zone):not(.vlabel--core) { border-color: var(--line-control); color: var(--ink); }

/* ------------------------------------------------------------------ split view: a line the user drags between the model and the blueprint.
   The line, the grip and the two tags stay inside the free area (--free-* are set by setFreeArea). */
.split { position: absolute; inset: 0; pointer-events: none; }
.split__line { position: absolute; top: var(--free-top, 0px); bottom: var(--free-bottom, 0px); left: var(--x, 50%); width: var(--hair); background: var(--ink); opacity: var(--o-muted); }
.split__grip {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%;
  display: flex; align-items: center; justify-content: center; width: var(--h-control-lg); height: var(--icon-xl);
  border: var(--hair) solid var(--ink-2); border-radius: var(--r-2); background: var(--hull); color: var(--ink);
  pointer-events: auto; cursor: ew-resize; touch-action: none; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.split__grip .icon { margin: 0 calc(var(--s-1) * -1); }
.split__grip:hover { background: var(--hull-raise-2); border-color: var(--ink); }
.split__grip:active { background: var(--hull-sunk); }
.split__tag {
  position: absolute; top: calc(var(--free-top, 0px) + var(--s-3)); display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-1); background: var(--hull-glass);
  color: var(--ink-2); font: 600 var(--fs-small)/var(--lh-tight) var(--font-ui); white-space: nowrap;
}
.split__tag--left { right: calc(100% - var(--x, 50%) + var(--s-4)); }
.split__tag--right { left: calc(var(--x, 50%) + var(--s-4)); color: var(--cold); border-color: var(--cold-line); }

/* ------------------------------------------------------------------ axes indicator */
.gizmo { width: var(--gizmo); height: var(--gizmo); overflow: visible; }
.gizmo--free { position: absolute; left: calc(var(--free-left, 0px) + var(--s-3)); bottom: calc(var(--free-bottom, 0px) + var(--s-3)); pointer-events: none; }
.gizmo line { stroke-width: var(--stripe); stroke-linecap: square; }
.gizmo text { font: 700 var(--fs-label)/1 var(--font-num); text-anchor: middle; fill: var(--ink-inverse); }
.gz-ring { fill: var(--hull-glass); stroke: var(--line-strong); }
.gz-neg { stroke: var(--line-control); }
.gz-X line { stroke: var(--warm); } .gz-X circle { fill: var(--warm); }
.gz-Y line { stroke: var(--cold); } .gz-Y circle { fill: var(--cold); }
.gz-Z line { stroke: var(--ink); } .gz-Z circle { fill: var(--ink); }

/* shown in place of the view when WebGL cannot start */
.view__fail { position: absolute; inset: 0; display: grid; place-items: center; }