@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/theme.generated.css

@@ -0,0 +1,1772 @@
+/* GENERATED by scripts/build-theme.js from mirk-interface/mirk.css — DO NOT EDIT.
+   Source of truth: mirk-interface/mirk.css + src/theme/pixel-quiet.overrides.css.
+   Regenerate with: npm run build:theme */
+
+/* ===== mirk-interface@2.2.0, scoped to .hcms-shell ===== */
+/*
+ * mirk.css — the mirk UI kit, v2.
+ * Hand-written, no build. Fourteen form components as semantic BEM classes in
+ * @layer components, so utilities (Tailwind or your own) always override them
+ * with zero !important. Renders fully standalone; Tailwind is optional.
+ *
+ * Two hinges (see mirk-ui-guide.md):
+ *   1. Components live in @layer components → utilities win.
+ *   2. State serializes into the DOM (native attrs, :has(), inline --mirk-value)
+ *      so document.documentElement.outerHTML round-trips every visible state.
+ *
+ * This @layer statement makes the file self-sufficient without Tailwind, and
+ * merges into Tailwind's own order (@layer theme, base, components, utilities)
+ * when present.
+ */
+@layer base, components;
+
+@layer base {
+  /* Components are authored border-box (a 2px bevel must not grow the box). */
+  .hcms-shell *, .hcms-shell *::before, .hcms-shell *::after { box-sizing: border-box; }
+  .hcms-shell button, .hcms-shell input, .hcms-shell optgroup, .hcms-shell select, .hcms-shell textarea { margin: 0; }
+
+  @font-face {
+    font-family: 'Departure Mono';
+    src: url('https://cdn.jsdelivr.net/npm/mirk-interface@2.2.0/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2') format('woff2');
+    font-weight: 400; font-style: normal; font-display: swap;
+  }
+
+  .hcms-shell { font-family: 'Departure Mono', ui-monospace, "Menlo", monospace; }
+  /* Preflight sets these to ui-monospace; keep them in Departure Mono. */
+  .hcms-shell pre, .hcms-shell code, .hcms-shell kbd, .hcms-shell samp { font-family: inherit; }
+
+  /* 28 tokens, one value each. light-dark() picks the side from color-scheme.
+     :root paints the DEFAULT theme — "Pixel Quiet" (see 0030): mirk's warm soul
+     with the volume down. The louder original palette is the opt-in
+     [data-theme="full-volume"] block below. */
+  .hcms-shell {
+    color-scheme: light dark;                 /* default: follow the OS */
+
+    --mirk-canvas:        light-dark(#FDF8F0, #0B0C13);
+    --mirk-bg:            light-dark(#FDF8F0, #11131E);
+    --mirk-fg:            light-dark(#2B241B, #ECEAF2);
+    --mirk-accent:        light-dark(#efefe5, #1D1F2F);
+    --mirk-destructive:   light-dark(#C24A3A, #ff5566);
+    --mirk-focus-color:   light-dark(#C7AE93, #4A506B);
+    --mirk-bevel-bg:      light-dark(#FCF8F1, #1A1D2C);
+    --mirk-bevel-fg:      light-dark(#2B241B, #ECEAF2);
+    --mirk-bevel-tl:      light-dark(#F0E7D8, #2A2E42);
+    --mirk-bevel-br:      light-dark(#E2D4BF, #14182A);
+    --mirk-bevel-hover-bg: light-dark(#F4ECDF, #202436);
+    --mirk-pill-inner-top: light-dark(#FBF6EE, #202436);
+    --mirk-input-border:  light-dark(#D8C8AF, #353B52);
+    --mirk-placeholder-color: light-dark(#A8987F, #6A7090);
+    --mirk-ctrl-bg:       light-dark(#8C7660, #5F6582);
+    --mirk-toggle-bg:     light-dark(#EFDBBD, #3E4660);
+    --mirk-toggle-hi:     light-dark(#F4EADA, #4E567A);
+    --mirk-toggle-lo:     light-dark(#C2A87E, #262B42);
+    --mirk-mark-fg:       light-dark(#6B5942, #C9CDE0);
+    --mirk-sortable-dot:  light-dark(#DDCBB0, #353B52);
+    --mirk-sortable-shadow:    light-dark(#C9B493, #0E1120);
+    --mirk-sortable-label:     light-dark(#8C7B62, #8A90AB);
+    --mirk-sortable-placeholder: light-dark(#A8987F, #6A7090);
+    --mirk-slider-fill:   light-dark(#F2E0BD, #2A2E42);
+    --mirk-slider-nub-bg: light-dark(#EFDBBD, #3E4660);
+    --mirk-slider-nub-hi: light-dark(#F4EADA, #4E567A);
+    --mirk-slider-nub-lo: light-dark(#C2A87E, #262B42);
+
+    /* Chip — the recovery/notification component reads from the kit's own tokens
+       via 5 slim hooks, so it matches the kit by default and reskins by overriding
+       a hook (not a rule). Each follows the theme (incl. the Full Volume variant)
+       and OS light/dark with no per-theme repaint; the one exception is the primary
+       fill, which the default (Pixel Quiet) leaves as the theme's fg ink while the
+       Full Volume variant tints it a warm brown in light (see below). */
+    --mirk-chip-surface:     var(--mirk-bg);            /* raised panel face */
+    --mirk-chip-edge:        var(--mirk-input-border);  /* panel + recess outline */
+    --mirk-chip-primary-bg:  var(--mirk-fg);            /* primary action fill — the theme's fg ink (Full Volume tints it warm brown in light) */
+    --mirk-chip-primary-fg:  var(--mirk-bg);
+    --mirk-chip-alert:       var(--mirk-destructive);   /* icon + struck "now" value */
+
+    --mirk-radius: 5px;                        /* the "rounded" corner */
+    --mirk-focus-offset: 2px;                  /* non-color → can't ride light-dark() */
+
+    background: var(--mirk-canvas);
+    color: var(--mirk-fg);
+  }
+
+  /* The one non-color token with a real light/dark split (was 2px / 3px). */
+  @media (prefers-color-scheme: dark) { .hcms-shell { --mirk-focus-offset: 3px; } }
+
+  /* Force a mode on any subtree with one attribute (class aliases for hosts that
+     prefer class-based theming and Tailwind's dark-variant convention). Each also
+     paints its own canvas so a wrapper visibly flips. */
+  .hcms-shell[data-theme="light"], .hcms-shell.light {
+    color-scheme: light; --mirk-focus-offset: 2px;
+    background: var(--mirk-canvas); color: var(--mirk-fg);
+  }
+  .hcms-shell[data-theme="dark"], .hcms-shell.dark {
+    color-scheme: dark; --mirk-focus-offset: 3px;
+    background: var(--mirk-canvas); color: var(--mirk-fg);
+  }
+
+  /* Built-in brand variant — "Full Volume": mirk's original full-strength palette,
+     the loud pole of the volume axis (Pixel Quiet, now the default, is the quiet
+     end). Full-contrast bevel, warm cream / deep navy, crimson destructive.
+     Authored with light-dark() like :root, so it follows the OS and still flips
+     with .dark / .light. Opt in: data-theme="full-volume". Sits after :root
+     (equal specificity, source order wins). --mirk-radius / --mirk-focus-offset /
+     --mirk-ctrl-bg and the four shared --mirk-chip-* hooks inherit from :root
+     unchanged; only the tokens that differ from the default are re-declared here. */
+  .hcms-shell[data-theme="full-volume"] {
+    --mirk-canvas:        light-dark(#F7F2EA, #0B0C13);
+    --mirk-bg:            light-dark(#F7F2EA, #1D1F2F);
+    --mirk-fg:            light-dark(#15120e, #F6F7F9);
+    --mirk-accent:        light-dark(#efefe5, #232639);
+    --mirk-destructive:   light-dark(#d4183d, #ff5566);
+    --mirk-focus-color:   light-dark(#BBA288, #5A607F);
+    --mirk-bevel-bg:      light-dark(#e9d3bd, #1D1F2F);
+    --mirk-bevel-fg:      light-dark(#15120e, #F6F7F9);
+    --mirk-bevel-tl:      light-dark(#f3ddc7, #474C65);
+    --mirk-bevel-br:      light-dark(#c2ad95, #131725);
+    --mirk-bevel-hover-bg: light-dark(#dfc9b3, #232639);
+    --mirk-pill-inner-top: light-dark(#efdac7, #232639);
+    --mirk-input-border:  light-dark(#957E65, #6E738E);
+    --mirk-placeholder-color: light-dark(#7F7366, #545973);
+    --mirk-toggle-bg:     light-dark(#DFC9AF, #656D95);
+    --mirk-toggle-hi:     light-dark(#E9D6C3, #7F87AD);
+    --mirk-toggle-lo:     light-dark(#C7A88A, #505677);
+    --mirk-mark-fg:       light-dark(#3F3225, #E1E3EA);
+    --mirk-sortable-dot:  light-dark(#e2c5a6, #393f5b);
+    --mirk-sortable-shadow:    light-dark(#c7a47f, #111527);
+    --mirk-sortable-label:     light-dark(#231e18, #edeef2);
+    --mirk-sortable-placeholder: light-dark(#99826c, #6f7695);
+    --mirk-slider-fill:   light-dark(#e9d3bd, #232639);
+    --mirk-slider-nub-bg: light-dark(#DFC9AF, #656D95);
+    --mirk-slider-nub-hi: light-dark(#E9D6C3, #7F87AD);
+    --mirk-slider-nub-lo: light-dark(#C7A88A, #505677);
+    /* :root (Pixel Quiet) leaves the chip primary as its own fg ink; the original
+       default tinted it a warm brown in light — restore that here. */
+    --mirk-chip-primary-bg: light-dark(#1C170E, var(--mirk-fg));
+  }
+
+  /* Roll your own the same way — an explicit [data-theme] block is the escape hatch:
+     [data-theme="sunset"] { color-scheme: light; --mirk-accent: #f0a868; … } */
+}
+
+@layer components {
+  /* Visually hidden, still focusable/announced. The hidden native input behind
+     every custom control relies on it; Tailwind is optional now. */
+  .hcms-shell .mirk-sr-only {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden;
+    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
+  }
+
+  /* ============================ BUTTON ============================ */
+  .hcms-shell .mirk-button {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+    font: inherit; line-height: 1.5; cursor: pointer; user-select: none;
+    text-align: center;
+    color: var(--mirk-bevel-fg);
+    background: var(--mirk-bevel-bg);
+    border: 2px solid;
+    /* Raised bevel: light top+left, dark right+bottom. Shorthand is T R B L. */
+    border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+    padding: 4px 14px 5px;                     /* medium */
+    outline: none;
+  }
+  .hcms-shell .mirk-button__label { white-space: nowrap; user-select: none; display: inline-block; }
+
+  /* States, written once, shared by every size and shape. */
+  .hcms-shell .mirk-button:hover { background-color: var(--mirk-bevel-hover-bg); }
+  .hcms-shell .mirk-button:active {
+    border-color: var(--mirk-bevel-br) var(--mirk-bevel-tl) var(--mirk-bevel-tl) var(--mirk-bevel-br);
+  }
+  .hcms-shell .mirk-button:not(.mirk-button--round):active .mirk-button__label { translate: 1.5px 1.5px; }
+  /* Direct focus (a real <button>) or a focus-visible descendant (a <label>
+     wrapping a hidden input, as the file/image upload triggers do). */
+  .hcms-shell .mirk-button:focus-visible, .hcms-shell .mirk-button:has(:focus-visible) {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  /* Sizes set padding + font (rect); round re-homes padding to the label below. */
+  .hcms-shell .mirk-button--small { padding: 3px 12px; font-size: 14px; }
+  .hcms-shell .mirk-button--large { padding: 4px 17px 7px; font-size: 18px; border-width: 3px; }
+
+  /* Round register: a gradient pill frame with the label as the inner fill. */
+  .hcms-shell .mirk-button--round {
+    border: none; padding: 2px; border-radius: 14px;
+    background-color: var(--mirk-canvas);
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
+    opacity: 0.9; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .hcms-shell .mirk-button--round:hover { opacity: 1; }
+  .hcms-shell .mirk-button--round:active {
+    background-image: linear-gradient(to bottom in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
+  }
+  .hcms-shell .mirk-button--round .mirk-button__label {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 4px 17px 6px; border-radius: 12px;
+    color: var(--mirk-bevel-fg);
+    background-color: var(--mirk-bevel-bg);
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
+  }
+  .hcms-shell .mirk-button--round.mirk-button--small { border-radius: 12px; }
+  .hcms-shell .mirk-button--round.mirk-button--small .mirk-button__label { padding: 2px 14px; border-radius: 10px; }
+  .hcms-shell .mirk-button--round.mirk-button--large { border-radius: 16px; }
+  .hcms-shell .mirk-button--round.mirk-button--large .mirk-button__label { padding: 7px 24px 9px; border-radius: 14px; }
+
+  /* Quiet: a borderless text button (transparent border keeps the hit area + the
+     baseline aligned with neighbouring bevel buttons). For tertiary actions. */
+  .hcms-shell .mirk-button--quiet {
+    background: none; background-image: none;
+    border-color: transparent; color: var(--mirk-placeholder-color);
+  }
+  .hcms-shell .mirk-button--quiet:hover { background: none; color: var(--mirk-fg); }
+  .hcms-shell .mirk-button--quiet:active { border-color: transparent; }
+
+  /* ============================ TEXT INPUT ============================ */
+  .hcms-shell .mirk-input {
+    width: 100%;
+    background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
+    border: 1px solid var(--mirk-input-border);
+    padding: 5px 14px 6px;                     /* medium */
+    font: inherit; line-height: 1.5; border-radius: 0; outline: none;
+  }
+  .hcms-shell .mirk-input::placeholder { color: var(--mirk-placeholder-color); }
+  .hcms-shell .mirk-input:focus-visible {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-input--small { padding: 4px 12px; font-size: 14px; }
+  .hcms-shell .mirk-input--large { padding: 6px 17px 9px; font-size: 18px; }
+  .hcms-shell .mirk-input--rounded { border-radius: var(--mirk-radius); }
+
+  /* ============================ TEXTAREA ============================ */
+  .hcms-shell .mirk-textarea {
+    width: 100%;
+    background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
+    border: 1px solid var(--mirk-input-border);
+    padding: 6px 17px 9px; font: inherit; font-size: 18px; line-height: 1.5;
+    border-radius: 0; outline: none; resize: vertical;
+  }
+  .hcms-shell .mirk-textarea::placeholder { color: var(--mirk-placeholder-color); }
+  .hcms-shell .mirk-textarea:focus-visible {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-textarea--rounded { border-radius: var(--mirk-radius); }
+
+  /* ============================ NUMBER ============================ */
+  .hcms-shell .mirk-number {
+    display: flex; align-items: stretch; width: 100%;
+    background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border); border-radius: 0;
+  }
+  .hcms-shell .mirk-number:has(:focus-visible) {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-number__input {
+    flex: 1; min-width: 0; background: transparent; color: var(--mirk-bevel-fg);
+    padding: 5px 10px 6px 14px;                /* medium */
+    font: inherit; line-height: 1.5; outline: none;
+    appearance: textfield; -webkit-appearance: textfield;
+  }
+  .hcms-shell .mirk-number__input::-webkit-outer-spin-button, .hcms-shell .mirk-number__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
+  .hcms-shell .mirk-number__steps { display: flex; flex-direction: column; padding: 2px; gap: 2px; }
+  .hcms-shell .mirk-number__step {
+    flex: 1; cursor: pointer; line-height: 1; padding: 0 10px; font-size: 9px;  /* medium */
+    display: flex; align-items: center; justify-content: center;
+    background: var(--mirk-bevel-bg); outline: none;
+    border: 2px solid;
+    border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+  }
+  .hcms-shell .mirk-number__step:hover { background: var(--mirk-bevel-hover-bg); }
+  .hcms-shell .mirk-number__step:active {
+    border-color: var(--mirk-bevel-br) var(--mirk-bevel-tl) var(--mirk-bevel-tl) var(--mirk-bevel-br);
+  }
+  .hcms-shell .mirk-number__step:focus-visible { outline: 1px solid var(--mirk-focus-color); outline-offset: 1px; }
+
+  .hcms-shell .mirk-number--small .mirk-number__input { padding: 4px 8px 4px 12px; font-size: 14px; }
+  .hcms-shell .mirk-number--small .mirk-number__step { padding: 0 8px; font-size: 8px; }
+  .hcms-shell .mirk-number--large .mirk-number__input { padding: 6px 12px 9px 17px; font-size: 18px; }
+  .hcms-shell .mirk-number--large .mirk-number__step { padding: 0 12px; font-size: 10px; }
+
+  .hcms-shell .mirk-number--rounded { border-radius: var(--mirk-radius); }
+  .hcms-shell .mirk-number--rounded .mirk-number__step { border-radius: 3px; }
+
+  /* ============================ SELECT / DROPDOWN ============================ */
+  /* Keeps appearance:none + a real chevron (renders identically everywhere today);
+     base-select/::picker is a future enhancement. */
+  .hcms-shell .mirk-select { position: relative; }
+  .hcms-shell .mirk-select__field {
+    width: 100%; appearance: none; -webkit-appearance: none;
+    background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
+    border: 2px solid;
+    border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+    padding: 4px 40px 5px 14px;                /* medium */
+    font: inherit; line-height: 1.5; border-radius: 0; outline: none;
+  }
+  .hcms-shell .mirk-select__field:focus-visible {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-select__chevron {
+    pointer-events: none; position: absolute; top: 50%; right: 14px;  /* medium */
+    translate: 0 -50%; rotate: 90deg; display: inline-block; line-height: 1; font-size: 20px;
+  }
+  .hcms-shell .mirk-select--small .mirk-select__field { padding: 3px 36px 3px 12px; font-size: 14px; }
+  .hcms-shell .mirk-select--small .mirk-select__chevron { right: 12px; font-size: 18px; }
+  .hcms-shell .mirk-select--large .mirk-select__field { padding: 4px 48px 7px 17px; font-size: 18px; border-width: 3px; }
+  .hcms-shell .mirk-select--large .mirk-select__chevron { right: 16px; font-size: 24px; }
+
+  /* Round: gradient pill frame around a borderless, pill-filled select. */
+  .hcms-shell .mirk-select--round .mirk-select__frame {
+    padding: 2px; border-radius: 14px;         /* medium */
+    background-color: var(--mirk-canvas);
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
+  }
+  .hcms-shell .mirk-select--round .mirk-select__frame:has(:focus-visible) {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-select--round .mirk-select__field {
+    border: none; background-color: transparent;
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
+    border-radius: 12px; padding: 4px 40px 6px 17px;   /* medium */
+  }
+  .hcms-shell .mirk-select--round.mirk-select--small .mirk-select__frame { border-radius: 12px; }
+  .hcms-shell .mirk-select--round.mirk-select--small .mirk-select__field { border-radius: 10px; padding: 2px 36px 2px 14px; }
+  .hcms-shell .mirk-select--round.mirk-select--large .mirk-select__frame { border-radius: 16px; }
+  .hcms-shell .mirk-select--round.mirk-select--large .mirk-select__field { border-radius: 14px; padding: 7px 48px 9px 24px; }
+  .hcms-shell .mirk-select--round.mirk-select--large .mirk-select__chevron { right: 16px; font-size: 24px; }
+
+  /* ============================ CHECKBOX ============================ */
+  .hcms-shell .mirk-checkbox { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
+  .hcms-shell .mirk-checkbox__box {
+    position: relative; flex-shrink: 0; width: 22px; height: 22px;
+    display: flex; align-items: center; justify-content: center; border-radius: 0;
+    background: var(--mirk-bevel-bg);
+    border: 2px solid;
+    border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+  }
+  .hcms-shell .mirk-checkbox__mark {
+    opacity: 0; display: block; width: 6px; height: 12px;
+    border-right: 2.5px solid var(--mirk-mark-fg); border-bottom: 2.5px solid var(--mirk-mark-fg);
+    rotate: 45deg; translate: 0.5px -1.5px;
+  }
+  .hcms-shell .mirk-checkbox__label { font-size: 18px; line-height: 1.5; }
+
+  .hcms-shell .mirk-checkbox:has(:checked) .mirk-checkbox__box { border-color: var(--mirk-input-border); }
+  .hcms-shell .mirk-checkbox:has(:checked) .mirk-checkbox__mark { opacity: 1; }
+  .hcms-shell .mirk-checkbox:has(:focus-visible) .mirk-checkbox__box {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+
+  .hcms-shell .mirk-checkbox--small { gap: 0.5rem; }
+  .hcms-shell .mirk-checkbox--small .mirk-checkbox__box { width: 18px; height: 18px; }
+  .hcms-shell .mirk-checkbox--small .mirk-checkbox__mark {
+    width: 5px; height: 10px;
+    border-right-width: 2px; border-bottom-width: 2px; translate: 0.5px -1px;
+  }
+  .hcms-shell .mirk-checkbox--small .mirk-checkbox__label { font-size: 14px; }
+
+  /* ============================ RADIO ============================ */
+  .hcms-shell .mirk-radio { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
+  .hcms-shell .mirk-radio__ring {
+    position: relative; flex-shrink: 0; width: 25px; height: 25px; border-radius: 9999px;
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
+  }
+  .hcms-shell .mirk-radio__fill {
+    display: block; position: absolute; inset: 2px; border-radius: 9999px;
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
+  }
+  .hcms-shell .mirk-radio__dot {
+    display: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
+    width: 9px; height: 9px; border-radius: 9999px; background: var(--mirk-mark-fg);
+  }
+  .hcms-shell .mirk-radio__label { font-size: 18px; line-height: 1.5; }
+
+  .hcms-shell .mirk-radio:has(:checked) .mirk-radio__ring {
+    background-image: none; background-color: var(--mirk-bevel-bg);
+    border: 2px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-radio:has(:checked) .mirk-radio__fill { display: none; }
+  .hcms-shell .mirk-radio:has(:checked) .mirk-radio__dot { display: block; }
+  .hcms-shell .mirk-radio:has(:focus-visible) .mirk-radio__ring {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+
+  .hcms-shell .mirk-radio--small { gap: 0.5rem; }
+  .hcms-shell .mirk-radio--small .mirk-radio__ring { width: 20px; height: 20px; }
+  .hcms-shell .mirk-radio--small .mirk-radio__dot { width: 7px; height: 7px; }
+  .hcms-shell .mirk-radio--small .mirk-radio__label { font-size: 14px; }
+
+  /* ============================ TOGGLE ============================ */
+  .hcms-shell .mirk-toggle { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; }
+  .hcms-shell .mirk-toggle__track {
+    position: relative; flex-shrink: 0; width: 49px; height: 27px; border-radius: 0;
+    background: var(--mirk-canvas);            /* own recessed channel, like the slider track — never the host page (0033) */
+    border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-toggle__thumb {
+    position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
+    background-color: var(--mirk-toggle-bg);
+    border: 2px solid;
+    border-color: var(--mirk-toggle-hi) var(--mirk-toggle-lo) var(--mirk-toggle-lo) var(--mirk-toggle-hi);
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .hcms-shell .mirk-toggle__label { font-size: 18px; line-height: 1.5; }
+
+  .hcms-shell .mirk-toggle:has(:checked) .mirk-toggle__thumb { translate: 22px; }
+  .hcms-shell .mirk-toggle:has(:focus-visible) .mirk-toggle__track {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+
+  .hcms-shell .mirk-toggle--round .mirk-toggle__track { width: 50px; height: 29px; border-radius: 9999px; }
+  .hcms-shell .mirk-toggle--round .mirk-toggle__thumb {
+    width: 21px; height: 21px; border: none; border-radius: 9999px;
+    background-color: transparent;
+    background-image: linear-gradient(to top in oklab, var(--mirk-toggle-lo), var(--mirk-toggle-hi));
+  }
+  .hcms-shell .mirk-toggle--round .mirk-toggle__thumb::after {
+    content: ""; position: absolute; inset: 2px; border-radius: 9999px; background: var(--mirk-toggle-bg);
+  }
+  .hcms-shell .mirk-toggle--round:has(:checked) .mirk-toggle__thumb { translate: 21px; }
+
+  .hcms-shell .mirk-toggle--small { gap: 0.5rem; }
+  .hcms-shell .mirk-toggle--small .mirk-toggle__track { width: 42px; height: 23px; }
+  .hcms-shell .mirk-toggle--small .mirk-toggle__thumb { top: 2px; left: 2px; width: 17px; height: 17px; }
+  .hcms-shell .mirk-toggle--small:has(:checked) .mirk-toggle__thumb { translate: 19px; }
+  .hcms-shell .mirk-toggle--small .mirk-toggle__label { font-size: 14px; }
+  .hcms-shell .mirk-toggle--round.mirk-toggle--small .mirk-toggle__track { width: 43px; height: 25px; }
+  .hcms-shell .mirk-toggle--round.mirk-toggle--small .mirk-toggle__thumb { width: 19px; height: 19px; }
+  .hcms-shell .mirk-toggle--round.mirk-toggle--small:has(:checked) .mirk-toggle__thumb { translate: 18px; }
+
+  /* ============================ SLIDER ============================ */
+  .hcms-shell .mirk-slider { position: relative; height: 32px; width: 100%; --mirk-value: 0%; }
+  .hcms-shell .mirk-slider__input {
+    position: absolute; inset: 0; width: 100%; height: 100%;
+    opacity: 0; cursor: pointer; z-index: 10;
+  }
+  .hcms-shell .mirk-slider__track {
+    position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 12px;
+    background: var(--mirk-canvas); border: 1px solid var(--mirk-input-border); overflow: hidden;
+  }
+  .hcms-shell .mirk-slider__fill { height: 100%; width: var(--mirk-value); background: var(--mirk-slider-fill); }
+  .hcms-shell .mirk-slider__nub {
+    position: absolute; top: 50%; left: var(--mirk-value); translate: -50% -50%;
+    width: 21px; height: 21px; pointer-events: none;
+    background-color: var(--mirk-slider-nub-bg);
+    border: 2px solid;
+    border-color: var(--mirk-slider-nub-hi) var(--mirk-slider-nub-lo) var(--mirk-slider-nub-lo) var(--mirk-slider-nub-hi);
+  }
+  .hcms-shell .mirk-slider__input:focus-visible ~ .mirk-slider__nub {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+
+  .hcms-shell .mirk-slider--round .mirk-slider__track { height: 10px; border-radius: 9999px; }
+  .hcms-shell .mirk-slider--round .mirk-slider__nub {
+    width: 24px; height: 24px; border: none; border-radius: 9999px;
+    background-color: transparent;
+    background-image: linear-gradient(to top in oklab, var(--mirk-slider-nub-lo), var(--mirk-slider-nub-hi));
+  }
+  .hcms-shell .mirk-slider--round .mirk-slider__nub::after {
+    content: ""; position: absolute; inset: 2px; border-radius: 9999px; background: var(--mirk-slider-nub-bg);
+  }
+
+  .hcms-shell .mirk-slider--small { height: 24px; }
+  .hcms-shell .mirk-slider--small .mirk-slider__track { height: 8px; }
+  .hcms-shell .mirk-slider--small .mirk-slider__nub { width: 16px; height: 16px; }
+  .hcms-shell .mirk-slider--round.mirk-slider--small .mirk-slider__track { height: 7px; }
+  .hcms-shell .mirk-slider--round.mirk-slider--small .mirk-slider__nub { width: 18px; height: 18px; }
+
+  /* ============================ DATE ============================ */
+  .hcms-shell .mirk-date { position: relative; }
+  .hcms-shell .mirk-date__field {
+    width: 100%; background: var(--mirk-bevel-bg); color: var(--mirk-bevel-fg);
+    border: 1px solid var(--mirk-input-border);
+    padding: 6px 44px 9px 17px; font: inherit; font-size: 18px; line-height: 1.5;
+    border-radius: 0; outline: none;
+  }
+  .hcms-shell .mirk-date__field:focus-visible {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-date__field::-webkit-calendar-picker-indicator {
+    opacity: 0; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; margin: 0; cursor: pointer;
+  }
+  .hcms-shell .mirk-date__field::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
+  .hcms-shell .mirk-date__field::-webkit-clear-button { -webkit-appearance: none; appearance: none; }
+  .hcms-shell .mirk-date__icon {
+    pointer-events: none; position: absolute; right: 16px; top: 50%; translate: 0 -50%;
+  }
+  .hcms-shell .mirk-date--rounded .mirk-date__field { border-radius: var(--mirk-radius); }
+
+  .hcms-shell .mirk-date--small .mirk-date__field { padding: 4px 36px 4px 12px; font-size: 14px; }
+  .hcms-shell .mirk-date--small .mirk-date__field::-webkit-calendar-picker-indicator { width: 36px; }
+  .hcms-shell .mirk-date--small .mirk-date__icon { right: 12px; }
+
+  /* The native file/image inputs are visually hidden; their styled label drives
+     them, and the focus ring rides :has(:focus-visible) on button or container. */
+  .hcms-shell .mirk-file__input, .hcms-shell .mirk-image__input {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden;
+    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
+  }
+
+  /* ============================ FILE ============================ */
+  .hcms-shell .mirk-file { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
+  .hcms-shell .mirk-file__name {
+    color: var(--mirk-placeholder-color); font-size: 18px; line-height: 1.5;
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .hcms-shell .mirk-file__name[data-filled] { color: var(--mirk-bevel-fg); }
+
+  /* Compact: a shared bordered container holds a smaller button + the name. */
+  .hcms-shell .mirk-file--compact {
+    padding: 4px 8px; background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border); border-radius: 0;
+  }
+  .hcms-shell .mirk-file--compact:has(:focus-visible) {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  /* The upload trigger is a .mirk-button; nudge it onto the container's left
+     border so the bevel sits flush (covers compact and round-compact). */
+  .hcms-shell .mirk-file--compact .mirk-button { margin-left: -1px; }
+  .hcms-shell .mirk-file--compact .mirk-file__name { font-size: 16px; }
+  .hcms-shell .mirk-file--compact.mirk-file--round { border-radius: 15px; }
+
+  /* Filled: the name slot becomes a link to the chosen file, beside a circular ×
+     to clear it: a 1px ring over a bevel fill that turns destructive on hover.
+     Empty keeps the placeholder span. */
+  .hcms-shell a.mirk-file__name { text-decoration: underline; text-underline-offset: 2px; }
+  .hcms-shell .mirk-file__remove {
+    appearance: none; -webkit-appearance: none; flex-shrink: 0;
+    width: 18px; height: 18px; border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    margin: 0; padding: 0; cursor: pointer; line-height: 0;
+    color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-file__remove svg { display: block; width: 66%; height: 66%; }
+  .hcms-shell .mirk-file__remove:hover { border-color: var(--mirk-destructive); color: var(--mirk-destructive); }
+
+  /* Small: tighter name + gap + remove ×; pair the trigger with mirk-button--small.
+     Composes with --compact (densest) and --round. */
+  .hcms-shell .mirk-file--small { gap: 0.5rem; }
+  .hcms-shell .mirk-file--small .mirk-file__name { font-size: 14px; }
+  .hcms-shell .mirk-file--small .mirk-file__remove { width: 16px; height: 16px; }
+  .hcms-shell .mirk-file--small.mirk-file--compact { padding: 3px 8px; }
+  .hcms-shell .mirk-file--small.mirk-file--compact .mirk-file__name { font-size: 13px; }
+
+  /* ============================ IMAGE ============================ */
+  .hcms-shell .mirk-image { display: flex; flex-direction: column; gap: 0.5rem; }
+  .hcms-shell .mirk-image__frame {
+    position: relative; width: 120px; height: 120px; overflow: hidden; border-radius: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
+    color: var(--mirk-placeholder-color); font-size: 14px; line-height: 1.5;
+  }
+  .hcms-shell .mirk-image__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .hcms-shell .mirk-image--rounded .mirk-image__frame { border-radius: var(--mirk-radius); }
+  /* The upload trigger is a .mirk-button; keep it hugging its label instead of
+     stretching to fill this column-flex container. */
+  .hcms-shell .mirk-image .mirk-button { width: fit-content; }
+
+  /* Compact: a focused 56px thumbnail upload. Empty shows a small upload button;
+     once an image is chosen the button hides and a thumbnail + corner × takes its
+     place. The frame clips the image (overflow hidden) while the thumb wrapper
+     stays visible, so the × can sit just outside the corner without being cut. */
+  .hcms-shell .mirk-image--compact { flex-direction: row; align-items: center; gap: 0; }
+  .hcms-shell .mirk-image__thumb { position: relative; display: inline-block; width: fit-content; margin: 0; line-height: 0; }
+  .hcms-shell .mirk-image--compact .mirk-image__frame {
+    width: 56px; height: 56px; overflow: hidden; border-radius: 0;
+    border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-image--compact.mirk-image--rounded .mirk-image__frame { border-radius: var(--mirk-radius); }
+  .hcms-shell .mirk-image--compact .mirk-image__preview {
+    position: static; inset: auto; width: 100%; height: 100%; display: block; object-fit: cover;
+  }
+  .hcms-shell .mirk-image__remove {
+    position: absolute; top: -7px; right: -7px;
+    width: 18px; height: 18px; border-radius: 50%; padding: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    appearance: none; -webkit-appearance: none; cursor: pointer; line-height: 0;
+    color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-image__remove svg { display: block; width: 10px; height: 10px; }
+  .hcms-shell .mirk-image__remove:hover { color: var(--mirk-destructive); border-color: var(--mirk-destructive); }
+
+  /* ============================ TAGS ============================ */
+  .hcms-shell .mirk-tags {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
+    border-radius: 0; cursor: text;
+  }
+  .hcms-shell .mirk-tags:has(:focus-visible) {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-tags__chip {
+    display: inline-flex; align-items: center; gap: 0.5rem;
+    padding: 2px 8px 2px 12px; font-size: 14px; line-height: 1.5;
+    color: var(--mirk-bevel-fg); background: var(--mirk-bevel-bg);
+    border: 2px solid;
+    border-color: var(--mirk-bevel-tl) var(--mirk-bevel-br) var(--mirk-bevel-br) var(--mirk-bevel-tl);
+  }
+  .hcms-shell .mirk-tags__remove {
+    appearance: none; -webkit-appearance: none;
+    margin: 0; padding: 0; border: 0; background: none; color: inherit;
+    cursor: pointer; font-size: 14px; line-height: 1;
+  }
+  .hcms-shell .mirk-tags__remove:hover { color: var(--mirk-destructive); }
+  .hcms-shell .mirk-tags__input {
+    appearance: none; -webkit-appearance: none;
+    border: 0; padding: 0;
+    flex: 1; min-width: 120px; background: transparent; color: var(--mirk-bevel-fg);
+    outline: none; font-size: 18px; line-height: 1.5;
+  }
+  .hcms-shell .mirk-tags__input::placeholder { color: var(--mirk-placeholder-color); }
+
+  .hcms-shell .mirk-tags--round { border-radius: 15px; }
+  .hcms-shell .mirk-tags--round .mirk-tags__chip {
+    padding: 2px; border: none; border-radius: 12px;
+    background-color: transparent;
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-br), var(--mirk-bevel-tl));
+  }
+  .hcms-shell .mirk-tags__chip-inner {
+    display: inline-flex; align-items: center; gap: 0.5rem;
+    padding: 1px 8px 1px 12px; border-radius: 10px;
+    color: var(--mirk-bevel-fg); background-color: var(--mirk-bevel-bg);
+    background-image: linear-gradient(to top in oklab, var(--mirk-bevel-bg), var(--mirk-pill-inner-top));
+  }
+
+  .hcms-shell .mirk-tags--small { gap: 0.375rem; padding: 0.375rem; }
+  .hcms-shell .mirk-tags--small .mirk-tags__chip { padding: 1px 6px 1px 10px; font-size: 12px; }
+  .hcms-shell .mirk-tags--small .mirk-tags__remove { font-size: 12px; }
+  .hcms-shell .mirk-tags--small .mirk-tags__input { font-size: 14px; min-width: 90px; }
+  .hcms-shell .mirk-tags--small.mirk-tags--round { border-radius: 12px; }
+  .hcms-shell .mirk-tags--small.mirk-tags--round .mirk-tags__chip-inner { padding: 1px 6px 1px 10px; }
+
+  /* ============================ SORTABLE ============================ */
+  .hcms-shell .mirk-sortable { display: flex; flex-direction: column; gap: 0.5rem; }
+  .hcms-shell .mirk-sortable__item {
+    display: flex; flex-direction: row; width: 100%;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-sortable__grip {
+    width: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+    cursor: grab; border-right: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-sortable__grip:active { cursor: grabbing; }
+  .hcms-shell .mirk-sortable__dots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
+  .hcms-shell .mirk-sortable__dot {
+    display: block; width: 4px; height: 4px; background: var(--mirk-sortable-dot);
+    box-shadow: 1px 0 0 0 var(--mirk-sortable-shadow), 0 1px 0 0 var(--mirk-sortable-shadow), 1px 1px 0 0 var(--mirk-sortable-shadow);
+  }
+  .hcms-shell .mirk-sortable__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+  .hcms-shell .mirk-sortable__row { padding: 8px 17px 9px; }
+  .hcms-shell .mirk-sortable__row:not(:last-child) { border-bottom: 1px solid var(--mirk-input-border); }
+  .hcms-shell .mirk-sortable__label {
+    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
+    margin-bottom: 2px; color: var(--mirk-sortable-label);
+  }
+  .hcms-shell .mirk-sortable__field {
+    width: 100%; background: transparent; color: var(--mirk-bevel-fg);
+    font-size: 18px; line-height: 1.5; outline: none;
+  }
+  .hcms-shell .mirk-sortable__field::placeholder { color: var(--mirk-sortable-placeholder); }
+  .hcms-shell .mirk-sortable__field:focus-visible {
+    outline: 1px solid var(--mirk-focus-color); outline-offset: var(--mirk-focus-offset);
+  }
+  .hcms-shell .mirk-sortable--small { gap: 0.375rem; }
+  .hcms-shell .mirk-sortable--small .mirk-sortable__grip { width: 24px; }
+  .hcms-shell .mirk-sortable--small .mirk-sortable__row { padding: 5px 13px 6px; }
+  .hcms-shell .mirk-sortable--small .mirk-sortable__label { font-size: 10px; margin-bottom: 1px; }
+  .hcms-shell .mirk-sortable--small .mirk-sortable__field { font-size: 14px; }
+
+  /* ============================ CHIP ============================ */
+  /* A collapsible recovery/notification: a round pill that expands into a RAISED
+     panel — the kit's one elevated surface (a distinct --mirk-bg face, a hairline
+     outline, and a soft drop shadow, the only shadow in the kit, reserved for this
+     raised tier). State lives in classes (--open, is-changes) so it round-trips via
+     outerHTML; mirk.js only flips them on click. Color reads from generic kit
+     tokens through 5 slim --mirk-chip-* hooks, so it matches the kit and reskins by
+     overriding a hook, not a rule. In a Hyperclay app, add `save-remove` to the
+     block so a transient prompt never persists into the saved file. */
+  .hcms-shell .mirk-chip { display: inline-flex; flex-direction: column; align-items: flex-start; }
+  .hcms-shell .mirk-chip__panel { display: none; }
+  .hcms-shell .mirk-chip--open .mirk-chip__trigger { display: none; }
+  .hcms-shell .mirk-chip--open .mirk-chip__panel { display: flex; }
+
+  /* Collapsed chip — a round mirk-button pill (mirk-button--round in the markup),
+     the alert glyph seated in the label, so it reads as a distinct affordance, not
+     a flat button. A soft, tight lift sets it above the page; deeper on a dark
+     canvas (same media + forced-mode pattern as the panel shadow below). */
+  .hcms-shell .mirk-chip__trigger .mirk-button__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
+  .hcms-shell .mirk-chip__trigger { box-shadow: 0 6px 14px -8px rgba(43, 36, 27, 0.5), 0 2px 5px -3px rgba(43, 36, 27, 0.32); }
+  @media (prefers-color-scheme: dark) { .hcms-shell .mirk-chip__trigger { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.5); } }
+  .hcms-shell.light .mirk-chip__trigger, .hcms-shell[data-theme="light"] .mirk-chip__trigger { box-shadow: 0 6px 14px -8px rgba(43, 36, 27, 0.5), 0 2px 5px -3px rgba(43, 36, 27, 0.32); }
+  .hcms-shell.dark .mirk-chip__trigger, .hcms-shell[data-theme="dark"] .mirk-chip__trigger { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.5); }
+  /* Drive the warning fill from CSS, not an SVG fill="var(...)" presentation
+     attribute (var() is not reliably honored there). */
+  .hcms-shell .mirk-chip__warn { fill: var(--mirk-chip-alert); }
+  .hcms-shell .mirk-chip__trigger .mirk-chip__warn { vertical-align: -2px; }
+
+  /* The panel — the raised surface: a --mirk-bg face over the page, a hairline
+     outline, a soft drop shadow. */
+  .hcms-shell .mirk-chip__panel {
+    width: 300px; max-width: calc(100vw - 44px);
+    background: var(--mirk-chip-surface); color: var(--mirk-fg);
+    border: 1px solid var(--mirk-chip-edge); border-radius: var(--mirk-radius);
+    box-shadow: 0 20px 50px -30px rgba(43, 36, 27, 0.6);
+    padding: 14px 15px 13px; flex-direction: column; gap: 12px;
+  }
+  /* The panel's larger drop (the collapsed pill above carries a tighter one); deepen
+     both on a dark canvas. Mirrors the --focus-offset pattern: a media default for
+     the OS, plus explicit forced-mode overrides. */
+  @media (prefers-color-scheme: dark) { .hcms-shell .mirk-chip__panel { box-shadow: 0 20px 52px -26px rgba(0, 0, 0, 0.78); } }
+  .hcms-shell.light .mirk-chip__panel, .hcms-shell[data-theme="light"] .mirk-chip__panel { box-shadow: 0 20px 50px -30px rgba(43, 36, 27, 0.6); }
+  .hcms-shell.dark .mirk-chip__panel, .hcms-shell[data-theme="dark"] .mirk-chip__panel { box-shadow: 0 20px 52px -26px rgba(0, 0, 0, 0.78); }
+
+  /* Head — icon, text, collapse glyph. */
+  .hcms-shell .mirk-chip__head { display: flex; gap: 10px; align-items: flex-start; }
+  .hcms-shell .mirk-chip__icon { flex-shrink: 0; line-height: 0; margin-top: 1px; }
+  .hcms-shell .mirk-chip__headtext { min-width: 0; }
+  .hcms-shell .mirk-chip__eyebrow {
+    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.2em;
+    color: var(--mirk-placeholder-color); margin-bottom: 3px;
+  }
+  .hcms-shell .mirk-chip__title { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--mirk-fg); }
+  .hcms-shell .mirk-chip__collapse {
+    margin-left: auto; flex-shrink: 0; width: 24px; height: 24px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: none; border: 0; cursor: pointer; padding: 0;
+    color: var(--mirk-placeholder-color);
+  }
+  .hcms-shell .mirk-chip__collapse:hover { color: var(--mirk-fg); }
+  .hcms-shell .mirk-chip__collapse svg { display: block; }
+
+  /* Meta line. */
+  .hcms-shell .mirk-chip__meta { font-size: 11px; letter-spacing: 0.04em; color: var(--mirk-placeholder-color); }
+  .hcms-shell .mirk-chip__changes-toggle {
+    background: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; padding: 0 0 0 4px;
+    color: var(--mirk-placeholder-color); text-decoration: underline; text-underline-offset: 2px;
+  }
+  .hcms-shell .mirk-chip__changes-toggle:hover { color: var(--mirk-fg); }
+
+  /* Before/after field table — a recessed stack, revealed by the changes toggle. */
+  .hcms-shell .mirk-chip__preview {
+    display: none; flex-direction: column; gap: 11px;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-chip-edge);
+    padding: 10px 11px;
+  }
+  .hcms-shell .mirk-chip__panel.is-changes .mirk-chip__preview { display: flex; }
+  .hcms-shell .mirk-chip__row { display: flex; flex-direction: column; gap: 2px; }
+  .hcms-shell .mirk-chip__key {
+    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
+    color: var(--mirk-placeholder-color);
+  }
+  .hcms-shell .mirk-chip__old, .hcms-shell .mirk-chip__new { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hcms-shell .mirk-chip__old { font-size: 11px; color: var(--mirk-chip-alert); text-decoration: line-through; opacity: 0.85; }
+  .hcms-shell .mirk-chip__new { font-size: 12px; color: var(--mirk-fg); }
+
+  /* Action stack — full-width buttons by weight: an embossed primary, a plain bevel
+     revert, a quiet (--quiet) dismiss. */
+  .hcms-shell .mirk-chip__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 1px; }
+  .hcms-shell .mirk-chip__actions .mirk-button { width: 100%; }
+  /* Primary action — a genuine kit bevel button whose bevel palette is derived from
+     the chip's primary fill (lighter top-left, darker bottom-right), so it embosses
+     on any color. The base .mirk-button rules then drive its border, hover, and the
+     :active flip, identical to the kit's other buttons. */
+  .hcms-shell .mirk-chip__actions .mirk-chip__action--primary {
+    --mirk-bevel-bg:       var(--mirk-chip-primary-bg);
+    --mirk-bevel-fg:       var(--mirk-chip-primary-fg);
+    --mirk-bevel-tl:       color-mix(in srgb, var(--mirk-chip-primary-bg), white 24%);
+    --mirk-bevel-br:       color-mix(in srgb, var(--mirk-chip-primary-bg), black 32%);
+    --mirk-bevel-hover-bg: color-mix(in srgb, var(--mirk-chip-primary-bg), white 10%);
+  }
+
+  /* ============================ FIELD ============================ */
+  /* Label + control + hint as one unit, so a form composes without utilities
+     (and without needing the mirk-page rhythm). Any control drops in; the gap
+     matches the page scaffold's label/hint hug. Consecutive fields space
+     themselves. */
+  .hcms-shell .mirk-field { display: flex; flex-direction: column; gap: 6px; }
+  .hcms-shell .mirk-field__label { font-size: 16px; line-height: 1.5; }
+  .hcms-shell .mirk-field + .mirk-field { margin-block-start: 18px; }
+  .hcms-shell .mirk-field--small .mirk-field__label { font-size: 14px; }
+
+  /* An alert hint inside a field stays hidden until a control in the field
+     goes :user-invalid — a zero-JS native-validation message. Show one
+     unconditionally (a server-side error) by placing it outside the field or
+     overriding display. */
+  .hcms-shell .mirk-field .mirk-hint--alert { display: none; }
+  .hcms-shell .mirk-field:has(:user-invalid) .mirk-hint--alert { display: block; }
+
+  /* ============================ INVALID ============================ */
+  /* Native constraint validation, styled. :user-invalid fires only after the
+     user interacts (unlike :invalid, which would paint required fields red on
+     load). A flat destructive border is the 0012 stateful read; the focus ring
+     stays the focus signal. Pair the message with mirk-hint--alert. */
+  .hcms-shell .mirk-input:user-invalid, .hcms-shell .mirk-textarea:user-invalid, .hcms-shell .mirk-date__field:user-invalid, .hcms-shell .mirk-select__field:user-invalid, .hcms-shell .mirk-number:has(.mirk-number__input:user-invalid) {
+    border-color: var(--mirk-destructive);
+  }
+  .hcms-shell .mirk-checkbox:has(:user-invalid) .mirk-checkbox__box, .hcms-shell .mirk-toggle:has(:user-invalid) .mirk-toggle__track {
+    border-color: var(--mirk-destructive);
+  }
+  /* The unchecked ring is a borderless gradient pill; invalid swaps it for a
+     flat destructive ring (the fill pill still seats inside). */
+  .hcms-shell .mirk-radio:has(:user-invalid) .mirk-radio__ring {
+    background-image: none;
+    border: 2px solid var(--mirk-destructive);
+  }
+
+  /* ============================ PROGRESS ============================ */
+  /* A native <progress> in the slider's clothes: the canvas channel, the
+     slider-fill value bar. --blocks segments the fill into pixel blocks.
+     Keep the -webkit and -moz rules separate — an unrecognized pseudo-element
+     invalidates the whole selector list. */
+  .hcms-shell .mirk-progress {
+    appearance: none; -webkit-appearance: none;
+    display: block; width: 100%; height: 12px;
+    border: 1px solid var(--mirk-input-border);
+    background: var(--mirk-canvas);
+  }
+  .hcms-shell .mirk-progress::-webkit-progress-bar { background: transparent; }
+  .hcms-shell .mirk-progress::-webkit-progress-value { background: var(--mirk-slider-fill); }
+  .hcms-shell .mirk-progress::-moz-progress-bar { background: var(--mirk-slider-fill); }
+  .hcms-shell .mirk-progress--small { height: 8px; }
+  .hcms-shell .mirk-progress--round { border-radius: 9999px; overflow: hidden; }
+  .hcms-shell .mirk-progress--blocks::-webkit-progress-value {
+    background: repeating-linear-gradient(to right,
+      var(--mirk-slider-fill) 0 8px, transparent 8px 11px);
+  }
+  .hcms-shell .mirk-progress--blocks::-moz-progress-bar {
+    background: repeating-linear-gradient(to right,
+      var(--mirk-slider-fill) 0 8px, transparent 8px 11px);
+  }
+
+  /* ============================ NOTE ============================ */
+  /* An informational callout. Flat on purpose: bevel means pressable in this
+     kit (0012) and a note is content, so it gets the 1px content border over
+     the recessed face, never the raised edge. The 4px left edge carries the
+     status: neutral ink by default, destructive on --alert. */
+  .hcms-shell .mirk-note {
+    display: flex; flex-direction: column; gap: 4px;
+    background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border);
+    border-left: 4px solid var(--mirk-mark-fg);
+    padding: 10px 14px 11px;
+    font-size: 14px; line-height: 1.5;
+  }
+  .hcms-shell .mirk-note__title {
+    font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
+    color: var(--mirk-mark-fg);
+  }
+  .hcms-shell .mirk-note__body { color: var(--mirk-fg); }
+  .hcms-shell .mirk-note--alert { border-left-color: var(--mirk-destructive); }
+  .hcms-shell .mirk-note--alert .mirk-note__title { color: var(--mirk-destructive); }
+  .hcms-shell .mirk-note--rounded { border-radius: var(--mirk-radius); }
+
+  /* ============================ HINT ============================ */
+  /* Small print under a field: neutral help text, or --alert validation text. */
+  .hcms-shell .mirk-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mirk-placeholder-color); }
+  .hcms-shell .mirk-hint--alert { color: var(--mirk-destructive); }
+
+  /* ============================ LIST ============================ */
+  /* Content bullets. <ul> gets a square pixel dot (the sortable dot's idiom,
+     one step larger); a nested <ul> hollows it. <ol> gets zero-padded counters
+     in the muted label ink. Styles the bare <li> by descent, like the platform. */
+  .hcms-shell .mirk-list {
+    list-style: none; margin: 0; padding: 0;
+    display: flex; flex-direction: column; gap: 6px;
+    font-size: 16px; line-height: 1.5;
+  }
+  .hcms-shell .mirk-list li { position: relative; padding-left: 22px; }
+  .hcms-shell ul.mirk-list > li::before {
+    content: ""; position: absolute; left: 2px; top: 0.55em;
+    width: 6px; height: 6px; background: var(--mirk-mark-fg);
+    box-shadow: 1px 1px 0 0 var(--mirk-sortable-shadow);
+  }
+  .hcms-shell ol.mirk-list { counter-reset: mirk-li; }
+  .hcms-shell ol.mirk-list > li { counter-increment: mirk-li; padding-left: 38px; }
+  .hcms-shell ol.mirk-list > li::before {
+    content: counter(mirk-li, decimal-leading-zero) ".";
+    position: absolute; left: 0; top: 0;
+    color: var(--mirk-sortable-label);
+  }
+
+  /* One nested level: hollow square, same stack. */
+  .hcms-shell .mirk-list ul {
+    list-style: none; margin: 6px 0 0; padding: 0;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .hcms-shell .mirk-list ul > li::before {
+    content: ""; position: absolute; left: 2px; top: 0.55em;
+    width: 6px; height: 6px; background: transparent;
+    border: 1.5px solid var(--mirk-mark-fg); box-shadow: none;
+  }
+
+  .hcms-shell .mirk-list--small { font-size: 14px; gap: 4px; }
+  .hcms-shell .mirk-list--small li { padding-left: 18px; }
+  .hcms-shell ul.mirk-list--small > li::before, .hcms-shell .mirk-list--small ul > li::before { width: 5px; height: 5px; }
+  .hcms-shell ol.mirk-list--small > li { padding-left: 32px; }
+
+  /* ============================ BADGE ============================ */
+  /* A static tag label — the display counterpart to the mirk-tags input. Flat
+     on purpose: bevel means pressable (0012), a badge is content. */
+  .hcms-shell .mirk-badge {
+    display: inline-flex; align-items: center; gap: 0.375rem;
+    padding: 1px 8px 2px; font-size: 12px; line-height: 1.5;
+    color: var(--mirk-fg); background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border);
+    white-space: nowrap; vertical-align: middle;
+  }
+  .hcms-shell .mirk-badge--accent { background: var(--mirk-accent); }
+  .hcms-shell .mirk-badge--round { border-radius: 9999px; padding: 1px 10px 2px; }
+  .hcms-shell .mirk-badge--alert { color: var(--mirk-destructive); border-color: var(--mirk-destructive); }
+
+  /* ============================ TABLE ============================ */
+  /* A flat data surface: the content face in a 1px frame, header cells in the
+     eyebrow register, hairline row dividers. Semantic <table> styled by
+     descent — no per-cell classes. The header/stripe tints ride color-mix
+     toward the ink so they stay visible in every palette (Pixel Quiet's
+     canvas and face are nearly the same value). Wrap in an overflow-x:auto
+     div when the table can outgrow its column. */
+  .hcms-shell .mirk-table {
+    width: 100%; border-collapse: collapse;
+    background: var(--mirk-bevel-bg);
+    border: 1px solid var(--mirk-input-border);
+    font-size: 14px; line-height: 1.5;
+  }
+  .hcms-shell .mirk-table th {
+    text-align: left; font-weight: 400;
+    font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
+    color: var(--mirk-placeholder-color);
+    background: color-mix(in srgb, var(--mirk-bevel-bg), var(--mirk-fg) 4%);
+    padding: 7px 14px;
+    border-bottom: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-table td {
+    padding: 8px 14px;
+    border-bottom: 1px solid var(--mirk-input-border);
+    vertical-align: top;
+  }
+  .hcms-shell .mirk-table tbody tr:last-child td { border-bottom: 0; }
+  .hcms-shell .mirk-table--striped tbody tr:nth-child(even) td {
+    background: color-mix(in srgb, var(--mirk-bevel-bg), var(--mirk-fg) 3%);
+  }
+  .hcms-shell .mirk-table--small { font-size: 13px; }
+  .hcms-shell .mirk-table--small th { padding: 5px 12px; font-size: 10px; }
+  .hcms-shell .mirk-table--small td { padding: 5px 12px; }
+
+  /* ============================ PAGE ============================ */
+  /* The quickstart shell: mirk-page on <body> (or any wrapper) gives a centered
+     column + typographic defaults, so two CDN tags and one class boot a full
+     page. Every rule rides :where() (zero specificity): any utility, component
+     class, or consumer rule beats it. Flow rhythm targets direct children only,
+     so margins never leak inside component internals. */
+  .hcms-shell .mirk-page { max-width: 640px; margin-inline: auto; padding: 48px 24px 96px; }
+  .hcms-shell .mirk-page--wide { max-width: 960px; }
+
+  /* Departure Mono ships one weight — hierarchy comes from size, never bold. */
+  .hcms-shell .mirk-page :where(h1, h2, h3, h4) { margin: 0; font-weight: 400; line-height: 1.15; }
+  .hcms-shell .mirk-page :where(h1) { font-size: 40px; }
+  .hcms-shell .mirk-page :where(h2) { font-size: 26px; }
+  .hcms-shell .mirk-page :where(h3) { font-size: 20px; }
+  .hcms-shell .mirk-page :where(h4) { font-size: 16px; }
+  .hcms-shell .mirk-page :where(p) { margin: 0; font-size: 16px; line-height: 1.6; }
+
+  .hcms-shell .mirk-page :where(a) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+  .hcms-shell .mirk-page :where(code, kbd) {
+    font-size: 0.875em; padding: 1px 4px;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-page :where(pre) {
+    margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; overflow-x: auto;
+    background: var(--mirk-bevel-bg); border: 1px solid var(--mirk-input-border);
+  }
+  .hcms-shell .mirk-page :where(pre code) { padding: 0; border: 0; background: none; font-size: inherit; }
+  .hcms-shell .mirk-page :where(hr) { border: 0; border-top: 1px solid var(--mirk-input-border); }
+
+  /* Flow rhythm — direct children only; headings open sections, eyebrows and
+     hints hug their neighbors. Equal specificity, so source order settles ties. */
+  .hcms-shell .mirk-page > :where(* + *) { margin-block-start: 14px; }
+  .hcms-shell .mirk-page > :where(h1, h2, h3, h4):where(* + *) { margin-block-start: 40px; }
+  .hcms-shell .mirk-page > :where(.mirk-eyebrow + *), .hcms-shell .mirk-page > :where(* + .mirk-hint) { margin-block-start: 6px; }
+
+  /* ============================ EYEBROW ============================ */
+  /* The kit's signature section label, as a shippable class. Block so it works
+     the same on <p>, <label>, or <div>, and flow margins always apply. */
+  .hcms-shell .mirk-eyebrow {
+    display: block; margin: 0;
+    font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
+    color: var(--mirk-placeholder-color);
+  }
+}
+
+/* Respect the machine — outside @layer components so it always wins. */
+@media (prefers-reduced-motion: reduce) {
+  .hcms-shell .mirk-button--round, .hcms-shell .mirk-toggle__thumb { transition: none; }
+  .hcms-shell .mirk-button:active .mirk-button__label { translate: none; }
+}
+@media (forced-colors: active) {
+  .hcms-shell .mirk-button, .hcms-shell .mirk-select__field, .hcms-shell .mirk-checkbox__box, .hcms-shell .mirk-toggle__track { border: 1px solid ButtonText; }
+}
+
+/* ===== pixel-quiet overrides (hypercms-owned) ===== */
+/* =====================================================================
+   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; }