/* {{PRODUCT}} wireframes - every selector is scoped under .wf
   Tokens: 15-crossreview-astra.md (light + dark) - Production = plum, not red (30 item 8).
   Add classes only - never rename or remove (other builders use this file). */

/* ---------- tokens ---------- */
.wf{
  --wf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* host page (outside the mockup) */
  --wf-page: var(--hb-surface, #FFFFFF);
  --wf-page-rule: var(--hb-rule, #C5CEDB);
  --wf-page-ink: var(--hb-ink, #172B4D);
  --wf-page-muted: var(--hb-muted, #46556B);
  --wf-page-wash: var(--hb-wash, #F3F6FA);
  /* product */
  --wf-bg: #F3F3F3;          /* app canvas */
  --wf-card: #FFFFFF;        /* surface */
  --wf-container: #F3F3F3;   /* inside cards */
  --wf-container-2: #E5E5E5;
  --wf-chrome: #E5E5E5;      /* window title bar */
  --wf-border: #747474;      /* inputs, strong edges (3:1) */
  --wf-line: #E5E5E5;        /* dividers */
  --wf-text: #2E2E2E;
  --wf-muted: #5C5C5C;
  --wf-faint: #5C5C5C;       /* empty values, still >= 4.5:1 on white */
  --wf-accent: #066AFE; --wf-on-accent: #FFFFFF; --wf-link: #0250D9;
  --wf-accent-soft: #E6F0FF;
  --wf-success: #056764; --wf-success-soft: #E3F3EA;
  --wf-warning: #8C4B02; --wf-warning-soft: #FDF0E1;
  --wf-danger:  #B60554; --wf-danger-soft:  #FBE7E9;
  --wf-info:    #0B5CAB; --wf-info-soft:    #E6F0FF;
  --wf-prod: #4B2E83; --wf-prod-fill: #4B2E83; --wf-on-prod: #FFFFFF; --wf-prod-soft: #EFEAF8;
  --wf-full: #0057D9; --wf-full-soft: #E6F0FF;
  --wf-dev: #08756F;  --wf-dev-soft: #E1F3F1;
  --wf-partial: #3A6EA5; --wf-partial-soft: #E9F0F8; --wf-scratch: #5A6474; --wf-scratch-soft: #EEF0F3;
  --wf-hl: #FFE58A;          /* highlight in screenshots */
  --wf-scrim: rgba(23,43,77,.42);
  --wf-shadow: 0 1px 2px rgba(23,43,77,.06), 0 4px 16px rgba(23,43,77,.08);
  --wf-shadow-lg: 0 8px 32px rgba(23,43,77,.22);
  --wf-mk-bg: #FFD23F; --wf-mk-ink: #1B1B1B;   /* annotation markers - not product UI */
  --wf-r-sm: 4px; --wf-r-md: 8px; --wf-r-lg: 12px;
}
@media (prefers-color-scheme: dark){
  .wf{
    --wf-page: var(--hb-surface, #131C29);
    --wf-page-rule: var(--hb-rule, #33445B);
    --wf-page-ink: var(--hb-ink, #F2F6FC);
    --wf-page-muted: var(--hb-muted, #B6C3D5);
    --wf-page-wash: var(--hb-wash, #1A2636);
    --wf-bg: #181818;
    --wf-card: #242424;
    --wf-container: #2E2E2E;
    --wf-container-2: #383838;
    --wf-chrome: #2E2E2E;
    --wf-border: #757575;
    --wf-line: #444444;
    --wf-text: #E5E5E5;
    --wf-muted: #AEAEAE;
    --wf-faint: #AEAEAE;
    --wf-accent: #066AFE; --wf-on-accent: #FFFFFF; --wf-link: #78B0FD;
    --wf-accent-soft: #13243D;
    --wf-success: #01C3B3; --wf-success-soft: #12301F;
    --wf-warning: #FE9339; --wf-warning-soft: #3A2810;
    --wf-danger:  #FE8F7D; --wf-danger-soft:  #42161C;
    --wf-info:    #78B0FD; --wf-info-soft:    #13243D;
    --wf-prod: #C3AEF5; --wf-prod-fill: #5E3FA3; --wf-on-prod: #FFFFFF; --wf-prod-soft: #2A1F45;
    --wf-full: #8DBBFF; --wf-full-soft: #13243D;
    --wf-dev: #71D9CE;  --wf-dev-soft: #0F2E2C;
    --wf-partial: #A9CBF5; --wf-partial-soft: #1B2A3D; --wf-scratch: #AEB8C6; --wf-scratch-soft: #232B36;
    --wf-hl: #6B5A12;
    --wf-scrim: rgba(0,0,0,.55);
    --wf-shadow: 0 4px 16px rgba(0,0,0,.35);
    --wf-shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  }
}

/* ---------- reset inside fragments (host styles must not leak in) ---------- */
.wf .wf-screen, .wf .wf-screen *, .wf .wf-screen *::before, .wf .wf-screen *::after{box-sizing:border-box}
.wf .wf-screen :where(p,ul,ol,li,dl,dt,dd,table,figure,blockquote,h1,h2,h3,h4,h5,h6,pre){margin:0;padding:0;max-width:none;border:0}
.wf .wf-screen :where(ul,ol){list-style:none}
.wf .wf-screen :where(table){border-collapse:collapse;width:100%;background:none}
.wf .wf-screen :where(th,td){border:0;padding:0;background:none;text-align:left;vertical-align:top;font:inherit;color:inherit}
.wf .wf-screen :where(code,kbd,b,strong,i,em,span,small){max-width:none}
.wf .wf-screen code{font:12.5px/1.45 var(--wf-mono);background:var(--wf-container);color:inherit;padding:1px 5px;border-radius:var(--wf-r-sm);overflow-wrap:anywhere}
.wf .wf-screen svg{max-width:100%;height:auto;overflow:visible}

/* ---------- figure (sits on host page) ---------- */
.wf .wf-screen{margin:0;padding:16px;border:1px solid var(--wf-page-rule);border-radius:var(--wf-r-lg);background:var(--wf-page);color:var(--wf-page-ink);font:16px/1.5 var(--wf-font);container:wfs / inline-size}
.wf .wf-cap{display:block;margin:0 0 12px;max-width:none;font:16px/1.5 var(--wf-font);color:var(--wf-page-ink)}
.wf .wf-cap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf .wf-id{font:600 14px/1 var(--wf-mono);padding:5px 8px;border-radius:var(--wf-r-sm);background:var(--wf-page-wash);border:1px solid var(--wf-page-rule);color:var(--wf-page-ink)}
.wf .wf-title{font-size:20px;font-weight:600;line-height:1.3}
.wf .wf-phase{margin-left:auto;font:600 14px/1 var(--wf-font);padding:6px 10px;border-radius:999px;border:1px solid currentColor}
.wf .wf-phase--v1{color:#0057D9;background:#E6F0FF}
.wf .wf-phase--v15{color:#6A3BAE;background:#F1EAFB}
.wf .wf-phase--later{color:#46556B;background:#EEF1F5}
@media (prefers-color-scheme: dark){
  .wf .wf-phase--v1{color:#8DBBFF;background:#13243D}
  .wf .wf-phase--v15{color:#E0B8FF;background:#2E1D42}
  .wf .wf-phase--later{color:#B6C3D5;background:#1F2B3C}
}
.wf .wf-na{font:600 14px/1 var(--wf-font);padding:6px 10px;border-radius:var(--wf-r-sm);background:#5A6474;color:#FFFFFF}
.wf .wf-na{display:none} /* phase chip already says v1.5 / Later - no repeat */
.wf .wf-screen--na{border-style:dashed}
.wf .wf-purpose{display:block;margin-top:6px;color:var(--wf-page-muted);font-size:16px}
.wf .wf-hint{display:none;margin:0 0 6px;text-align:right;font:600 15px/1.3 var(--wf-font);color:var(--wf-page-muted)}
@container wfs (max-width: 1040px){ .wf .wf-hint{display:block} }
.wf .wf-scroll{overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wf .wf-scroll:focus-visible{outline:3px solid #066AFE;outline-offset:2px;border-radius:var(--wf-r-lg)}

/* legend */
.wf .wf-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px 28px;grid-template-columns:minmax(0,1fr);font:16px/1.5 var(--wf-font);color:var(--wf-page-ink)}
@container wfs (min-width: 860px){ .wf .wf-legend{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.wf .wf-legend li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;align-items:start;margin:0;max-width:none}
.wf .wf-legend .wf-mk{margin:1px 0 0}

/* annotation marker - yellow sticker, not product UI */
.wf .wf-mk{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:0 4px;border-radius:50%;background:var(--wf-mk-bg);color:var(--wf-mk-ink);border:2px solid var(--wf-mk-ink);font:700 13px/1 var(--wf-font);vertical-align:middle;font-style:normal;letter-spacing:0;box-shadow:0 0 0 2px var(--wf-mk-bg)}
.wf .wf-mk--abs{position:absolute;z-index:5;margin:0}

/* ---------- app window ---------- */
.wf .wf-win{position:relative;width:100%;min-width:1040px;max-width:1200px;margin:0 auto;border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);overflow:hidden;background:var(--wf-bg);color:var(--wf-text);box-shadow:var(--wf-shadow);font:13px/1.45 var(--wf-font);text-align:left}
.wf .wf-tb{display:flex;align-items:center;height:34px;padding:0 12px;background:var(--wf-chrome);border-bottom:1px solid var(--wf-line)}
.wf .wf-dots{display:flex;gap:8px}
.wf .wf-dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57;display:block}
.wf .wf-dots i:nth-child(2){background:#FEBC2E}
.wf .wf-dots i:nth-child(3){background:#28C840}
.wf .wf-tb-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--wf-muted);margin-right:52px}

/* top bar */
.wf .wf-top{display:flex;align-items:center;gap:12px;height:54px;padding:0 14px;background:var(--wf-card);border-bottom:1px solid var(--wf-line)}
.wf .wf-ws{display:flex;align-items:center;gap:8px;width:226px;flex:none;padding:6px 8px;border-radius:var(--wf-r-md);position:relative}
.wf .wf-logo{width:26px;height:26px;flex:none;display:block}
.wf .wf-ws-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf .wf-ws-sub{display:block;font-size:12px;color:var(--wf-muted);font-weight:400;line-height:1.2}
.wf .wf-caret{color:var(--wf-muted);font-size:12px;margin-left:auto}
.wf .wf-ws-badge{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 6px;border-radius:5px;background:var(--wf-accent);color:#FFFFFF;border:0;box-shadow:none;font-size:12px;font-weight:700;line-height:1}
.wf .wf-org{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 0;border-radius:var(--wf-r-md);border:1px solid var(--wf-border);background:var(--wf-card);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;flex:none}
.wf .wf-org::before{content:"";width:6px;align-self:stretch;background:var(--wf-org-c,var(--wf-border))}
.wf .wf-org-cls{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--wf-org-c,var(--wf-muted))}
.wf .wf-org--prod{--wf-org-c:var(--wf-prod);background:var(--wf-prod-fill);border-color:var(--wf-prod-fill);color:var(--wf-on-prod)}
.wf .wf-org--prod::before{background:#FFFFFF;opacity:.0;width:0}
.wf .wf-org--prod{padding-left:12px}
.wf .wf-org--prod .wf-org-cls{color:var(--wf-on-prod);border:1px solid rgba(255,255,255,.7);border-radius:3px;padding:2px 5px}
.wf .wf-org--full{--wf-org-c:var(--wf-full)}
.wf .wf-org--dev{--wf-org-c:var(--wf-dev)}
.wf .wf-org--partial{--wf-org-c:var(--wf-partial)}
.wf .wf-org--multi::before{background:linear-gradient(var(--wf-prod) 0 33%,var(--wf-full) 33% 66%,var(--wf-dev) 66%)}
.wf .wf-search{flex:1;display:flex;align-items:center;gap:8px;height:34px;min-width:0;padding:0 10px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-container);color:var(--wf-muted);font-size:13px;white-space:nowrap;overflow:hidden}
.wf .wf-kbd{margin-left:auto;font:600 12px/1 var(--wf-font);padding:3px 6px;border:1px solid var(--wf-line);border-radius:var(--wf-r-sm);background:var(--wf-card);color:var(--wf-muted)}
.wf .wf-agent{display:inline-flex;align-items:center;gap:8px;flex:none;height:34px;padding:0 10px;border-radius:var(--wf-r-md);border:1px solid var(--wf-line);font-size:13px;font-weight:600;white-space:nowrap}
.wf .wf-agent .wf-dot{width:8px;height:8px;border-radius:50%;background:var(--wf-faint);flex:none}
.wf .wf-agent.is-working{border-color:var(--wf-accent);background:var(--wf-accent-soft);padding-right:4px}
.wf .wf-agent.is-working .wf-dot{background:var(--wf-accent);box-shadow:0 0 0 3px rgba(6,106,254,.25)}
.wf .wf-agent.is-off{color:var(--wf-muted);background:var(--wf-container)}
.wf .wf-agent.is-off .wf-dot{background:transparent;border:2px solid var(--wf-faint)}
@media (prefers-reduced-motion: no-preference){
  .wf .wf-agent.is-working .wf-dot{animation:wf-pulse 1.6s ease-in-out infinite}
  @keyframes wf-pulse{50%{box-shadow:0 0 0 6px rgba(6,106,254,0)}}
}
/* identity stripe under the top bar */
.wf .wf-stripe{height:4px;background:var(--wf-line)}
.wf .wf-stripe--prod{height:6px;background:var(--wf-prod-fill)}
.wf .wf-stripe--full{background:var(--wf-full)}
.wf .wf-stripe--dev{background:var(--wf-dev)}
.wf .wf-stripe--partial{background:var(--wf-partial)}
.wf .wf-stripe--multi{background:linear-gradient(90deg,var(--wf-prod-fill) 0 33.3%,var(--wf-full) 33.3% 66.6%,var(--wf-dev) 66.6%)}

/* body: nav | main | optional rail */
.wf .wf-body{display:grid;grid-template-columns:188px minmax(0,1fr);min-height:560px;position:relative}
.wf .wf-body--rail{grid-template-columns:188px minmax(0,1fr) 256px}
.wf .wf-nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;background:var(--wf-card);border-right:1px solid var(--wf-line)}
.wf .wf-nav-i{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--wf-r-md);color:var(--wf-text);font-size:14px;font-weight:500;position:relative}
.wf .wf-nav-i.is-active{background:var(--wf-accent-soft);color:var(--wf-link);font-weight:600}
.wf .wf-nav-i.is-active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--wf-accent)}
.wf .wf-nav-i.is-off{color:var(--wf-faint)}
.wf .wf-nav-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--wf-container-2);color:var(--wf-text);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.wf .wf-nav-gear{margin-top:auto;border-top:1px solid var(--wf-line);padding-top:8px}
.wf .wf-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf .wf-main{padding:20px 24px 24px;min-width:0;display:flex;flex-direction:column;gap:16px}
.wf .wf-rail{background:var(--wf-card);border-left:1px solid var(--wf-line);padding:16px 14px;min-width:0}

/* ---------- text helpers ---------- */
.wf .wf-h1{font-size:22px;font-weight:600;line-height:1.3}
.wf .wf-h2{font-size:17px;font-weight:600;line-height:1.35}
.wf .wf-h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wf-muted)}
.wf .wf-sub{color:var(--wf-muted);font-size:13px}
.wf .wf-small{font-size:12px}
.wf .wf-strong{font-weight:600}
.wf .wf-verdict{font-size:20px;font-weight:600;line-height:1.35}
.wf .wf-faint{color:var(--wf-faint)}
.wf .wf-mono{font-family:var(--wf-mono);font-size:12.5px}
.wf .wf-c{font:12.5px/1.45 var(--wf-mono);background:var(--wf-container);padding:1px 5px;border-radius:var(--wf-r-sm);overflow-wrap:anywhere}
.wf .wf-link{color:var(--wf-link);text-decoration:underline;text-underline-offset:2px}
.wf .wf-num{font-size:28px;font-weight:600;line-height:1.1}

/* ---------- layout helpers ---------- */
.wf .wf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wf .wf-row--top{align-items:flex-start}
.wf .wf-row--between{justify-content:space-between}
.wf .wf-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.wf .wf-push{margin-left:auto}
.wf .wf-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wf .wf-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wf .wf-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.wf .wf-rel{position:relative}
.wf .wf-sep{height:1px;background:var(--wf-line);border:0;margin:4px 0}

/* ---------- card ---------- */
.wf .wf-card{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);padding:14px 16px;box-shadow:0 1px 2px rgba(23,43,77,.05);display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}
.wf .wf-card--flat{box-shadow:none;background:var(--wf-container);border-color:transparent}
.wf .wf-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wf .wf-card--prod{border-left:6px solid var(--wf-prod-fill)}
.wf .wf-card--full{border-left:6px solid var(--wf-full)}
.wf .wf-card--dev{border-left:6px solid var(--wf-dev)}
.wf .wf-card--partial{border-left:6px solid var(--wf-partial)}

/* ---------- buttons (static drawings, not controls) ---------- */
.wf .wf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--wf-r-md);border:1px solid var(--wf-border);background:var(--wf-card);color:var(--wf-link);font:600 13px/1 var(--wf-font);white-space:nowrap;cursor:default}
.wf .wf-btn--primary{background:var(--wf-accent);border-color:var(--wf-accent);color:var(--wf-on-accent)}
.wf .wf-btn--ghost{border-color:transparent;background:transparent}
.wf .wf-btn--sm{height:26px;padding:0 10px;font-size:12px}
.wf .wf-btn--stop{color:var(--wf-text);border-color:var(--wf-text);background:var(--wf-card);height:26px;padding:0 10px}
.wf .wf-btn--stop::before{content:"";width:9px;height:9px;background:currentColor;border-radius:1px}
.wf .wf-btn--prod{background:var(--wf-prod-fill);border-color:var(--wf-prod-fill);color:var(--wf-on-prod)}
.wf .wf-btn--danger{background:var(--wf-danger);border-color:var(--wf-danger);color:#FFFFFF}
.wf .wf-btn.is-disabled{opacity:1;color:var(--wf-faint);border-color:var(--wf-line);background:var(--wf-container)}

/* ---------- badges, risk, tags ---------- */
.wf .wf-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--wf-r-sm);font:600 12px/1 var(--wf-font);white-space:nowrap;background:var(--wf-container-2);color:var(--wf-text);border:1px solid transparent}
.wf .wf-badge--ok{background:var(--wf-success-soft);color:var(--wf-success)}
.wf .wf-badge--fail{background:var(--wf-danger-soft);color:var(--wf-danger);border-color:var(--wf-danger)}
.wf .wf-badge--warn{background:var(--wf-warning-soft);color:var(--wf-warning)}
.wf .wf-badge--info{background:var(--wf-info-soft);color:var(--wf-info)}
.wf .wf-badge--neutral{background:var(--wf-container-2);color:var(--wf-muted)}
.wf .wf-badge--lock{background:var(--wf-container-2);color:var(--wf-text);border-color:var(--wf-border)}
/* risk badge: icon + label (+ optional way-back text) */
.wf .wf-risk{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:600 12px/1 var(--wf-font);white-space:nowrap;border:1px solid currentColor}
.wf .wf-risk::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.wf .wf-risk--read{color:var(--wf-muted);background:var(--wf-card)}
.wf .wf-risk--read::before{border-radius:50%;background:transparent;border:2px solid currentColor}
.wf .wf-risk--sbx{color:var(--wf-info);background:var(--wf-info-soft)}
.wf .wf-risk--prod{color:var(--wf-warning);background:var(--wf-warning-soft)}
.wf .wf-risk--prod::before{transform:rotate(45deg)}
.wf .wf-risk--destr{color:var(--wf-danger);background:var(--wf-danger-soft)}
.wf .wf-risk--destr::before{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0;width:10px;height:9px}
/* environment class label (PRODUCTION, FULL SANDBOX ...) */
.wf .wf-env{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:3px;font:700 12px/1 var(--wf-font);letter-spacing:.04em;white-space:nowrap;border:1px solid currentColor}
.wf .wf-env--prod{background:var(--wf-prod-fill);border-color:var(--wf-prod-fill);color:var(--wf-on-prod)}
.wf .wf-env--full{color:var(--wf-full);background:var(--wf-full-soft)}
.wf .wf-env--dev{color:var(--wf-dev);background:var(--wf-dev-soft)}
.wf .wf-env--partial{color:var(--wf-partial);background:var(--wf-partial-soft)}
/* number tags: Measured / Estimated / Unknown */
.wf .wf-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:3px;font:600 12px/1 var(--wf-font);white-space:nowrap;border:1px dashed transparent}
.wf .wf-tag--m{background:var(--wf-success-soft);color:var(--wf-success)}
.wf .wf-tag--m::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.wf .wf-tag--e{background:var(--wf-info-soft);color:var(--wf-info);border-color:currentColor}
.wf .wf-tag--e::before{content:"~"}
.wf .wf-tag--u{background:var(--wf-warning-soft);color:var(--wf-warning);border-color:currentColor}
.wf .wf-tag--u::before{content:"?"}
.wf .wf-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--wf-line);background:var(--wf-card);font-size:12px;font-weight:600;white-space:nowrap;color:var(--wf-text)}
/* source chip: system, link, scan age, coverage */
.wf .wf-src{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--wf-r-sm);border:1px solid var(--wf-line);background:var(--wf-container);font-size:12px;color:var(--wf-muted);white-space:nowrap}
.wf .wf-src b{color:var(--wf-text);font-weight:600}
.wf .wf-src.is-off{border-style:dashed;background:transparent}
/* claim link inside drafts (product UI, differs from yellow annotation) */
.wf .wf-claim{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin:0 2px;border-radius:4px;background:var(--wf-accent-soft);color:var(--wf-link);border:1px solid var(--wf-link);font:700 12px/1 var(--wf-font);vertical-align:2px}
.wf .wf-confirm{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin:0 2px;border-radius:4px;background:var(--wf-warning-soft);color:var(--wf-warning);border:1px dashed currentColor;font:600 12px/1 var(--wf-font);vertical-align:1px}
/* style check chip */
.wf .wf-chk{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--wf-success-soft);color:var(--wf-success)}
.wf .wf-chk::before{content:"✓"}
.wf .wf-chk--review{background:var(--wf-warning-soft);color:var(--wf-warning)}
.wf .wf-chk--review::before{content:"!"}

/* ---------- state icons ---------- */
.wf .wf-st{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;font:700 12px/1 var(--wf-font)}
.wf .wf-st--ok{background:var(--wf-success);color:var(--wf-card)}
.wf .wf-st--ok::before{content:"✓"}
.wf .wf-st--run{border:2px solid var(--wf-accent);background:var(--wf-accent-soft)}
.wf .wf-st--run::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wf-accent)}
.wf .wf-st--todo{border:2px solid var(--wf-faint)}
.wf .wf-st--stop{border:2px solid var(--wf-text)}
.wf .wf-st--stop::before{content:"";width:8px;height:8px;background:var(--wf-text);border-radius:1px}
.wf .wf-st--fail{background:var(--wf-danger);color:var(--wf-card)}
.wf .wf-st--fail::before{content:"✕"}
.wf .wf-st--no{background:var(--wf-danger-soft);color:var(--wf-danger);border:1px solid var(--wf-danger)}
.wf .wf-st--no::before{content:"✕"}

/* ---------- step card (closed / open) ---------- */
.wf .wf-steps{display:flex;flex-direction:column;gap:8px}
.wf .wf-step{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);min-width:0}
.wf .wf-step-h{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:44px}
.wf .wf-step-t{font-size:14px;font-weight:600;min-width:0}
.wf .wf-step-meta{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--wf-muted);font-size:12px;white-space:nowrap}
.wf .wf-step-b{padding:0 12px 12px 42px;display:flex;flex-direction:column;gap:10px}
.wf .wf-step.is-done .wf-step-t{font-weight:500}
.wf .wf-step.is-todo{background:transparent;border-style:dashed}
.wf .wf-step.is-todo .wf-step-t{font-weight:500;color:var(--wf-muted)}
.wf .wf-step.is-open{border:2px solid var(--wf-accent);box-shadow:var(--wf-shadow)}
.wf .wf-step.is-open.is-prod{border-left:6px solid var(--wf-prod-fill)}
.wf .wf-step.is-stopped{border-color:var(--wf-text)}
.wf .wf-step.is-fail{border-color:var(--wf-danger);background:var(--wf-danger-soft)}
.wf .wf-prog{height:8px;border-radius:999px;background:var(--wf-container-2);overflow:hidden}
.wf .wf-prog i{display:block;height:100%;background:var(--wf-accent);border-radius:999px}
/* Details (folded evidence) - drawn, not a real control */
.wf .wf-details{border-top:1px solid var(--wf-line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.wf .wf-det-h{font-size:12px;font-weight:600;color:var(--wf-link)}
.wf .wf-det-h::before{content:"▸ "}
.wf .wf-details.is-open .wf-det-h::before{content:"▾ "}
.wf .wf-code{font:12.5px/1.55 var(--wf-mono);background:var(--wf-container);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--wf-text)}
.wf .wf-code .k{color:var(--wf-link);font-weight:600}
.wf .wf-code .m{color:var(--wf-muted)}

/* ---------- Action → Evidence rail (own touch) ---------- */
.wf .wf-ev{display:flex;flex-direction:column;gap:0;position:relative}
.wf .wf-ev-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wf-muted);margin-bottom:10px}
.wf .wf-ev-i{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 8px;padding:0 0 14px;position:relative}
.wf .wf-ev-i::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--wf-line)}
.wf .wf-ev-i:last-child::before{display:none}
.wf .wf-ev-a{font-size:13px;font-weight:600;line-height:1.35}
.wf .wf-ev-e{grid-column:2;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--wf-muted);flex-wrap:wrap}
.wf .wf-ev-e::before{content:"→";color:var(--wf-faint);font-weight:700}
.wf .wf-ev-i.is-todo .wf-ev-a{color:var(--wf-muted);font-weight:500}

/* ---------- path bar (Dev → UAT → Prod) ---------- */
.wf .wf-path{display:flex;align-items:stretch;gap:0}
.wf .wf-path-n{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px 12px 8px 14px;border:1px solid var(--wf-line);background:var(--wf-card);position:relative;font-size:12px;color:var(--wf-muted);border-left:5px solid var(--wf-org-c,var(--wf-border))}
.wf .wf-path-n b{font-size:13px;color:var(--wf-text)}
.wf .wf-path-n + .wf-path-n{margin-left:18px}
.wf .wf-path-n + .wf-path-n::after{content:"→";position:absolute;left:-17px;top:50%;transform:translateY(-50%);color:var(--wf-faint);font-weight:700}
.wf .wf-path-n.is-plan{border-style:dashed;border-left-style:solid}
.wf .wf-path-n--prod{--wf-org-c:var(--wf-prod-fill)}
.wf .wf-path-n--full{--wf-org-c:var(--wf-full)}
.wf .wf-path-n--dev{--wf-org-c:var(--wf-dev)}
.wf .wf-path-n--partial{--wf-org-c:var(--wf-partial)}

/* ---------- diff row ---------- */
.wf .wf-diff{border:1px solid var(--wf-line);border-radius:var(--wf-r-md);overflow:hidden;background:var(--wf-card)}
.wf .wf-diff-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 20px minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--wf-line);font-size:13px}
.wf .wf-diff-row:first-child{border-top:0}
.wf .wf-diff-row--h{background:var(--wf-container);font-size:12px;font-weight:700;color:var(--wf-muted);padding-top:6px;padding-bottom:6px}
.wf .wf-before{color:var(--wf-muted);text-decoration:line-through;text-decoration-color:var(--wf-faint)}
.wf .wf-after{font-weight:600;background:var(--wf-success-soft);color:var(--wf-text);border-radius:3px;padding:1px 5px;justify-self:start}
.wf .wf-arrow{color:var(--wf-faint);font-weight:700;text-align:center}

/* ---------- tables ---------- */
.wf .wf-tbl{width:100%;font-size:13px}
.wf .wf-tbl th{font-size:12px;font-weight:700;color:var(--wf-muted);padding:7px 10px;border-bottom:1px solid var(--wf-line);background:var(--wf-container);white-space:nowrap}
.wf .wf-tbl td{padding:8px 10px;border-bottom:1px solid var(--wf-line);vertical-align:middle}
.wf .wf-tbl tr:last-child td{border-bottom:0}
.wf .wf-tbl .is-empty{color:var(--wf-faint);font-style:italic}
.wf .wf-tbl tr.is-hl td{background:var(--wf-accent-soft)}
.wf .wf-tbl-wrap{border:1px solid var(--wf-line);border-radius:var(--wf-r-md);overflow:hidden;background:var(--wf-card)}
.wf .wf-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;font-size:13px}
.wf .wf-kv dt{color:var(--wf-muted)}
.wf .wf-kv dd{margin:0;min-width:0}

/* ---------- list rows ---------- */
.wf .wf-list{display:flex;flex-direction:column}
.wf .wf-li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--wf-line);font-size:13px;min-width:0}
.wf .wf-li:first-child{border-top:0}
.wf .wf-li--top{align-items:flex-start}

/* ---------- notes, warnings, banners ---------- */
.wf .wf-note{background:var(--wf-container);border-radius:var(--wf-r-md);padding:8px 12px;color:var(--wf-muted);font-size:13px}
.wf .wf-warn{display:flex;gap:10px;align-items:flex-start;background:var(--wf-warning-soft);border:1px solid var(--wf-warning);border-left-width:4px;border-radius:var(--wf-r-md);padding:10px 12px;font-size:13px;color:var(--wf-text)}
.wf .wf-warn::before{content:"!";display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:var(--wf-warning);color:var(--wf-card);font-weight:700}
.wf .wf-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--wf-r-md);border:1px solid var(--wf-line);background:var(--wf-card);font-size:15px;font-weight:600}
.wf .wf-banner--ok{background:var(--wf-success-soft);border-color:var(--wf-success)}
.wf .wf-banner--info{background:var(--wf-info-soft);border-color:var(--wf-info)}
.wf .wf-banner--warn{background:var(--wf-warning-soft);border-color:var(--wf-warning)}
.wf .wf-banner--fail{background:var(--wf-danger-soft);border-color:var(--wf-danger)}
.wf .wf-banner--stop{background:var(--wf-container);border-color:var(--wf-text)}

/* ---------- inputs (drawn) ---------- */
.wf .wf-input{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--wf-border);border-radius:var(--wf-r-md);background:var(--wf-card);font-size:13px;color:var(--wf-text);min-width:0}
.wf .wf-input.is-ph{color:var(--wf-faint)}
.wf .wf-input.is-focus{border:2px solid var(--wf-accent);box-shadow:0 0 0 3px var(--wf-accent-soft)}
.wf .wf-caretbar{display:inline-block;width:1.5px;height:16px;background:var(--wf-text);margin-left:-6px}
.wf .wf-ask{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border:1px solid var(--wf-border);border-radius:var(--wf-r-lg);background:var(--wf-card);box-shadow:var(--wf-shadow);min-height:48px}
.wf .wf-ask-t{flex:1;color:var(--wf-faint);font-size:14px;min-width:0}
.wf .wf-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.wf .wf-switch::before{content:"";width:34px;height:20px;border-radius:999px;background:var(--wf-container-2);border:1px solid var(--wf-border);box-shadow:inset -14px 0 0 2px var(--wf-card);flex:none}
.wf .wf-switch.is-on::before{background:var(--wf-accent);border-color:var(--wf-accent);box-shadow:inset 14px 0 0 2px var(--wf-accent),inset 0 0 0 20px var(--wf-accent)}
.wf .wf-switch.is-on::before{background:radial-gradient(circle at 24px 50%,#FFFFFF 0 7px,var(--wf-accent) 7.5px)}
.wf .wf-switch::before{background:radial-gradient(circle at 10px 50%,var(--wf-card) 0 7px,var(--wf-container-2) 7.5px);box-shadow:none}

/* ---------- tabs, sub-nav ---------- */
.wf .wf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--wf-line)}
.wf .wf-tab{padding:8px 12px;font-size:13px;font-weight:600;color:var(--wf-muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.wf .wf-tab.is-active{color:var(--wf-link);border-bottom-color:var(--wf-accent)}
.wf .wf-subnav{display:flex;flex-direction:column;gap:2px;font-size:13px}
.wf .wf-subnav-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wf-muted);padding:10px 10px 4px}
.wf .wf-subnav-i{padding:7px 10px;border-radius:var(--wf-r-md)}
.wf .wf-subnav-i.is-active{background:var(--wf-accent-soft);color:var(--wf-link);font-weight:600}

/* ---------- popover, modal ---------- */
.wf .wf-pop{position:absolute;z-index:6;background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);box-shadow:var(--wf-shadow-lg);padding:8px;display:flex;flex-direction:column;gap:2px}
.wf .wf-pop-i{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--wf-r-md);font-size:13px}
.wf .wf-pop-i.is-active{background:var(--wf-accent-soft)}
.wf .wf-scrim{position:absolute;inset:0;z-index:4;background:var(--wf-scrim)}
.wf .wf-modal{position:absolute;z-index:5;left:50%;top:40px;transform:translateX(-50%);width:600px;background:var(--wf-card);border-radius:var(--wf-r-lg);box-shadow:var(--wf-shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.wf .wf-modal-stripe{height:8px;background:var(--wf-prod-fill)}
.wf .wf-modal-b{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.wf .wf-modal-f{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 22px;border-top:1px solid var(--wf-line);background:var(--wf-container)}
.wf .wf-tiers{display:flex;flex-direction:column;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);overflow:hidden}
.wf .wf-tier{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--wf-line);font-size:13px;color:var(--wf-muted)}
.wf .wf-tier:first-child{border-top:0}
.wf .wf-tier b{color:var(--wf-text)}
.wf .wf-tier-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--wf-border);font-weight:700;color:var(--wf-text)}
.wf .wf-tier.is-this{background:var(--wf-accent-soft);color:var(--wf-text);box-shadow:inset 4px 0 0 var(--wf-accent)}
.wf .wf-tier.is-this .wf-tier-n{background:var(--wf-accent);border-color:var(--wf-accent);color:var(--wf-on-accent)}
.wf .wf-tier.is-na{color:var(--wf-faint)}

/* ---------- evidence thumbnail ---------- */
.wf .wf-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wf .wf-thumb{border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.wf .wf-thumb-img{background:var(--wf-container);border-bottom:1px solid var(--wf-line);display:block;line-height:0}
.wf .wf-thumb-img svg{width:100%;height:auto;display:block}
.wf .wf-thumb-cap{padding:8px 10px;font-size:12px;color:var(--wf-muted);display:flex;flex-direction:column;gap:2px}
.wf .wf-thumb-cap b{color:var(--wf-text);font-size:13px}

/* ---------- avatar ---------- */
.wf .wf-av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--wf-container-2);color:var(--wf-text);font:700 12px/1 var(--wf-font);flex:none}
.wf .wf-av--a{background:#DCE8FF;color:#0B3D91}
.wf .wf-av--t{background:#E3F3EA;color:#0F5132}
@media (prefers-color-scheme: dark){ .wf .wf-av--a{background:#1D3A66;color:#DCE8FF} .wf .wf-av--t{background:#1C4230;color:#D4F2E1} }

/* ---------- hero SVG palette (use these classes inside inline <svg>) ---------- */
.wf .wf-hero{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);padding:12px 14px;min-width:0}
.wf .wf-hero svg{display:block;margin:0 auto}
.wf svg .sv-t{font-family:var(--wf-font);font-size:14px;fill:var(--wf-text)}
.wf svg .sv-tb{font-family:var(--wf-font);font-size:14px;font-weight:600;fill:var(--wf-text)}
.wf svg .sv-tm{font-family:var(--wf-font);font-size:13px;fill:var(--wf-muted)}
.wf svg .sv-ts{font-family:var(--wf-font);font-size:12px;fill:var(--wf-muted)}
.wf svg .sv-mono{font-family:var(--wf-mono);font-size:12px;fill:var(--wf-muted)}
.wf svg .sv-tok{fill:var(--wf-success)} .wf svg .sv-tfail{fill:var(--wf-danger)} .wf svg .sv-twarn{fill:var(--wf-warning)} .wf svg .sv-tlink{fill:var(--wf-link)}
.wf svg .sv-ton{fill:var(--wf-on-prod);font-family:var(--wf-font);font-size:12px;font-weight:700;letter-spacing:.05em}
.wf svg .sv-box{fill:var(--wf-card);stroke:var(--wf-line);stroke-width:1.5}
.wf svg .sv-box2{fill:var(--wf-container);stroke:var(--wf-line);stroke-width:1}
.wf svg .sv-boxs{fill:var(--wf-card);stroke:var(--wf-border);stroke-width:1.5}
.wf svg .sv-boxok{fill:var(--wf-success-soft);stroke:var(--wf-success);stroke-width:1.5}
.wf svg .sv-boxfail{fill:var(--wf-danger-soft);stroke:var(--wf-danger);stroke-width:2}
.wf svg .sv-boxwarn{fill:var(--wf-warning-soft);stroke:var(--wf-warning);stroke-width:1.5}
.wf svg .sv-boxacc{fill:var(--wf-accent-soft);stroke:var(--wf-accent);stroke-width:2}
.wf svg .sv-boxplan{fill:var(--wf-card);stroke:var(--wf-border);stroke-width:1.5;stroke-dasharray:5 4}
.wf svg .sv-line{stroke:var(--wf-border);stroke-width:2;fill:none}
.wf svg .sv-line-l{stroke:var(--wf-line);stroke-width:2;fill:none}
.wf svg .sv-line-ok{stroke:var(--wf-success);stroke-width:2.5;fill:none}
.wf svg .sv-line-acc{stroke:var(--wf-accent);stroke-width:3;fill:none}
.wf svg .sv-line-fail{stroke:var(--wf-danger);stroke-width:2.5;fill:none;stroke-dasharray:7 5}
.wf svg .sv-line-dash{stroke:var(--wf-border);stroke-width:2;fill:none;stroke-dasharray:4 4}
.wf svg .sv-fill-ok{fill:var(--wf-success)} .wf svg .sv-fill-fail{fill:var(--wf-danger)} .wf svg .sv-fill-acc{fill:var(--wf-accent)}
.wf svg .sv-fill-warn{fill:var(--wf-warning)} .wf svg .sv-fill-muted{fill:var(--wf-faint)} .wf svg .sv-fill-card{fill:var(--wf-card)}
.wf svg .sv-fill-line{fill:var(--wf-line)} .wf svg .sv-fill-cont{fill:var(--wf-container)} .wf svg .sv-fill-text{fill:var(--wf-text)}
.wf svg .sv-fill-hl{fill:var(--wf-hl)}
.wf svg .sv-prod{fill:var(--wf-prod-fill)} .wf svg .sv-full{fill:var(--wf-full)} .wf svg .sv-dev{fill:var(--wf-dev)} .wf svg .sv-partial{fill:var(--wf-partial)}
.wf svg .sv-s-prod{stroke:var(--wf-prod-fill)} .wf svg .sv-s-full{stroke:var(--wf-full)} .wf svg .sv-s-dev{stroke:var(--wf-dev)}
.wf svg .sv-mk{fill:var(--wf-mk-bg);stroke:var(--wf-mk-ink);stroke-width:2}
.wf svg .sv-mkt{font-family:var(--wf-font);font-size:13px;font-weight:700;fill:var(--wf-mk-ink)}

/* ---------- print / forced colours ---------- */
@media (forced-colors: active){
  .wf .wf-mk{forced-color-adjust:none}
  .wf .wf-org::before,.wf .wf-stripe{forced-color-adjust:none}
}

/* A-screens */
.wf .wf-a-legend{grid-template-columns:1fr}
.wf .wf-a-legend li{display:block}
.wf .wf-a-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.wf .wf-a-stage{padding:10px 8px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);color:var(--wf-muted);font-size:12px;background:var(--wf-card);min-height:55px;display:flex;align-items:center}
.wf .wf-a-stage.is-current{border:2px solid var(--wf-accent);background:var(--wf-accent-soft);color:var(--wf-link)}
.wf .wf-a-guide{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px}
.wf .wf-a-browser{border:1px solid var(--wf-border);border-radius:var(--wf-r-md);overflow:hidden;background:var(--wf-card)}
.wf .wf-a-browserbar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--wf-container);border-bottom:1px solid var(--wf-line)}
.wf .wf-a-setup{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:16px;min-height:240px}
.wf .wf-a-setupnav{display:flex;flex-direction:column;gap:12px;color:var(--wf-muted);font-size:12px;border-right:1px solid var(--wf-line);padding-right:10px}
.wf .wf-a-highlight{display:flex;flex-direction:column;gap:8px;border:2px solid var(--wf-warning);background:var(--wf-warning-soft);padding:12px;border-radius:var(--wf-r-md)}
.wf .wf-a-shot{display:flex;flex-direction:column;gap:10px;padding:12px 16px;background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md)}
.wf .wf-a-shotvalue{padding:12px;background:var(--wf-container);border:1px solid var(--wf-line);border-radius:var(--wf-r-sm);font-size:14px}
.wf .wf-screen[id^="wf-A"] .wf-av{font-size:12px}

/* A-screens: compact status labels */
.wf .wf-screen[id^="wf-A"] .wf-card > .wf-tag{align-self:flex-start}

/* lead: scratch org identity (grey) */
.wf .wf-org--scratch{--wf-org-c:var(--wf-scratch)}
.wf .wf-stripe--scratch{background:var(--wf-scratch)}
.wf .wf-card--scratch{border-left:6px solid var(--wf-scratch)}
.wf .wf-env--scratch{color:var(--wf-scratch);background:var(--wf-scratch-soft)}
.wf .wf-path-n--scratch{--wf-org-c:var(--wf-scratch)}

/* D-screens (visual diff, Sparring Opus) */
.wf .wf-vd{display:flex;flex-direction:column;gap:12px;min-width:0}
.wf .wf-vd-why{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px 16px;align-items:start;padding:10px 14px;border:1px solid var(--wf-line);border-left:4px solid var(--wf-accent);border-radius:var(--wf-r-md);background:var(--wf-card);font-size:13px}
.wf .wf-vd-why b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--wf-muted);font-weight:700;margin-bottom:2px}
.wf .wf-vd-why q{font-style:italic;quotes:"“" "”"}
.wf .wf-vd-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--wf-muted);align-items:center}
.wf .wf-vd-key i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:5px;vertical-align:-2px;border:1.5px solid}
.wf .wf-vd-key .k-add{background:var(--wf-success-soft);border-color:var(--wf-success)}
.wf .wf-vd-key .k-del{background:var(--wf-danger-soft);border-color:var(--wf-danger)}
.wf .wf-vd-key .k-chg{background:var(--wf-warning-soft);border-color:var(--wf-warning)}
.wf .wf-vd-key .k-mov{background:var(--wf-accent-soft);border-color:var(--wf-accent)}
.wf .wf-vd-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wf .wf-vd-pane{display:flex;flex-direction:column;gap:6px;min-width:0}
.wf .wf-vd-ph{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wf-muted)}
/* Lightning-like Setup frame (own renderer, no logos) */
.wf .wf-lx{border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-container);overflow:hidden;min-width:0}
.wf .wf-lx-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--wf-card);border-bottom:1px solid var(--wf-line)}
.wf .wf-lx-ic{width:28px;height:28px;border-radius:5px;background:var(--wf-accent);flex:none;display:grid;place-items:center;color:var(--wf-on-accent);font-weight:700;font-size:13px}
.wf .wf-lx-ic--perm{background:var(--wf-partial)}
.wf .wf-lx-ic--flow{background:var(--wf-info)}
.wf .wf-lx-crumb{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--wf-muted)}
.wf .wf-lx-t{font-size:16px;font-weight:700;line-height:1.2}
.wf .wf-lx-b{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.wf .wf-lx-card{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);overflow:hidden}
.wf .wf-lx-card-h{padding:8px 12px;font-size:14px;font-weight:700;border-bottom:1px solid var(--wf-line);display:flex;gap:8px;align-items:center}
.wf .wf-lx-tbl{width:100%;border-collapse:collapse;font-size:13px}
.wf .wf-lx-tbl th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--wf-muted);padding:6px 10px;border-bottom:1px solid var(--wf-line);background:var(--wf-container);white-space:nowrap}
.wf .wf-lx-tbl td{padding:7px 10px;border-bottom:1px solid var(--wf-line);vertical-align:middle}
.wf .wf-lx-tbl tr:last-child td{border-bottom:0}
.wf .wf-lx-tbl td.c{text-align:center}
.wf .wf-lx-tbl .wf-lx-mark{width:28px;text-align:center;font-weight:700;padding:7px 4px}
/* diff marks: rows, tiles, text */
.wf .is-add{background:var(--wf-success-soft);box-shadow:inset 4px 0 0 var(--wf-success)}
.wf .is-del{background:var(--wf-danger-soft);box-shadow:inset 4px 0 0 var(--wf-danger);text-decoration:line-through;text-decoration-color:var(--wf-danger)}
.wf .is-chg{background:var(--wf-warning-soft);box-shadow:inset 4px 0 0 var(--wf-warning)}
.wf .is-mov{background:var(--wf-accent-soft);box-shadow:inset 4px 0 0 var(--wf-accent)}
.wf .wf-lx-tbl tr.is-add td,.wf .wf-lx-tbl tr.is-del td,.wf .wf-lx-tbl tr.is-chg td,.wf .wf-lx-tbl tr.is-mov td{background:transparent}
.wf .wf-lx-tbl tr.is-add td:first-child{box-shadow:inset 4px 0 0 var(--wf-success)}
.wf .wf-lx-tbl tr.is-del td:first-child{box-shadow:inset 4px 0 0 var(--wf-danger)}
.wf .wf-lx-tbl tr.is-chg td:first-child{box-shadow:inset 4px 0 0 var(--wf-warning)}
.wf .wf-lx-tbl tr.is-mov td:first-child{box-shadow:inset 4px 0 0 var(--wf-accent)}
.wf .wf-lx-tbl tr{box-shadow:none}
.wf .wf-m-add{color:var(--wf-success)} .wf .wf-m-del{color:var(--wf-danger)} .wf .wf-m-chg{color:var(--wf-warning)} .wf .wf-m-mov{color:var(--wf-link)}
.wf .wf-ins{background:var(--wf-success-soft);color:var(--wf-text);text-decoration:underline;text-decoration-color:var(--wf-success);text-underline-offset:3px;padding:0 2px;border-radius:2px}
.wf .wf-del{background:var(--wf-danger-soft);color:var(--wf-text);text-decoration:line-through;text-decoration-color:var(--wf-danger);padding:0 2px;border-radius:2px}
/* checkbox look */
.wf .wf-cb{display:inline-block;width:16px;height:16px;border:1.5px solid var(--wf-border);border-radius:3px;background:var(--wf-card);vertical-align:middle;position:relative}
.wf .wf-cb.is-on{background:var(--wf-accent);border-color:var(--wf-accent)}
.wf .wf-cb.is-on::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--wf-on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wf .wf-cb.is-ghost{opacity:.55}
.wf .wf-cbd{display:inline-flex;align-items:center;gap:6px;font-weight:700}
/* layout editor tiles */
.wf .wf-lx-sec{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);overflow:hidden}
.wf .wf-lx-sec-h{padding:6px 10px;font-size:13px;font-weight:700;background:var(--wf-container-2);border-bottom:1px solid var(--wf-line)}
.wf .wf-lx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
.wf .wf-lx-f{border:1px solid var(--wf-line);border-radius:var(--wf-r-sm);padding:6px 8px;font-size:12px;background:var(--wf-card);display:flex;align-items:center;gap:6px;min-height:30px}
.wf .wf-lx-f.is-ghost{border:1.5px dashed var(--wf-border);color:var(--wf-muted);background:transparent;box-shadow:none}
.wf .wf-lx-f.is-mov{border-color:var(--wf-accent);font-weight:600}
/* flow canvas */
.wf .wf-lx-canvas{background-color:var(--wf-container);background-image:radial-gradient(var(--wf-line) 1px,transparent 1.2px);background-size:16px 16px;border-radius:var(--wf-r-md);border:1px solid var(--wf-line);padding:8px}
.wf svg .sv-del{fill:var(--wf-danger-soft);stroke:var(--wf-danger);stroke-width:2;stroke-dasharray:6 4}
.wf svg .sv-add{fill:var(--wf-success-soft);stroke:var(--wf-success);stroke-width:2.5}
.wf svg .sv-chg{fill:var(--wf-warning-soft);stroke:var(--wf-warning);stroke-width:2.5}
.wf svg .sv-tdel{text-decoration:line-through;fill:var(--wf-danger)}
/* D-screens: record page preview (D5) + edit ops (P3) */
.wf .wf-rp{border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-container);overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:8px}
.wf .wf-rp-hl{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.wf .wf-rp-hl-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.wf .wf-rp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:12px}
.wf .wf-rp-kpis span{display:block;color:var(--wf-muted)}
.wf .wf-rp-path{display:flex;gap:2px}
.wf .wf-rp-path span{flex:1;font-size:12px;text-align:center;padding:5px 2px;background:var(--wf-container-2);color:var(--wf-muted);clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%)}
.wf .wf-rp-path span.is-done{background:var(--wf-success-soft);color:var(--wf-success)}
.wf .wf-rp-path span.is-cur{background:var(--wf-accent);color:var(--wf-on-accent);font-weight:700}
.wf .wf-rp-sec{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md);padding:8px 12px}
.wf .wf-rp-sec-h{font-size:13px;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--wf-line);margin-bottom:6px}
.wf .wf-rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.wf .wf-rp-f{display:flex;flex-direction:column;font-size:13px;padding:3px 6px;border-radius:var(--wf-r-sm);border-bottom:1px solid var(--wf-line)}
.wf .wf-rp-f > span:first-child{font-size:12px;color:var(--wf-muted)}
.wf .wf-rp-tip{position:relative;display:inline-block;margin-left:4px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--wf-link);color:var(--wf-link);font-size:10px;line-height:11px;text-align:center;font-weight:700}
.wf .wf-rp-tipbox{margin-top:4px;padding:6px 8px;border-radius:var(--wf-r-sm);background:var(--wf-text);color:var(--wf-card);font-size:12px;line-height:1.35}
.wf .wf-rp-ph{border:1.5px dashed var(--wf-border);border-radius:var(--wf-r-md);padding:10px;color:var(--wf-muted);font-size:12px;text-align:center}
.wf .wf-ops{display:flex;flex-direction:column;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card);overflow:hidden}
.wf .wf-op{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;padding:8px 12px;border-top:1px solid var(--wf-line);align-items:start;font-size:13px}
.wf .wf-op:first-child{border-top:0}
.wf .wf-op code{font:12px/1.45 var(--wf-mono);color:var(--wf-muted);grid-column:2;overflow-wrap:anywhere}
.wf .wf-op-n{font-weight:700;color:var(--wf-muted)}

/* legend notes without a marker (e.g. "Empty state:") span the full row */
.wf .wf-legend li.wf-legend-note,
.wf .wf-legend li:not(:has(> .wf-mk)){display:block;grid-column:1 / -1}

/* chat - conversation-led shell: slim nav | chat | stage */
.wf .wf-nav--slim{padding:10px 6px;gap:4px}
.wf .wf-nav--slim .wf-nav-i{flex-direction:column;justify-content:center;gap:3px;height:58px;padding:4px 2px;font-size:12px;text-align:center}
.wf .wf-nav--slim .wf-nav-i.is-active::before{left:-6px;top:10px;bottom:10px}
.wf .wf-nav--slim .wf-nav-n{position:absolute;top:3px;right:6px;margin:0;min-width:18px;height:18px;padding:0 5px}
.wf .wf-nav--slim .wf-nav-gear{padding-top:8px}
.wf .wf-body--slim{grid-template-columns:72px minmax(0,1fr)}
.wf .wf-body--chat{grid-template-columns:72px 400px minmax(0,1fr)}
.wf .wf-body--browse{grid-template-columns:72px minmax(0,1fr) auto}
/* chat column */
.wf .wf-chat{display:flex;flex-direction:column;min-width:0;background:var(--wf-card);border-right:1px solid var(--wf-line)}
.wf .wf-chat-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--wf-line);min-height:48px}
.wf .wf-chat-t{font-size:14px;font-weight:600}
.wf .wf-chat-log{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.wf .wf-day{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--wf-muted)}
.wf .wf-day::before,.wf .wf-day::after{content:"";flex:1;height:1px;background:var(--wf-line)}
.wf .wf-msg{display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5;min-width:0}
.wf .wf-msg--user{align-self:flex-end;max-width:88%;background:var(--wf-accent-soft);color:var(--wf-text);border-radius:12px 12px 4px 12px;padding:8px 12px}
.wf .wf-msg--agent{align-self:stretch}
.wf .wf-msg-who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--wf-muted)}
.wf .wf-msg-who .wf-logo{width:18px;height:18px}
.wf .wf-evt{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--wf-container);font-size:12px;color:var(--wf-muted);text-align:center}
/* artifact card inside the chat */
.wf .wf-acard{display:flex;flex-direction:column;min-width:0;background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);box-shadow:0 1px 2px rgba(23,43,77,.06);overflow:hidden}
.wf .wf-acard.is-selected{border:2px solid var(--wf-accent);box-shadow:var(--wf-shadow)}
.wf .wf-acard.is-prod{border-left:6px solid var(--wf-prod-fill)}
.wf .wf-acard-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px 0}
.wf .wf-acard-k{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wf-muted)}
.wf .wf-acard-b{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;font-size:13.5px}
.wf .wf-acard-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--wf-line);background:var(--wf-container)}
.wf .wf-acard-open{font-size:12px;font-weight:600;color:var(--wf-link);margin-left:auto;white-space:nowrap}
.wf .wf-acard--mini{flex-direction:row;align-items:center;gap:8px;padding:8px 12px;box-shadow:none;font-size:13px}
.wf .wf-acard--mini .wf-acard-open{font-weight:500}
/* composer (replaces the Ask bar) */
.wf .wf-composer{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-top:1px solid var(--wf-line);background:var(--wf-card)}
.wf .wf-composer--top{border-top:0;padding:0;background:transparent}
.wf .wf-composer-box{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 8px 8px 12px;border:1px solid var(--wf-border);border-radius:var(--wf-r-lg);background:var(--wf-card)}
.wf .wf-composer-t{flex:1;min-width:0;color:var(--wf-faint);font-size:13.5px}
.wf .wf-composer-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--wf-muted)}
.wf .wf-send{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:var(--wf-r-md);background:var(--wf-accent);color:#FFFFFF;font:700 16px/1 var(--wf-font)}
.wf .wf-composer.is-working .wf-composer-box{border-color:var(--wf-accent);background:var(--wf-accent-soft)}
.wf .wf-composer.is-working .wf-composer-t{color:var(--wf-text);font-weight:600}
/* stage: the full artifact of the selected card */
.wf .wf-stage{display:flex;flex-direction:column;min-width:0;background:var(--wf-bg)}
.wf .wf-stage-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px;padding:10px 20px;border-bottom:1px solid var(--wf-line);background:var(--wf-card)}
.wf .wf-stage-t{font-size:15px;font-weight:600}
.wf .wf-stage-from{margin-left:auto;font-size:12px;color:var(--wf-muted)}
.wf .wf-stage-b{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px 20px 20px}
/* chat as a side panel on browse screens */
.wf .wf-chatpanel{display:flex;flex-direction:column;width:340px;min-width:0;background:var(--wf-card);border-left:1px solid var(--wf-line)}
.wf .wf-chatpanel.is-collapsed{width:52px;align-items:center;gap:10px;padding:12px 0}
.wf .wf-chatpanel-tab{writing-mode:vertical-rl;font-size:12px;font-weight:600;color:var(--wf-muted);letter-spacing:.04em}
/* visual diff (stage) */
.wf .wf-vdiff{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:stretch}
.wf .wf-vdiff-side{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 12px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card)}
.wf .wf-vdiff-side.is-after{border:2px solid var(--wf-success)}
.wf .wf-vdiff-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wf-muted)}
.wf .wf-vdiff-side.is-after .wf-vdiff-lbl{color:var(--wf-success)}
.wf .wf-vdiff-arrow{display:grid;place-items:center;color:var(--wf-faint);font-weight:700}
.wf .wf-lay-sec{border:1px solid var(--wf-line);border-radius:var(--wf-r-sm);overflow:hidden}
.wf .wf-lay-sec-h{padding:4px 8px;background:var(--wf-container);font-size:12px;font-weight:700}
.wf .wf-lay-fs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px}
.wf .wf-lay-f{padding:3px 6px;border-radius:3px;background:var(--wf-container);font-size:12px;color:var(--wf-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf .wf-lay-f.is-moved{background:var(--wf-success-soft);color:var(--wf-text);font-weight:600;outline:2px solid var(--wf-success);outline-offset:-2px}
.wf .wf-lay-f.is-gone{background:transparent;border:1px dashed var(--wf-border);color:var(--wf-faint)}
.wf .wf-ins{background:var(--wf-success-soft);color:var(--wf-text);border-radius:3px;padding:0 3px;font-weight:600}
.wf .wf-del{color:var(--wf-muted);text-decoration:line-through}
.wf .wf-cbx{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;border:1.5px solid var(--wf-border);background:var(--wf-card);font:700 11px/1 var(--wf-font);vertical-align:-3px}
.wf .wf-cbx.is-on{background:var(--wf-accent);border-color:var(--wf-accent);color:#FFFFFF}
.wf .wf-cbx.is-on::before{content:"✓";font-size:12px}

/* V-screens */
.wf .wf-v-legend{grid-template-columns:1fr}
.wf .wf-v-legend li{display:block}
.wf .wf-v-history th:first-child{width:21%}
.wf .wf-v-history th:nth-child(2){width:39%}
.wf .wf-v-history td{line-height:1.55}
.wf .wf-v-history .wf-c{font-size:12px;overflow-wrap:anywhere}
.wf .wf-v-files{display:flex;flex-direction:column;gap:5px;font:12px/1.5 var(--wf-mono);overflow-wrap:anywhere}
.wf .wf-v-thumb{text-decoration:none;color:var(--wf-text)}
.wf .wf-v-thumb:focus-visible{outline:3px solid var(--wf-accent);outline-offset:3px}

/* V-screens: guided and recovery stages */
.wf .wf-v-setup{display:flex;flex-direction:column;gap:12px;padding:16px}
.wf .wf-v-capture{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md)}
.wf #wf-E4 .wf-diff-row{grid-template-columns:1fr 24px 1fr}
.wf #wf-E4 .wf-diff-row>span:first-child{grid-column:1/-1}
.wf #wf-E4 .wf-tag{align-self:flex-start}

/* hb-shell - HB Code-style: stories sidebar | session (header with org path, chat, composer) | preview panel
   Colours = Salesforce Cosmos (SLDS 2) light/dark values from @salesforce-ux/sds-metadata 2.264.1. */
.wf .wf-win--hb{min-width:1060px;--wf-side:var(--wf-card)}

.wf .wf-body--hb{display:grid;grid-template-columns:208px minmax(352px,1fr) minmax(440px,540px);grid-template-rows:auto minmax(0,1fr);min-height:600px}
.wf .wf-body--hb-np{grid-template-columns:208px minmax(0,1fr)}
.wf .wf-body--hb > .wf-side{grid-row:1 / -1}
.wf .wf-body--hb > .wf-sess-h{grid-column:2 / -1}
.wf .wf-body--hb > .wf-main{grid-column:2 / -1;grid-row:1 / -1}
/* sidebar: workspaces -> stories */
.wf .wf-side{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 8px;background:var(--wf-side);border-right:1px solid var(--wf-line)}
.wf .wf-side-top{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;font-size:14px;font-weight:700}
.wf .wf-side-search{display:flex;align-items:center;gap:6px;height:30px;margin:0 2px 8px;padding:0 8px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card);color:var(--wf-faint);font-size:12px}
.wf .wf-side-ws{display:flex;align-items:center;gap:6px;padding:8px 6px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wf-muted)}
.wf .wf-side-s{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;padding:7px 8px;border-radius:var(--wf-r-md);font-size:13px;position:relative}
.wf .wf-side-s.is-active{background:var(--wf-card);box-shadow:0 1px 2px rgba(0,0,0,.08);border:1px solid var(--wf-line)}
.wf .wf-side-k{font:600 12px/1.3 var(--wf-mono);color:var(--wf-muted)}
.wf .wf-side-n{grid-column:1 / -1;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf .wf-side-chip{justify-self:end;font-size:12px;font-weight:600;color:var(--wf-muted);white-space:nowrap}
.wf .wf-side-run{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wf-accent);margin-right:4px;vertical-align:1px}
.wf .wf-side-new{padding:7px 8px;font-size:13px;font-weight:600;color:var(--wf-link)}
.wf .wf-side-new.is-active{background:var(--wf-card);border:1px solid var(--wf-line);border-radius:var(--wf-r-md)}
.wf .wf-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px solid var(--wf-line)}
.wf .wf-side-fi{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:var(--wf-r-md);font-size:13px;font-weight:500}
.wf .wf-side-fi.is-active{background:var(--wf-card);color:var(--wf-link);font-weight:600}
/* session column */
.wf .wf-sess{display:flex;flex-direction:column;min-width:0;background:var(--wf-card);border-right:1px solid var(--wf-line)}
.wf .wf-sess-h{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;border-bottom:1px solid var(--wf-line);background:var(--wf-card)}
.wf .wf-sess-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.wf .wf-sess-t .wf-mono{font-weight:700}
/* org path in the session header (work org -> deploy targets) */
.wf .wf-opath{display:flex;align-items:stretch;gap:4px;flex-wrap:nowrap;min-width:0}
.wf .wf-opath-a{display:grid;place-items:center;color:var(--wf-faint);font-weight:700;padding:0 2px}
.wf .wf-stg{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;padding:5px 8px 5px 10px;border:1px solid var(--wf-line);border-left:5px solid var(--wf-org-c,var(--wf-border));border-radius:var(--wf-r-md);background:var(--wf-card);font-size:12px;color:var(--wf-muted)}
.wf .wf-stg b{font-size:13px;color:var(--wf-text);white-space:nowrap}
.wf .wf-stg-l{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--wf-muted);text-transform:uppercase}
.wf .wf-stg.is-work{background:var(--wf-container);border-color:var(--wf-org-c,var(--wf-border));border-left-width:5px}
.wf .wf-stg.is-next{border-style:dashed;border-left-style:solid}
.wf .wf-stg.is-sel{box-shadow:0 0 0 2px var(--wf-accent)}
.wf .wf-stg--dev{--wf-org-c:var(--wf-dev)} .wf .wf-stg--full{--wf-org-c:var(--wf-full)}
.wf .wf-stg--prod{--wf-org-c:var(--wf-prod-fill)} .wf .wf-stg--partial{--wf-org-c:var(--wf-partial)}
.wf .wf-stg-st{white-space:nowrap}
.wf .wf-stg-st.is-ok{color:var(--wf-success);font-weight:600}
.wf .wf-stg-st.is-run{color:var(--wf-link);font-weight:600}
.wf .wf-stg-st.is-warn{color:var(--wf-warning);font-weight:600}
.wf .wf-stg-st.is-no{color:var(--wf-danger);font-weight:600}
/* compact activity row in the chat (reads etc.) */
.wf .wf-act{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--wf-r-md);background:var(--wf-container);font-size:12.5px;color:var(--wf-muted)}
.wf .wf-act b{color:var(--wf-text);font-weight:600}
/* composer with HB Code pills */
.wf .wf-hbc{display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--wf-line);background:var(--wf-card)}
.wf .wf-hbc-box{display:flex;flex-direction:column;gap:8px;padding:10px 10px 8px 12px;border:1px solid var(--wf-border);border-radius:var(--wf-r-lg);background:var(--wf-card);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wf .wf-hbc-t{min-height:22px;color:var(--wf-faint);font-size:13.5px}
.wf .wf-hbc.is-working .wf-hbc-box{border-color:var(--wf-accent)}
.wf .wf-hbc-pills{display:flex;align-items:center;gap:6px;row-gap:6px;flex-wrap:wrap;min-width:0}
.wf .wf-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;border:1px solid var(--wf-line);background:var(--wf-container);font-size:12px;font-weight:600;color:var(--wf-text);white-space:nowrap}
.wf .wf-pill.is-off{background:transparent;border-style:dashed;color:var(--wf-muted)}
.wf .wf-pill--ctx{background:transparent;border-color:transparent;color:var(--wf-muted);font-weight:500}
.wf .wf-ibtn{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--wf-r-md);color:var(--wf-muted);font-size:15px;font-weight:600}
.wf .wf-ibtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* preview panel (slide-out) */
.wf .wf-pv{display:flex;flex-direction:column;min-width:0;background:var(--wf-bg);box-shadow:-6px 0 18px rgba(0,0,0,.06)}
.wf .wf-pv-h{display:flex;flex-direction:column;gap:6px;padding:10px 16px;border-bottom:1px solid var(--wf-line);background:var(--wf-card)}
.wf .wf-pv-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.wf .wf-pv-x{margin-left:auto;color:var(--wf-muted);font-size:16px;font-weight:400}
.wf .wf-pv-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--wf-muted)}
.wf .wf-pv-b{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 16px 18px}
/* new-story empty state: suggestion cards above the composer */
.wf .wf-empty{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:20px 24px}
.wf .wf-empty-h{font-size:20px;font-weight:600}
.wf .wf-sugg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wf .wf-sugg-c{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);background:var(--wf-card)}
.wf .wf-thumb--row{flex-direction:row;align-items:stretch}
.wf .wf-thumb--row .wf-thumb-img{flex:none;width:240px;border-bottom:0;border-right:1px solid var(--wf-line)}

/* V-screens: artifacts inside the HB preview */
.wf .wf-v-compact .wf-grid-2,.wf .wf-v-compact .wf-thumbs,.wf .wf-v-compact .wf-a-guide{grid-template-columns:1fr}
.wf .wf-v-compact .wf-split{grid-template-columns:1fr}
.wf .wf-v-compact .wf-hero{padding:0}
.wf .wf-v-compact .wf-hero svg{max-width:none}
.wf .wf-v-compact .wf-tbl{table-layout:fixed;overflow-wrap:anywhere}
.wf .wf-v-compact .wf-tbl th{white-space:normal}
.wf .wf-v-compact .wf-grid-3{grid-template-columns:1fr}
.wf .wf-v-compact .wf-a-stages{grid-template-columns:repeat(3,minmax(0,1fr))}
.wf .wf-v-compact .wf-v-thumb{flex-direction:row}
.wf .wf-v-compact .wf-v-thumb .wf-thumb-img{width:280px;flex:none;border-bottom:0;border-right:1px solid var(--wf-line)}
.wf .wf-v-compact .wf-v-thumb .wf-thumb-img svg{width:280px;max-width:none}
.wf .wf-v-compact .wf-v-thumb .wf-thumb-cap{justify-content:center}
.wf .wf-v-compact .wf-kv{overflow-wrap:anywhere}
/* Shared mock accordions - match document headers */
.wf .wf-details{border:1px solid var(--wf-line);border-radius:10px;padding:0;gap:0;overflow:hidden;background:var(--wf-card)}
.wf .wf-det-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;min-height:28px;color:var(--wf-text);line-height:1.5;font-size:13px;font-weight:600}
.wf .wf-det-h::before{content:none}
.wf .wf-det-h::after{content:"⌄";display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--wf-line);border-radius:50%;background:var(--wf-container);color:var(--wf-muted);font:20px/1 var(--wf-font);transition:transform .15s}
.wf .wf-details.is-open .wf-det-h{background:var(--wf-container);border-bottom:1px solid var(--wf-line)}
.wf .wf-details.is-open .wf-det-h::before{content:none}
.wf .wf-details.is-open .wf-det-h::after{transform:rotate(180deg)}
.wf .wf-details:focus-within{outline:2px solid var(--wf-accent);outline-offset:2px}
.wf .wf-details>.wf-code{margin:12px 16px 16px}
@media(prefers-reduced-motion:reduce){.wf .wf-det-h::after{transition:none}}

/* C-screens */
.wf .wf-body--hb.wf-body--hb-cmp{grid-template-columns:208px 312px minmax(0,1fr)}
.wf .wf-c-sel{display:flex;flex-wrap:wrap;gap:6px}
.wf .wf-c-l{font-weight:500;color:var(--wf-muted)}
.wf .wf-c-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--wf-line);border-left:4px solid var(--wf-warning);border-radius:var(--wf-r-md);background:var(--wf-card)}
.wf .wf-c-sum-i{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 9px 0 3px;border-radius:999px;background:var(--wf-container);font-size:12px;font-weight:600;white-space:nowrap}
.wf .wf-c-sum-i.is-head{background:var(--wf-warning-soft);color:var(--wf-warning);font-size:13px}
.wf .wf-c-sum-i.is-plain{background:transparent;color:var(--wf-muted);font-weight:500;padding-left:4px}
.wf .wf-c-sample{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wf .wf-c-oi{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:5px;background:#F38303;color:#FFFFFF;font-size:14px}
.wf .wf-c-crumb{display:block;font-size:12px;font-weight:400;color:var(--wf-muted);line-height:1.2}
.wf .wf-rp-sec-h.is-chg{margin:-8px -12px 6px;padding:6px 12px;border-radius:var(--wf-r-md) var(--wf-r-md) 0 0}
.wf .wf-c-note{font-size:12px;font-weight:500;color:var(--wf-muted)}
.wf .wf-rp-sec-h .wf-c-note{float:right}
.wf .wf-c-fls{display:inline-block;width:max-content;font-size:12px;font-weight:700;color:var(--wf-danger);text-decoration:none}
.wf .wf-c-cond{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1.5px dashed var(--wf-accent);border-radius:var(--wf-r-md);background:var(--wf-accent-soft);font-size:12px}
.wf .wf-c-cond b{font-size:13px}
.wf .wf-c-cond .wf-claim{position:absolute;top:6px;right:22px}
.wf .wf-c-lwc{background:var(--wf-container-2);border-color:var(--wf-faint)}
.wf .wf-c-rel{padding:8px 12px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card);font-size:12px;color:var(--wf-muted)}
.wf .wf-c-rel b{display:block;font-size:13px;color:var(--wf-text)}
.wf .wf-c-trail{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid var(--wf-line);border-radius:var(--wf-r-md);background:var(--wf-card);font-size:12px}
.wf .wf-c-page{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0 0 4px;padding:6px 8px;border-radius:var(--wf-r-sm);background:var(--wf-warning-soft);box-shadow:inset 4px 0 0 var(--wf-warning);font:600 12.5px/1.4 var(--wf-mono);overflow-wrap:anywhere}
.wf .wf-c-page > span:last-child{font:500 12px/1.4 var(--wf-font);color:var(--wf-muted)}
.wf .wf-c-trail-i{color:var(--wf-muted);padding-left:8px}
.wf .wf-c-trail-i.is-hit{color:var(--wf-text);font-weight:600}
.wf .wf-c-pulled{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--wf-line)}
.wf .wf-c-pulled .wf-h3{margin-right:4px}
.wf .wf-c-hid{background:var(--wf-danger-soft);box-shadow:inset 4px 0 0 var(--wf-danger)}
.wf .wf-c-hid > span:first-child{text-decoration:line-through;text-decoration-color:var(--wf-danger)}
.wf .wf-c-lwc{display:flex;flex-direction:column;gap:2px;align-items:center}

/* V-screens: compact summaries and evidence pairs */
.wf .wf-v-compact .wf-v-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wf .wf-v-stats .wf-card{padding:12px;gap:8px}
.wf .wf-v-stats .wf-num{font-size:22px;line-height:1.2}
.wf .wf-v-stats .wf-h3{font-size:12px}
.wf .wf-v-compact .wf-v-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* K-screens (Docs) */
.wf .wf-k-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.wf .wf-k-tree{display:flex;flex-direction:column;gap:12px;min-width:0;padding:6px 8px 10px;border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);background:var(--wf-card)}
.wf .wf-k-tree .wf-subnav-i{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.wf .wf-k-tk{flex-basis:100%;font:600 12px/1.3 var(--wf-mono);color:var(--wf-muted)}
.wf .wf-k-sub{flex-basis:100%;padding-left:24px;font-size:12px;font-weight:500;color:var(--wf-muted)}
.wf .wf-k-warn{color:var(--wf-warning);font-weight:600}
.wf .wf-k-off{color:var(--wf-muted)}
.wf .wf-k-ft{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:3px;color:#FFFFFF;font:700 12px/1 var(--wf-font)}
.wf .wf-k-ft--doc{background:#2B579A} .wf .wf-k-ft--pdf{background:#B42332} .wf .wf-k-ft--xls{background:#1D6F42}
.wf .wf-k-drop{display:flex;flex-direction:column;gap:2px;padding:10px;border:1.5px dashed var(--wf-border);border-radius:var(--wf-r-md);background:var(--wf-container);font-size:12px;color:var(--wf-muted);text-align:center}
.wf .wf-k-drop b{font-size:13px;color:var(--wf-text)}
.wf .wf-k-doc{display:flex;flex-direction:column;min-width:0;border:1px solid var(--wf-line);border-radius:var(--wf-r-lg);background:var(--wf-card);overflow:hidden}
.wf .wf-k-docbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--wf-line);background:var(--wf-container);font-size:12px;color:var(--wf-muted)}
.wf .wf-k-body{display:flex;flex-direction:column;gap:12px;padding:18px 24px 22px;max-width:720px}
.wf .wf-k-h1{font-size:22px;font-weight:700;line-height:1.25}
.wf .wf-k-h2{margin-top:4px;font-size:16px;font-weight:700}
.wf .wf-k-p{font-size:14px;line-height:1.6}
.wf .wf-k-men{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:999px;background:var(--wf-accent-soft);color:var(--wf-link);border:1px solid var(--wf-link);font:600 12.5px/1 var(--wf-mono);vertical-align:1px}

/* Shared mock accordions: native keyboard-accessible Details */
.wf details.wf-details{display:block}
.wf summary.wf-det-h{list-style:none;cursor:pointer}
.wf summary.wf-det-h::-webkit-details-marker{display:none}
.wf summary.wf-det-h:focus-visible{outline:2px solid var(--wf-accent);outline-offset:-3px;border-radius:10px}
.wf .wf-details[open]>.wf-det-h{background:var(--wf-container);border-bottom:1px solid var(--wf-line)}
.wf .wf-details[open]>.wf-det-h::after{transform:rotate(180deg)}
.wf .wf-k-exp{position:absolute;top:38px;right:0;white-space:nowrap;font-size:12px;color:var(--wf-muted)}
.wf #wf-K1 .wf-main > .wf-row:first-child{padding-bottom:14px}
/* D-screens: narrow preview panel */
.wf .wf-pv .wf-vd-why{grid-template-columns:repeat(2,minmax(0,1fr))}
.wf .wf-rf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--wf-muted)}