@trdrs/quickcharts 3.0.0 → 4.1.0

package/dist/quickcharts.css

@@ -14,7 +14,7 @@
   --qc-canvas-paneBorder: #ebebeb;
   --qc-chrome-border: #ebebeb;
   --qc-chrome-borderStrong: #8c8c8c;
-  --qc-chrome-caret: #0f0f0f;
+  --qc-chrome-caret: #707070;
   --qc-chrome-fieldBorder: #dbdbdb;
   --qc-chrome-grip: #b8b8b8;
   --qc-chrome-radius: 6px;
@@ -27,12 +27,19 @@
   --qc-control-fieldFill: #f2f2f2;
   --qc-control-fieldInvalid: #f23645;
   --qc-control-mark: #ffffff;
+  --qc-control-neutral: #f2f2f2;
+  --qc-control-neutralHover: #ebebeb;
+  --qc-control-neutralInk: #000000;
+  --qc-control-neutralPressed: #dbdbdb;
   --qc-control-off: #9c9c9c;
   --qc-control-offHover: #8c8c8c;
   --qc-control-offPressed: #b8b8b8;
   --qc-control-on: #2e2e2e;
   --qc-control-onHover: #4a4a4a;
+  --qc-control-onInk: #ffffff;
   --qc-control-onPressed: #707070;
+  --qc-control-outline: #2e2e2e;
+  --qc-control-selectEdgeHover: #a8a8a8;
   --qc-drawing-fill: rgba(41, 98, 255, 0.15);
   --qc-drawing-handle: #ffffff;
   --qc-drawing-line: #2962ff;
@@ -43,15 +50,17 @@
   --qc-illustration-ink: #1e222d;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationGlide: 100ms;
   --qc-motion-durationModerate: 250ms;
   --qc-motion-durationSlow: 350ms;
   --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingInOut: ease-in-out;
   --qc-motion-easingLinear: linear;
   --qc-motion-easingOut: ease-out;
   --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --qc-motion-easingStandard: ease;
   --qc-motion-scaleEnter: 0.97;
-  --qc-overlay-scrim: rgba(0, 0, 0, 0.35);
+  --qc-overlay-scrim: rgba(156, 156, 156, 0.5);
   --qc-overlay-separator: #ebebeb;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --qc-overlay-surface: #ffffff;
@@ -80,14 +89,14 @@
   --qc-state-selection: rgba(31, 86, 238, 0.18);
   --qc-status-info: #1160c4;
   --qc-status-loading: #787b86;
-  --qc-status-negative: #cc2f3c;
-  --qc-status-positive: #067a67;
+  --qc-status-negative: #df323f;
+  --qc-status-positive: #078671;
   --qc-status-sessionAfterHours: #f5a623;
   --qc-status-sessionClosed: rgba(0, 0, 0, 0.35);
   --qc-status-sessionExtended: #4c98fb;
   --qc-status-sessionOpen: #22c55e;
   --qc-status-sessionPreMarket: #4c98fb;
-  --qc-status-warning: #8a5a00;
+  --qc-status-warning: #ac6600;
   --qc-text-disabled: #b8b8b8;
   --qc-text-fontFamily: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
   --qc-text-fontSizeAxis: 13px;
@@ -98,7 +107,7 @@
   --qc-text-highlight: #2962ff;
   --qc-text-inverse: #ffffff;
   --qc-text-link: #2962ff;
-  --qc-text-muted: #636363;
+  --qc-text-muted: #6a6a6a;
   --qc-text-onCanvas: #0f0f0f;
   --qc-text-primary: #0f0f0f;
   --qc-text-secondary: #4a4a4a;
@@ -122,25 +131,34 @@
   --qc-control-fieldFill: #2e2e2e;
   --qc-control-fieldInvalid: #f23645;
   --qc-control-mark: #2e2e2e;
+  --qc-control-neutral: #2e2e2e;
+  --qc-control-neutralHover: #3d3d3d;
+  --qc-control-neutralInk: #ffffff;
+  --qc-control-neutralPressed: #4a4a4a;
   --qc-control-off: #636363;
   --qc-control-offHover: #707070;
   --qc-control-offPressed: #636363;
   --qc-control-on: #f2f2f2;
   --qc-control-onHover: #dbdbdb;
+  --qc-control-onInk: #000000;
   --qc-control-onPressed: #8c8c8c;
-  --qc-drawing-fill: rgba(76, 152, 251, 0.15);
+  --qc-control-outline: #ffffff;
+  --qc-control-selectEdgeHover: #808080;
+  --qc-drawing-fill: rgba(41, 98, 255, 0.15);
   --qc-drawing-handle: #0f0f0f;
-  --qc-drawing-line: #4c98fb;
-  --qc-drawing-selected: #4c98fb;
+  --qc-drawing-line: #2962ff;
+  --qc-drawing-selected: #1e53e5;
   --qc-drawing-text: #dbdbdb;
   --qc-illustration-accent: #1976d2;
   --qc-illustration-accentInk: #d1d4dc;
   --qc-illustration-ink: #d1d4dc;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationGlide: 100ms;
   --qc-motion-durationModerate: 250ms;
   --qc-motion-durationSlow: 350ms;
   --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingInOut: ease-in-out;
   --qc-motion-easingLinear: linear;
   --qc-motion-easingOut: ease-out;
   --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -175,14 +193,14 @@
   --qc-state-selection: rgba(82, 160, 252, 0.22);
   --qc-status-info: #68a5ff;
   --qc-status-loading: #787b86;
-  --qc-status-negative: #f7525f;
+  --qc-status-negative: #f34452;
   --qc-status-positive: #089981;
   --qc-status-sessionAfterHours: #f5a623;
   --qc-status-sessionClosed: rgba(255, 255, 255, 0.35);
   --qc-status-sessionExtended: #4c98fb;
   --qc-status-sessionOpen: #22c55e;
   --qc-status-sessionPreMarket: #4c98fb;
-  --qc-status-warning: #f5a623;
+  --qc-status-warning: #ff9800;
   --qc-text-disabled: #575757;
   --qc-text-fontFamily: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
   --qc-text-fontSizeAxis: 13px;
@@ -193,7 +211,7 @@
   --qc-text-highlight: #5280ff;
   --qc-text-inverse: #0f0f0f;
   --qc-text-link: #5b9cf6;
-  --qc-text-muted: #9c9c9c;
+  --qc-text-muted: #9b9b9b;
   --qc-text-onCanvas: #dbdbdb;
   --qc-text-primary: #dbdbdb;
   --qc-text-secondary: #b8b8b8;
@@ -203,6 +221,7 @@
   [data-qc-theme] {
     --qc-motion-durationBase: 0ms !important;
     --qc-motion-durationFast: 0ms !important;
+    --qc-motion-durationGlide: 0ms !important;
     --qc-motion-durationModerate: 0ms !important;
     --qc-motion-durationSlow: 0ms !important;
     --qc-motion-durationSlower: 0ms !important;
@@ -230,12 +249,35 @@
  * each chrome surface keeps its own recipes beside it.
  */
 
+/* The root states every inherited value the chart's measurements are built on: its box model, its
+ * font and size, and the line height, weight, spacing, alignment and wrapping its words are set in.
+ * The widget's root and its layer on the document body both carry it. The dialogs, menus and panels
+ * on that layer stand inside the page's body, which would hand them whatever the page sets there (a
+ * line height, a weight, letter spacing); stated here, none of it reaches anything the chart draws. */
 [data-qc-theme] {
   position: relative;
   box-sizing: border-box;
   color: var(--qc-text-primary);
   font-family: var(--qc-text-fontFamily);
   font-size: var(--qc-text-fontSizeBase);
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  font-variant: normal;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-kerning: auto;
+  line-height: normal;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-rendering: auto;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
   background: var(--qc-canvas-background);
 }
 
@@ -245,6 +287,16 @@
   box-sizing: inherit;
 }
 
+/* Every control reads in the chart's font: a button, a field or a list takes the root's family rather
+ * than the browser's own control font, whatever words it shows or holds. A recipe that sets a size
+ * or a weight keeps it, and one that names a family of its own outranks this. */
+[data-qc-theme] button,
+[data-qc-theme] input,
+[data-qc-theme] select,
+[data-qc-theme] textarea {
+  font-family: inherit;
+}
+
 /* Surfaces ------------------------------------------------------------------------------------ */
 
 [data-qc-theme] .qc-surface {
@@ -380,7 +432,7 @@
 }
 
 /* A field that cannot be edited stands on the read-only fill, its edge at rest under the pointer. A
- * disabled one stands its words back too. */
+ * disabled one stands its words back too, in the disabled ink. */
 [data-qc-theme] .qc-field[readonly] {
   background: var(--qc-control-fieldFill);
   border-color: var(--qc-control-fieldEdge);
@@ -388,7 +440,7 @@
 
 [data-qc-theme] .qc-field:disabled,
 [data-qc-theme] .qc-field[aria-disabled='true'] {
-  color: var(--qc-text-muted);
+  color: var(--qc-text-disabled);
   background: var(--qc-control-fieldFill);
   border-color: var(--qc-control-fieldEdge);
   cursor: default;
@@ -418,7 +470,7 @@
   box-shadow: inset 0 0 0 1px var(--qc-control-fieldInvalid);
 }
 
-/* A select draws its own chevron: the 18px mark in the muted ink, in a 20 by 28 slot 2px in from the
+/* A select draws its own chevron: the 18px mark in the caret ink, in a 20 by 28 slot 2px in from the
  * end of the box. A native select gives up the slot's room and takes the press the slot lets
  * through; a list button lays the slot out after its face and turns the mark while its list is open,
  * keyed on its own state, so a list button inside some other open thing does not turn. */
@@ -442,7 +494,7 @@
   justify-content: center;
   width: 20px;
   height: 28px;
-  color: var(--qc-text-muted);
+  color: var(--qc-chrome-caret);
   pointer-events: none;
 }
 
@@ -453,7 +505,7 @@
 }
 
 [data-qc-theme] .qc-select-chevron > svg {
-  transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingSpring);
+  transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] [aria-expanded='true'] > .qc-select-chevron > svg {
@@ -1892,12 +1944,45 @@
 
 /* The inline text editor over the pane, the glyph picker and the image picker. */
 
-/* The editor sits at the drawing's own text position in the drawing's own type; its size follows
- * the content and is written by the editor, because it is measured text. The ring is the focus
- * role, so it reads as the field it is without a fill hiding the chart. */
+/* The text editor over the pane. Its place, size and type are written by the editor, because they
+ * are the words' own. */
 [data-qc-theme] .qc-drawing-text-editor {
   position: absolute;
   z-index: 8;
+  margin: 0;
+  resize: none;
+  pointer-events: auto;
+}
+
+/* Over a drawing that types its words on the chart, the field is seen by nobody: the chart paints
+ * the words, the caret, the selection and the placeholder, and the field only takes the keys. It
+ * lies exactly over the painted words, 2px of padding around their block, in their own type with
+ * nothing of its own (no spacing, features or decoration) that would part its caret from them. */
+[data-qc-theme] .qc-drawing-text-editor[data-qc-editor='inline'] {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: none;
+  padding: 2px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  color: inherit;
+  font-feature-settings: normal;
+  font-kerning: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-indent: 0;
+  text-transform: none;
+  background: none;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  opacity: 0;
+}
+
+/* Over any other drawing, the editor is a box at the drawing's own text position in the drawing's
+ * own type, its size following the content. The ring is the focus role, so it reads as the field it
+ * is without a fill hiding the chart. */
+[data-qc-theme] .qc-drawing-text-editor[data-qc-editor='box'] {
   padding: 3px 6px;
   overflow: hidden;
   text-align: center;
@@ -1907,11 +1992,9 @@
   border-radius: 2px;
   outline: none;
   box-shadow: 0 0 0 1px var(--qc-state-focusRing);
-  resize: none;
-  pointer-events: auto;
 }
 
-[data-qc-theme] .qc-drawing-text-editor::placeholder {
+[data-qc-theme] .qc-drawing-text-editor[data-qc-editor='box']::placeholder {
   color: var(--qc-text-muted);
 }
 
@@ -2065,7 +2148,7 @@
   color: var(--qc-text-primary);
   background: var(--qc-chrome-surfaceRaised);
   border: 1px dashed var(--qc-chrome-borderStrong);
-  border-radius: var(--qc-chrome-radiusLarge);
+  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -2081,16 +2164,21 @@
   object-fit: contain;
 }
 
+/* The words a drop box states: its call at 16 on 24 with 8px around it and 8px under it, then the
+ * formats and the size at 14 on 21 in the secondary ink. */
 [data-qc-theme] .qc-drawing-drop-words {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   align-items: center;
-  font-size: var(--qc-text-fontSizeSmall);
+  font-size: var(--qc-text-fontSizeBase);
+  line-height: 21px;
 }
 
 [data-qc-theme] .qc-drawing-drop-title {
-  font-size: var(--qc-text-fontSizeBase);
+  margin-bottom: 8px;
+  padding: 8px;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 [data-qc-theme] .qc-drawing-file {
@@ -2151,33 +2239,167 @@
   cursor: default;
 }
 
-/* The text fields, selects and number fields are the chart's 34px field box; these rules give them
- * their widths alone. */
+/* On a settings page a row lays out nothing of its own: its label and its controls are the grid's
+ * two cells, each 50px tall around a 34px control. A label stands 20px clear of the controls and
+ * wraps rather than cutting a word short; the controls stand 8px apart. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-row {
+  display: contents;
+}
+
+[data-qc-theme] .qc-drawing-page .qc-drawing-row-label {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 50px;
+  padding: 8px 20px 8px 0;
+  overflow: visible;
+  color: var(--qc-text-primary);
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+[data-qc-theme] .qc-drawing-page .qc-drawing-row-controls {
+  flex-wrap: nowrap;
+  gap: 8px;
+  min-width: 0;
+  min-height: 50px;
+  padding: 8px 0;
+}
+
+/* A checkbox row: the 18px box 8px before its words, across both columns in a 50px row. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-toggle {
+  min-height: 50px;
+}
+
+[data-qc-theme] .qc-drawing-row-full {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 50px;
+  padding: 8px 0;
+}
+
+/* A section title: 11px capitals in the muted ink, in a 32px row, or in a field row's 50px where it
+ * heads a list of inputs. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-section {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0;
+  letter-spacing: normal;
+}
+
+[data-qc-theme] .qc-drawing-page > .qc-drawing-section--row {
+  height: 50px;
+}
+
+/* A checkbox row in a list of inputs stands 34px, 8px around its box. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-toggle--compact {
+  min-height: 34px;
+}
+
+/* A row nested under the switch before it sets its label, or its labelling checkbox, 26px in. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-row--nested > .qc-drawing-row-label {
+  padding-inline-start: 26px;
+}
+
+/* A band on one line: its switch 16px before its name, then its multiplier 8px after the name. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-band-row > .qc-drawing-toggle {
+  gap: 16px;
+}
+
+[data-qc-theme] .qc-drawing-group-gap {
+  height: 16px;
+}
+
+/* The text fields, list buttons and number fields are the chart's 34px field box; these rules give
+ * them their widths and lay a list button's face out: its words 8px in, cut short with an ellipsis,
+ * then the chevron's slot 2px from the end. */
 [data-qc-theme] .qc-drawing-select {
-  min-width: 140px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  width: 100px;
+  padding: 0 2px 0 7px;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* A list button's edge steps further under the pointer than another field's, below the states that
+ * outrank the pointer: a field that cannot be used, a refused value and the keyboard's ring. */
+[data-qc-theme] .qc-drawing-select:hover:not(:disabled):not([aria-invalid='true']):not(:focus-visible) {
+  border-color: var(--qc-control-selectEdgeHover);
+}
+
+[data-qc-theme] .qc-drawing-select[data-width='medium'] {
+  width: 150px;
+}
+
+[data-qc-theme] .qc-drawing-select[data-width='wide'] {
+  width: 180px;
+}
+
+[data-qc-theme] .qc-drawing-select-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-end: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A list's rows: 32px, the words at 14 on 18 and 8px in; a row with a mark carries the 28px mark 4px
+ * in and its name 6px after it; a row of a list of switches carries the settings rows' 18px checkbox
+ * 8px in and its name 10px after it. The chosen row of a list of choices inverts; a ticked switch
+ * keeps the list's ground, its box saying it is on. A list button's list is as wide as its
+ * longest row, never narrower than the button that opened it (the button sets that floor, and a
+ * list of switches is held to the button's own width). */
+[data-qc-theme] .qc-drawing-menu.qc-drawing-select-list {
+  width: max-content;
+  min-width: 0;
+}
+
+[data-qc-theme] .qc-drawing-list-row {
+  height: 32px;
+  gap: 0;
+  padding: 0 8px;
+  line-height: 18px;
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-drawing-list-row--mark {
+  gap: 6px;
+  padding: 0 14px 0 4px;
+}
+
+[data-qc-theme] .qc-drawing-list-row--check {
+  gap: 10px;
+  padding: 0 8px;
 }
 
 [data-qc-theme] .qc-drawing-input[data-width='short'] {
   width: 96px;
 }
 
-[data-qc-theme] .qc-drawing-input[data-width='wide'] {
+/* The text area is the field box 100px tall across the page, 172px for a tool that is its words (a
+ * text, a note, a callout), its words 8px in from the sides and 5px from the top. */
+[data-qc-theme] .qc-drawing-textarea {
   width: 100%;
+  height: 100px;
+  margin: 0;
+  padding: 4px 7px;
+  resize: none;
 }
 
-/* The text area grows from four lines, its words 8px in from every side of its box. */
-[data-qc-theme] .qc-drawing-textarea {
-  width: 100%;
-  height: auto;
-  min-height: 80px;
-  margin-top: 4px;
-  padding: 7px;
-  resize: vertical;
+[data-qc-theme] .qc-drawing-textarea[data-size='tall'] {
+  height: 172px;
 }
 
-/* The number field gives the end of its box to the steppers: a 22 by 28 column 2px in from the edge,
- * revealed on hover or focus. The pointer on a stepper is on the field, so the edge steps up there
- * too, at the weight of the field's own pointer state. */
+/* The number field keeps the end of its box for its steppers whether they show or not: a 22 by 28
+ * slot 2px in from the edge, the words stopping 2px short of it, the arrows revealed on hover or
+ * focus. A field that cannot be used keeps no slot and shows no arrows, its words running to 4px
+ * from its edge. The pointer on a stepper is on the field, so the edge steps up there too, at the
+ * weight of the field's own pointer state. */
 [data-qc-theme] .qc-drawing-number-wrap {
   position: relative;
   display: inline-flex;
@@ -2195,13 +2417,17 @@
   width: 84px;
 }
 
+[data-qc-theme] .qc-drawing-number-wrap[data-width='field'] {
+  width: 100px;
+}
+
 [data-qc-theme] .qc-drawing-number-wrap[data-width='wide'] {
   width: 112px;
 }
 
 [data-qc-theme] .qc-drawing-number {
   width: 100%;
-  padding-inline-end: 26px;
+  padding-inline-end: 28px;
   font-variant-numeric: tabular-nums;
   appearance: textfield;
 }
@@ -2225,6 +2451,14 @@
   display: flex;
 }
 
+[data-qc-theme] .qc-drawing-number:disabled {
+  padding-inline-end: 4px;
+}
+
+[data-qc-theme] .qc-drawing-number:disabled + .qc-drawing-steppers {
+  display: none;
+}
+
 [data-qc-theme] .qc-drawing-stepper {
   display: flex;
   align-items: center;
@@ -2232,11 +2466,12 @@
   width: 22px;
   height: 14px;
   padding: 0;
-  color: var(--qc-text-muted);
+  color: var(--qc-chrome-caret);
   background: none;
   border: 0;
-  border-radius: var(--qc-chrome-radius);
+  border-radius: 4px;
   cursor: pointer;
+  transition: color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard), background-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-drawing-stepper[data-up='true'] svg {
@@ -2245,29 +2480,63 @@
 
 [data-qc-theme] .qc-drawing-stepper:hover {
   color: var(--qc-text-primary);
-  background: var(--qc-state-hover);
+  background: var(--qc-state-pressed);
+}
+
+/* The color popover and the shared color control inside it.
+ *
+ * The popover hangs under the swatch button that opened it, as wide as what it holds wherever it
+ * opens, a 6px corner on the overlay ground, its column 6px clear of its top and bottom: the
+ * palette, then for a stroke the Thickness and Line style rows. It never narrows to the room it
+ * finds: the placement moves it to stay inside the box instead. A color button holding its popover
+ * open rings itself as a field with the keyboard does. */
+[data-qc-theme] .qc-drawing-popover--color {
+  width: max-content;
+  max-width: none;
 }
 
-/* Swatches: a ten-wide grid of squares, the plus cell, and the custom panel it opens in place. */
+[data-qc-theme] .qc-drawing-color-popover {
+  padding: 6px 0;
+}
+
+[data-qc-theme] .qc-drawing-swatch-button[aria-expanded='true'] {
+  border-color: var(--qc-state-focusRing);
+  box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
+}
+
+/* The palette is 224px wide, 6px clear of what stands above and below it and 12px clear of either
+ * side: a ten-wide grid of 17px cells, each carrying its own 3px gutter, in blocks that keep 6px
+ * under them (the greys and the ten hues; the six ramps; the colors this viewer mixed with the plus
+ * after them), a 1px rule 12px clear of the blocks either side, and the opacity under a 12px muted
+ * title. The blocks pull their outer gutters back past the palette's sides, and the rule and the
+ * title stand clear by their own margins, which take a block's in.
+ *
+ * The room either side is margin rather than padding, so the 224px is the palette's own box under
+ * either box model. A page's unlayered rule outranks any box-sizing this layered sheet could state,
+ * and a page that sizes every element by its border box would take padding out of the grid's 224px;
+ * margin it leaves alone, so the palette, and every surface sized to what it holds around it, keeps
+ * the whole grid. */
 [data-qc-theme] .qc-drawing-palette {
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
+  width: 224px;
+  margin-inline: 12px;
+  padding-block: 6px;
 }
 
-/* Inside a panel that pads already, the palette pads the rest of the way rather than again. */
-[data-qc-theme] .qc-inline-panel > .qc-drawing-palette {
-  padding: 6px;
+/* A palette that is a popover's whole content keeps the popover column's 6px inside its own, and
+ * inside a panel that pads already, the palette stands the rest of the way in rather than again. */
+[data-qc-theme] .qc-drawing-popover > .qc-drawing-palette {
+  padding-block: 12px;
+}
+
+[data-qc-theme] .qc-inline-panel .qc-drawing-palette {
+  margin-inline: 6px;
+  padding-block: 6px;
 }
 
 [data-qc-theme] .qc-drawing-swatches {
-  display: flex;
-  flex-direction: column;
+  display: block;
 }
 
-/* A block is a group of rows that stand together; the gap falls between blocks, never between the
- * rows inside one, so the ten hues read as one field of colour rather than ten loose lines. The
- * negative inline margin pulls the outer cells' own gutters back off the panel's padding. */
 [data-qc-theme] .qc-drawing-swatch-block {
   margin: 0 -3px 6px;
 }
@@ -2276,10 +2545,9 @@
   display: flex;
 }
 
-/* Each cell carries its own 3px gutter rather than the row spacing them, which leaves room inside
- * the cell for the ring a chosen colour wears without moving its neighbours. */
 [data-qc-theme] .qc-drawing-swatch {
   position: relative;
+  flex: 0 0 17px;
   width: 17px;
   height: 17px;
   margin: 3px;
@@ -2287,132 +2555,270 @@
   background: var(--qcd-swatch);
   border: 0;
   border-radius: 2px;
+  outline: none;
   cursor: pointer;
 }
 
-/* A cell pale enough to vanish into the panel behind it says so, and takes the panel's own edge. */
-[data-qc-theme] .qc-drawing-swatch[data-qc-pale='true'] {
-  box-shadow: inset 0 0 0 1px var(--qc-chrome-border);
-}
-
-/* The chosen colour is ringed from OUTSIDE, so the swatch keeps its whole face: a ring drawn
- * inside would eat the colour it is pointing at, which is the one thing the reader is judging. */
-[data-qc-theme] .qc-drawing-swatch[data-qc-active='true']::after {
+/* A cell's ring stands 2px outside it, 2px wide on a 6px corner, and fades in and out: the field's
+ * edge under the pointer, the primary ink around the chosen color (over its neighbours), and the
+ * focus color where the keyboard stands. */
+[data-qc-theme] .qc-drawing-swatch::after {
   position: absolute;
   inset: -4px;
-  border: 2px solid var(--qc-text-primary);
-  border-radius: var(--qc-chrome-radius);
+  border: 2px solid transparent;
+  border-radius: 6px;
   content: '';
+  pointer-events: none;
+  transition: border-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-drawing-swatch:hover::after {
+  border-color: var(--qc-control-fieldEdge);
+}
+
+[data-qc-theme] .qc-drawing-swatch[data-qc-active='true']::after {
+  z-index: 1;
+  border-color: var(--qc-text-primary);
+}
+
+[data-qc-theme] .qc-drawing-swatch:focus-visible::after {
+  border-color: var(--qc-state-focusRing);
 }
 
-/* The plus is two hairlines on the cell's own grid: a drawn cross lands dead centre where a glyph
- * would ride high and left of it. The cell carries no fill and no outline of its own. */
+/* On a light panel the palest cell takes the panel's own edge, where it would otherwise vanish. */
+[data-qc-theme='light'] .qc-drawing-swatch[data-qc-pale='true'] {
+  box-shadow: inset 0 0 0 1px var(--qc-chrome-border);
+}
+
+/* The plus: a cell with no fill of its own, crossed at its middle by two 13px hairlines in the
+ * primary ink, washed in the hover fill under the pointer and ringed inside its own edge where the
+ * keyboard stands. */
 [data-qc-theme] .qc-drawing-swatch-plus {
+  position: relative;
+  flex: 0 0 17px;
+  width: 17px;
+  height: 17px;
+  margin: 3px;
+  padding: 0;
   background: none;
-  box-shadow: none;
+  border: 0;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  transition: background-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-drawing-swatch-plus:hover {
+  background: var(--qc-state-hover);
 }
 
 [data-qc-theme] .qc-drawing-swatch-plus::before,
 [data-qc-theme] .qc-drawing-swatch-plus::after {
   position: absolute;
-  inset: 8px 2px;
   background: var(--qc-text-primary);
   content: '';
 }
 
 [data-qc-theme] .qc-drawing-swatch-plus::before {
-  inset: 2px 8px;
+  top: calc(50% - 6.5px);
+  left: calc(50% - 0.5px);
+  width: 1px;
+  height: 13px;
+}
+
+[data-qc-theme] .qc-drawing-swatch-plus::after {
+  top: calc(50% - 0.5px);
+  left: calc(50% - 6.5px);
+  width: 13px;
+  height: 1px;
+}
+
+[data-qc-theme] .qc-drawing-swatch-plus:focus-visible {
+  border: 2px solid var(--qc-state-focusRing);
+  border-radius: 4px;
 }
 
-/* The rule between the offered colours and the ones this viewer mixed. */
 [data-qc-theme] .qc-drawing-separator {
   height: 1px;
-  margin: 6px 0 12px;
+  margin: 12px 0;
   background: var(--qc-overlay-separator);
 }
 
-/* A quiet label over a section of the panel: the room above it is its own, so the panel holding
- * it keeps no gap of its own to add to this. */
 [data-qc-theme] .qc-drawing-section-title {
   margin: 12px 0 4px;
   color: var(--qc-text-muted);
-  font-size: calc(var(--qc-text-fontSizeBase) - 2px);
-}
-
-[data-qc-theme] .qc-drawing-palette-opacity {
-  display: flex;
-  flex-direction: column;
+  font-size: 12px;
+  line-height: 14px;
 }
 
-[data-qc-theme] .qc-drawing-custom {
+/* The opacity: a 10px track filling the row beside the percent field. The track fades from nothing
+ * into the color over the checked ground, inside a 1px edge of the color on a 4px corner; the 12px
+ * knob travels it less its own width, a pixel proud of it above and below, and glides to a value
+ * the keyboard or a press gives it but follows a drag at once. The keyboard's ring stands 4px
+ * around the track. */
+[data-qc-theme] .qc-drawing-opacity-row {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 224px;
+  align-items: center;
 }
 
-[data-qc-theme] .qc-drawing-custom-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  height: 26px;
+[data-qc-theme] .qc-drawing-opacity {
+  position: relative;
+  flex: 1 0 auto;
+  height: 10px;
+  background: repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) 1px 50% / 8px 8px, var(--qcd-ground);
+  border-radius: 5px;
+  outline: none;
+  touch-action: none;
 }
 
-[data-qc-theme] .qc-drawing-custom-swatch {
-  flex: 0 0 auto;
-  width: 26px;
-  height: 26px;
-  background: var(--qcd-swatch);
+[data-qc-theme] .qc-drawing-opacity-fade {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, transparent, var(--qcd-swatch));
+  border: 1px solid var(--qcd-swatch);
   border-radius: 4px;
 }
 
-/* The hex field and the opacity readout are the field box at the mixer's compact 26px: the same edge
- * and pointer step and the same ring, with the corner and the inset scaled to their height. The hex
- * field's box is the wrap around its mark and its input. */
-[data-qc-theme] .qc-drawing-hex-wrap {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  width: 68px;
-  min-width: 0;
-  height: 26px;
-  padding: 0 5px;
-  border: 1px solid var(--qc-control-fieldEdge);
-  border-radius: 6px;
-  transition: border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), box-shadow var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
+[data-qc-theme][dir='rtl'] .qc-drawing-opacity,
+[data-qc-theme] [dir='rtl'] .qc-drawing-opacity {
+  background-position: right 1px top 50%;
 }
 
-[data-qc-theme] .qc-drawing-hex-wrap > .qc-muted {
-  flex: 0 0 7px;
+[data-qc-theme][dir='rtl'] .qc-drawing-opacity-fade,
+[data-qc-theme] [dir='rtl'] .qc-drawing-opacity-fade {
+  background: linear-gradient(to left, transparent, var(--qcd-swatch));
 }
 
-[data-qc-theme] .qc-drawing-hex-wrap:hover,
-[data-qc-theme] .qc-drawing-opacity-readout:hover {
-  border-color: var(--qc-control-fieldEdgeHover);
+[data-qc-theme] .qc-drawing-opacity-travel {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: calc(100% - 12px);
 }
 
-/* A field says it has the keyboard on its own box: a 2px ring over the edge, the edge itself and the
- * pixel inside it, following the corner. The wrap rings while the caret is anywhere inside it. */
-[data-qc-theme] .qc-drawing-hex-wrap:focus-within,
-[data-qc-theme] .qc-drawing-opacity-readout:focus {
-  border-color: var(--qc-state-focusRing);
-  box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
+[data-qc-theme] .qc-drawing-opacity-knob {
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: -1px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-drawing-opacity:not([data-qc-dragging='true']) .qc-drawing-opacity-knob {
+  transition: inset-inline-start var(--qc-motion-durationGlide) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-drawing-opacity:focus-visible::after {
+  position: absolute;
+  inset: -4px;
+  border: 2px solid var(--qc-state-focusRing);
+  border-radius: 6px;
+  content: '';
+  pointer-events: none;
 }
 
+/* The popover's two fields are 26px boxes on a 4px corner, 1px edged in the field's own edge, which
+ * turns the focus color while the field has the keyboard and the invalid color for a value the
+ * field refuses. The percent field is 47px, 8px after the track, its figure set to the end and the
+ * unit standing in the room it keeps there. */
+[data-qc-theme] .qc-drawing-opacity-field {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+[data-qc-theme] .qc-drawing-opacity-readout,
 [data-qc-theme] .qc-drawing-hex {
-  width: 100%;
-  min-width: 0;
-  padding: 0;
+  box-sizing: border-box;
+  height: 26px;
+  margin: 0;
+  margin-inline-start: 8px;
   color: var(--qc-text-primary);
   font: inherit;
-  font-variant-numeric: tabular-nums;
+  font-size: 14px;
+  line-height: 24px;
   background: none;
-  border: 0;
+  border: 1px solid var(--qc-control-fieldEdge);
+  border-radius: 4px;
   outline: none;
 }
 
-/* The Add button takes the colour the mixer is holding. It is sized to its own word and pushed to
- * the end of the row; its fill and ink are the primary recipe's. */
+[data-qc-theme] .qc-drawing-opacity-readout {
+  width: 47px;
+  padding: 0;
+  padding-inline-start: 5px;
+  padding-inline-end: 14px;
+  text-align: end;
+}
+
+[data-qc-theme] .qc-drawing-opacity-readout:focus,
+[data-qc-theme] .qc-drawing-hex:focus {
+  border-color: var(--qc-state-focusRing);
+}
+
+[data-qc-theme] .qc-drawing-hex[aria-invalid='true'] {
+  border-color: var(--qc-control-fieldInvalid);
+}
+
+[data-qc-theme] .qc-drawing-opacity-unit,
+[data-qc-theme] .qc-drawing-hex-mark {
+  position: absolute;
+  top: 5px;
+  color: var(--qc-text-primary);
+  line-height: 16px;
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-drawing-opacity-unit {
+  inset-inline-start: 40px;
+}
+
+/* The custom editor, standing alone in the popover in the palette's place: a 26px row of the held
+ * color's 26px well, its hex and Add, 12px over a 184px area of saturation and brightness that
+ * stands 7px before a 17px hue strip. The hash stands in the room the hex field keeps before its
+ * digits; Add is the primary action at the row's end, a 28px button on an 8px corner. */
+[data-qc-theme] .qc-drawing-custom-row {
+  display: flex;
+  align-items: flex-start;
+  height: 26px;
+  margin-bottom: 12px;
+}
+
+[data-qc-theme] .qc-drawing-custom-swatch {
+  flex: 0 0 26px;
+  width: 26px;
+  height: 26px;
+  background: var(--qcd-swatch);
+  border-radius: 4px;
+}
+
+[data-qc-theme] .qc-drawing-hex-wrap {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  height: 26px;
+}
+
+[data-qc-theme] .qc-drawing-hex-mark {
+  inset-inline-start: 0;
+  width: 21px;
+  text-align: end;
+}
+
+[data-qc-theme] .qc-drawing-hex {
+  width: 68px;
+  padding: 0;
+  padding-inline-start: 12px;
+  padding-inline-end: 5px;
+}
+
 [data-qc-theme] .qc-drawing-add {
   display: inline-flex;
   flex: 0 0 auto;
@@ -2421,6 +2827,9 @@
   height: 28px;
   margin-inline-start: auto;
   padding: 0 7px;
+  font-size: 14px;
+  line-height: 18px;
+  border-radius: 8px;
 }
 
 [data-qc-theme] .qc-drawing-custom-tracks {
@@ -2428,28 +2837,43 @@
   gap: 7px;
 }
 
-/* The saturation and value square over the current hue, and the hue strip beside it. The square
- * keeps square corners: the black it fades into is a second layer over its whole face, and a
- * rounded corner would show the hue beneath it. */
+/* The area is the hue under a fade to white across it and a fade to black down it, on a 2px corner
+ * that clips its knob: a 14px ring standing a pixel past the point it marks. The strip runs the hue
+ * wheel from top to bottom; its knob is a 9px bar 2px proud of either side, travelling the strip
+ * less 3px at either end. Both knobs glide to a value the keyboard gives them and follow a drag at
+ * once. */
 [data-qc-theme] .qc-drawing-sv {
   position: relative;
   flex: 1 1 auto;
   height: 184px;
-  background: linear-gradient(to top, var(--qcd-black), transparent), linear-gradient(to right, var(--qcd-white), var(--qcd-hue));
+  overflow: hidden;
+  background: linear-gradient(to top, var(--qcd-black), transparent), linear-gradient(to right, var(--qcd-white), transparent), var(--qcd-hue);
+  border-radius: 2px;
   cursor: crosshair;
+  touch-action: none;
+}
+
+[data-qc-theme][dir='rtl'] .qc-drawing-sv,
+[data-qc-theme] [dir='rtl'] .qc-drawing-sv {
+  background: linear-gradient(to top, var(--qcd-black), transparent), linear-gradient(to left, var(--qcd-white), transparent), var(--qcd-hue);
 }
 
 [data-qc-theme] .qc-drawing-sv-dot {
   position: absolute;
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
+  margin-top: -6px;
+  margin-inline-start: -6px;
   border: 2px solid var(--qcd-white);
   border-radius: 50%;
-  box-shadow: var(--qc-overlay-shadow);
-  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
   pointer-events: none;
 }
 
+[data-qc-theme] .qc-drawing-sv:not([data-qc-dragging='true']) .qc-drawing-sv-dot {
+  transition: inset-inline-start var(--qc-motion-durationFast) var(--qc-motion-easingStandard), top var(--qc-motion-durationFast) var(--qc-motion-easingStandard);
+}
+
 [data-qc-theme] .qc-drawing-hue {
   position: relative;
   flex: 0 0 17px;
@@ -2466,38 +2890,70 @@
   );
   border-radius: 2px;
   cursor: pointer;
+  touch-action: none;
+}
+
+[data-qc-theme] .qc-drawing-hue-travel {
+  position: absolute;
+  inset: 3px 0;
 }
 
 [data-qc-theme] .qc-drawing-hue-dot {
   position: absolute;
   inset-inline: -2px;
-  height: 6px;
+  height: 9px;
+  margin-top: -4px;
   border: 2px solid var(--qcd-white);
   border-radius: 2px;
-  box-shadow: var(--qc-overlay-shadow);
-  transform: translateY(-50%);
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
   pointer-events: none;
 }
 
-/* Black and white are the poles of the value axis the square fades between, and the two the
- * opacity knob is drawn from. They are color arithmetic, not theme roles: every mode has them. */
+[data-qc-theme] .qc-drawing-hue:not([data-qc-dragging='true']) .qc-drawing-hue-dot {
+  transition: top var(--qc-motion-durationFast) var(--qc-motion-easingStandard);
+}
+
+/* The well a color button holds its color in: 24px on a 3px corner, the color at its opacity over
+ * the checked ground the opacity track fades over, in 6px squares. */
+[data-qc-theme] .qc-drawing-well {
+  display: block;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  background: repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px, var(--qcd-ground);
+  border-radius: 3px;
+}
+
+[data-qc-theme] .qc-drawing-well-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--qcd-swatch);
+}
+
+/* Black and white are the poles of the value axis the area fades between, and the two the knobs
+ * are drawn from. They are color arithmetic, not theme roles: every mode has them. */
 [data-qc-theme] .qc-drawing-custom,
-[data-qc-theme] .qc-drawing-opacity-row {
+[data-qc-theme] .qc-drawing-opacity-row,
+[data-qc-theme] .qc-drawing-well,
+[data-qc-theme] .qc-drawing-dual {
   --qcd-angle-0: 0deg;
   --qcd-black: hsl(var(--qcd-angle-0) 0% 0%);
   --qcd-white: hsl(var(--qcd-angle-0) 0% 100%);
 }
 
-/* What "see-through" is drawn as under the fade: a slate check at two fifths, the same in every
- * mode, on the mode's own pole. It is the checker every image editor uses for nothing-here, so a
- * low opacity reads as the drawing thinning out rather than as the track running out of paint. */
-[data-qc-theme] .qc-drawing-opacity-row {
+/* What "see-through" is drawn as under a fade: a slate check at two fifths, the same in every mode,
+ * on the mode's own pole. It is the checker every image editor uses for nothing-here, so a low
+ * opacity reads as the color thinning out rather than as the track running out of paint. */
+[data-qc-theme] .qc-drawing-opacity-row,
+[data-qc-theme] .qc-drawing-well {
   --qcd-check-hue: 224deg;
   --qcd-check: hsl(var(--qcd-check-hue) 15% 19% / 0.4);
   --qcd-ground: var(--qcd-black);
 }
 
-[data-qc-theme='light'] .qc-drawing-opacity-row {
+[data-qc-theme='light'] .qc-drawing-opacity-row,
+[data-qc-theme='light'] .qc-drawing-well {
   --qcd-ground: var(--qcd-white);
 }
 
@@ -2516,239 +2972,248 @@
   --qcd-hue-300: hsl(var(--qcd-angle-300) 100% 50%);
 }
 
-/* The opacity slider fades a checked ground into the color being set. */
-[data-qc-theme] .qc-drawing-opacity-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+/* The Thickness and Line style rows, 12px in: a muted title, then a row of joined 32px segments,
+ * each a radio wearing its mark in the on fill. The one chosen takes that fill, its mark cut from
+ * it in the inverse ink; a segment under the pointer washes in the hover fill, and the keyboard's
+ * ring stands 4px around the segment it is on. A thickness mark is a line across its segment as
+ * heavy as the width it stands for; a line style's is drawn on a 30 by 24 cell, a 30px line, four
+ * 5px dashes or six 2px dots 3px apart. */
+[data-qc-theme] .qc-drawing-stroke-section {
+  padding: 0 12px;
 }
 
-[data-qc-theme] .qc-drawing-opacity {
-  flex: 1 1 auto;
-  width: auto;
-  height: 10px;
-  margin: 0;
-  /* Three layers, top down: the fade into the color, the 8px check it fades over (two 4px squares
-   * to a tile, top left and bottom right), and the ground the check stands on. */
-  background:
-    linear-gradient(to right, transparent, var(--qcd-swatch)),
-    repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) 1px 50% / 8px 8px,
-    var(--qcd-ground);
-  border: 1px solid var(--qcd-swatch);
-  border-radius: 5px;
-  outline: none;
-  appearance: none;
-  accent-color: var(--qc-state-accent);
+[data-qc-theme] .qc-drawing-stroke-section > .qc-drawing-section-title {
+  margin: 6px 0 4px;
 }
 
-/* The thumb is a disc a hand can take: it says so with the pointer cursor, and it is drawn from
- * the two poles rather than from the theme, so it reads at both ends of the fade in either mode. */
-[data-qc-theme] .qc-drawing-opacity::-webkit-slider-thumb {
-  width: 12px;
-  height: 12px;
-  background: var(--qcd-black);
-  border: 2px solid var(--qcd-white);
-  border-radius: 50%;
-  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
-  cursor: pointer;
-  appearance: none;
+[data-qc-theme] .qc-drawing-stroke-section--style {
+  margin-top: 12px;
 }
 
-[data-qc-theme] .qc-drawing-opacity::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: var(--qcd-black);
-  border: 2px solid var(--qcd-white);
-  border-radius: 50%;
-  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
-  cursor: pointer;
+[data-qc-theme] .qc-drawing-stroke-section--style > .qc-drawing-section-title {
+  margin-top: 0;
 }
 
-/* The readout is a FIELD beside the track: edged rather than washed, because it is a number a viewer
- * types over and not a chip the panel is showing them. */
-[data-qc-theme] .qc-drawing-opacity-field {
-  position: relative;
-  flex: 0 0 auto;
+[data-qc-theme] .qc-drawing-segments {
+  display: flex;
 }
 
-[data-qc-theme] .qc-drawing-opacity-readout {
-  width: 47px;
-  height: 26px;
-  padding: 0 14px 0 5px;
-  color: var(--qc-text-primary);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
+[data-qc-theme] .qc-drawing-segment {
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 32px;
+  margin: 0;
+  padding: 0 12px;
+  color: var(--qc-control-on);
   background: none;
   border: 1px solid var(--qc-control-fieldEdge);
-  border-radius: 6px;
+  border-radius: 0;
   outline: none;
-  transition: border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), box-shadow var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
+  cursor: pointer;
 }
 
-/* The unit sits in the room the field keeps at its end, so a typed number never runs under it. */
-[data-qc-theme] .qc-drawing-opacity-unit {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 5px;
-  display: flex;
-  align-items: center;
-  color: var(--qc-text-primary);
-  pointer-events: none;
+[data-qc-theme] .qc-drawing-segment--wide {
+  padding: 0 22px;
 }
 
-/* The swatch button: a well holding the color, and for a stroke, the stroke at its thickness. */
-[data-qc-theme] .qc-drawing-swatch-button {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 8px;
-  cursor: pointer;
+[data-qc-theme] .qc-drawing-segment + .qc-drawing-segment {
+  margin-inline-start: -1px;
 }
 
-[data-qc-theme] .qc-drawing-well {
-  display: block;
-  width: 24px;
-  height: 24px;
-  overflow: hidden;
-  background: repeating-conic-gradient(var(--qc-chrome-border) 0% 25%, var(--qc-chrome-surfaceRaised) 0% 50%) 0 0 / 8px 8px;
-  border-radius: 3px;
+[data-qc-theme] .qc-drawing-segment:first-child {
+  border-start-start-radius: 3px;
+  border-end-start-radius: 3px;
 }
 
-[data-qc-theme] .qc-drawing-well-fill {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--qcd-swatch);
+[data-qc-theme] .qc-drawing-segment:last-child {
+  border-start-end-radius: 3px;
+  border-end-end-radius: 3px;
 }
 
-[data-qc-theme] .qc-drawing-swatch-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-bottom: 8px;
+[data-qc-theme] .qc-drawing-segment:hover {
+  background: var(--qc-state-hover);
 }
 
-[data-qc-theme] .qc-drawing-swatch-panel > .qc-muted {
-  padding: 0 12px;
+[data-qc-theme] .qc-drawing-segment[aria-checked='true'] {
+  z-index: 1;
+  color: var(--qc-control-onInk);
+  background: var(--qc-control-on);
+  border-color: var(--qc-control-on);
 }
 
-[data-qc-theme] .qc-drawing-option-row {
-  display: flex;
-  gap: 4px;
-  padding: 0 12px;
+[data-qc-theme] .qc-drawing-segment:focus-visible::after {
+  position: absolute;
+  inset: -4px;
+  z-index: 1;
+  border: 2px solid var(--qc-state-focusRing);
+  border-radius: 4px;
+  content: '';
+  pointer-events: none;
 }
 
-[data-qc-theme] .qc-drawing-option {
-  display: flex;
+[data-qc-theme] .qc-drawing-thickness-mark {
+  display: block;
   flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  padding: 0;
+  background: currentColor;
 }
 
-/* The stroke preview: segments at the thickness, in currentColor or the drawing's own color. */
-[data-qc-theme] .qc-drawing-stroke {
+[data-qc-theme] .qc-drawing-style-mark {
   display: flex;
-  flex: 0 0 auto;
+  flex: 0 0 30px;
   gap: 3px;
   align-items: center;
+  justify-content: center;
   width: 30px;
+  height: 24px;
+  overflow: hidden;
 }
 
-[data-qc-theme] .qc-drawing-stroke[data-dotted='tight'] {
-  gap: 2px;
+[data-qc-theme] .qc-drawing-style-seg {
+  flex: 0 0 auto;
+  width: 5px;
+  height: 1px;
+  background: currentColor;
 }
 
-[data-qc-theme] .qc-drawing-stroke-seg {
-  flex: 0 0 auto;
-  background: var(--qcd-swatch, currentColor);
+[data-qc-theme] .qc-drawing-style-mark[data-style='solid'] > .qc-drawing-style-seg {
+  width: 30px;
 }
 
-/* A line-end picker is a list button: the end's glyph, then the chevron's slot, 2px in from the edge. */
-[data-qc-theme] .qc-drawing-line-end {
-  display: flex;
-  align-items: center;
-  padding: 0 2px;
-  cursor: pointer;
+[data-qc-theme] .qc-drawing-style-mark[data-style='dotted'] > .qc-drawing-style-seg {
+  width: 2px;
+  height: 2px;
 }
 
-/* A line end's glyph is drawn for the left end; the right end's picker wears it mirrored. */
-[data-qc-theme] .qc-drawing-line-end[data-qc-end='right'] > svg,
-[data-qc-theme] .qc-drawing-menu[data-qc-end='right'] .qc-menu-row > svg {
-  transform: scaleX(-1);
+/* The line-end list is as wide as its rows. A row it does not hold dims its ink under the pointer. */
+[data-qc-theme] .qc-drawing-menu.qc-drawing-line-ends {
+  width: max-content;
+  min-width: 0;
 }
 
-/* The dialog's page strip: equal tabs, each with its own rail segment, the active one bright. */
-[data-qc-theme] .qc-drawing-tabs {
-  display: flex;
-  align-items: stretch;
-  padding-bottom: 8px;
+/* The keyboard rings a list's row inside the row's own edge, where the list's rounded corners cannot
+ * cut it. A row of a list of choices or of switches rings its edge on a 6px corner, with 2px of the
+ * list's ground inside the ring, so the ring stands clear of a chosen row's fill; a row of a list of
+ * marks (a line end, a thickness, a line style) rings 2px inside its edge on a 9px corner. */
+[data-qc-theme] .qc-drawing-list .qc-drawing-list-row {
+  position: relative;
+  outline: none;
 }
 
-[data-qc-theme] .qc-drawing-tab {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 6px;
-  padding: 2px 0 0;
-  color: var(--qc-text-muted);
-  font: inherit;
-  font-weight: 500;
-  background: none;
-  border: 0;
-  cursor: pointer;
+[data-qc-theme] .qc-drawing-select-list:not(.qc-drawing-mark-list) .qc-drawing-list-row:focus-visible::before,
+[data-qc-theme] .qc-drawing-select-list:not(.qc-drawing-mark-list) .qc-drawing-list-row:focus-visible::after {
+  position: absolute;
+  z-index: 1;
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 2px;
+  content: '';
+  pointer-events: none;
 }
 
-[data-qc-theme] .qc-drawing-tab:hover {
-  color: var(--qc-text-secondary);
+[data-qc-theme] .qc-drawing-select-list:not(.qc-drawing-mark-list) .qc-drawing-list-row:focus-visible::after {
+  inset: 0;
+  border-color: var(--qc-state-focusRing);
+  border-radius: 6px;
 }
 
-[data-qc-theme] .qc-drawing-tab[aria-selected='true'] {
-  color: var(--qc-text-primary);
+[data-qc-theme] .qc-drawing-select-list:not(.qc-drawing-mark-list) .qc-drawing-list-row:focus-visible::before {
+  inset: 2px;
+  border-color: var(--qc-overlay-surface);
+  border-radius: 4px;
 }
 
-[data-qc-theme] .qc-drawing-tab-rail {
-  height: 2px;
-  background: var(--qc-chrome-border);
+[data-qc-theme] .qc-drawing-line-ends .qc-drawing-list-row[aria-selected='true'] {
+  color: var(--qc-control-onInk);
 }
 
-[data-qc-theme] .qc-drawing-tab:first-child .qc-drawing-tab-rail {
-  border-start-start-radius: 2px;
-  border-end-start-radius: 2px;
+[data-qc-theme] .qc-drawing-line-ends .qc-drawing-list-row:not([aria-selected='true']):hover {
+  color: var(--qc-state-hoverInk);
 }
 
-[data-qc-theme] .qc-drawing-tab:last-child .qc-drawing-tab-rail {
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
+[data-qc-theme] .qc-drawing-line-ends .qc-drawing-list-row:focus-visible::after,
+[data-qc-theme] .qc-drawing-mark-list .qc-drawing-list-row:focus-visible::after {
+  position: absolute;
+  inset: 2px;
+  z-index: 1;
+  border: 2px solid var(--qc-state-focusRing);
+  border-radius: 9px;
+  content: '';
+  pointer-events: none;
 }
 
-[data-qc-theme] .qc-drawing-tab[aria-selected='true'] .qc-drawing-tab-rail {
-  background: var(--qc-text-primary);
+/* The swatch button: a well holding the color, and for a stroke, the stroke at its thickness. */
+[data-qc-theme] .qc-drawing-swatch-button {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 8px;
+  cursor: pointer;
 }
 
-/* One visibility bucket: the checkbox beside the word, then from, the two-thumb range, and to. */
-[data-qc-theme] .qc-drawing-visibility-row {
-  display: grid;
-  grid-template-columns: 96px 1fr;
-  gap: 12px;
+/* On a settings page the swatch button is the 34px field with a 6px corner around its 24px well, 4px
+ * in; with a stroke the preview stands 8px after the well and 3px clear of the end, 75px in all. */
+[data-qc-theme] .qc-drawing-page .qc-drawing-swatch-button {
+  flex: 0 0 auto;
+  gap: 8px;
+  min-width: 34px;
+  padding: 0 4px;
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-drawing-page .qc-drawing-swatch-button > .qc-drawing-stroke {
+  margin-inline-end: 3px;
+}
+
+/* The stroke preview: segments at the thickness, in currentColor or the drawing's own color. */
+[data-qc-theme] .qc-drawing-stroke {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 3px;
   align-items: center;
-  min-height: 50px;
+  width: 30px;
+}
+
+[data-qc-theme] .qc-drawing-stroke[data-dotted='tight'] {
+  gap: 2px;
+}
+
+[data-qc-theme] .qc-drawing-stroke-seg {
+  flex: 0 0 auto;
+  background: var(--qcd-swatch, currentColor);
 }
 
-[data-qc-theme] .qc-drawing-visibility-controls {
+/* A line-end picker is a 34px field whose face is the end's own 28px mark. */
+[data-qc-theme] .qc-drawing-line-end {
   display: flex;
-  gap: 8px;
+  flex: 0 0 34px;
   align-items: center;
+  justify-content: center;
+  width: 34px;
+  padding: 0;
+  cursor: pointer;
 }
 
+/* A line end's glyph is drawn for the left end; the right end's picker wears it mirrored. */
+[data-qc-theme] .qc-drawing-line-end[data-qc-end='right'] > svg,
+[data-qc-theme] .qc-drawing-menu[data-qc-end='right'] .qc-menu-row > svg {
+  transform: scaleX(-1);
+}
+
+/* One visibility bucket: the checkbox and the name as the label, then from, the two-thumb range and
+ * to. The range is a 10px track 100px wide, 9px after from and 8px before to, its span between the
+ * two thumbs filled. */
 [data-qc-theme] .qc-drawing-dual {
   position: relative;
-  flex: 1 1 auto;
-  min-width: 96px;
-  height: 16px;
+  flex: 0 0 100px;
+  width: 100px;
+  height: 12px;
+  margin-inline-start: 1px;
 }
 
 [data-qc-theme] .qc-drawing-dual-track {
@@ -2756,18 +3221,22 @@
   inset-inline: 0;
   top: 50%;
   height: 10px;
-  background: var(--qc-chrome-border);
+  background: var(--qc-state-pressed);
   border-radius: 5px;
   transform: translateY(-50%);
 }
 
+/* The span the thumbs travel: the track less half a thumb at either end. */
+[data-qc-theme] .qc-drawing-dual-span {
+  position: absolute;
+  inset: 0 6px;
+}
+
 [data-qc-theme] .qc-drawing-dual-fill {
   position: absolute;
-  top: 50%;
-  height: 10px;
-  background: var(--qc-text-secondary);
-  border-radius: 5px;
-  transform: translateY(-50%);
+  top: 0;
+  bottom: 0;
+  background: var(--qc-text-primary);
 }
 
 [data-qc-theme] .qc-drawing-dual-input {
@@ -2781,22 +3250,29 @@
   pointer-events: none;
 }
 
+/* The two-thumb range's thumbs are the opacity knob: a dark disc with a 2px light rim, drawn from
+ * the two poles so they read at both ends of the track in either mode. */
 [data-qc-theme] .qc-drawing-dual-input::-webkit-slider-thumb {
   width: 12px;
   height: 12px;
-  background: var(--qc-text-primary);
-  border: 2px solid var(--qc-chrome-surface);
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
   border-radius: 50%;
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
+  cursor: pointer;
   appearance: none;
   pointer-events: auto;
 }
 
 [data-qc-theme] .qc-drawing-dual-input::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  background: var(--qc-text-primary);
-  border: 2px solid var(--qc-chrome-surface);
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
   border-radius: 50%;
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
+  cursor: pointer;
   pointer-events: auto;
 }
 
@@ -2812,45 +3288,27 @@
   align-items: center;
 }
 
-[data-qc-theme] .qc-drawing-weight {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-}
-
-/* A row of cells wider than the dialog slides sideways under the pointer already on it; a bar
- * beneath it would be chrome the table does not own. */
-[data-qc-theme] .qc-drawing-table {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-[data-qc-theme] .qc-drawing-table::-webkit-scrollbar {
-  display: none;
-}
-
-[data-qc-theme] .qc-drawing-table-row {
-  display: flex;
-  gap: 4px;
-}
-
-[data-qc-theme] .qc-drawing-table-actions {
+/* The weight and slant toggles: a 34px field with a 6px corner around the 28px mark, filled while
+ * held, the mark cut from the fill in the inverse ink. */
+[data-qc-theme] .qc-drawing-font-toggle {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding-top: 4px;
+  flex: 0 0 34px;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
-[data-qc-theme] .qc-drawing-table-actions .qc-button {
-  padding: 4px 8px;
-  font-size: var(--qc-text-fontSizeSmall);
+[data-qc-theme] .qc-drawing-font-toggle[aria-pressed='true'] {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-onPressed);
+  border-color: var(--qc-control-onPressed);
 }
 
-/* Forced colors: a swatch IS its color, so it keeps it, with a system border to stand on. The mixer's
- * compact fields ring their focus in the system highlight, as every field does. */
+/* Forced colors: a swatch IS its color, so it keeps it, with a system border to stand on. The color
+ * popover's compact fields edge their focus in the system highlight. */
 @media (forced-colors: active) {
   [data-qc-theme] .qc-drawing-swatch,
   [data-qc-theme] .qc-drawing-color-strip {
@@ -2858,11 +3316,10 @@
     border: 1px solid ButtonText;
   }
 
-  [data-qc-theme] .qc-drawing-hex-wrap:focus-within,
+  [data-qc-theme] .qc-drawing-hex:focus,
   [data-qc-theme] .qc-drawing-opacity-readout:focus {
     forced-color-adjust: none;
     border-color: Highlight;
-    box-shadow: inset 0 0 0 1px Highlight;
   }
 }
 
@@ -3061,42 +3518,82 @@
   max-height: calc(100% - 16px);
 }
 
-[data-qc-theme] .qc-drawing-dialog-header {
+/* The header: the name at 20 on 28 in a 68px band 20px in, then what the dialog adds after it (the
+ * settings dialog's pencil), and the close 34px at the far end, 3px past the padding so its mark
+ * lines up with the page's edge. The header is the handle the dialog is carried by. */
+[data-qc-theme] .qc-drawing-dialog .qc-drawing-dialog-header {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 12px 14px 8px;
-  cursor: move;
+  justify-content: flex-start;
+  gap: 0;
+  height: 68px;
+  padding: 0 20px;
+  cursor: grab;
   user-select: none;
 }
 
 [data-qc-theme] .qc-drawing-dialog-title {
+  min-width: 0;
   overflow: hidden;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+[data-qc-theme] .qc-drawing-dialog .qc-dialog-close {
+  flex: 0 0 34px;
+  margin-inline-start: auto;
+  margin-inline-end: -3px;
+  border-radius: 8px;
+}
+
+/* The body 20px in from the sides; a drop box stands 8px under the header. */
 [data-qc-theme] .qc-drawing-dialog-body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: 4px;
   min-height: 0;
-  padding: 0 14px 8px;
+  padding: 0 20px;
   overflow-y: auto;
 }
 
-[data-qc-theme] .qc-drawing-dialog-footer {
+[data-qc-theme] .qc-drawing-dialog-body > .qc-drawing-drop {
+  margin-top: 8px;
+}
+
+/* The image picker's transparency: its name at the start and its 180px track at the end of a 46px
+ * line, each 10px down the line's 26px middle, 24px above the footer. */
+[data-qc-theme] .qc-drawing-picker-opacity {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  border-top: 1px solid var(--qc-overlay-separator);
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding: 10px 0;
+}
+
+[data-qc-theme] .qc-drawing-picker-opacity > * {
+  margin-top: 10px;
 }
 
-[data-qc-theme] .qc-drawing-dialog-footer .qc-button {
-  padding: 5px 12px;
+[data-qc-theme] .qc-drawing-picker-opacity > .qc-drawing-band-opacity {
+  flex: 0 0 180px;
+  width: 180px;
+  margin-top: 10px;
+}
+
+/* A drawing dialog's footer: what it leads with at the start (the settings dialog's Template list
+ * button), then Cancel and the primary action 12px apart at the end, all 34px with an 8px corner,
+ * over a 1px rule. Cancel is outlined in the outline role and takes the emphasis fill under the
+ * pointer; the primary action wears the fill. */
+[data-qc-theme] .qc-drawing-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid var(--qc-overlay-separator);
 }
 
 [data-qc-theme] .qc-drawing-footer-gap {
@@ -3112,31 +3609,225 @@
   margin: 6px 0 4px;
 }
 
+/* The settings dialog: a card at least 380px wide that grows to the widest page it shows, its
+ * header, the page strip, the page and the footer stacked. */
 [data-qc-theme] .qc-drawing-settings-dialog {
-  width: min(380px, calc(100% - 16px));
-  max-height: min(560px, calc(100% - 16px));
+  width: max-content;
+  min-width: min(380px, calc(100% - 16px));
+  max-width: calc(100% - 16px);
 }
 
-[data-qc-theme] .qc-drawing-page {
+/* The settings dialog's pencil stands 5px after the name in a 34px cell. */
+[data-qc-theme] .qc-drawing-rename {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding-top: 2px;
+  flex: 0 0 34px;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin-inline-start: 5px;
+  padding: 0;
+  color: var(--qc-text-primary);
+  background: none;
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-drawing-rename:hover {
+  background: var(--qc-state-hover);
+}
+
+/* Renaming, the header is the name's field alone, as wide as the header and in the name's own type. */
+[data-qc-theme] .qc-drawing-dialog-header[data-qc-renaming='true'] > :not(.qc-drawing-rename-field) {
+  display: none;
+}
+
+[data-qc-theme] .qc-drawing-rename-field {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+/* The page strip: the tabs at 16 on 24, 12px apart, over a 4px track as wide as the page; the bar
+ * standing on the track under the shown page glides to the next one. A tab under the pointer that
+ * is not shown dims to the muted ink. */
+[data-qc-theme] .qc-drawing-tabs-slot {
+  position: relative;
+  flex: 0 0 auto;
+  padding: 0 20px;
+}
+
+[data-qc-theme] .qc-drawing-tabs-track {
+  position: absolute;
+  inset-inline: 20px;
+  bottom: 0;
+  height: 4px;
+  background: var(--qc-overlay-separator);
+  border-radius: 2px;
+}
+
+[data-qc-theme] .qc-drawing-tabs {
+  position: relative;
+  display: inline-flex;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+[data-qc-theme] .qc-drawing-tab {
+  position: relative;
+  margin: 0 12px;
+  padding: 0 0 8px;
+  color: var(--qc-text-primary);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-drawing-tab:first-of-type {
+  margin-inline-start: 0;
+}
+
+[data-qc-theme] .qc-drawing-tab:last-of-type {
+  margin-inline-end: 0;
+}
+
+[data-qc-theme] .qc-drawing-tab:not([aria-selected='true']):hover {
+  color: var(--qc-text-muted);
+}
+
+/* The keyboard's ring stands 10px out to either side of the label and over the bar's height. */
+[data-qc-theme] .qc-drawing-tab:focus-visible::after {
+  position: absolute;
+  inset: -2px -10px 0;
+  border: 2px solid var(--qc-state-focusRing);
+  border-radius: 8px;
+  content: '';
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-drawing-tab-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: var(--qc-control-on);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-drawing-tabs[data-qc-placed='true'] > .qc-drawing-tab-bar {
+  transition: transform var(--qc-motion-durationGlide) var(--qc-motion-easingInOut), width var(--qc-motion-durationGlide) var(--qc-motion-easingInOut);
+}
+
+/* The body scrolls the page alone, and keeps room for a short one. */
+[data-qc-theme] .qc-drawing-settings-dialog .qc-drawing-dialog-body {
+  display: block;
+  min-height: 145px;
+  padding: 0;
+}
+
+/* The page: a two-column grid inside 16px by 20px, the labels' column as wide as the widest label
+ * and its 20px gap, the controls' column the rest. Everything on the page that is not a labelled
+ * row stands across both columns. */
+[data-qc-theme] .qc-drawing-page {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  padding: 16px 20px;
+}
+
+[data-qc-theme] .qc-drawing-page > :not(.qc-drawing-row) {
+  grid-column: 1 / -1;
+}
+
+[data-qc-theme] .qc-drawing-page > .qc-button {
+  justify-self: start;
 }
 
 [data-qc-theme] .qc-drawing-template-button {
-  display: flex;
+  display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  gap: 4px;
+  width: 100px;
+  padding: 0 2px 0 8px;
+  cursor: pointer;
 }
 
-[data-qc-theme] .qc-drawing-caret {
-  display: flex;
-  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
+/* While its menu is open the Template button keeps the focus ring, and its chevron points up. */
+[data-qc-theme] .qc-drawing-template-button[aria-expanded='true'] {
+  border-color: var(--qc-state-focusRing);
+  box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
 }
 
-[data-qc-theme] .qc-drawing-template-button[aria-expanded='true'] .qc-drawing-caret {
-  transform: rotate(180deg);
+[data-qc-theme] .qc-drawing-footer-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 11px;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 8px;
+}
+
+[data-qc-theme] .qc-drawing-footer-button + .qc-drawing-footer-button {
+  margin-inline-start: 12px;
+}
+
+[data-qc-theme] .qc-drawing-cancel {
+  color: var(--qc-control-outline);
+  border-color: var(--qc-control-outline);
+}
+
+[data-qc-theme] .qc-drawing-cancel:hover:not([disabled]) {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-on);
+  border-color: var(--qc-control-on);
+}
+
+[data-qc-theme] .qc-drawing-cancel:active:not([disabled]) {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-onPressed);
+  border-color: var(--qc-control-onPressed);
+}
+
+/* The lists the dialog opens stand on a 10px corner; the Template menu is as wide as its words. */
+[data-qc-theme] .qc-drawing-popover--list {
+  border-radius: 10px;
+}
+
+[data-qc-theme] .qc-drawing-menu.qc-drawing-template-menu {
+  width: max-content;
+  min-width: 0;
+}
+
+/* A saved template's row: its name, then the 26px slot at the end where its remove control
+ * stands. The whole row lifts under the pointer. */
+[data-qc-theme] .qc-drawing-template-menu .qc-drawing-flyout-row {
+  height: 32px;
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-drawing-template-menu .qc-drawing-flyout-row > .qc-drawing-list-row {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+}
+
+[data-qc-theme] .qc-drawing-template-menu .qc-drawing-star {
+  position: static;
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  margin-inline-end: 4px;
 }
 
 [data-qc-theme] .qc-drawing-note {
@@ -3144,15 +3835,216 @@
   font-size: var(--qc-text-fontSizeSmall);
 }
 
-/* The plane's live region: read by assistive technology, never seen. Clipped rather than hidden,
- * because a hidden node is not announced. */
-[data-qc-theme] .qc-drawing-status {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+/* The plane's live region: read by assistive technology, never seen. Clipped rather than hidden,
+ * because a hidden node is not announced. */
+[data-qc-theme] .qc-drawing-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* A leveled tool's level grid: two levels to a 34px line, 8px between lines and 8px above the
+ * first, each level its 18px switch, its 100px value and its 34px well 8px apart, the second level
+ * 48px after the first's well, the line 412px across whatever its levels hold. A level switched off
+ * keeps its well, and its stroke where it shows one, on the read-only fill, dimmed. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-level-row {
+  min-width: 412px;
+  min-height: 34px;
+  margin-bottom: 8px;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-drawing-page > :not(.qc-drawing-level-row) + .qc-drawing-level-row {
+  margin-top: 8px;
+}
+
+[data-qc-theme] .qc-drawing-level-row > :nth-child(4) {
+  margin-inline-start: 40px;
+}
+
+/* A gann grid: two lines to a 34px line, 8px between lines and 8px above the first, each line its
+ * switch with its place or its ratio, 78px across so every well stands in line, then its well 8px
+ * after; the second line 48px after the first's well, the line 412px across. A fan's rays stand one
+ * to a 50px line. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-ratio-row {
+  min-width: 412px;
+  min-height: 34px;
+  margin-bottom: 8px;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-drawing-page > :not(.qc-drawing-ratio-row) + .qc-drawing-ratio-row {
+  margin-top: 8px;
+}
+
+[data-qc-theme] .qc-drawing-ratio-row > :nth-child(3) {
+  margin-inline-start: 40px;
+}
+
+[data-qc-theme] .qc-drawing-ratio-switch {
+  flex: 0 0 78px;
+  min-width: 0;
+  min-height: 34px;
+}
+
+/* An image's page: its caption across the page over the box that chooses the picture, 8px above it. */
+[data-qc-theme] .qc-drawing-page > .qc-drawing-row--caption > .qc-drawing-row-label {
+  grid-column: 1 / -1;
+  min-height: 0;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-drawing-page > .qc-drawing-row--caption > .qc-drawing-row-controls {
+  display: none;
+}
+
+[data-qc-theme] .qc-drawing-page > .qc-drawing-drop {
+  margin-top: 8px;
+}
+
+/* A signpost's emoji: a field-sized button wearing the glyph's artwork, or the glyph itself where
+ * the artwork has not come. */
+[data-qc-theme] .qc-drawing-emoji-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 34px;
+  padding: 0;
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-drawing-emoji-button .qc-drawing-glyph-art {
+  width: 24px;
+  height: 24px;
+}
+
+/* An emoji well beside a switch that is off stands dimmed on the field's fill, as a color well does. */
+[data-qc-theme] .qc-drawing-emoji-button[data-qc-dim='true'] {
+  background: var(--qc-control-fieldFill);
+}
+
+[data-qc-theme] .qc-drawing-emoji-button[data-qc-dim='true'] > * {
+  opacity: 0.5;
+}
+
+[data-qc-theme] .qc-drawing-emoji-face {
+  font-size: 20px;
+  line-height: 1;
+}
+
+[data-qc-theme] .qc-drawing-swatch-button[data-qc-dim='true'] {
+  background: var(--qc-control-fieldFill);
+}
+
+[data-qc-theme] .qc-drawing-swatch-button[data-qc-dim='true'] > .qc-drawing-well,
+[data-qc-theme] .qc-drawing-swatch-button[data-qc-dim='true'] > .qc-drawing-stroke {
+  opacity: 0.5;
+}
+
+/* The one color while the levels differ: the well split corner to corner between the color it
+ * offers and a second hue, so it reads as several colors rather than one. */
+[data-qc-theme] .qc-drawing-swatch-button[data-qc-mixed='true'] .qc-drawing-well-fill {
+  background: linear-gradient(to top right, var(--qcd-swatch) 50%, var(--qcd-paired) 50%);
+}
+
+/* A list button whose face is a mark: 76px around a 50px bar of the chosen thickness, or 34px
+ * around the chosen style's 28px mark. A thickness list stands 12px wider than its button, each
+ * choice its bar alone; a style list is as wide as its words. */
+[data-qc-theme] .qc-drawing-select--mark {
+  justify-content: center;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-drawing-select--mark[data-mark='thickness'] {
+  width: 76px;
+}
+
+[data-qc-theme] .qc-drawing-select--mark[data-mark='style'] {
+  width: 34px;
+}
+
+[data-qc-theme] .qc-drawing-thickness-bar {
+  display: block;
+  flex: 0 0 auto;
+  width: 50px;
+  background: currentColor;
+}
+
+[data-qc-theme] .qc-drawing-mark-list[data-mark='thickness'] {
+  width: 88px;
+}
+
+[data-qc-theme] .qc-drawing-mark-list[data-mark='style'] {
+  width: max-content;
+}
+
+[data-qc-theme] .qc-drawing-list-row--bar {
+  justify-content: center;
+}
+
+/* The chosen thickness or style is cut from the emphasis fill in the ink of a mark. */
+[data-qc-theme] .qc-drawing-mark-list .qc-drawing-list-row[aria-selected='true'] {
+  color: var(--qc-control-onInk);
+}
+
+/* The bands' opacity: a 148px track 10px tall on a 5px corner that fades from nothing into the
+ * drawings' line color over the checked ground the color popover's track stands on, inside a 1px
+ * edge of that color; its 12px knob is the popover's, a dark disc with a light rim, a pixel proud
+ * of the track above and below. */
+[data-qc-theme] .qc-drawing-band-opacity {
+  --qcd-angle-0: 0deg;
+  --qcd-black: hsl(var(--qcd-angle-0) 0% 0%);
+  --qcd-white: hsl(var(--qcd-angle-0) 0% 100%);
+  --qcd-check-hue: 224deg;
+  --qcd-check: hsl(var(--qcd-check-hue) 15% 19% / 0.4);
+  --qcd-ground: var(--qcd-black);
+  flex: 0 0 148px;
+  width: 148px;
+  height: 10px;
+  margin: 0;
+  background:
+    linear-gradient(to right, transparent, var(--qc-drawing-line)),
+    repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) 1px 50% / 8px 8px,
+    var(--qcd-ground);
+  border: 1px solid var(--qc-drawing-line);
+  border-radius: 5px;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+}
+
+[data-qc-theme='light'] .qc-drawing-band-opacity {
+  --qcd-ground: var(--qcd-white);
+}
+
+[data-qc-theme] .qc-drawing-band-opacity:focus-visible {
+  box-shadow: 0 0 0 2px var(--qc-state-focusRing);
+}
+
+[data-qc-theme] .qc-drawing-band-opacity::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
+  cursor: pointer;
+  appearance: none;
+}
+
+[data-qc-theme] .qc-drawing-band-opacity::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px hsl(var(--qcd-angle-0) 0% 0% / 0.5);
+  cursor: pointer;
 }
 
 /* The drawing toolbar: the column down the chart's inline-start edge, its split cells, its flyouts
@@ -4491,8 +5383,9 @@
 
 /* A chosen row inverts, the emphasis fill behind the inverse ink, and carries nothing else: no
  * accent tint, no decorative dot. The row's own `aria-checked` is what a reader is told. A row that
- * IS a switch is not a choice among rows: its track says it is on, and the row stays as it is. */
-[data-qc-theme] .qc-menu-row[aria-checked='true']:not([role='switch']) {
+ * IS a switch or a checkbox is not a choice among rows: its track or its box says it is on, and the
+ * row stays as it is. */
+[data-qc-theme] .qc-menu-row[aria-checked='true']:not([role='switch']):not([role='menuitemcheckbox']) {
   color: var(--qc-text-inverse);
   background: var(--qc-control-on);
 }
@@ -4586,6 +5479,12 @@
   pointer-events: auto;
 }
 
+/* A dialog that edits what it stands over leaves it undimmed: the backdrop still takes the press
+ * that closes the dialog, and paints nothing. */
+[data-qc-theme] .qc-dialog-scrim[data-qc-veil='none'] {
+  background: transparent;
+}
+
 [data-qc-theme] .qc-dialog {
   display: flex;
   flex-direction: column;
@@ -4928,6 +5827,12 @@
   color: var(--qc-text-inverse);
 }
 
+/* The current starting point wears its mark and its words in the ink cut from the emphasis fill. */
+[data-qc-theme] .qc-replay-start-menu .qc-menu-row[aria-checked='true'],
+[data-qc-theme] .qc-replay-start-menu .qc-menu-row[aria-checked='true']:hover {
+  color: var(--qc-control-onInk);
+}
+
 [data-qc-theme] .qc-replay-menu .qc-menu-row--marked {
   height: 34px;
   padding-inline-start: 8px;
@@ -5043,73 +5948,404 @@
 }
 
 /* The date picker. */
+
+/* The card stands 302px wide over the undimmed chart: a 68px header, the fields, the calendar and the
+ * chip, and a 67px footer. The header carries the title at 20 on 28, which is the handle the card is
+ * carried by, and the close in a 34px cell whose mark stands 3px past the header's padding. */
+[data-qc-theme] .qc-date-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  height: 68px;
+  padding: 0 20px;
+}
+
+[data-qc-theme] .qc-date-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 17px 0;
+  cursor: grab;
+  user-select: none;
+}
+
+[data-qc-theme] .qc-date-title-text {
+  display: block;
+  overflow: hidden;
+  color: var(--qc-text-primary);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-qc-theme] .qc-date-dialog .qc-dialog-close {
+  flex: 0 0 34px;
+  margin-inline-end: -3px;
+  border-radius: 8px;
+}
+
+/* The body is a dialog body that sits 17px under the header, edge to edge, and scrolls only in a
+ * viewport shorter than the card. */
+[data-qc-theme] .qc-date-content {
+  gap: 0;
+  padding: 17px 0 0;
+}
+
+/* The fields stand side by side, 150px and 100px with 12px between, 16px over the calendar. Each is
+ * the chart's 34px field box with a 28px mark 3px in from its end, in the caret's ink and the field's
+ * own ink under the pointer: the date's page of days, and the clock that opens the time list. */
 [data-qc-theme] .qc-date-fields {
+  display: grid;
+  grid-template-columns: 150px 100px;
+  grid-template-rows: 34px;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 0 20px;
+}
+
+[data-qc-theme] .qc-date-box {
+  position: relative;
   display: flex;
-  gap: 8px;
 }
 
-/* The date and the time are the chart's 34px field boxes, the date taking the room the time leaves. */
-[data-qc-theme] .qc-date-field {
+[data-qc-theme] .qc-date-box > .qc-field {
   flex: 1 1 auto;
+  width: 100%;
   min-width: 0;
+  padding-inline-end: 33px;
   font-variant-numeric: tabular-nums;
 }
 
-[data-qc-theme] .qc-date-time {
-  flex: 0 0 74px;
-  font-variant-numeric: tabular-nums;
+[data-qc-theme] .qc-date-box-mark {
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-end: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--qc-chrome-caret);
+  background: none;
+  border: 0;
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-date-box:hover > .qc-date-box-mark {
+  color: var(--qc-text-primary);
+}
+
+[data-qc-theme] .qc-date-clock {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+/* The calendar: 286px on 8px margins, its 262px of content inside 12px, a 34px row of the arrows
+ * around the heading, a 22px band 12px either side, and a 226px view, the whole at least 332px tall.
+ * It reads left to right in every language, as a calendar's columns do. */
+[data-qc-theme] .qc-date-calendar {
+  display: flex;
+  flex-direction: column;
+  min-height: 332px;
+  margin: 0 8px;
+  padding: 1px 12px 15px;
+  direction: ltr;
+  user-select: none;
 }
 
 [data-qc-theme] .qc-date-nav {
   display: flex;
+  flex: 0 0 34px;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 0 2px;
+  padding: 0 3px;
 }
 
-[data-qc-theme] .qc-date-nav .qc-button {
-  display: inline-flex;
+/* Every press in the calendar is a 34px cell on an 8px corner with its words at 16 on 24. Under the
+ * pointer it takes the hover fill and its words and mark brighten to the quiet ink; a day or a cell
+ * that cannot be chosen keeps the disabled ink and takes no fill. */
+[data-qc-theme] .qc-date-step,
+[data-qc-theme] .qc-date-heading,
+[data-qc-theme] .qc-date-day,
+[data-qc-theme] .qc-date-cell {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
+  height: 34px;
+  font-size: 16px;
+  line-height: 24px;
+  white-space: nowrap;
   border-color: transparent;
+  border-radius: 8px;
+}
+
+[data-qc-theme] .qc-date-step {
+  flex: 0 0 34px;
+  width: 34px;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-date-heading {
+  padding: 0 11px;
 }
 
-[data-qc-theme] .qc-date-grid {
+[data-qc-theme] .qc-date-dialog .qc-dialog-close:hover,
+[data-qc-theme] .qc-date-step:hover:not([disabled]),
+[data-qc-theme] .qc-date-heading:hover,
+[data-qc-theme] .qc-date-day:hover:not([disabled]):not([aria-selected='true']),
+[data-qc-theme] .qc-date-cell:hover:not([disabled]):not([aria-selected='true']) {
+  color: var(--qc-control-neutralInk);
+}
+
+/* The band over the grid, on the quiet fill: the weekdays spread across it in the muted ink, or the
+ * word for the months or the years. */
+[data-qc-theme] .qc-date-band {
+  display: flex;
+  flex: 0 0 22px;
+  align-items: center;
+  justify-content: space-around;
+  margin: 12px 0;
+  padding: 2px 0;
+  color: var(--qc-text-muted);
+  font-size: 14px;
+  line-height: 18px;
+  background: var(--qc-control-neutral);
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-date-view {
+  flex: 0 0 226px;
+}
+
+/* The days: weeks of seven 34px cells 4px apart, the first week against the end and the last against
+ * the start, so each column is one weekday and no day of another month stands in a gap. The chosen day
+ * is on the emphasis fill in the ink cut from it, and today wears a 2px bar under its number in the
+ * number's own ink. */
+[data-qc-theme] .qc-date-weeks {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
-[data-qc-theme] .qc-date-row {
+[data-qc-theme] .qc-date-week {
+  display: flex;
+  justify-content: space-between;
+}
+
+[data-qc-theme] .qc-date-week:first-child {
+  justify-content: flex-end;
+}
+
+[data-qc-theme] .qc-date-week:last-child {
+  justify-content: flex-start;
+}
+
+[data-qc-theme] .qc-date-week:first-child > .qc-date-day + .qc-date-day,
+[data-qc-theme] .qc-date-week:last-child > .qc-date-day + .qc-date-day {
+  margin-inline-start: 4px;
+}
+
+[data-qc-theme] .qc-date-day {
+  position: relative;
+  flex: 0 0 34px;
+  width: 34px;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-date-day[aria-selected='true']:not([disabled]) {
+  color: var(--qc-control-onInk);
+  background: var(--qc-control-on);
+  border-color: var(--qc-control-on);
+}
+
+[data-qc-theme] .qc-date-day[aria-current='date']::before {
+  position: absolute;
+  inset-inline: 6px;
+  top: 100%;
+  height: 2px;
+  margin-top: -6px;
+  background: currentColor;
+  border-radius: 1px;
+  content: '';
+}
+
+/* The months, three to a row 30px apart, and the years, four to a row 14px apart, 3px between
+ * columns. The chosen month or year stands on the quiet fill, a step up under the pointer. */
+[data-qc-theme] .qc-date-months,
+[data-qc-theme] .qc-date-years {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
+  grid-auto-rows: 34px;
+  column-gap: 3px;
+}
+
+[data-qc-theme] .qc-date-months {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  row-gap: 30px;
+}
+
+[data-qc-theme] .qc-date-years {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  row-gap: 14px;
+}
+
+[data-qc-theme] .qc-date-row {
+  display: contents;
+}
+
+[data-qc-theme] .qc-date-cell {
+  min-width: 0;
+  padding: 0 11px;
+}
+
+[data-qc-theme] .qc-date-years .qc-date-cell {
+  padding: 0 4px;
+}
+
+[data-qc-theme] .qc-date-cell[aria-selected='true']:not([disabled]) {
+  color: var(--qc-control-neutralInk);
+  background: var(--qc-control-neutral);
+  border-color: var(--qc-control-neutral);
+}
+
+[data-qc-theme] .qc-date-cell[aria-selected='true']:not([disabled]):hover {
+  background: var(--qc-control-neutralHover);
+  border-color: var(--qc-control-neutralHover);
 }
 
-[data-qc-theme] .qc-date-head {
+/* The chip under the calendar: 40px tall, its words at 16 on 24 and 15px in, centred and 10px over
+ * the footer, on the quiet fill a step up under the pointer and another while pressed. */
+[data-qc-theme] .qc-date-first-row {
   display: flex;
+  justify-content: center;
+}
+
+[data-qc-theme] .qc-date-first {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 24px;
+  height: 40px;
+  margin-bottom: 10px;
+  padding: 0 15px;
+  color: var(--qc-control-neutralInk);
+  font-size: 16px;
+  line-height: 24px;
+  white-space: nowrap;
+  background: var(--qc-control-neutral);
+  border-color: var(--qc-control-neutral);
+  border-radius: 8px;
 }
 
-[data-qc-theme] .qc-date-day {
+[data-qc-theme] .qc-date-first:hover {
+  background: var(--qc-control-neutralHover);
+  border-color: var(--qc-control-neutralHover);
+}
+
+[data-qc-theme] .qc-date-first:active {
+  background: var(--qc-control-neutralPressed);
+  border-color: var(--qc-control-neutralPressed);
+}
+
+/* The footer under a 1px rule: Cancel and Select at its end, 34px tall and 12px apart, their words at
+ * 16 on 24 and 11px in. Cancel is outlined in the outline role and takes the emphasis fill under the
+ * pointer; Select wears the fill. */
+[data-qc-theme] .qc-date-footer {
   display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid var(--qc-overlay-separator);
+}
+
+[data-qc-theme] .qc-date-footer .qc-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 28px;
-  padding: 0;
+  height: 34px;
+  padding: 0 11px;
+  font-size: 16px;
+  line-height: 24px;
+  white-space: nowrap;
+  border-radius: 8px;
+}
+
+[data-qc-theme] .qc-date-footer .qc-button + .qc-button {
+  margin-inline-start: 12px;
+}
+
+[data-qc-theme] .qc-date-cancel {
+  color: var(--qc-control-outline);
+  border-color: var(--qc-control-outline);
+}
+
+[data-qc-theme] .qc-date-cancel:hover:not([disabled]) {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-on);
+  border-color: var(--qc-control-on);
+}
+
+[data-qc-theme] .qc-date-cancel:active:not([disabled]) {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-onPressed);
+  border-color: var(--qc-control-onPressed);
+}
+
+/* The time list stands on the dialog's backdrop directly under the time field and as wide as it, at
+ * most 231px tall over a scroll of its own: the day in quarter hours on 32px rows with their words
+ * 12px in. The time the field holds is on the emphasis fill; the row under the pointer, or the one
+ * the keyboard walked to, takes the hover fill and dims its words. */
+[data-qc-theme] .qc-date-times {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  max-height: 231px;
+  overflow: hidden;
+}
+
+[data-qc-theme] .qc-date-times-body {
+  position: relative;
+}
+
+[data-qc-theme] .qc-date-times-rows {
+  padding: 6px 0;
+}
+
+[data-qc-theme] .qc-date-time-option {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding-block: 0;
+  padding-inline: 12px 10px;
+  color: var(--qc-text-primary);
+  font-size: 14px;
+  line-height: 16px;
   font-variant-numeric: tabular-nums;
-  border-color: transparent;
+  cursor: default;
+  user-select: none;
 }
 
-[data-qc-theme] .qc-date-day[aria-selected='true'] {
-  color: var(--qc-state-markInk);
-  background: var(--qc-state-accent);
-  border-color: var(--qc-state-accent);
+[data-qc-theme] .qc-date-time-option:hover,
+[data-qc-theme] .qc-date-time-option[data-qc-active='true'] {
+  color: var(--qc-state-hoverInk);
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-date-time-option[aria-selected='true'] {
+  color: var(--qc-control-onInk);
+  background: var(--qc-control-on);
+}
+
+/* Forced colors: what is chosen in the calendar and the time list stands in the system highlight. */
+@media (forced-colors: active) {
+  [data-qc-theme] .qc-date-day[aria-selected='true'],
+  [data-qc-theme] .qc-date-cell[aria-selected='true'],
+  [data-qc-theme] .qc-date-time-option[aria-selected='true'] {
+    forced-color-adjust: none;
+    color: HighlightText;
+    background: Highlight;
+  }
 }
 
 /* The thin bar beside a list the viewer scrolls to find something: the search results, the