/* 05-panels-dialogs.css — components rail, validation panel, code editor and
   every dialog. Owned by: agent-panels. Later numbered files override earlier
   ones, so this file only styles `hui-*` hooks plus the Arcane dialog and sheet
   surfaces it opens by id. */

/* ==========================================================================
   1. Components rail
   ========================================================================== */

/* The shell owns the rail cell (`.hui-pane.hui-rail` in 02-shell.css): its
   border, background and scrolling. This root only fills it, so the divider is
   drawn once and there is a single scroll container.

   `flex: 0 0 auto` is load-bearing: the rail cell is a flex column, so a
   shrinkable child would be clamped to the viewport and its overflow would fall
   outside the scroll box — the last rows and the bottom padding were being
   swallowed under the status bar. Sizing to content lets the rail scroll. */
.hui-rail-pane {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
}

.hui-rail-inner {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  /* The bottom pad is the scroll runway: the last row never sits flush against
     the status bar. */
  padding: var(--hui-space-2) var(--hui-space-2) var(--hui-space-5);
}

/* Heading, count and add split-button on one line. `nowrap` plus a truncating
   eyebrow keeps it one line down to ~200px of rail. */
.hui-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 28px;
}

.hui-rail-heading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hui-rail-heading .hui-eyebrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hui-accent) 14%, transparent);
  color: var(--hui-text);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.hui-rail-add {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 1px;
}

.hui-rail-add > * + * { margin-left: 1px; }

/* Arcane sizes its buttons with inline styles, so trimming them to the rail's
   rhythm needs !important. Sizing only — colour and state stay Arcane's. */
.hui-rail-add .arcane-button {
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: var(--hui-radius) !important;
  font-size: .78rem !important;
  gap: 5px !important;
}

/* The split-button's second half is the dropdown trigger: icon only. */
.hui-rail-add > .arcane-dropdown .arcane-button {
  padding: 0 4px !important;
}

.hui-rail-hint {
  overflow: hidden;
  margin: 0;
  color: var(--hui-muted);
  font-size: .7rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-rail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ~36px: two text lines (id + summary) inside 2px of padding and a hairline. */
.hui-rail-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 2px 4px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--hui-radius);
  color: var(--hui-muted);
  background: transparent;
  transition:
    background var(--hui-dur-2) var(--hui-ease-out),
    border-color var(--hui-dur-2) var(--hui-ease-out),
    color var(--hui-dur-2) var(--hui-ease-out);
}

.hui-rail-row:hover {
  border-color: var(--hui-border-soft);
  background: var(--hui-panel-soft);
  color: var(--hui-text);
}

.hui-rail-row.is-selected {
  border-color: var(--hui-border);
  color: var(--hui-text);
  background: color-mix(in srgb, var(--hui-panel-soft) 86%, var(--hui-accent) 14%);
}

/* The marker is always in the DOM and always full height; selecting scales it
   in from the middle. Growing its height instead would animate layout, and the
   row's flex centre would drift while it did. */
.hui-rail-row::before {
  position: absolute;
  inset: 6px auto 6px -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hui-accent);
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity var(--hui-dur-1) var(--hui-ease-out),
    transform var(--hui-dur-2) var(--hui-ease-spring);
  content: "";
}

.hui-rail-row.is-selected::before { opacity: 1; transform: scaleY(1); }

.hui-rail-row.is-dragging { opacity: .45; }

.hui-rail-row.is-drop-target {
  border-color: var(--hui-accent);
  /* Square the top corners so the 2px accent is a STRAIGHT full-width bar.
     An inset shadow is clipped by the border radius, so with the row's radius
     intact this bar curved down around both top corners into the banned
     crescent. Same treatment as the command palette's active row and the
     inspector's section accent; the bottom corners keep their radius. */
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  box-shadow: inset 0 2px 0 0 var(--hui-accent);
}

.hui-rail-row.is-armed {
  border-color: color-mix(in srgb, var(--hui-danger) 60%, transparent);
  background: color-mix(in srgb, var(--hui-danger) 10%, var(--hui-panel));
}

/* One line is enough while the row is asking to be deleted. */
.hui-rail-row.is-armed .hui-rail-summary { display: none; }

.hui-rail-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.hui-rail-main:focus-visible {
  border-radius: calc(var(--hui-radius) - 2px);
  outline: 2px solid var(--hui-ring);
  outline-offset: 2px;
}

/* One fixed 22px column so every id starts at the same x. The type glyph and
   the drag grip share it and cross-fade on hover — two columns do not fit. */
.hui-rail-mark {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--hui-radius) - 3px);
  background: var(--hui-panel-soft);
  color: var(--hui-muted);
  transition:
    background var(--hui-dur-2) var(--hui-ease-out),
    color var(--hui-dur-2) var(--hui-ease-out);
}

.hui-rail-glyph,
.hui-rail-grip {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--hui-dur-2) var(--hui-ease-out);
}

.hui-rail-grip {
  cursor: grab;
  opacity: 0;
}

.hui-rail-row:hover .hui-rail-glyph { opacity: 0; }
.hui-rail-row:hover .hui-rail-grip { opacity: .8; }

.hui-rail-row.is-selected .hui-rail-mark {
  background: color-mix(in srgb, var(--hui-accent) 18%, transparent);
  color: var(--hui-text);
}

.hui-rail-text {
  display: grid;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
}

.hui-rail-id {
  overflow: hidden;
  color: var(--hui-text);
  font-size: .84rem;
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-rail-summary {
  overflow: hidden;
  color: var(--hui-muted);
  font-size: .7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-rail-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--hui-warning);
}

.hui-rail-dot.is-error { background: var(--hui-danger); }

.hui-rail-tools,
.hui-rail-confirm {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

/* The arrows are hover/selection furniture: fourteen permanent chevron pairs
   are most of what made the rail read as clutter. `visibility` (not `display`)
   plus the `:focus-within` reversal keeps them keyboard reachable — tabbing to
   the row's own button reveals them before focus can reach them. */
.hui-rail-tools {
  opacity: 0;
  visibility: hidden;
  /* Slides the last few pixels in from the trailing edge, which reads as the
     tools belonging to the row rather than being stamped onto it. */
  transform: translate3d(4px, 0, 0);
  transition:
    opacity var(--hui-dur-2) var(--hui-ease-out),
    visibility var(--hui-dur-2) var(--hui-ease-out),
    transform var(--hui-dur-2) var(--hui-ease-out);
}

.hui-rail-row:hover .hui-rail-tools,
.hui-rail-row:focus-within .hui-rail-tools,
.hui-rail-row.is-selected .hui-rail-tools,
.hui-rail-row.is-drop-target .hui-rail-tools {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hui-rail-tools .arcane-button,
.hui-rail-confirm .arcane-button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: calc(var(--hui-radius) - 3px) !important;
}

/* No hover to reveal them with, and a coarse pointer needs a bigger target. */
@media (hover: none) {
  .hui-rail-tools { opacity: 1; visibility: visible; transform: none; }
  .hui-rail-tools .arcane-button,
  .hui-rail-confirm .arcane-button {
    width: 32px !important;
    height: 32px !important;
  }
  /* No drag-and-drop on touch, so the grip never replaces the type glyph. */
  .hui-rail-grip,
  .hui-rail-row:hover .hui-rail-grip { opacity: 0; }
  .hui-rail-row:hover .hui-rail-glyph { opacity: 1; }
}

.hui-rail-confirm-label {
  color: var(--hui-danger);
  font-size: .7rem;
  font-weight: 650;
  white-space: nowrap;
}

.hui-rail-empty { padding: var(--hui-space-3) var(--hui-space-1); }

.hui-two-step { display: inline-flex; align-items: center; gap: 4px; }

/* ==========================================================================
   2. Validation panel
   ========================================================================== */

[data-arcane-surface="sheet"][data-arcane-id="hui-validation-sheet"] {
  backdrop-filter: blur(6px);
}

.hui-validation {
  display: flex;
  flex-direction: column;
  gap: var(--hui-space-3);
  max-height: min(62vh, 640px);
  padding: var(--hui-space-2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hui-validation-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  overflow: hidden;
}

.hui-validation-cell {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-right: 1px solid var(--hui-border-soft);
}

.hui-validation-cell:last-child { border-right: 0; }

.hui-validation-cell-value {
  color: var(--hui-text);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  line-height: 1.1;
}

.hui-validation-cell-label {
  color: var(--hui-muted);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hui-validation-cell.is-error .hui-validation-cell-value { color: var(--hui-danger); }
.hui-validation-cell.is-warning .hui-validation-cell-value { color: var(--hui-warning); }
.hui-validation-cell.is-info .hui-validation-cell-value { color: var(--hui-info); }

.hui-validation-group { display: grid; gap: 8px; }

.hui-validation-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hui-validation-group.is-error .hui-validation-group-head,
.hui-validation-group.is-error .hui-validation-group-head .hui-eyebrow { color: var(--hui-danger); }
.hui-validation-group.is-warning .hui-validation-group-head,
.hui-validation-group.is-warning .hui-validation-group-head .hui-eyebrow { color: var(--hui-warning); }
.hui-validation-group.is-info .hui-validation-group-head,
.hui-validation-group.is-info .hui-validation-group-head .hui-eyebrow { color: var(--hui-info); }

.hui-validation-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  list-style: none;
  overflow: hidden;
}

/* The sheet is hidden with [hidden] between openings, so this entrance is
   created fresh every time the panel opens. The list is one fade rather than a
   per-row stagger on purpose: it re-renders on every keystroke in the
   inspector, and a stagger would replay while the user typed. */
.hui-validation-list {
  animation: hui-fade-in var(--hui-dur-2) var(--hui-ease-out) backwards;
}

.hui-validation-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hui-space-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--hui-border-soft);
}

.hui-validation-row:last-child { border-bottom: 0; }

.hui-validation-body { display: grid; gap: 3px; min-width: 0; }

.hui-validation-message {
  margin: 0;
  color: var(--hui-text);
  font-size: .82rem;
  line-height: 1.4;
}

.hui-validation-fix {
  margin: 0;
  color: var(--hui-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.hui-validation-path,
.hui-code-issue-path,
.hui-import-issue code {
  color: var(--hui-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  word-break: break-all;
}

/* ==========================================================================
   3. Code editor
   ========================================================================== */

.hui-code {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--hui-bg);
}

.hui-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hui-space-2);
  min-height: 43px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--hui-border-soft);
  background: var(--hui-panel-soft);
}

.hui-code-toolbar-info { display: flex; align-items: baseline; gap: 10px; }

.hui-code-stat {
  color: var(--hui-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.hui-code-toolbar-tools { display: flex; align-items: center; gap: 2px; }

.hui-code-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--hui-danger) 45%, transparent);
  background: color-mix(in srgb, var(--hui-danger) 12%, var(--hui-panel));
  color: var(--hui-danger);
  font-size: .78rem;
}

.hui-code-error-text { color: var(--hui-text); }

/* The textarea owns the horizontal scroll and never scrolls vertically, so the
   gutter beside it stays aligned line for line without any JS sync. */
.hui-code-body {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.55;
}

.hui-code-gutter {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding: 12px 10px 12px 12px;
  border-right: 1px solid var(--hui-border-soft);
  background: var(--hui-panel);
  color: color-mix(in srgb, var(--hui-muted) 75%, transparent);
  text-align: right;
  user-select: none;
  align-self: stretch;
}

.hui-code-line {
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.hui-code-area {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--hui-text);
  font: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  resize: none;
  white-space: pre;
  tab-size: 2;
}

.hui-code-area:focus,
.hui-code-area:focus-visible { outline: none; }

.hui-code-issues {
  flex: 0 0 auto;
  max-height: 28vh;
  padding: var(--hui-space-2) var(--hui-space-3);
  border-top: 1px solid var(--hui-border-soft);
  background: var(--hui-panel);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hui-code-issues-head { margin-bottom: 6px; }

.hui-code-issues-empty {
  margin: 0;
  color: var(--hui-muted);
  font-size: .78rem;
}

.hui-code-issues-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hui-code-issue {
  display: grid;
  grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--hui-border);
  font-size: .76rem;
}

.hui-code-issue.is-error { border-left-color: var(--hui-danger); }
.hui-code-issue.is-warning { border-left-color: var(--hui-warning); }
.hui-code-issue.is-info { border-left-color: var(--hui-info); }

.hui-code-issue-message { color: var(--hui-text); line-height: 1.4; }

@media (max-width: 860px) {
  .hui-code-issue { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   4. Dialog surfaces
   ========================================================================== */

/* The renderer writes these boxes with inline styles, so overriding them needs
   !important. This is the documented way to restyle an Arcane surface by id;
   nothing else in this file uses it. */

[data-arcane-surface="dialog"][data-arcane-id^="hui-"] {
  padding: clamp(10px, 3vw, 28px) !important;
  background-color: color-mix(in srgb, #000 66%, transparent) !important;
  backdrop-filter: blur(7px);
}

[data-arcane-id^="hui-"] .arcane-dialog {
  max-height: min(92vh, 980px) !important;
  border: 1px solid var(--hui-border) !important;
  border-radius: calc(var(--hui-radius) + 4px) !important;
  background-color: var(--hui-panel) !important;
  box-shadow: var(--hui-shadow-md) !important;
}

[data-arcane-id^="hui-"] .arcane-dialog-header {
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid var(--hui-border-soft);
}

[data-arcane-id^="hui-"] .arcane-dialog-body {
  padding: 0 22px !important;
  scrollbar-gutter: stable;
}

[data-arcane-id^="hui-"] .arcane-dialog-footer {
  padding: 14px 22px !important;
  border-top: 1px solid var(--hui-border-soft);
  background: color-mix(in srgb, var(--hui-panel) 94%, var(--hui-bg));
}

/* ---- Dialog entrance ----
   The framework already animates the two boxes it writes inline styles on: the
   overlay fades and the panel scales in, both on `var(--transition-slow)`. What
   it does not do is give the dialog's own content any sense of arrival, and
   those two inline animations are the only ones a stylesheet cannot reach.

   So the content is where this task's motion lives. `.hui-dialog-body` carries
   `hui-stagger`, so its sections rise in sequence behind the panel's scale;
   the header and footer bracket them. Every one of these runs fresh on each
   open, because the surface is display:none in between.

   There is no matching exit anywhere in this file, and that is a framework
   limit rather than an omission — see the note at the foot of 06-motion.css. */

[data-arcane-id^="hui-"] .arcane-dialog-header {
  animation: hui-fade-in var(--hui-dur-2) var(--hui-ease-out) backwards;
}

/* Fade, not rise: the panel clips its overflow, so a footer translated down
   would have its buttons cut off for the length of the animation. */
[data-arcane-id^="hui-"] .arcane-dialog-footer {
  animation: hui-fade-in var(--hui-dur-3) var(--hui-ease-out) backwards;
  animation-delay: var(--hui-dur-1);
}

.hui-dialog-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hui-dialog-section {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 30px);
  padding: 18px 0;
  border-bottom: 1px solid var(--hui-border-soft);
}

.hui-dialog-section:last-child { border-bottom: 0; }

.hui-dialog-section-heading { display: grid; align-content: start; gap: 4px; }

.hui-dialog-section-heading strong {
  color: var(--hui-text);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.25;
}

.hui-dialog-section-heading span {
  color: var(--hui-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.hui-dialog-section-body {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
}

.hui-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hui-dialog-note {
  margin: 0;
  color: var(--hui-muted);
  font-size: .78rem;
  line-height: 1.5;
}

/* Import sits next to a two-step destructive button, so they share a row and
   wrap together on a narrow dialog. */
.hui-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hui-dialog-filename {
  color: var(--hui-text);
  font-family: var(--font-mono);
  font-size: .76rem;
}

.hui-codeblock {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background: color-mix(in srgb, var(--hui-bg) 70%, var(--hui-panel));
  color: var(--hui-text);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.hui-codeblock.is-scroll {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hui-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  counter-reset: hui-step;
  list-style: none;
}

.hui-steps li {
  position: relative;
  padding-left: 30px;
  color: var(--hui-text);
  font-size: .82rem;
  line-height: 1.5;
  counter-increment: hui-step;
}

.hui-steps li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hui-accent) 16%, transparent);
  color: var(--hui-text);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  content: counter(hui-step);
}

/* Native range row. Deliberately not sharing `.hui-scale-range` with the canvas
   toolbar: that class lives in 03-canvas.css, which this task does not own, and
   a dialog row needs a value readout beside the track rather than under it. The
   look is matched by hand — if one moves, move the other. */
.hui-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hui-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  margin: 0;
  background: transparent;
  accent-color: var(--hui-accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hui-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hui-border) 90%, transparent);
}

.hui-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hui-border) 90%, transparent);
}

.hui-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 999px;
  background: var(--hui-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hui-accent) 40%, transparent);
  -webkit-appearance: none;
  appearance: none;
}

.hui-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--hui-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hui-accent) 40%, transparent);
}

.hui-range:focus-visible {
  outline: 2px solid var(--hui-ring);
  outline-offset: 3px;
}

/* Tabular so the number does not jitter the row width as it is dragged. */
.hui-range-value {
  flex: 0 0 auto;
  min-width: 48px;
  color: var(--hui-text);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hui-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.hui-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--hui-border-soft);
  border-radius: 999px;
  color: var(--hui-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hui-chip.is-accent {
  border-color: color-mix(in srgb, var(--hui-accent) 45%, transparent);
  background: color-mix(in srgb, var(--hui-accent) 12%, transparent);
  color: var(--hui-text);
}

/* ==========================================================================
   5. Import preview
   ========================================================================== */

.hui-import-preview { display: grid; gap: 10px; }

.hui-import-issues {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hui-import-issue {
  display: grid;
  grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--hui-border);
  color: var(--hui-text);
  font-size: .76rem;
  line-height: 1.4;
}

.hui-import-issue.is-error { border-left-color: var(--hui-danger); }
.hui-import-issue.is-warning { border-left-color: var(--hui-warning); }
.hui-import-issue.is-info { border-left-color: var(--hui-info); }

@media (max-width: 720px) {
  .hui-import-issue { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   6. Image manager
   ========================================================================== */

.hui-image-toolbar { display: grid; gap: 8px; padding: 16px 0; }

.hui-quota {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background: var(--hui-panel-soft);
}

.hui-quota.is-warning { border-color: color-mix(in srgb, var(--hui-warning) 55%, transparent); }
.hui-quota.is-critical { border-color: color-mix(in srgb, var(--hui-danger) 55%, transparent); }

.hui-quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.hui-quota-value {
  color: var(--hui-text);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.hui-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 0;
}

/* The lift, the press and the transitions that carry them come from
   `hui-lift` in 06-motion.css; only the colour states are local. */
.hui-image-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background: var(--hui-panel);
}

.hui-image-card:hover {
  border-color: var(--hui-border);
  box-shadow: var(--hui-shadow-sm);
}

.hui-image-card.is-used {
  border-color: color-mix(in srgb, var(--hui-accent) 45%, transparent);
}

.hui-image-card.is-oversized {
  border-color: color-mix(in srgb, var(--hui-warning) 55%, transparent);
}

.hui-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  border-radius: calc(var(--hui-radius) - 2px);
  overflow: hidden;
}

.hui-image-thumb {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

.hui-image-meta { display: grid; gap: 8px; min-width: 0; }

.hui-image-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.hui-image-card-tools .hui-chip { margin-right: auto; }

.hui-image-empty { padding: var(--hui-space-4) 0; }

/* A placeholder card is the image card's box with none of its affordances: no
   hover lift, no pointer, nothing that suggests it can be acted on yet. Same
   padding and border as the real thing, so the swap is not a layout shift. */
.hui-skeleton-card {
  padding: 10px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background: var(--hui-panel);
}

/* ==========================================================================
   7. Templates
   ========================================================================== */

.hui-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  padding: 16px 0;
}

.hui-option-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 13px;
  border: 1px solid var(--hui-border);
  border-radius: var(--hui-radius);
  background: var(--hui-panel);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Lift, press and transitions: `hui-lift` in 06-motion.css. */
.hui-option-card:hover,
.hui-option-card:focus-visible {
  border-color: var(--hui-ring);
  background: var(--hui-panel-soft);
  box-shadow: var(--hui-shadow-sm);
  outline: none;
}

.hui-option-card.is-selected {
  border-color: var(--hui-accent);
  background: color-mix(in srgb, var(--hui-accent) 7%, var(--hui-panel));
  box-shadow: 0 0 0 1px var(--hui-accent);
}

.hui-option-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.hui-option-card-head strong {
  color: var(--hui-text);
  font-size: .88rem;
  font-weight: 650;
}

.hui-option-card-id {
  color: var(--hui-muted);
  font-family: var(--font-mono);
  font-size: .7rem;
}

.hui-option-card-text {
  margin: 0;
  color: var(--hui-muted);
  font-size: .78rem;
  line-height: 1.45;
}

/* ==========================================================================
   8. Help
   ========================================================================== */

.hui-axis { display: grid; gap: 10px; }

.hui-axis-stage {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-height: 170px;
  padding: 12px 14px 26px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--hui-border) 40%, transparent) 1px, transparent 1px) 14px 0 / 100% 100%,
    var(--hui-panel-soft);
  background-repeat: no-repeat;
  font-family: var(--font-mono);
  font-size: .72rem;
}

.hui-axis-tick {
  position: relative;
  padding-left: 16px;
  color: var(--hui-muted);
}

.hui-axis-tick::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 999px;
  content: "";
}

.hui-axis-tick.is-menu { color: var(--hui-text); }
.hui-axis-tick.is-menu::before { background: var(--hui-accent); }
.hui-axis-tick.is-eye::before {
  border: 1px dashed var(--hui-muted);
  background: transparent;
}
.hui-axis-tick.is-feet::before { background: var(--hui-muted); }

.hui-axis-ground {
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  padding-top: 4px;
  border-top: 2px solid var(--hui-border);
  color: var(--hui-muted);
}

.hui-cheat { display: grid; gap: 6px; }

.hui-cheat-list {
  display: grid;
  grid-template-columns: minmax(160px, .38fr) minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
}

.hui-cheat-list dt { margin: 0; }

.hui-cheat-list dt code {
  color: var(--hui-text);
  font-family: var(--font-mono);
  font-size: .74rem;
  word-break: break-word;
}

.hui-cheat-list dd {
  margin: 0;
  color: var(--hui-muted);
  font-size: .78rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .hui-cheat-list { grid-template-columns: 1fr; gap: 1px 0; }
  .hui-cheat-list dd { margin-bottom: 6px; }
}

.hui-nonfeatures {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hui-nonfeatures li {
  position: relative;
  padding-left: 20px;
  color: var(--hui-muted);
  font-size: .8rem;
  line-height: 1.5;
}

.hui-nonfeatures li::before {
  position: absolute;
  top: .62em;
  left: 2px;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--hui-danger);
  content: "";
}

.hui-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.hui-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--hui-border-soft);
  border-radius: var(--hui-radius);
  background: var(--hui-panel);
  color: var(--hui-text);
  text-decoration: none;
}

/* Lift, press and transitions: `hui-lift` in 06-motion.css. */
.hui-link-card:hover,
.hui-link-card:focus-visible {
  border-color: var(--hui-accent);
  background: var(--hui-panel-soft);
  outline: none;
}

.hui-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: calc(var(--hui-radius) - 2px);
  background: color-mix(in srgb, var(--hui-accent) 12%, transparent);
  transition: transform var(--hui-dur-2) var(--hui-ease-spring);
}

/* These all open a new tab. The glyph leaning towards the label is the only
   thing on the card that says "this goes somewhere". */
.hui-link-card:hover .hui-link-icon,
.hui-link-card:focus-visible .hui-link-icon { transform: translate3d(2px, 0, 0); }

.hui-link-text { display: grid; gap: 1px; min-width: 0; }

.hui-link-text strong { font-size: .82rem; font-weight: 650; }

.hui-link-text span {
  color: var(--hui-muted);
  font-size: .72rem;
  line-height: 1.35;
}

/* ==========================================================================
   9. Narrow screens
   ========================================================================== */

@media (max-width: 700px) {
  [data-arcane-surface="dialog"][data-arcane-id^="hui-"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  [data-arcane-id^="hui-"] .arcane-dialog {
    max-height: 96vh !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 14px 14px 0 0 !important;
  }

  [data-arcane-id^="hui-"] .arcane-dialog-footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .hui-dialog-section { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
  .hui-validation-strip { grid-template-columns: 1fr; }
  .hui-validation-cell { border-right: 0; border-bottom: 1px solid var(--hui-border-soft); }
  .hui-validation-cell:last-child { border-bottom: 0; }
  .hui-validation-row { flex-direction: column; align-items: stretch; }
}

/* No prefers-reduced-motion block here any more: every transition and animation
   in this file resolves its duration from --hui-dur-*, and 06-motion.css zeroes
   those in one place. Anything added here must do the same. */

/* Validation sheet: Dart-owned close control (Arcane's chrome X is JS-only). */
.hui-validation-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--hui-space-2) 0 0;
}