/* ============================================================
   LAVISH SYSTEMS — Workfloor, redesign v2
   Warm paper workstation theme on the v2 design tokens.
   Loaded after styles.css. Covers every class workfloor.js
   generates (stations, lifecycle, replay results, tickets).
   ============================================================ */
.workfloor-page{--wf-accent:var(--amber);--wf-card:#fffdf8;--wf-border:var(--line-light)}
.workfloor-hero{padding-bottom:52px}
.workfloor-hero h1{max-width:20ch}
.workfloor-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.workfloor-flags .stamp{background:rgba(233,161,59,.12);color:var(--amber-soft)}

/* ---------- layout & panels ---------- */
.workfloor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);align-items:start;gap:20px;margin:30px 0 20px}
.workfloor-main{min-width:0;display:grid;gap:18px}
.wf-panel{min-width:0;padding:26px;border:1px solid var(--wf-border);border-radius:var(--radius-lg);background:var(--wf-card);box-shadow:0 12px 32px -18px rgba(64,38,4,.3)}
.wf-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px}
.wf-panel-head h2,.agent-panel h2,.safeguards h2{margin:6px 0 0;font-size:clamp(22px,2.6vw,30px)}
.wf-panel p{font-size:15px}
.wf-panel .eyebrow{margin-bottom:0}
.live-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid rgba(185,111,39,.5);background:rgba(233,161,59,.12);border-radius:999px;padding:7px 12px;color:var(--copper);font-weight:800;font-size:11px;letter-spacing:.08em}
.live-pill i{width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 10px var(--amber)}

/* ---------- scenario form ---------- */
.scenario-fields{display:grid;grid-template-columns:1.35fr 1fr .9fr;gap:12px;margin-top:20px}
.wf-field{display:grid;gap:7px;min-width:0;color:var(--ink-text);font-size:13.5px;font-weight:700}
.wf-field input,.wf-field select,.wf-field textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-light);border-radius:11px;background:#fff;color:var(--ink-text);font:500 14.5px/1.4 var(--font)}
.wf-field textarea{resize:vertical}
.wf-field input::placeholder,.wf-field textarea::placeholder{color:#a2947e}
.scenario-form .hero-actions{margin-top:16px}
.scenario-heading{margin-top:14px}
.scenario-heading h3{font-size:21px;margin-bottom:4px}

/* ---------- lifecycle ---------- */
.lifecycle-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.life-node{position:relative;min-height:150px;padding:15px;border:1px solid var(--line-light);border-radius:14px;background:var(--paper)}
.life-node:before{content:attr(data-step);display:block;color:var(--wf-tone,var(--copper));font-weight:800;font-size:11px;letter-spacing:.12em}
.life-node h3{margin:10px 0 6px;font-size:16.5px}
.life-node p{margin:0;color:var(--ink-dim);font-size:13px;line-height:1.5}
.life-node .life-services{display:block;margin-top:9px;color:var(--wf-tone,var(--copper));font-size:11.5px;font-weight:700;line-height:1.45}
.role-map-wrap{margin-top:20px}
.role-map{display:grid;gap:8px;margin-top:10px}
.role-list{display:grid;gap:8px}
.role-chip{display:flex;gap:10px;align-items:baseline;background:var(--paper);border:1px solid var(--line-light);border-radius:12px;padding:10px 14px;font-size:14px}
.role-chip b{color:var(--copper);white-space:nowrap}
.role-guidance{font-size:13.5px;color:var(--ink-dim)}
.external-gates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.external-gate{padding:12px 14px;border-left:3px solid var(--copper);background:rgba(233,161,59,.08);border-radius:0 12px 12px 0;color:var(--ink-dim);font-size:13.5px;line-height:1.5}
.external-gate b{color:var(--ink-text)}

/* ---------- service floor ---------- */
.service-floor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.station-card{--tone:var(--amber);display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:15px;border:1px solid var(--line-light);border-radius:15px;background:var(--paper)}
.station-orbit{display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--tone) 60%,transparent);border-radius:13px;color:var(--ink);font-weight:800;font-size:14px;background:color-mix(in srgb,var(--tone) 22%,#fff)}
.station-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.station-card h3{margin:6px 0 4px;font-size:17.5px}
.station-card p{margin:0;color:var(--ink-dim);font-size:13.5px;line-height:1.5}
.station-fit{color:var(--copper);font-weight:700}
.station-handoff{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-light);color:var(--ink-text);font-size:12.5px;line-height:1.5}
.station-handoff b{color:var(--copper)}
.station-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.station-actions a,.station-actions button{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid var(--line-light);border-radius:999px;background:#fff;color:var(--ink-text);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none}
.station-actions a:hover,.station-actions button:hover{border-color:var(--amber);color:var(--copper)}
.station-actions button[data-fixture=true]{border-color:transparent;color:var(--copper)}
.bench-count{display:flex;align-items:baseline;gap:8px;color:var(--ink-dim);font-size:13px}
.bench-count strong{font-size:32px;color:var(--copper);letter-spacing:-.02em}

/* ---------- replay ---------- */
.replay-panel .replay-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.6fr);gap:16px;align-items:end}
.replay-filter{margin-bottom:12px}
.replay-results{display:grid;gap:9px}
.tool-result{padding:14px 16px;border:1px solid var(--line-light);border-radius:13px;background:var(--paper)}
.tool-result summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:start}
.tool-result summary::-webkit-details-marker{display:none}
.tool-result summary:after{content:'+';color:var(--copper);font-weight:800;font-size:19px}
.tool-result[open] summary:after{content:'−'}
.result-title{display:block;font-weight:750;font-size:14.5px}
.result-meta{display:block;margin-top:4px;color:var(--ink-dim);font-size:12px}
.result-metric{flex:none;color:var(--copper);font-weight:800;font-size:12px}
.result-body{padding:12px 0 0;color:var(--ink-text);font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.result-body p{font-size:13.5px}
.result-workproduct{margin-top:10px;padding:12px;border-left:3px solid var(--amber);background:rgba(233,161,59,.09);border-radius:0 10px 10px 0;color:var(--ink-text);font-size:13px;white-space:pre-wrap}

/* ---------- agent rail ---------- */
.agent-rail{position:sticky;top:94px;display:grid;gap:16px}
.agent-panel{background:linear-gradient(160deg,#fffdf8,var(--paper-2))}
.agent-panel>p{color:var(--ink-dim);line-height:1.55}
.agent-pipeline{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:17px 0}
.agent-pipeline span{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line-light);border-radius:10px;background:#fff;font-size:12.5px;font-weight:600}
.agent-pipeline b{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--amber-2);font-size:11px}
.agent-state{min-height:21px;padding:10px 12px;border-left:3px solid var(--amber);background:rgba(233,161,59,.1);border-radius:0 10px 10px 0;color:var(--ink-text);font-size:13px}
.agent-queue{display:grid;gap:9px}
.agent-ticket{padding:13px;border:1px solid var(--line-light);border-radius:12px;background:#fff}
.agent-ticket-head{display:flex;justify-content:space-between;align-items:center;gap:9px}
.agent-ticket h3{margin:8px 0 5px;font-size:15.5px}
.agent-ticket p{margin:5px 0;color:var(--ink-dim);font-size:13px;line-height:1.5}
.ticket-stage{border-radius:999px;padding:5px 8px;background:rgba(233,161,59,.16);color:var(--copper);font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ticket-code{color:var(--copper);font-size:11px;font-weight:700}
.ticket-plan{border-top:1px solid var(--line-light);margin-top:9px;padding-top:9px;color:var(--ink-text);font-size:12.5px;line-height:1.55}
.ticket-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ticket-actions button{min-height:32px;padding:5px 10px;border:1px solid var(--line-light);border-radius:9px;background:#fff;color:var(--ink-text);font-size:11.5px;font-weight:700;cursor:pointer}
.ticket-actions button:hover{border-color:var(--amber);color:var(--copper)}
.agent-actions{display:grid;gap:8px;margin-top:11px}
.agent-actions .button{width:100%;min-height:40px;font-size:13.5px;justify-content:center}
.agent-actions .button.quiet{color:var(--ink-text);border-color:var(--line-light)}
.agent-panel form{display:grid;gap:12px;margin-top:17px}
.agent-panel form .button{justify-self:start}
.safeguards ul{padding-left:18px;margin-bottom:0;color:var(--ink-dim);font-size:13.5px;line-height:1.6}
.safeguards li+li{margin-top:7px}
.empty-state{padding:18px;border:1px dashed rgba(185,111,39,.55);border-radius:12px;color:var(--ink-dim);text-align:center;font-size:13px;background:rgba(233,161,59,.06)}
.wf-hidden{display:none!important}
.file-link{color:var(--copper);text-decoration:underline;text-underline-offset:3px}

/* ---------- workforce flow ---------- */
.workforce-flow{list-style:none;counter-reset:wf;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.workforce-flow li{background:var(--paper);border:1px solid var(--line-light);border-radius:14px;padding:15px 17px}
.workforce-flow b{display:block;font-size:16px;margin-bottom:4px;color:var(--copper)}
.workforce-flow span{font-size:13.5px;color:var(--ink-dim);line-height:1.5;display:block}

@media(max-width:1050px){.workfloor-layout{grid-template-columns:minmax(0,1fr) 320px;gap:14px}.wf-panel{padding:20px}.lifecycle-route{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.workfloor-layout{grid-template-columns:1fr}.agent-rail{position:static}.service-floor{grid-template-columns:1fr}.replay-panel .replay-controls{grid-template-columns:1fr;gap:0}}
@media(max-width:560px){.scenario-fields,.external-gates,.workforce-flow{grid-template-columns:1fr}.wf-panel-head{align-items:start}.lifecycle-route{grid-template-columns:1fr}.life-node{min-height:auto}.station-card{grid-template-columns:38px minmax(0,1fr);padding:12px}.station-orbit{width:35px;height:35px}}

/* CYCLE1 S3: at phone widths the replay result metric wraps under its title
   instead of forcing the page sideways (was scrollWidth 880 @390). Desktop
   rules above are untouched. */
@media(max-width:760px){
  .tool-result summary{flex-wrap:wrap}
  .result-metric{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere}
  .result-title{min-width:0;overflow-wrap:anywhere}
}