/* =============================================================================
   complexity.css — T13-DUAL "Ящик / Drawer" dual-complexity control (quote.html).
   Ported from EOS_design/cpx-cc.css (Drawer variant only), remapped onto the app's
   theme tokens (tokens.css / theme.css) so it follows morning/sunset/night.
   base dial = emerald (--accent) · precision dial = amber (--warn). eng/admin only.
   ============================================================================= */

.cpxd { --cpx-spring: cubic-bezier(.34,1.56,.64,1); width:100%; }

/* The "whole ENG row" — the design's roomy flex strip, not a rigid 4-col grid.
   Each physical control (complexity «Ящик» + Setups/Shifts/Machines) takes its
   natural width and WRAPS instead of clipping. Must out-specify the role-gated
   `body[data-role=…] .row-4{display:grid}` rule, hence the role-prefixed selector.
   Scoped via :has to ONLY the eng row that holds the drawer. */
body[data-role="engineer"] .row-4:has(.cpxd),
body[data-role="admin"] .row-4:has(.cpxd){
  display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-5); align-items:flex-start;
}
.row-4:has(.cpxd) > .field{ flex:0 1 auto; min-width:0; }
.row-4:has(.cpxd) > .field:first-child{ flex:1 1 260px; min-width:240px; max-width:340px; }

/* tone tokens — scoped so they never leak past the control */
.cpxd [data-tone="base"]{
  --tone:var(--accent); --tone-soft:var(--accent-soft); --tone-text:var(--accent-faint);
  --tone-bg:var(--accent-bg); --tone-border:var(--ok-border);
}
.cpxd [data-tone="spec"]{
  --tone:var(--warn); --tone-soft:var(--warn-bright);
  --tone-text:var(--warn-bright); --tone-bg:var(--warn-bg); --tone-border:var(--warn-border);
}

/* ── collapsed rest bar ── */
.cc-drawer{ width:100%; }
.cc-drawer-rest{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px;
  border:1px solid var(--border-strong); border-radius:var(--radius-lg); cursor:pointer; text-align:left;
  background:linear-gradient(180deg,var(--bg-elevated),var(--bg-surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.30);
  transition:border-color var(--duration-fast);
}
.cc-drawer-rest:hover{ border-color:var(--border-emphasis); }
.cc-dr-ic{ display:grid; place-items:center; color:var(--text-muted); transition:transform .25s var(--ease); }
.cpxd[data-open="true"] .cc-dr-ic{ transform:rotate(180deg); }
.cc-dr-lbl{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-mid); }
.cc-dr-vals{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; }
.cc-dr-v{ font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-xs); }
.cc-dr-v.base{ color:var(--accent-faint); }
.cc-dr-v.spec{ color:var(--warn-bright); }
.cc-dr-sep{ color:var(--text-subtle); }
.cc-dr-flag{
  font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-3xs); color:var(--warn-bright);
  background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:var(--radius-pill); padding:0 6px;
}
.cc-dr-handle{ display:flex; flex-direction:column; gap:3px; margin-left:2px; }
.cc-dr-handle i{ display:block; width:13px; height:2px; border-radius:2px; background:var(--border-emphasis); }

/* ── expanding body (grid-rows 0fr→1fr) ── */
.cc-drawer-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-slow) var(--ease); }
.cpxd[data-open="true"] .cc-drawer-body{ grid-template-rows:1fr; }
.cc-drawer-inner{ overflow:hidden; display:grid; gap:8px; padding:0 2px; }
.cpxd[data-open="true"] .cc-drawer-inner{ padding:10px 2px 2px; }

/* ── per-dial row ── */
.cc-drrow{ display:flex; align-items:center; gap:10px; }
.cc-drrow-cap{ display:inline-flex; align-items:center; gap:5px; width:72px; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:var(--tone-text); }
.cc-drrow-cap svg{ flex:none; }
.cc-seg25{ display:inline-flex; gap:3px; padding:3px; border-radius:var(--radius-md); background:var(--bg-page); border:1px solid var(--border); }
.cc-seg25-b{
  width:30px; height:28px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--text-muted); font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-sm);
  cursor:pointer; transition:background var(--duration-fast),color var(--duration-fast);
}
.cc-seg25-b:hover{ color:var(--text); }
.cc-seg25-b.on{ background:var(--tone); color:var(--bg-page); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.cc-seg25-b.on.auto{ background:var(--tone-bg); color:var(--tone-text); box-shadow:inset 0 0 0 1px var(--tone-border); }
.cc-drrow-auto{ margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-3xs); color:var(--text-subtle); }

/* reset-to-auto pip (manual only) */
.cc-reset{
  display:inline-grid; place-items:center; width:18px; height:18px; padding:0; margin-left:auto;
  border:1px solid var(--tone-border); border-radius:50%; background:var(--tone-bg); color:var(--tone-text);
  cursor:pointer; transition:transform var(--duration-fast);
}
.cc-reset:hover{ transform:rotate(-40deg); }
.cc-reset[hidden]{ display:none; }

/* precision ⓘ — reveals which features drove the auto level */
.cc-cap-i{ position:relative; display:inline-flex; color:var(--text-subtle); cursor:help; outline:none; }
.cc-cap-i:hover,.cc-cap-i:focus{ color:var(--tone-text); }
.cc-cap-i[hidden]{ display:none; }
.cc-cap-i::after{
  content:attr(data-why); position:absolute; bottom:calc(100% + 8px); left:0;
  white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-3xs); font-weight:var(--fw-semibold);
  color:var(--text-mid); background:var(--bg-elevated); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:6px 9px; box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity var(--duration-fast); z-index:5;
}
.cc-cap-i:hover::after,.cc-cap-i:focus::after{ opacity:1; }

/* ════════════════════════════════════════════════════════════════════════════
   ENG-row physical context controls — Setups (fixture plates) · Shifts
   (day·evening·night) · Machines (lit bays). A skin over the hidden
   #setups / #shifts / #machines inputs; all pricing send-sites unchanged.
   ════════════════════════════════════════════════════════════════════════════ */
.ec-cell{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ec-cell[data-tone="base"]{ --tone:var(--accent); --tone-text:var(--accent-faint); --tone-bg:var(--accent-bg); --tone-border:var(--ok-border); }
.ec-cell[data-tone="shift"]{ --tone:var(--accent-2-soft); --tone-text:#bae6fd; --tone-bg:rgba(96,165,250,.13); --tone-border:rgba(96,165,250,.42); }
.ec-cell[data-tone="mach"]{ --tone:var(--accent-2-soft); --tone-text:#ddd6fe; --tone-bg:rgba(167,139,250,.13); --tone-border:rgba(167,139,250,.42); }

.cc-stepper{ display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-page); }
.cc-stp-btn{ display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; transition:background var(--duration-fast),color var(--duration-fast); }
.cc-stp-btn:hover{ background:var(--bg-elevated); color:var(--text); }
.cc-stp-btn:disabled{ opacity:.25; cursor:default; }
.cc-stp-val{ min-width:22px; text-align:center; font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-sm); color:var(--text-strong); }

/* setups — fixture plates that stack with the count */
.cc-plates{ display:flex; flex-direction:column-reverse; gap:2px; justify-content:flex-end; height:30px; }
.cc-plate{ width:26px; height:4px; border-radius:2px; background:linear-gradient(180deg,#3b4f6b,#223349); border:1px solid var(--tone-border); box-shadow:0 1px 2px rgba(0,0,0,.4); animation:ec-plate-in .25s ease backwards; animation-delay:calc(var(--i,0)*.03s); }
@keyframes ec-plate-in{ from{ transform:translateY(4px) scaleX(.6); opacity:0; } to{ transform:none; opacity:1; } }

/* shifts — day · evening · night, fills in order */
.cc-shifts{ display:inline-flex; gap:5px; padding:4px; border-radius:var(--radius-md); background:var(--bg-page); border:1px solid var(--border); }
.cc-shift{ display:flex; flex-direction:column; align-items:center; gap:3px; width:46px; padding:6px 4px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--text-subtle); cursor:pointer; transition:color .18s,background .18s,border-color .18s; }
.cc-shift-l{ font-size:var(--fs-3xs); text-transform:capitalize; }
.cc-shift:hover{ color:var(--text-mid); }
.cc-shift.on{ color:#fff; }
.cc-shift.s-sun.on{ background:radial-gradient(circle at 50% 38%, rgba(251,191,36,.40), rgba(251,191,36,.10)); border-color:rgba(251,191,36,.5); color:#fde68a; }
.cc-shift.s-dusk.on{ background:radial-gradient(circle at 50% 38%, rgba(251,113,133,.36), rgba(244,63,94,.08)); border-color:rgba(251,113,133,.5); color:#fecdd3; }
.cc-shift.s-moon.on{ background:radial-gradient(circle at 50% 38%, rgba(99,102,241,.40), rgba(67,56,202,.10)); border-color:rgba(129,140,248,.55); color:#c7d2fe; }

/* machines — FIXED-FOOTPRINT fanned card deck. Cards overlap (left:--i*5px) inside a fixed-width
   box so adding a machine grows the pile IN PLACE and never shifts the stepper. (Igor 2026-06-26) */
.cc-bays{ position:relative; width:48px; height:30px; flex:none; }
.cc-bay{ position:absolute; bottom:0; left:calc(var(--i,0)*5px); display:grid; place-items:center; width:24px; height:28px; border-radius:5px; border:1px solid var(--tone-border); color:var(--tone-text); background:linear-gradient(160deg,var(--bg-elevated),var(--bg-surface)); box-shadow:0 2px 5px rgba(0,0,0,.40); animation:ec-pop .22s ease backwards; }
.cc-bay.more{ position:absolute; top:-5px; right:-5px; left:auto; bottom:auto; width:auto; height:auto; padding:0 5px; border-radius:var(--radius-pill); font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:9px; background:var(--bg-page); border:1px solid var(--border); color:var(--text-mid); box-shadow:none; z-index:20; animation:none; }
@keyframes ec-pop{ from{ transform:scale(.6); opacity:.3; } to{ transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .cc-drawer-body,.cc-dr-ic,.cc-reset{ transition:none; }
  .cc-plate,.cc-bay{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Material & specifications — COMPACT re-skin (panel #p-specs).
   Ported from EOS_design/panel.css (compact composition only), remapped onto the
   app's theme tokens (tokens.css) so it follows morning/sunset/night. The mockup's
   raw-hex :root is intentionally DROPPED — every value resolves to an app token.
   Classes are inert until quote.html references them (phased roll-in).
   Atoms already in the app (.combo/.custom-trigger/.section-divider/.warn-inline/
   .field/.label/.input/.select) are NOT redefined here.
   ════════════════════════════════════════════════════════════════════════════ */

/* local vars scoped to the panel so they never leak: precision accent = warn (amber),
   uniform control height so labels share a baseline. */
#p-specs{ --ctl-h:40px; --cc-spec:var(--warn); }

/* uniform control height for the compact controls */
#p-specs .pnl-seg,
#p-specs .pnl-extra-toggle{ height:var(--ctl-h); }

/* ── identity row: [Technology (eng-only)] · Material · Quantity ──
   Flex so it adapts to 2 children (customer: material+qty) or 3 (engineer: +technology)
   without leaving an empty grid track. Material grows; technology + qty take natural width. */
.pnl-id{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; }
.pnl-id > *{ min-width:0; }
.pnl-id-tech{ flex:0 0 auto; }
.pnl-id-mat{ flex:1 1 220px; }
.pnl-id-qty{ flex:0 1 120px; }
@media (max-width:680px){ .pnl-id-mat,.pnl-id-qty,.pnl-id-tech{ flex:1 1 100%; } }

/* ── segmented control (tolerance / roughness) — skin over a hidden <select> ── */
.pnl-seg{ display:inline-flex; align-items:stretch; padding:3px; gap:2px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-sunken); width:max-content; max-width:100%; }
.pnl-seg.full{ width:100%; }
.pnl-seg-b{ display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1; appearance:none; border:0; background:transparent; color:var(--text-muted); font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans); padding:0 12px; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; transition:color var(--duration-fast),background var(--duration-fast); }
.pnl-seg-b:hover{ color:var(--text); }
.pnl-seg-b.on{ background:var(--accent-bg); color:var(--accent-faint); box-shadow:inset 0 0 0 1px var(--accent); }
.pnl-seg-b .sub{ font-family:var(--font-mono); font-size:var(--fs-3xs); opacity:.7; }
.pnl-seg-b.warnish.on{ background:var(--warn-bg); color:var(--warn-bright); box-shadow:inset 0 0 0 1px var(--warn-border); }
/* SHEET-PARITY — Ra/tolerance segments disabled for Sheet cut (price-inert by rule) */
.pnl-seg-b.seg-off, .pnl-seg-b:disabled{ opacity:.4; cursor:not-allowed; }
.pnl-seg-b.seg-off:hover{ color:var(--text-muted); }

/* ── spec triplet: roughness · tolerance · threads on one line ── */
.pnl-spec{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:var(--space-4); align-items:end; }
@media (max-width:680px){ .pnl-spec{ grid-template-columns:1fr; } }

/* ── finish + extra-finish drawer ── */
.pnl-finish{ display:grid; gap:var(--space-2); }
.pnl-finish-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:end; }
.pnl-extra-toggle{ display:inline-flex; align-items:center; gap:6px; padding:0 13px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:transparent; color:var(--text-muted); font-size:var(--fs-xs); font-weight:var(--fw-medium); cursor:pointer; white-space:nowrap; transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
.pnl-extra-toggle:hover{ color:var(--accent-faint); border-color:var(--accent); background:var(--accent-bg-soft); }
.pnl-extra-toggle .cc-ic{ transition:transform var(--duration-base) var(--ease); }
.pnl-extra-toggle.on{ color:var(--accent-faint); border-style:solid; border-color:var(--accent); background:var(--accent-bg-soft); }
.pnl-extra-toggle.on .cc-ic{ transform:rotate(90deg); }
.pnl-extra-count{ font-family:var(--font-mono); font-size:var(--fs-3xs); background:var(--accent-bg); color:var(--accent-faint); border-radius:var(--radius-pill); padding:1px 6px; }
.pnl-extra-grid{ display:grid; gap:var(--space-3); padding:var(--space-3); margin-top:2px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); }
.pnl-extra-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:end; }
.pnl-del{ width:34px; height:34px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; display:grid; place-items:center; }
.pnl-del:hover{ border-color:var(--danger); color:var(--danger); }
.pnl-addfin{ justify-self:start; background:transparent; color:var(--text-muted); border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:7px 11px; font-size:var(--fs-2xs); cursor:pointer; }
.pnl-addfin:hover{ color:var(--accent-faint); border-color:var(--accent); }
.pnl-addfin:disabled{ opacity:.4; cursor:default; }

/* ── precision features compact strip (folds two <details> into one) ── */
.pnl-prec{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); overflow:hidden; }
.pnl-prec-sum{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 13px; border:0; background:transparent; cursor:pointer; text-align:left; color:var(--text-mid); }
.pnl-prec-sum:hover{ background:rgba(30,41,59,.3); }
.pnl-prec-ic{ display:grid; place-items:center; color:var(--text-subtle); transition:transform var(--duration-base) var(--ease); }
.pnl-prec.open .pnl-prec-ic{ transform:rotate(90deg); }
.pnl-prec-ti{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-mid); }
.pnl-prec-chips{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.pnl-fchip{ font-family:var(--font-mono); font-size:var(--fs-3xs); padding:2px 7px; border-radius:var(--radius-pill); border:1px solid var(--tone-border,var(--warn-border)); background:color-mix(in srgb,var(--cc-spec) 13%,transparent); color:color-mix(in srgb,var(--cc-spec) 60%,#fff 40%); }
.pnl-prec-drive{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:color-mix(in srgb,var(--cc-spec) 64%,#fff 36%); }
.pnl-prec-drive .ar{ color:var(--text-subtle); }
.pnl-prec.open .pnl-prec-sum{ border-bottom:1px solid var(--border-subtle); }
.pnl-prec-inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); padding:14px; }
.pnl-fgroup{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2); min-width:0; }
.pnl-fgroup-l{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.pnl-fgroup-l .cc-ic{ color:var(--cc-spec); }
.pnl-minis{ display:flex; gap:8px; }
.pnl-minis .pnl-mini{ flex:1; min-width:0; }
@media (max-width:680px){ .pnl-prec-inner{ grid-template-columns:1fr; } }

/* mini stepper for a precision-feature count */
.pnl-mini{ display:grid; gap:3px; padding:5px 7px 6px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); min-width:66px; opacity:.55; transition:opacity var(--duration-fast),border-color var(--duration-fast); }
.pnl-mini[data-on="true"]{ opacity:1; border-color:var(--warn-border); background:color-mix(in srgb,var(--cc-spec) 9%,var(--bg-surface)); }
.pnl-mini-l{ font-family:var(--font-mono); font-size:var(--fs-3xs); color:var(--text-muted); text-align:center; }
.pnl-mini[data-on="true"] .pnl-mini-l{ color:color-mix(in srgb,var(--cc-spec) 60%,#fff 40%); }
.pnl-mini-ctl{ display:flex; align-items:center; justify-content:space-between; gap:3px; }
.pnl-mini-b{ width:20px; height:20px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-sm); background:var(--bg-page); color:var(--text-muted); cursor:pointer; transition:color var(--duration-fast),background var(--duration-fast); }
.pnl-mini-b:hover{ color:var(--text); background:var(--bg-elevated); }
.pnl-mini-b:disabled{ opacity:.3; cursor:default; }
.pnl-mini-v{ min-width:14px; text-align:center; font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-sm); color:var(--text-strong); }

/* ── Phase 6 / B2 — capacity & complexity layout ───────────────────────────────
   Igor: complexity LEFT half, Setups/Shifts/Machines RIGHT half (NOT complexity-full-row).
   The complexity «Ящик» drawer needs ~330px, so a viewport media query is wrong — use a
   CONTAINER query against the real panel width:
     ≥560px : 2-col — complexity is the full-height LEFT half; S/S/M stack in the RIGHT half.
     ≥900px : the mockup's aligned single row — complexity widest, then Setups/Shifts/Machines.
     <560px : the shipped flex-wrap (above) — never clips.
   APPENDS to — does not modify — the flex rule, so the anti-clip fallback holds. */
.eng-section{ container-type:inline-size; }
@container (min-width:560px){
  body[data-role="engineer"] .row-4:has(.cpxd),
  body[data-role="admin"] .row-4:has(.cpxd){
    display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,1fr); gap:var(--space-4) var(--space-5); align-items:start;
  }
  .row-4:has(.cpxd) > .field{ flex:initial; min-width:0; }
  .row-4:has(.cpxd) > .field:first-child{ grid-row:1 / span 3; max-width:none; }   /* complexity = full-height left half */
}
@container (min-width:900px){
  body[data-role="engineer"] .row-4:has(.cpxd),
  body[data-role="admin"] .row-4:has(.cpxd){
    grid-template-columns:minmax(300px,1.5fr) minmax(0,1fr) minmax(150px,1.3fr) minmax(0,1fr);
  }
  .row-4:has(.cpxd) > .field:first-child{ grid-row:auto; }   /* single 4-col row when wide enough */
}

/* ── Day (morning) theme contrast — the active Shifts + the machine-card icons use raw LIGHT
   colours (yellow/pink/blue/purple) tuned for the dark themes; on the white morning bg they
   wash out and become unreadable. Remap text/icon (and tighten borders) to dark, readable hues.
   Scoped to data-theme="morning" so the dark themes are untouched. (Igor 2026-06-26) */
:root[data-theme="morning"] .ec-cell[data-tone="shift"]{ --tone-text:#1d4ed8; --tone-border:rgba(37,99,235,.45); }
:root[data-theme="morning"] .ec-cell[data-tone="mach"]{ --tone-text:#6d28d9; --tone-border:rgba(109,40,217,.45); }
:root[data-theme="morning"] .cc-shift.on{ color:var(--text-strong); }
:root[data-theme="morning"] .cc-shift.s-sun.on{ color:#92600a; background:radial-gradient(circle at 50% 38%, rgba(245,158,11,.32), rgba(245,158,11,.10)); border-color:rgba(217,119,6,.55); }
:root[data-theme="morning"] .cc-shift.s-dusk.on{ color:#9f1239; background:radial-gradient(circle at 50% 38%, rgba(244,63,94,.26), rgba(244,63,94,.08)); border-color:rgba(225,29,72,.5); }
:root[data-theme="morning"] .cc-shift.s-moon.on{ color:#3730a3; background:radial-gradient(circle at 50% 38%, rgba(99,102,241,.24), rgba(79,70,229,.08)); border-color:rgba(79,70,229,.55); }