/* ProcessStat — workshop and shared app rules.
   Mellow UI (/tools/assets/mellow-ui/mellow-ui.css) is linked first and owns the tokens, base type, .btn/.input,
   header, footer, dialog and dark mode. This sheet only lays out the app and colours it with those tokens. */

/* ---------- base controls (match .btn.small / .input; class rules below override because :where() has no weight) ---------- */
body{font-size:14.5px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a{color:var(--ink)}
:where(button:not(.btn)){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:4px 10px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.25;cursor:pointer;white-space:nowrap;user-select:none}
:where(button:not(.btn)):hover{background:var(--surface)}
:where(button:not(.btn)):active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.45}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){min-height:36px;padding:6px 10px;border:1px solid var(--ink-3);border-radius:var(--radius);background:var(--paper);color:var(--ink);min-width:0}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):hover{border-color:var(--ink)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus{outline:2px solid var(--ink);outline-offset:0;box-shadow:0 0 0 4px var(--tape)}
input[type=checkbox]{accent-color:var(--ink);width:17px;height:17px}
@media (pointer:coarse){:where(button:not(.btn)){min-height:40px}}
h1,h2,h3,p{margin:0}h2{font-size:15.5px}h3{font-size:15px;font-weight:600}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 18px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:15px;font-weight:600}
.primary:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
.primary span{margin-left:22px;opacity:.7}

/* ---------- header: project name sits between the app name and the actions ---------- */
.mw-app{text-decoration:none;color:var(--ink)}
.project-heading{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 12px;padding-inline-start:14px;border-inline-start:1px solid var(--line);min-width:0}
.project-heading label{grid-column:1/-1;font-size:11.5px;color:var(--ink-3)}
.project-heading input{font-size:14px;font-weight:600;padding:2px 0;min-height:0;border:0;border-bottom:1px dashed var(--line);border-radius:0;background:transparent;width:220px;max-width:100%}
.project-heading input:hover{border-bottom-color:var(--ink-3)}
.project-heading input:focus{box-shadow:none;outline:2px solid var(--ink);outline-offset:2px}
.project-heading span{font-size:12px;color:var(--ink-3)}

/* ---------- rail + main ---------- */
.workspace{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:calc(100vh - 72px)}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:26px 14px;display:flex;flex-direction:column;gap:18px}
.rail-label{font:600 12px/1.4 var(--font-num);letter-spacing:.12em;color:var(--ink-3);padding:0 12px}
.nav-button{display:flex;text-align:left;width:100%;gap:12px;align-items:center;padding:11px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--ink);text-decoration:none;font-weight:400;min-height:0;justify-content:flex-start;white-space:normal}
.nav-button:hover{background:var(--surface-2)}
.nav-button .nav-icon{width:26px;font-size:21px;color:var(--ink-3);font-weight:400}
.nav-button strong{display:block;font-size:14px;font-weight:600}
.nav-button small{font-size:12px;color:var(--ink-3);display:block;margin-top:3px;font-weight:400}
.nav-button.active{background:var(--paper);border-color:var(--line);color:var(--ink);box-shadow:inset 4px 0 0 var(--tape)}
.nav-button.active .nav-icon{color:var(--ink)}
.rail-bottom{margin-top:auto;padding:20px 10px 0;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.rail-bottom p{color:var(--ink-3);font-size:12px;margin:6px 0 12px}
.rail-bottom a{font-size:12.5px}
.privacy-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px}
.version{display:block;font:11px var(--mono);color:var(--ink-3);margin-top:20px}
main{min-width:0;max-width:1520px;padding:28px 32px;width:100%}
.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}
.eyebrow{font:600 12px/1.4 var(--font-num);letter-spacing:.12em;color:var(--ink-3);margin-bottom:8px}
.page-heading p{color:var(--ink-2);margin-top:8px;font-size:14px;line-height:1.6}
.page-heading button{align-self:flex-end}

/* ---------- data entry ---------- */
.data-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.section-bar{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.section-bar>div:first-child{display:flex;align-items:center;gap:12px}
.section-bar span{font-size:12.5px;color:var(--ink-3)}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.toolbar select{max-width:170px;min-height:32px;padding:4px 8px;font-size:13.5px}
.grid-scroll{max-height:264px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-grid{border-collapse:separate;border-spacing:0;min-width:100%;table-layout:fixed}
.data-grid th{position:sticky;top:0;background:var(--surface-2);z-index:1;text-align:left;color:var(--ink-2);font-weight:600}
.data-grid th:first-child,.data-grid td:first-child{width:46px;min-width:46px;max-width:46px;text-align:center;font:11.5px var(--mono);color:var(--ink-3);background:var(--surface)}
.data-grid th:first-child{background:var(--surface-2);color:var(--ink-2)}
.data-grid th,.data-grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;min-width:130px;height:32px}
.data-grid input{border:0;border-radius:0;background:transparent;width:100%;min-height:0;padding:7px 12px;font:14px var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.data-grid th input{font:600 13px var(--font);color:var(--ink-2);padding:9px 12px}
.data-grid input:focus{outline:2px solid var(--ink);outline-offset:-2px;box-shadow:none;background:var(--tape-soft)}
.data-footer{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;gap:12px;color:var(--ink-3);font-size:12.5px}
.data-footer .toolbar{flex-shrink:0}
#page-label{font:13px var(--font-num);min-width:55px;text-align:center}
.data-panel.collapsed .grid-scroll,.data-panel.collapsed .data-footer{display:none}

/* ---------- settings ---------- */
.settings-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);margin-top:18px;padding:16px 18px}
.settings-fields{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;min-width:110px;max-width:260px;flex:1;font-size:13px;font-weight:600;color:var(--ink-2)}
.field select,.field input{font-size:14px;font-weight:400;width:100%;min-height:36px}
.field small{font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.5}
.checks{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
.check{display:flex;gap:7px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.check input{flex-shrink:0}
.choice-field{flex-basis:100%;min-width:0;border:0;margin:0;padding:8px 0 0}
.choice-field legend{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.summary-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}
.summary-inputs fieldset{border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:10px;padding:12px}
.summary-inputs legend{font-size:13px;font-weight:600;color:var(--ink-2)}
.summary-inputs .field{min-width:0}
.run-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:16px;padding-top:13px}
.run-row p{font-size:13px;color:var(--ink-2);line-height:1.6}

/* ---------- results ---------- */
.result-toolbar{display:flex;justify-content:space-between;align-items:center;margin:26px 0 13px}
.result-toolbar>div:first-child{display:flex;align-items:center;gap:12px}
.result-toolbar span{font-size:12.5px;color:var(--ink-3)}
.result-toolbar .stale{color:var(--warn)!important}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.metric{border-radius:var(--radius-lg);background:var(--surface);padding:15px 18px}
.metric small{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:6px}
.metric strong{font:600 28px/1.15 var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.metric span{font-size:12.5px;color:var(--ink-3);margin-left:6px}
.insight{border-inline-start:4px solid var(--info);background:var(--info-soft);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;margin-bottom:14px;font-size:14px;line-height:1.8;color:var(--ink)}
.insight.warn{border-color:var(--warn);background:var(--warn-soft);color:var(--ink)}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chart-card,.result-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px;min-width:0;margin-bottom:14px}
.chart-card{margin-bottom:0;padding:8px}
.chart-card.full{grid-column:1/-1}
.chart-grid+.result-card{margin-top:14px}
.result-card h3{margin-bottom:12px;color:var(--ink)}
.table-wrap{overflow-x:auto}
.result-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-table th{text-align:left;padding:8px 12px;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:600}
.result-table td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.result-table tr:last-child td{border-bottom:0}
.result-table td:not(:first-child){text-align:right;font-family:var(--font-num);font-size:14.5px}
.warning-list{font-size:13.5px;color:var(--ink);line-height:1.8;padding:12px 16px;border-inline-start:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;background:var(--warn-soft);margin-top:14px}
.warning-list p+p{margin-top:5px}
.empty-state{padding:34px 16px;border:1px dashed var(--line);border-radius:var(--radius-lg);text-align:center;color:var(--ink-3);line-height:1.8}
.empty-state h3{color:var(--ink-2);margin-bottom:8px}
.error-state{border-inline-start:4px solid var(--bad);background:var(--bad-soft);border-radius:0 var(--radius) var(--radius) 0;padding:16px 18px;color:var(--ink);line-height:1.8;font-size:14px}
.error-state h3{margin-bottom:6px;color:var(--bad)}

/* ---------- dialog and toast (frame from Mellow UI) ---------- */
dialog .dialog-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
dialog h2{font-size:19px}
dialog p{font-size:14px;color:var(--ink-2);line-height:1.7;margin-bottom:12px}
dialog textarea{width:100%;margin:12px 0;font-family:var(--mono);font-size:13px;resize:vertical}
.dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin:10px 0}
dialog small{font-size:12px;color:var(--ink-3)}
.error{color:var(--bad)!important}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:99px;padding:10px 18px;font-size:14px;box-shadow:0 6px 24px rgb(0 0 0 / .25);z-index:100;max-width:90vw}

/* ---------- manuals ---------- */
.guide{max-width:900px;margin:0 auto;padding:28px 20px 56px;line-height:1.85}
.guide h1{margin:18px 0 25px}
.guide h2{font-size:20px;margin:32px 0 12px}
.guide p,.guide li{font-size:15px;color:var(--ink-2)}
.guide p strong,.guide li strong{color:var(--ink)}
.guide table{width:100%;border-collapse:collapse;font-size:14px}
.guide td,.guide th{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.guide th{background:var(--surface-2);color:var(--ink-2);font-weight:600}
.guide code{font-family:var(--mono);font-size:.92em;background:var(--surface);padding:1px 5px;border-radius:4px}

/* ---------- start here ---------- */
.quick-start{background:var(--surface);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:26px}
.quick-start summary{cursor:pointer;font-size:18px;font-weight:700;color:var(--ink)}
.quick-start summary span{font-size:13.5px;font-weight:400;color:var(--ink-2);margin-left:16px}
.purpose-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.purpose-choice{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;white-space:normal;gap:7px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;background:var(--paper);color:var(--ink);line-height:1.5;min-width:0;min-height:0;font-weight:400;text-decoration:none}
.purpose-choice small{font-size:12.5px;color:var(--ink-3);font-weight:500}
.purpose-choice strong{font-size:15px;font-weight:700}
.purpose-choice span{font-size:13px;color:var(--ink-2);font-weight:400}
.purpose-choice:hover{border-color:var(--ink);background:var(--paper);text-decoration:none}
.purpose-choice[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.experiment-choice{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.experiment-choice:hover{background:var(--ink);border-color:var(--ink)}
.experiment-choice small,.experiment-choice span{color:var(--paper);opacity:.78}
.starter-note{color:var(--ink-2);font-size:13.5px;line-height:1.8;margin-top:14px}
.input-help{padding:0 18px 14px;color:var(--ink-2);font-size:13.5px;line-height:1.8}
.settings-heading{margin-bottom:16px}
.settings-details{margin-top:18px;border-top:1px solid var(--line);padding-top:13px}
.settings-details summary,.result-details summary,.inline-help summary{cursor:pointer;font-size:13.5px;color:var(--ink);padding:4px 0;font-weight:600}
.settings-details summary span{font-weight:400;color:var(--ink-3);margin-left:12px}
.settings-details[open]>.settings-fields{margin-top:16px}
.settings-details>p{font-size:13px;color:var(--ink-2);margin-top:14px;line-height:1.8}
.result-details{margin:14px 0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);padding:12px 17px}
.result-details .result-card{border:0;margin:16px 0 0;padding:0}
.result-details .result-card h3{display:none}
.result-help p{font-size:14px;line-height:1.9;color:var(--ink-2);margin:14px 0 10px}
.result-help a{font-size:13.5px}
.inline-help{margin-top:12px}
.inline-help p{font-size:13.5px;line-height:1.9;color:var(--ink-2);margin:10px 0}
.inline-help a{font-size:13.5px}
.selected-design{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.8;margin-bottom:10px}
.design-picker .family-grid{margin-top:16px}

/* ---------- learning entry and guided practice ---------- */
.learn-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;margin-bottom:22px;background:var(--surface);border-radius:var(--radius-lg);color:var(--ink)}
.learn-entry strong{font-size:15px}
.learn-entry p{font-size:13.5px;line-height:1.7;margin-top:4px;color:var(--ink-2)}
.learn-entry a{font-size:14px;white-space:nowrap;font-weight:600}
.practice-panel{border:1px solid var(--line);border-inline-start:5px solid var(--tape);background:var(--surface);padding:20px 23px;border-radius:var(--radius-lg);margin-bottom:24px}
.practice-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.practice-panel h2{font-size:20px;color:var(--ink);margin-bottom:14px}
.practice-instruction strong{font-size:15px;line-height:1.7;color:var(--ink)}
.practice-instruction p{font-size:14.5px;line-height:1.85;color:var(--ink-2);margin-top:8px;max-width:850px}
.practice-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0}
.practice-actions>div{margin-left:auto;display:flex;gap:8px}
.practice-panel>small{font-size:12.5px;color:var(--ink-3);line-height:1.7;display:block}
.practice-focus{outline:3px solid var(--ink)!important;outline-offset:4px;box-shadow:0 0 0 8px var(--tape)!important;scroll-margin-top:40px}
.practice-panel~.learn-entry{display:none}
.experiment-choice{grid-column:1/-1}
.selected-design{padding:0 18px}
.doe-panel>.inline-help{margin:0 18px 18px}
.budget-label{gap:12px;line-height:1.6}
.budget-label>span{white-space:nowrap;flex-shrink:0}
.practice-return{position:fixed;right:24px;bottom:24px;z-index:30;min-height:42px;padding:8px 16px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);box-shadow:0 6px 24px rgb(0 0 0 / .25);max-width:calc(100vw - 32px)}
.practice-return:hover{background:var(--ink-2)}
.practice-return[hidden]{display:none}
.practice-panel{scroll-margin-top:24px}

/* ---------- responsive ---------- */
@media(max-width:650px){.learn-entry{flex-direction:column;align-items:flex-start;gap:10px}.practice-panel{padding:17px}.practice-top{flex-wrap:wrap;gap:7px}.practice-panel h2{font-size:18px}.practice-actions>div{margin-left:0}}
@media(min-width:1800px){main{margin:auto}.grid-scroll{max-height:310px}}
@media(max-width:1100px){.purpose-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-start summary span{display:block;margin:8px 0 0 20px}}
@media(max-width:550px){.purpose-grid{grid-template-columns:1fr}.quick-start{padding:16px}.purpose-choice{padding:14px}.quick-start summary{font-size:17px}.settings-details summary span{display:block;margin:7px 0 0 16px}}
@media(max-width:1150px){.project-heading span{display:none}.project-heading input{width:170px}.mw-actions a[href*="/engineering/"]{display:none}.workspace{grid-template-columns:184px minmax(0,1fr)}.rail{padding:22px 10px}.nav-button{gap:8px}.nav-button strong{font-size:13.5px}main{padding:24px 22px}.data-footer{flex-wrap:wrap}.metrics{gap:8px}.metric{padding:14px}.metric strong{font-size:24px}}
@media(max-width:820px){.project-heading{order:3;flex-basis:100%;padding-inline-start:0;border-inline-start:0}.project-heading input{width:100%}.mw-header .mw-actions{order:4;margin-inline-start:0}.workspace{display:block}.rail{border:0;border-bottom:1px solid var(--line);padding:8px 12px;display:block}.rail-label,.rail-bottom{display:none}#analysis-nav{display:flex;overflow:auto;gap:6px}.nav-button{width:auto;flex-shrink:0;margin:0;padding:8px 12px;white-space:nowrap}.nav-button .nav-icon,.nav-button small{display:none}.nav-button.active{box-shadow:inset 0 -3px 0 var(--tape)}.nav-button strong{font-size:13px}main{padding:20px 16px}.page-heading{margin-bottom:18px}.page-heading p{font-size:13.5px}.section-bar{padding:13px}.section-bar>.toolbar{width:100%}.settings-fields{gap:12px}.field{min-width:130px}.summary-inputs{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid{grid-template-columns:1fr}.chart-card.full{grid-column:auto}.data-footer>span{display:none}.run-row p{font-size:12.5px}.primary{padding:8px 14px}.guide{padding:20px 16px 48px}.guide table{font-size:13px}.guide th,.guide td{padding:7px}}

/* ---------- print ---------- */
@media print{.learn-entry,.practice-panel,.quick-start,.practice-return{display:none!important}.result-details{break-inside:avoid}}
@media print{.mw-tape,.mw-header,.mw-footer,.rail,.page-heading,.data-panel,.settings-panel,.result-toolbar,#toast,dialog{display:none!important}.workspace{display:block}main{padding:0;max-width:none}.metrics{grid-template-columns:repeat(4,1fr)}.chart-grid{display:block}.chart-card{break-inside:avoid;margin-bottom:16px}.result-card,.insight{break-inside:avoid}.result-table{font-size:11px}.print-heading{display:block!important}}