.wf-specimen { display:grid; gap:20px; }
.wf-specimen .field { margin:0; min-width:0; }
.wf-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.wf-toolbar > .field { flex:1 1 180px; }
.wf-toolbar h3 { margin-right:auto; }
.wf-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; }
.wf-check { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-weight:400; }
.wf-check input { flex-shrink:0; }
.wf-panel { border:1px solid var(--pv-border); border-radius:16px; padding:20px; display:grid; align-content:start; gap:16px; min-width:0; }
.wf-panel h3 { font-size:16px; line-height:24px; }
.wf-status { color:var(--pv-secondary); min-height:20px; overflow-wrap:anywhere; }
.wf-status:empty { display:none; }
.wf-list { padding:0; margin:0; list-style:none; display:grid; gap:10px; }
.wf-list > li { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border:1px solid var(--pv-border); border-radius:12px; padding:12px; min-width:0; }
.wf-list .wf-copy { display:grid; gap:4px; flex:1 1 180px; overflow-wrap:anywhere; }
.wf-list small { color:var(--pv-secondary); }
.wf-list progress { width:100%; }
.wf-definition { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; }
.wf-definition dt { color:var(--pv-secondary); }
.wf-definition dd { margin:0; overflow-wrap:anywhere; }
.wf-steps { display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; }
.wf-steps li { padding:8px 12px; background:var(--pv-muted); border-radius:999px; }
.wf-steps [aria-current] { color:var(--pv-selection-fg); background:var(--pv-selection-bg); font-weight:600; }
.wf-disclosure > summary { min-height:44px; cursor:pointer; padding:12px 0; }
.wf-grid-scroll { max-height:420px; }
.wf-grid-scroll th { position:sticky; top:0; background:var(--pv-surface); z-index:2; }
.wf-grid-scroll .wf-pinned { position:sticky; left:0; background:var(--pv-surface); z-index:1; min-width:180px; }
.wf-grid-scroll th.wf-pinned { z-index:3; }
.wf-specimen table { width:100%; }
.wf-specimen caption { text-align:left; padding:12px 0; color:var(--pv-secondary); }
.wf-specimen td .button { white-space:nowrap; }
.wf-inline-form { display:flex; gap:8px; min-width:280px; }
.wf-inline-form input { min-width:100px; }
.wf-expanded td { background:var(--pv-muted); }
.wf-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.wf-metric { text-align:left; display:grid; gap:8px; padding:20px; border:1px solid var(--pv-border); border-radius:16px; background:var(--pv-surface); color:var(--pv-text); min-height:100px; }
.wf-metric strong { font-size:28px; line-height:36px; }
.wf-metric[aria-pressed=true] { background:var(--pv-selection-bg); border-color:var(--pv-selection-fg); }
.wf-bars { display:grid; gap:12px; }
.wf-bar-button { display:grid; grid-template-columns:minmax(100px,180px) minmax(40px,1fr) 70px; align-items:center; gap:12px; min-height:48px; padding:10px; border:1px solid var(--pv-border); border-radius:10px; background:var(--pv-surface); color:var(--pv-text); text-align:left; }
.wf-bar-track { height:14px; background:var(--pv-muted); border-radius:999px; overflow:hidden; }
.wf-bar-fill { height:100%; background:var(--pv-red); border-radius:inherit; }
.wf-bar-button[aria-pressed=true] { outline:2px solid var(--pv-focus); outline-offset:2px; }
.wf-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wf-compare article { border:1px solid var(--pv-border); border-radius:12px; padding:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.wf-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wf-board-column { border:1px solid var(--pv-border); background:var(--pv-muted); border-radius:16px; padding:14px; min-width:0; }
.wf-board-column h3 { margin-bottom:16px; }
.wf-board-card { display:grid; gap:12px; padding:16px; border:1px solid var(--pv-border); border-radius:12px; background:var(--pv-surface); margin-bottom:12px; }
.wf-board-card:last-child { margin-bottom:0; }
.wf-board-card[draggable=true] { cursor:grab; }
.wf-board-card label { display:grid; gap:6px; font-size:12px; }
.wf-specimen pre { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.wf-specimen fieldset { min-width:0; border:1px solid var(--pv-border); border-radius:12px; padding:16px; }
.wf-specimen output { overflow-wrap:anywhere; }
@media(max-width:800px) { .wf-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .wf-board { grid-template-columns:1fr; } }
@media(max-width:640px) { .wf-fields,.wf-compare,.wf-metrics { grid-template-columns:1fr; } .wf-definition { grid-template-columns:1fr; gap:4px; } .wf-definition dd { margin-bottom:8px; } .wf-panel { padding:16px; } .wf-bar-button { grid-template-columns:100px minmax(20px,1fr) 48px; gap:8px; } }

/* Separate form fields from their actions; keep standalone controls intrinsic. */
.wf-specimen > form:not(.wf-fields) { display:grid; gap:24px; }
.wf-specimen > .badge,.wf-specimen > .button,.wf-panel > .button { justify-self:start; }
.wf-board-card select { font-size:14px; line-height:20px; font-family:var(--pv-font-sans); }
@media(max-width:640px) { .wf-board-card select { font-size:16px; } }

/* Keep one-time key content distinct from its controls and feedback. */
.wf-key-panel { max-width:760px; }
#wf-key-confirm,#wf-key-reveal { display:grid; gap:16px; min-width:0; padding-top:20px; border-top:1px solid var(--pv-border); }
.wf-key-value-box { display:grid; gap:8px; min-width:0; padding:16px; background:var(--pv-muted); border:1px solid var(--pv-border); border-radius:12px; }
.wf-key-caption { color:var(--pv-secondary); font-size:12px; line-height:18px; }
#wf-key-value { display:block; font:14px/22px ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; user-select:all; }
.wf-key-panel .wf-toolbar { gap:12px; }
.wf-key-panel .wf-status:empty { display:none; }