/* =====================================================================
   THE BENCH -- watch builder page (js/thebench.jsx).
   Layout only. Every colour comes from the dashboard token system, so the
   bronze recolour lives in page-accents.css scoped to [data-page="thebench"]
   and this file inherits it through var(--gold*).

   Two scoping rules hold this file in place:
     1. Everything is under .thebench or a wb- prefixed class. The renderer
        writes bare class names (.stage-inner / .layer / .stage-empty-msg),
        so those are only ever styled as descendants of .wb-viewport.
     2. The drawer / sheet / scrim / toast are PORTALLED to document.body, so
        their selectors must never require an .app ancestor.
        See [[feedback_dashboard_modal_portal]].

   Type: Marcellus for display (build names, totals, headings), Jost for UI.
   ===================================================================== */

.thebench {
  --wb-display: 'Marcellus', 'Playfair Display', serif;
  --wb-ui: 'Jost', 'Montserrat', system-ui, sans-serif;
  --wb-panel: rgba(255, 255, 255, 0.018);
  --wb-panel-2: rgba(255, 255, 255, 0.035);
  gap: 16px;
  padding-bottom: 32px;
  /* Matches the drawer's entry animation so the page glides over as it opens. */
  transition: padding-right .22s ease;
}

/* ---------------- top bar: build tabs + actions ---------------- */
.thebench .wb-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.thebench .wb-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thebench .wb-tabs::-webkit-scrollbar { display: none; }

.thebench .wb-tab {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.thebench .wb-tab-main {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--wb-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  transition: color .18s ease;
}
.thebench .wb-tab-main:hover { color: var(--ink); }
.thebench .wb-tab.active .wb-tab-main { color: var(--gold-hi); padding-right: 6px; }
.thebench .wb-tab.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -13px;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold-30);
}
.thebench .wb-tab-ico {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-4);
  font-size: 11px;
  padding: 6px 5px;
  transition: color .15s ease;
}
.thebench .wb-tab-ico:hover { color: var(--gold-hi); }
.thebench .wb-tab-del:hover { color: var(--err); }

.thebench .wb-bar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ---------------- buttons ---------------- */
.thebench .wb-btn {
  font-family: var(--wb-ui);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.thebench .wb-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); }
.thebench .wb-btn:disabled { opacity: .4; cursor: default; }
.thebench .wb-btn.on { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-10); }
.thebench .wb-btn.gold {
  background: var(--gold-grad);
  color: #14100a;
  border: none;
  font-weight: 600;
}
.thebench .wb-btn.gold:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 2px 18px var(--gold-30); }
.thebench .wb-btn.wide { width: 100%; }

.thebench .wb-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--wb-ui);
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.thebench .wb-toggle input { accent-color: var(--gold); }

.thebench .wb-chip {
  font-family: var(--wb-ui);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.thebench .wb-chip-empty { border-color: rgba(224, 108, 108, 0.4); color: #E09A9A; }

/* ---------------- body: components panel + stage ---------------- */
.thebench .wb-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.thebench .wb-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--wb-panel);
  padding: 16px 0 14px;
}
.thebench .wb-panel-label {
  font-family: var(--wb-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--ink-4);
  padding: 0 18px 12px;
  margin: 0;
}

.thebench .wb-slotlist { display: flex; flex-direction: column; }

.thebench .wb-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--wb-ui);
  transition: background .15s ease, border-color .15s ease;
}
.thebench .wb-slot:hover { background: var(--gold-10); border-left-color: var(--gold-lo); }
.thebench .wb-slot.filled { border-left-color: var(--gold); }

.thebench .wb-slot-thumb {
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--wb-panel-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-lo);
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
}
.thebench .wb-slot-thumb img { width: 100%; height: 100%; object-fit: cover; }

.thebench .wb-slot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thebench .wb-slot-type {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink-4);
}
.thebench .wb-slot-name {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.thebench .wb-slot-name.empty { color: var(--ink-4); font-style: italic; }
.thebench .wb-slot-price { font-size: 12px; color: var(--gold); white-space: nowrap; }

.thebench .wb-meta { padding: 14px 18px 0; }
.thebench .wb-hairline { height: 1px; background: var(--line); margin-bottom: 14px; }
.thebench .wb-total {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
}
.thebench .wb-total-label {
  font-family: var(--wb-ui);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--ink-4);
}
.thebench .wb-total-value { font-family: var(--wb-display); font-size: 22px; color: var(--gold-hi); }

.thebench .wb-warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.thebench .wb-warn {
  font-family: var(--wb-ui);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 6px 10px;
  border-left: 2px solid var(--err);
  background: rgba(224, 108, 108, 0.08);
  color: #DFA9A2;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.thebench .wb-warn.info {
  border-left-color: var(--gold-lo);
  background: var(--gold-10);
  color: var(--ink-3);
}

/* ---------------- stage ---------------- */
.thebench .wb-stagearea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, var(--gold-10) 0%, transparent 70%),
    var(--wb-panel);
  padding: 18px;
  overflow: hidden;
}

/* Frame sizing ported from the standalone app's style.css. */
.thebench .wb-frame {
  position: relative;
  height: min(82vh, 780px);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.thebench .wb-frame.small { height: min(66vh, 560px); }

/* Fit the whole page in one screen on desktop.
   The standalone app gave the stage 82vh because it only had a 64px header. In here
   the Editorial Masthead sits above it, so 82vh pushed the bottom of the strap, the
   build total and the Export button below the fold on a 1440x900 Mac. Measured at
   900px tall: the chrome above the scroller plus this page's own padding and the
   toolbar row eat 315px, so the stage gets what is left and the parts list scrolls
   inside itself while the total, warnings and Export stay pinned in view.
   The renderer rescales from its ResizeObserver, so a smaller frame is not a
   parity change: the composite is identical, just drawn at a different scale. */
@media (min-width: 761px) {
  .thebench .wb-body { align-items: start; }
  .thebench .wb-frame { height: clamp(320px, 100vh - 380px, 780px); }
  .thebench .wb-panel { max-height: calc(100vh - 315px); }
  .thebench .wb-slotlist { overflow-y: auto; min-height: 0; }

  /* The part picker is a side panel, not a modal, so it pushes the page over
     instead of covering it. `.page` gives this column 36px of right padding, so
     only that side is overridden and the panel width is added on top of it.
     The frame is height-driven, so a narrower column re-centres the watch into
     what is left rather than shrinking it. Body class is set by BenchDrawer. */
  body.wb-drawer-open .thebench { padding-right: calc(36px + min(420px, 92vw)); }
}

.thebench .wb-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* stage-inner is the native 3200x4800 coordinate space, scaled to fit. Written by
   wbRenderStage, so it stays scoped under .wb-viewport and never leaks app-wide. */
.thebench .wb-viewport .stage-inner {
  position: absolute;
  top: 0; left: 0;
  width: 3200px;
  height: 4800px;
  transform-origin: top left;
}
.thebench .wb-viewport .stage-inner .layer {
  position: absolute;
  top: 0; left: 0;
  width: 3200px;
  height: 4800px;
  user-select: none;
  -webkit-user-drag: none;
}
.thebench .wb-viewport .stage-empty-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--wb-ui);
  color: var(--ink-3);
  text-align: center;
  padding: 0 40px;
}
.thebench .wb-viewport .stage-empty-msg .big {
  font-family: var(--wb-display);
  font-size: 20px;
  color: var(--gold-lo);
  letter-spacing: .05em;
}
.thebench .wb-viewport .stage-empty-msg .sub { font-size: 13.5px; line-height: 1.6; max-width: 380px; }

.thebench .wb-scale-note {
  font-family: var(--wb-ui);
  font-size: 10.5px; letter-spacing: .12em; color: var(--ink-4); text-transform: uppercase;
}

/* ---------------- compare ---------------- */
.thebench .wb-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 100%;
}
.thebench .wb-col { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.thebench .wb-compare-div { width: 1px; align-self: stretch; margin: 40px 0; background: var(--line); }
.thebench .wb-select {
  background: var(--wb-panel-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  font-family: var(--wb-display);
  font-size: 15px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  letter-spacing: .04em;
  max-width: 100%;
}
.thebench .wb-col-total { font-family: var(--wb-display); font-size: 18px; color: var(--gold-hi); }

/* ---------------- empty bench ---------------- */
.thebench .wb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}
.thebench .wb-empty-h { font-family: var(--wb-display); font-size: 22px; color: var(--gold-hi); letter-spacing: .04em; }
.thebench .wb-empty-s { font-family: var(--wb-ui); font-size: 13.5px; color: var(--ink-3); max-width: 400px; line-height: 1.6; }
.thebench .wb-empty .wb-btn { margin-top: 6px; }

/* =====================================================================
   PORTALLED SURFACES -- children of <body>, NOT of .app or .page.
   No ancestor selectors here on purpose.
   ===================================================================== */
/* Phone-only, and intentionally invisible. It is a tap-to-close target, nothing
   more: no background and no backdrop-filter, so the watch behind it stays lit
   and unblurred while parts are swapped. Desktop renders no scrim at all. */
.wb-scrim {
  position: fixed; inset: 0;
  z-index: 900;
}

.wb-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #0c0c11;
  border-left: 1px solid var(--gold-30);
  z-index: 910;
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  animation: wb-drawer-in .22s ease;
  font-family: var(--wb-ui, 'Jost', system-ui, sans-serif);
}
@keyframes wb-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Short on purpose. The sheet used to eat 78vh, which buried the stage under it.
   Half-height keeps the watch on screen above the sheet while parts are picked. */
.wb-drawer.sheet {
  top: auto; left: 0; right: 0; bottom: 0;
  width: auto;
  max-height: 46vh;
  border-left: none;
  border-top: 1px solid var(--gold-30);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: wb-sheet-in .24s ease;
}
@keyframes wb-sheet-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

.wb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 13px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.wb-drawer-head h3 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .05em;
  color: var(--gold-hi);
  margin: 0;
}
.wb-x {
  background: none; border: none; color: var(--ink-3);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.wb-x:hover { color: var(--ink); }

.wb-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  /* Required, not cosmetic. The grid is a flex child with a definite height, so auto
     rows collapse to share it and the cards get crushed instead of the list scrolling.
     Pinning rows to their content makes the list overflow and scroll, which is what
     the shorter phone sheet depends on. */
  grid-auto-rows: max-content;
}

.wb-card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.wb-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.wb-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.wb-card-img {
  aspect-ratio: 1;
  background: #0a0a0d center/contain no-repeat;
}
.wb-card-body { padding: 10px 11px 12px; }
.wb-card-name { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.wb-card-specs { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; }
.wb-card-row { display: flex; justify-content: space-between; margin-top: 6px; align-items: baseline; gap: 6px; }
.wb-card-price { font-size: 12.5px; color: var(--gold); }
.wb-card-link { font-size: 10.5px; color: var(--ink-3); text-decoration: none; letter-spacing: .06em; white-space: nowrap; }
.wb-card-link:hover { color: var(--gold-hi); }
.wb-card.wb-none .wb-card-img {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4); font-size: 26px;
}
.wb-drawer-empty {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
  padding: 14px 2px;
}

/* Add Part / rename / delete dialogs run through window.Modal, so only the fields
   inside need styling. */
.wb-form { display: flex; flex-direction: column; gap: 13px; }
.wb-field { display: block; }
.wb-field > span {
  display: block;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.wb-field input, .wb-field select {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  outline: none;
}
.wb-field input:focus, .wb-field select:focus { border-color: var(--gold); }
.btn-primary.wb-danger { background: linear-gradient(135deg, #E58A8A 0%, #E06C6C 45%, #8E3030 100%); color: #1a0d0d; }

.wb-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #14141a;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13.5px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  z-index: 10001;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  animation: wb-toast-in .25s ease;
  max-width: min(420px, 90vw);
  text-align: center;
}
@keyframes wb-toast-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* =====================================================================
   MOBILE (matches the useIsMobile breakpoint in app.jsx)
   ===================================================================== */
@media (max-width: 760px) {
  .thebench { padding-left: 16px; padding-right: 16px; }

  .thebench .wb-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .thebench .wb-tabs { width: 100%; }
  .thebench .wb-tab.active::after { bottom: -1px; }
  .thebench .wb-bar-actions { justify-content: flex-start; }
  .thebench .wb-btn { padding: 8px 12px; font-size: 11px; letter-spacing: .1em; }

  .thebench .wb-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Stage first, components under it: the composite is the reason to open the page. */
  .thebench .wb-stagearea { order: 1; padding: 12px; }
  .thebench .wb-panel { order: 2; }

  .thebench .wb-frame { height: min(58vh, 520px); }
  .thebench .wb-frame.small { height: min(38vh, 360px); }

  .thebench .wb-compare { flex-direction: column; gap: 18px; }
  .thebench .wb-compare-div { width: 100%; height: 1px; margin: 0; align-self: auto; }

  .wb-grid { grid-template-columns: 1fr 1fr; padding: 14px 16px 24px; }

  /* Picker open: the sheet takes the bottom ~46vh, so the stage shrinks to fit the
     strip above it. BenchDrawer scrolls the stage to the top of that strip on open,
     and the sheet is fixed, so the watch stays put while parts are tapped. */
  body.wb-drawer-open .thebench .wb-frame { height: min(38vh, 330px); }
}