/* ── Options drawer (sheetfed_options_drawer.js) ─────────────────────────
   One button in the title bar, a pill per step, and a right-side drawer.
   Standard: beside the steps. Expanded (⤢): near full viewport.
   Colours follow sheetfed_calculator.css's variables. */

.options-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem;
  background: var(--teal, #0d9488); color: #fff;
  border: 0; border-radius: 6px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
}
.options-btn:hover { filter: brightness(1.08); }
.options-badge {
  background: #fff; color: var(--teal, #0d9488);
  border-radius: 999px; min-width: 1.3em; padding: 0 .4em;
  font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center;
}

.process-pill {
  flex-shrink: 0;
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #ccfbf1; color: #0f766e;
  font-size: .65rem; font-weight: 600; white-space: nowrap;
}

/* ── Drawer shell ── */
.odr { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 900; display: flex; }
.odr--expanded { width: min(96vw, 1400px); }
.odr__panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: #fff; border-left: 1px solid var(--border, #d0dcc8);
  box-shadow: -8px 0 28px rgba(28, 48, 16, .18);
}
@media (max-width: 720px) { .odr, .odr--expanded { width: 100vw; } .odr__panel { border-left: 0; } }

.odr__head { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .9rem; background: var(--forest, #1c3010); color: #fff; }
.odr__title { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; }
.odr__kind { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.15); padding: .1rem .4rem; border-radius: 4px; margin-right: .3rem; }
.odr__sub { font-size: .72rem; font-weight: 400; color: #c8dcc0; margin-top: .2rem; }
.odr__sub code { color: #fff; background: rgba(255,255,255,.12); padding: 0 .3rem; border-radius: 3px; }
.odr__tools { display: flex; align-items: center; gap: .35rem; }
.odr__tool { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 5px; width: 28px; height: 28px; cursor: pointer; font-size: .9rem; }
.odr__tool:hover { background: rgba(255,255,255,.25); }
.odr__status { font-size: .7rem; color: #c8dcc0; margin-right: .3rem; }
.odr__status.is-bad { color: #fca5a5; font-weight: 600; }

.odr__tabs { display: flex; border-bottom: 1px solid var(--border-light, #e8eee4); background: var(--bg, #f2f4f0); }
.odr__tab { flex: 1; padding: .55rem .6rem; background: none; border: 0; border-bottom: 2px solid transparent; font-size: .8rem; font-weight: 600; color: var(--text-mid, #4a6a4a); cursor: pointer; }
.odr__tab.is-active { color: var(--forest, #1c3010); border-bottom-color: var(--teal, #0d9488); background: #fff; }
.odr__tabn { background: #ccfbf1; color: #0f766e; border-radius: 999px; padding: 0 .4em; font-size: .68rem; }

.odr__body { flex: 1; overflow: auto; padding: .75rem .9rem; font-size: .8rem; color: var(--text, #1a2a1a); }
.odr__foot { display: flex; gap: .5rem; flex-wrap: wrap; padding: .5rem .9rem; border-top: 1px solid var(--border-light, #e8eee4); background: var(--bg, #f2f4f0); font-size: .72rem; color: var(--text-mid, #4a6a4a); }
.odr__foot .is-refused { color: var(--error, #dc2626); }
.odr__unsaved { color: #b45309; font-weight: 600; }
.odr__hint { margin: 0 0 .6rem; font-size: .72rem; color: var(--text-muted, #7a8a7a); }
.odr__empty { color: var(--text-muted, #7a8a7a); font-style: italic; }
.odr__h4 { margin: .9rem 0 .35rem; font-size: .78rem; font-weight: 700; color: var(--forest, #1c3010); display: flex; align-items: center; gap: .5rem; }
.odr__h4 small { font-weight: 400; color: var(--text-muted, #7a8a7a); }

/* ── Steps accordion ── */
.odr__step { border: 1px solid var(--border, #d0dcc8); border-radius: 8px; margin-bottom: .5rem; background: #fff; }
.odr__step > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; cursor: pointer; font-weight: 600; }
.odr__step > summary::-webkit-details-marker { display: none; }
.odr__stepn { 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; flex-shrink: 0; }
.odr__steprole { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #7a8a7a); font-weight: 600; }
.odr__switch { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--text-mid, #4a6a4a); display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.odr__rows { padding: .25rem .65rem .6rem; border-top: 1px solid var(--border-light, #e8eee4); }
.odr__row { display: grid; grid-template-columns: 74px 1fr auto; gap: .5rem; align-items: start; padding: .4rem 0; border-bottom: 1px dashed var(--border-light, #e8eee4); }
.odr__row:last-child { border-bottom: 0; }
.odr__rowl { font-size: .72rem; font-weight: 600; color: var(--text-mid, #4a6a4a); padding-top: .25rem; }
.odr__rowt { display: flex; flex-direction: column; gap: .25rem; }
.odr__chips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.odr__mini { background: #fff; border: 1px dashed var(--teal, #0d9488); color: #0f766e; border-radius: 5px; font-size: .68rem; padding: .2rem .45rem; cursor: pointer; white-space: nowrap; }
.odr__mini:hover { background: #f0fdfa; }

/* ── Chips ── */
.odr__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem; border-radius: 999px; border: 1px solid;
  font-size: .74rem; cursor: pointer; background: #fff; line-height: 1.3; max-width: 100%;
}
.odr__chip small { font-size: .64rem; color: var(--text-muted, #7a8a7a); }
.odr__chip .odr__delta { font-size: .64rem; font-weight: 600; }
.odr__chip.is-current { background: #dcfce7; border-color: #86efac; color: #166534; cursor: default; font-weight: 600; }
.odr__chip.is-allowed { background: #ccfbf1; border-color: #5eead4; color: #0f766e; font-weight: 600; }
.odr__chip.is-allowed.is-orphan { border-style: dashed; }
.odr__chip.is-available { border-color: var(--border, #d0dcc8); color: var(--text-mid, #4a6a4a); }
.odr__chip.is-available:hover { border-color: var(--teal, #0d9488); color: #0f766e; }
.odr__chip.is-excluded { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; text-decoration: line-through; }
.odr__chip.is-excluded:hover { text-decoration: none; }
.odr__chip.is-priced .odr__delta { color: #0f766e; }
.odr__chip.is-refused { background: var(--error-bg, #fef2f2); border-color: #fca5a5; color: #991b1b; }
.odr__chip.is-refused .odr__delta { color: #b91c1c; }

/* ── Tasks ── */
.odr__tasks { display: flex; flex-direction: column; gap: .3rem; }
.odr__task { display: flex; align-items: center; gap: .45rem; font-size: .76rem; }
.odr__task em { font-style: normal; font-size: .66rem; color: var(--text-muted, #7a8a7a); margin-left: auto; white-space: nowrap; }
.odr__task.is-bridge { color: var(--text-muted, #7a8a7a); }
.odr__task .odr__delta.is-refused, .odr__task em.is-refused { color: #b91c1c; }

/* ── Price tab ── */
.odr__table { width: 100%; border-collapse: collapse; font-size: .74rem; margin-bottom: .4rem; }
.odr__table th, .odr__table td { padding: .28rem .4rem; border-bottom: 1px solid var(--border-light, #e8eee4); text-align: right; white-space: nowrap; }
.odr__table th:first-child, .odr__table td:first-child { text-align: left; font-weight: 600; color: var(--text-mid, #4a6a4a); }
.odr__table thead th { color: var(--text-muted, #7a8a7a); font-weight: 600; font-size: .68rem; }
.odr__table--deltas td:first-child { font-weight: 500; color: var(--text, #1a2a1a); white-space: normal; }
.odr__table .is-neg { color: #166534; font-weight: 700; }
.odr__table .is-pos { color: #92400e; font-weight: 700; }
.odr__table .is-refused { color: #b91c1c; font-weight: 600; }
.odr__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; color: var(--text-muted, #7a8a7a); text-align: left !important; white-space: normal !important; }
.odr__stackh { font-size: .72rem; font-weight: 700; margin: .5rem 0 .2rem; color: var(--text-mid, #4a6a4a); }

/* ── Warnings tab ── */
.odr__wstep { font-size: .74rem; font-weight: 600; margin: .6rem 0 .25rem; color: var(--text-mid, #4a6a4a); }
.odr__wstep b { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--forest, #1c3010); color: #fff; font-size: .62rem; align-items: center; justify-content: center; margin-right: .3rem; }
.odr__warn { display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .35rem .5rem; border-left: 3px solid; border-radius: 4px; margin-bottom: .3rem; font-size: .72rem; }
.odr__warn.is-error { border-color: var(--error, #dc2626); background: var(--error-bg, #fef2f2); }
.odr__warn.is-warning { border-color: #f59e0b; background: #fffbeb; }
.odr__warn.is-info { border-color: #60a5fa; background: #eff6ff; }
.odr__wcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; color: var(--text-muted, #7a8a7a); white-space: nowrap; }
.odr__wmsg code { background: rgba(0,0,0,.05); padding: 0 .25rem; border-radius: 3px; }

/* keep the page usable under the standard drawer on wide screens */
@media (min-width: 1100px) { body.odr-open .calc-page { padding-right: 520px; } }

/* collapsed greyed chips + fixable (opens the machine admin) */
.odr__chip.is-more { background: #f8fafc; border-color: #cbd5e1; color: #475569; font-weight: 600; }
.odr__chip.is-more:hover { border-color: var(--teal, #0d9488); color: #0f766e; }
.odr__chip.is-excluded.is-fixable { text-decoration: none; border-style: dashed; }
.odr__chip.is-excluded.is-fixable::after { content: ' ↗'; font-size: .6rem; }

/* sticky error banner + stock search dialog */
.odr__error { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; background: var(--error-bg, #fef2f2); border-bottom: 1px solid #fca5a5; color: #991b1b; font-size: .76rem; font-weight: 600; }
.odr__error span { flex: 1; }
.odr__tool--dark { background: rgba(0,0,0,.06); color: inherit; }
.odr__modal { position: fixed; inset: 0; z-index: 950; background: rgba(28,48,16,.35); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem; }
.odr__dialog { width: min(860px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.odr__sbar { display: flex; gap: .5rem; align-items: center; padding: .6rem .75rem; background: var(--forest, #1c3010); }
.odr__sbar input { flex: 1; font-size: .95rem; padding: .5rem .7rem; border: 0; border-radius: 6px; }
.odr__shint { padding: .4rem .75rem; font-size: .72rem; color: var(--text-muted, #7a8a7a); background: var(--bg, #f2f4f0); border-bottom: 1px solid var(--border-light, #e8eee4); }
.odr__slist { flex: 1; overflow: auto; }
.odr__srow { display: grid; grid-template-columns: 2.2fr 50px 90px 70px 1.1fr 1.6fr; gap: .6rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border-light, #e8eee4); padding: .45rem .75rem; cursor: pointer; font-family: inherit; font-size: .78rem; color: var(--text, #1a2a1a); }
.odr__srow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odr__srow:hover { background: #f0fdfa; }
.odr__srow.is-on { background: #ccfbf1; }
.odr__srow.is-excluded { color: #94a3b8; }
.odr__srow.is-excluded .odr__sname { text-decoration: line-through; }
.odr__srow--head { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #7a8a7a); font-weight: 700; cursor: default; background: #fff; position: sticky; top: 0; }
.odr__srow--head:hover { background: #fff; }
.odr__srow--note { display: block; color: var(--text-muted, #7a8a7a); font-style: italic; cursor: default; }
.odr__sname { font-weight: 600; }
.odr__sname small { font-weight: 400; color: var(--text-muted, #7a8a7a); }
.odr__sreason { font-size: .68rem; color: #0f766e; font-weight: 600; white-space: normal !important; }
.odr__srow.is-excluded .odr__sreason { color: #94a3b8; font-weight: 400; }
@media (max-width: 720px) { .odr__srow { grid-template-columns: 1.6fr 60px 1fr; } .odr__srow > span:nth-child(3), .odr__srow > span:nth-child(5) { display: none; } }
.odr__chip.is-allowed.is-incomplete { border-style: dashed; background: #f0fdfa; color: #0f766e; opacity: .85; }
.odr__strict { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: #c8dcc0; white-space: nowrap; margin-right: .2rem; cursor: pointer; }