/* SPDX-License-Identifier: Apache-2.0 */
/* Ink Bench layout. Uses the page variables from style.css. */
.bench { z-index: 12; overflow: hidden; }
.bench .b-head { align-items: center; flex-wrap: wrap; }
.bench .b-head h2 { font-size: 28px; }
.bench .b-tabs { display: flex; border: 1px solid var(--line); margin-left: auto; }
.bench button.chip, .bench label.chip { background: none; border: 0; cursor: pointer; font-family: var(--mono); display: inline-flex; align-items: center; min-height: 32px; }
.bench .chip.on { color: var(--bg); background: var(--ink); }
.bench .chip:focus-visible, .bench input:focus-visible, .bench select:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
.bench .seg { display: inline-flex; border: 1px solid var(--line); vertical-align: middle; }
.b-private { margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--line); color: #c9c1b5; font-size: 11px; letter-spacing: .03em; line-height: 1.6; }
.b-private b { color: var(--fg); font-weight: 500; }
.b-pane[data-pane="compare"] { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.b-pane[hidden] { display: none !important; }
.b-stage-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.b-toolbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.b-toolbar .chip { padding: 6px 9px; font-size: 10px; }
.b-stage { position: relative; flex: 1; min-height: 0; overflow: auto; background: #000; padding: 8px; touch-action: pan-x pan-y; }
.b-stage.drawing { touch-action: none; cursor: crosshair; }
.b-canvases { display: flex; gap: 6px; align-items: flex-start; width: max-content; margin: 0 auto; }
.b-canvases.stack { flex-direction: column; }
.b-cv { display: block; background: #0d0c0b; }
.b-empty { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; background: rgba(0,0,0,.75); padding: 8px 12px; border: 1px solid var(--line); text-align: center; max-width: 90%; line-height: 1.6; }
.b-legend { padding: 6px 10px; min-height: 26px; border-top: 1px solid var(--line); line-height: 1.5; }
.b-side { overflow: auto; padding: 4px 0 16px; font-size: 12px; color: #c9c1b5; }
.b-block { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.b-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.b-row .chip { border: 1px solid var(--line) !important; padding: 6px 10px; font-size: 10px; }
.bench .b-go { color: var(--fg); border-color: var(--line-strong) !important; }
.bench select, .bench input[type=number], .bench input[type=url], .bench .b-model input, .bench .b-note, .bench textarea {
  background: #0d0c0b; color: var(--fg); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; padding: 6px 8px; border-radius: 0; min-height: 32px; }
.b-model { display: flex; flex-direction: column; gap: 4px; }
.b-drop { border: 1px dashed var(--line-strong); padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 12px; cursor: pointer; }
.b-drop.over { border-color: var(--ink); background: rgba(255,179,71,.06); }
.b-drop .chip { border: 1px solid var(--line) !important; }
.b-url { display: flex; gap: 6px; } .b-url input { flex: 1; min-width: 0; }
.b-url .chip { border: 1px solid var(--line) !important; font-size: 10px; }
.b-nudge { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.b-nudge label { display: flex; flex-direction: column; gap: 2px; color: var(--dim); }
.b-nudge input { width: 100%; }
.b-pad .chip { min-width: 34px; justify-content: center; }
.b-bar { height: 2px; background: var(--line); } .b-bar i { display: block; height: 2px; width: 0; background: var(--ink); transition: width .15s; }
.b-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11.5px; }
.b-metrics div { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.b-metrics span { color: var(--dim); } .b-metrics b { color: var(--fg); font-weight: 500; }
.b-thr { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 6px; }
.b-thr input { width: 100%; accent-color: #ffb347; }
.b-pr { width: 100%; height: auto; border: 1px solid var(--line); }
.b-ann { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.b-ann li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; border: 1px solid var(--line); padding: 6px; }
.b-ann li.on { border-color: #ffe08a; }
.b-ann li label { display: flex; align-items: center; gap: 4px; color: var(--dim); } .b-ann li label input { flex: 1; min-width: 50px; }
.b-ann li .b-note { grid-column: 1 / 3; }
.b-ann li > div { grid-column: 1 / -1; font-size: 10px; }
.b-status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(92%, 760px); background: rgba(10,9,8,.95); border: 1px solid var(--line-strong); padding: 8px 12px; font-size: 11px; line-height: 1.5; z-index: 5; word-break: break-word; }
.b-status.warn, .bench .warn { color: #ffb347; }
.bench.busy .b-stage { opacity: .75; }
.b-board, .b-cite { flex: 1; overflow: auto; max-width: 980px; }
.b-board textarea { width: 100%; }
.b-cite pre { background: #0d0c0b; border: 1px solid var(--line); padding: 10px; overflow: auto; font-size: 11px; white-space: pre; }
.b-table { border-collapse: collapse; width: 100%; margin-bottom: 14px; }
.b-table th, .b-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.b-board { overflow-x: auto; }
.b-board h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 14px 0 4px; color: var(--fg); }
.bench-why h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 14px 0 2px; color: var(--fg); }
#btnBench svg { display: block; }

@media (max-width: 860px), (max-height: 520px) {
  .bench { inset: 0; overflow: auto; border: 0; }
  .bench .b-head { padding: 10px 12px; }
  .bench .b-head h2 { font-size: 21px; }
  .bench .b-tabs { order: 3; margin-left: 0; width: 100%; }
  .bench .b-tabs .chip { flex: 1; justify-content: center; }
  .b-pane[data-pane="compare"] { display: flex; flex-direction: column; flex: none; }
  .b-stage-wrap { border-right: 0; }
  .b-stage { flex: none; max-height: 62vh; min-height: 200px; }
  .b-side { overflow: visible; }
  .b-status { position: fixed; bottom: 10px; }
  .b-board, .b-cite { overflow: visible; }
}