/* Box Builder.

   The shell, the rail, the panels, the buttons and the fields all come from
   styles.css. This is a third tool wearing the same chrome, not a second
   design. What is here is only what a drawing needs and a car does not: a
   millimetre field, a ruled board, and a place to stand the solid next to it.

   The one new idea is the dimension field. Everything in this tool is a length
   in millimetres, and a length is read by its number and its unit together, so
   the unit is printed inside the field instead of being written into the label
   or left off entirely. */

.box-builder {
  /* Every tool on this site owns a colour. Red is the livery editor, blue the
     Decal Studio, amber the template. Violet is this one, and it is used for
     exactly what the others use theirs for: the open panel, the active rail
     button, the selection on the board. */
  --tool: var(--c-violet);
  --tool-ink: #fff;
}

.box-builder .toolpanel,
.box-builder .rail-button,
.box-builder .sticker-hud {
  --tool: var(--c-violet);
  --tool-ink: #fff;
}

/* The count of open warnings rides on its rail button, so the badge is
   positioned against it. */
.box-builder .rail-button { position: relative; }

/* The wordmark is artwork, not type: height is what matters in a bar. */
.brand-logo { height: 19px; width: auto; display: block; flex: none; }

/* The project's name is edited where it is displayed, because a box is named
   once and a field for it would be a field that is empty for ever after. */
#projectTitle {
  outline: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: text;
  max-width: 42vw;
  overflow: hidden;
  white-space: nowrap;
}
#projectTitle:hover { border-bottom-color: var(--rule); }
#projectTitle:focus { border-bottom-color: var(--tool); }

/* ---- the two panes ------------------------------------------------------ */

.pane { position: absolute; inset: 0; }
.pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#boardCanvas { background: var(--stage); cursor: default; }

.workspace[data-view="2d"] .pane-3d { display: none; }
.workspace[data-view="3d"] .pane-2d { display: none; }
.workspace[data-view="3d"] .viewbar { display: none; }
.workspace[data-view="3d"] .dim-hud { display: none; }

/* Split puts the drawing and the solid side by side with a drawn seam, the way
   two panels meet on a body shell. Below 1100px there is not enough width for
   two useful views, so split collapses back to the drawing. */
.workspace[data-view="split"] .pane-2d { right: 50%; border-right: 1px solid var(--rule); }
.workspace[data-view="split"] .pane-3d { left: 50%; }

/* Split moves the furniture inside the left half, and the drawing aids have to
   climb over the tool rail to get there: the rail is centred on the window, so
   in split it sits exactly on the seam and lands on top of the bottom-right
   corner of the drawing, which is where the aids live the rest of the time.
   The readout stays — half a wide window is still plenty for it, and the
   numbers are the reason to be in this tool at all. */
.workspace[data-view="split"] .viewbar { right: calc(50% + 14px); bottom: 96px; }
.workspace[data-view="split"] .dim-hud { right: calc(50% + 14px); }

.view-switch { width: auto; }
.view-switch button { padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; }
.view-switch .icon { width: 15px; height: 15px; }

/* ---- the 3D pane -------------------------------------------------------- */

#viewCanvas { background: #0a0b0c; cursor: grab; }
#viewCanvas.turning { cursor: grabbing; }

/* Bottom right, which is where the drawing aids sit in the 2D pane — and the
   drawing aids are hidden whenever this is showing, so the corner is never
   claimed twice. Centred, it landed underneath the tool rail. */
.view-tools {
  position: absolute; z-index: 5; right: 14px; bottom: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px; border: 1px solid var(--edge); border-radius: var(--r-card);
  background: linear-gradient(180deg, #202426, #14181a);
  box-shadow: var(--float-shadow);
}
.part-switch button { padding: 0 10px; font-size: 11px; }

/* What the modeller is doing, stated where the result appears. It is only on
   screen while there is something to say. */
.solid-badge {
  position: absolute; z-index: 5; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 11px;
  border: 1px solid var(--edge); border-radius: 999px;
  background: rgba(20, 23, 25, .9);
  color: var(--ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.solid-badge[hidden] { display: none; }
.solid-badge.is-done { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--edge)); }
.solid-badge.is-bad { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 45%, var(--edge)); }
.solid-spinner {
  width: 10px; height: 10px; flex: none;
  border: 2px solid color-mix(in srgb, var(--tool) 35%, transparent);
  border-top-color: var(--tool);
  border-radius: 50%;
  animation: solid-turn 720ms linear infinite;
}
.solid-badge.is-done .solid-spinner,
.solid-badge.is-bad .solid-spinner { display: none; }
@keyframes solid-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .solid-spinner { animation-duration: 2.4s; }
}

/* ---- the route through the tool ----------------------------------------- */

/* Four chips along the top, in the order the job is actually done. The one you
   are on is lit; the ones behind you carry a tick and their own value, so the
   strip is a status line as much as a set of instructions. It is deliberately
   quiet — a wizard that shouts at somebody who already knows what they are
   doing is worse than no wizard. */
/* It gets a row of its own rather than floating over the drawing. A strip that
   hovers covers the millimetre ruler, and the ruler is the thing that makes
   the drawing worth trusting — the guide must not be paid for out of it. */
.box-builder {
  grid-template-rows: var(--topbar) auto minmax(0, 1fr);
  /* Kept in step with the strip's real height by panel-studio.js. Anything
     sized against the whole window has to know the strip is there: the tool
     panels are, and without this they ran up under it and lost their heads. */
  --steps-h: 49px;
}
.box-builder .toolpanel { max-height: calc(100dvh - var(--topbar) - var(--steps-h) - 36px); }
.steps {
  position: relative; z-index: 6;
  margin: 0; padding: 5px 10px; list-style: none;
  display: flex; align-items: stretch; gap: 2px;
  background: linear-gradient(180deg, #191c1e, #141719);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.steps li { display: flex; align-items: center; min-width: 0; }
.steps li + li::before {
  content: ""; width: 12px; height: 1px; flex: none;
  background: var(--rule);
}
.step {
  display: grid; grid-template-rows: auto auto;
  align-items: center;
  min-width: 0; height: 38px; padding: 0 11px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; text-align: left;
  transition: background var(--t-state) var(--press), border-color var(--t-state) var(--press);
}
.step:hover { background: rgba(255, 255, 255, .05); }
.step span {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); white-space: nowrap;
}
.step em {
  font-style: normal; font-size: 10px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Where you are. */
.step.is-now {
  border-color: color-mix(in srgb, var(--tool) 60%, transparent);
  background: color-mix(in srgb, var(--tool) 15%, transparent);
}
.step.is-now span { color: var(--ink); }

/* Where you have been.

   This used to be a numbered circle that turned into a tick. The number said
   nothing a row read left to right does not already say, and the circle cost
   more width than the step's own name — so the state is carried by the step
   itself now: lit where you are, green behind you, quiet ahead. */
.step.is-done span { color: var(--live); }

/* Which face is on the drawing. Pushed to the far end of the route row, so it
   reads as a separate question from the one the numbered steps are asking. */
.face-pick {
  margin-left: auto;
  display: flex; align-items: center; gap: 2px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}
.face-pick-label {
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding-right: 4px;
}
.face-pick button {
  position: relative;
  height: 26px; padding: 0 9px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  transition: background var(--t-state) var(--press), color var(--t-state) var(--press);
}
.face-pick button:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.face-pick button.selected {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--tool) 60%, transparent);
  background: color-mix(in srgb, var(--tool) 18%, transparent);
}
/* How many cutouts are already on a face you are not looking at. */
.face-pick button b {
  display: inline-block; margin-left: 5px;
  min-width: 14px; padding: 0 3px;
  border-radius: 999px;
  background: var(--rule); color: var(--ink-2);
  font-size: 9px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.face-pick button.selected b { background: color-mix(in srgb, var(--tool) 55%, transparent); color: #fff; }
.face-pick button b:empty { display: none; }

/* ---- the drawing aids bar ----------------------------------------------- */

.viewbar {
  position: absolute; z-index: 7; right: 14px; bottom: 22px;
  display: flex; align-items: center; gap: 3px;
  padding: 5px; border: 1px solid var(--edge); border-radius: var(--r-card);
  background: linear-gradient(180deg, #202426, #14181a);
  box-shadow: var(--float-shadow);
}
.viewbar-button {
  width: 30px; height: 28px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  transition: color var(--t-state) var(--press), background var(--t-state) var(--press);
}
.viewbar-button:hover { color: var(--ink); }
.viewbar-button.selected { color: var(--tool); background: color-mix(in srgb, var(--tool) 15%, transparent); }
.viewbar-button .icon { width: 16px; height: 16px; }
.viewbar-divider { width: 1px; height: 18px; background: var(--rule); margin: 0 3px; }
.viewbar-step {
  display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 6px 0 7px;
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: var(--inset);
}
.viewbar-step input {
  width: 34px; border: 0; background: transparent; outline: 0;
  color: var(--ink); font-size: 11.5px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.viewbar-step em { font-style: normal; font-size: 9.5px; color: var(--ink-3); }
.viewbar-zoom {
  min-width: 44px; padding: 0 4px;
  color: var(--ink-3); font-size: 11px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- the dimension field ------------------------------------------------ */

/* One length, with its unit inside the well. The unit is not decoration: this
   whole tool is a promise that the number you type is the number the caliper
   reads, and printing "mm" beside every one of them is where that promise is
   made visible. */
.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* `hidden` is only a display:none the browser applies when nothing else sets
   display, and this sets grid — so the rectangle's fields kept showing for a
   round hole, empty. Same trap the tool panels hit. */
.dim-grid[hidden] { display: none; }
.dim-field {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px;
  height: 34px; padding: 0 8px 0 9px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--inset);
}
.dim-field.dim-wide { grid-column: 1 / -1; }
.dim-field > span {
  position: absolute; left: 9px; top: -7px;
  padding: 0 4px;
  background: linear-gradient(180deg, #191c1e, #171a1c);
  color: var(--ink-3);
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}
.dim-field input {
  width: 100%; min-width: 0;
  border: 0; background: transparent; outline: 0;
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.dim-field input::-webkit-outer-spin-button,
.dim-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.viewbar-step input::-webkit-outer-spin-button,
.viewbar-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dim-field em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.dim-field:focus-within { border-color: var(--tool); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tool) 24%, transparent); }
.dim-field:focus-within > span { color: var(--tool); }
/* A value the modeller had to pull back into range says so, rather than
   silently disagreeing with the field it is sitting in. */
.dim-field.was-clamped { border-color: var(--c-amber); }

/* Inside the floating readout the labels sit on the panel ground, not the
   panel body's, so the notch has to match that surface instead. */
.dim-hud .dim-field > span { background: linear-gradient(180deg, #16191b, #141719); }
.dim-hud { width: 288px; }

/* ---- what the selection is, in numbers ---------------------------------- */

.edge-readout {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  padding: 1px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--inset);
}
.edge-readout div { display: grid; gap: 1px; padding: 5px 4px; text-align: center; }
.edge-readout dt, .edge-readout b {
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.edge-readout span {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.edge-readout .tight span { color: var(--c-red); }

/* ---- the shape and preset pickers --------------------------------------- */

.shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shape-button {
  display: grid; gap: 6px; justify-items: center;
  padding: 10px 4px 8px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--inset); color: var(--ink-3);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  transition: border-color var(--t-state) var(--press), color var(--t-state) var(--press);
}
.shape-button svg { width: 40px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shape-button:hover { border-color: var(--tool); color: var(--ink); }
.shape-button:active { background: var(--stage); }

.preset-list { display: grid; gap: 4px; }
.preset-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 7px 8px 7px 7px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--inset);
  text-align: left;
  transition: border-color var(--t-state) var(--press);
}
.preset-row:hover { border-color: var(--tool); }
.preset-row svg { width: 22px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.preset-row:hover svg { stroke: var(--tool); }
.preset-row b { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.preset-row small {
  display: block; font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.preset-row i {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 2px 5px;
}

/* ---- the object list ---------------------------------------------------- */

.object-root {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--inset);
}
.object-root .icon { width: 18px; height: 18px; color: var(--tool); }
.object-root strong { font-size: 12px; font-weight: 600; }
.object-root span { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.object-list { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 2px; }
.object-list:empty { display: none; }
.object-list li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px;
  border-radius: var(--r-sm);
}
/* The tree line: these are what is cut into the panel above them, so they are
   drawn hanging off it rather than as a flat list beside it. */
.object-list li::before {
  content: ""; position: absolute; left: -10px; top: 0; bottom: 0;
  border-left: 1px solid var(--rule);
}
.object-list li:last-child::before { bottom: 50%; }
.object-list li::after {
  content: ""; position: absolute; left: -10px; top: 50%; width: 7px;
  border-top: 1px solid var(--rule);
}
.object-list .object-name {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px;
  min-width: 0; height: 28px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font-size: 12px; text-align: left;
}
.object-list .object-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-list .object-name i {
  font-style: normal; width: 9px; height: 9px; flex: none;
  border: 1.4px solid currentColor; color: var(--ink-3);
}
.object-list .object-name i.round { border-radius: 50%; }
.object-list .object-name i.soft { border-radius: 2.5px; }
.object-list .object-name em {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 1px 4px; white-space: nowrap;
}
.object-list li.is-elsewhere .object-name { color: var(--ink-3); }
.object-list li.is-elsewhere:hover .object-name em { color: var(--tool); border-color: var(--tool); }
.object-list li:hover .object-name { background: rgba(255,255,255,.045); color: var(--ink); }
.object-list li.selected .object-name {
  background: color-mix(in srgb, var(--tool) 22%, transparent);
  border-color: color-mix(in srgb, var(--tool) 55%, transparent);
  color: var(--ink);
}
.object-list li.is-hidden .object-name { opacity: .45; }
.object-list .object-name input {
  width: 100%; min-width: 0; height: 22px; padding: 0 4px;
  border: 1px solid var(--tool); border-radius: 4px;
  background: var(--stage); color: var(--ink); font-size: 12px; outline: 0;
}
.object-tools { display: flex; gap: 1px; opacity: 0; transition: opacity var(--t-state) var(--press); }
.object-list li:hover .object-tools,
.object-list li.selected .object-tools,
.object-list li.is-hidden .object-tools,
.object-list li.is-locked .object-tools { opacity: 1; }
.object-tools button {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink-3);
}
.object-tools button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.object-tools button.on { color: var(--c-amber); }
.object-tools .icon { width: 14px; height: 14px; }

/* ---- what the rail says without being opened ---------------------------- */

.rail-badge {
  position: absolute; top: 5px; right: 7px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--c-amber); color: #1a1200;
  font-size: 9px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rail-badge[hidden] { display: none; }
.rail-badge.is-bad { background: var(--c-red); color: #fff; }

/* ---- the check report --------------------------------------------------- */

.issue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.issue-list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--rule); border-left-width: 2px; border-radius: var(--r);
  background: var(--inset);
}
.issue-list .icon { width: 16px; height: 16px; margin-top: 1px; }
.issue-list li.warn { border-left-color: var(--c-amber); }
.issue-list li.warn .icon { color: var(--c-amber); }
.issue-list li.bad { border-left-color: var(--c-red); }
.issue-list li.bad .icon { color: var(--c-red); }
.issue-list li.good { border-left-color: var(--live); }
.issue-list li.good .icon { color: var(--live); }
.issue-list b { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.issue-list small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--ink-3); }
.issue-list button.locate {
  justify-self: start; margin-top: 5px; padding: 0;
  border: 0; background: transparent; color: var(--tool);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}

.solid-report {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  padding: 1px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--inset);
}
.solid-report div { padding: 7px 9px; display: grid; gap: 2px; }
.solid-report b {
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.solid-report span { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.solid-report .ok span { color: var(--live); }
.solid-report .no span { color: var(--c-red); }

/* A partial row of icon buttons keeps the width of a full one, so the two
   rows read as one block rather than as two different controls. */
.align-row-part { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); }

/* A row of what the array is about to make, so a count and a gap are seen
   before they are committed rather than after. */
.preview-strip {
  height: 76px; padding: 6px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--inset); overflow: hidden;
}
.preview-strip svg { width: 100%; height: 100%; display: block; }
/* With nothing selected there is nothing to repeat, so the picture of what
   would happen is dimmed with the button that would do it. */
.preview-strip.is-idle { opacity: .38; }

/* ---- narrow windows ----------------------------------------------------- */

/* Two useful views need room. Below this there is not enough of it, so split
   falls back to the drawing and everything goes back where it was. */
@media (max-width: 1100px) {
  .workspace[data-view="split"] .pane-2d { right: 0; border-right: 0; }
  .workspace[data-view="split"] .pane-3d { display: none; }
  .workspace[data-view="split"] .viewbar { right: 14px; bottom: 22px; display: flex; }
  .workspace[data-view="split"] .dim-hud { right: 14px; }
}

/* Below 900 the shared stylesheet turns every tool panel into a bottom sheet
   and the rail into a bar, which is the right shape for a touch screen and is
   what the other two tools do. Only two things need saying here.

   The sheet is sized for the decal editor's readout, which is a column of
   sliders; this one is a short grid of numbers and does not need half the
   screen. And the drawing aids move to the top, because the bottom of the
   stage is now furniture all the way across. */
@media (max-width: 1240px) {
  /* The value under each step is the first thing to go: the step names alone
     still say what the order is. */
  .step em { display: none; }
  .step { height: 30px; }
}

@media (max-width: 900px) {
  .topbar-left .button span { display: none; }
  /* On a touch screen the rail at the bottom is the way around the tool, and
     a second row of chips over the drawing costs more room than it gives. */
  .steps { display: none; }
  .topbar-left .button { padding: 0 9px; }
  .view-switch button span { display: none; }

  .box-builder:has(.sticker-hud:not([hidden])) { --sheet: 262px; }
  .dim-hud .hud-body { padding: 12px 12px 14px; }
  .dim-hud .dim-field > span { background: linear-gradient(180deg, #16191b, #141719); }

  .viewbar { bottom: auto; top: 12px; right: 12px; }
  .viewbar-zoom { display: none; }
  .view-tools { bottom: auto; top: 12px; right: 12px; }
}

@media (max-width: 520px) {
  /* A millimetre drawing needs the room. The aids keep working from the
     keyboard and stay on; only their bar goes. */
  .viewbar { padding: 3px; }
  .viewbar-step { display: none; }
}