/* The editor's chrome is solid and dark (ADR 0104): the top bar at 11 % white, wells at 22 %,
   icons at rest at 80 %, the drawing's name at 62 %. The paper is the drawing's own. */
:root {
  --bar: #1c1c1c;
  --side: #292929;
  --well: #383838;
  --icon: #cccccc;
  --name: #9e9e9e;
  --tint: #0a84ff;
  --text: #f2f2f2;
  --bar-height: 52px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #141414;
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--bar-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  display: grid;
  /* The name centred, between groups that never shrink below their buttons: where they leave
     too little room, the name gives way, cut short with an ellipsis. */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 6px;
  background: var(--bar);
  border-bottom: 1px solid rgb(0 0 0 / 0.5);
  z-index: 2;
}

.bar .group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bar .end { grid-column: 3; justify-content: flex-end; }

.name {
  margin: 0;
  color: var(--name);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
}
button.name:hover { color: var(--text); }

button {
  font: inherit;
  color: var(--icon);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active { color: #fff; }
button:disabled { color: #5c5c5c; cursor: default; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

.word { height: 44px; padding: 0 10px; font-size: 17px; white-space: nowrap; }

.icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.icon svg { width: 22px; height: 22px; fill: currentColor; }

/* A well: a 36-point circle at 22 % inside the 44-point target. */
.icon.well::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--well);
  z-index: -1;
}
.icon.well { position: relative; isolation: isolate; }
.icon[aria-expanded="true"] { color: #fff; }

.menu {
  position: fixed;
  z-index: 10;
  min-width: 240px;
  max-width: min(340px, calc(100vw - 16px));
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: #2b2b2b;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(255 255 255 / 0.12);
  outline: none;
}
.menu .item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px 6px 4px;
  border-radius: 7px;
  color: var(--text);
  text-align: left;
}
.menu .item:hover, .menu .item:focus-visible { background: var(--tint); color: #fff; outline: none; }
.menu .item[aria-disabled="true"] { color: #6e6e6e; background: none; }
.menu .item.destructive { color: #ff453a; }
.menu .item.destructive:hover, .menu .item.destructive:focus-visible { background: #ff453a; color: #fff; }
.menu .check { width: 16px; text-align: center; }
.menu .label { flex: 1; display: flex; flex-direction: column; }
.menu .label small { color: var(--name); font-size: 12px; }
.menu .item:hover small, .menu .item:focus-visible small { color: rgb(255 255 255 / 0.8); }
.menu kbd { font: inherit; font-size: 13px; color: var(--name); }
.menu .item:hover kbd, .menu .item:focus-visible kbd { color: rgb(255 255 255 / 0.8); }
.menu .separator { height: 1px; margin: 5px 8px; background: rgb(255 255 255 / 0.1); }
.menu .section { padding: 8px 10px 2px 28px; color: var(--name); font-size: 12px; }

.readout {
  height: 32px;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 16px;
  background: var(--well);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  white-space: nowrap;
}

.readout[hidden] { display: none; }

#drawings svg { display: none; width: 22px; height: 22px; }

/* Up to 640 points, too narrow for the bar's two groups and the name between them with both
   readouts at their widest, the phone's bar. */
@media (max-width: 640px) {
  .name { display: none; }
  .readout { min-width: 0; }
  /* Without the name, the right group takes the middle too: the tools and color fit a phone. */
  .bar { grid-template-columns: auto 0 1fr; gap: 0; }
  .bar .group { gap: 0; }
  .readout { padding: 0 8px; }
  /* Drawings is a back arrow: the brush, eraser and color fit beside it. */
  #drawings { width: 44px; padding: 0; display: grid; place-items: center; }
  #drawings[hidden] { display: none; }
  #drawings .long { display: none; }
  #drawings svg { display: block; }
  /* The zoom readout gives way to Layers; Actual Size is in Navigate. */
  #zoom { display: none; }
}
/* Narrower still, the rotation readout gives way too; Turn Upright is in Navigate. */
@media (max-width: 359px) {
  #rotation { display: none; }
}

main {
  position: fixed;
  inset: calc(var(--bar-height) + env(safe-area-inset-top)) 0 0 0;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

canvas { cursor: crosshair; }
canvas[data-panning] { cursor: grab; }

/* A drawing's preview, in a browser that can't draw, has no view to zoom, turn or move about. */
body[data-state="preview"] :is(#zoom, #rotation, #navigate) { display: none; }

canvas[hidden], #preview[hidden], .panel[hidden], .notice[hidden], .drop[hidden], .readout[hidden],
.side[hidden], .bubble[hidden], .word[hidden], .library[hidden], .empty[hidden] { display: none; }

/* The side bar (ADR 0136): brush size above opacity at the left edge, as on the iPad, 16 %
   white with the right corners rounded. */
.side {
  position: absolute;
  left: env(safe-area-inset-left);
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--side);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.25);
  z-index: 1;
}

/* Places and Prefabs at the top, 2 points apart and 14 above the size slider, as on the iPad.
   Where the window is too short for them and both sliders, they give way: Navigate's Places…
   and Actions' Prefabs… open the same panels. */
.side { --rest: 286px; }
.side .pin { margin-bottom: -8px; }
.side #prefabs { margin-bottom: 4px; }
@media (max-height: 520px) {
  .side { --rest: 182px; }
  .side .pin, .side #prefabs { display: none; }
}

/* Undo and redo beneath opacity, 18 points below it and 2 apart, as on the iPad. */
.side .undo { margin-top: 8px; }
.side .redo { margin-top: -8px; }

/* 170 points tall, as on the iPad, shorter where the window is, down to 32: the side bar's
   other points (`--rest`: its padding and gaps, Places, Prefabs, the eyedropper, undo and redo) and 8
   above and below it fit under the top bar, as on a phone held sideways. */
.slider {
  position: relative;
  width: 38px;
  height: clamp(32px, (100dvh - 52px - var(--rest) - 16px) / 2, 170px);
  flex: none;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.slider .track {
  position: absolute;
  inset: 0 2px;
  border-radius: 17px;
  background: var(--well);
}
.slider:focus-visible .track { box-shadow: 0 0 0 2px var(--tint); }
.slider .thumb {
  position: absolute;
  left: 4px;
  width: 30px;
  height: 18px;
  /* Its center travels from 11 px above the bottom to 11 px below the top. */
  top: calc(11px + (100% - 22px) * (1 - var(--value, 0)) - 9px);
  border-radius: 9px;
  background: #d9d9d9;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.slider .bubble {
  position: absolute;
  left: 50px;
  top: calc(11px + (100% - 22px) * (1 - var(--value, 0)) - 15px);
  min-width: 54px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bar);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 30px;
  text-align: center;
  pointer-events: none;
}

#preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
}

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 32px));
  padding: 28px 28px 22px;
  border-radius: 16px;
  background: #242424;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
  user-select: text;
  -webkit-user-select: text;
}

.panel h1 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
.panel p { margin: 0 0 14px; }
.panel code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.panel a { color: var(--tint); }
.panel .hint, .panel .samples { color: var(--name); font-size: 13px; }

.primary {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  background: var(--tint);
  color: #fff;
  font-weight: 600;
}

#message { text-align: center; }

.notice {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgb(36 36 36 / 0.94);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}

/* Heard, not seen: what a screen reader is told happened. */
.announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drop {
  position: fixed;
  z-index: 20;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--tint);
  border-radius: 18px;
  background: rgb(10 132 255 / 0.12);
  font-size: 20px;
  pointer-events: none;
}

/* The drawings (ADR 0138), as the app's home screen (ADR 0105): 7 % white behind cards at 14 %
   with 16-point corners, each a 4:3 thumbnail with 10-point corners above the name in bold and
   when it was edited in gray. New Drawing comes first, outlined with a dashed line in the tint. */
.library {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #121212;
}
.library .bar .title {
  grid-column: 2;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.shelf {
  position: absolute;
  inset: calc(var(--bar-height) + env(safe-area-inset-top)) 0 0 0;
  overflow-y: auto;
  padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.cards {
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  border-radius: 16px;
  background: #242424;
  -webkit-touch-callout: none;
}
.card .open {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 10px 12px;
  border-radius: 16px;
  color: var(--text);
  text-align: left;
}
.card .thumbnail {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: #2e2e2e;
}
.card .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.card .title {
  padding-right: 36px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .edited { color: var(--name); font-size: 13px; }
.card .more { position: absolute; right: 2px; bottom: 6px; }
.card .new { background: none; color: var(--tint); }
.card:has(.new) { background: none; }
.card .new .thumbnail { position: relative; background: none; }
/* 2-point lines, dashed 8 on and 6 off, at 60 %. */
.card .new .outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .new .outline rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 9px;
  fill: none;
  stroke: var(--tint);
  stroke-opacity: 0.6;
  stroke-width: 2;
  stroke-dasharray: 8 6;
}
.card .new .thumbnail > svg:not(.outline) { width: 36px; height: 36px; }
.empty {
  margin: 48px 0 0;
  color: var(--name);
  font-size: 17px;
  text-align: center;
}

/* Questions before something happens, as the app's alerts ask them. */
dialog.ask {
  width: min(320px, calc(100vw - 32px));
  padding: 20px 18px 16px;
  border: 0;
  border-radius: 14px;
  background: #2b2b2b;
  color: var(--text);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
  text-align: center;
}
dialog.ask::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.ask h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
dialog.ask p { margin: 0 0 6px; font-size: 13px; }
dialog.ask input {
  width: 100%;
  height: 36px;
  margin: 8px 0 4px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 8px;
  background: #1c1c1c;
  color: var(--text);
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}
dialog.ask .buttons { display: flex; gap: 10px; margin-top: 14px; }
dialog.ask .buttons button { flex: 1; height: 40px; border-radius: 20px; font-weight: 600; }
dialog.ask .secondary { background: var(--well); color: var(--text); }
dialog.ask .destructive { background: #ff453a; color: #fff; }

/* About Draw Infinite (ADR 0169): a sheet with the version, and the privacy policy and the
   acknowledgements as pages of it. */
dialog.about {
  width: min(560px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 24px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #1f1f1f;
  color: var(--text);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
}
dialog.about[open] { display: flex; flex-direction: column; }
dialog.about::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.about header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 52px;
  padding: 0 6px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
dialog.about header .icon { justify-self: start; }
dialog.about header .icon[hidden] { display: inline-flex; visibility: hidden; }
dialog.about h2 { grid-column: 2; margin: 0; font-size: 17px; font-weight: 600; }
dialog.about #closeAbout { grid-column: 3; justify-self: end; color: var(--tint); font-weight: 600; }
.about-body { flex: 1; overflow: auto; padding: 20px 24px 28px; }
.about-name { margin: 8px 0 0; font-size: 22px; font-weight: 600; text-align: center; }
.about-version { margin: 2px 0 18px; color: var(--name); text-align: center; }
.about-links { display: flex; flex-direction: column; margin-top: 18px; border-radius: 10px; overflow: hidden; background: var(--side); }
.about-links button, .about-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}
.about-links > * + * { border-top: 1px solid rgb(255 255 255 / 0.08); }
.about-links svg { width: 16px; height: 16px; color: var(--name); }
.legal { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
.legal h2 { margin: 22px 0 6px; font-size: 16px; font-weight: 600; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 22px; }

/* The top bar's color: a swatch in a ring, outermost, as on the iPad (ADR 0139). */
.icon[hidden] { display: none; }
.swatch-button .swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bar), 0 0 0 3.5px rgb(255 255 255 / 0.55);
}

/* Popovers beneath their buttons, as the app's brushes and color show. */
.popover {
  position: fixed;
  z-index: 9;
  overflow-y: auto;
  border-radius: 14px;
  background: #2b2b2b;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(255 255 255 / 0.12);
  outline: none;
}
.popover header { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 4px 16px; }
.popover h2 { margin: 0; font-size: 17px; font-weight: 600; }

/* The brushes: 340 points wide, a row a brush with its sample stroke on the paper. */
.brushes { width: min(340px, calc(100vw - 16px)); padding-bottom: 8px; }
.brush-list ul { margin: 0; padding: 0 8px; list-style: none; }
.brush-list h3 { margin: 10px 16px 4px; color: var(--name); font-size: 13px; font-weight: 600; }
.brush-list li { position: relative; }
.brush-list .brush {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
}
.brush-list .brush:hover { background: rgb(255 255 255 / 0.06); }
.brush-list .brush[aria-pressed="true"] { background: rgb(10 132 255 / 0.22); }
.brush-list .preview { width: 150px; height: 44px; flex: none; border-radius: 8px; cursor: inherit; }
.brush-list .label { flex: 1; padding: 0; color: inherit; text-align: left; font-size: 15px; }
.brush-list .check { width: 18px; color: var(--tint); font-weight: 700; }
.brush-list .custom .brush { padding-right: 48px; }
.brush-list .more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; }

/* Layers (ADR 0081, 0141): 320 points wide, a row of at least 56 a layer, three to eight rows
   tall, the active one tinted. Its options stack name, opacity, blend mode and Delete Layer. */
.layers { width: min(320px, calc(100vw - 16px)); }
.layers header { display: grid; grid-template-columns: 1fr auto 1fr; padding: 4px 4px 4px 6px; }
.layers header h2 { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layers header > :last-child { justify-self: end; }
.layers header .word { justify-self: start; color: var(--tint); }
.layers header .word[aria-pressed="true"] { font-weight: 600; }
.layers header .icon { color: var(--tint); }
.layers header .back { display: flex; align-items: center; gap: 2px; padding-left: 4px; }
.layers header .back svg { width: 20px; height: 20px; }
.layer-list {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  max-height: calc(var(--rows) * 56px + 8px);
  overflow-y: auto;
}
.layer { position: relative; display: flex; align-items: center; min-height: 56px; padding-right: 6px; background: #2b2b2b; }
.layer + .layer { box-shadow: inset 0 0.5px rgb(255 255 255 / 0.1); }
.layer:has(> [aria-current="true"]) { background: color-mix(in srgb, var(--tint) 15%, #2b2b2b); }
.layer[data-dragging] { z-index: 1; box-shadow: 0 6px 20px rgb(0 0 0 / 0.5); }
.layer-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px 6px 16px;
  color: var(--text);
  text-align: left;
}
.layer-name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer[data-hidden] .layer-name { color: var(--name); }
.layer-detail { color: var(--name); font-size: 13px; }
.layer .visibility { color: var(--tint); }
.layer .visibility[aria-pressed="false"] { color: var(--name); }
.layer .delete { color: #ff453a; font-size: 15px; }
.layer .delete:disabled { color: #5c5c5c; }
.layer .handle { cursor: grab; touch-action: none; }
.layer-options .fields { display: flex; flex-direction: column; gap: 18px; padding: 8px 16px 16px; }
.layer-name-field {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--well);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  -webkit-user-select: text;
  user-select: text;
}
.layer-name-field:focus-visible { outline: 2px solid var(--tint); outline-offset: 0; }
.opacity-row { display: flex; align-items: center; gap: 12px; }
.opacity-row input { flex: 1; accent-color: var(--tint); }
.layer-opacity-value { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.segments { display: flex; padding: 2px; border-radius: 9px; background: var(--well); }
.segments button { flex: 1; height: 30px; padding: 0 4px; border-radius: 7px; color: var(--text); font-size: 13px; }
.segments button[aria-checked="true"] { background: #636366; font-weight: 600; }
.delete-layer { height: 44px; border-radius: 10px; background: var(--well); color: #ff453a; font-size: 17px; }
.delete-layer:disabled { color: #5c5c5c; }

/* Places (ADR 0126, 0145): 340 points wide, the bookmarks then the places drawn in, a row of
   72 a place with its 80-by-60 picture. */
.places { width: min(340px, calc(100vw - 16px)); }
.places header { display: grid; grid-template-columns: 1fr auto 1fr; padding: 4px 4px 4px 6px; }
.places header h2 { grid-column: 2; }
.places header > :last-child { justify-self: end; color: var(--tint); }
.places header .word { justify-self: start; color: var(--tint); }
.places header .word[aria-pressed="true"] { font-weight: 600; }
.places header .word:disabled, .places header .icon:disabled { color: #5c5c5c; }
.place-sections { padding-bottom: 8px; }
.places h3 { margin: 10px 16px 4px; color: var(--name); font-size: 13px; font-weight: 600; }
.place-list { margin: 0; padding: 0; list-style: none; }
.place { position: relative; display: flex; align-items: center; min-height: 72px; padding-right: 6px; background: #2b2b2b; }
.place + .place { box-shadow: inset 0 0.5px rgb(255 255 255 / 0.1); }
.place[data-dragging] { z-index: 1; box-shadow: 0 6px 20px rgb(0 0 0 / 0.5); }
.place-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 16px;
  color: var(--text);
  text-align: left;
}
.place-main:hover:not(:disabled) { background: rgb(255 255 255 / 0.06); }
.place-picture, .place-symbol {
  flex: none;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--well);
}
.place-symbol { display: grid; place-items: center; color: var(--name); }
.place-symbol svg { width: 26px; height: 26px; }
.place-text { min-width: 0; display: flex; flex-direction: column; }
.place-name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-detail { color: var(--name); font-size: 13px; }
.place .delete { color: #ff453a; font-size: 15px; }
.place .handle { cursor: grab; touch-action: none; }
.place-footer { margin: 4px 16px 6px; color: var(--name); font-size: 13px; }

/* Prefabs (ADR 0168), as the app's panel: 320 points wide, This Drawing or the Library, a row
   of 56 a prefab with its 40-point picture. */
.prefabs { width: min(320px, calc(100vw - 16px)); }
.prefabs header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; }
.prefabs header h2 { text-align: center; }
.prefabs header > :last-child { justify-self: end; color: var(--tint); }
.prefabs header .icon:disabled { color: #5c5c5c; }
.prefab-list { margin: 0; padding: 0; list-style: none; max-height: calc(56px * 8); overflow-y: auto; }
.prefab { display: flex; align-items: center; min-height: 56px; padding-right: 6px; background: #2b2b2b; }
.prefab + .prefab { box-shadow: inset 0 0.5px rgb(255 255 255 / 0.1); }
.prefab-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 16px;
  color: var(--text);
  text-align: left;
}
.prefab-main:hover:not(:disabled) { background: rgb(255 255 255 / 0.06); }
.prefab-picture, .prefab-symbol { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: var(--well); }
.prefab-symbol { display: grid; place-items: center; color: var(--name); }
.prefab-symbol svg { width: 24px; height: 24px; }
.prefab-text { min-width: 0; display: flex; flex-direction: column; }
.prefab-name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prefab-detail { color: var(--name); font-size: 13px; }
.prefab .word { color: var(--tint); font-size: 15px; }
.prefab-footer { margin: 6px 16px 8px; color: var(--name); font-size: 13px; }

/* Prefab mode's bar, under the top bar: "Editing" and the prefab's name, Cancel and Done. */
.prefab-bar {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(460px, calc(100% - 16px));
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 16px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.78);
  color: #fff;
  font-size: 15px;
}
.prefab-bar .prefab-editing { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.prefab-bar[hidden] { display: none; }
body[data-prefab-mode] .shape-bar { top: 70px; }

/* The Zoom Path (ADR 0147), as the app's panel: the places' rows, a keyframe's number before its
   name, then the rows that add a view, a bookmark or a pause, and the video's shapes and codec. */
.zoom-path .keyframe { min-height: 56px; }
.keyframe-number {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--well);
  color: var(--name);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.zoom-path .disclosure { margin-left: auto; color: var(--name); font-size: 20px; }
.zoom-path header .back { display: inline-flex; align-items: center; gap: 2px; padding-left: 2px; }
.zoom-path header .back svg { width: 20px; height: 20px; }
.add-list { margin: 8px 0 0; padding: 0; list-style: none; }
.add-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #2b2b2b;
  color: var(--tint);
  font-size: 17px;
  text-align: left;
}
.add-list li + li .add-row { box-shadow: inset 0 0.5px rgb(255 255 255 / 0.1); }
.add-row svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.add-row:hover:not(:disabled) { background: #333; }
.add-row:disabled { color: #5c5c5c; }
.add-row .add-name { flex: 1; }
.add-row .add-detail { color: var(--name); font-size: 15px; }
.zoom-path .segmented { display: flex; margin: 8px 16px 0; padding: 2px; border-radius: 9px; background: var(--well); }
.zoom-path .segmented button { flex: auto; min-height: 30px; padding: 0 8px; border-radius: 7px; color: var(--text); font-size: 13px; white-space: nowrap; }
.zoom-path .segmented button[aria-checked="true"] { background: #636366; font-weight: 600; }
.zoom-path .export-progress { margin: 8px 16px; }
.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 16px;
  padding: 0 4px 0 12px;
  border-radius: 10px;
  background: #2b2b2b;
  font-size: 17px;
}
.stepper > span { flex: 1; font-variant-numeric: tabular-nums; }
.stepper .icon { color: var(--tint); }
.stepper .icon:disabled { color: #5c5c5c; }
.stepper:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* The navigator (ADR 0145): a 220-by-160 map of the drawing in the bottom right, the view's
   outline tinted on it and the bookmarks as orange dots. */
.navigator {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1;
  width: 220px;
  height: 160px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #2b2b2b;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(255 255 255 / 0.12);
  cursor: pointer;
}
.navigator[hidden], body:not([data-state="open"]) .navigator { display: none; }
.navigator canvas, .navigator svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.navigator .outline { fill: rgb(10 132 255 / 0.12); stroke: var(--tint); stroke-width: 2; stroke-linejoin: round; }
.navigator .mark { fill: #ff9f0a; stroke: #fff; stroke-width: 1.5; }
.navigator:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* The color: a 200-point square over a 30-point hue bar, then the recent colors. */
.color-panel { width: 320px; max-width: calc(100vw - 16px); padding: 0 16px 16px; }
.color-panel header { padding: 12px 0 10px; }
.color-panel .swatches { display: flex; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.25); }
.color-panel .swatches .swatch { display: block; width: 36px; height: 28px; padding: 0; border-radius: 0; }
.color-panel .saturation-brightness, .color-panel .hue { position: relative; touch-action: none; cursor: crosshair; outline: none; }
.color-panel .saturation-brightness { height: 200px; border-radius: 10px; }
.color-panel .hue { height: 30px; margin-top: 12px; border-radius: 15px; }
.color-panel .saturation-brightness:focus-visible, .color-panel .hue:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.color-panel .thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.color-panel .hue .thumb { top: 50%; }
.color-panel .recent-title { margin: 14px 0 8px; color: var(--name); font-size: 13px; font-weight: 600; }
.color-panel .recents { display: flex; gap: 8px; }
.color-panel .recent { flex: 1; aspect-ratio: 1; max-width: 30px; border-radius: 50%; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.3); }

/* The Brush Studio (ADR 0107), full screen: a 72-point rail of categories at the left, the
   Drawing Pad over the top 42 % with pills over its corners, and the category's settings below. */
dialog.studio {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #1c1c1c;
  color: var(--text);
  display: grid;
  grid-template-columns: calc(72px + env(safe-area-inset-left)) 1fr;
  grid-template-rows: 42% 1fr;
  overflow: hidden;
}
dialog.studio:not([open]) { display: none; }
dialog.studio::backdrop { background: #000; }
.studio .rail-back { grid-column: 1; grid-row: 1 / 3; background: #141414; }
.studio .rail {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: max(12px, env(safe-area-inset-top)) 0 12px env(safe-area-inset-left);
  overflow-y: auto;
}
.studio .rail .icon { width: 52px; height: 48px; border-radius: 12px; flex: none; }
.studio .rail .icon[aria-pressed="true"] { background: rgb(10 132 255 / 0.25); color: #fff; }
.studio > .top { grid-column: 2; grid-row: 1; position: relative; }
.studio .pad { position: absolute; inset: 0; touch-action: none; cursor: crosshair; overflow: hidden; }
.studio .pad .picture { width: 100%; height: 100%; }
.studio .pad .hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: rgb(0 0 0 / 0.35);
  font-size: 13px;
  pointer-events: none;
}
.studio .left, .studio .right { position: absolute; top: max(12px, env(safe-area-inset-top)); display: flex; gap: 8px; align-items: center; }
.studio .left { left: 12px; }
.studio .right { right: max(12px, env(safe-area-inset-right)); }
.studio .pill {
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: rgb(28 28 28 / 0.86);
  color: var(--text);
  font-size: 15px;
  line-height: 34px;
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio .pill.title { font-weight: 600; }
.studio .done {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
}
.studio .done svg { width: 18px; height: 18px; fill: currentColor; }
.studio .done:disabled { background: #3a3a3a; color: #777; }
.studio .scroll {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  border-top: 1px solid rgb(0 0 0 / 0.6);
  padding: 8px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 20px;
}
.studio .settings { max-width: 620px; margin: 0 auto; }
.studio .section { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--name); text-transform: uppercase; letter-spacing: 0.04em; }
.studio .note { margin: 0 0 10px; color: var(--name); font-size: 13px; user-select: text; -webkit-user-select: text; }
.studio .row { padding: 8px 0; }
.studio .row .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.studio .row .label { font-size: 15px; }
.studio .pill.value { height: 26px; line-height: 26px; padding: 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; background: var(--well); }
.studio input[type="range"] { width: 100%; accent-color: var(--tint); }
.studio input[type="range"]:disabled { opacity: 0.4; }
.studio .segmented { display: flex; margin: 8px 0; padding: 2px; border-radius: 9px; background: var(--well); }
.studio .segmented button { flex: 1; height: 30px; border-radius: 7px; color: var(--text); font-size: 13px; }
.studio .segmented button[aria-checked="true"] { background: #636366; font-weight: 600; }
.studio .graph { display: block; width: 100%; height: 220px; margin: 8px 0; border-radius: 12px; background: #242424; touch-action: none; }
.studio .graph .grid { stroke: rgb(255 255 255 / 0.1); stroke-width: 1; fill: none; }
.studio .graph .curve { stroke: var(--tint); stroke-width: 3; fill: none; stroke-linejoin: round; }
.studio .graph .handle { fill: #fff; stroke: var(--tint); stroke-width: 2; }
.studio .name-field {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 10px;
  background: #242424;
  color: var(--text);
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}

/* The selected tool is its icon in the tint color (ADR 0104, 0140). */
.icon[aria-pressed="true"] { color: var(--tint); }

/* The eyedropper: a square between the sliders, its edge in the well color, tinted while the
   next press on the canvas picks (ADR 0085). */
.side .eyedropper {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--well);
}
.side .eyedropper svg { width: 18px; height: 18px; }
.side .eyedropper[aria-pressed="true"] { color: var(--tint); border-color: var(--tint); }
canvas[data-picking] { cursor: crosshair; }

/* Dragging the color: a drop that follows the pointer (ADR 0140). */
.swatch-button { touch-action: none; }
.color-drop {
  position: fixed;
  z-index: 12;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.fill-spread {
  position: fixed;
  z-index: 1;
  pointer-events: none;
}

/* The eyedropper's ring around the pointer, 96 points with an 18-point band: the color under it
   above, the current one below, between white edges that show over any color. */
.loupe {
  position: fixed;
  z-index: 12;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  pointer-events: none;
}
.loupe[hidden] { display: none; }
.loupe .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(var(--picked) 50%, var(--current) 50%);
  -webkit-mask: radial-gradient(circle, transparent 29.5px, #000 30px);
  mask: radial-gradient(circle, transparent 29.5px, #000 30px);
}
.loupe::before, .loupe::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid #fff;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.35));
  z-index: 1;
}
.loupe::before { inset: 0; }
.loupe::after { inset: 17.25px; }

/* The selection (ADR 0142): its outline, box and handles, Warp's grid and Liquify's ring, over
   the canvas. Only the box takes pointers, unless a warp or liquify is under way, which takes
   them all so the canvas holds still. */
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}
.overlay[data-capturing] { pointer-events: all; }
.overlay [hidden] { display: none; }
.overlay .lasso, .overlay .frame {
  fill: none;
  stroke: var(--tint);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.5));
}
.overlay .dots circle { fill: #fff; stroke: var(--tint); stroke-width: 2; }
.overlay .hits > * { fill: transparent; stroke: none; pointer-events: all; cursor: move; }
.overlay .hits circle { cursor: grab; }
.overlay .grid { fill: none; stroke: var(--tint); stroke-width: 1.5; }
.overlay .handles circle {
  fill: #fff;
  stroke: var(--tint);
  stroke-width: 3;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.35));
  cursor: grab;
}
.overlay .handles:not([data-side="4"]) circle { stroke-width: 2.5; }
.overlay .ring {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.6));
}
.overlay[data-capturing] { cursor: crosshair; }

/* The bar at the bottom (ADR 0119): the side bar's gray, 22-point corners, its groups apart by a
   thin line. It keeps as clear of the side bar on the right as on the left, and where its groups
   don't fit in a row they wrap into rows rather than going under the side bar. */
.context-dock {
  position: absolute;
  left: calc(58px + env(safe-area-inset-left));
  right: calc(58px + env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
  pointer-events: none;
}
.context {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
  min-height: 54px;
  max-width: 100%;
  padding: 5px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 22px;
  background: var(--side);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
  pointer-events: auto;
}
.context[hidden] { display: none; }
.context-group { display: flex; align-items: center; gap: 2px; flex: none; }
.context .divider { width: 1px; align-self: stretch; margin: 6px 4px; background: rgb(255 255 255 / 0.12); flex: none; }
.context-button {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.context-button svg { width: 20px; height: 20px; fill: currentColor; }
.context-button.destructive { color: #ff453a; }
.context-button.mode[aria-checked="true"] { background: var(--well); color: var(--tint); }
.context-text { height: 44px; padding: 0 10px; white-space: nowrap; }
.context-done {
  height: 38px;
  padding: 0 14px;
  margin-left: 4px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--tint);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.context-done svg { width: 16px; height: 16px; }
.context-title { display: flex; align-items: center; gap: 4px; padding: 0 6px; color: var(--name); font-weight: 600; white-space: nowrap; }
.context-title svg { width: 18px; height: 18px; fill: currentColor; }
/* The grid's choice, the selected segment in the tint, as the app's. */
.context .segments { display: flex; padding: 2px; border-radius: 9px; background: var(--well); }
.context .segment { height: 34px; padding: 0 10px; border-radius: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.context .segment[aria-checked="true"] { background: var(--tint); color: #fff; font-weight: 600; }
.context-slider { width: 140px; min-width: 80px; accent-color: var(--tint); }
.context-value { width: 34px; text-align: right; color: var(--icon); font-variant-numeric: tabular-nums; }
.context-caption {
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--well);
  color: #fff;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
}
.context-caption[data-shown] { opacity: 1; transition-duration: 0.12s; }

#select[hidden] { display: none; }

/* A first-run tip (ADR 0120, ADR 0155): at the bottom left, beside the side bar, in its gray with
   16-point corners; `--lift` raises it above the bar at the bottom, or the map, where it would
   cover them. */
.tip {
  position: absolute;
  z-index: 2;
  left: calc(env(safe-area-inset-left) + 66px);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--lift, 0px));
  max-width: min(400px, calc(100% - 82px - env(safe-area-inset-left)));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 16px;
  border-radius: 16px;
  background: var(--side);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
  color: #fff;
}
.tip[hidden], body:not([data-state="open"]) .tip { display: none; }
.tip-icon { display: grid; flex: none; color: var(--tint); }
.tip-icon svg { width: 20px; height: 20px; fill: currentColor; }
.tip-text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.tip-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--icon); }
.tip-close svg { width: 14px; height: 14px; fill: currentColor; }
.tip-close:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

/* Where Liquify's bar wraps, a line between its groups would end a row; narrower still, its
   modes show only their symbols, their names in the caption as they are chosen. */
@media (max-width: 960px) {
  .context .divider { display: none; }
}
@media (max-width: 700px) {
  .context-button.mode .label { display: none; }
}

@media (max-width: 420px) {
  /* Beside the side bar, using the width up to the right edge, with smaller buttons. */
  .context-dock { left: 58px; right: 8px; }
  .context-button { padding: 4px 6px; font-size: 12px; }
  .context-slider { width: 80px; }
}

/* Clean shapes (ADR 0143): the shape's name under the top bar, with Edit Shape, and the
 * shape's handles, 44 points to touch with a 22-point dot. */
.shape-bar {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 16px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.78);
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}
.shape-edit {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.shape-edit:hover { background: rgb(255 255 255 / 0.12); }
.shape-handles {
  position: absolute;
  z-index: 1;
  inset: 0;
  touch-action: none;
  cursor: move;
}
.shape-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.shape-handle::after {
  content: "";
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tint);
  box-shadow: 0 0 2px rgb(0 0 0 / 0.35);
}
.shape-bar[hidden], .shape-handles[hidden] { display: none; }

/* Export Image (ADR 0146), as the app's panel: 420 points wide, a preview 170 tall, then a
   segmented choice a section, the size, and Export or the progress. */
.image-export { width: min(420px, calc(100vw - 16px)); padding-bottom: 12px; }
.image-export .export-section { margin: 4px 16px 12px; }
.image-export h3 { margin: 0 0 6px; color: var(--name); font-size: 13px; font-weight: 600; }
.image-export .export-footer { margin: 6px 0 0; color: var(--name); font-size: 12px; }
.export-preview {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 10px;
  background: #1f1f1f;
}
/* A transparent export shows over a checkerboard. */
.export-preview.checkered {
  background: repeating-conic-gradient(#3a3a3c 0% 25%, #48484a 0% 50%) 0 0 / 16px 16px;
}
.image-export .segmented { display: flex; padding: 2px; border-radius: 9px; background: var(--well); }
.image-export .segmented button {
  flex: auto;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.image-export .segmented button[aria-checked="true"] { background: #636366; font-weight: 600; }
.image-export .segmented button:disabled { opacity: 0.4; }
.export-size { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 16px 12px; font-size: 15px; }
.export-size small { color: #ff9f0a; font-size: 12px; }
.export-buttons { display: flex; gap: 12px; margin: 0 16px; }
.export-buttons button { flex: 1; height: 40px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.export-buttons .prominent { background: var(--tint); color: #fff; }
.export-buttons button:disabled { opacity: 0.4; }
.export-progress { display: flex; align-items: center; gap: 12px; margin: 0 16px; }
.export-bar-and-time { display: flex; flex: 1; flex-direction: column; gap: 6px; }
.export-bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--well); }
.export-bar span { display: block; height: 100%; background: var(--tint); }
.export-time-left { color: var(--name); font-size: 12px; }

/* The latency readout (ADR 0148), with `?latency`: the last stroke's times, in the bottom left,
   clear of the navigator. */
.latency {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1;
  max-width: min(560px, calc(100vw - 32px));
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}

/* "Working…" (ADR 0105): a small dark pill, centered, 24 points above the bottom over the
   drawings and 14 under the top bar over a drawing, as on the iPad. */
.working {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  min-height: 36px;
  padding: 8px 16px 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 18px;
  background: var(--side);
  color: var(--icon);
  font-size: 15px;
  pointer-events: none;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.25);
}
.working[hidden] { display: none; }
body[data-state="open"] .working { top: calc(52px + 14px); bottom: auto; }
.working .spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: working-turn 0.8s linear infinite;
}
@keyframes working-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .working .spinner { animation-duration: 2.4s; } }