/* ── Page layouts (sheetfed_layouts.js) ──────────────────────────────────
   A · C behind the header toggle (B was built and dropped). The DOM is the one
   sheetfed_calculator.js renders; these rules re-flow it and hide what the
   drawer now shows. Standard drawer docks right. */

.layout-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; overflow: hidden; margin-left: .25rem; }
.layout-toggle button { background: transparent; color: #c8dcc0; border: 0; padding: .3rem .6rem; font-size: .72rem; font-weight: 700; cursor: pointer; letter-spacing: .04em; }
.layout-toggle button + button { border-left: 1px solid rgba(255,255,255,.2); }
.layout-toggle button.is-active { background: rgba(255,255,255,.18); color: #fff; }
.layout-toggle button:hover { color: #fff; }

/* ── Layout A: steps full width, results in the drawer ── */
.layout-a .calc-body { flex-direction: column; overflow-y: auto; }
.layout-a .calc-sidebar { width: 100%; max-width: 1040px; margin: 0 auto; border-right: 0; overflow: visible; }
.layout-a .sidebar-scroll { padding-bottom: 1rem; }
.layout-a .sidebar-actions { position: sticky; bottom: 0; z-index: 5; flex-direction: row; flex-wrap: wrap; align-items: center; }
.layout-a .sidebar-actions .btn { flex: 0 1 200px; }
.layout-a .sidebar-actions #saveButtons { display: flex; gap: .5rem; flex: 1; }
.layout-a .sidebar-actions #versionsPanel,
.layout-a .sidebar-actions #catalogLinkPanel,
.layout-a .sidebar-actions #codeChangeWarning,
.layout-a .sidebar-actions #codeConflictWarning { flex-basis: 100%; }
.layout-a .calc-results-wrap { flex: 0 0 auto; max-width: 1040px; width: 100%; margin: 0 auto; padding: .5rem .85rem 0; overflow: visible; }
.layout-a #resultsPane { display: block; margin-top: .75rem; }   /* errors, workflow and price sit under the steps */
.layout-a #businessCardOptions { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: .6rem; align-items: start; }
.layout-a .process-card { margin: 0; }
@media (min-width: 1100px) { body.odr-open .layout-a .calc-body { padding-right: 520px; } }

/* the rail's actions sit under the steps in C, nothing sticky */
.layout-c .sidebar-actions { position: static; }

/* ── Layout C: dense rows, edit in the drawer ── */
.layout-c .calc-sidebar { width: 280px; }
.layout-c #businessCardOptions, .layout-c .addOptionBtn { display: none; }
.layout-c .calc-results-wrap { padding: .75rem 1rem 0; }
.layout-c #resultsPane { display: block; margin-top: .75rem; }   /* errors, workflow and price sit under the steps */
#denseRows { display: flex; flex-direction: column; gap: 2px; margin-bottom: .75rem; }
.dense__head, .dense__row { display: grid; grid-template-columns: 28px 1.3fr 1fr .7fr 1.2fr .9fr .7fr 1.4fr 58px 18px; gap: .5rem; align-items: center; font-size: .76rem; }
.dense__head { padding: .2rem .6rem; color: var(--text-muted, #7a8a7a); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dense__row { text-align: left; background: #fff; border: 1px solid var(--border, #d0dcc8); border-radius: 6px; padding: .45rem .6rem; cursor: pointer; color: var(--text, #1a2a1a); font-family: inherit; }
.dense__row:hover { border-color: var(--teal, #0d9488); }
.dense__row.is-editing { border: 2px solid var(--teal, #0d9488); border-left-width: 6px; background: #f0fdfa; box-shadow: 0 2px 8px rgba(13,148,136,.25); padding: calc(.45rem - 1px) calc(.6rem - 1px) calc(.45rem - 1px) calc(.6rem - 5px); }
.dense__row.is-editing .dense__n { background: var(--teal, #0d9488); }
.dense__row.is-editing .dense__name { color: #115e59; }
.dense__row.is-editing .dense__edit { color: #fff; background: var(--teal, #0d9488); border-radius: 999px; padding: .1rem .45rem; text-align: center; }
.dense__row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dense__n { background: var(--forest, #1c3010); color: #fff; font-size: .65rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.dense__name { font-weight: 600; }
.dense__name .process-pill { margin-left: .35rem; }
.dense__warn { display: inline-block; margin-left: .3rem; background: #fef3c7; color: #92400e; border-radius: 999px; font-size: .62rem; font-weight: 700; padding: 0 .4em; }
.dense__edit { color: var(--teal, #0d9488); font-weight: 600; font-size: .7rem; text-align: right; }
.dense__add { background: #fff; border: 1px dashed var(--forest-mid, #2a6a1a); color: var(--forest-mid, #2a6a1a); border-radius: 6px; padding: .45rem; font-weight: 600; cursor: pointer; margin-top: .25rem; }
.dense__empty { color: var(--text-muted, #7a8a7a); font-style: italic; padding: .5rem; }
.dense__retry { margin-left: .5rem; font: inherit; font-style: normal; padding: .1rem .5rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; cursor: pointer; }
.odr__body--step { padding: .5rem .9rem; }
.odr__body--step > #odrStepSlot > .process-body { border-top: 0; padding: 0; }
@media (min-width: 1100px) { body.odr-open .layout-c .calc-body { padding-right: 520px; } }
.odr__results { margin-bottom: .75rem; }
.odr__results #resultsPane { display: block; }
.odr__results #productCodeBar { margin-bottom: .5rem; }

/* ── Narrow screens: one column, drawer full-screen ── */
@media (max-width: 899px) {
  .layout-a .calc-sidebar, .layout-c .calc-sidebar { width: 100%; }
  .layout-c .calc-body { flex-direction: column; overflow-y: auto; }
  .layout-a #businessCardOptions { grid-template-columns: 1fr; }
  body.odr-open .layout-a .calc-body, body.odr-open .layout-c .calc-body { padding-right: 0; }
}
/* layout C: the adopted card fills the drawer and is always open */
.odr__body--step > #odrStepSlot > .process-card { border: 0; margin: 0; }
.odr__body--step > #odrStepSlot > .process-card > .process-summary { display: none; }
.odr__body--step > #odrStepSlot > .process-card > .process-body { border-top: 0; padding: 0; }
.dense__unsaved { margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dense__grip { color: var(--text-muted, #7a8a7a); font-size: 1rem; line-height: 1; cursor: grab; text-align: center; }
.dense__grip:active { cursor: grabbing; }
.dense__row.sortable-chosen { border-color: var(--teal, #0d9488); }
.dense__row.sortable-ghost { opacity: .4; }
.dense__row > .dense__warnings { grid-column: 1 / -1; overflow: visible; display: flex; flex-direction: column; gap: .25rem; margin-top: .3rem; white-space: normal; }
.dense__warning { display: block; padding: .3rem .5rem; border-left: 3px solid #d97706; background: #fffbeb; color: #78350f; border-radius: 0 4px 4px 0; font-size: .72rem; line-height: 1.35; }
.dense__warning.is-error { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.dense__warning code { font-size: .66rem; opacity: .75; margin-right: .3rem; }
.dense__warnings.is-stale { opacity: .45; }
.dense__stale { font-size: .72rem; color: #92400e; background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 6px; padding: .35rem .6rem; margin-bottom: .35rem; }

/* ── Pickers on the step card, wherever the card sits ─────────────────────
   The sidebar rule that made each Select2 fill its field doesn't reach a
   card moved into the drawer, so they fell back to the inline 70% and their
   lists were as narrow as that — one word per line (Dave 2026-09-29). */
.process-card .select2-container,
.odr .select2-container { width: 100% !important; min-width: 0; max-width: 100%; }
.process-card .select2-selection__rendered,
.odr .select2-selection__rendered { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The open list: wide enough to read a stock name on one or two lines. */
.select2-container--open .select2-dropdown { min-width: 360px; max-width: min(560px, 92vw); }
.select2-container--open .select2-results__options { overflow-x: hidden; }
.select2-container--open .select2-results__option { white-space: normal; word-break: normal; overflow-wrap: anywhere; line-height: 1.35; padding: .35rem .55rem; font-size: .8rem; }
.select2-container--open .select2-search__field { font-size: .85rem; padding: .3rem .45rem; }

/* A TASK-ONLY step (no machine — round corners, drilling): the machine's
   sheet, paper and sides don't apply, so they step aside. */
.process-card .task-only-note { display: none; font-size: .72rem; color: #0d7d72; background: #e2f1ef; border-radius: 4px; padding: .35rem .5rem; margin: .25rem 0 .5rem; }
.process-card.task-only .task-only-note { display: block; }
.process-card.task-only .machine-only { display: none; }