/*
 * Precision Lab — presentation-only skin for the existing Eylar v150 designer.
 * Load AFTER css/app.css. The original application remains authoritative for
 * layout, dimensions, typography metrics, responsive rules and interactions.
 * Foam rendering/selection tokens and the green success/rotation colors remain
 * unchanged. No canvas, hidden-state, internal-mode or positioning overrides.
 */
:root {
  --bg: #0d1013;
  --panel: #171b20;
  --line: #353c45;
  --txt: #f5f6f8;
  --muted: #adb6c2;
  --accent: #ed444b;
  --accent-dk: #ff858b;
}

/* Shell and existing controls. */
.fd-header {
  background: linear-gradient(180deg, #20242a, #171b20);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
}
.fd-col { background: linear-gradient(180deg, #191d23, #14181d); }
.fd-stage { background: #0e1217; }
h3 { color: #c3cbd5; }
input, select {
  background-color: #0e1217;
  border-color: var(--line);
  color: var(--txt);
  color-scheme: dark;
  caret-color: #ff858b;
}
input::placeholder { color: #919cab; }
input:focus, select:focus { border-color: var(--accent); }
.fd-name { background-color: transparent; }
.fd-name:hover, .fd-name:focus { background-color: #0e1217; }
.fd-casechip, .pill, .lockednote {
  background: #222830;
  border-color: var(--line);
}
.btn, .tool, .zoomctl button {
  background: #242a32;
  border-color: var(--line);
  color: var(--txt);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.btn:hover, .tool:hover, .zoomctl button:hover {
  background: #2c333c;
  border-color: #697382;
  color: #fff;
}
.btn.primary, .fd-coach-next {
  background: linear-gradient(180deg, #da343c, #be242e);
  border-color: #e14a52;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 12px rgba(0, 0, 0, .15);
}
.btn.primary:hover, .fd-coach-next:hover {
  background: linear-gradient(180deg, #e43b43, #c92a33);
  border-color: #fb7379;
  color: #fff;
}
.btn.danger { color: #ff858b; }
.btn.danger:hover { background: #352027; border-color: #d75b64; color: #ffb2b6; }
.tool.big {
  background: linear-gradient(115deg, #362027, #242128);
  border-color: #71373e;
}
.tool.big:hover { background: #3b252d; border-color: #ed444b; }
.tool .ic { color: #dce2ea; }
.fd-examples { background: #11161c; border-color: #424b58; }

/* Focus is painted outside the existing boxes; no control dimensions change. */
:is(button, input, select, a, label.btn):focus-visible {
  outline: 2px solid #ff9297;
  outline-offset: 3px;
}

/* Layer controls and the floating canvas toolbar. */
.layers .layer { background: #20262e; }
.layers .layer.active { background: #302027; border-color: var(--accent); }
.layers .layer .rm:hover { color: #ff969b; }
.layers .layer .dup:hover { color: #ff969b; }   /* 2026-11-06 styled like .rm */
.depthsel { background: #0e1217; border-color: var(--line); }
.badge { background: rgba(24, 29, 36, .96); }
.coord { background: rgba(8, 11, 15, .94); }
.viewtoggle, .viewtoggle button, .scan-unit, .scan-unit button, .seg, .seg button {
  background: #242a32;
}
.viewtoggle button:hover, .scan-unit button:hover, .seg button:hover { color: #fff; }
.viewtoggle button.on, .scan-unit button.on, .seg button.on {
  background: #bf2933;
  color: #fff;
}
.warnbar, .cart-approve-warn {
  background: #3a2027;
  border-color: #8b414b;
  color: #ffb2b8;
}
.checks li.bad { color: #ff969d; }
.checks li.bad::before { color: #ff727c; }

/* Shared modal surfaces, including Save/My Designs and Share. */
.modal-mask { background: rgba(4, 7, 11, .76); }
.modal {
  background: #191e25;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 0 1px #363e49;
}
.modal-head { background: #1d232b; }
.modal-head h2 { color: #fff; }
.modal-head .x:hover { color: #fff; }
.designslist .d, .share-email { border-color: var(--line); }
.designslist img { background: #272e37; }
.share-sub, .share-note { color: var(--muted); }
.share-row input { background: #0e1217; }
.toast { background: #303944; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.toast.err { background: #912333; }

/* Case picker: keep the existing tabs, selection and dimensions. */
.caselist { background: #13181e; }
.caselist .c { border-bottom-color: #2d3540; }
.caselist .c:hover { background: #32232b; }
.cp-tab { background: #242b34; }
.cp-tab:hover { background: #2d3540; border-color: #697382; }
.cp-tab.on { background: #42232c; border-color: var(--accent); color: #fff; }
.cp-tab.on .cp-tab-sub { color: #e7bcc1; }

/* Gear Library: identical cards, orientation choices, notch switches and grid. */
.lib-modal { box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px #363e49; }
.lib-tools { background: #1d232b; }
.lib-head .x { background: #303944; }
.lib-head .x:hover { background: #414c59; color: #fff; }
.lib-search .searchbox { background: #0e1217; border-color: #353e4a; }
.lib-search .searchbox:focus {
  background: #11161c;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(237, 68, 75, .16);
}
.lib-brandsel { background-color: #0e1217; border-color: #353e4a; color: #f5f6f8; }
.lib-brandsel:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(237, 68, 75, .16); }
.lib-clear { background: #394451; color: #f5f6f8; }
.lib-clear:hover { background: #4c5969; }
.lib-chip { background: #252d37; }
.lib-chip:hover { background: #333d49; border-color: #737f90; }
.lib-chip.on { background: #bf2933; border-color: #e14a52; color: #fff; }
.lib-body { background: #10151b; }
.lib-card { background: #202730; border-color: #39424e; }
.lib-card:hover { border-color: #738091; box-shadow: 0 12px 28px rgba(0, 0, 0, .32); }
.lib-card:focus-within { border-color: var(--accent); }
.lib-card .thumb:empty {
  background-image: linear-gradient(90deg, #272f39 25%, #35404c 50%, #272f39 75%);
}
.lib-card .ori { background-color: #141a21; border-color: #414b59; }
.lib-card .ori:hover { border-color: #7a8697; }
.lib-ori-static { background: #141a21; color: #c2ccd8; }
.lib-card .notch .sw { background: #566273; }
.lib-card .notch input:checked + .sw { background: #cf3440; }
.lib-card .notch input:focus-visible + .sw { box-shadow: 0 0 0 3px rgba(255, 146, 151, .75); }
.lib-card .paramrow input { background: #11171e; border-color: #414b59; }
.lib-card .paramrow input:focus { background: #0e1217; border-color: var(--accent); }
.lib-unfit-toggle { background: #202730; border-color: #5d6979; }
.lib-unfit-toggle:hover { border-color: var(--accent); color: #ff9297; }
.lib-unfit-toggle.on { border-color: #c0cad6; color: #f5f6f8; }
.lib-badge { background: rgba(10, 14, 20, .94); }
.lib-empty-ico { color: #a3afbe; }

/* Scanner: preserve all camera/canvas geometry and full-screen controls. */
.scan-how { background: #232c37; border-color: #404c5c; }
.scan-preview-cv { background: #11161c; }
.scan-fine { color: var(--muted); }
.scan-spinner { border-color: #513039; border-top-color: var(--accent); }
#scanReview.needscale #scanReviewNote {
  background: #3b2b19;
  border-color: #8f6531;
  color: #ffcf8e;
}
#scanReview.needscale #scanL { box-shadow: 0 0 0 2px rgba(237, 68, 75, .2); }
#scanModal.cam-full #scanShoot { background: #cf2c35; }

/* Review and approval. Successful checks and cart success stay green. */
.cart-warnnote { background: #3a2e19; border-color: #826631; color: #f5d28b; }
.cart-tipnote { background: #232c37; border-color: #404c5c; color: #c3cbd5; }
.cart-line { background: #232b35; border-color: #414b59; }
label.cart-line:has(input:not(:checked)) { background: #181e26; }
.cart-line-name, .cart-line-price, .cart-total, .cart-next-price { color: var(--txt); }
.cart-line-sub, .cart-done p, .cart-next-price small { color: var(--muted); }
.cart-case-color { background: #11171e; border-color: #495565; color: var(--txt); }
.cart-total { border-top-color: #414b59; }
.cart-total b, .cart-next-price b { color: #4ade80; }
.cart-case-img { background: #e9edf2; border-color: #67717f; }
.cart-approve-img { background: #151b23; border-color: #4b5665; }
.cart-approve-checks { background: #11171e; }
.cart-next { background: #232b35; border-color: #414b59; }
.cart-next ol { color: #cbd4df; }

/* Onboarding keeps every original step, arrow and target placement. */
.hint-overlay { background: rgba(4, 7, 11, .76); }
.hint-card { background: #1b2129; border-top-color: var(--accent); }
.hint-eyebrow { color: #ff858b; }
.hint-title, .hint-txt b { color: #fff; }
.hint-sub, .hint-txt { color: #b9c3d0; }
.hint-step { background: #232c36; border-color: #414c5c; }
.hint-num { background: #c92d37; box-shadow: 0 1px 4px rgba(237, 68, 75, .3); }
.hint-ic { background: #151c24; border-color: #414c5c; }
.hint-micro { color: #a7b2c1; }
.fd-coach { background: #26313d; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.fd-coach:before { background: #26313d; }
.fd-coach p { color: #d6dee8; }
.fd-coach-n, .fd-coach-skip { color: #b6c2d1; }

/* 2026-10-09 (Joe): add-to-cart actions stay GREEN under this skin — the header
   button, the review panel's "Add to cart" and the approval step's
   "I approve — add to cart". Other primary buttons keep the skin's red. */
#btnAddToCart, #cartConfirm, #cartApproveYes {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #16a34a;
  color: #fff;
}
#btnAddToCart:hover, #cartConfirm:hover, #cartApproveYes:hover {
  background: linear-gradient(180deg, #2dd36f, #1aa84f);
  border-color: #4ade80;
  color: #fff;
}
/* 2026-11-06: blocked by an unresolved overlap (aria-disabled, still clickable so it can explain) — looks disabled, no hover glow */
#btnAddToCart.is-blocked, #btnAddToCart.is-blocked:hover {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #16a34a;
  opacity: .5;
  cursor: not-allowed;
}

/* brand row in the case picker (2026-10-12) */
.brandrow-lbl, .brandrow-count { color: var(--muted); }
.brandrow select#caseBrand { background-color: #0e1217; border-color: #353e4a; color: var(--txt);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23adb6c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.brandrow select#caseBrand:hover { background-color: #141a21; border-color: #4a5563; }
.brandrow select#caseBrand:focus { background-color: #141a21; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(237,68,75,.18); }
.brandrow select#caseBrand option { background: #171b20; color: var(--txt); }

/* Pre-order review + scan "Identify it" (2026-10-20): dark-skin colors for the light base rules in app.css. */
.rv-lead { color: var(--muted); }
.rv-h { color: #c3cbd5; }
.rv-row.bad { background: #3a1d20; border-color: #7a2e34; color: #ffd9dc; }
.rv-row.tip { background: #3a2e19; border-color: #826631; color: #f5d28b; }
.rv-msg b { color: #fff; }
.rv-sizes summary { color: var(--muted); }
.rv-sizes th, .rv-sizes td { border-bottom-color: var(--line); }
.scan-id { background: #1b2027; border-color: var(--line); }
.scan-id-head { color: var(--txt); }
.scan-id-none { color: var(--muted); }
.scan-id-list li { border-top-color: var(--line); }
.scan-id-list li span b { color: var(--txt); }
.scan-id-list li small { color: var(--muted); }

.viewtools select { background: #242a32; color: #cbd5e1; border-color: rgba(255,255,255,.12); }

/* Pathfinder pill: primary takes the skin's red accent */
.pfpill button[data-op="combine"] { background: linear-gradient(180deg, #da343c, #be242e); border-color: #e14a52; }
.pfpill button[data-op="combine"]:hover { background: linear-gradient(180deg, #e43b43, #c92a33); border-color: #fb7379; }

/* point editing buttons: same slim look as the other panel buttons (Pathfinder points, 2026-11-05) */
.ptrow .btn.slim, #pFillet, #pDelPt { background: #20262e; border-color: #4a5260; color: #e8ecf2; }
.ptrow .btn.slim:hover, #pFillet:hover, #pDelPt:hover { background: #343c48; border-color: #f36f21; }

/* multi-select "Select more" toggle (2026-11-06): pressed = red accent like the other on-state buttons */
#pSelMore.on { background: #3b252d; border-color: #ed444b; color: #fff; box-shadow: 0 0 0 1px #ed444b inset; }

/* paste SVG fallback box */
#pasteSvg { background: #0e1217; color: #e7ebf0; border-color: #363e49; }
#pasteSvg::placeholder { color: #7d8794; }
#pasteSvg:focus { outline: 2px solid var(--accent); outline-offset: 1px; }