/* Practical workspaces, using Brickyard's existing type, material and controls. */
.wf-hero { padding: 2.5rem 0 2rem; border-bottom: 2px solid var(--line); }
.wf-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:2rem; align-items:center; }
.wf-hero h1 { font-size:clamp(2.3rem,5vw,4rem); max-width:16ch; margin:.6rem 0 1rem; }
.wf-hero .lede { max-width:65ch; font-size:1.12rem; }
.wf-scene { width:100%; height:190px; overflow:visible; }
.wf-meta { margin-top:1rem; color:var(--ink-2); font-size:.9rem; }
.wf-work { margin:2rem auto; }
.wf-columns { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:1.5rem; align-items:start; }
.wf-panel { border:2px solid var(--line-2); padding:clamp(1rem,2.5vw,1.8rem); background:var(--card); min-width:0; border-radius:4px; }
.wf-panel h2 { font-size:1.5rem; margin:0 0 1rem; }
.wf-panel h3 { font-size:1.12rem; margin:1.2rem 0 .7rem; }
.wf-panel p { margin:.6rem 0 1rem; }
.wf-panel label { display:block; color:var(--ink); font-weight:700; font-size:.9rem; margin:.8rem 0 .3rem; }
.wf-panel input:not([type=checkbox]), .wf-panel select, .wf-panel textarea { width:100%; border:1px solid var(--line-2); background:var(--page); color:var(--ink); border-radius:4px; font:inherit; padding:.6rem .65rem; min-height:44px; }
.wf-panel textarea { resize:vertical; min-height:115px; }
.wf-panel input[type=checkbox] { width:20px; height:20px; vertical-align:middle; margin-right:.5rem; }
.wf-panel .wf-check { display:flex; align-items:center; min-height:44px; }
.wf-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }
.wf-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
.wf-actions .btn { min-height:44px; }
.wf-row { border:1px solid var(--line-2); border-left:5px solid var(--m); padding:.8rem; margin:1rem 0; background:var(--page); }
.wf-row-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.wf-row-head h3 { margin:0; }
.wf-row button { font:inherit; }
.wf-remove { background:transparent; color:var(--ink-2); border:1px solid var(--line-2); padding:.45rem .65rem; min-height:44px; cursor:pointer; }
.wf-status { padding:.75rem; border-left:4px solid var(--m); background:var(--m-soft); min-height:3rem; }
.wf-status[data-error=true] { background:#fff0ea; border-color:#b0271c; color:#8c2218; }
.wf-muted, .wf-help { color:var(--ink-2); font-size:.9rem; }
.wf-metrics { display:flex; flex-wrap:wrap; gap:1.2rem; margin:1rem 0; }
.wf-metrics span { flex:1; min-width:90px; font-size:.85rem; }
.wf-metrics strong { display:block; font:850 2rem/1.15 var(--display); color:var(--ink); }
.wf-scroll { overflow-x:auto; max-width:100%; }
.wf-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.wf-table th { text-align:left; color:var(--ink); }
.wf-table th,.wf-table td { border-bottom:1px solid var(--line-2); padding:.7rem .5rem; vertical-align:top; overflow-wrap:anywhere; }
.wf-result { margin-top:1rem; }
.wf-tags { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem; margin:1rem 0; }
.wf-tag { border:1px dashed var(--ink-3); padding:.8rem; break-inside:avoid; font-size:.85rem; }
.wf-tag strong { display:block; font-size:1rem; color:var(--ink); }
.wf-matrix { display:grid; grid-template-columns:repeat(var(--cols,3),minmax(72px,1fr)); gap:.5rem; min-width:260px; }
.wf-tile { border:2px solid var(--line-2); background:var(--m-soft); padding:.8rem .3rem; min-height:85px; color:var(--ink); font:inherit; cursor:pointer; }
.wf-tile strong { display:block; }
.wf-tile[aria-pressed=true] { border-color:var(--m-ink); box-shadow:3px 3px 0 var(--m-ink); }
.wf-tile[data-done=true]::after { content:' ✓'; }
.wf-bar { height:28px; background:var(--line); display:flex; margin:.4rem 0 1rem; overflow:hidden; }
.wf-bar span { min-width:1px; border-right:1px solid var(--page); background:#65a777; }
.wf-bar span[data-gap=true] { background:repeating-linear-gradient(135deg,#ffe0c8 0 5px,#b85224 5px 8px); }
.wf-file { display:block; width:100%; text-align:left; border:1px solid var(--line-2); background:var(--page); padding:.8rem; margin:.5rem 0; color:var(--ink); font:inherit; cursor:pointer; min-height:44px; }
.wf-file[aria-pressed=true] { border:2px solid var(--m-ink); }
.wf-wave { width:100%; height:130px; background:var(--page); border:1px solid var(--line-2); }
.wf-panel audio { width:100%; margin:1rem 0; }
.wf-doc { margin:3rem auto; max-width:900px; }
.wf-doc h2 { font-size:1.6rem; margin:2rem 0 .8rem; }
.wf-doc h3 { font-size:1.15rem; margin:1.3rem 0 .5rem; }
.wf-doc p,.wf-doc li { margin:.7rem 0; max-width:75ch; }
.wf-doc ul,.wf-doc ol { padding-left:1.4rem; }
.wf-doc a { text-decoration:underline; text-underline-offset:3px; }
.wf-output-only { display:none; }
@media(max-width:800px) { .wf-columns { grid-template-columns:1fr; } .wf-hero-grid { grid-template-columns:1fr 130px; gap:1rem; } .wf-scene { height:130px; } }
@media(max-width:480px) { .wf-hero-grid { grid-template-columns:1fr; } .wf-scene { width:140px; height:95px; justify-self:end; margin-top:-.5rem; } .wf-fields { grid-template-columns:1fr; } .wf-hero { padding-top:1.5rem; } }
@media print { .tbar,.wf-hero,.wf-controls,.wf-actions,.wf-doc,.u-footer,.wf-status { display:none!important; } .wf-columns { display:block; } .wf-panel { border:0; padding:0; } .wf-work { width:100%; margin:0; } .wf-scroll { overflow:visible; } .wf-output-only { display:block; } .wf-tag { color:#111; } .wf-matrix { display:none; } }