/**
 * The chrome around the drawing.
 *
 * Laid out as AutoCAD is, because that is the whole request: a ribbon of tool panels
 * whose tab row also carries the file name and the quick access buttons, the drawing
 * with palettes beside it and the command line floating over its foot, and a status
 * bar of toggles at the bottom. Somebody who knows AutoCAD should be able to find
 * things without being told where they are.
 *
 * The one screen rule worth stating: the canvas is the only thing that grows. Every
 * other band has a fixed height, so the drawing area is as large as the window
 * allows and nothing reflows while you work. The command line takes no band of its
 * own for the same reason.
 */

:root {
  color-scheme: dark;

  /* The greys are AutoCAD's dark theme, near enough: the canvas is the darkest
     thing on screen and the chrome sits a step above it. */
  --canvas: #20232a;
  --chrome: #2c313a;
  --chrome-high: #353b45;
  --chrome-low: #23272e;
  --panel: #2f353f;
  --line: #404754;
  --line-soft: #363c47;

  --text: #e4e8ee;
  --text-dim: #9aa3b0;
  --text-faint: #6d7685;

  --accent: #4f9dff;
  --accent-soft: rgba(79, 157, 255, 0.16);
  --warn: #ffb24d;
  --danger: #ff6b6b;
  --ok: #5ad48b;
  --select: #ffd83d;

  --ribbon-h: 104px;
  --radius: 5px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden; /* the app manages its own scrolling; the page never scrolls */
}

body {
  background: var(--chrome-low);
  color: var(--text);
  font: 13px/1.45 var(--sans);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* `hidden` loses to any class that sets a display, and several here do. */
[hidden] {
  display: none !important;
}

.muted {
  color: var(--text-dim);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

/* Rows of small controls are everywhere in this layout; one focus ring for all. */
:where(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* ---------- Title bar ---------- */

/* The ribbon's top row: the file on the left, then the tabs, then the quick access
   buttons pushed to the right. One row instead of two gives the drawing the height. */
.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 10px;
  height: 36px;
  background: var(--chrome-low);
}

.titlebar__brand {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--accent);
  color: #0f1217;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.titlebar__brand:hover {
  background: #6fb0ff;
}

.titlebar__caret {
  font-size: 10px;
  opacity: 0.7;
}

.titlebar__file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

/* The file name is an input rather than a label with a pencil next to it: renaming
   a drawing is typing in it, which is one fewer thing to explain. It is as wide as
   the name where the browser can do that, so the tabs sit right after it. */
.titlebar__name {
  min-width: 0;
  width: 180px;
  max-width: 280px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  text-overflow: ellipsis;
}

@supports (field-sizing: content) {
  .titlebar__name {
    field-sizing: content;
    width: auto;
    min-width: 6ch;
  }
}

.titlebar__name:hover {
  border-color: var(--line);
}

.titlebar__name:focus {
  background: var(--canvas);
  border-color: var(--accent);
}

.titlebar__state {
  flex: none;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.titlebar__state[data-state='saving'] {
  color: var(--accent);
}

.titlebar__state[data-state='error'] {
  color: var(--danger);
}

.titlebar__quick {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-left: auto;
}

.titlebar__sep {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line);
}

.titlebar > .titlebar__sep {
  margin: 0;
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.iconbtn:hover:not(:disabled) {
  background: var(--chrome-high);
  border-color: var(--line);
  color: var(--text);
}

.iconbtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.linkbtn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
}

.linkbtn:hover {
  text-decoration: underline;
}

/* ---------- Ribbon ---------- */

.ribbon {
  min-width: 0;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
}

/* The tabs fill the title bar's height, so the active one runs straight down into
   the panels under it. */
.ribbon__tabs {
  display: flex;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.ribbon__tab {
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.ribbon__tab:hover {
  color: var(--text);
}

.ribbon__tab[aria-selected='true'] {
  background: var(--chrome);
  border-bottom-color: var(--accent);
  color: var(--text);
}

.ribbon__body {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--ribbon-h);
  padding: 6px 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* One tab's worth of panels. Only the active tab's group is in the document flow;
   the rest carry `hidden`, which wins over this because of the `!important` above. */
.ribbon__panels {
  display: flex;
  flex: 1;
  height: 100%;
}

/* A ribbon panel: tools in a row, the panel's name along the bottom — the AutoCAD
   arrangement, and the label is what makes a wall of small icons navigable. */
.ribbon__panel {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 0 10px;
  border-right: 1px solid var(--line-soft);
}

.ribbon__tools {
  display: flex;
  flex: 1;
  gap: 3px;
  align-items: flex-start;
}

/* Stacked groups let a panel put two rows of small buttons beside one big one. */
.ribbon__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The panel's name, along the bottom as in AutoCAD. `flex: none` keeps it from being
   squeezed out by a panel whose buttons are taller than the others'. */
.ribbon__name {
  flex: none;
  padding-top: 3px;
  color: var(--text-faint);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.04em;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 58px;
  padding: 5px 2px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.tool:hover {
  background: var(--chrome-high);
  border-color: var(--line);
}

/* The running command is lit, so you can always see what the program thinks it is
   doing — the commonest confusion in any CAD program. */
.tool[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.tool__icon {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The small variant: a row of these fits beside a big button. */
.tool--small {
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 104px;
  padding: 2px 7px 2px 4px;
  font-size: 11px;
  text-align: left;
}

.tool--small .tool__icon {
  width: 17px;
  height: 17px;
}

/* ---------- Workspace ---------- */

.workspace {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  background: var(--canvas);
  overflow: hidden;
}

/* The drawing area proper: the canvas and what floats over it. The dynamic input and
   the command line are placed against this, so neither can end up under the palettes. */
.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* A file being dragged over the drawing: say that letting go will do something. */
.stage[data-drop='true']::after {
  content: 'Drop a DXF file to import it';
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-size: 14px;
  pointer-events: none;
}

/* Absolutely sized, so the pixel size set on the canvas from JS can never feed back
   into the size of the box it is measured from. */
.canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The crosshair is drawn on the canvas, so the pointer would be a second,
     slightly offset cursor. AutoCAD has no arrow in the drawing area either. */
  cursor: none;
  touch-action: none;
}

.canvas.is-panning {
  cursor: grabbing;
}

/* ---------- Dynamic input ---------- */

/* Follows the cursor, which is why it is positioned from JS. It is the only place
   typing happens while a command runs, so it holds the keyboard focus — given to it
   from JS, never by clicking it.

   It must never take the mouse. It sits just below and right of the cursor, so a quick
   movement that way lands the pointer on it before it has moved: a press there would
   go to the box instead of the drawing, and the click or selection box is silently
   lost. With pointer events passing through, the canvas gets the press, and the
   pointer move that moves the box. */
.dyn {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(420px, 70vw);
  padding: 3px 6px;
  background: rgba(24, 27, 33, 0.94);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  pointer-events: none;
}

.dyn__prompt {
  color: var(--text-dim);
  white-space: nowrap;
}

.dyn__input {
  width: 124px;
  padding: 1px 4px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
}

/* ---------- Palettes ---------- */

.palettes {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 248px;
  max-width: min(248px, 70vw);
  background: var(--chrome);
  border-left: 1px solid var(--line);
  overflow: hidden;
}

.palettes__toggle {
  display: none; /* only needed when the palettes become a drawer — see the media query */
}

.palettes__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

/*
 * Each section keeps its own height and the column scrolls past them.
 *
 * `flex: none` is doing real work here: as flex items in a column that is shorter than
 * their total height, sections with the default `flex-shrink: 1` are squeezed — and the
 * layer list, having nothing to hold it open, collapses to nothing at all.
 */
.palette {
  flex: none;
  border-bottom: 1px solid var(--line-soft);
}

.palette__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 6px 10px;
  background: var(--chrome-low);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.palette__body {
  padding: 8px 10px 10px;
}

.palette__body--list {
  padding: 4px 0 6px;
  /* Deep enough to scan, short enough that the properties palette stays useful. */
  max-height: 216px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Properties: a two-column grid of label and value, dense on purpose. */
.props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  font-size: 11.5px;
}

.props__key {
  color: var(--text-dim);
}

.props__val {
  min-width: 0;
  font-family: var(--mono);
  text-align: right;
  overflow-wrap: anywhere;
}

.props input,
.props select {
  width: 100%;
  padding: 2px 5px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
}

.props__head {
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.props__empty {
  color: var(--text-faint);
  font-size: 11.5px;
}

.props__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Layer rows: the current one is marked, and each switch is a button you can hit
   without reading — which is how a layer list is actually used. */
.layer {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  cursor: pointer;
  border-left: 2px solid transparent;
}

.layer:hover {
  background: var(--chrome-high);
}

.layer[aria-current='true'] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.layer__eye,
.layer__lock {
  width: 20px;
  height: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.layer__eye[aria-pressed='false'],
.layer__lock[aria-pressed='true'] {
  color: var(--warn);
}

.layer__swatch {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  cursor: pointer;
}

.layer__name {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer__count {
  color: var(--text-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Command line ---------- */

/* Floating over the foot of the drawing, centred and about half as wide, as AutoCAD's
   command line is: a full-width band would cost the drawing a strip of its height. */
.cmdbar {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: max(50%, 480px);
  max-width: calc(100% - 24px);
  margin-inline: auto;
  background: rgba(35, 39, 46, 0.95);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.cmdbar__history {
  max-height: 132px;
  padding: 5px 10px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  scrollbar-width: thin;
}

/* The log is hidden but something was just said: the last three lines, briefly, and
   not in the way of the mouse — clicks there go through to the drawing. */
.cmdbar[data-history='peek'] {
  pointer-events: none;
}

/* Margin rather than padding, because content is clipped at the padding edge: with
   padding, a sliver of the fourth line from the end shows through above the three. */
.cmdbar[data-history='peek'] .cmdbar__history {
  max-height: calc(3 * 1.5em);
  margin-block: 5px;
  padding-block: 0;
  overflow: hidden;
}

.cmdbar[data-history='peek'] .cmdbar__row {
  pointer-events: auto;
}

.cmdbar[data-history='hidden'] .cmdbar__row {
  border-top: 0;
}

.cmdbar__line--command {
  color: var(--accent);
}

.cmdbar__line--warn {
  color: var(--warn);
}

.cmdbar__line--ok {
  color: var(--ok);
}

.cmdbar__line--muted {
  color: var(--text-faint);
}

.cmdbar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 10px 7px;
  border-top: 1px solid var(--line-soft);
}

.cmdbar__label {
  flex: none;
  max-width: 46%;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdbar__input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
}

.cmdbar__input:focus {
  border-color: var(--accent);
}

.cmdbar__go {
  flex: none;
  width: 32px;
  padding: 4px 0;
  background: var(--chrome-high);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.cmdbar__toggle {
  flex: none;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}

.cmdbar__toggle:hover {
  color: var(--text);
  background: var(--chrome-high);
}

/* ---------- Status bar ---------- */

.statusbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  background: var(--chrome);
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.statusbar__coords {
  min-width: 170px;
  font-family: var(--mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.statusbar__toggles {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.statusbar__toggles::-webkit-scrollbar {
  display: none;
}

.statusbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.statusbar__unit {
  display: flex;
  align-items: center;
  gap: 4px;
}

.statusbar__unit select {
  padding: 1px 4px;
  background: var(--chrome-low);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
}

.statusbar__zoom {
  min-width: 46px;
  color: var(--text-dim);
  font-family: var(--mono);
  text-align: right;
}

/* A toggle that is on is lit, like the status bar buttons in AutoCAD: the state of
   ortho and snap has to be readable without clicking anything. */
.toggle {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
}

.toggle:hover {
  background: var(--chrome-high);
  color: var(--text);
}

.toggle[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: rgba(79, 157, 255, 0.5);
  color: var(--accent);
}

.pill {
  flex: none;
  padding: 2px 9px;
  background: var(--chrome-low);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 10.5px;
  white-space: nowrap;
  cursor: pointer;
}

.pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ---------- Dialog ---------- */

.dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dialog::backdrop {
  background: rgba(10, 12, 16, 0.6);
}

.dialog__form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.dialog__title {
  margin: 0;
  font-size: 14px;
}

.dialog__close {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
}

.dialog__close:hover {
  background: var(--chrome-high);
  color: var(--text);
}

.dialog__body {
  padding: 14px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.55;
}

.dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.btn {
  padding: 6px 13px;
  background: var(--chrome-high);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f1217;
  font-weight: 600;
}

.btn--primary:hover {
  background: #6fb0ff;
}

.btn--danger {
  color: var(--danger);
}

.btn--small {
  padding: 3px 8px;
  font-size: 11px;
}

/* The file list, and the new drawing choice above it. */
.filelist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: var(--chrome-low);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.filerow[aria-current='true'] {
  border-color: var(--accent);
}

.filerow__open {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.filerow__open:hover {
  color: var(--accent);
}

.filerow__meta {
  flex: none;
  color: var(--text-faint);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.choices {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0 0 6px;
}

.choice {
  padding: 10px;
  background: var(--chrome-low);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.choice:hover {
  border-color: var(--accent);
}

.choice strong {
  display: block;
  font-size: 12.5px;
}

.choice span {
  color: var(--text-dim);
  font-size: 11px;
}

/* Help tables: the keyboard and the aliases, which are the two things worth
   looking up twice. */
.keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.keys th,
.keys td {
  padding: 3px 8px 3px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.keys th {
  width: 34%;
  color: var(--text-dim);
  font-weight: 500;
}

.keys kbd,
code {
  padding: 1px 5px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
}

.dialog__body h3 {
  margin: 16px 0 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dialog__body h3:first-child {
  margin-top: 0;
}

.dialog__body p {
  margin: 0 0 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.field > span {
  color: var(--text-dim);
  font-size: 11px;
}

.field input,
.field select {
  padding: 6px 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.import__file {
  padding: 6px 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

/* ---------- Narrow screens ---------- */

/*
 * A phone cannot really draft, and pretending otherwise would mean a worse program
 * on the machine where the work is actually done. What it can do is *open* a drawing
 * to look at and measure, so on a narrow screen the palettes fold into a drawer, the
 * ribbon scrolls, the tabs drop under the file name, and the command line shrinks to
 * its input — the canvas keeps everything it can.
 */
@media (max-width: 900px) {
  :root {
    --ribbon-h: 98px;
  }

  .titlebar {
    gap: 8px;
  }

  .titlebar__quick {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .titlebar__quick::-webkit-scrollbar {
    display: none;
  }

  .palettes {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 4;
    width: min(280px, 86vw);
    max-height: 100%;
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  }

  .palettes__toggle {
    display: block;
    width: 100%;
    padding: 6px;
    background: var(--chrome-low);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .palettes[data-open='false'] {
    width: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .palettes[data-open='false'] .palettes__body {
    display: none;
  }

  .palettes[data-open='false'] .palettes__toggle {
    border: 1px solid var(--line);
    border-radius: 0 0 0 var(--radius);
    background: var(--chrome);
  }

  .statusbar__coords {
    min-width: 0;
  }

  .statusbar {
    height: auto;
    min-height: 28px;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-block: 3px;
  }

  .statusbar__toggles {
    order: 3;
    flex-basis: 100%;
  }

  .statusbar__right {
    margin-left: auto;
  }
}

/* Too narrow for file, tabs and quick buttons in one row: the tabs take a second one. */
@media (max-width: 720px) {
  .titlebar {
    flex-wrap: wrap;
    height: auto;
    min-height: 36px;
    row-gap: 0;
  }

  .titlebar__file {
    flex: 1;
    align-self: center;
    min-height: 36px;
  }

  .titlebar__name {
    max-width: 100%;
  }

  .titlebar__sep--tabs {
    display: none;
  }

  .ribbon__tabs {
    order: 1;
    flex-basis: 100%;
    height: 32px;
    margin-inline: -10px;
    padding-inline: 8px;
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 620px) {
  .tool {
    width: 52px;
    font-size: 9.5px;
  }

  .tool--small {
    min-width: 92px;
  }

  .cmdbar__label {
    display: none;
  }

  .cmdbar__toggle {
    padding-inline: 7px;
  }

  .cmdbar {
    bottom: 8px;
    max-width: calc(100% - 16px);
  }

  .statusbar__unit .muted,
  .statusbar__zoom {
    display: none;
  }
}