justskill-design 0.0.1 → 3.2.0

package/canvas/styles.css

@@ -0,0 +1,1032 @@
+/*
+ * The canvas chrome only.
+ *
+ * Nothing here reaches a design file. Each page is mounted inside its own shadow
+ * root, so a page's own styles cannot restyle this chrome and this chrome cannot
+ * restyle a design. That separation is what keeps "what you see" equal to "what
+ * you export".
+ */
+
+:root {
+  /*
+   * Paper. The chrome sits on the same warm field as the pages, so the page
+   * cards read as paper on a table instead of white shapes on a dark stage.
+   * Every value here is a measured one: the field is a shade darker than the
+   * panels so a panel edge is visible without a border doing all the work, and
+   * `--chrome-dim` clears 4.5:1 on `--chrome-panel` (11px labels included).
+   */
+  --chrome-bg: #f1efec;
+  --chrome-field: #f1efec;
+  --chrome-dot: #d9d5cc;
+  --chrome-panel: #fbfaf8;
+  --chrome-pill: #fcfbf9;
+  --chrome-input: #ffffff;
+  --chrome-track: #f1eee8;
+  --chrome-hover: #f1eee8;
+  --chrome-selected: #efece5;
+  --chrome-line: rgba(20, 19, 15, 0.10);
+  --chrome-ink: #14130f;
+  --chrome-dim: #6f6a63;
+  --chrome-accent: #2f5fd0;
+  --chrome-danger: #b4453f;
+  --chrome-warn: #9a6b12;
+  --chrome-shadow-panel: 0 1px 2px rgba(20, 19, 15, 0.05), 0 16px 36px -18px rgba(20, 19, 15, 0.18);
+  --chrome-shadow-pill: 0 1px 2px rgba(20, 19, 15, 0.05), 0 10px 24px -12px rgba(20, 19, 15, 0.16);
+  --chrome-shadow-page: 0 1px 2px rgba(20, 19, 15, 0.06), 0 24px 52px -22px rgba(20, 19, 15, 0.28);
+  --chrome-shadow-drawer: 0 -1px 2px rgba(20, 19, 15, 0.04), 0 -18px 40px -24px rgba(20, 19, 15, 0.20);
+
+  /*
+   * The three columns, in one place.
+   *
+   * `#stage` reads these for its tracks, `.drawer` reads them for its left and
+   * right edge, and the panel code writes them. A hard-coded `240px` in two
+   * rules is how a drawer ends up 240px wide over a panel that is no longer
+   * there — which is exactly what the first version of this layout did.
+   *
+   * `--gutter-*` is the width of the drag handle, and it goes to 0 with the
+   * panel: a hidden panel must leave neither a column nor a gap behind.
+   */
+  --panel-left: 240px;
+  --panel-right: 260px;
+  --gutter-left: 6px;
+  --gutter-right: 6px;
+
+  color-scheme: light;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--chrome-field);
+  color: var(--chrome-ink);
+  font: 13px/1.5 -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  overflow: hidden;
+}
+
+body { display: block; }
+
+/* -- top bar ---------------------------------------------------------------- */
+
+/*
+ * The chrome floats over the field instead of taking a band off the top.
+ *
+ * `left`/`right` are the panel tracks plus their gutters, so the two pills stay
+ * over the canvas when a panel is folded away: a bar pinned to the window would
+ * hang over the layers panel at 1600px and over nothing at 900px.
+ */
+.bar {
+  position: fixed;
+  top: 12px;
+  left: calc(var(--panel-left) + var(--gutter-left) + 12px + var(--edge-left, 0px));
+  right: calc(var(--panel-right) + var(--gutter-right) + 12px + var(--edge-right, 0px));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  background: none;
+  z-index: 30;
+  pointer-events: none;
+}
+
+.bar > * { pointer-events: auto; }
+
+.bar-left, .bar-right {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+  height: 36px;
+  padding: 0 6px;
+  background: var(--chrome-pill);
+  border: 1px solid var(--chrome-line);
+  border-radius: 999px;
+  box-shadow: var(--chrome-shadow-pill);
+  white-space: nowrap;
+}
+
+/*
+ * The bar has five widths, and `applyBarFit()` in app.mjs picks the widest one
+ * that fits the canvas. Waiting for a media query would be wrong here: the room
+ * the bar has is the window minus both panels, so opening a panel can squeeze it
+ * at 1600px while a closed pair is roomy at 900px.
+ *
+ * The order of what goes is the order of what is least missed: the file name and
+ * revision are identity, not action; `Export` duplicates `Export all`; the
+ * Problems label keeps its count; and at the narrowest step only the actions
+ * themselves survive.
+ */
+.bar:is([data-fit="tight"], [data-fit="narrow"], [data-fit="mini"], [data-fit="micro"]) :is(.file, #revision) { display: none; }
+
+.bar:is([data-fit="narrow"], [data-fit="mini"], [data-fit="micro"]) :is(.export-sep, #export-page) { display: none; }
+
+.bar:is([data-fit="mini"], [data-fit="micro"]) :is(#undo, #redo, .sep, #fit) { display: none; }
+
+/* The last step gives up the export action, not the diagnostics: at this width a
+   panel has to be closed to get the file out, while a warning count is the one
+   thing a canvas this cramped must still show. */
+.bar[data-fit="micro"] #export-all { display: none; }
+
+.bar button { height: 26px; padding: 0 9px; border-radius: 999px; }
+
+.brand { font-weight: 600; letter-spacing: 0.02em; padding-left: 6px; }
+.file { color: var(--chrome-dim); }
+
+.pill {
+  padding: 1px 7px;
+  border: 1px solid var(--chrome-line);
+  border-radius: 999px;
+  background: var(--chrome-track);
+  color: var(--chrome-dim);
+  font-size: 11px;
+}
+
+.pill.warn { color: var(--chrome-warn); border-color: var(--chrome-warn); }
+
+.zoom { color: var(--chrome-dim); min-width: 44px; text-align: right; }
+
+button {
+  font: inherit;
+  color: var(--chrome-dim);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 3px 9px;
+  cursor: pointer;
+}
+
+button:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
+
+/*
+ * One focus ring, everywhere.
+ *
+ * The ring is ink, two pixels, and it sits outside the control with a two-pixel
+ * gap — the same weight as the selection ring, so "this is the thing the
+ * keyboard is on" reads the same as "this is the thing you picked". It is only
+ * drawn for `:focus-visible`, so a mouse click on a button leaves no ring
+ * behind, while a text field still shows it (a field is always "keyboard
+ * input", which is what the pseudo-class means).
+ *
+ * Contexts that cannot afford an outside ring tighten the offset below: a row
+ * inside a scrolling tree, a segment inside its track, a row inside the
+ * problems list. They keep the two pixels; only the gap changes.
+ */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--chrome-ink);
+  outline-offset: 2px;
+}
+button:disabled { opacity: 0.4; cursor: default; }
+
+button.active { border-color: var(--chrome-accent); color: var(--chrome-accent); }
+
+.count {
+  display: inline-block;
+  min-width: 16px;
+  padding: 0 4px;
+  margin-left: 4px;
+  border-radius: 8px;
+  background: var(--chrome-track);
+  font-size: 11px;
+  text-align: center;
+}
+
+.count.has-errors { background: var(--chrome-danger); color: #ffffff; }
+
+.sep { width: 1px; height: 18px; background: var(--chrome-line); }
+
+/* -- layout ----------------------------------------------------------------- */
+
+#stage {
+  height: 100vh;
+  display: grid;
+  grid-template-columns:
+    var(--panel-left) var(--gutter-left)
+    minmax(0, 1fr)
+    var(--gutter-right) var(--panel-right);
+  min-height: 0;
+}
+
+/*
+ * Every column is named, not placed.
+ *
+ * The five children are laid into the five tracks in order — until one of them
+ * is `hidden` and drops out of the grid, at which point the rest shuffle one
+ * track to the left: the canvas lands in the zero-width panel track and
+ * disappears, and the inspector takes the `1fr`. Naming the columns is what
+ * makes hiding a panel a change of width instead of a change of layout.
+ */
+#panel-left { grid-column: 1; }
+#divider-left { grid-column: 2; }
+.viewport { grid-column: 3; }
+#divider-right { grid-column: 4; }
+#panel-right { grid-column: 5; }
+
+/*
+ * Both panels are cards on the field.
+ *
+ * A 12px margin leaves the field visible around each one, so the paper language
+ * reaches the chrome without either panel taking canvas away: the columns still
+ * size the grid, and the card is what the margin draws inside them.
+ */
+.panel {
+  background: var(--chrome-panel);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.panel.left {
+  margin: 12px;
+  border: 1px solid var(--chrome-line);
+  border-radius: 14px;
+  box-shadow: var(--chrome-shadow-panel);
+}
+
+.panel.right {
+  margin: 12px;
+  border: 1px solid var(--chrome-line);
+  border-radius: 14px;
+  box-shadow: var(--chrome-shadow-panel);
+}
+
+/*
+ * A `hidden` panel is taken off screen by the one `[hidden]` rule at the foot of
+ * this sheet.
+ *
+ * It was spelled out here first, per class — `.panel[hidden]`, `.divider[hidden]`,
+ * `.viewport-toggle[hidden]` — and that list is how the Problems drawer stayed on
+ * screen: the drawer is given a `display` too, and it was written before the list
+ * was. One rule at the end cannot go stale that way.
+ */
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 8px 6px 10px;
+  border-bottom: 1px solid var(--chrome-line);
+  color: var(--chrome-dim);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  flex: none;
+}
+
+/*
+ * The two buttons in the Layers header: expand all, collapse all.
+ *
+ * Icons rather than words, because the header is 240px wide and
+ * `text-transform: uppercase` turns any label into a shout that does not fit
+ * beside "LAYERS". The tooltip and the accessible name carry the meaning.
+ */
+.head-actions { display: flex; align-items: center; gap: 2px; }
+
+/* The fold control and the panel's name share the window edge. */
+.head-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.head-title .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* The name in the right header is the only child that may shrink; the toggle
+   beside it must keep its 20px. */
+#selection-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.head-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  color: var(--chrome-dim);
+}
+
+.head-button:hover { color: var(--chrome-ink); background: var(--chrome-hover); }
+.head-button:focus-visible,
+.edge-toggle:focus-visible,
+.bar button:focus-visible { outline-offset: 1px; }
+.head-button svg { display: block; }
+
+.panel-scroll { flex: 1; min-height: 0; overflow: auto; }
+
+.panel-body { padding: 10px; }
+
+/* -- panel divider ---------------------------------------------------------- */
+
+/*
+ * A 6px handle with a 1px hairline down its middle.
+ *
+ * The hairline is a background layer, not a border: a border would take a pixel
+ * off the grab area and the line would jump a pixel sideways when the pointer
+ * landed on it. `touch-action: none` is what lets a finger drag the edge
+ * instead of scrolling the panel under it.
+ */
+.divider {
+  position: relative;
+  width: 100%;
+  cursor: col-resize;
+  background: transparent;
+  touch-action: none;
+}
+
+.divider:hover, .divider.dragging { background: var(--chrome-line) center / 2px 100% no-repeat; }
+
+.divider:focus-visible { outline: 2px solid var(--chrome-ink); outline-offset: -2px; }
+
+/* -- panel toggles ---------------------------------------------------------- */
+
+/*
+ * The tab a folded-away panel leaves behind.
+ *
+ * It exists only while its panel is closed (`hidden` is toggled with the panel),
+ * so the canvas never carries a control that duplicates one in a header.
+ */
+/*
+ * The tabs sit on the bar's row, not under it: a folded panel's control is
+ * chrome, and chrome lives at the top. `--edge-left`/`--edge-right` (written by
+ * `applyPanels`) hold the space open so the pills never sit on top of a tab.
+ */
+.edge-toggle {
+  position: absolute;
+  top: 16px;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 8px;
+  background: var(--chrome-pill);
+  border: 1px solid var(--chrome-line);
+  box-shadow: var(--chrome-shadow-pill);
+  color: var(--chrome-dim);
+}
+
+.edge-toggle.left { left: 12px; }
+.edge-toggle.right { right: 12px; }
+
+.edge-toggle:hover { color: var(--chrome-ink); background: var(--chrome-panel); }
+
+
+.edge-toggle svg { display: block; }
+
+/* -- the layer tree --------------------------------------------------------- */
+
+/*
+ * One tree, pages at its root. The nesting is real: a `<ul>` inside the `<li>`
+ * is the child list, so the indent is the browser's, not `depth * 12px` on a
+ * flat list. A flat list can be indented to look nested; it cannot be collapsed,
+ * and collapse is the whole reason this panel exists.
+ */
+.tree, .tree-children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree-children { padding-left: 13px; }
+
+.tree-item { min-width: 0; }
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px 3px 4px;
+  cursor: default;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tree-row { border-radius: 6px; margin: 1px 6px; padding-left: 4px; }
+
+.tree-row:hover { background: var(--chrome-hover); }
+
+.tree-item[aria-selected="true"] > .tree-row {
+  background: var(--chrome-selected);
+  box-shadow: inset 2px 0 0 var(--chrome-ink);
+}
+
+.tree-item:focus-visible { outline: none; }
+.tree-item:focus-visible > .tree-row { outline: 2px solid var(--chrome-ink); outline-offset: -2px; }
+
+/*
+ * The chevron is drawn, not typed. A glyph would inherit whatever the system
+ * font does with `▸`, and it would have to be rewritten on every expand; a
+ * rotated triangle is one rule keyed off `aria-expanded`, the attribute that
+ * already has to be right for the keyboard and the screen reader.
+ */
+.chevron {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--chrome-dim);
+  border-radius: 3px;
+}
+
+.chevron::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 4px solid currentColor;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+  transform: rotate(0deg);
+  transition: transform 90ms linear;
+}
+
+.tree-item[aria-expanded="true"] > .tree-row > .chevron::before { transform: rotate(90deg); }
+
+.chevron.leaf::before { display: none; }
+.chevron:hover { color: var(--chrome-ink); background: var(--chrome-hover); }
+
+.tree-label { overflow: hidden; text-overflow: ellipsis; }
+
+.tree-type {
+  flex: none;
+  color: var(--chrome-dim);
+  font-size: 11px;
+}
+
+/* A hidden element keeps its row, greyed: it is still in the file, and a layer
+   list that drops it would make the next edit a guess. */
+.tree-item[data-hidden="true"] > .tree-row > .tree-label { color: var(--chrome-dim); text-decoration: line-through; }
+
+.tree-item .badge {
+  flex: none;
+  margin-left: auto;
+  padding-left: 6px;
+  font-size: 10px;
+  color: var(--chrome-dim);
+}
+
+.tree-empty { padding: 8px 10px; color: var(--chrome-dim); }
+
+/* -- viewport --------------------------------------------------------------- */
+
+/*
+ * The field: warm paper with one dot, repeated.
+ *
+ * The pitch and the offset are written by `applyCamera` in screen pixels: the
+ * pitch is clamped to 14–44px so the grid stays a texture at every zoom instead
+ * of becoming noise at 10% or an empty page at 400%, and the offset follows the
+ * camera so panning moves the paper. `background-size` here is only the first
+ * paint, before the first camera write. Below 30% the dots are taken away and
+ * the field keeps its colour.
+ */
+.viewport {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--chrome-field);
+  background-image: radial-gradient(circle, var(--chrome-dot) 1px, transparent 1.7px);
+  background-size: 26px 26px;
+  cursor: default;
+  min-width: 0;
+}
+
+.viewport[data-zoom="far"] { background-image: none; }
+
+/*
+ * While the canvas is being dragged, nothing on it is text to select.
+ *
+ * `user-select: none` on the viewport is inherited into the pages' shadow roots,
+ * so it covers the design's own text as well as the chrome — which is what stops
+ * a pan from leaving a blue smear over every string in the file.
+ */
+.viewport.panning { cursor: grabbing; user-select: none; }
+
+/*
+ * A geometry drag is not a text gesture.
+ *
+ * `user-select: none` on the viewport reaches the chrome, and the page hosts
+ * resolve their own `auto` against it, so the design's text stops being
+ * selectable while an element is being dragged. It is scoped to the drag: with
+ * the class off, selecting a string inside a page works as before.
+ */
+.viewport.moving, .viewport.moving .page-host { user-select: none; }
+.viewport.move-mode { cursor: move; }
+
+.canvas {
+  position: absolute;
+  inset: 0;
+  transform-origin: 0 0;
+  /*
+   * No `will-change: transform` here, on purpose.
+   *
+   * This element holds every page in the file and it is the thing the camera
+   * scales. `will-change` asks the engine to keep it as one composited layer
+   * with its own texture, and a texture has a size limit: past it the layer is
+   * rasterized once at a low scale and the compositor stretches the result. The
+   * text goes soft and nothing in the document says why.
+   *
+   * The transform changes when the user zooms or pans, not every frame, so there
+   * is nothing to keep the layer warm for.
+   */
+}
+
+.page-box {
+  position: absolute;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--chrome-line);
+  box-shadow: var(--chrome-shadow-page);
+}
+
+.page-box.selected { outline: 2px solid var(--chrome-ink); outline-offset: 2px; }
+
+/*
+ * A page's name is chrome, so it does not zoom with the drawing.
+ *
+ * The label sits inside the page box, and the page box is inside the element the
+ * camera scales — so the name used to be a 1.9px smudge at 10% and a headline at
+ * 400%, and a name is only a name when it can be read. `--chrome-unzoom` is the
+ * reciprocal of the zoom, written by `applyCamera`; scaling by it gives the pill
+ * its own size in screen pixels at every step of the ladder.
+ *
+ * The bottom edge is the anchor, because the lift has to be a screen distance
+ * too. Pinned by its top — the `top: -22px` this used to be — the pill's 3.5px
+ * of air scaled with everything else: 14px over the page it names at 400%, and
+ * under a pixel at 25%, where the label sits as good as flat on the design.
+ * `bottom: 100%` moves the anchor onto the page's top edge, and translating by
+ * the same reciprocal leaves the same 4px of air at every zoom. At 100% that is
+ * where the old offset landed, to within the half pixel the pill's own height
+ * rounds by.
+ *
+ * Undone by a transform, not by a second element or a per-zoom class: there is
+ * one label per page, in one place, and its hit box is the pill you can see — as
+ * draggable at 10% as at 100%.
+ */
+.page-label {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--chrome-ink);
+  color: #fbfaf8;
+  font-size: 10.5px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  cursor: move;
+  user-select: none;
+  --label-gap: 4px;
+  transform-origin: left bottom;
+  transform:
+    translateY(calc(var(--label-gap) * var(--chrome-unzoom, 1) * -1))
+    scale(var(--chrome-unzoom, 1));
+}
+
+.page-box.selected .page-label { color: #ffffff; background: #2a2823; }
+
+.page-box.dragging { opacity: 0.85; }
+
+/* -- selection overlay ------------------------------------------------------ */
+
+.overlay { position: absolute; inset: 0; pointer-events: none; }
+
+/*
+ * A box is a line *around* the element, and nothing else.
+ *
+ * Three decisions, all of them about not covering the thing being looked at:
+ *
+ *   `outline`, not `border`. An outline is painted outside the border box, so
+ *   the weight of the line costs the design nothing — a border eats the first
+ *   pixels of every edge, and on a 3px-wide element at 11% zoom that is the whole
+ *   element. Because the line is free, its weight can be chosen for legibility
+ *   alone: two pixels, drawn in viewport pixels rather than the design's, so it
+ *   is the same at 11% and at 400%. One pixel was a hairline against a dark page
+ *   or a busy photograph.
+ *   No fill. The selection used to be washed with 10% blue, which on a full-page
+ *   frame is a veil over the entire artboard: you cannot judge a colour, a
+ *   gradient or a photograph through it.
+ *   Weight by kind, colour by commitment. Two pixels means "a level", one means
+ *   "a child of one". *Which* level — the committed one or the one the pointer is
+ *   standing on — is said by the colour and by the four handles, which only the
+ *   selection has. Encoding that in weight instead left the hover box thinner
+ *   than the children it was framing, which is backwards: the container is the
+ *   frame of the decision, not a cursor.
+ */
+/*
+ * The selection is ink, with a white halo underneath it.
+ *
+ * The field is light, the pages are white and many designs put a photograph
+ * under the box — a dark line alone disappears on a dark image, a light line
+ * alone disappears on paper. The halo is one pixel of white so the ring reads on
+ * any of the three.
+ */
+.outline {
+  position: absolute;
+  outline: 2px solid var(--chrome-ink);
+  outline-offset: 1px;
+  background: none;
+  pointer-events: none;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95);
+}
+
+/*
+ * The level the pointer is standing on: the same weight as the selection, a
+ * lighter blue, and no handles.
+ */
+.outline.level { outline-color: rgba(20, 19, 15, 0.55); box-shadow: none; }
+
+/*
+ * Its direct children: what a double-click steps into, one rung down.
+ *
+ * One pixel, and spelled out rather than inherited from `.outline`, which is a
+ * rule the class shares — the width was inherited once, and thickening the
+ * selection thickened every dashed box with it.
+ *
+ * One, not two, because a stack of rows with no gaps between them is the case
+ * this has to survive: thirteen rows in a card, each with a two pixel dashed box,
+ * is 26 pixels of dash across a 148 pixel card at 29% zoom — a mesh rather than
+ * thirteen boxes. Fading the colour instead only makes the mesh paler, which is
+ * why the width is what moved.
+ */
+.outline.child {
+  outline-style: dashed;
+  outline-width: 1px;
+  outline-color: rgba(20, 19, 15, 0.45);
+  box-shadow: none;
+}
+
+/*
+ * The one the pointer is actually over — the box a click would take.
+ *
+ * It cannot be told apart by a wash any more, so it is told apart by the line:
+ * two pixels against its siblings' one, and brighter. It still reads as a dashed
+ * box, which is what it is — the child you are about to step into.
+ */
+.outline.child.under {
+  outline-width: 2px;
+  outline-color: rgba(20, 19, 15, 0.75);
+}
+
+/* A box too small to have usable corners: the ring stays, the handles go. */
+.outline.small .handle { display: none; }
+
+.handle {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  margin: -4.5px 0 0 -4.5px;
+  background: #ffffff;
+  border: 1.5px solid var(--chrome-ink);
+  border-radius: 50%;
+  pointer-events: auto;
+}
+
+/* -- inspector -------------------------------------------------------------- */
+
+.field { margin-bottom: 8px; min-width: 0; }
+
+.field label {
+  display: block;
+  color: var(--chrome-dim);
+  font-size: 11px;
+  margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.field input[type="text"], .field input[type="number"], .field select, .field textarea {
+  width: 100%;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: var(--chrome-ink);
+  background: var(--chrome-input);
+  border: 1px solid var(--chrome-line);
+  border-radius: 5px;
+  padding: 4px 6px;
+}
+
+.field input[type="color"] {
+  width: 100%;
+  height: 26px;
+  padding: 0;
+  background: var(--chrome-input);
+  border: 1px solid var(--chrome-line);
+  border-radius: 5px;
+}
+
+/*
+ * These sit after the base field rules on purpose: `border` above is a shorthand,
+ * and a `border-color` written before it loses to it however specific the
+ * selector is. The ring still shows without this, but the field should also
+ * change its edge — a screenshot of two rings at 11% is not enough to tell which
+ * one has the keyboard.
+ */
+.field input:hover:not(:disabled), .field select:hover:not(:disabled), .field textarea:hover:not(:disabled) {
+  border-color: rgba(20, 19, 15, 0.22);
+}
+
+.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
+.drawer-fix textarea:focus-visible {
+  outline-offset: 1px;
+  border-color: var(--chrome-ink);
+}
+
+/*
+ * One row, two columns — used when a section has a pair of properties.
+ *
+ * `1fr 1fr` and a single child is a child in the first column, which is what an
+ * unpaired property wants: half a row would be a misleading amount of space for
+ * a value that has no partner.
+ */
+.field-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 6px;
+  min-width: 0;
+}
+
+/*
+ * A row with one property, not a pair.
+ *
+ * The two-column grid is for width/height, left/top and the other pairs that are
+ * read together. A property without a partner took half of that grid and left
+ * the other half empty, which is how `padding:26px 26px 20px 26px` came to be
+ * cut off at "20p" in a panel with room for it. One property, one full row.
+ */
+.field-grid.single { grid-template-columns: 1fr; }
+
+/* -- inspector sections ----------------------------------------------------- */
+
+.section { margin-bottom: 4px; border-top: 1px solid var(--chrome-line); }
+
+.section-head {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 7px 2px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: var(--chrome-dim);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: left;
+  cursor: pointer;
+}
+
+.section-head:hover { color: var(--chrome-ink); background: none; }
+.section-head:focus-visible { outline-offset: -2px; }
+
+/* A triangle that turns: the fold is visible before it is used. */
+.section-head::before {
+  content: "";
+  width: 0;
+  height: 0;
+  margin-right: 6px;
+  border-left: 4px solid currentColor;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+  transform: rotate(90deg);
+  transition: transform 90ms linear;
+}
+
+.section.folded .section-head::before { transform: rotate(0deg); }
+
+.section-body { padding-bottom: 6px; }
+.section.folded .section-body { display: none; }
+
+/* -- segmented control ------------------------------------------------------ */
+
+/*
+ * Two or three short alternatives as buttons. `justify-content` has five values
+ * and gets a dropdown instead; the rule lives in `canvas/groups.mjs`.
+ */
+.seg {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--chrome-track);
+  border: 1px solid var(--chrome-line);
+  border-radius: 6px;
+}
+
+.seg-option {
+  flex: 1;
+  min-width: 0;
+  padding: 3px 2px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--chrome-dim);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.seg-option:hover { background: var(--chrome-hover); }
+.seg-option:focus-visible { outline-offset: -2px; }
+.seg-option.active {
+  background: var(--chrome-input);
+  color: var(--chrome-ink);
+  box-shadow: 0 1px 2px rgba(20, 19, 15, 0.10);
+}
+
+.scrub { cursor: ew-resize; }
+
+.value-line {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--chrome-dim);
+  word-break: break-all;
+}
+
+.empty { color: var(--chrome-dim); }
+.muted { color: var(--chrome-dim); }
+
+dl.attrs { margin: 0 0 6px; }
+dl.attrs dt { color: var(--chrome-dim); font-size: 11px; }
+dl.attrs dd { margin: 0 0 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; }
+
+/* -- problems drawer -------------------------------------------------------- */
+
+/*
+ * The problems sheet.
+ *
+ * A card on the same field as the panels, 12px in from the canvas edges: closing
+ * a panel widens it instead of leaving it over a track that is no longer there.
+ * Inside it is the same paper language — an eyebrow with a count, monospaced
+ * codes, a severity chip, and the hint under the message rather than beside it,
+ * because a hint is a sentence and a sentence reads down, not across.
+ */
+.drawer {
+  position: absolute;
+  left: calc(var(--panel-left) + var(--gutter-left) + 12px);
+  right: calc(var(--panel-right) + var(--gutter-right) + 12px);
+  bottom: 12px;
+  max-height: 42%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--chrome-panel);
+  border: 1px solid var(--chrome-line);
+  border-radius: 14px;
+  box-shadow: var(--chrome-shadow-panel);
+  z-index: 20;
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--chrome-line);
+}
+
+.drawer-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+
+.drawer-summary {
+  font-size: 11px;
+  color: var(--chrome-dim);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.drawer-actions { display: flex; align-items: center; gap: 4px; }
+.drawer-actions button { height: 26px; padding: 0 10px; border-radius: 999px; }
+.drawer-close { background: var(--chrome-track); }
+
+.drawer-body { overflow: auto; padding: 4px 6px 6px; min-height: 0; }
+
+.drawer-fix {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--chrome-line);
+}
+
+.drawer-hint { margin: 0; font-size: 11px; color: var(--chrome-dim); }
+
+/* The whole file, monospaced, because that is what it is. `wrap="off"` on the element
+   keeps a long line from folding, which would make an offset impossible to find. */
+.drawer-fix textarea {
+  width: 100%;
+  height: 32vh;
+  resize: vertical;
+  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--chrome-input);
+  color: var(--chrome-ink);
+  border: 1px solid var(--chrome-line);
+  border-radius: 6px;
+  padding: 6px 8px;
+  white-space: pre;
+  overflow: auto;
+}
+
+.issue {
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border-bottom: 1px solid var(--chrome-line);
+}
+
+.issue:last-child { border-bottom: 0; }
+.issue[tabindex] { cursor: pointer; }
+.issue[tabindex]:hover { background: var(--chrome-hover); }
+.issue:focus-visible { outline-offset: -2px; }
+
+.issue .sev {
+  justify-self: start;
+  padding: 2px 7px;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  font-size: 9.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.issue .sev.error { color: var(--chrome-danger); }
+.issue .sev.warning { color: var(--chrome-warn); }
+
+.issue-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.issue .code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  color: var(--chrome-dim);
+}
+.issue .msg {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--chrome-ink);
+  overflow-wrap: anywhere;
+}
+.issue .hint { margin: 0; font-size: 11px; line-height: 1.5; color: var(--chrome-dim); }
+
+/* The empty state is a row-shaped sentence, not a row of a table. */
+.issue.empty { display: block; padding: 18px 14px; color: var(--chrome-dim); border-bottom: 0; }
+
+/* -- toast ------------------------------------------------------------------ */
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 22px;
+  transform: translateX(-50%);
+  max-width: 70vw;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: var(--chrome-ink);
+  border: 1px solid var(--chrome-ink);
+  color: #fbfaf8;
+  box-shadow: var(--chrome-shadow-pill);
+  z-index: 40;
+}
+
+.toast.refused { border-color: var(--chrome-danger); }
+
+/* -- hidden ----------------------------------------------------------------- */
+
+/*
+ * `hidden` means hidden, whatever else this sheet says about the element.
+ *
+ * The browser's own `[hidden] { display: none }` lives in the user-agent sheet,
+ * and every author rule beats it however low its specificity — so `.drawer {
+ * display: flex }` left the Problems drawer on screen with the attribute set. It
+ * covered the bottom 42% of the canvas the moment the file loaded, its Close
+ * button closed nothing, and the empty fix textarea sat under every report.
+ *
+ * Written once, at the end, so no rule above it can beat it and no element given
+ * a `display` later can be missed — which is what a per-class list of `[hidden]`
+ * selectors did.
+ */
+[hidden] { display: none !important; }
+
+/* -- embedded mode ---------------------------------------------------------
+ *
+ * The DSH plugin iframes the canvas in a right-sidebar tab. The layer tree and
+ * inspector are folded by `enterEmbed()` in app.mjs; the bar itself keeps only
+ * what a narrow panel can use: the brand, zoom and Fit. Hiding by attribute
+ * rather than waiting for `applyBarFit()` also makes the first paint correct,
+ * before the bar has measured a single pill.
+ */
+body[data-embed] :is(.bar-left .file, .bar-left .pill, .bar-left .warn,
+  #toggle-problems, .export-sep, #export-page, #export-all) {
+  display: none !important;
+}