/* ─────────────────────────────────────────────────────────────────────────
   THE BENCH — the piece of the app that sits on the front page.

   Two palettes meet here and they are kept apart on purpose. The page is Bone
   (rivet.css); the product is dark and stays dark, so this window carries the
   application's own tokens and does not inherit the page's. That is the same
   reason every 3D capture on this site sits on a dark stage.

   The layer colours below are transcribed from
   src/renderer/pcbnew/layer-palette.js. Front is warm, back is cool, and
   ORANGE IS NEVER A LAYER — #ff9838 is the selection and the agent, so what
   the software is doing stays distinguishable from what your design is.
   ───────────────────────────────────────────────────────────────────────── */

.bench {
  --l-bg: #0e0f10;
  --l-grid: #1c1e21;
  --l-fcu: #e2564d;
  --l-bcu: #4c86d8;
  --l-pad: #e6c454;
  --l-hole: #8be3ea;
  --l-silk: #e8ebef;
  --l-crtyd: #b06fd4;
  --l-fab: #6f767d;
  --l-edge: #f2f4f6;

  --app-bg: #16181b;
  --app-panel: #1b1e22;
  --app-line: #2a2e34;
  --app-fg: #e7eaee;
  --app-fg2: #9aa3ae;
  --app-fg3: #6b7480;
  --app-accent: #ff9838;

  --rail-w: 58px;
  --agent-w: 292px;
  --side-w: 232px;

  position: relative;
  color: var(--app-fg);
}

/* ── the window ──────────────────────────────────────────────────────────── */

.bench-win {
  border-radius: 12px;
  overflow: hidden;
  background: var(--app-bg);
  border: 1px solid rgb(255 255 255 / .07);
  box-shadow: 0 60px 120px -60px rgb(var(--shadow-rgb) / .55), 0 2px 10px -4px rgb(var(--shadow-rgb) / .22);
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.5;
}

.bw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
  flex: 0 0 auto;
}
.bw-lights { display: flex; gap: 6px; }
.bw-lights i { width: 10px; height: 10px; border-radius: 50%; background: #33383f; display: block; }
.bw-file {
  font-size: 12px; color: var(--app-fg2); letter-spacing: -.005em;
  margin: 0 auto 0 6px;
}
.bw-file b { color: var(--app-fg); font-weight: 570; }

.bw-body { display: flex; min-height: 0; }

/* ── the rail. A rail marks a change of PLACE; the switch in the canvas
   header marks a change of MODE. The selection wraps the icon only, with the
   label unboxed below it, so the targets align whatever the label length. ── */
.bw-rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  border-right: 1px solid var(--app-line);
  background: var(--app-panel);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.bw-rail button {
  width: 100%;
  border: 0; background: none; cursor: default;
  padding: 6px 0 5px;
  display: grid; justify-items: center; gap: 3px;
  color: var(--app-fg3);
  font: inherit; font-size: 9.5px; letter-spacing: .01em;
}
.bw-rail button i {
  width: 30px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
}
.bw-rail button svg { width: 15px; height: 15px; display: block; }
.bw-rail button[aria-current="true"] { color: var(--app-fg); }
.bw-rail button[aria-current="true"] i { background: rgb(255 152 56 / .16); color: var(--app-accent); }

/* ── the agent panel ─────────────────────────────────────────────────────── */
.bw-agent {
  width: var(--agent-w);
  flex: 0 0 var(--agent-w);
  border-right: 1px solid var(--app-line);
  background: var(--app-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bw-agent-head {
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--app-line);
  display: flex; align-items: center; gap: 8px;
}
.bw-agent-head span { font-size: 11px; color: var(--app-fg3); letter-spacing: .04em; text-transform: uppercase; font-weight: 620; }

.bw-turn {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin;
}
.bt-ask {
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--app-line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--app-fg);
  font-size: 12.5px;
}
.bt-said { color: var(--app-fg2); font-size: 12.5px; margin: 0; }
.bt-step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
  font-size: 12.5px;
}
.bt-step i {
  width: 7px; height: 7px; margin-top: 6px; border-radius: 50%;
  border: 1.5px solid var(--app-fg3);
}
.bt-step.is-ok i { border-color: #59c48d; background: #59c48d; }
.bt-step span { color: var(--app-fg); }
.bt-step em { grid-column: 2; font-style: normal; color: var(--app-fg3); font-size: 11.5px; }

.bt-ask, .bt-said, .bt-step { animation: bt-in .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes bt-in { from { opacity: 0; transform: translateY(5px); } }

.bw-ask {
  border-top: 1px solid var(--app-line);
  padding: 11px 14px 13px;
  flex: 0 0 auto;
}
.bw-run {
  width: 100%;
  height: 34px;
  border: 0; border-radius: 8px;
  background: var(--app-accent);
  color: #1a0e02;
  font: inherit; font-size: 12.5px; font-weight: 640;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter .2s;
}
.bw-run:hover { filter: brightness(1.07); }
.bench.is-playing .bw-run { opacity: .5; pointer-events: none; }
.bw-ask p { margin: 8px 0 0; font-size: 11px; color: var(--app-fg3); line-height: 1.45; }

/* ── the canvas ──────────────────────────────────────────────────────────── */
.bw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bw-head {
  height: 38px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--app-line);
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px;
  background: var(--app-panel);
}
/* A trackless text switch, no icons and no container round the group. Only
   the active item carries a fill — a box round the whole thing is what makes
   a switch read as a system component instead of as part of the app. */
.bw-switch { display: flex; gap: 2px; }
.bw-switch button {
  border: 0; background: none; cursor: pointer;
  height: 26px; padding: 0 10px; border-radius: 7px;
  font: inherit; font-size: 12.5px; font-weight: 540;
  color: var(--app-fg3);
}
.bw-switch button[aria-selected="true"] { background: rgb(255 255 255 / .08); color: var(--app-fg); }
.bw-tools { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.bw-tools button {
  width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: none; color: var(--app-fg3); cursor: pointer;
  display: grid; place-items: center;
}
.bw-tools button:hover { background: rgb(255 255 255 / .07); color: var(--app-fg); }
.bw-tools svg { width: 14px; height: 14px; }
.bw-zoom { font-size: 11px; color: var(--app-fg3); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

.bw-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--l-bg);
  background-image:
    linear-gradient(to right, var(--l-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--l-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
  touch-action: none;
}
.bench-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.bench-svg.is-panning { cursor: grabbing; }

/* ── the side column ─────────────────────────────────────────────────────── */
.bw-side {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  border-left: 1px solid var(--app-line);
  background: var(--app-panel);
  display: flex; flex-direction: column; min-height: 0;
}
.bw-side-head { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--app-line); }
.bw-side-head button {
  border: 0; background: none; cursor: pointer;
  height: 26px; padding: 0 10px; border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 540; color: var(--app-fg3);
}
.bw-side-head button[aria-selected="true"] { background: rgb(255 255 255 / .08); color: var(--app-fg); }
.bw-side-body { overflow-y: auto; padding: 12px 14px 16px; min-height: 0; scrollbar-width: thin; }

.bench[data-tab="props"] [data-bench-layers],
.bench[data-tab="layers"] [data-bench-props] { display: none; }

.bx-hint { margin: 0 0 12px; font-size: 11.5px; color: var(--app-fg3); }
.bx-title { margin: 0 0 12px; font-size: 15px; font-weight: 640; letter-spacing: -.02em; }
.bx-title em { font-style: normal; color: var(--app-fg2); font-weight: 500; font-size: 13px; margin-left: 4px; }
.bx-row { margin: 0 0 9px; font-size: 11.5px; display: grid; gap: 1px; }
.bx-row span { color: var(--app-fg3); }
.bx-row b { color: var(--app-fg); font-weight: 540; font-size: 12.5px; word-break: break-word; }
.bx-row b.ok { color: #59c48d; }
.bx-row .data { font-family: var(--mono); font-size: 11px; letter-spacing: -.01em; color: var(--app-fg2); }
.bx-sub { margin: 14px 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--app-fg3); font-weight: 620; }
.bx-pads { list-style: none; margin: 0; padding: 0; }
.bx-pads li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px;
  padding: 6px 0; border-top: 1px solid var(--app-line); font-size: 11.5px;
}
.bx-pads span { color: var(--app-fg2); font-family: var(--mono); }
.bx-pads em { font-style: normal; color: var(--app-fg); }
.bx-pads i { grid-column: 2; font-style: normal; color: var(--app-fg3); font-size: 10.5px; }

.bx-layer { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; cursor: pointer; color: var(--app-fg2); }
.bx-layer input { accent-color: var(--app-accent); width: 13px; height: 13px; margin: 0; }
.bx-layer .sw { width: 10px; height: 10px; border-radius: 2px; display: block; }
.sw-fcu { background: var(--l-fcu); } .sw-bcu { background: var(--l-bcu); }
.sw-silk { background: var(--l-silk); } .sw-crtyd { background: var(--l-crtyd); }
.sw-fab { background: var(--l-fab); } .sw-hole { background: var(--l-hole); }

/* ── the board itself ────────────────────────────────────────────────────── */
/* The app's 2D board editor does not paint a substrate — copper is drawn
   straight onto the canvas ground, and there is no FR-4 colour token in
   layer-palette.js to borrow. So this is one step off the canvas rather than
   a green board: enough for the outline to read, not enough to be a claim
   about what colour the soldermask is. */
.bd-substrate { fill: #131619; }
.bd-edge { fill: none; stroke: var(--l-edge); stroke-width: .12; opacity: .5; }

.bd-layer.is-off { display: none; }

.bd-bcu { color: var(--l-bcu); opacity: .42; }
.bd-fcu { color: var(--l-fcu); }
.bd-pour { fill: currentColor; opacity: .26; }
.bd-track { stroke: currentColor; }
.bd-pad { fill: currentColor; }
.bd-pad-tht { fill: var(--l-pad); }
.bd-via { fill: var(--l-fcu); }
.bd-drill { fill: #0b0d0e; }

.bd-silk { color: var(--l-silk); opacity: .82; }
.bd-crtyd { color: var(--l-crtyd); opacity: .62; }
.bd-fab { color: var(--l-fab); opacity: .7; }
.bd-silktext { fill: currentColor; font-family: var(--sans); font-weight: 620; letter-spacing: .02em; }
.bd-refs { fill: var(--l-silk); opacity: .62; font-family: var(--sans); font-weight: 600; pointer-events: none; }

/* Hover, selection and net light. All three are the accent, because all three
   are the software talking about your design rather than the design itself. */
.bd-part { cursor: pointer; }
.bd-part.is-hover .bd-pad { filter: brightness(1.35); }
.bd-part.is-sel .bd-pad { stroke: var(--app-accent); stroke-width: .16; paint-order: stroke; }
.bd-crtyd path.is-hover, .bd-silk path.is-hover { opacity: 1; }
text.bd-ref.is-sel { fill: var(--app-accent); opacity: 1; }

.bench-svg[data-lit] .bd-track, .bench-svg[data-lit] .bd-pad, .bench-svg[data-lit] .bd-via { opacity: .34; }
.bench-svg[data-lit] .is-lit { opacity: 1; }
.bench-svg[data-lit] .bd-track.is-lit { stroke: var(--app-accent); }
.bench-svg[data-lit] .bd-pour.is-lit { opacity: .46; }

/* ── the turn, played on the board ───────────────────────────────────────── */
.bench[data-stage="empty"] .bd-part,
.bench[data-stage="empty"] .bd-silk,
.bench[data-stage="empty"] .bd-refs,
.bench[data-stage="empty"] .bd-drills,
.bench[data-stage="empty"] .bd-vias { opacity: 0; }

.bench[data-stage="empty"] .bd-track,
.bench[data-stage="parts"] .bd-track,
.bench[data-stage="nets"] .bd-track { stroke-dasharray: 1; stroke-dashoffset: 1; }

.bench[data-stage="empty"] .bd-pour,
.bench[data-stage="parts"] .bd-pour,
.bench[data-stage="nets"] .bd-pour,
.bench[data-stage="tracks"] .bd-pour { opacity: 0; }

.bench .bd-part, .bench .bd-silk, .bench .bd-refs, .bench .bd-drills, .bench .bd-vias { transition: opacity .5s ease; }
.bench .bd-pour { transition: opacity .7s ease; }
.bench .bd-track { transition: stroke-dashoffset .85s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .bench .bd-part, .bench .bd-silk, .bench .bd-refs, .bench .bd-drills,
  .bench .bd-vias, .bench .bd-pour, .bench .bd-track { transition: none; }
}

/* ── the frame around it ─────────────────────────────────────────────────── */
.bench-cap {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
}
.bench-cap b { color: var(--fg-2); font-weight: 600; }
.bench-cap a { color: var(--fg-2); border-bottom: 1px solid var(--line-2); }
.bench-cap a:hover { color: var(--cu-deep); border-color: var(--cu-deep); }

.bench.is-dead .bw-body { min-height: 320px; }

/* ── narrower ────────────────────────────────────────────────────────────── */
.bw-body { height: clamp(400px, 52vh, 540px); }

@media (max-width: 1120px) {
  .bench { --agent-w: 252px; --side-w: 200px; }
}
@media (max-width: 940px) {
  .bench { --agent-w: 240px; }
  .bw-side { display: none; }
  .bw-body { height: 430px; }
}
@media (max-width: 720px) {
  .bw-rail { display: none; }
  .bw-agent { display: none; }
  .bw-body { height: 340px; }
  .bench-win { border-radius: 10px; }
}