/* DVS application feature/layout styles. Visual primitives live in design-system.css. */
:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --rail-width: clamp(300px, 20.75vw, 344px);
  --order-width: clamp(438px, 29.5vw, 486px);
  --topbar-height: 72px;
  --dock-height: 82px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --display-xl: clamp(62px, 5.15vw, 84px);
  --display-lg: clamp(47px, 3.75vw, 64px);
  --heading-lg: clamp(30px, 2.4vw, 42px);
  --text-lg: 18px;
  --text: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --motion-instant: 70ms;
  --motion-fast: 100ms;
  --motion-ui: 160ms;
  --motion-content: 220ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--ui-canvas); scrollbar-gutter: stable; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-size: var(--text);
  line-height: 1.34;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea, summary { font: inherit; color: inherit; }
button, input, select, textarea, .modal, .badge, .toast { border-radius: 0; }
button { min-width: var(--ui-control-h, 44px); min-height: var(--ui-control-h, 44px); padding: 0; border: 0; background: transparent; cursor: pointer; }
button:disabled { cursor: not-allowed; color: var(--ui-disabled); opacity: 1; }
input, select, textarea {
  width: 100%;
  min-height: var(--ui-control-h, 44px);
  padding: 0 var(--ui-pad-x, 14px);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  outline: 0;
}
textarea { resize: vertical; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}
[hidden] { display: none !important; }
svg { display: block; }
.ui-icon { width: 21px; height: 21px; flex: 0 0 auto; }
.ui-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: square; stroke-linejoin: miter; }
.surface-card { border-radius: 0; box-shadow: none; }

/* Application frame */
.app-shell { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
.app-grid {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(560px, 1fr) var(--order-width);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.app-topbar { display: none; }

/* Mobile application bar, also fully styled for future tablet use */
.app-brand { min-width: 0; }
.app-brand__mark { text-transform: lowercase; }
.app-brand strong, .app-brand small { display: block; }
.mode-tabs { display: flex; }
.mode-tabs button, .topbar-button, .topbar-order {
  min-height: 64px;
  border-left: 1px solid var(--ui-border);
  text-transform: lowercase;
}
.mode-tabs button span, .mode-tabs button b, .topbar-button span, .topbar-button b { display: block; }
.mode-tabs button b, .topbar-button b, .topbar-order b { font-weight: 400; }
.topbar-order { position: relative; }
.topbar-storage-dot { position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; background: var(--ui-disabled); }
.topbar-storage-dot[data-state="saving"] { background: var(--ui-muted); animation: storage-pulse 900ms ease-in-out infinite alternate; }
.topbar-storage-dot[data-state="saved"] { background: var(--ui-success); }
.topbar-storage-dot[data-state="error"] { background: var(--ui-danger); }
@keyframes storage-pulse { to { opacity: .28; } }
.storage-state { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: var(--text-xs); }
.storage-state i { width: 7px; height: 7px; background: var(--ui-success); }

/* Desktop database constructor */
.database-constructor { grid-column: 1 / 3; min-width: 0; min-height: 0; overflow: hidden; background: var(--ui-surface); }
.database-layout { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; }






.database-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--ui-surface); }
.database-constructor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: clamp(224px, 24vh, 276px);
  padding: clamp(38px, 4.7vh, 58px) clamp(34px, 4.2vw, 58px) 28px;
}




.database-constructor__header-actions { display: none; }


.database-flow-viewport { min-height: 0; overflow: hidden; }
.database-flow-workspace { width: 100%; height: 100%; min-height: 0; outline: 0; }




.database-flow-search {
  grid-row: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 60px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.database-flow-search > span { position: relative; display: grid; place-items: center; overflow: hidden; color: transparent; font-size: 0; }
.database-flow-search > span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--ui-text); border-radius: 50%; }
.database-flow-search > span::after { content: ""; position: absolute; width: 7px; border-top: 1.5px solid var(--ui-text); transform: translate(8px, 8px) rotate(45deg); }
.database-flow-search input { min-width: 0; min-height: 58px; padding: 0 17px 0 0; border: 0; background: transparent; font-size: var(--text); }
.database-flow-search input::placeholder { color: var(--ui-muted); text-transform: lowercase; }






.database-category-browser { display: grid; gap: 0; min-width: 0; margin-bottom: 12px; }










.database-taxonomy-empty { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--ui-muted); font-size: var(--text-sm); }
.database-flow-list {
  grid-row: 3;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-border);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
.database-flow-list--code { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.database-flow-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  text-align: left;
}
.database-flow-option:hover { box-shadow: inset 5px 0 0 var(--ui-text); }
.database-flow-option.is-active { background: var(--ui-text); color: var(--ui-surface); box-shadow: none; }
.database-flow-option__copy { display: block; min-width: 0; }
.database-flow-option__copy strong { display: block; overflow-wrap: anywhere; font-size: 19px; font-weight: 500; line-height: 1.16; letter-spacing: -.025em; }
.database-flow-option__copy small { display: block; margin-top: 6px; color: var(--ui-muted); font-size: 13px; line-height: 1.22; }
.database-flow-option.is-active .database-flow-option__copy small { color: currentColor; opacity: .72; }
.database-flow-option__arrow { justify-self: end; color: currentColor; font-size: 0; }
.database-flow-option__arrow::before { content: ""; display: block; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.database-flow-option.is-featured { grid-column: 1 / -1; min-height: 76px; border-bottom: 1px solid var(--ui-border); }
.database-flow-option.is-featured .database-flow-option__copy { display: grid; grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.database-flow-option.is-featured .database-flow-option__copy strong { font-size: 31px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.database-flow-option.is-featured .database-flow-option__copy small { margin: 0; color: currentColor; font-size: 15px; }
.database-flow-option.is-compact { min-height: 76px; border-right: 1px solid var(--ui-border); }
.database-flow-option.is-compact:nth-of-type(3n) { border-right: 0; }
.database-flow-option.is-compact .database-flow-option__copy strong { font-size: 20px; font-weight: 400; }
.database-flow-option.is-extra-wide .database-flow-option__copy strong { font-size: 17px; }
.database-flow-option.is-optional .database-flow-option__copy small { font-style: italic; }

.database-flow-empty, .database-column__empty, .database-request-empty{
  min-height: 124px;
  padding: 28px 20px;
  color: var(--ui-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-transform: lowercase;
}



.database-flow-summary { grid-row: 2; min-height: 0; padding: 26px; border: 1px solid var(--ui-border); overflow-y: auto; }
.database-flow-summary > span { display: block; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.database-flow-summary > strong { display: block; margin-top: 14px; font-size: clamp(28px, 2.25vw, 38px); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.database-flow-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); }
.database-flow-summary dl div { min-height: 96px; padding: 15px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.database-flow-summary dt { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.database-flow-summary dd { margin: 9px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.database-flow-field { padding: 15px; border-left: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.database-flow-field span { display: block; margin-bottom: 8px; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.database-flow-field input, .database-flow-field textarea { min-height: 44px; padding: 0; border: 0; background: transparent; }
.database-flow-add { grid-row: 4; min-height: 66px; background: var(--ui-text); color: var(--ui-surface); text-transform: lowercase; }
.database-flow-add:not(:disabled):hover { box-shadow: inset 0 -4px 0 var(--ui-surface); }


/* Active order */
.order-panel {
  grid-column: 3;
  display: grid;
  grid-template-rows: var(--topbar-height) clamp(170px, 18vh, 188px) minmax(0, 1fr) var(--dock-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.order-panel__topbar { border-bottom: 1px solid var(--ui-border); }
.order-panel__topbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: 100%; }
.order-topbar-action, .order-panel__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 0;
  min-height: calc(var(--topbar-height) - 1px);
  padding: 0 18px;
  border-right: 1px solid var(--ui-border);
  text-transform: lowercase;
}
.order-panel__settings { border-right: 0; }
.order-topbar-action b, .order-panel__settings b { font-weight: 400; }
.order-topbar-action:not(:disabled):hover, .order-panel__settings:not(:disabled):hover { background: var(--ui-text); color: var(--ui-surface); }
.order-panel__close { display: none; }
.order-panel__header { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 30px 30px 23px; }
.order-panel__kicker { display: block; margin-bottom: 10px; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.order-panel__header h2 { margin: 0; font-size: var(--display-lg); font-weight: 400; line-height: .86; letter-spacing: -.073em; text-transform: lowercase; }
.order-panel__version { display: none; }
.order-count { display: block; color: var(--ui-muted); font-size: var(--text-sm); text-transform: lowercase; }
.order-list { min-height: 0; padding: 0 30px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }
.order-empty { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100%; padding: 26px 0; border-top: 1px solid var(--ui-border); text-transform: lowercase; }
.order-empty strong { font-size: 21px; font-weight: 400; }
.order-empty span { max-width: 320px; margin-top: 15px; color: var(--ui-text-soft); font-size: var(--text-sm); line-height: 1.45; }
.order-empty small { max-width: 330px; margin-top: 24px; color: var(--ui-muted); font-size: var(--text-xs); line-height: 1.5; }
.order-line {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: start;
  min-height: 108px;
  padding: 19px 0 18px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  touch-action: pan-y;
}
.order-line:first-child { border-top: 1px solid var(--ui-border); }
.order-line:hover { box-shadow: inset 4px 0 0 var(--ui-text); }
.order-line__index { padding-top: 1px; color: var(--ui-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.order-line__main { min-width: 0; }
.order-line__title-row, .order-line__title { display: block; min-width: 0; }
.order-line__code { display: block; font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.order-line__description { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--ui-text); font-size: 14px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.order-line__color { display: block; margin-top: 6px; color: var(--ui-muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.25; }
.order-line__meta { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 9px; }
.order-tag { color: var(--ui-muted); font-size: var(--text-xs); line-height: 1.2; }
.order-tag--delivery { color: var(--ui-text-soft); }
.order-tag--composite { font-weight: 500; }
.order-line__side { display: flex; justify-content: flex-end; min-width: 0; }
.order-line__quantity { font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-line.is-selected { margin-inline: -30px; padding-inline: 30px; background: var(--ui-text); color: var(--ui-surface); border-bottom-color: var(--ui-surface); box-shadow: none; }
.order-line.is-selected .order-line__index, .order-line.is-selected .order-line__description, .order-line.is-selected .order-line__color, .order-line.is-selected .order-tag { color: currentColor; }
.order-line.is-holding { outline: 1px solid var(--ui-border); outline-offset: -1px; }
.order-line.is-holding::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--ui-focus); transform: scaleX(0); transform-origin: left; animation: order-hold-progress 520ms linear forwards; }
@keyframes order-hold-progress { to { transform: scaleX(1); } }
.order-line.is-entering { animation: order-entry var(--motion-content) var(--ease-enter); }
@keyframes order-entry { from { background: var(--ui-surface-raised); box-shadow: inset 7px 0 0 var(--ui-success); } to { background: var(--ui-surface); box-shadow: inset 0 0 0 transparent; } }


.selection-area.is-confirming, .order-panel.is-confirming, .quick-node.is-confirming { box-shadow: inset 0 0 0 2px var(--ui-focus); }
.order-selection-dock { position: relative; min-height: var(--dock-height); border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.selection-dock-status { position: absolute; right: 12px; bottom: calc(100% + 10px); z-index: 2; display: none; padding: 7px 10px; border: 1px solid var(--ui-border); background: var(--ui-text); color: var(--ui-surface); font-size: var(--text-xs); text-transform: lowercase; }
.order-selection-dock:has(.selection-dock-button:not(:disabled)) .selection-dock-status { display: block; }
.selection-dock-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
.selection-dock-button { min-width: 0; min-height: calc(var(--dock-height) - 1px); padding: 0 10px; border-right: 1px solid var(--ui-border); text-transform: lowercase; }
.selection-dock-button:last-child { border-right: 0; }
.selection-dock-button b { font-weight: 400; }
.selection-dock-button:not(:disabled):hover { background: var(--ui-text); color: var(--ui-surface); }
.selection-dock-button--cancel:not(:disabled):hover { background: var(--ui-danger); }




/* Radial quick selection */
.interaction-column {
  grid-column: 1 / 3;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--ui-surface);
}
.selection-area {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-surface);
}
.workspace-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  padding: 28px 36px 24px;
  pointer-events: none;
}
.workspace-heading { min-width: 0; max-width: min(760px, 70%); }
.quick-navigation {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  pointer-events: auto;
}
.quick-home {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin-right: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.quick-home:hover,
.quick-home:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.quick-home .ui-icon { width: 16px; height: 16px; }
.quick-breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-soft);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
}
.quick-breadcrumb__button,
.quick-breadcrumb__current {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-breadcrumb__button { min-width: 44px; text-decoration: underline; text-underline-offset: 3px; }
.quick-breadcrumb__button:hover,
.quick-breadcrumb__button:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.quick-breadcrumb__current { display: flex; align-items: center; color: var(--ui-text); }
.quick-breadcrumb__separator { flex: 0 0 auto; padding: 0 2px; color: var(--ui-muted); }
.workspace-heading h1 {
  margin: 7px 0 0;
  font-size: clamp(54px, 5.25vw, 82px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: lowercase;
}
.selection-active-preview {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}
.selection-active-preview strong { max-width: 520px; font-size: var(--text-sm); font-weight: 400; }
.selection-svg,
.node-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.selection-svg { z-index: 1; pointer-events: none; }
.quick-node-layer { z-index: 2; }
.quick-node {
  position: absolute;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 9px 11px;
  overflow: visible;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: left;
  transform: translate(-50%, -50%);
}
.quick-node > span { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); font-weight: 500; line-height: 1.16; }
.quick-node--code > span { font-size: 19px; font-weight: 400; white-space: nowrap; }
.quick-node--ancestor { z-index: 3; background: var(--ui-text); color: var(--ui-surface); }
.quick-node--candidate:hover,
.quick-node--candidate:focus-visible,
.quick-node--candidate.is-hovered,
.quick-node--candidate.is-hotkey-exact { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.quick-node--candidate.is-hotkey-prefix:not(.is-hotkey-exact) { box-shadow: inset 0 0 0 2px var(--ui-text); }
.quick-hotkey-badge {
  position: absolute;
  left: -18px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ui-surface);
  border-radius: 50%;
  background: var(--ui-text);
  color: var(--ui-surface);
  font: 500 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  pointer-events: none;
}
.quick-node--ancestor:hover,
.quick-node--ancestor:focus-visible { box-shadow: inset 0 -4px 0 var(--ui-surface); outline: 0; }
.quick-tree__path { fill: none; stroke: var(--ui-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.quick-tree__path--confirmed { stroke: var(--ui-text); stroke-width: 1.5; }
.quick-tree__path.is-hovered { stroke: var(--ui-text); stroke-width: 2; }
.quick-tree__joint { fill: var(--ui-surface); stroke: var(--ui-border); stroke-width: 1; }
.quick-tree__joint.is-hovered { fill: var(--ui-text); stroke: var(--ui-text); }
.quick-review {
  position: absolute;
  z-index: 10;
  top: 170px;
  right: 40px;
  width: min(420px, calc(100% - 80px));
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.quick-review[hidden] { display: none; }
.quick-onboarding { position: absolute; z-index: 20; left: 22px; bottom: 22px; width: min(390px, calc(100% - 44px)); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.quick-onboarding > header { display: grid; grid-template-columns: 1fr 48px; min-height: 48px; border-bottom: 1px solid var(--ui-border); }
.quick-onboarding > header span { align-self: center; padding: 0 14px; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.quick-onboarding > header button { border-left: 1px solid var(--ui-border); font-size: 22px; }
.quick-onboarding ol { margin: 0; padding: 0; list-style: none; }
.quick-onboarding li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--ui-border); font-size: var(--text-sm); }
.quick-onboarding li b { color: var(--ui-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.quick-onboarding > .primary-button { width: 100%; min-height: 54px; }

.quick-review > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding-left: 15px;
  border-bottom: 1px solid var(--ui-border);
}
.quick-review > header span { font-size: var(--text-xs); text-transform: lowercase; }
.quick-review > header button { width: 48px; min-height: 47px; border-left: 1px solid var(--ui-border); font-size: 22px; }
.quick-review > header button:hover { background: var(--ui-text); color: var(--ui-surface); }
.quick-review__identity { padding: 18px; border-bottom: 1px solid var(--ui-border); }
.quick-review__identity strong { display: block; font-size: 22px; font-weight: 400; line-height: 1.16; overflow-wrap: anywhere; }
.quick-review__identity small { display: block; margin-top: 9px; color: var(--ui-muted); font-size: var(--text-sm); }
.quick-review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.quick-review dl div { min-height: 72px; padding: 13px 15px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.quick-review dl div:last-child { border-right: 0; }
.quick-review dt,
.quick-review__field > span { color: var(--ui-muted); font-size: 12px; text-transform: lowercase; }
.quick-review dd { margin: 7px 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.quick-review__field { display: block; padding: 12px 15px; border-bottom: 1px solid var(--ui-border); }
.quick-review__field select,
.quick-review__field input { width: 100%; min-height: 42px; margin-top: 6px; padding: 0; border: 0; background: transparent; }
.quick-review__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.quick-review__row .quick-review__field:first-child { border-right: 1px solid var(--ui-border); }
.quick-review footer { display: grid; grid-template-columns: 1fr 1.35fr; }
.quick-review footer button { min-height: 58px; border-right: 1px solid var(--ui-border); }
.quick-review footer button:last-child { border-right: 0; }

/* Universal controls */
.primary-button, .secondary-button, .danger-button { min-height: 52px; padding: 0 18px; border: 1px solid var(--ui-border); text-transform: lowercase; }
.primary-button { background: var(--ui-text); color: var(--ui-surface); }
.secondary-button { background: var(--ui-surface); }
.danger-button { border-color: var(--ui-danger); color: var(--ui-danger); }

.primary-button:not(:disabled):hover { box-shadow: inset 0 -4px 0 var(--ui-surface); }
.secondary-button:not(:disabled):hover { background: var(--ui-text); color: var(--ui-surface); }
.danger-button:not(:disabled):hover { background: var(--ui-danger); color: var(--ui-surface); }
.field { min-width: 0; }
.field--flush { margin: 0; }
.field > label, .field label { display: block; margin-bottom: 7px; color: var(--ui-text-soft); font-size: var(--text-sm); text-transform: lowercase; }
.field-help { margin: 8px 0 0; color: var(--ui-muted); font-size: var(--text-xs); line-height: 1.45; }
.badge { display: inline-block; padding: 4px 7px; border: 1px solid currentColor; font-size: var(--text-xs); }
.badge.ready { color: var(--ui-success); }
.badge.ambiguous { color: var(--ui-danger); }

/* Modal shell */
.modal-backdrop { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgb(16 16 14 / .68); transition: opacity 130ms linear, visibility 130ms linear; }
.modal-backdrop.is-open { visibility: visible; opacity: 1; }
.modal-backdrop.is-closing { visibility: visible; opacity: 0; }
.modal { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(940px, calc(100vw - 48px)); max-height: min(880px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.modal--bulk { width: min(1160px, calc(100vw - 48px)); }
.modal--mode-chooser { width: min(980px, calc(100vw - 48px)); }
.modal__header { display: grid; grid-template-columns: minmax(0, 1fr) 72px; min-height: 104px; border-bottom: 1px solid var(--ui-border); }
.modal__header > div { padding: 22px 28px; }
.modal__eyebrow { display: block; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.modal__header h3 { margin: 8px 0 0; font-size: clamp(30px, 3.1vw, 46px); font-weight: 400; line-height: .92; letter-spacing: -.058em; text-transform: lowercase; }
.modal__close { display: grid; place-items: center; min-height: 103px; border-left: 1px solid var(--ui-border); font-size: 28px; }
.modal__close:hover { background: var(--ui-text); color: var(--ui-surface); }
.modal__body { min-height: 0; padding: 28px; overflow: auto; }
.modal__footer { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 70px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--ui-border); }
.modal[aria-busy="true"] .modal__body { opacity: .72; }
.modal[aria-busy="true"] { cursor: progress; }
.modal__footer button { min-height: 69px; border-right: 1px solid var(--ui-border); text-transform: lowercase; }
.modal__footer button:last-child { border-right: 0; }
.modal__footer button:not(:disabled):hover { background: var(--ui-text); color: var(--ui-surface); }
.modal__footer .primary-button { border: 0; }
.modal-note, .confirm-warning, .combine-note, .catalog-import-note{ padding: 17px; border: 1px solid var(--ui-border); background: var(--ui-surface-raised); font-size: var(--text-sm); line-height: 1.45; }
.version-banner { padding: 9px 13px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: var(--text-xs); }

/* Mode chooser */
.mode-chooser { min-width: 0; }
.mode-chooser__intro { margin: 0 0 22px; color: var(--ui-text-soft); }
.mode-chooser__intro span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.mode-chooser__intro h4 { margin: 8px 0 12px; font-size: var(--heading-lg); font-weight: 400; line-height: 1; letter-spacing: -.04em; text-transform: lowercase; }
.mode-chooser__intro p { max-width: 660px; margin: 0; }
.mode-chooser__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); }
.mode-card { min-height: 208px; padding: 24px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); text-align: left; }
.mode-card > span { font-size: 30px; font-variant-numeric: tabular-nums; }
.mode-card strong { display: block; margin-top: 30px; font-size: 27px; font-weight: 400; line-height: 1.05; text-transform: lowercase; }
.mode-card p { margin: 12px 0 0; color: var(--ui-muted); font-size: var(--text-sm); line-height: 1.45; }
.mode-card b { display: block; margin-top: 24px; font-size: var(--text-sm); font-weight: 400; text-transform: lowercase; }
.mode-card:hover { background: var(--ui-text); color: var(--ui-surface); }
.mode-card:hover p { color: currentColor; opacity: .74; }

/* Settings */
.modal--settings { width: min(1180px, calc(100vw - 48px)); }
.modal--settings .modal__body { padding: 0; }
.settings-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1px solid var(--ui-border);
}
.settings-section {
  min-width: 0;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}
.settings-section--constructor,
.settings-section--appearance { align-self: stretch; }
.settings-section--deliveries,
.settings-section--order { grid-column: 1 / -1; }
.settings-section__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 94px;
  border-bottom: 1px solid var(--ui-border);
}
.settings-section__header > span {
  display: grid;
  place-items: start center;
  padding-top: 22px;
  border-right: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.settings-section__header > div { padding: 19px 22px; }
.settings-section__header strong {
  display: block;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
}
.settings-section__header p {
  margin: 9px 0 0;
  color: var(--ui-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.settings-section__content { padding: 22px; }
.settings-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }



.settings-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-action-grid button {
  display: grid;
  align-content: space-between;
  min-height: 98px;
  padding: 16px 18px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  text-align: left;
  text-transform: lowercase;
}
.settings-action-grid button:nth-child(3n) { border-right: 0; }
.settings-action-grid button:nth-last-child(-n + 3) { border-bottom: 0; }
.settings-action-grid button span { color: var(--ui-muted); font-size: var(--text-xs); }
.settings-action-grid button strong { margin-top: 20px; font-size: var(--text); font-weight: 400; }
.settings-action-grid button.is-danger { color: var(--ui-danger); }
.settings-system { grid-column: 1 / -1; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.settings-system summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px;
  min-height: 82px;
  cursor: pointer;
  list-style: none;
}
.settings-system summary::-webkit-details-marker { display: none; }
.settings-system summary > span { display: grid; place-items: center; border-right: 1px solid var(--ui-border); color: var(--ui-muted); font-size: var(--text-xs); }
.settings-system summary > div { padding: 16px 22px; }
.settings-system summary strong { display: block; font-size: 21px; font-weight: 400; text-transform: lowercase; }
.settings-system summary small { display: block; margin-top: 7px; color: var(--ui-muted); font-size: var(--text-xs); }
.settings-system summary > b { display: grid; place-items: center; border-left: 1px solid var(--ui-border); font-size: 24px; font-weight: 400; }
.settings-system[open] summary > b { transform: rotate(45deg); }
.settings-system__content { border-top: 1px solid var(--ui-border); }
.settings-system__content article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 94px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ui-border);
}
.settings-system__content article:last-child { border-bottom: 0; }
.settings-system__content article > div > strong { font-weight: 500; text-transform: lowercase; }
.settings-system__content article p { margin: 7px 0 0; color: var(--ui-muted); font-size: var(--text-xs); line-height: 1.42; }
.settings-system__content article > button,
.settings-system__actions button { min-height: 48px; padding: 0 15px; border: 1px solid var(--ui-border); text-transform: lowercase; }
.settings-system__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.settings-system__content article.is-danger { border-left: 5px solid var(--ui-danger); }
.settings-system__content article.is-danger > button { border-color: var(--ui-danger); color: var(--ui-danger); }

/* Completed order workflow */
.modal--complete-order { width: min(860px, calc(100vw - 48px)); }
.complete-order { display: grid; gap: 20px; }
.complete-order__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 22px; border: 1px solid var(--ui-border); }
.complete-order__summary > span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.complete-order__summary > strong { grid-column: 1; font-size: 32px; font-weight: 400; line-height: 1; text-transform: lowercase; }
.complete-order__summary dl { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(104px, 1fr)); margin: 0; border-left: 1px solid var(--ui-border); }
.complete-order__summary dl div { padding: 4px 16px; border-right: 1px solid var(--ui-border); }
.complete-order__summary dl div:last-child { border-right: 0; }
.complete-order__summary dt { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.complete-order__summary dd { margin: 8px 0 0; font-size: 27px; font-variant-numeric: tabular-nums; }

.modal--completed-orders { width: min(1320px, calc(100vw - 48px)); }
.modal--completed-orders .modal__body { padding: 0; overflow: hidden; }
.completed-orders { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: min(700px, calc(100dvh - 220px)); min-height: 480px; border-top: 0; }
.completed-orders__rail { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-right: 1px solid var(--ui-border); }
.completed-orders__search { display: block; padding: 17px; border-bottom: 1px solid var(--ui-border); }
.completed-orders__search > span { display: block; margin-bottom: 8px; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.completed-orders__search input { min-height: 50px; }
.completed-orders__list { min-height: 0; overflow-y: auto; }
.completed-order-card { display: grid; width: 100%; min-height: 94px; padding: 16px 17px; border-bottom: 1px solid var(--ui-border); text-align: left; }
.completed-order-card > span { overflow: hidden; font-size: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.completed-order-card > strong { margin-top: 9px; font-size: var(--text-sm); font-weight: 400; }
.completed-order-card > small { margin-top: 5px; color: var(--ui-muted); font-size: var(--text-xs); }
.completed-order-card:not(.is-active):hover { box-shadow: inset 5px 0 0 var(--ui-text); }
.completed-order-card.is-active { background: var(--ui-text); color: var(--ui-surface); }
.completed-order-card.is-active small { color: currentColor; opacity: .72; }
.completed-orders__detail { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.completed-order-detail__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--ui-border); }
.completed-order-detail__header span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.completed-order-detail__header h4 { margin: 7px 0 0; font-size: clamp(31px, 3vw, 48px); font-weight: 400; line-height: .94; letter-spacing: -.05em; }
.completed-order-detail__header p { margin: 12px 0 0; color: var(--ui-muted); font-size: var(--text-sm); }
.completed-order-detail__header time { align-self: start; padding-top: 2px; color: var(--ui-muted); font-size: var(--text-xs); white-space: nowrap; }
.completed-order-detail__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--ui-border); }
.completed-order-detail__metrics div { min-height: 76px; padding: 15px 18px; border-right: 1px solid var(--ui-border); }
.completed-order-detail__metrics div:last-child { border-right: 0; }
.completed-order-detail__metrics dt { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.completed-order-detail__metrics dd { margin: 8px 0 0; font-size: 23px; font-variant-numeric: tabular-nums; }
.completed-order-detail__lines { min-height: 0; padding: 0 28px; overflow-y: auto; }
.completed-order-line { display: grid; grid-template-columns: 38px minmax(0, 1fr) 54px; gap: 12px; min-height: 82px; padding: 15px 0; border-bottom: 1px solid var(--ui-border); }
.completed-order-line__index { color: var(--ui-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.completed-order-line__copy strong, .completed-order-line__copy span, .completed-order-line__copy small { display: block; }
.completed-order-line__copy strong { font-size: var(--text-sm); font-weight: 600; }
.completed-order-line__copy span { margin-top: 4px; font-size: var(--text-sm); }
.completed-order-line__copy small { margin-top: 5px; color: var(--ui-muted); font-size: var(--text-xs); }
.completed-order-line > b { justify-self: end; font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
.completed-order-detail__actions { display: grid; grid-template-columns: 74px 74px repeat(2, minmax(150px, 1fr)) minmax(150px, 1fr); border-top: 1px solid var(--ui-border); }
.completed-order-detail__actions button { min-height: 66px; padding: 0 12px; border-right: 1px solid var(--ui-border); text-transform: lowercase; }
.completed-order-detail__actions button:last-child { border-right: 0; }
.completed-order-detail__actions button:not(.is-danger):hover { background: var(--ui-text); color: var(--ui-surface); }
.completed-order-detail__actions .is-danger { color: var(--ui-danger); }
.completed-order-detail__actions .is-danger:hover { background: var(--ui-danger); color: var(--ui-surface); }
.completed-orders-empty { display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: 24px; color: var(--ui-muted); }
.completed-orders-empty strong { color: var(--ui-text); font-size: 24px; font-weight: 400; text-transform: lowercase; }
.completed-orders-empty span { max-width: 340px; margin-top: 9px; font-size: var(--text-sm); }
.completed-orders-empty--detail { height: 100%; min-height: 100%; }

/* Bulk editor */
.bulk-editor { min-width: 0; }
.bulk-editor__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding: 19px; border: 1px solid var(--ui-border); }
.bulk-editor__summary > span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.bulk-editor__summary > strong { grid-row: 1 / 3; grid-column: 2; font-size: 58px; font-weight: 400; line-height: 1; }
.bulk-editor__summary p { margin: 0; font-size: var(--text-sm); }
.bulk-editor__layout { display: grid; grid-template-columns: 278px minmax(0, 1fr); margin-top: 18px; border: 1px solid var(--ui-border); }
.bulk-editor__nav { border-right: 1px solid var(--ui-border); }
.bulk-editor__nav button { display: grid; grid-template-columns: 34px minmax(0, 1fr); width: 100%; min-height: 78px; padding: 14px; border-bottom: 1px solid var(--ui-border); text-align: left; }
.bulk-editor__nav button b { font-weight: 400; text-transform: lowercase; }
.bulk-editor__nav button small { grid-column: 2; color: var(--ui-muted); font-size: var(--text-xs); }
.bulk-editor__nav button:hover { box-shadow: inset 5px 0 0 var(--ui-text); }
.bulk-editor__nav button.is-active { background: var(--ui-text); color: var(--ui-surface); box-shadow: none; }
.bulk-editor__nav button.is-active small { color: currentColor; opacity: .72; }
.bulk-editor__workspace { min-width: 0; }
.bulk-editor__workspace-head { display: flex; justify-content: space-between; padding: 19px; border-bottom: 1px solid var(--ui-border); }
.bulk-editor__workspace-head span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.bulk-editor__workspace-head h4 { margin: 7px 0 0; font-size: 28px; font-weight: 400; text-transform: lowercase; }
.bulk-editor__count { color: var(--ui-text); font-size: 40px; }
.bulk-editor__controls { padding: 19px; border-bottom: 1px solid var(--ui-border); }
.bulk-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--ui-border); }
.bulk-segmented button { min-height: 52px; border-right: 1px solid var(--ui-border); text-transform: lowercase; }
.bulk-segmented button:last-child { border-right: 0; }
.bulk-segmented button.is-active { background: var(--ui-text); color: var(--ui-surface); }
.bulk-value-card { display: block; margin-top: 14px; }
.bulk-value-card > span { display: block; margin-bottom: 7px; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.bulk-text-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bulk-editor__preview { padding: 19px; }
.bulk-editor__preview-head { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--ui-muted); font-size: var(--text-xs); }
.bulk-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--ui-border); }
.bulk-preview-row span, .bulk-preview-row small, .bulk-preview-more { color: var(--ui-muted); font-size: var(--text-xs); }
.bulk-preview-row strong, .bulk-preview-row small { display: block; margin-top: 4px; }

/* Database Studio */
.database-studio { min-width: 0; }
.database-studio__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; padding-bottom: 21px; border-bottom: 1px solid var(--ui-border); }
.database-studio__intro span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.database-studio__intro h4 { margin: 7px 0 10px; font-size: 32px; font-weight: 400; line-height: 1; text-transform: lowercase; }
.database-studio__intro p { max-width: 670px; margin: 0; color: var(--ui-muted); font-size: var(--text-sm); line-height: 1.45; }
.database-studio__metrics { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); border: 1px solid var(--ui-border); }
.database-studio__metrics div { padding: 13px; border-right: 1px solid var(--ui-border); }
.database-studio__metrics div:last-child { border-right: 0; }
.database-studio__metrics strong { display: block; font-size: 26px; font-weight: 400; }
.database-studio__metrics span { color: var(--ui-muted); font-size: var(--text-xs); }
.database-studio__top-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }


.database-order-builder { margin-top: 20px; border: 1px solid var(--ui-border); }
.database-order-builder__current { padding: 17px; border-bottom: 1px solid var(--ui-border); }
.database-order-builder__current span, .database-order-builder__current small { display: block; color: var(--ui-muted); font-size: var(--text-xs); }
.database-order-builder__current strong { display: block; margin: 7px 0; font-weight: 500; }
.database-order-builder__fields { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; border-bottom: 1px solid var(--ui-border); }
.database-order-builder__fields label { padding: 10px; border-right: 1px solid var(--ui-border); }
.database-order-builder__fields label span { display: block; color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.database-order-builder__fields input { min-height: 44px; padding: 4px 0; border: 0; background: transparent; }
.database-order-builder__quantity { min-width: 0; }
.database-order-builder__add { min-height: 100%; padding: 0 18px; background: var(--ui-text); color: var(--ui-surface); }
.database-request-tray { border-top: 1px solid var(--ui-border); }
.database-request-tray header, .database-request-tray footer { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 12px; border-bottom: 1px solid var(--ui-border); }
.database-request-tray footer { border-top: 1px solid var(--ui-border); border-bottom: 0; }
.database-request-list { max-height: 290px; overflow-y: auto; }
.database-request-line { display: grid; grid-template-columns: minmax(0, 1fr) 46px; border-bottom: 1px solid var(--ui-border); }
.database-request-line label { display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 12px; }
.database-request-line__index { color: var(--ui-muted); font-size: var(--text-xs); }
.database-request-line__body small { display: block; color: var(--ui-muted); font-size: var(--text-xs); }
.database-studio__workspace { display: grid; grid-template-columns: repeat(4, minmax(226px, 1fr)); margin-top: 20px; border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); overflow-x: auto; }
.database-column { display: grid; grid-template-rows: auto auto minmax(230px, 1fr) auto; min-width: 226px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.database-column__header { display: flex; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--ui-border); }
.database-column__header span { color: var(--ui-muted); font-size: var(--text-xs); }
.database-column__header h5 { margin: 4px 0 0; font-size: 19px; font-weight: 400; }
.database-search { display: grid; grid-template-columns: 42px minmax(0, 1fr); border-bottom: 1px solid var(--ui-border); }
.database-search span { display: grid; place-items: center; font-size: var(--text-sm); }
.database-search input { border: 0; }
.database-records { min-height: 0; overflow-y: auto; }
.database-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--ui-border); }
.database-record__main { padding: 12px; text-align: left; }
.database-record__main strong, .database-record__main small { display: block; }
.database-record__main small { margin-top: 4px; color: var(--ui-muted); font-size: var(--text-xs); }
.database-record__dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: currentColor; }
.database-record.is-active { background: var(--ui-text); color: var(--ui-surface); }
.database-record.is-active small { color: currentColor; opacity: .72; }
.database-record__actions { display: flex; }
.database-record__actions button { min-width: 44px; border-left: 1px solid var(--ui-border); }
.database-record__actions button:hover { background: var(--ui-text); color: var(--ui-surface); }
.database-add { display: grid; grid-template-columns: 1fr 48px; border-top: 1px solid var(--ui-border); }
.database-add input { border: 0; }
.database-add button { border-left: 1px solid var(--ui-border); }
.database-add button:hover { background: var(--ui-text); color: var(--ui-surface); }
.database-studio__footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; color: var(--ui-muted); font-size: var(--text-xs); }
.database-record-editor { display: grid; gap: 18px; }
.database-record-editor__identity { padding: 18px; border: 1px solid var(--ui-border); }
.database-record-editor__identity span, .database-record-editor__identity small { display: block; color: var(--ui-muted); font-size: var(--text-xs); }
.database-record-editor__identity strong { display: block; margin: 8px 0; font-size: 24px; font-weight: 400; }




/* Import / export / combine */
.import-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.import-file-field { border: 1px solid var(--ui-border); padding: 14px; }
.import-preview { margin-top: 16px; }
.import-summary { padding: 15px; border: 1px solid var(--ui-border); }
.import-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.import-group-chip { padding: 7px 9px; border: 1px solid var(--ui-border); font-size: var(--text-xs); }
.import-group-chip--composite { border-color: var(--ui-text); }
.preview-scroll { max-height: 430px; overflow: auto; border: 1px solid var(--ui-border); border-top: 0; }
.preview-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.preview-table th, .preview-table td { padding: 10px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.catalog-delta { display: inline-block; padding: 3px 6px; border: 1px solid var(--ui-success); color: var(--ui-success); font-size: var(--text-xs); }
.catalog-delta--same { border-color: var(--ui-border); color: var(--ui-muted); }
.code-preview { margin: 0; padding: 18px; border: 0; background: var(--ui-surface-raised); white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-xs); line-height: 1.5; }
.modal--export { width: min(1080px, calc(100vw - 48px)); }
.modal--export .modal__body { padding: 0; }
.export-panel { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); border-left: 1px solid var(--ui-border); }
.export-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  min-height: 112px;
  padding: 22px 26px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}
.export-intro > span { color: var(--ui-muted); font-size: var(--text-xs); text-transform: lowercase; }
.export-intro > strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.export-intro > p { max-width: 620px; margin: 0; color: var(--ui-text-soft); font-size: var(--text-sm); }
.export-config { display: grid; align-content: start; gap: 16px; padding: 22px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.export-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--ui-border);
  cursor: pointer;
  text-transform: lowercase;
}
.export-toggle input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.export-toggle > span { position: relative; width: 22px; height: 22px; border: 1px solid var(--ui-border); background: var(--ui-surface); }
.export-toggle input:checked + span { background: var(--ui-text); }
.export-toggle input:checked + span::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border-right: 2px solid var(--ui-surface); border-bottom: 2px solid var(--ui-surface); transform: rotate(45deg); }
.export-toggle input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.export-toggle b { font-size: var(--text-sm); font-weight: 400; }
.export-preview-shell { min-width: 0; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.export-preview-shell > header { display: flex; justify-content: space-between; min-height: 52px; padding: 16px 18px; border-bottom: 1px solid var(--ui-border); }
.export-preview-shell > header span { font-size: var(--text-sm); text-transform: lowercase; }
.export-preview-shell > header b { color: var(--ui-muted); font-size: var(--text-xs); font-weight: 400; }
.export-preview-shell .code-preview { max-height: 330px; overflow: auto; }
.export-destinations { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 1px solid var(--ui-border); }
.export-destination {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  gap: 14px;
  align-items: start;
  min-height: 142px;
  padding: 20px;
  border-right: 1px solid var(--ui-border);
  text-align: left;
}
.export-destination:last-child { border-right: 0; }
.export-destination--primary { background: var(--ui-text); color: var(--ui-surface); }
.export-destination__mark { font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-transform: lowercase; }
.export-destination__copy strong { display: block; font-size: 20px; font-weight: 400; line-height: 1.05; text-transform: lowercase; }
.export-destination__copy small { display: block; margin-top: 11px; color: currentColor; font-size: var(--text-xs); line-height: 1.45; opacity: .68; }
.export-destination__arrow { justify-self: end; font-size: 20px; }
.export-destination.is-busy { cursor: progress; }
.export-destination.is-busy .export-destination__mark::after { content: " …"; }
.combine-note { margin-top: 14px; }
.combine-preview { max-height: 270px; overflow-y: auto; margin: 16px 0; padding: 0; border: 1px solid var(--ui-border); list-style: none; counter-reset: item; }
.combine-preview li { padding: 13px; border-bottom: 1px solid var(--ui-border); counter-increment: item; }
.combine-preview li:last-child { border-bottom: 0; }
.combine-preview li::before { content: counter(item, decimal-leading-zero) "  "; color: var(--ui-muted); }

/* Reset confirmation */
.database-reset { display: grid; gap: 18px; }
.database-reset__warning { padding: 18px; border: 1px solid var(--ui-danger); color: var(--ui-danger); }
.database-reset__confirm { display: grid; gap: 8px; }
.database-reset__confirm span { font-size: var(--text-sm); text-transform: lowercase; }
.database-reset__confirm input { border-color: var(--ui-danger); }

/* Toasts */
.toast-stack { position: fixed; z-index: 700; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.toast-stack--errors { top: max(18px, env(safe-area-inset-top)); bottom: auto; }
.toast { padding: 15px 17px; border: 1px solid var(--ui-border); background: var(--ui-text); color: var(--ui-surface); font-size: var(--text-sm); line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity var(--motion-ui) var(--ease-enter), transform var(--motion-ui) var(--ease-enter); pointer-events: auto; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition-duration: var(--motion-fast); }
.toast.error, .toast[data-kind="error"] { background: var(--ui-danger); }
.drawer-backdrop { display: none; }

/* Pointer hover system — color only, no geometry changes */
button, .database-flow-option, .quick-node, .order-line, .export-destination, .settings-action-grid button, .settings-system summary, .settings-system__content button{
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, border-color var(--motion-fast) linear, box-shadow var(--motion-fast) linear;
}
button:not(:disabled):active,
.database-flow-option:not(:disabled):active,
.quick-node:active,
.order-line:active { box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) {
  input:hover, select:hover, textarea:hover { border-color: var(--ui-text); }
  .database-flow-option:not(.is-active):hover { background: var(--ui-text); color: var(--ui-surface); box-shadow: none; }
  .database-flow-option:not(.is-active):hover small { color: currentColor; opacity: .72; }
  .quick-node--candidate:hover .quick-hotkey-badge,
  .quick-node--candidate.is-hovered .quick-hotkey-badge { border-color: var(--ui-text); background: var(--ui-surface); color: var(--ui-text); }
  .order-line:not(.is-selected):hover { background: var(--ui-surface-raised); box-shadow: inset 5px 0 0 var(--ui-text); }
  .settings-action-grid button:not(:disabled):not(.is-danger):hover, .settings-system summary:hover, .settings-system__content button:not(:disabled):hover{ background: var(--ui-text); color: var(--ui-surface); }
  .settings-action-grid button.is-danger:not(:disabled):hover,
  .settings-system__content article.is-danger > button:not(:disabled):hover { background: var(--ui-danger); color: var(--ui-surface); }
  .export-destination:not(.export-destination--primary):not(:disabled):hover { background: var(--ui-text); color: var(--ui-surface); }
  .export-destination--primary:not(:disabled):hover { box-shadow: inset 0 -5px 0 var(--ui-surface); }
  .export-toggle:hover { background: var(--ui-surface-raised); }
}

/* Laptop */
@media (min-width: 1100px) and (max-width: 1360px) {
  :root { --rail-width: 244px; --order-width: 378px; --topbar-height: 66px; --dock-height: 74px; }
  .app-grid { grid-template-columns: var(--rail-width) minmax(520px, 1fr) var(--order-width); }
  
  
  
  
  
  
  
  
  .database-constructor__header { min-height: 194px; padding: 30px 27px 22px; }
  
  
  
  .database-flow-list--code { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .database-flow-option.is-compact:nth-of-type(n) { border-right: 1px solid var(--ui-border); }
  .database-flow-option.is-compact:nth-of-type(2n) { border-right: 0; }
  .order-panel { grid-template-rows: var(--topbar-height) 146px minmax(0, 1fr) var(--dock-height); }
  .order-panel__header { padding: 25px 23px 19px; }
  .order-panel__header h2 { font-size: 43px; }
  .order-list { padding-inline: 23px; }
  .order-line { grid-template-columns: 18px 29px minmax(0, 1fr) 42px; gap: 8px; min-height: 98px; padding-block: 16px; }
  .order-line.is-selected { margin-inline: -23px; padding-inline: 23px; }
  .order-line__description { font-size: 13px; }
}

/* Tablet and mobile */
@media (max-width: 1099px) {
  body { overflow-y: auto; }
  .app-shell { min-height: 100dvh; height: auto; overflow: visible; }
  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 66px;
    border: 1px solid var(--ui-border);
    border-bottom: 0;
    background: var(--ui-surface);
  }
  .app-brand { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 15px; }
  .app-brand__mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ui-text); color: var(--ui-surface); font-weight: 700; }
  .app-brand strong { font-weight: 400; text-transform: lowercase; }
  .app-brand small { color: var(--ui-muted); font-size: var(--text-xs); }
  .mode-tabs, .storage-state, .app-topbar__actions > [data-action="theme"], .app-topbar__actions > [data-action="settings"] { display: none; }
  .app-topbar__actions { display: block; }
  .topbar-order { min-width: 96px; min-height: 65px; padding: 0 14px; border-left: 1px solid var(--ui-border); text-transform: lowercase; }
  .topbar-order span, .topbar-order b { display: block; }
  .topbar-order b { margin-top: 2px; font-size: var(--text-xs); font-weight: 400; }
  .app-grid { display: block; width: 100%; height: auto; min-height: calc(100dvh - 66px); border: 1px solid var(--ui-border); overflow: visible; }
  .database-constructor { display: block; min-height: calc(100dvh - 68px); overflow: visible; }
  .database-layout { display: block; height: auto; }
  
  
  
  
  
  
  .database-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) 68px; min-height: calc(100dvh - 139px); }
  .database-constructor__header { min-height: 184px; padding: 27px 20px 21px; }
  
  
  
  .database-flow-list--code { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .database-flow-option.is-compact:nth-of-type(n) { border-right: 1px solid var(--ui-border); }
  .database-flow-option.is-compact:nth-of-type(2n) { border-right: 0; }
  .database-flow-viewport { overflow: visible; touch-action: pan-y; }
  .database-flow-workspace { height: auto; min-height: 0; touch-action: pan-y; }
  
  
  .database-flow-list { max-height: min(62dvh, 680px); touch-action: pan-y; overscroll-behavior-y: contain; }
  
  
  
  
  
  
  
  .interaction-column { display: grid; grid-template-rows: minmax(620px, 1fr); min-height: calc(100dvh - 68px); }
  .selection-area { min-height: 620px; }

  .order-panel {
    position: fixed;
    z-index: 220;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: 66px 140px minmax(0, 1fr) calc(74px + env(safe-area-inset-bottom));
    width: min(500px, 100vw);
    height: 100dvh;
    transform: translateX(100%);
    border-left: 1px solid var(--ui-border);
    transition: transform 160ms ease-out;
  }
  body.order-panel-open .order-panel { transform: translateX(0); }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 210; display: block; visibility: hidden; background: rgb(16 16 14 / .48); opacity: 0; transition: opacity 160ms ease-out, visibility 160ms linear; }
  body.order-panel-open .drawer-backdrop { visibility: visible; opacity: 1; }
  .order-panel__topbar-actions { grid-template-columns: 1fr 1fr 66px; }
  .order-topbar-action, .order-panel__settings { min-height: 65px; }
  .order-panel__close { display: grid; place-items: center; min-height: 65px; background: var(--ui-text); color: var(--ui-surface); font-size: 25px; }
  .order-panel__header { padding: 25px 20px 18px; }
  .order-panel__header h2 { font-size: 44px; white-space: normal; }
  .order-list { padding-inline: 20px; }
  .order-line.is-selected { margin-inline: -20px; padding-inline: 20px; }
  .order-selection-dock { padding-bottom: env(safe-area-inset-bottom); }
  .selection-dock-button { min-height: 73px; }
  .modal-backdrop { padding: 12px; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-section--deliveries,
  .settings-section--order,
  .settings-system { grid-column: 1; }
  .export-panel { grid-template-columns: 1fr; }
  .export-config, .export-preview-shell { border-right: 1px solid var(--ui-border); }
}

@media (max-width: 640px) {
  .app-brand small { display: none; }
  
  .database-constructor__header { min-height: 176px; }
  .database-flow-list--code { grid-template-columns: 1fr; }
  .database-flow-option.is-compact:nth-of-type(n) { border-right: 0; }
  .database-flow-option.is-featured .database-flow-option__copy { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
  .database-flow-summary dl, .field-row { grid-template-columns: 1fr; }
  .order-panel { width: 100vw; border-left: 0; }
  .order-line { grid-template-columns: 18px 29px minmax(0, 1fr) 40px; gap: 8px; }
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; }
  .modal__body { padding: 18px; }
  .mode-chooser__grid, .bulk-text-fields, .import-source-grid { grid-template-columns: 1fr; }
  .bulk-editor__layout { grid-template-columns: 1fr; }
  .bulk-editor__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .bulk-editor__nav button { min-height: 68px; }
  .database-studio__hero { grid-template-columns: 1fr; }
  .database-studio__metrics { grid-template-columns: repeat(2, 1fr); }
  .database-order-builder__fields { grid-template-columns: 90px minmax(0, 1fr); }
  .database-order-builder__add { grid-column: 1 / -1; min-height: 58px; }
  
  .settings-control-grid { grid-template-columns: 1fr; }
  .settings-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-action-grid button:nth-child(n) { border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
  .settings-action-grid button:nth-child(2n) { border-right: 0; }
  .settings-action-grid button:nth-last-child(-n + 2) { border-bottom: 0; }
  .settings-system__content article { grid-template-columns: 1fr; }
  .settings-system__actions { justify-content: flex-start; }
  .export-panel { display: flex; flex-direction: column; }
  .export-intro { order: 1; grid-template-columns: 1fr; }
  .export-intro > strong { grid-row: auto; grid-column: 1; justify-self: start; }
  .export-config { order: 2; }
  .export-destinations { order: 3; grid-template-columns: 1fr; }
  .export-preview-shell { order: 4; }
  .export-destination { min-height: 112px; grid-template-columns: 48px minmax(0, 1fr) 24px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .export-destination:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  .completed-orders { grid-template-columns: 1fr; height: auto; min-height: 0; overflow-y: auto; }
  .completed-orders__rail { max-height: 330px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .completed-orders__detail { min-height: 620px; }
  .completed-order-detail__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .completed-order-detail__actions button { border-bottom: 1px solid var(--ui-border); }
  .completed-order-detail__actions button:nth-child(2n) { border-right: 0; }
  .completed-order-detail__actions button:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

@media (max-width: 640px) {
  .complete-order__summary { grid-template-columns: 1fr; }
  .complete-order__summary dl { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ui-border); border-left: 0; padding-top: 14px; }
  .completed-order-detail__header { grid-template-columns: 1fr; padding: 20px; }
  .completed-order-detail__metrics { grid-template-columns: 1fr; }
  .completed-order-detail__metrics div { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .completed-order-detail__metrics div:last-child { border-bottom: 0; }
  .completed-order-detail__lines { padding-inline: 20px; }
  .completed-order-line { grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .order-line.is-entering { box-shadow: inset 7px 0 0 var(--ui-success); }
  .order-line.is-holding::after { transform: scaleX(1); }
}

body.order-panel-open { overflow: hidden; }
@media (min-width: 1100px) { .order-panel { position: sticky; top: 0; } }
.order-panel__heading { min-width: 0; }
.selection-dock-button--combine, .selection-dock-button--edit { background: var(--ui-surface); }

.order-line, .order-line * { touch-action: pan-y; }

@media (max-width: 640px) {
  .workspace-header { display: block; padding: 18px 16px 20px; }
  .workspace-heading { max-width: 100%; }
  .workspace-heading h1 { margin-top: 14px; font-size: clamp(48px, 15vw, 64px); }
  .quick-navigation { max-width: 100%; }
  .quick-breadcrumb { font-size: 12px; }
  .quick-breadcrumb__button,
  .quick-breadcrumb__current { max-width: 118px; }
  .quick-node { padding: 8px 9px; }
  .quick-hotkey-badge { left: -15px; width: 24px; height: 24px; font-size: 11px; }
  .quick-node--position > span { font-size: 12px; }
  .quick-review { top: 152px; right: 12px; width: calc(100% - 24px); max-height: calc(100% - 174px); overflow-y: auto; }
  .quick-review__identity strong { font-size: 19px; }
  .quick-review__row { grid-template-columns: 100px minmax(0, 1fr); }
  .quick-review footer { position: sticky; bottom: 0; background: var(--ui-surface); }
  .quick-onboarding { left: 12px; bottom: 12px; width: calc(100% - 24px); max-height: calc(100% - 96px); overflow-y: auto; }
  .toast-stack { right: 12px; width: calc(100vw - 24px); }
  .toast-stack--errors { top: calc(72px + env(safe-area-inset-top)); }
}
.level-label { text-transform: lowercase; }
.quick-tree { overflow: visible; }
/* Stage 8 branching quick pick */
.quick-node-layer { pointer-events: none; }
.quick-node { pointer-events: auto; text-transform: lowercase; }
.quick-node--code > span { text-transform: none; }
.quick-review__identity strong, .quick-review__identity small, .quick-review dd { text-transform: lowercase; }
.quick-review__components { padding: 14px 18px; border-bottom: 1px solid var(--ui-border); text-transform: lowercase; }
.quick-review__components > span { color: var(--ui-muted); font-size: 12px; }
.quick-review__components ul { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.quick-review__components li { padding-left: 13px; font-size: var(--text-sm); line-height: 1.3; }
.quick-review__components li::before { content: "—"; margin-left: -13px; margin-right: 6px; }
.selection-area.is-reviewing .selection-svg, .selection-area.is-reviewing .quick-node-layer { opacity: .18; }
.order-line__description, .order-line__color { text-transform: lowercase; }
.quick-node--category > span,
.quick-node--subcategory > span { font-size: 14px; line-height: 1.18; text-transform: lowercase; }
.quick-node--position > span,
.quick-node--color > span { text-transform: lowercase; }
.order-line__description,
.order-line__color,
.order-tag { text-transform: lowercase; }
@media (max-width: 719px) {
  .quick-node--category > span,
  .quick-node--subcategory > span { font-size: 12px; }
}
/* Stage 10 mobile and branch-clearance refinements */
.workspace-header {
  background: linear-gradient(to bottom, var(--ui-surface) 0, var(--ui-surface) calc(100% - 18px), transparent 100%);
}
.quick-node--code > span { white-space: nowrap; }
@media (max-width: 640px) {
  .workspace-heading { max-width: 100%; }
  .workspace-heading h1 {
    max-width: 100%;
    font-size: clamp(36px, 11vw, 44px);
    line-height: .92;
    letter-spacing: -.055em;
    overflow-wrap: normal;
  }
}
/* Stage 11 — unbounded camera, frequency spacing and high-performance zoom */
.quick-canvas-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  overscroll-behavior: none;
  contain: layout paint style;
  background: var(--ui-surface);
}
.quick-canvas-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
.quick-canvas-scene .selection-svg,
.quick-canvas-scene .node-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform-origin: 0 0;
}
.selection-active-preview {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 11;
  display: block;
  width: max-content;
  max-width: min(360px, calc(100% - 16px));
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: left;
  pointer-events: none;
  will-change: transform;
}
.selection-active-preview strong {
  display: block;
  max-width: 340px;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.24;
  text-transform: lowercase;
}
.quick-pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  width: 21px;
  height: 27px;
  background: var(--ui-surface);
  clip-path: polygon(0 0, 0 100%, 7px 79%, 11px 100%, 16px 98%, 11px 75%, 21px 75%);
  pointer-events: none;
  will-change: transform;
}
.quick-pointer::after {
  content: "";
  position: absolute;
  inset: 1px 2px 2px 1px;
  background: var(--ui-text);
  clip-path: polygon(0 0, 0 100%, 6px 78%, 10px 100%, 14px 98%, 10px 75%, 19px 75%);
}
.quick-canvas-viewport.is-panning .quick-pointer { width: 20px; height: 20px; border-radius: 50%; clip-path: none; }
.quick-canvas-viewport.is-panning .quick-pointer::after { inset: 2px; border-radius: 50%; clip-path: none; }
@media (hover: hover) and (pointer: fine) {
  .quick-canvas-viewport,
  .quick-canvas-viewport .quick-node { cursor: none; }
}

/* Stage 12 — breadcrumb navigation and numeric node hotkeys */
.quick-breadcrumb, .quick-hotkey-badge { user-select: none; }

.database-stage {
  grid-template-rows: auto minmax(0, 1fr) 64px;
}







.database-category-browser { margin-bottom: 0; }



.order-line {
  -webkit-touch-callout: none;
  user-select: none;
}
.order-line.is-holding {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}
.order-line.is-holding::after { height: 5px; }

@media (max-width: 1099px) {
  .app-brand__mark {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--ui-text);
    font-size: 18px;
    letter-spacing: -.04em;
  }
  .app-brand { gap: 7px; }
  
  
  .database-flow-option:active{
    background: var(--ui-text);
    color: var(--ui-surface);
  }
  .database-stage {
    grid-template-rows: auto minmax(0, 1fr) 72px;
  }
  
  
  
  .database-flow-list { max-height: min(58dvh, 620px); }
  
  
  
  
  
  
  
  .database-flow-add {
    position: sticky;
    bottom: 72px;
    z-index: 22;
    min-height: 64px;
    box-shadow: 0 -1px 0 var(--ui-border);
  }

  .order-panel {
    grid-template-rows: 60px auto minmax(0, 1fr) auto;
  }
  .order-panel__topbar-actions { grid-template-columns: 1fr 1fr 60px; }
  .order-topbar-action,
  .order-panel__settings,
  .order-panel__close { min-height: 59px; }
  .order-panel__header {
    padding: 17px 18px 14px;
    border-bottom: 1px solid var(--ui-border);
  }
  .order-panel__header h2 { font-size: clamp(34px, 9vw, 42px); line-height: .95; }
  .order-panel__kicker { margin-bottom: 7px; }
  .order-list { padding-inline: 18px; }
  .order-line.is-selected { margin-inline: -18px; padding-inline: 18px; }
  .order-selection-dock { min-height: calc(68px + env(safe-area-inset-bottom)); }
  .selection-dock-button { min-height: 67px; }
}

@media (max-width: 640px) {
  .database-constructor__header {
    min-height: 142px;
    padding: 20px 16px 15px;
  }
  
  
  
  .database-flow-list { max-height: none; }
  .database-flow-option { min-height: 70px; padding: 13px 14px; }
  .database-flow-option__copy strong { font-size: 17px; }
  
  
  .quick-node {
    min-height: 44px;
    max-width: 156px;
    box-shadow: 0 3px 12px rgb(0 0 0 / .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 70ms !important;
    transition-delay: 0ms !important;
  }
  .database-flow-list, .order-list{ scroll-behavior: auto !important; }
}

:root {
  --rail-width: clamp(260px, 18vw, 300px);
  --order-width: clamp(390px, 27vw, 430px);
}





.order-panel.is-empty .order-empty { min-height: 0; }
.order-line.is-holding::after { height: 6px; box-shadow: 0 -1px 0 color-mix(in srgb, var(--ui-focus) 45%, transparent); }

@media (min-width: 1100px) {
  .database-constructor__header {
    min-height: clamp(184px, 20vh, 220px);
    padding: clamp(30px, 3.8vh, 44px) clamp(28px, 3.2vw, 44px) 22px;
  }
  
  
  
  
  
  
  
  .database-category-browser { border-bottom: 0; }
  
  
  .database-flow-list--code { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
  
  
  
  
  .database-stage {
    grid-template-rows: auto minmax(0, 1fr) 68px;
    min-height: calc(100dvh - 137px);
  }
  .database-constructor__header { min-height: 148px; }
  
  
  
  
  .database-flow-list {
    width: 100%;
    min-height: 0;
    max-height: min(52dvh, 520px);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .database-flow-add {
    bottom: calc(68px + env(safe-area-inset-bottom));
    min-height: 60px;
  }
  
  
  .order-panel {
    grid-template-rows: 60px auto minmax(0, 1fr) auto;
    transition: transform 150ms var(--ease-standard);
  }
  .order-panel__header { padding: 16px 18px 13px; }
  .order-panel__header h2 { font-size: clamp(32px, 9vw, 40px); }
  .order-empty { padding: 22px 0; }
  .order-empty small { margin-top: 18px; }
}

@media (max-width: 640px) {
  .app-brand { padding-inline: 14px 10px; }
  .app-brand__mark { font-weight: 700; }
  .topbar-order { min-width: 92px; }
  
  .database-constructor__header {
    min-height: 136px;
    padding: 18px 16px 13px;
  }
  
  
  .database-flow-list--code { grid-template-columns: 1fr; }
  .database-flow-option { min-height: 66px; padding: 12px 14px; }
  .database-flow-option.is-featured { min-height: 68px; }
  .database-flow-option.is-featured .database-flow-option__copy {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
  }
  .database-flow-option.is-featured .database-flow-option__copy strong { font-size: 27px; }
  
  .order-list { padding-inline: 16px; }
  .order-line.is-selected { margin-inline: -16px; padding-inline: 16px; }
}

:root[data-theme="dark"] .database-flow-option.is-active, :root[data-theme="dark"] .order-line.is-selected{
  background: var(--ui-selected, var(--ui-text));
  color: var(--ui-text, var(--ui-surface));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 90ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    transition-delay: 0ms !important;
  }
  
  
}




@media (max-width: 1099px) {
  .app-brand { gap: 5px; }
  .app-brand__mark {
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    color: var(--ui-text);
    font-size: 19px;
    line-height: 1;
    letter-spacing: -.045em;
  }
  .app-brand > div { min-width: 0; }
  .app-brand strong { font-size: 18px; line-height: 1; }
  .database-flow-add {
    position: sticky;
    z-index: 12;
    bottom: calc(68px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--ui-border);
  }
}

.database-stage { grid-template-rows: auto minmax(0, 1fr) !important; }




































.order-line { grid-template-columns: 34px minmax(0, 1fr) 48px; }

.quick-node--root > span { font-size: 17px; font-weight: 600; }
.quick-node--family > span { font-size: 15px; font-weight: 500; }

@media (max-width: 760px) {
  .database-stage { min-height: calc(100dvh - 139px); }
  
  
  
  
  
  
  
  
  
  
  .order-line { grid-template-columns: 29px minmax(0, 1fr) 40px; }
}






.database-scope-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  overflow-x: auto;
  border-right: 1px solid var(--ui-border);
  border-left: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  scrollbar-width: none;
  white-space: nowrap;
}
.database-scope-breadcrumb::-webkit-scrollbar { display: none; }
.database-scope-breadcrumb__button,
.database-scope-breadcrumb__current {
  flex: 0 0 auto;
  min-height: 41px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1;
  text-transform: lowercase;
}
.database-scope-breadcrumb__button { text-decoration: underline; text-underline-offset: 3px; }
.database-scope-breadcrumb__button:hover,
.database-scope-breadcrumb__button:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.database-scope-breadcrumb__current { display: inline-flex; align-items: center; color: var(--ui-text); font-weight: 500; }
.database-scope-breadcrumb__separator { flex: 0 0 auto; color: var(--ui-muted); font-size: 12px; }

.database-category-browser{
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--ui-border);
  border-top: 0;
  background: var(--ui-surface);
}
.database-level-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  text-transform: lowercase;
}
.database-level-heading strong { font-size: 14px; font-weight: 500; }
.database-level-heading small { color: var(--ui-muted); font-size: 11px; text-align: right; }
.database-level-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.database-level-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 74px;
  padding: 13px 15px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  text-align: left;
}
.database-level-option:hover,
.database-level-option:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }

.database-level-option strong,
.database-level-option small { display: block; min-width: 0; }
.database-level-option strong { overflow-wrap: anywhere; font-size: 16px; font-weight: 500; line-height: 1.16; }
.database-level-option small { margin-top: 6px; color: var(--ui-muted); font-size: 12px; line-height: 1.2; }
.database-level-option:hover small, .database-level-option:focus-visible small{ color: currentColor; opacity: .72; }
.database-level-option__arrow {
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}









.quick-node > small {
  display: block;
  margin-top: 6px;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.15;
  text-transform: lowercase;
}
.quick-node--candidate:hover > small,
.quick-node--candidate:focus-visible > small,
.quick-node--candidate.is-hovered > small { color: currentColor; opacity: .72; }
.quick-node--root > small,
.quick-node--ancestor > small { color: currentColor; opacity: .7; }



@media (max-width: 760px) {
  .database-constructor__header { min-height: 122px; padding: 15px 14px 11px; }
  
  
  
  
  
  .database-category-browser { grid-template-rows: 56px 40px 44px minmax(0, 1fr); }
  
  .database-level-heading { min-height: 44px; padding: 10px 12px; }
  .database-level-heading small { max-width: 48%; }
  .database-level-list { grid-template-columns: 1fr; }
  .database-level-option { min-height: 62px; padding: 10px 12px; border-right: 0; }
  .database-level-option strong { font-size: 15px; }
  .database-flow-list { max-height: none; }
  
  
  
  .interaction-column {
    grid-template-rows: minmax(0, 1fr);
    min-height: calc(100dvh - 66px);
  }
  .selection-area { min-height: calc(100dvh - 66px); }
}

@media (max-width: 380px) {
  .database-scope-breadcrumb { gap: 4px; }
  .database-scope-breadcrumb__button,
  .database-scope-breadcrumb__current {
    max-width: 108px;
    padding-inline: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.quick-node { flex-direction: column; align-items: flex-start; justify-content: center; }


@media (max-width: 1099px) and (orientation: landscape) and (max-height: 520px) {
  .app-topbar {
    min-height: 48px;
  }
  .app-brand {
    gap: 5px;
    padding: 6px 12px;
  }
  .app-brand__mark,
  .app-brand strong {
    font-size: 16px;
    line-height: 1;
  }
  .app-brand small { display: none; }
  .topbar-order {
    min-width: 84px;
    min-height: 47px;
    padding-inline: 10px;
  }
  .topbar-order b { margin-top: 1px; }

  
  
  
  

  .database-stage { min-height: 0; }
  .database-constructor__header {
    min-height: 52px;
    padding: 7px 12px 6px;
    align-items: center;
  }
  
  
  

  
  
  
  
  .database-category-browser {
    grid-template-rows: 44px 34px 34px minmax(0, 1fr);
  }
  

  .database-flow-search { min-height: 44px; }
  .database-flow-search input { min-height: 43px; }
  .database-scope-breadcrumb { min-height: 34px; }
  .database-scope-breadcrumb__button,
  .database-scope-breadcrumb__current {
    min-height: 33px;
    padding-inline: 9px;
  }
  .database-level-heading {
    min-height: 34px;
    padding: 6px 10px;
  }
  .database-level-heading strong { font-size: 12px; }
  .database-level-heading small { font-size: 10px; }
  .database-level-option {
    min-height: 52px;
    padding: 8px 10px;
  }
  .database-level-option strong { font-size: 14px; }
  .database-level-option small { margin-top: 3px; font-size: 10px; }
  
  .database-flow-option {
    min-height: 52px;
    padding: 9px 12px;
  }
  .database-flow-option__copy strong { font-size: 15px; }
  
  
  
  
  
  .database-flow-add { position: static; min-height: 48px; }

  .interaction-column {
    grid-template-rows: minmax(0, 1fr);
    min-height: calc(100dvh - 48px);
  }
  .selection-area { min-height: calc(100dvh - 48px); }
  .workspace-header { padding: 10px 12px 12px; }
  .workspace-heading h1 {
    margin-top: 5px;
    font-size: clamp(32px, 6.6vw, 40px);
  }
  .quick-navigation { min-height: 44px; }
  .quick-onboarding {
    left: 10px;
    bottom: 10px;
    width: min(420px, calc(100% - 20px));
    max-height: calc(100% - 20px);
    overflow-y: auto;
  }
  .quick-onboarding > header { min-height: 44px; }
  .quick-onboarding li { padding: 9px 12px; }
  .quick-onboarding > .primary-button { min-height: 46px; }
  .quick-review {
    top: 64px;
    right: 10px;
    width: min(430px, calc(100% - 20px));
    max-height: calc(100% - 74px);
    overflow-y: auto;
  }

  .modal-backdrop { padding: 8px; }
  .modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .modal__header {
    grid-template-columns: minmax(0, 1fr) 56px;
    min-height: 64px;
  }
  .modal__header > div { padding: 10px 16px; }
  .modal__header h3 {
    margin-top: 4px;
    font-size: clamp(25px, 4.6vw, 34px);
  }
  .modal__close { min-height: 63px; }
  .modal__body { padding: 16px; }
  .mode-chooser__intro { margin-bottom: 14px; }
  .mode-chooser__intro h4 {
    margin: 5px 0 7px;
    font-size: clamp(22px, 4vw, 30px);
  }
  .mode-chooser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-card { min-height: 126px; padding: 12px; }
  .mode-card > span { font-size: 22px; }
  .mode-card strong { margin-top: 8px; font-size: 19px; }
  .mode-card p { margin-top: 7px; font-size: 11px; line-height: 1.25; }
  .mode-card b { margin-top: 9px; font-size: 11px; }

  .order-panel {
    grid-template-rows: 48px auto minmax(0, 1fr) auto;
  }
  .order-panel__topbar-actions { grid-template-columns: 1fr 1fr 48px; }
  .order-topbar-action,
  .order-panel__settings,
  .order-panel__close { min-height: 47px; }
  .order-panel__header { padding: 10px 14px 9px; }
  .order-panel__header h2 { font-size: clamp(28px, 6vw, 34px); }
  .order-panel__kicker { margin-bottom: 4px; }
  .order-list { padding-inline: 14px; }
  .order-empty { padding: 14px 0; }
  .order-empty small { margin-top: 10px; }
  .order-selection-dock { min-height: calc(54px + env(safe-area-inset-bottom)); }
  .selection-dock-button { min-height: 53px; }
}










.database-flow-search {
  transition: border-color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui) var(--ease-standard);
}
.database-flow-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--ui-text);
}
.database-flow-option.is-compact .database-flow-option__copy small {
  letter-spacing: 0;
}

@media (max-width: 1099px) {
  
  
  
  
  
  
  
  
  

  .database-stage {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: calc(100dvh - 137px);
  }
  .database-constructor__header {
    min-height: 128px;
    padding: 18px 16px 14px;
  }
  
  
  
  .database-flow-list--code { grid-template-columns: 1fr; }
  .database-flow-option.is-compact {
    min-height: 72px;
    padding: 13px 14px;
    border-right: 0;
  }
  .database-flow-option.is-compact .database-flow-option__copy {
    display: grid;
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
  .database-flow-option.is-compact .database-flow-option__copy strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .database-flow-option.is-compact .database-flow-option__copy small {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.25;
  }
}

@media (max-width: 640px) {
  
  
  
  
  
  .database-flow-option.is-compact .database-flow-option__copy {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
  }
  .database-flow-option.is-compact .database-flow-option__copy strong {
    font-size: 25px;
  }
}

.settings-control-grid--single { grid-template-columns: minmax(0, 1fr); }
.settings-delivery-editor { display: grid; gap: 14px; }
.settings-delivery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 46px;
  align-content: start;
}
.settings-delivery-tag {
  display: inline-grid;
  grid-template-columns: auto 30px;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  text-align: left;
  text-transform: uppercase;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear;
}
.settings-delivery-tag > span { padding: 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.settings-delivery-tag > b {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-left: 1px solid var(--ui-border);
  font-size: 17px;
  font-weight: 400;
}
.settings-delivery-tag:hover,
.settings-delivery-tag:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.settings-delivery-tag:hover > b,
.settings-delivery-tag:focus-visible > b { border-left-color: currentColor; }
.settings-delivery-empty { color: var(--ui-muted); font-size: 13px; align-self: center; }
.settings-delivery-add { display: grid; grid-template-columns: minmax(0, 1fr) 126px; }
.settings-delivery-add input { min-height: 48px; border-right: 0; text-transform: none; }
.settings-delivery-add button {
  min-height: 48px;
  border: 1px solid var(--ui-border);
  background: var(--ui-text);
  color: var(--ui-surface);
  text-transform: lowercase;
}
.settings-delivery-add button:hover { box-shadow: inset 0 -3px 0 var(--ui-surface); }
.modal--settings .field-help { margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.4; }

/* Position step: buttons first, lists second */













/* Active order: stronger hierarchy, quieter metadata */
.order-line {
  min-height: 100px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.order-line__code { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.order-line__description { margin-top: 5px; font-size: 13px; line-height: 1.28; }
.order-line__color { margin-top: 5px; }
.order-line__meta { gap: 6px; margin-top: 8px; }
.order-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-soft);
  font-size: 10px;
  line-height: 1.1;
  text-transform: lowercase;
}
.order-tag--delivery { border-color: var(--ui-border); color: var(--ui-text); }
.order-line.is-selected .order-tag { border-color: currentColor; color: currentColor; }
.order-line__quantity { padding-top: 1px; font-size: 13px; font-weight: 500; }

@media (max-width: 1099px) {
  .modal--settings .settings-shell { grid-template-columns: 1fr; }
  .settings-section--constructor,
  .settings-section--appearance,
  .settings-section--deliveries,
  .settings-section--order,
  .settings-system { grid-column: 1; }
  .settings-section__header { min-height: 76px; }
  .settings-section__header > span { padding-top: 18px; }
  .settings-section__header > div { padding: 14px 16px; }
  .settings-section__header strong { font-size: 18px; }
  .settings-section__header p { margin-top: 5px; font-size: 11px; }
  .settings-section__content { padding: 16px; }
  .settings-action-grid button { min-height: 82px; padding: 13px 14px; }
  .settings-action-grid button strong { margin-top: 13px; font-size: 14px; }

  
}

@media (max-width: 640px) {
  .settings-delivery-tags { gap: 6px; }
  .settings-delivery-tag { min-height: 40px; }
  .settings-delivery-tag > span { padding-inline: 10px; font-size: 12px; }
  .settings-delivery-add { grid-template-columns: minmax(0, 1fr) 96px; }
  .settings-delivery-add button { font-size: 12px; }
  .settings-action-grid { grid-template-columns: 1fr 1fr; }
  .settings-action-grid button { min-height: 78px; }

  
  
  
  

  .order-panel__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    align-items: end;
    padding: 14px 16px 12px;
  }
  .order-panel__heading { min-width: 0; }
  .order-panel__header h2 { font-size: 32px; }
  .order-panel__kicker { margin-bottom: 5px; }
  .order-count { align-self: end; padding-bottom: 2px; font-size: 11px; white-space: nowrap; }
  .order-list { padding-inline: 14px; }
  .order-line {
    grid-template-columns: 28px minmax(0, 1fr) 38px !important;
    gap: 8px;
    min-height: 92px;
    padding: 14px 0;
  }
  .order-line.is-selected { margin-inline: -14px; padding-inline: 14px; }
  .order-line__code { font-size: 17px; }
  .order-line__description { font-size: 12px; }
  .order-tag { min-height: 20px; padding-inline: 6px; font-size: 9px; }
  .order-line__quantity { font-size: 12px; }
}






.database-flow-list--model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border: 1px solid var(--ui-border);
}
.database-flow-list--model .database-flow-option {
  min-height: 88px;
  border-right: 1px solid var(--ui-border);
}
.database-flow-list--model .database-flow-option:nth-child(2n) { border-right: 0; }
.database-flow-list--model .database-flow-option__copy strong {
  font-size: 18px;
  font-weight: 500;
}
.database-flow-list--model .database-flow-option__copy small:empty,
.database-flow-list--delivery .database-flow-option__copy small:empty { display: none; }

.database-flow-list--delivery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
}
.database-flow-list--delivery .database-flow-option {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 16px;
  width: auto;
  min-width: min(220px, 100%);
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.database-flow-list--delivery .database-flow-option:hover { box-shadow: inset 0 -3px 0 var(--ui-text); }
.database-flow-list--delivery .database-flow-option.is-active { box-shadow: none; }
.database-flow-list--delivery .database-flow-option__copy strong {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.database-flow-summary {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}





.database-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 14px;
}
.database-review-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-soft);
  font-size: 11px;
  line-height: 1.15;
  text-transform: lowercase;
}
.database-review-tag--delivery {
  border-color: var(--ui-border);
  color: var(--ui-text);
  font-weight: 500;
}





.quick-review__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--ui-border);
}
.quick-review__facts > span {
  min-height: 62px;
  padding: 11px 14px;
  border-right: 1px solid var(--ui-border);
}
.quick-review__facts > span:last-child { border-right: 0; }
.quick-review__facts small,
.quick-review__facts b { display: block; }
.quick-review__facts small {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
}
.quick-review__facts b {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
}
.quick-review__delivery {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.quick-review__delivery > span {
  display: block;
  margin-bottom: 9px;
  color: var(--ui-muted);
  font-size: 10px;
  text-transform: lowercase;
}
.quick-review__delivery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-review__delivery-tags button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.quick-review__delivery-tags button:hover,
.quick-review__delivery-tags button:focus-visible,
.quick-review__delivery-tags button.is-active,
.quick-review__delivery-tags button[aria-pressed="true"] {
  background: var(--ui-text);
  color: var(--ui-surface);
  outline: 0;
}
.quick-review footer button {
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, transform var(--motion-fast) var(--ease-standard);
}
.quick-review footer button:active { transform: translateY(1px); }

@media (max-width: 1099px) {
  
  .database-flow-list--model { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .database-flow-list--model .database-flow-option { min-height: 74px; padding: 12px 13px; }
  .database-flow-list--delivery { gap: 7px; padding: 8px; }
  .database-flow-list--delivery .database-flow-option {
    min-width: 0;
    flex: 1 1 calc(50% - 7px);
    min-height: 48px;
  }
  
  
  
  
  
}

@media (max-width: 640px) {
  .database-flow-list--model { grid-template-columns: 1fr 1fr; }
  .database-flow-list--model .database-flow-option {
    min-height: 68px;
    padding: 10px 11px;
  }
  .database-flow-list--model .database-flow-option__copy strong { font-size: 14px; }
  .database-flow-list--delivery .database-flow-option {
    flex-basis: 100%;
    min-height: 46px;
  }
  .database-flow-list--delivery .database-flow-option__copy strong { font-size: 12px; }
  
  
  
  
  
  .database-review-tags { gap: 5px; padding: 9px 10px; }
  .database-review-tag { min-height: 26px; padding: 4px 7px; font-size: 9px; }
  
  

  .quick-review__identity { padding: 14px; }
  .quick-review__facts > span { min-height: 56px; padding: 9px 11px; }
  .quick-review__facts b { font-size: 12px; }
  .quick-review__delivery { padding: 10px 11px 12px; }
  .quick-review__delivery-tags { gap: 5px; }
  .quick-review__delivery-tags button { min-height: 34px; padding: 6px 8px; font-size: 10px; }
}

.settings-choice-field { min-width: 0; }
.settings-choice-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ui-text-soft);
  font-size: 12px;
  line-height: 1.2;
  text-transform: lowercase;
}
.settings-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.settings-choice-group--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-choice-group button {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 9px 12px;
  border-right: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
  text-transform: lowercase;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, transform var(--motion-fast) var(--ease-standard);
}
.settings-choice-group button:last-child { border-right: 0; }
.settings-choice-group button:hover,
.settings-choice-group button:focus-visible { background: var(--ui-surface-raised); color: var(--ui-text); outline: 0; }
.settings-choice-group button:active { transform: translateY(1px); }
.settings-choice-group button.is-active,
.settings-choice-group button[aria-pressed="true"] {
  background: var(--ui-text);
  color: var(--ui-surface);
}
.settings-choice-group button.is-active::after,
.settings-choice-group button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: .72;
}

.mode-chooser__intro { margin-bottom: 18px; }
.mode-chooser__intro p { max-width: 52ch; font-size: 14px; line-height: 1.42; }
.mode-chooser__grid { border-color: var(--ui-border); }
.mode-card {
  position: relative;
  min-height: 184px;
  padding: 20px 22px;
  transition: background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.mode-card > span { color: var(--ui-muted); font-size: 22px; line-height: 1; }
.mode-card strong { margin-top: 25px; font-size: 25px; }
.mode-card p { max-width: 38ch; margin-top: 10px; font-size: 13px; line-height: 1.38; }
.mode-card b { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.mode-card b i { font-style: normal; font-size: 18px; }
.mode-card:hover b { border-top-color: currentColor; }
.mode-card:active { transform: translateY(1px); }

@media (max-width: 760px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .database-constructor__header {
    min-height: 126px;
    padding-top: 17px;
  }
  
  

  .modal--mode-chooser { width: min(100%, calc(100vw - 24px)); }
  .mode-chooser__grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 142px; padding: 16px; }
  .mode-card strong { margin-top: 15px; font-size: 21px; }
  .mode-card p { margin-top: 7px; font-size: 12px; }
  .mode-card b { margin-top: 14px; padding-top: 9px; font-size: 12px; }

  .settings-choice-group button { min-height: 50px; padding: 8px 9px; font-size: 12px; }
}

@media (max-width: 430px) {
  .app-brand { min-width: 0; }
  .app-brand strong { font-size: 16px; letter-spacing: -.03em; }
  .topbar-order { min-width: 88px; padding-inline: 10px; }
  .topbar-order span { font-size: 12px; }
  .topbar-order b { font-size: 13px; font-variant-numeric: tabular-nums; }
  
  
  .settings-control-grid { grid-template-columns: 1fr; gap: 13px; }
  .settings-choice-group--three button { padding-inline: 6px; font-size: 11px; }
}

.database-flow-empty--composed {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px 14px;
  min-height: 132px;
  padding: 20px;
  color: var(--ui-text);
  text-transform: lowercase;
}
.database-flow-empty--composed > span {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 2px;
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.database-flow-empty--composed > strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}
.database-flow-empty--composed > small {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.35;
}
.database-flow-empty--composed > button {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 12px;
  text-transform: lowercase;
}
.database-flow-empty--composed > button:hover,
.database-flow-empty--composed > button:focus-visible {
  background: var(--ui-text);
  color: var(--ui-surface);
  outline: 0;
}

.order-empty {
  position: relative;
  justify-content: center;
  padding: 34px 0 42px;
}
.order-empty__index {
  display: block;
  margin-bottom: 18px;
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.order-empty strong {
  max-width: 260px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.order-empty span:not(.order-empty__index) { margin-top: 12px; }
.order-empty__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin-top: 24px;
  border: 1px solid var(--ui-border);
}
.order-empty__actions button {
  min-width: 0;
  min-height: 52px;
  padding: 0 10px;
  border-right: 1px solid var(--ui-border);
  font-size: 12px;
  text-transform: lowercase;
}
.order-empty__actions button:last-child { border-right: 0; }
.order-empty__actions button:first-child { background: var(--ui-text); color: var(--ui-surface); }
.order-empty__actions button:hover,
.order-empty__actions button:focus-visible { box-shadow: inset 0 -3px 0 currentColor; outline: 0; }
.order-empty small {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.settings-order-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-order-group {
  min-width: 0;
  border-right: 1px solid var(--ui-border);
}
.settings-order-group:last-child { border-right: 0; }
.settings-order-group > header {
  min-height: 64px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ui-border);
}
.settings-order-group > header span,
.settings-order-group > header small { display: block; }
.settings-order-group > header span { font-size: 13px; font-weight: 500; text-transform: lowercase; }
.settings-order-group > header small { margin-top: 5px; color: var(--ui-muted); font-size: 10px; line-height: 1.25; text-transform: lowercase; }
.settings-action-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-action-grid--pair button:nth-child(n) {
  min-height: 86px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 0;
}
.settings-action-grid--pair button:last-child { border-right: 0; }
.settings-action-grid--pair button span { font-size: 10px; }
.settings-action-grid--pair button strong { margin-top: 14px; font-size: 14px; line-height: 1.2; }
.settings-order-group--danger > header { border-top: 2px solid var(--ui-danger); }
.settings-order-group--danger > header span { color: var(--ui-danger); }

.modal__body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal__header,
.modal__footer { background: var(--ui-surface); }
.modal__footer .primary-button { background: var(--ui-text); color: var(--ui-surface); }
.modal__footer .primary-button:not(:disabled):hover { box-shadow: inset 0 -4px 0 var(--ui-surface); }

.toast {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  align-items: stretch;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-canvas) 72%, transparent);
}
.toast__mark {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--ui-border);
  background: var(--ui-text);
  color: var(--ui-surface);
  font-size: 13px;
  font-weight: 600;
}
.toast__message {
  align-self: center;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.35;
  text-transform: lowercase;
}
.toast__dismiss {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 54px;
  border-left: 1px solid var(--ui-border);
  font-size: 19px;
}
.toast__dismiss:hover,
.toast__dismiss:focus-visible { background: var(--ui-text); color: var(--ui-surface); outline: 0; }
.toast.error,
.toast[data-kind="error"] { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-danger); }
.toast.error .toast__mark,
.toast[data-kind="error"] .toast__mark { border-right-color: var(--ui-danger); background: var(--ui-danger); color: var(--ui-surface); }

@media (max-width: 1099px) {
  .settings-order-groups { grid-template-columns: 1fr; }
  .settings-order-group {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .settings-order-group:last-child { border-bottom: 0; }
  .settings-order-group > header {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    min-height: 50px;
    padding: 11px 16px;
  }
  .settings-order-group > header small { margin: 0; }
  .settings-order-group--danger > header { border-top: 0; border-left: 3px solid var(--ui-danger); }
}

@media (max-width: 640px) {
  .order-empty {
    justify-content: flex-start;
    min-height: 100%;
    padding: 28px 0 34px;
  }
  .order-empty strong { font-size: 22px; }
  .order-empty__actions { grid-template-columns: 1fr; }
  .order-empty__actions button { border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .order-empty__actions button:last-child { border-bottom: 0; }

  .database-flow-empty--composed {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px 10px;
    min-height: 122px;
    padding: 16px 14px;
  }
  .database-flow-empty--composed > button {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: 8px;
  }

  .modal__header { padding-top: env(safe-area-inset-top); }
  .modal__body { -webkit-overflow-scrolling: touch; }
  .modal__footer { position: relative; z-index: 2; }
  .settings-order-group > header {
    grid-template-columns: 76px minmax(0, 1fr);
    padding-inline: 14px;
  }
  .settings-action-grid--pair button { min-height: 72px; padding: 10px 12px; }
  .settings-action-grid--pair button strong { margin-top: 9px; font-size: 13px; }

  .toast-stack { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 20px); }
  .toast-stack--errors { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
  .toast { grid-template-columns: 30px minmax(0, 1fr) 40px; min-height: 52px; }
  .toast__message { padding: 9px 11px; font-size: 12px; }
  .toast__dismiss { min-width: 40px; min-height: 50px; }
}

.skip-link {
  position: fixed;
  z-index: 1200;
  top: 8px;
  left: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 12px;
  text-transform: lowercase;
  transform: translateY(-160%);
  transition: transform var(--motion-ui) var(--ease-enter);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.app-boot {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: clamp(20px, 4vw, 48px);
  background: var(--ui-canvas);
  color: var(--ui-text);
  transition: opacity 180ms linear, visibility 180ms linear;
}
.app-boot.is-leaving { visibility: hidden; opacity: 0; pointer-events: none; }
.app-boot__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border);
  font-size: clamp(21px, 3vw, 30px);
  letter-spacing: -.045em;
  text-transform: lowercase;
}
.app-boot__brand b { font-weight: 700; }
.app-boot__brand span { font-weight: 400; }
.app-boot__grid {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(90px, 1fr));
  align-self: center;
  min-height: min(54vh, 520px);
  border-top: 1px solid var(--ui-border);
  border-left: 1px solid var(--ui-border);
}
.app-boot__grid span {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}
.app-boot__grid span::after {
  content: "";
  position: absolute;
  inset: 20% 18%;
  background: var(--ui-surface-raised);
  transform-origin: left;
  animation: app-boot-pulse 1.15s var(--ease-standard) infinite alternate;
}
.app-boot__grid span:nth-child(2n)::after { inset: 28% 13% 44%; }
.app-boot__grid span:nth-child(3n)::after { inset: 18% 28% 56% 12%; }
@keyframes app-boot-pulse { from { opacity: .35; transform: scaleX(.68); } to { opacity: .9; transform: scaleX(1); } }
.app-boot__status {
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 12px;
  text-transform: lowercase;
}
body.is-booting .app-shell { visibility: hidden; }

[data-order-storage-status][data-state="saved"] { color: var(--ui-success); }
[data-order-storage-status][data-state="saving"] { color: var(--ui-muted); }
[data-order-storage-status][data-state="error"] { color: var(--ui-danger); }

/* One focus language for every custom control. */
.database-flow-option:focus-visible, .database-level-option:focus-visible, .database-scope-breadcrumb__button:focus-visible, .quick-home:focus-visible, .quick-breadcrumb__button:focus-visible, .quick-node:focus-visible, .settings-choice-group button:focus-visible, .settings-delivery-tag:focus-visible, .settings-action-grid button:focus-visible, .settings-system summary:focus-visible, .settings-system__content button:focus-visible, .order-topbar-action:focus-visible, .order-panel__settings:focus-visible, .order-panel__close:focus-visible, .order-empty__actions button:focus-visible, .toast__dismiss:focus-visible, .modal__close:focus-visible, .modal__footer button:focus-visible, .mode-card:focus-visible{
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
  box-shadow: none;
}
.order-line:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
  box-shadow: inset 5px 0 0 var(--ui-focus);
}
.order-line.is-selected:focus-visible { outline-color: var(--ui-surface); box-shadow: inset 5px 0 0 var(--ui-surface); }

/* Busy dialogs show activity without washing out all content. */
.modal[aria-busy="true"] { cursor: progress; }
.modal[aria-busy="true"] .modal__body { opacity: 1; pointer-events: none; }
.modal[aria-busy="true"] .modal__header { position: relative; }
.modal[aria-busy="true"] .modal__header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--ui-text);
  transform: scaleX(.28);
  transform-origin: left;
  animation: modal-busy-progress 900ms var(--ease-standard) infinite alternate;
}
@keyframes modal-busy-progress { to { transform: scaleX(1); } }
.modal[aria-busy="true"] .modal__footer button { color: var(--ui-muted); }

/* Stronger hierarchy inside the active document without extra cards. */
.order-panel__version { display: inline-flex; align-items: center; gap: 3px; }
.order-line { transition: background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui) var(--ease-standard); }
.order-line__index { font-variant-numeric: tabular-nums; }
.order-tag { transition: border-color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard); }

@media (max-width: 760px) {
  .app-boot { padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .app-boot__grid {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(72px, 1fr));
    min-height: min(56vh, 430px);
  }
  .app-boot__brand { padding-top: env(safe-area-inset-top); font-size: 20px; }
  .app-boot__status { padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot__grid span::after,
  .modal[aria-busy="true"] .modal__header::after { animation: none; }
  .app-boot, .skip-link { transition: none; }
}

@media (max-width: 1099px) {
  .app-topbar__actions {
    display: grid;
    grid-template-columns: 48px auto;
    align-items: stretch;
  }
  .app-topbar__actions > [data-action="settings"] {
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 65px;
    padding: 0;
    border-left: 1px solid var(--ui-border);
    background: var(--ui-surface);
  }
  .app-topbar__actions > [data-action="settings"] > span {
    display: block;
    font-size: 18px;
    line-height: 1;
  }
  .app-topbar__actions > [data-action="settings"] > b { display: none; }
  .app-topbar__actions > [data-action="settings"]:hover,
  .app-topbar__actions > [data-action="settings"]:focus-visible {
    background: var(--ui-text);
    color: var(--ui-surface);
    outline: 0;
  }
  .topbar-order {
    display: grid;
    align-content: center;
    min-width: 86px;
    padding-inline: 12px;
  }
  .topbar-order span {
    color: var(--ui-text-soft);
    font-size: 11px;
    line-height: 1.1;
  }
  .topbar-order b {
    margin-top: 3px;
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .topbar-order:hover,
  .topbar-order:focus-visible {
    background: var(--ui-text);
    color: var(--ui-surface);
    outline: 0;
  }
  .topbar-order:hover span,
  .topbar-order:hover b,
  .topbar-order:focus-visible span,
  .topbar-order:focus-visible b { color: currentColor; }

  
  
  
}

@media (max-width: 430px) {
  .app-topbar__actions { grid-template-columns: 44px auto; }
  .app-topbar__actions > [data-action="settings"] {
    min-width: 44px;
  }
  .topbar-order { min-width: 76px; padding-inline: 9px; }
  .topbar-order span { font-size: 10px; }
  .topbar-order b { font-size: 15px; }
  
}

@media (max-width: 1099px) and (orientation: landscape) and (max-height: 520px) {
  .app-topbar__actions > [data-action="settings"] {
    min-height: 47px;
  }
  
  
}

.export-choice-field { display: grid; gap: 8px; }
.export-choice-field__label,
.combine-choice-field > span {
  color: var(--ui-muted);
  font-size: var(--text-xs);
  text-transform: lowercase;
}
.export-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ui-border);
}
.export-choice-group--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.export-choice-group button {
  min-width: 0;
  min-height: 50px;
  padding: 8px 10px;
  border-right: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
  text-transform: lowercase;
  transition: background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui) var(--ease-standard);
}
.export-choice-group button:last-child { border-right: 0; }
.export-choice-group button.is-active {
  background: var(--ui-text);
  color: var(--ui-surface);
}
.export-choice-group button:not(.is-active):hover,
.export-choice-group button:not(.is-active):focus-visible { box-shadow: inset 0 -3px 0 var(--ui-text); }
.export-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ui-border);
}
.export-switches .export-toggle {
  min-height: 50px;
  border: 0;
  border-right: 1px solid var(--ui-border);
}
.export-switches .export-toggle:last-child { border-right: 0; }
.export-switches .export-toggle:has(input:checked) { background: var(--ui-surface-raised); }

.combine-choice-field { display: grid; gap: 8px; margin: 16px 0; }
.choice-tag-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}
.choice-tag-grid button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 13px;
  line-height: 1.1;
  text-align: left;
  text-transform: lowercase;
  transition: background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard), border-color var(--motion-ui) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.choice-tag-grid button:hover,
.choice-tag-grid button:focus-visible { border-color: var(--ui-border); }
.choice-tag-grid button:active { transform: translateY(1px); }
.choice-tag-grid button.is-active {
  border-color: var(--ui-text);
  background: var(--ui-text);
  color: var(--ui-surface);
}
.choice-tag-grid--colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}
.choice-tag-grid--colors button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  overflow-wrap: anywhere;
}
.bulk-value-card .choice-tag-grid { margin-top: 0; }
.bulk-editor__controls:has(.choice-tag-grid) { padding-bottom: 22px; }

@media (max-width: 760px) {
  .export-config { gap: 14px; padding: 16px; }
  .export-choice-group button { min-height: 48px; font-size: 12px; }
  .export-choice-group--three { grid-template-columns: 1fr; }
  .export-choice-group--three button {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .export-choice-group--three button:last-child { border-bottom: 0; }
  .export-switches { grid-template-columns: 1fr; }
  .export-switches .export-toggle {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .export-switches .export-toggle:last-child { border-bottom: 0; }

  .choice-tag-grid--delivery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-tag-grid--delivery button { width: 100%; min-width: 0; }
  .choice-tag-grid--colors { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; }
  .bulk-editor__controls { padding: 15px; }
}

@media (max-width: 420px) {
  .choice-tag-grid--delivery,
  .choice-tag-grid--colors { grid-template-columns: 1fr; }
  .choice-tag-grid--colors { max-height: 205px; }
}

.completed-order-detail__back { display: none; }
.completed-orders-empty__action {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 14px;
  border: 1px solid var(--ui-border);
}
.completed-order-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
}
.completed-order-card > span { grid-column: 1 / -1; font-weight: 500; }
.completed-order-card > strong { grid-column: 1; margin-top: 10px; color: var(--ui-text-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.completed-order-card > small { grid-column: 2; align-self: end; margin-top: 10px; text-align: right; white-space: nowrap; }
.completed-order-card.is-active > strong,
.completed-order-card.is-active > small { color: currentColor; opacity: .72; }

.completed-order-line { align-items: start; }
.completed-order-line__position { line-height: 1.28; }
.completed-order-line__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.completed-order-line__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-soft);
  font-size: 11px;
  line-height: 1.1;
}
.completed-order-line__note {
  display: block;
  max-width: 60ch;
  margin-top: 8px !important;
  color: var(--ui-muted);
  line-height: 1.35;
}
.completed-order-line > b { padding-top: 1px; font-variant-numeric: tabular-nums; }

.completed-order-detail__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(150px, .5fr);
  border-top: 1px solid var(--ui-border);
}
.completed-order-detail__action-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-right: 1px solid var(--ui-border);
}
.completed-order-detail__actions button {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 10px 14px;
  border-right: 1px solid var(--ui-border);
  text-align: left;
  text-transform: lowercase;
}
.completed-order-detail__action-group button:last-child { border-right: 0; }
.completed-order-detail__actions button > span {
  display: block;
  color: var(--ui-muted);
  font-size: 10px;
  letter-spacing: .025em;
}
.completed-order-detail__actions button > strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
}
.completed-order-detail__action-group--primary button:first-child {
  background: var(--ui-text);
  color: var(--ui-surface);
}
.completed-order-detail__action-group--primary button:first-child > span { color: currentColor; opacity: .7; }
.completed-order-detail__action-group--primary button:first-child:hover,
.completed-order-detail__action-group--primary button:first-child:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-focus); }
.completed-order-detail__actions button:not(.is-danger):not(:first-child):hover { background: var(--ui-surface-raised); color: var(--ui-text); }
.completed-order-detail__delete { border-right: 0 !important; color: var(--ui-danger); }
.completed-order-detail__delete > span { color: currentColor !important; opacity: .7; }
.completed-order-detail__delete:hover { background: var(--ui-danger) !important; color: var(--ui-surface) !important; }

@media (max-width: 900px) {
  .completed-order-detail__actions { grid-template-columns: 1fr; }
  .completed-order-detail__action-group { border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .completed-order-detail__delete { min-height: 58px !important; border-bottom: 0 !important; }
}

@media (max-width: 760px) {
  .modal--completed-orders .modal__body { overflow: hidden; }
  .completed-orders {
    display: block;
    height: min(720px, calc(100dvh - 126px));
    min-height: 0;
    overflow: hidden;
  }
  .completed-orders__rail,
  .completed-orders__detail {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .completed-orders__rail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
    border-bottom: 0;
  }
  .completed-orders__detail {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .completed-orders[data-archive-view="list"] .completed-orders__detail { display: none; }
  .completed-orders[data-archive-view="detail"] .completed-orders__rail { display: none; }
  .completed-order-detail__back {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    gap: 8px;
    grid-column: 1 / -1;
    width: fit-content;
    min-height: 38px;
    margin: 0 0 14px;
    color: var(--ui-muted);
    font-size: 12px;
  }
  .completed-order-detail__back b { font-weight: 400; }
  .completed-order-detail__header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 15px 16px 14px;
  }
  .completed-order-detail__header > div { min-width: 0; }
  .completed-order-detail__header h4 { font-size: clamp(27px, 8vw, 38px); }
  .completed-order-detail__header time { max-width: 112px; text-align: right; white-space: normal; }
  .completed-order-detail__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .completed-order-detail__metrics div { min-height: 58px; padding: 10px 12px; border-right: 1px solid var(--ui-border); border-bottom: 0; }
  .completed-order-detail__metrics div:last-child { border-right: 0; }
  .completed-order-detail__metrics dd { margin-top: 5px; font-size: 19px; }
  .completed-order-detail__lines { padding-inline: 16px; }
  .completed-order-line { grid-template-columns: 25px minmax(0, 1fr) 40px; padding: 13px 0; }
  .completed-order-detail__actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--ui-surface);
  }
  .completed-order-detail__actions button { min-height: 58px; padding: 8px 11px; }
  .completed-order-detail__actions button > strong { font-size: 12px; }
  .completed-order-detail__delete { min-height: 48px !important; }
  .completed-orders__search { padding: 13px 14px; }
  .completed-orders__search > span { margin-bottom: 6px; }
  .completed-orders__search input { min-height: 46px; }
  .completed-order-card { min-height: 84px; padding: 13px 14px; }
}

@media (max-width: 340px) {
  .completed-order-detail__header { grid-template-columns: 1fr; }
  .completed-order-detail__header time { margin-top: 9px; max-width: none; text-align: left; }
  .completed-order-detail__action-group { grid-template-columns: 1fr; }
  .completed-order-detail__action-group button { border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .completed-order-detail__action-group button:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  .completed-order-detail__action-group > button:last-child { grid-column: auto; }
  .completed-order-detail__delete { grid-column: 1 / -1; }
}

.app-grid, .database-constructor, .selection-area, .order-panel, .export-panel, .bulk-editor__layout, .settings-shell, .database-category-browser, .database-flow-list, .database-flow-search, .database-scope-breadcrumb, .database-flow-summary, .quick-review, .quick-onboarding{
  border-color: var(--ui-border) !important;
}

.database-level-heading, .order-panel__topbar, .order-panel__header, .order-selection-dock, .quick-review > header, .quick-onboarding > header, .modal__header, .export-preview-shell > header, .completed-order-detail__header, .completed-order-detail__actions, .bulk-editor__workspace-head, .bulk-editor__controls, .settings-section > header{
  border-color: var(--ui-border) !important;
}

.database-flow-option, .database-level-option, .order-line, .completed-order-line, .combine-preview li, .mode-card, .bulk-editor__nav button, .export-destination{
  border-color: var(--ui-border) !important;
}

.database-flow-list,
.order-list,
.completed-order-detail__lines,
.combine-preview,
.preview-scroll {
  scrollbar-color: var(--ui-border) transparent;
}

.order-panel__header, .quick-review__identity, .completed-order-detail__header, .settings-section > header{
  position: relative;
}
.order-panel__header::after, .quick-review__identity::after, .completed-order-detail__header::after, .settings-section > header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ui-border);
  pointer-events: none;
}

.order-list {
  padding-inline: 24px;
}
.order-line {
  position: relative;
  gap: 12px;
  min-height: 96px;
  padding: 14px 0;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, box-shadow var(--motion-fast) linear, transform var(--motion-fast) linear;
}
.order-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ui-border);
  pointer-events: none;
}
.order-line:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ui-border);
  pointer-events: none;
}
.order-line:hover:not(.is-selected) {
  background: var(--ui-surface-raised);
  box-shadow: inset 3px 0 0 var(--ui-border);
}
.order-line:focus-visible {
  outline: none;
  background: var(--ui-surface-raised);
  box-shadow: inset 0 0 0 1px var(--ui-focus), inset 3px 0 0 var(--ui-focus);
}
.order-line__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  color: var(--ui-muted);
  line-height: 1;
}
.order-line__meta {
  gap: 6px;
}
.order-tag {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}
.order-tag--delivery {
  border-color: var(--ui-border);
  background: transparent;
}
.order-line__quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--ui-border);
  font-size: 12px;
  line-height: 1;
}
.order-line.is-selected {
  margin-inline: -12px;
  padding-inline: 12px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 4px 0 0 var(--ui-border), inset 0 0 0 1px var(--ui-border);
}
.order-line.is-selected::after {
  left: 12px;
  right: 12px;
  background: var(--ui-border);
}
.order-line.is-selected .order-line__index {
  border-color: var(--ui-border);
  background: var(--ui-text);
  color: var(--ui-surface);
}
.order-line.is-selected .order-line__description,
.order-line.is-selected .order-line__color {
  color: var(--ui-text);
}
.order-line.is-selected .order-tag {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.order-line.is-selected .order-tag--delivery,
.order-line.is-selected .order-line__quantity {
  background: var(--ui-text);
  border-color: var(--ui-text);
  color: var(--ui-surface);
}
.order-line.is-selected .order-line__quantity {
  font-weight: 600;
}
.order-line.is-holding {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ui-focus), inset 4px 0 0 var(--ui-focus);
}
.order-line.is-holding::after {
  left: 0;
  right: 0;
}
.selection-dock-status {
  border-color: var(--ui-border);
  box-shadow: 0 2px 0 var(--ui-border);
}
.selection-dock-button:not(:disabled):hover {
  box-shadow: inset 0 -2px 0 currentColor;
}

@media (max-width: 1099px) {
  .order-list {
    padding-inline: 20px;
  }
  .order-line {
    gap: 10px;
    min-height: 92px;
  }
  .order-line.is-selected {
    margin-inline: -10px;
    padding-inline: 10px;
  }
  .order-line.is-selected::after {
    left: 10px;
    right: 10px;
  }
}

@media (max-width: 640px) {
  .order-list {
    padding-inline: 16px;
  }
  .order-line {
    gap: 8px;
    min-height: 88px;
    padding-block: 13px;
  }
  .order-line__index {
    min-width: 28px;
    min-height: 18px;
    padding-inline: 5px;
  }
  .order-line__quantity {
    min-width: 32px;
    min-height: 24px;
  }
  .order-line.is-selected {
    margin-inline: -8px;
    padding-inline: 8px;
  }
  .order-line.is-selected::after {
    left: 8px;
    right: 8px;
  }
}

.modal {
  border-color: var(--ui-border);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--ui-canvas) 78%, transparent);
}
.modal__header {
  grid-template-columns: minmax(0, 1fr) 64px;
  min-height: 88px;
  border-bottom-color: var(--ui-border);
}
.modal__header > div { padding: 18px 24px; }
.modal__eyebrow {
  letter-spacing: .015em;
}
.modal__header h3 {
  margin-top: 6px;
  font-size: clamp(29px, 2.65vw, 40px);
  letter-spacing: -.052em;
}
.modal__close {
  min-height: 87px;
  border-left-color: var(--ui-border);
  font-size: 24px;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear;
}
.modal__close:hover,
.modal__close:focus-visible {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.modal__body { padding: 24px; }
.modal__footer {
  min-height: 62px;
  border-top-color: var(--ui-border);
  background: var(--ui-surface);
}
.modal__footer button {
  min-height: 61px;
  border: 0;
  border-right: 1px solid var(--ui-border);
  background: transparent;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, box-shadow var(--motion-fast) linear;
}
.modal__footer button:last-child { border-right: 0; }
.modal__footer button:not(.primary-button):not(.danger-button):not(:disabled):hover {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}
.modal__footer .primary-button {
  background: var(--ui-text);
  color: var(--ui-surface);
}
.modal__footer .primary-button:not(:disabled):hover {
  box-shadow: inset 0 -3px 0 var(--ui-surface);
}
.modal__footer .danger-button:not(:disabled):hover {
  background: var(--ui-danger);
  color: var(--ui-surface);
}

.modal-note, .confirm-warning, .combine-note, .catalog-import-note{
  position: relative;
  padding: 14px 16px 14px 18px;
  border: 0;
  border-left: 2px solid var(--ui-border);
  background: var(--ui-surface-raised);
}
.confirm-warning { border-left-color: var(--ui-danger); }

.modal input:not([type="hidden"]),
.modal textarea,
.modal select {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  transition: border-color var(--motion-fast) linear, box-shadow var(--motion-fast) linear, background-color var(--motion-fast) linear;
}
.modal input:not([type="hidden"]):hover,
.modal textarea:hover,
.modal select:hover { border-color: var(--ui-border); }
.modal input:not([type="hidden"]):focus,
.modal textarea:focus,
.modal select:focus {
  border-color: var(--ui-focus);
  box-shadow: inset 0 0 0 1px var(--ui-focus);
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 50px;
  border-color: var(--ui-border);
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, border-color var(--motion-fast) linear, box-shadow var(--motion-fast) linear, transform var(--motion-fast) linear;
}
.primary-button:not(:disabled):active,
.secondary-button:not(:disabled):active,
.danger-button:not(:disabled):active { transform: translateY(1px); }
.secondary-button:not(:disabled):hover {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}

/* Export: one framed composition, no doubled borders. */
.export-panel {
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  border-left: 0;
}
.export-intro {
  min-height: 100px;
  padding: 19px 22px;
  border-right: 0;
  border-bottom: 1px solid var(--ui-border);
}
.export-intro > strong { font-size: 27px; }
.export-config {
  gap: 14px;
  padding: 20px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 0;
}
.export-preview-shell {
  border-right: 0;
  border-bottom: 0;
  background: var(--ui-surface-raised);
}
.export-preview-shell > header {
  min-height: 48px;
  padding: 13px 16px;
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface);
}
.export-preview-shell .code-preview {
  max-height: 350px;
  background: transparent;
}
.export-choice-group,
.export-switches {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}
.export-choice-group button,
.export-switches .export-toggle {
  border-color: var(--ui-border);
}
.export-choice-group button.is-active {
  position: relative;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 0 -3px 0 var(--ui-border);
}
.export-choice-group button.is-active::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  background: var(--ui-text);
}
.export-choice-group button:not(.is-active):hover,
.export-choice-group button:not(.is-active):focus-visible {
  background: var(--ui-surface-raised);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}
.export-switches .export-toggle:has(input:checked) {
  background: var(--ui-surface-raised);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}
.export-toggle > span { border-color: var(--ui-border); }
.export-destinations {
  border-top: 1px solid var(--ui-border);
  border-right: 0;
}
.export-destination {
  min-height: 126px;
  padding: 17px 18px;
  border-right-color: var(--ui-border);
  background: var(--ui-surface);
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, box-shadow var(--motion-fast) linear, transform var(--motion-fast) linear;
}
.export-destination:not(.export-destination--primary):hover,
.export-destination:not(.export-destination--primary):focus-visible {
  background: var(--ui-surface-raised);
  box-shadow: inset 0 -3px 0 var(--ui-border);
}
.export-destination--primary {
  background: var(--ui-text);
  color: var(--ui-surface);
}
.export-destination:active { transform: translateY(1px); }

/* Bulk editor: active state follows the same language as active order rows. */
.bulk-editor__summary {
  padding: 16px 18px;
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}
.bulk-editor__summary > strong { font-size: 52px; }
.bulk-editor__layout {
  margin-top: 14px;
  border-color: var(--ui-border);
}
.bulk-editor__nav { border-right-color: var(--ui-border); }
.bulk-editor__nav button {
  position: relative;
  min-height: 68px;
  padding: 12px 14px;
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface);
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear, box-shadow var(--motion-fast) linear;
}
.bulk-editor__nav button:hover:not(.is-active),
.bulk-editor__nav button:focus-visible:not(.is-active) {
  background: var(--ui-surface-raised);
  box-shadow: inset 3px 0 0 var(--ui-border);
}
.bulk-editor__nav button.is-active {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 4px 0 0 var(--ui-border);
}
.bulk-editor__nav button.is-active small { color: var(--ui-muted); opacity: 1; }
.bulk-editor__nav button.is-active::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--ui-text);
  transform: translateY(-50%);
}
.bulk-editor__workspace-head {
  min-height: 74px;
  padding: 15px 18px;
  border-bottom-color: var(--ui-border);
}
.bulk-editor__workspace-head h4 { margin-top: 5px; font-size: 25px; }
.bulk-editor__count { font-size: 34px; font-variant-numeric: tabular-nums; }
.bulk-editor__controls {
  padding: 16px 18px;
  border-bottom-color: var(--ui-border);
}
.bulk-editor__preview { padding: 16px 18px 18px; }
.bulk-editor__preview-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
}
.bulk-preview-row {
  border-top-color: var(--ui-border);
}
.choice-tag-grid { gap: 6px; }
.choice-tag-grid button {
  min-height: 40px;
  border-color: var(--ui-border);
  background: var(--ui-surface);
}
.choice-tag-grid button:hover,
.choice-tag-grid button:focus-visible {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}
.choice-tag-grid button.is-active {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}
.choice-tag-grid button.is-active::after {
  content: " ·";
  font-weight: 700;
}

/* Settings: avoid doubled grid lines and keep action hierarchy predictable. */
.settings-shell { border-left: 0; }
.settings-section { border-right-color: var(--ui-border); border-bottom-color: var(--ui-border); }
.settings-section:nth-child(2n) { border-right-color: var(--ui-border); }
.settings-section__header { border-bottom-color: var(--ui-border); }
.settings-section__header > span { border-right-color: var(--ui-border); }


.settings-action-grid button { border-color: var(--ui-border); }
.settings-action-grid button:not(.is-danger):hover,
.settings-action-grid button:not(.is-danger):focus-visible {
  background: var(--ui-surface-raised);
  box-shadow: inset 0 -2px 0 var(--ui-border);
}
.settings-system { border-right: 0; border-bottom-color: var(--ui-border); }
.settings-system summary > span,
.settings-system summary > b { border-color: var(--ui-border); }
.settings-system__content article { border-bottom-color: var(--ui-border); }

@media (max-width: 760px) {
  .modal-backdrop { align-items: end; padding: 0; }
  .modal {
    width: 100vw;
    max-height: 100dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
  }
  .modal__header {
    grid-template-columns: minmax(0, 1fr) 56px;
    min-height: 66px;
  }
  .modal__header > div { padding: 12px 16px; }
  .modal__header h3 { font-size: clamp(25px, 7.2vw, 32px); }
  .modal__close { min-height: 65px; }
  .modal__body { padding: 16px; }
  .modal__footer { min-height: 58px; }
  .modal__footer button { min-height: 57px; }

  .export-panel { display: flex; flex-direction: column; }
  .export-intro { order: 1; min-height: 0; padding: 15px 16px; }
  .export-config { order: 2; padding: 15px 16px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .export-preview-shell { order: 3; border-bottom: 1px solid var(--ui-border); }
  .export-destinations { order: 4; grid-template-columns: 1fr; }
  .export-destination {
    min-height: 82px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    padding: 13px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .export-destination:last-child { border-bottom: 0; }
  .export-destination__copy strong { font-size: 17px; }
  .export-destination__copy small { margin-top: 5px; line-height: 1.3; }

  .bulk-editor__summary { padding: 14px; }
  .bulk-editor__summary > strong { font-size: 42px; }
  .bulk-editor__layout { grid-template-columns: 1fr; }
  .bulk-editor__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .bulk-editor__nav button {
    min-height: 58px;
    border-right: 1px solid var(--ui-border);
  }
  .bulk-editor__nav button:nth-child(2n) { border-right: 0; }
  .bulk-editor__nav button.is-active { box-shadow: inset 0 -3px 0 var(--ui-border); }
  .bulk-editor__nav button.is-active::after { top: 10px; right: 10px; transform: none; }
  .bulk-editor__workspace-head { min-height: 62px; padding: 12px 14px; }
  .bulk-editor__controls,
  .bulk-editor__preview { padding-inline: 14px; }

  .settings-section { border-right: 0; }
}

@media (max-width: 420px) {
  .modal__footer { grid-auto-flow: row; grid-auto-columns: auto; }
  .modal__footer button {
    min-height: 54px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .modal__footer button:last-child { border-bottom: 0; }
  .export-choice-group { grid-template-columns: 1fr; }
  .export-choice-group button {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .export-choice-group button:last-child { border-bottom: 0; }
  .bulk-editor__nav { grid-template-columns: 1fr; }
  .bulk-editor__nav button {
    border-right: 0;
  }
}

.order-panel__header {
  display: block;
  padding: 18px 18px 16px;
}
.order-panel__heading {
  display: block;
  min-width: 0;
}
.order-panel__kicker {
  display: block;
  margin: 0 0 12px;
}
.order-panel__header h2 {
  margin: 0;
  line-height: .9;
}
.order-panel__version {
  display: block;
  margin-top: 10px;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.25;
}
.order-count {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.order-panel__header::after {
  bottom: 0;
  background: var(--ui-border);
}

.order-list {
  padding-top: 14px;
  padding-inline: 18px;
}
.order-line {
  grid-template-columns: 28px minmax(0, 1fr) 44px !important;
  align-items: start;
  gap: 12px;
  min-height: 0;
  padding: 16px 0 18px;
  box-shadow: none;
}
.order-line::after {
  left: 0;
  right: 0;
  background: var(--ui-border);
}
.order-line:first-child::before {
  display: none;
}
.order-line:hover:not(.is-selected) {
  background: transparent;
  box-shadow: inset 2px 0 0 var(--ui-border);
}
.order-line:focus-visible {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ui-focus);
}
.order-line__index {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 2px 0 0;
  border: 0;
  color: var(--ui-muted);
  text-align: left;
}
.order-line__side {
  justify-content: flex-end;
  padding-top: 2px;
}
.order-line__quantity {
  min-width: 32px;
  min-height: 22px;
  padding-inline: 6px;
  border-color: var(--ui-border);
  background: transparent;
  font-size: 11px;
}
.order-line__description {
  max-width: 28ch;
}
.order-line__meta {
  margin-top: 10px;
}
.order-tag {
  min-height: 20px;
  padding: 2px 6px;
  background: transparent;
}
.order-tag--delivery {
  background: var(--ui-surface-raised);
}

.order-line.is-selected {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  padding-left: 14px;
  background: transparent;
  color: var(--ui-text);
  box-shadow: none;
}
.order-line.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--ui-border);
}
.order-line.is-selected::after {
  left: 14px;
  right: 0;
  background: var(--ui-border);
}
.order-line.is-selected .order-line__index {
  background: transparent;
  color: var(--ui-muted);
}
.order-line.is-selected .order-line__description,
.order-line.is-selected .order-line__color,
.order-line.is-selected .order-tag {
  color: var(--ui-text);
}
.order-line.is-selected .order-tag {
  border-color: var(--ui-border);
  background: transparent;
}
.order-line.is-selected .order-tag--delivery {
  background: var(--ui-surface-raised);
}
.order-line.is-selected .order-line__quantity {
  background: transparent;
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.order-line.is-selected:focus-visible {
  outline: 1px solid var(--ui-focus);
  outline-offset: -1px;
  box-shadow: none;
}
.order-line.is-holding {
  background: color-mix(in srgb, var(--ui-surface-raised) 70%, transparent);
  box-shadow: none;
}
.order-line.is-holding::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--ui-focus);
}
.order-line.is-holding::after {
  animation: none;
  transform: none;
  left: 14px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ui-border);
  box-shadow: none;
}

@media (max-width: 1099px) {
  .order-panel__header {
    padding: 16px 16px 14px;
  }
  .order-list {
    padding-top: 12px;
    padding-inline: 16px;
  }
  .order-line {
    grid-template-columns: 24px minmax(0, 1fr) 40px !important;
    gap: 10px;
    padding-block: 15px 17px;
  }
  .order-line.is-selected {
    padding-left: 12px;
  }
  .order-line.is-selected::after,
  .order-line.is-holding::after {
    left: 12px;
  }
}

@media (max-width: 640px) {
  .order-panel__header {
    padding: 14px 14px 13px;
  }
  .order-panel__kicker {
    margin-bottom: 10px;
  }
  .order-panel__version {
    margin-top: 8px;
    font-size: 12px;
  }
  .order-count {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 11px;
  }
  .order-list {
    padding-top: 10px;
    padding-inline: 14px;
  }
  .order-line {
    grid-template-columns: 22px minmax(0, 1fr) 38px !important;
    gap: 8px;
    padding-block: 14px 16px;
  }
  .order-line__description {
    max-width: none;
  }
  .order-line__quantity {
    min-width: 30px;
    min-height: 20px;
    font-size: 10px;
  }
  .order-line.is-selected {
    padding-left: 10px;
  }
  .order-line.is-selected::before,
  .order-line.is-holding::before {
    top: 12px;
    bottom: 12px;
  }
  .order-line.is-selected::after,
  .order-line.is-holding::after {
    left: 10px;
  }
}

@media (min-width: 1100px) {
  .order-panel {
    container-type: inline-size;
    container-name: active-order;
    grid-template-rows: var(--topbar-height) auto minmax(0, 1fr) var(--dock-height);
  }

  .order-panel__header {
    min-height: 0;
    padding: 20px clamp(18px, 5cqi, 26px) 18px;
    overflow: visible;
  }

  .order-panel__kicker {
    margin-bottom: 12px;
    font-size: clamp(10px, 2.55cqi, 12px);
  }

  .order-panel__header h2 {
    max-width: 100%;
    font-size: clamp(38px, 10.5cqi, 52px);
    line-height: .9;
    letter-spacing: -.067em;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .order-panel__version {
    margin-top: 10px;
    font-size: clamp(11px, 2.8cqi, 13px);
  }

  .order-count {
    margin-top: 13px;
    padding-top: 0;
    border-top: 0;
    font-size: clamp(11px, 2.6cqi, 12px);
  }

  .order-list {
    padding-top: 14px;
    padding-inline: clamp(18px, 5cqi, 26px);
  }
}

/* Selection is intentionally visible without using the focus/accent blue. */
.order-line.is-selected {
  margin-inline: 0 !important;
  padding-inline: 12px 0 !important;
  background: color-mix(in srgb, var(--ui-text) 7%, var(--ui-surface));
  color: var(--ui-text);
  box-shadow: inset 4px 0 0 var(--ui-text);
}
.order-line.is-selected::before {
  display: none !important;
}
.order-line.is-selected::after {
  left: 12px;
  right: 0;
  background: var(--ui-border);
}
.order-line.is-selected .order-line__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 24px;
  min-height: 20px;
  padding: 0 5px;
  background: var(--ui-text);
  color: var(--ui-surface);
}
.order-line.is-selected .order-tag {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.order-line.is-selected .order-tag--delivery {
  border-color: var(--ui-text);
}
.order-line.is-selected .order-line__quantity {
  border-color: var(--ui-text);
  background: var(--ui-text);
  color: var(--ui-surface);
  font-weight: 600;
}
.order-line.is-selected:hover {
  background: color-mix(in srgb, var(--ui-text) 9%, var(--ui-surface));
  box-shadow: inset 4px 0 0 var(--ui-text);
}
.order-line.is-selected:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
  box-shadow: inset 4px 0 0 var(--ui-text);
}

/* Holding is distinct from selected and does not draw a blue progress bar. */
.order-line.is-holding:not(.is-selected) {
  background: color-mix(in srgb, var(--ui-text) 4%, var(--ui-surface));
  box-shadow: inset 3px 0 0 var(--ui-muted);
}
.order-line.is-holding::before,
.order-line.is-holding::after {
  animation: none !important;
}
.order-line.is-holding:not(.is-selected)::after {
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ui-border);
  transform: none;
  box-shadow: none;
}

@media (max-width: 1099px) {
  .order-line.is-selected {
    padding-left: 10px !important;
  }
  .order-line.is-selected::after { left: 10px; }
}

@media (max-width: 640px) {
  .order-line.is-selected {
    padding-left: 9px !important;
  }
  .order-line.is-selected::after { left: 9px; }
}

@media (min-width: 1100px) {
  :root {
    --rail-width: clamp(260px, 16vw, 310px);
    --order-width: clamp(360px, 22vw, 440px);
  }

  .app-grid {
    grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--order-width);
  }

  .database-layout {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }

  

  

  

  

  

  

  .database-stage {
    container-type: inline-size;
    container-name: database-workspace;
  }

  .database-constructor__header {
    min-height: 0;
    padding: clamp(30px, 4.2cqi, 46px) clamp(28px, 5cqi, 54px) 24px;
  }

  

  

  

  

  .database-flow-list--code {
    grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
  }

  .order-panel {
    min-width: 0;
  }
}

/* Selected order rows must remain obvious in both light and dark themes. */
.order-line.is-selected {
  background: color-mix(in srgb, var(--ui-text) 12%, var(--ui-surface));
  box-shadow:
    inset 4px 0 0 var(--ui-text),
    inset 0 1px 0 var(--ui-border),
    inset 0 -1px 0 var(--ui-border);
}
.order-line.is-selected:hover {
  background: color-mix(in srgb, var(--ui-text) 15%, var(--ui-surface));
  box-shadow:
    inset 4px 0 0 var(--ui-text),
    inset 0 1px 0 var(--ui-border),
    inset 0 -1px 0 var(--ui-border);
}
:root[data-theme="dark"] .order-line.is-selected {
  background: color-mix(in srgb, var(--ui-text) 14%, var(--ui-surface));
}

/* The outer viewport only decides application mode. Internal composition is driven by containers. */
.order-panel {
  container-type: inline-size;
  container-name: active-order;
}
.order-panel__topbar {
  container-type: inline-size;
  container-name: order-toolbar;
}
.order-panel__header {
  container-type: inline-size;
  container-name: order-header;
}
.order-list {
  container-type: inline-size;
  container-name: order-content;
}
.database-stage {
  container-type: inline-size;
  container-name: database-workspace;
}

.modal__body {
  container-type: inline-size;
  container-name: modal-content;
}
.completed-order-detail {
  container-type: inline-size;
  container-name: completed-order;
}
.selection-area {
  container-type: inline-size;
  container-name: quick-workspace;
}

/* Active order: dimensions follow the actual right-panel content box. */
.order-panel__header {
  padding-inline: clamp(14px, 5cqi, 26px);
}
.order-panel__kicker {
  font-size: clamp(10px, 3cqi, 12px);
}
.order-panel__header h2 {
  max-width: 100%;
  font-size: clamp(34px, 11.5cqi, 48px);
  line-height: .91;
  white-space: normal;
  text-wrap: balance;
}
.order-panel__version,
.order-count {
  font-size: clamp(10px, 3.15cqi, 13px);
}
.order-list {
  padding-inline: clamp(12px, 5cqi, 24px);
}
.order-line {
  grid-template-columns: clamp(20px, 7.2cqi, 28px) minmax(0, 1fr) clamp(34px, 10cqi, 44px) !important;
  gap: clamp(7px, 2.8cqi, 12px);
  padding-block: clamp(12px, 4cqi, 17px);
}
.order-line__code {
  font-size: clamp(16px, 5.3cqi, 18px);
}
.order-line__description {
  max-width: none;
  font-size: clamp(11px, 3.8cqi, 13px);
  line-height: 1.28;
}
.order-line__color,
.order-tag,
.order-line__index,
.order-line__quantity {
  font-size: clamp(9px, 3cqi, 12px);
}
.order-line__quantity {
  min-width: 0;
  width: 100%;
  padding-inline: clamp(4px, 1.8cqi, 7px);
}
.order-tag {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@container order-toolbar (max-width: 340px) {
  .order-panel__topbar-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
  .order-topbar-action,
  .order-panel__settings {
    gap: 7px;
    padding-inline: 9px;
  }
  .order-topbar-action b,
  .order-panel__settings b {
    font-size: 12px;
  }
  .order-topbar-action .ui-icon,
  .order-panel__settings .ui-icon {
    width: 18px;
    height: 18px;
  }
}

@container order-toolbar (max-width: 285px) {
  .order-topbar-action b,
  .order-panel__settings b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .order-topbar-action,
  .order-panel__settings {
    display: grid;
    place-items: center;
    padding: 0;
  }
}

@container order-header (max-width: 350px) {
  .order-panel__header h2 {
    font-size: clamp(32px, 12cqi, 40px);
    letter-spacing: -.06em;
  }
  .order-panel__kicker { margin-bottom: 9px; }
  .order-panel__version { margin-top: 8px; }
  .order-count { margin-top: 9px; }
}

@container order-header (max-width: 285px) {
  .order-panel__header h2 {
    font-size: 31px;
    line-height: .94;
  }
  .order-panel__version {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

@container order-content (max-width: 360px) {
  .order-line {
    grid-template-columns: 22px minmax(0, 1fr) 36px !important;
    gap: 8px;
  }
  .order-line__meta {
    gap: 5px;
    margin-top: 8px;
  }
  .order-tag {
    min-height: 19px;
    padding: 2px 5px;
  }
  .order-line.is-selected {
    padding-left: 9px !important;
  }
  .order-line.is-selected::after { left: 9px; }
}

@container order-content (max-width: 300px) {
  .order-line {
    grid-template-columns: 20px minmax(0, 1fr) 32px !important;
    gap: 6px;
  }
  .order-line__code { font-size: 15px; }
  .order-line__description {
    font-size: 11px;
    -webkit-line-clamp: 3;
  }
  .order-line__meta {
    display: grid;
    justify-items: start;
  }
  .order-line__quantity {
    padding-inline: 3px;
  }
}

@container order-content (min-width: 410px) {
  .order-line {
    grid-template-columns: 30px minmax(0, 1fr) 46px !important;
    gap: 13px;
  }
  .order-line__description { max-width: 32ch; }
  .order-line__meta { gap: 7px; }
}

/* Central catalog: its own column width decides density, not the browser width. */
.database-constructor__header {
  padding-inline: clamp(18px, 5cqi, 54px);
}




@container database-workspace (max-width: 760px) {
  .database-constructor__header {
    padding-top: 22px;
    padding-bottom: 17px;
  }
  
  
}

@container database-workspace (max-width: 520px) {
  .database-constructor__header {
    padding-inline: 16px;
  }
  
  
}

@container database-column (max-width: 760px) {
  .database-flow-list--code {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .database-level-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container database-column (max-width: 500px) {
  .database-flow-list--code,
  .database-level-list {
    grid-template-columns: 1fr;
  }
  .database-flow-option.is-compact:nth-of-type(n),
  .database-level-option:nth-of-type(n) {
    border-right: 0;
  }
}

/* Modals: internal structures respond to the modal body width. */
@container modal-content (max-width: 760px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-section--constructor,
  .settings-section--appearance,
  .settings-section--deliveries,
  .settings-section--order {
    grid-column: 1;
  }
  .export-panel {
    display: flex;
    flex-direction: column;
  }
  .export-config {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .export-destinations {
    grid-template-columns: 1fr;
  }
  .export-destination {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .bulk-editor__layout {
    grid-template-columns: 1fr;
  }
  .bulk-editor__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .mode-chooser__grid {
    grid-template-columns: 1fr;
  }
}

@container modal-content (max-width: 480px) {
  .modal__body { padding: 14px; }
  .settings-section__header {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 76px;
  }
  .settings-section__header > span {
    padding-top: 17px;
  }
  .export-intro {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .export-intro > strong {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
    font-size: 24px;
  }
  .export-config { padding: 15px; }
  .bulk-editor__nav {
    grid-template-columns: 1fr;
  }
  .bulk-editor__summary {
    grid-template-columns: 1fr;
  }
  .bulk-editor__summary > strong {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
    font-size: 42px;
  }
}

/* Completed-order detail also behaves by its own width. */
@container completed-order (max-width: 520px) {
  .completed-order-detail__header {
    grid-template-columns: 1fr;
  }
  .completed-order-detail__header time {
    justify-self: start;
  }
  .completed-order-detail__metrics {
    grid-template-columns: 1fr;
  }
  .completed-order-detail__metrics div {
    min-height: 62px;
    border-right: 0;
  }
  .completed-order-detail__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Quick workspace scales from its own canvas width. */
.workspace-header {
  padding-inline: clamp(14px, 4cqi, 30px);
}
@container quick-workspace (max-width: 560px) {
  .workspace-header {
    min-height: 92px;
    padding-inline: 16px;
  }
  .level-label {
    font-size: clamp(38px, 11cqi, 56px);
  }
  .quick-breadcrumb__button,
  .quick-breadcrumb__current {
    max-width: 120px;
  }
}

.modal-backdrop--settings {
  place-items: stretch;
  padding: 0;
  background: var(--ui-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-backdrop--settings.is-open,
.modal-backdrop--settings.is-closing {
  background: var(--ui-surface);
}
.modal-backdrop--settings .modal--settings {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  box-shadow: none !important;
  background: var(--ui-surface);
}
.modal-backdrop--settings .modal--settings::before,
.modal-backdrop--settings .modal--settings::after {
  display: none !important;
}
.modal-backdrop--settings .modal--settings .modal__header {
  min-height: 82px;
  background: var(--ui-surface);
}
.modal-backdrop--settings .modal--settings .modal__header > div {
  padding: 15px clamp(18px, 2.2cqi, 34px);
}
.modal-backdrop--settings .modal--settings .modal__header h3 {
  font-size: clamp(31px, 3.2cqi, 48px);
}
.modal-backdrop--settings .modal--settings .modal__close {
  min-height: 81px;
}
.modal-backdrop--settings .modal--settings .modal__body {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ui-surface);
}
.modal-backdrop--settings .modal--settings .settings-shell {
  min-height: 100%;
  border: 0;
  background: var(--ui-surface);
}
.modal-backdrop--settings .modal--settings .modal__footer {
  position: relative;
  z-index: 2;
  min-height: 64px;
  background: var(--ui-surface);
  box-shadow: none;
}
.modal-backdrop--settings .modal--settings .modal__footer button {
  min-height: 63px;
}

/* On a wide settings workspace, use the available screen instead of leaving a modal-sized island. */
@container modal-content (min-width: 1180px) {
  .modal--settings .settings-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .modal--settings .settings-section--deliveries,
  .modal--settings .settings-section--order,
  .modal--settings .settings-system {
    grid-column: 1 / -1;
  }
  .modal--settings .settings-section__content,
  .modal--settings .settings-order-groups,
  .modal--settings .settings-system__content {
    min-width: 0;
  }
}

@container modal-content (max-width: 760px) {
  .modal-backdrop--settings .modal--settings .modal__header {
    min-height: 66px;
  }
  .modal-backdrop--settings .modal--settings .modal__header > div {
    padding: 11px 16px;
  }
  .modal-backdrop--settings .modal--settings .modal__header h3 {
    font-size: clamp(26px, 7.4cqi, 34px);
  }
  .modal-backdrop--settings .modal--settings .modal__close {
    min-height: 65px;
  }
}

@media (max-width: 760px) {
  .modal-backdrop--settings {
    align-items: stretch;
    padding: 0;
  }
  .modal-backdrop--settings .modal--settings {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
  }
}

.modal-backdrop--workspace {
  place-items: stretch;
  padding: 0;
  background: var(--ui-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-backdrop--workspace.is-open,
.modal-backdrop--workspace.is-closing {
  background: var(--ui-surface);
}
.modal-backdrop--workspace .modal--workspace {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  box-shadow: none !important;
  background: var(--ui-surface);
  container-type: inline-size;
  container-name: workspace-modal;
}
.modal-backdrop--workspace .modal--workspace::before,
.modal-backdrop--workspace .modal--workspace::after {
  display: none !important;
}
.modal-backdrop--workspace .modal--workspace .modal__header {
  min-height: 82px;
  background: var(--ui-surface);
}
.modal-backdrop--workspace .modal--workspace .modal__header > div {
  padding: 15px clamp(18px, 2.2cqi, 34px);
}
.modal-backdrop--workspace .modal--workspace .modal__header h3 {
  font-size: clamp(31px, 3.2cqi, 48px);
}
.modal-backdrop--workspace .modal--workspace .modal__close {
  min-height: 81px;
}
.modal-backdrop--workspace .modal--workspace .modal__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ui-surface);
}
.modal-backdrop--workspace .modal--workspace .modal__footer {
  position: relative;
  z-index: 2;
  min-height: 64px;
  background: var(--ui-surface);
  box-shadow: none;
}
.modal-backdrop--workspace .modal--workspace .modal__footer:empty {
  display: none;
}
.modal-backdrop--workspace .modal--workspace .modal__footer button {
  min-height: 63px;
}

/* Bulk editor: editing is a full application workspace. */
.modal-backdrop--workspace .modal--bulk .modal__body {
  padding: 0;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor {
  min-height: 100%;
  padding: clamp(18px, 2.3cqi, 34px);
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__layout {
  min-height: min(680px, calc(100dvh - 260px));
  margin-top: 20px;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__workspace {
  min-height: 0;
}

/* Export uses all available space instead of living in a centered card. */
.modal-backdrop--workspace .modal--export .modal__body {
  padding: 0;
}
.modal-backdrop--workspace .modal--export .export-panel {
  min-height: 100%;
  border-left: 0;
}
.modal-backdrop--workspace .modal--export .export-intro,
.modal-backdrop--workspace .modal--export .export-config,
.modal-backdrop--workspace .modal--export .export-preview-shell,
.modal-backdrop--workspace .modal--export .export-destinations {
  border-left: 0;
}
.modal-backdrop--workspace .modal--export .export-preview-shell .code-preview {
  max-height: min(46dvh, 620px);
}

/* Archive is a true split workspace. */
.modal-backdrop--workspace .modal--completed-orders .modal__body {
  padding: 0;
  overflow: hidden;
}
.modal-backdrop--workspace .modal--completed-orders .completed-orders {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(280px, 24cqi) minmax(0, 1fr);
}
.modal-backdrop--workspace .modal--completed-orders .completed-orders__rail,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__detail {
  min-height: 0;
}

@container workspace-modal (max-width: 900px) {
  .modal--workspace .modal__header {
    min-height: 72px;
  }
  .modal--workspace .modal__header > div {
    padding: 12px 18px;
  }
  .modal--workspace .modal__header h3 {
    font-size: clamp(29px, 5.5cqi, 39px);
  }
  .modal--workspace .modal__close {
    min-height: 71px;
  }
  .modal--completed-orders .completed-orders {
    grid-template-columns: minmax(240px, 34cqi) minmax(0, 1fr);
  }
}

@container workspace-modal (max-width: 680px) {
  .modal--completed-orders .completed-orders {
    grid-template-columns: 1fr;
  }
  .modal--completed-orders .completed-orders__rail {
    border-right: 0;
  }
  .modal--bulk .bulk-editor {
    padding: 14px;
  }
  .modal--bulk .bulk-editor__layout {
    min-height: 0;
  }
}

@container workspace-modal (max-width: 480px) {
  .modal--workspace .modal__header {
    min-height: 64px;
  }
  .modal--workspace .modal__header > div {
    padding: 10px 14px;
  }
  .modal--workspace .modal__header h3 {
    font-size: clamp(25px, 7.2cqi, 33px);
  }
  .modal--workspace .modal__close {
    min-height: 63px;
  }
  .modal--workspace .modal__footer {
    min-height: 58px;
  }
  .modal--workspace .modal__footer button {
    min-height: 57px;
  }
}

.modal-backdrop:not(.modal-backdrop--workspace) {
  background: rgb(16 16 14 / .38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-backdrop:not(.modal-backdrop--workspace) .modal {
  box-shadow: none !important;
}
.modal--confirmation, .modal--danger, .modal--complete-order, .modal--combine, .modal--restore, .modal--mode-chooser{
  border: 1px solid var(--ui-border);
  box-shadow: none !important;
}

/* Database editor is a real application workspace. */
.modal-backdrop--workspace .modal--database-studio .modal__body {
  padding: 0;
  overflow: hidden;
}
.modal-backdrop--workspace .modal--database-studio .database-studio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 2cqi, 30px);
  container-type: inline-size;
  container-name: database-studio-workspace;
}
.modal-backdrop--workspace .modal--database-studio .database-studio__hero {
  margin: 0;
  padding-bottom: 18px;
}
.modal-backdrop--workspace .modal--database-studio .database-studio__workspace {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  height: 100%;
  margin-top: 18px;
  overflow: auto;
}
.modal-backdrop--workspace .modal--database-studio .database-column {
  min-width: 0;
  min-height: 0;
}
.modal-backdrop--workspace .modal--database-studio .database-records {
  min-height: 0;
}
.modal-backdrop--workspace .modal--database-studio .database-studio__footer {
  margin-top: 14px;
  padding-top: 12px;
}

/* Import preview needs the whole canvas, not a centered modal. */
.modal-backdrop--workspace .modal--import .modal__body {
  padding: 0;
  overflow: hidden;
}
.modal-backdrop--workspace .modal--import .catalog-import-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 2.2cqi, 32px);
  container-type: inline-size;
  container-name: import-workspace;
}
.modal-backdrop--workspace .modal--import .catalog-import-note {
  margin: 0;
}
.modal-backdrop--workspace .modal--import .import-source-grid {
  min-height: 0;
}
.modal-backdrop--workspace .modal--import .import-source-grid textarea {
  min-height: 180px;
}
.modal-backdrop--workspace .modal--import .import-preview {
  min-height: 0;
  margin-top: 0;
  overflow: auto;
}
.modal-backdrop--workspace .modal--import .preview-scroll {
  max-height: none;
}

/* Catalog stage editing is a workspace, not a popup card. */









/* Compact dialogs stay compact, but flat and system-like. */
.modal--combine .combine-preview,
.modal--restore [data-restore-preview],
.modal--confirmation .confirm-warning,
.modal--danger .database-reset__warning,
.modal--complete-order .modal-note {
  box-shadow: none;
}
.modal--combine .choice-tag-grid button.is-active,
.modal--restore .badge,
.modal--confirmation .danger-button,
.modal--danger .danger-button {
  box-shadow: none;
}

@container database-studio-workspace (max-width: 1100px) {
  .database-studio__hero {
    grid-template-columns: 1fr;
  }
  .database-studio__workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container database-studio-workspace (max-width: 620px) {
  .database-studio {
    padding: 12px !important;
  }
  .database-studio__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .database-studio__workspace {
    grid-template-columns: 1fr !important;
  }
  .database-column {
    min-height: 300px;
  }
  .database-studio__footer {
    display: block;
  }
  .database-studio__footer > * + * {
    margin-top: 6px;
  }
}

@container import-workspace (max-width: 760px) {
  .import-source-grid {
    grid-template-columns: 1fr;
  }
  .catalog-import-workspace {
    padding: 14px !important;
  }
  .import-source-grid textarea {
    min-height: 150px !important;
  }
}



:root {
  --workspace-gutter: clamp(14px, 2.1vw, 36px);
  --workspace-section-gap: clamp(12px, 1.5vw, 24px);
  --workspace-control-height: clamp(48px, 4.2vw, 62px);
}

/* Every full-screen work surface owns its full available box. */
.modal-backdrop--settings .modal--settings,
.modal-backdrop--workspace .modal--workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.modal-backdrop--settings .modal--settings .modal__header,
.modal-backdrop--workspace .modal--workspace .modal__header,
.modal-backdrop--settings .modal--settings .modal__body,
.modal-backdrop--workspace .modal--workspace .modal__body,
.modal-backdrop--settings .modal--settings .modal__footer,
.modal-backdrop--workspace .modal--workspace .modal__footer {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.modal-backdrop--settings .modal--settings .modal__body,
.modal-backdrop--workspace .modal--workspace .modal__body {
  align-self: stretch;
  justify-self: stretch;
}

/* Settings: no narrow islands inside a full-screen page. */
.modal-backdrop--settings .settings-shell,
.modal-backdrop--settings .settings-section,
.modal-backdrop--settings .settings-section__header,
.modal-backdrop--settings .settings-section__content,
.modal-backdrop--settings .settings-control-grid,
.modal-backdrop--settings .settings-choice-field,
.modal-backdrop--settings .settings-choice-group,
.modal-backdrop--settings .settings-delivery-editor,
.modal-backdrop--settings .settings-delivery-tags,
.modal-backdrop--settings .settings-delivery-add,
.modal-backdrop--settings .settings-order-groups,
.modal-backdrop--settings .settings-order-group,
.modal-backdrop--settings .settings-action-grid,
.modal-backdrop--settings .settings-system,
.modal-backdrop--settings .settings-system__content {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
.modal-backdrop--settings .settings-section__content {
  padding: clamp(16px, 2.2cqi, 34px);
}
.modal-backdrop--settings .settings-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(10px, 1.3cqi, 18px);
}
.modal-backdrop--settings .settings-choice-group {
  min-height: var(--workspace-control-height);
}
.modal-backdrop--settings .settings-choice-group button{
  min-width: 0;
  min-height: var(--workspace-control-height);
}
.modal-backdrop--settings .settings-order-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
.modal-backdrop--settings .settings-order-group {
  min-width: 0;
}
.modal-backdrop--settings .settings-delivery-tags {
  align-content: start;
}
.modal-backdrop--settings .settings-delivery-tag {
  max-width: 100%;
}
.modal-backdrop--settings .settings-delivery-tag > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Bulk edit: summary and editor consume the actual workspace width. */
.modal-backdrop--workspace .modal--bulk .bulk-editor,
.modal-backdrop--workspace .modal--bulk .bulk-editor__summary,
.modal-backdrop--workspace .modal--bulk .bulk-editor__layout,
.modal-backdrop--workspace .modal--bulk .bulk-editor__nav,
.modal-backdrop--workspace .modal--bulk .bulk-editor__workspace,
.modal-backdrop--workspace .modal--bulk .bulk-editor__workspace-head,
.modal-backdrop--workspace .modal--bulk .bulk-editor__controls,
.modal-backdrop--workspace .modal--bulk .bulk-editor__preview,
.modal-backdrop--workspace .modal--bulk .choice-tag-grid {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--workspace-section-gap);
  padding: var(--workspace-gutter);
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__layout {
  height: 100%;
  min-height: 0;
  margin-top: 0;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__controls,
.modal-backdrop--workspace .modal--bulk .bulk-editor__preview {
  overflow-x: hidden;
}
.modal-backdrop--workspace .modal--bulk .bulk-editor__preview {
  min-height: 0;
  overflow-y: auto;
}
.modal-backdrop--workspace .modal--bulk .choice-tag-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

/* Export: both columns stretch to the full body height and width. */
.modal-backdrop--workspace .modal--export .export-panel,
.modal-backdrop--workspace .modal--export .export-config,
.modal-backdrop--workspace .modal--export .export-preview-shell,
.modal-backdrop--workspace .modal--export .export-choice-group,
.modal-backdrop--workspace .modal--export .export-switches,
.modal-backdrop--workspace .modal--export .export-destinations {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
.modal-backdrop--workspace .modal--export .export-panel {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
}
.modal-backdrop--workspace .modal--export .export-config {
  min-height: 0;
  overflow-y: auto;
}
.modal-backdrop--workspace .modal--export .export-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}
.modal-backdrop--workspace .modal--export .export-preview-shell .code-preview {
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  overflow: auto;
}
.modal-backdrop--workspace .modal--export .export-destinations {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

/* Archive: remove internal fixed-width assumptions. */
.modal-backdrop--workspace .modal--completed-orders .completed-orders,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__rail,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__search,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__list,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__detail,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__header,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__metrics,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__actions {
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
.modal-backdrop--workspace .modal--completed-orders .completed-orders,
.modal-backdrop--workspace .modal--completed-orders .completed-orders__detail,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail {
  width: 100%;
}
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__header > *,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__metrics > *,
.modal-backdrop--workspace .modal--completed-orders .completed-order-detail__actions > * {
  min-width: 0;
}

/* Database/import/stage workspaces obey the same width contract. */
.modal-backdrop--workspace .database-studio, .modal-backdrop--workspace .database-studio__workspace, .modal-backdrop--workspace .database-column, .modal-backdrop--workspace .database-records, .modal-backdrop--workspace .catalog-import-workspace, .modal-backdrop--workspace .import-source-grid, .modal-backdrop--workspace .import-preview, .modal-backdrop--workspace .preview-scroll{
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

/* Component breakpoints follow the workspace itself. */
@container workspace-modal (max-width: 1100px) {
  .modal--export .export-panel {
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  }
  .modal--bulk .bulk-editor__layout {
    grid-template-columns: minmax(220px, 30cqi) minmax(0, 1fr);
  }
}

@container workspace-modal (max-width: 820px) {
  .modal--export .export-panel {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .modal--export .export-config {
    max-height: 44dvh;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .modal--bulk .bulk-editor__layout {
    grid-template-columns: 1fr;
  }
  .modal--bulk .bulk-editor__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
}

@container workspace-modal (max-width: 560px) {
  .modal--bulk .bulk-editor {
    padding: 12px;
  }
  .modal--bulk .bulk-editor__summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .modal--bulk .bulk-editor__nav {
    grid-template-columns: 1fr;
  }
  .modal--export .export-config {
    max-height: 48dvh;
  }
  .modal--export .export-destinations {
    grid-template-columns: 1fr;
  }
}

@container modal-content (max-width: 620px) {
  .modal--settings .settings-control-grid,
  .modal--settings .settings-order-groups {
    grid-template-columns: 1fr;
  }
  .modal--settings .settings-delivery-add {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@container modal-content (max-width: 390px) {
  .modal--settings .settings-section__content {
    padding: 12px;
  }
  .modal--settings .settings-choice-group--three {
    grid-template-columns: 1fr;
  }
  .modal--settings .settings-choice-group--three button {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .modal--settings .settings-choice-group--three button:last-child {
    border-bottom: 0;
  }
  .modal--settings .settings-delivery-add {
    grid-template-columns: 1fr;
  }
  .modal--settings .settings-delivery-add input {
    border-right: 1px solid var(--ui-border);
    border-bottom: 0;
  }
}

:root {
  --workspace-header-height: 64px;
  --workspace-header-font-size: 14px;
  --workspace-header-pad-x: 18px;
}

.modal-backdrop--settings .modal--settings .modal__header,
.modal-backdrop--workspace .modal--workspace .modal__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--workspace-header-height);
  min-height: var(--workspace-header-height);
  height: var(--workspace-header-height);
  padding: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--ui-border);
}

.modal-backdrop--settings .modal--settings .modal__header > .modal__heading-bar,
.modal-backdrop--workspace .modal--workspace .modal__header > .modal__heading-bar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  height: 100%;
  padding: 0;
}

.modal-backdrop--settings .modal--settings .modal__eyebrow,
.modal-backdrop--settings .modal--settings .modal__header h3,
.modal-backdrop--workspace .modal--workspace .modal__eyebrow,
.modal-backdrop--workspace .modal--workspace .modal__header h3,
.modal-backdrop--settings .modal--settings .modal__close,
.modal-backdrop--workspace .modal--workspace .modal__close {
  box-sizing: border-box;
  font-size: var(--workspace-header-font-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.modal-backdrop--settings .modal--settings .modal__eyebrow,
.modal-backdrop--workspace .modal--workspace .modal__eyebrow,
.modal-backdrop--settings .modal--settings .modal__header h3,
.modal-backdrop--workspace .modal--workspace .modal__header h3 {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 var(--workspace-header-pad-x);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-backdrop--settings .modal--settings .modal__eyebrow,
.modal-backdrop--workspace .modal--workspace .modal__eyebrow {
  border-right: 1px solid var(--ui-border);
  color: var(--ui-muted);
  text-transform: uppercase;
}

.modal-backdrop--settings .modal--settings .modal__header h3,
.modal-backdrop--workspace .modal--workspace .modal__header h3 {
  color: var(--ui-text);
  text-transform: lowercase;
}

.modal-backdrop--settings .modal--settings .modal__close,
.modal-backdrop--workspace .modal--workspace .modal__close {
  display: grid;
  place-items: center;
  width: var(--workspace-header-height);
  min-width: var(--workspace-header-height);
  height: var(--workspace-header-height);
  min-height: var(--workspace-header-height);
  padding: 0;
  border-left: 1px solid var(--ui-border);
  font-size: var(--workspace-header-font-size);
  font-family: inherit;
  background: transparent;
}

.modal-backdrop--settings .modal--settings .modal__close:hover,
.modal-backdrop--workspace .modal--workspace .modal__close:hover {
  background: var(--ui-text);
  color: var(--ui-surface);
}

@container workspace-modal (max-width: 720px) {
  .modal--workspace .modal__header > .modal__heading-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .modal--workspace .modal__eyebrow,
  .modal--workspace .modal__header h3 {
    padding-inline: 14px;
  }
}

@container workspace-modal (max-width: 480px) {
  .modal--workspace {
    --workspace-header-height: 58px;
    --workspace-header-font-size: 13px;
  }
  .modal--workspace .modal__eyebrow {
    max-width: 104px;
  }
}

/* Settings has its own modal-content container but follows the same header contract. */
@container modal-content (max-width: 480px) {
  .modal--settings {
    --workspace-header-height: 58px;
    --workspace-header-font-size: 13px;
  }
  .modal--settings .modal__eyebrow {
    max-width: 104px;
  }
}


/* ================================================================
   P4 SHARED ORDER COMPOSITION
   The footer is one permanent slot in every app mode. Visual geometry is
   supplied by DVS UI Core; this block owns only placement/overflow.
   ================================================================ */
.order-panel {
  grid-template-rows: var(--topbar-height) 88px minmax(0, 1fr) 108px;
}
.order-panel__footer {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.order-target-summary,
.order-selection-dock {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  position: static;
}
.order-target-summary {
  display: grid;
  grid-template-rows: 24px var(--ui-control-h);
  gap: 8px;
  visibility: visible;
  pointer-events: auto;
}
.order-selection-dock {
  display: grid;
  grid-template-rows: 24px var(--ui-control-h);
  gap: 8px;
  visibility: hidden;
  pointer-events: none;
}
.order-panel__footer.is-selection-mode .order-target-summary {
  visibility: hidden;
  pointer-events: none;
}
.order-panel__footer.is-selection-mode .order-selection-dock {
  visibility: visible;
  pointer-events: auto;
}
.selection-dock-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  height: auto;
}
.order-line {
  grid-template-columns: 26px minmax(0, 1fr) 38px;
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.order-line__main,
.order-line__title,
.order-line__title-row { min-width: 0; }
.order-line__side { justify-self: stretch; min-width: 0; }
.order-line__quantity { width: 100%; }
.order-target-summary__metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.order-target-summary__metrics > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.order-target-summary__metrics > span:last-child { justify-content: flex-end; }