/* A project library and one focused site workflow, using the shared theme. */
.workspace-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;align-items:start}
.workspace-library{grid-column:1;grid-row:1;margin:0;min-width:0}
.workspace-main{grid-column:2;grid-row:1;min-width:0}
.workspace-sidebar{grid-column:1;grid-row:1;position:sticky;top:0;max-height:calc(100vh - 100px);overflow:auto;min-width:0}
.workspace-sidebar #demo-panel{margin-top:16px}
.workspace-library-toggle{display:none}
.workspace-context{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--accent-soft);padding:12px 16px;margin-bottom:16px;border-radius:8px;overflow-wrap:anywhere}
#demo-panel{grid-column:1;grid-row:2;min-width:0}
#demo-panel h2{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:14px}
#demo-panel .body{font-size:13px} #demo-panel details{margin-bottom:12px}
.workspace-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}
.workspace-heading h1{font:600 28px/1.2 var(--sans);margin:4px 0 8px;overflow-wrap:anywhere}
.workspace-heading p{color:var(--ink-mid);margin:0;max-width:640px}
.eyebrow{display:block;font:600 var(--fs-min)/1.5 var(--sans);letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.workspace-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.workspace-steps button{border-radius:8px;padding:10px 12px;background:var(--surface);color:var(--ink-mid);border:1px solid var(--line)}
.workspace-steps button[aria-current=true]{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.workspace-welcome{padding:36px;border:1px dashed var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.workspace-welcome h2{font-size:22px;margin-top:0}
.workspace-create{margin-bottom:16px}.workspace-create summary{font-weight:600;color:var(--accent);cursor:pointer;padding:8px 0}
.workspace-create .row{margin-top:12px}.workspace-search{margin-bottom:12px}.workspace-search label{margin-top:8px}
.workspace-project{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--sunk);overflow:hidden}
.workspace-project.current-project{border-color:var(--accent-line)}
.project-heading{display:flex;align-items:center;padding:10px 8px;gap:4px}
.project-toggle{display:flex;gap:8px;text-align:left;align-items:center;flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:2px}
.project-toggle strong,.site-open strong{display:block;overflow-wrap:anywhere;font-size:14px}
.project-toggle small,.site-open small{display:block;font-size:11px;color:var(--ink-mid);font-weight:400;overflow-wrap:anywhere}
.folder-icon{font-size:20px;color:var(--accent)}
.project-children{padding:0 8px 8px}.project-actions{display:flex;justify-content:space-between;gap:4px;padding:6px 0 10px}
.workspace-site{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:6px;margin-bottom:8px;background:var(--surface)}
.workspace-site.selected{border-color:var(--accent);background:var(--accent-soft)}
.site-open{display:block;text-align:left;width:100%;border:0;background:transparent;color:var(--ink);padding:10px}
.site-actions{display:flex;justify-content:space-between;padding:0 8px 7px}.pin-button[aria-pressed=true]{color:var(--accent);font-weight:600}
.workspace-stage>.panel{margin-bottom:18px}.workspace-stage .grid2{grid-template-columns:1fr}
.workspace-fold{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin:14px 0}
.workspace-fold>summary{padding:14px 18px;font-weight:600;cursor:pointer;color:var(--accent)}
.workspace-fold>.panel{border:0;box-shadow:none;margin:0}.workspace-fold>.panel>h2{display:none}
.workspace-stage .mapwrap{height:480px;min-height:350px}
.workspace-stage .prac-zone{display:block}
.workspace-stage #report-box{background:var(--surface);border:1px solid var(--line);padding:16px;border-radius:8px}
.workspace-stage #report-box:empty{display:none}
#workspace-error{color:var(--red);font-size:13px}
dialog.workspace-dialog,#feedback-dialog{width:min(480px,calc(100vw - 32px));border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.4)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(min-width:1500px){.wrap{max-width:1460px}.workspace-layout{grid-template-columns:330px minmax(0,1fr)}}
@media(max-width:850px){.workspace-layout{grid-template-columns:1fr}.workspace-sidebar{position:static;max-height:350px;grid-row:1}.workspace-main{grid-column:1;grid-row:2}.workspace-heading h1{font-size:24px}.workspace-steps button{flex:1;min-width:130px}.workspace-stage .mapwrap{height:400px}.workspace-welcome{padding:20px}}
@media(max-width:850px){.workspace-library-toggle{display:block;margin-bottom:16px}.workspace-layout.library-closed .workspace-sidebar{display:none}}

/* Workflow state stays distinct from the currently open step. */
.workspace-steps button {display:flex;flex-direction:column;align-items:flex-start;gap:7px;flex:1;min-width:145px;text-align:left}
.workspace-steps .step-status {font-size:12px;font-weight:600;border-radius:5px;padding:3px 7px;background:#edf0f4;color:#394655}
.workspace-steps [data-status="saved"] .step-status {background:#d9f5e5;color:#145c36}
.workspace-steps [data-status="warning"] .step-status {background:#fff0c2;color:#754500}
.workflow-key {margin:0 0 16px;font-size:12px}

/* The runoff panel's own rules moved to runoff-visual.css when the panel grew
   a provenance table and four absence states. They lived here because the
   panel was five lines of bars; they left because a component with its own
   three-channel provenance treatment, its own stale treatment and its own
   phone layout is not a workspace rule, and because these rules named three
   light-theme colours by hex on a product with a dark theme. */
/* The owner's four steps, numbered, and Report and share after them. */
.workspace-steps .step-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.workspace-steps .step-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-weight:700;line-height:1;flex:none}
.workspace-steps button[aria-current=step] .step-head{color:var(--surface)}
.workspace-steps button.step-extra{flex:0 1 auto;min-width:0;background:var(--sunk);border-style:dashed}
.workspace-steps button.step-extra[aria-current=step]{background:var(--accent);border-style:solid}
.step-do{margin:-8px 0 12px;font-size:14px;color:var(--ink);line-height:1.5}
.step-slot:empty{display:none}
.step-slot + .step-slot,.step-slot + .panel,.panel + .step-slot{margin-top:16px}
.step-do .step-do-practice{margin-left:.4rem;vertical-align:baseline}

/* Add green infrastructure (BMP) on the step line, and how practices fit in. */
.step-do .step-do-practice.primary{margin-left:.5rem}
.step-do-fit{display:block;margin-top:4px;font-size:13px;color:var(--ink-mid);line-height:1.5}

/* Results before a run (eval round 2, B5-02): the run form comes first and
   the empty "Your run, visually" card is not shown until there is a run to
   draw. A stale or unverifiable chart still shows its own notice. */
#workspace-results:not([hidden]){display:flex;flex-direction:column}
#workspace-results .runoff-visual[data-figures="none"]:not([data-freshness="stale"]):not([data-freshness="unverifiable"]){display:none}
#workspace-results:has(> #results > .runoff-visual[data-figures="none"]:not([data-freshness="stale"]):not([data-freshness="unverifiable"])) > #site-panel{order:-1}

/* Dialogs in dark mode (eval round 2, B5-21): a scrim dark enough that the
   page behind does not read through, and a border that shows on the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog::backdrop { background: rgba(0, 0, 0, .6); }
  :root:not([data-theme="light"]) dialog.workspace-dialog, :root:not([data-theme="light"]) #feedback-dialog { border-color: var(--line-strong); }
}
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] dialog.workspace-dialog, :root[data-theme="dark"] #feedback-dialog { border-color: var(--line-strong); }