@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css

@@ -0,0 +1,761 @@
+/* =====================================================================
+   Pixel Quiet — hypercms theme overrides (hypercms-owned).
+
+   Adapted from cms-sidebar/pixel-quiet/overrides.css. Two jobs:
+     1. Retune --mirk-* tokens, scoped to .hcms-shell.pixel-quiet (never :root).
+     2. Author the panel geometry + the functional chrome the static mockup
+        doesn't have (error banner, add/remove/move controls, the engine's
+        sortable cards, push / overlay / left-dock modes) on top of the
+        .hcms-* structural hooks.
+
+   This file is concatenated AFTER the scoped mirk base+components by
+   scripts/build-theme.js, so plain rules here win over mirk's @layer
+   components with zero !important. Loaded only inside .hcms-shell, so nothing
+   here leaks onto the host page.
+   ===================================================================== */
+
+/* ============================================================
+   TOKEN RETUNE — LIGHT (warm cream, gentle near-equal bevel)
+   ============================================================ */
+.hcms-shell.pixel-quiet {
+  color-scheme: light;
+  --mirk-canvas: #F7F2EA;
+  --mirk-bg: #F7F2EA;
+  --mirk-fg: #2B241B;
+  --mirk-accent: #efefe5;
+  --mirk-destructive: #C24A3A;
+  --mirk-focus-color: #C7AE93;
+
+  --mirk-bevel-bg: #FCF8F1;
+  --mirk-bevel-fg: #2B241B;
+  --mirk-bevel-tl: #F0E7D8;
+  --mirk-bevel-br: #E2D4BF;
+  --mirk-bevel-hover-bg: #F4ECDF;
+  --mirk-pill-inner-top: #FBF6EE;
+  --mirk-input-border: #D8C8AF;
+  --mirk-placeholder-color: #A8987F;
+
+  --mirk-mark-fg: #6B5942;
+  --mirk-toggle-bg: #EFDBBD;
+  --mirk-toggle-hi: #F4EADA;
+  --mirk-toggle-lo: #C2A87E;
+  --mirk-sortable-dot: #DDCBB0;
+  --mirk-sortable-shadow: #C9B493;
+  --mirk-sortable-label: #8C7B62;
+  --mirk-sortable-placeholder: #A8987F;
+
+  --mirk-radius: 5px;
+  --mirk-focus-offset: 2px;
+}
+
+/* dark token deltas, shared by the explicit .dark opt-in and OS preference */
+.hcms-shell.pixel-quiet.dark,
+.hcms-shell.pixel-quiet[data-theme="dark"] {
+  color-scheme: dark;
+  --mirk-canvas: #0B0C13;
+  --mirk-bg: #11131E;
+  --mirk-fg: #ECEAF2;
+  --mirk-accent: #1D1F2F;
+  --mirk-focus-color: #4A506B;
+
+  --mirk-bevel-bg: #1A1D2C;
+  --mirk-bevel-fg: #ECEAF2;
+  --mirk-bevel-tl: #2A2E42;
+  --mirk-bevel-br: #14182A;
+  --mirk-bevel-hover-bg: #202436;
+  --mirk-pill-inner-top: #202436;
+  --mirk-input-border: #353B52;
+  --mirk-placeholder-color: #6A7090;
+
+  --mirk-mark-fg: #C9CDE0;
+  --mirk-toggle-bg: #3E4660;
+  --mirk-toggle-hi: #4E567A;
+  --mirk-toggle-lo: #262B42;
+  --mirk-sortable-dot: #353B52;
+  --mirk-sortable-shadow: #0E1120;
+  --mirk-sortable-label: #8A90AB;
+  --mirk-sortable-placeholder: #6A7090;
+}
+
+/* Auto-dark on OS preference, unless the shell pins light with .light */
+@media (prefers-color-scheme: dark) {
+  .hcms-shell.pixel-quiet:not(.light):not([data-theme="light"]) {
+    color-scheme: dark;
+    --mirk-canvas: #0B0C13;
+    --mirk-bg: #11131E;
+    --mirk-fg: #ECEAF2;
+    --mirk-accent: #1D1F2F;
+    --mirk-focus-color: #4A506B;
+
+    --mirk-bevel-bg: #1A1D2C;
+    --mirk-bevel-fg: #ECEAF2;
+    --mirk-bevel-tl: #2A2E42;
+    --mirk-bevel-br: #14182A;
+    --mirk-bevel-hover-bg: #202436;
+    --mirk-pill-inner-top: #202436;
+    --mirk-input-border: #353B52;
+    --mirk-placeholder-color: #6A7090;
+
+    --mirk-mark-fg: #C9CDE0;
+    --mirk-toggle-bg: #3E4660;
+    --mirk-toggle-hi: #4E567A;
+    --mirk-toggle-lo: #262B42;
+    --mirk-sortable-dot: #353B52;
+    --mirk-sortable-shadow: #0E1120;
+    --mirk-sortable-label: #8A90AB;
+    --mirk-sortable-placeholder: #6A7090;
+  }
+}
+
+/* ============================================================
+   SHELL GEOMETRY — fixed, docked panel, single column.
+   position: fixed makes the shell a containing block so the absolute
+   minibar anchors to it; flex column so the body owns the scroll.
+   ============================================================ */
+.hcms-shell.pixel-quiet.hcms-panel {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--hcms-shell-width, 380px);
+  max-width: 100vw;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  color: var(--mirk-fg);
+  background: var(--mirk-bg);
+  border-left: 1px solid var(--mirk-input-border);
+  box-shadow: -16px 0 48px -28px rgba(43, 36, 27, 0.45);
+}
+.hcms-shell.pixel-quiet.hcms-panel.dark {
+  box-shadow: -16px 0 48px -28px rgba(0, 0, 0, 0.6);
+}
+
+.hcms-shell.pixel-quiet.hcms-side-left {
+  right: auto;
+  left: 0;
+  border-left: 0;
+  border-right: 1px solid var(--mirk-input-border);
+  box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
+}
+
+/* Push the page over so docked content is never hidden underneath, and publish
+   the geometry the floating toggle has to compose with. --hcms-toggle-shift is
+   the distance the toggle moves left, which is the shell width only while the
+   shell is docked on the right; docked left, as an overlay, or full-viewport it
+   is zero. */
+body.hcms-open { --hcms-shell-width: 380px; }
+body.hcms-open:not(.hcms-overlay) { padding-right: var(--hcms-shell-width); }
+body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: var(--hcms-shell-width); }
+body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: var(--hcms-shell-width); }
+body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
+
+@media (max-width: 799px) {
+  body.hcms-open { --hcms-shell-width: 100vw; }
+  body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: 0px; }
+  body.hcms-open:not(.hcms-overlay),
+  body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
+  body.hcms-open { overflow: hidden; }
+}
+
+/* ---------- SCROLL REGION — holds the (scrollable) header + form + save ---------- */
+.hcms-shell-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* ---------- CONDENSED MINIBAR — appears once the full header scrolls away ---------- */
+.hcms-shell-minibar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 24px 10px;
+  background: var(--mirk-bg);
+  border-bottom: 1px solid var(--mirk-input-border);
+  opacity: 0;
+  transform: translateY(-100%);
+  pointer-events: none;
+  transition: opacity 140ms ease, transform 160ms ease;
+}
+.hcms-shell.is-condensed .hcms-shell-minibar {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+.hcms-shell-minibar-title {
+  font-size: 14px;
+  line-height: 1;
+  color: var(--mirk-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- HEADER (no underline rule — whitespace separates the bands) ---------- */
+.hcms-shell-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 24px 24px 4px;
+}
+.hcms-shell-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.hcms-shell-eyebrow {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--mirk-placeholder-color);
+}
+.hcms-shell-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--mirk-fg);
+}
+.hcms-shell-close.mirk-button {
+  flex-shrink: 0;
+  padding: 2px 9px 3px;
+  line-height: 1;
+}
+.hcms-shell-close .mirk-button__label { font-size: 16px; }
+
+/* ---------- FORM — generous, even vertical rhythm ---------- */
+.hcms-form {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  padding: 12px 24px 28px;
+}
+
+/* one labeled scalar field */
+.hcms-field { display: flex; flex-direction: column; gap: 9px; }
+.hcms-field--row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* themed field label */
+.hcms-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--mirk-sortable-label);
+}
+
+/* comfortable control padding + readable size, in mirk's own mono */
+.hcms-shell.pixel-quiet .mirk-input,
+.hcms-shell.pixel-quiet .mirk-textarea {
+  font-size: 15px;
+  padding: 9px 14px 10px;
+}
+.hcms-shell.pixel-quiet textarea.mirk-input { min-height: 76px; resize: vertical; }
+
+/* default scalar fields: one-row textareas that grow with their content.
+   Browsers without field-sizing get a scrollHeight fallback (enhance.js). */
+.hcms-shell.pixel-quiet .hcms-form textarea.mirk-textarea {
+  field-sizing: content;
+  resize: none;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* rich-text surface (@richtext): a contenteditable styled like a textarea */
+.hcms-shell.pixel-quiet .hcms-richtext {
+  min-height: 2.5em;
+  cursor: text;
+  overflow-wrap: break-word;
+}
+.hcms-shell.pixel-quiet .hcms-richtext a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.hcms-shell.pixel-quiet .hcms-richtext:empty::before {
+  content: attr(data-hcms-placeholder);
+  color: var(--mirk-placeholder-color);
+}
+.hcms-shell.pixel-quiet .mirk-select__field {
+  font-size: 15px;
+  padding: 8px 40px 9px 14px;
+}
+.hcms-shell.pixel-quiet .mirk-radio__label,
+.hcms-shell.pixel-quiet .mirk-toggle__label,
+.hcms-shell.pixel-quiet .mirk-tags__input { font-size: 15px; }
+
+/* inline radio row */
+.hcms-radio-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
+
+/* chip-field (the @chips built-in): a borderless inline input that sizes to its
+   text, so chips read like static chips but stay inline-editable. */
+.hcms-shell .mirk-tags__chip { padding-right: 6px; }
+.hcms-shell .hcms-chip-field {
+  border: 0; background: transparent; color: inherit; font: inherit;
+  outline: none; min-width: 2ch; field-sizing: content; padding: 0;
+}
+.hcms-shell .hcms-chips .hcms-add { margin-top: 4px; align-self: flex-start; }
+
+/* ---------- OBJECT GROUP — a quiet framed band, not a heavy card ---------- */
+.hcms-object {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.hcms-object-title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--mirk-sortable-label);
+}
+.hcms-object-fields { display: flex; flex-direction: column; gap: 16px; }
+
+/* ---------- SCALAR ARRAY — a calm list of mirk-input rows ---------- */
+.hcms-array { display: flex; flex-direction: column; gap: 14px; }
+.hcms-array-header { display: flex; align-items: baseline; justify-content: space-between; }
+.hcms-array-title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--mirk-sortable-label);
+}
+/* The generic stacked-list layout is unlayered, so it would beat mirk's
+   @layer-components rules on any slot that is also a mirk component. Exempt a
+   mirk tags box so it keeps mirk's own row-wrap layout and inner padding. */
+.hcms-array-items:not(.mirk-tags) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.hcms-array-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.hcms-array-item .mirk-input { flex: 1; min-width: 0; }
+
+/* ---------- OBJECT ARRAY — mirk-sortable cards from the engine markup ---------- */
+.hcms-array--cards .hcms-array-items { gap: 14px; }
+.hcms-card.mirk-sortable__item { background: var(--mirk-bevel-bg); position: relative; }
+.hcms-card .hcms-card-fields { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+.hcms-card .hcms-field {
+  gap: 2px;
+  padding: 8px 14px 9px;
+}
+.hcms-card .hcms-field:not(:last-child) { border-bottom: 1px solid var(--mirk-input-border); }
+.hcms-card .hcms-label { letter-spacing: 0.16em; }
+/* fields inside a card read as quiet rows, not chunky boxed inputs */
+.hcms-card .mirk-input,
+.hcms-card .mirk-textarea {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 15px;
+}
+.hcms-card .mirk-input:focus-visible,
+.hcms-card .mirk-textarea:focus-visible { outline: none; }
+/* the remove × is pulled out to the card corner (below), so the controls row
+   now only holds the sr-only move buttons — collapse it until one is focused. */
+.hcms-card-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 0;
+}
+
+/* quiet × remove control, shared by scalar-array rows and object-array cards */
+.hcms-remove {
+  flex-shrink: 0;
+  appearance: none;
+  border: 0;
+  background: none;
+  color: var(--mirk-placeholder-color);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 2px 6px;
+}
+.hcms-remove:hover { color: var(--mirk-destructive); }
+.hcms-remove[hidden] { display: none; }
+
+/* object-array card: the delete control is a square corner button pinned
+   top-right, carrying the card's own 1px border + a crisp-line × icon. */
+.hcms-remove--card {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bevel-bg);
+  color: var(--mirk-placeholder-color);
+}
+.hcms-remove--card:hover { border-color: var(--mirk-destructive); }
+.hcms-remove--card .hcms-x { width: 64%; height: 64%; display: block; }
+
+/* "+ Add" — quiet, pinned left */
+.hcms-add.mirk-button { align-self: flex-start; }
+
+/* ---------- UPLOAD COMPONENTS (@file / @image) ----------
+   Built on the kit's mirk-file / mirk-image--compact chrome. The native picker
+   is visually hidden but focusable (the mirk-button label is the visible
+   trigger and rings via :has(:focus-visible)); it is NOT .mirk-*__input, so the
+   vendored mirk runtime never handles it. The empty/filled chrome is driven by
+   the bound leaf's value attribute (src/href) in CSS — no JS state to desync. */
+.hcms-upload input[type="file"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* @image: show the upload button until the bound <img> carries a real src. */
+.hcms-upload--image .mirk-image__thumb { display: none; }
+.hcms-upload--image:has(.mirk-image__preview[src]:not([src=""])) .mirk-image__upload { display: none; }
+.hcms-upload--image:has(.mirk-image__preview[src]:not([src=""])) .mirk-image__thumb { display: inline-block; }
+
+/* @file: reveal the clear × and the filename only once the bound <a> has href. */
+.hcms-upload--file .hcms-upload-clear { display: none; }
+.hcms-upload--file:has(a.mirk-file__name[href]:not([href=""])) .hcms-upload-clear { display: inline-flex; }
+/* A filled filename uses the bright foreground (the kit's [data-filled] look),
+   driven by the bound href so there's no JS attribute to keep in sync — the
+   vendored runtime that would otherwise stamp data-filled is inert here. */
+.hcms-upload--file:has(a.mirk-file__name[href]:not([href=""])) a.mirk-file__name {
+  color: var(--mirk-bevel-fg);
+}
+.hcms-upload--file a.mirk-file__name:empty {
+  text-decoration: none;
+  cursor: default;
+}
+.hcms-upload--file a.mirk-file__name:empty::after {
+  content: "No file chosen";
+  color: var(--mirk-placeholder-color);
+}
+
+/* ---------- UPLOADING (spec §9) ----------
+   One attribute, [data-hcms-uploading], set on the field for as long as the host
+   has the bytes, plus --hcms-upload-progress carrying the percent. No markup of
+   its own: the templates keep their exact shape, so a half-finished upload cannot
+   leave an orphan node behind in the form. The at-upload-time picture is painted
+   on the frame as a background, never assigned to the bound <img>, because that
+   img IS the field's value and a commit landing mid-upload would write a
+   two-megabyte data URL straight into the live page. */
+.hcms-upload[data-hcms-uploading] .mirk-image__frame {
+  background-size: cover;
+  background-position: center;
+}
+/* The empty state hides the thumb, so an upload into an empty field would have
+   nowhere to show. Uploading reveals it, preview or not. */
+.hcms-upload--image[data-hcms-uploading] .mirk-image__thumb { display: inline-block; }
+.hcms-upload--image[data-hcms-uploading] .mirk-image__upload { display: none; }
+/* No × mid-flight: clearing writes the leaf empty, which says nothing about the
+   request still running and reads as a cancel that is not one. */
+.hcms-upload[data-hcms-uploading] .hcms-upload-clear { display: none; }
+
+.hcms-upload[data-hcms-uploading] .mirk-image__frame::after,
+.hcms-upload--file[data-hcms-uploading] .mirk-file::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  width: var(--hcms-upload-progress, 0%);
+  background: var(--mirk-bevel-fg);
+  transition: width 120ms linear;
+}
+/* The @file row has no frame to hang the bar on, so it becomes the positioning
+   context itself. */
+.hcms-upload--file[data-hcms-uploading] .mirk-file { position: relative; }
+
+/* clear-× (vendored-inert; data-hcms-action, never .mirk-*__remove). Bare × for
+   @file, a pinned corner badge for @image — mirroring .hcms-remove / --card. */
+.hcms-upload-clear {
+  flex-shrink: 0;
+  appearance: none;
+  border: 0;
+  background: none;
+  color: var(--mirk-placeholder-color);
+  cursor: pointer;
+  line-height: 0;
+  padding: 2px 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.hcms-upload-clear:hover { color: var(--mirk-destructive); }
+.hcms-upload-clear .hcms-x { display: block; width: 14px; height: 14px; }
+
+.hcms-upload-clear--badge {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bevel-bg);
+  color: var(--mirk-bevel-fg);
+}
+.hcms-upload-clear--badge:hover { color: var(--mirk-destructive); border-color: var(--mirk-destructive); }
+.hcms-upload-clear--badge .hcms-x { width: 10px; height: 10px; }
+
+/* ---------- UNRESOLVED-FIELDS NOTICE ---------- */
+.hcms-shell-notice {
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-line;
+  color: var(--mirk-mark-fg);
+  background: var(--mirk-bevel-bg);
+  border: 1px solid var(--mirk-input-border);
+  padding: 8px 12px;
+  margin: 0 24px 8px;
+}
+.hcms-shell-notice[hidden] { display: none; }
+
+/* ---------- ERROR BANNER + inline errors ---------- */
+.hcms-shell-error,
+.hcms-error {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--mirk-destructive);
+  background: var(--mirk-bevel-bg);
+  border: 1px solid var(--mirk-destructive);
+  padding: 8px 12px;
+}
+.hcms-shell-error { margin: 0 24px; }
+.hcms-error { margin-top: 6px; }
+.hcms-shell-error[hidden],
+.hcms-error[hidden] { display: none; }
+
+/* A note, not a refusal: the file WAS stored, in the page, and this says why it
+   is not on the host. Same slot, so there is one place a field ever speaks. */
+.hcms-error--info {
+  color: var(--mirk-mark-fg);
+  border-color: var(--mirk-input-border);
+}
+
+/* ---------- SAVE (sits at the end of the scrolling form, not pinned) ---------- */
+.hcms-shell-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 24px 28px;
+}
+.hcms-shell-footer[hidden] { display: none; }
+
+/* ---------- sr-only move buttons: hidden, visible on keyboard focus ---------- */
+.hcms-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.hcms-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 2px 6px;
+  margin: 0 2px;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background: var(--mirk-bevel-bg);
+  border: 1px solid var(--mirk-input-border);
+  color: var(--mirk-fg);
+  font-size: 12px;
+  cursor: pointer;
+}
+.hcms-sr-only[hidden] { display: none; }
+
+/* ============================================================
+   INLINE VIEW GEOMETRY — not a panel. A transparent full-viewport
+   host whose children are the only interactive surfaces, so the page
+   underneath stays fully usable while the editor is open.
+   ============================================================ */
+.hcms-shell.pixel-quiet.hcms-inline {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  /* The host must never intercept a click meant for the page. Each child
+     re-enables pointer events for itself. */
+  pointer-events: none;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  color: var(--mirk-fg);
+}
+.hcms-inline > *,
+.hcms-inline-layer > * { pointer-events: auto; }
+.hcms-inline-layer { position: absolute; inset: 0; pointer-events: none; }
+
+.hcms-inline-bar {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  max-width: min(560px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.hcms-inline-notice,
+.hcms-inline-error {
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 12px 32px -20px rgba(43, 36, 27, 0.5);
+}
+.hcms-inline-notice { white-space: pre-line; }
+.hcms-inline-error { border-color: var(--mirk-destructive); color: var(--mirk-destructive); }
+.hcms-inline-notice[hidden],
+.hcms-inline-error[hidden] { display: none; }
+
+.hcms-inline-pop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  max-width: min(360px, calc(100vw - 24px));
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  box-shadow: 0 16px 40px -22px rgba(43, 36, 27, 0.55);
+  /* Above the handles. They are positioned with z-index: 1 while the popover
+     sat at auto, so a handle painted over the very field it had just opened
+     and covered the text in it. The popover is what someone is using; a handle
+     is only an offer to open one. */
+  z-index: 2;
+}
+.hcms-inline-pop[hidden] { display: none; }
+
+.hcms-inline-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  will-change: transform;
+}
+.hcms-inline-handle[hidden] { display: none; }
+
+/* The list controls: one ↑ ↓ ✕ strip per row, one Add per list. Positioned the
+   same way a handle is and by the same pass, so they carry the same absolute
+   origin and the same will-change. */
+.hcms-inline-row-controls {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  gap: 2px;
+  will-change: transform;
+}
+.hcms-inline-row-controls[hidden] { display: none; }
+
+.hcms-inline-list-add {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  will-change: transform;
+}
+.hcms-inline-list-add[hidden] { display: none; }
+
+.hcms-inline-list-button {
+  min-width: 28px;
+  min-height: 28px;
+}
+.hcms-inline-list-button[hidden] { display: none; }
+
+/* A finger is not a mouse pointer: on touch the same three controls get the
+   44px target the platform guidelines ask for. */
+@media (pointer: coarse) {
+  .hcms-inline-list-button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.hcms-inline-toggle { align-self: center; }
+.hcms-inline-count {
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  align-self: center;
+}
+.hcms-inline-count[hidden] { display: none; }
+
+/* The sidebar handoff: the count of ruled fields with no place on the page,
+   and the one tap out to the view that can edit them. Same pill as the count
+   above, because it is the same kind of statement about this session. */
+.hcms-inline-handoff {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 6px 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  border: 1px solid var(--mirk-input-border);
+  background: var(--mirk-bg);
+  color: var(--mirk-fg);
+  align-self: center;
+}
+.hcms-inline-handoff[hidden] { display: none; }
+
+/* One field at a time. Scoped to the inline host: [data-hcms-shell] is on BOTH
+   hosts, so an unscoped rule hides the sidebar's whole form too. */
+.hcms-inline .hcms-form [data-hcms-path] { display: none; }
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-onpath,
+.hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-active { display: block; }
+
+.hcms-inline-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border: 2px solid var(--mirk-focus-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  will-change: transform;
+}
+.hcms-inline-highlight[hidden] { display: none; }